/*
 * YBLK Restaurant Plug — frontend customization layer.
 *
 * Концепция плагина: кастомизируем WooCommerce под нужды конкретного ресторана.
 * Здесь можно хранить аккуратные CSS-правки карточек товара, меню доставки,
 * кнопок, цен, блоков Gutenberg и других элементов витрины.
 *
 * Правило на будущее: не смешивать большие компоненты в одну кучу.
 * Для нового блока или модуля лучше создать отдельный файл/секцию и описать это в README.md.
 */

:root {
    --yblkrest-card-radius: 20px;
    --yblkrest-card-gap: 12px;
    --yblkrest-product-card-text-max-width: 1200px;
    --yblkrest-product-card-text-min-scale: 0.86;
    --yblkrest-product-card-text-shrink-rate: 0.28vw;
}

/*
 * Hide the focus ring only for mouse/touch interaction.
 * Keyboard focus remains visible via :focus-visible for accessibility.
 */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Вес порции на карточках/страницах товара. */
.yblkrest-portion-grams {
    color: #626262;
}

/*
 * Add "no-link-underline" in the Additional CSS class(es) field of a link
 * or its Gutenberg block wrapper to remove its text decoration.
 */
.no-link-underline,
.no-link-underline a,
.no-link-underline a:hover,
.no-link-underline a:focus {
    text-decoration: none !important;
}

/*
 * Use "yblkrest-hover-highlight" on a Gutenberg block to match the hover
 * background of the category buttons in [yblkrest_menu_navigation].
 */
.yblkrest-hover-highlight {
    transition: background-color 160ms ease;
}

.yblkrest-hover-highlight:hover,
.yblkrest-hover-highlight:focus-within {
    background: #faf8f4 !important;
}

/* Безопасный стартовый слой для WooCommerce-карточек. Можно менять под дизайн ресторана. */
.woocommerce ul.products li.product .yblkrest-portion-grams {
    margin-top: 8px;
    margin-bottom: 8px;
}

/*
 * Responsive text for product cards.
 * Use this class on any text element inside a product card
 * when you want the font size to scale down with viewport width
 * while still respecting the base size set by WordPress/theme styles.
 */
.yblkrest-product-card-text {
    font-size: clamp(
        calc(var(--yblkrest-product-card-text-base-size, 1em) * var(--yblkrest-product-card-text-min-scale)),
        calc(var(--yblkrest-product-card-text-base-size, 1em) - ((var(--yblkrest-product-card-text-max-width) - 100vw) * 0.004)),
        var(--yblkrest-product-card-text-base-size, 1em)
    ) !important;
    line-height: 1.35;
    white-space: normal;
}

.title-yblkrest_1 {
    font-size: clamp(32px, 6vw, 70px) !important;
}

.text-title-yblkrest_1 {
    font-size: clamp(10px, 3vw, 30px) !important;
}

/* Slightly smaller title text on desktop while preserving mobile sizing. */
@media (min-width: 1025px) {
    .text-title-yblkrest_1 {
        font-size: clamp(10px, 2.5vw, 26px) !important;
    }
}

/*
 * Gutenberg Group wrapper for product cards.
 * Add the class "group-for-card-product" to the Group block.
 */
.wp-block-group.group-for-card-product {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: clamp(32px, 7vw, 144px);
    padding-right: clamp(32px, 7vw, 144px);
}

@media (max-width: 1024px) {
    .wp-block-group.group-for-card-product,
    .wp-block-group.group-for-card-product.is-layout-flex,
    .wp-block-group.group-for-card-product.is-nowrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: clamp(12px, 3vw, 20px) !important;
        padding-right: clamp(12px, 3vw, 20px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: none !important;
        flex-wrap: initial !important;
        align-items: initial !important;
        justify-content: initial !important;
    }

    .wp-block-group.group-for-card-product .wp-block-group.is-layout-flex,
    .wp-block-group.group-for-card-product .wp-block-group.is-nowrap {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    .wp-block-group.group-for-card-product .wc-block-product-template,
    .wp-block-group.group-for-card-product .wc-block-product-template.is-layout-flex,
    .wp-block-group.group-for-card-product .wc-block-product-template.is-flex-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: initial !important;
        align-items: stretch !important;
    }

    .wp-block-group.group-for-card-product .wc-block-product-template > li {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
    }

    .wp-block-group.group-for-card-product .wc-block-product-template > li > * {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
    }

    .wp-block-group.group-for-card-product .wc-block-product-template > li > .wp-block-group.is-layout-flex {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        gap: 8px !important;
        border-radius: 18px !important;
        container-type: inline-size;
    }

    .wp-block-group.group-for-card-product .wc-block-product-template > li .wp-block-woocommerce-product-image,
    .wp-block-group.group-for-card-product .wc-block-product-template > li .wc-block-components-product-image {
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
        border-radius: 18px !important;
    }

    .wp-block-group.group-for-card-product .wc-block-product-template > li .wp-block-woocommerce-product-image img,
    .wp-block-group.group-for-card-product .wc-block-product-template > li .wc-block-components-product-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .wp-block-group.group-for-card-product .wc-block-product-template > li .wc-block-components-product-price {
        font-size: clamp(18px, 2.8vw, 22px) !important;
        line-height: 1.1 !important;
        margin: 0 !important;
    }

    .wp-block-group.group-for-card-product .wc-block-product-template > li .wp-block-button:not(.is-yblkrest-button-buy) .wp-block-button__link,
    .wp-block-group.group-for-card-product .wc-block-product-template > li .wp-block-button:not(.is-yblkrest-button-buy) .wc-block-components-product-button__button {
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 999px !important;
    }

    .wp-block-group.group-for-card-product .wc-block-product-template > li .wp-block-button.is-yblkrest-button-buy .wp-block-button__link,
    .wp-block-group.group-for-card-product .wc-block-product-template > li .wp-block-button.is-yblkrest-button-buy .wc-block-components-product-button__button,
    .wp-block-group.group-for-card-product .wc-block-product-template > li .wp-block-button.is-yblkrest-button-buy .yblkrest-button-buy__quantity {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: var(--yblkrest-button-buy-control-height) !important;
        min-height: var(--yblkrest-button-buy-control-height) !important;
        max-height: var(--yblkrest-button-buy-control-height) !important;
        padding: 0 !important;
        line-height: var(--yblkrest-button-buy-control-height) !important;
    }
}

/*
 * Make the site header stay visible while scrolling.
 * Targets common WordPress/theme header wrappers so we do not depend on one theme only.
 */
:where(header, .header, .site-header, #masthead, [role="banner"]) {
    position: sticky !important;
    top: 0;
    z-index: 9999;
    width: 100%;
}

body.admin-bar :where(header, .header, .site-header, #masthead, [role="banner"]) {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar :where(header, .header, .site-header, #masthead, [role="banner"]) {
        top: 46px;
    }
}

body.yblkrest-notice-toasts-enabled .woocommerce-notices-wrapper,
body.yblkrest-notice-toasts-enabled .wc-block-store-notices,
body.yblkrest-notice-toasts-enabled .wc-block-components-notices {
    display: none !important;
}

.yblkrest-notice-toasts {
    position: fixed;
    right: clamp(12px, 2vw, 24px);
    bottom: calc(clamp(12px, 2vw, 24px) + env(safe-area-inset-bottom, 0px));
    z-index: 9999;
    display: grid;
    gap: 10px;
    width: min(calc(100vw - 24px), 420px);
    pointer-events: none;
}

.yblkrest-notice-toast {
    display: flex;
    gap: 10px;
    align-items: start;
    padding: 14px 16px;
    border: 1px solid rgba(45, 42, 38, 0.08);
    border-left-width: 4px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 36px rgba(31, 27, 23, 0.12);
    color: #1f1f1f;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.24s ease, transform 0.24s ease;
    backdrop-filter: blur(8px);
}

.yblkrest-notice-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.yblkrest-notice-toast.is-hiding {
    opacity: 0;
    transform: translateY(12px);
}

.yblkrest-notice-toast__content {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 500;
    text-align: left !important;
}

.yblkrest-notice-toast__content ul,
.yblkrest-notice-toast__content ol,
.yblkrest-notice-toast__content p {
    margin: 0;
    text-align: left !important;
}

.yblkrest-notice-toast__content ul,
.yblkrest-notice-toast__content ol {
    padding-left: 1.2em;
    list-style-position: outside;
}

.yblkrest-notice-toast__content .woocommerce-error,
.yblkrest-notice-toast__content .woocommerce-message,
.yblkrest-notice-toast__content .woocommerce-info,
.yblkrest-notice-toast__content .wc-block-components-notice-banner {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
}

.yblkrest-notice-toast__content .woocommerce-error li,
.yblkrest-notice-toast__content .woocommerce-message li,
.yblkrest-notice-toast__content .woocommerce-info li,
.yblkrest-notice-toast__content .wc-block-components-notice-banner li {
    display: list-item !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.yblkrest-notice-toast__content a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.yblkrest-notice-toast__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(109, 107, 104, 0.12);
    color: #6d6b68;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.yblkrest-notice-toast__close:hover,
.yblkrest-notice-toast__close:focus {
    background: rgba(109, 107, 104, 0.18);
}

.yblkrest-notice-toast--success {
    border-left-color: #5a9a63;
}

.yblkrest-notice-toast--info {
    border-left-color: #8b7a59;
}

.yblkrest-notice-toast--error {
    border-left-color: #b95c53;
}

@media (max-width: 640px) {
    .yblkrest-notice-toasts {
        right: 50%;
        left: 50%;
        width: calc(100vw - 16px);
        transform: translateX(-50%);
    }

    .yblkrest-notice-toast {
        padding: 12px 14px;
        border-radius: 16px;
    }
}