/* ================================================================
   OXYBAG GLOBAL BUTTON SYSTEM - ONE SOURCE OF TRUTH / 2026-11-04
   ---------------------------------------------------------------
   FINAL APPROVED SECONDARY BUTTON SYSTEM.
   This file is the ONLY custom source of truth for the visual state
   of repeated secondary pink CTAs across CZ + SK.

   INCLUDED:
   - Homepage product-card CTA + "all news"
   - Reviews CTA (homepage + product detail)
   - Newsletter submit on every page
   - Listing controls: Load more / Back to top / prev-next pagination

   EXCLUDED INTENTIONALLY:
   - Hero/promo banner CTAs
   - Physiotherapist CTAs
   - Green Shoptet purchase buttons outside homepage cards
   - Active product-detail tabs
   ================================================================ */

:root {
    --oxy-btn-pink: #d9478b;
    --oxy-btn-soft: #fff3f8;
    --oxy-list-soft: #fff1f6;
    --oxy-list-border: #ee9fc2;
    --oxy-list-text: #171717;
}

/* ================================================================
   A) STANDARD SOFT-PINK SECONDARY CTA
   Exact approved compact geometry, with original 1px border.
   ================================================================ */
body:is(.in-index,.type-index) .oxy-home-products-list .oxy-home-cart-cta:not(.is-added),
body:is(.in-index,.type-index) .oxy-home-news-all-v80,
body:is(.in-index,.type-index) .oxy-hp-reviews__all,
body.type-detail .oxy-detail-reviews .oxy-hp-reviews__all,
#footer .oxy-newsletter__submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: auto;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 18px !important;
    border: 1px solid var(--oxy-btn-pink) !important;
    border-radius: 10px !important;
    background: var(--oxy-btn-soft) !important;
    color: var(--oxy-btn-pink) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
}

/* Newsletter remains full-width where the footer layout explicitly needs it. */
@media (max-width: 767px) {
    #footer .oxy-newsletter__submit {
        width: 100% !important;
    }
}

/* Inner text/icons must follow the CTA state, never a local black rule. */
body:is(.in-index,.type-index) .oxy-home-products-list .oxy-home-cart-cta:not(.is-added) *,
body:is(.in-index,.type-index) .oxy-home-news-all-v80 *,
body:is(.in-index,.type-index) .oxy-hp-reviews__all *,
body.type-detail .oxy-detail-reviews .oxy-hp-reviews__all *,
#footer .oxy-newsletter__submit * {
    color: inherit !important;
}

/* ================================================================
   B) LISTING / SEARCH CONTROLS
   Keep the approved native Shoptet geometry. Centralize only the
   approved soft color system and the original 1px outline.
   ================================================================ */
body:is(.type-category,.type-search,.oxy-search-results-page) .listingControls .btn,
body:is(.type-category,.type-search,.oxy-search-results-page) .listingControls .loadMore__button,
body:is(.type-category,.type-search,.oxy-search-results-page) .listingControls .goToTop__button,
body:is(.type-category,.type-search,.oxy-search-results-page) .listingControls .pagination__link--prev,
body:is(.type-category,.type-search,.oxy-search-results-page) .listingControls .pagination__link--next,
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination-loader > a,
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination-loader > button,
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination-loader > .btn,
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination-wrapper .pagination-prev,
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination-wrapper .pagination-next,
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination .pagination-prev,
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination .pagination-next,
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination [rel="prev"],
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination [rel="next"],
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination-wrapper [rel="prev"],
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination-wrapper [rel="next"] {
    border-style: solid !important;
    border-color: var(--oxy-list-border) !important;
    background-color: var(--oxy-list-soft) !important;
    color: var(--oxy-list-text) !important;
    box-shadow: none !important;
}

/* Text/icons inside listing controls inherit the approved dark state. */
body:is(.type-category,.type-search,.oxy-search-results-page) .listingControls :is(.btn,.loadMore__button,.goToTop__button,.pagination__link--prev,.pagination__link--next) *,
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination-loader > :is(a,button,.btn) * {
    color: inherit !important;
}

/* Restore the original Shoptet alignment for the UP icon only.
   The button itself keeps its native geometry; only the icon is vertically centered. */
body.type-category .listingControls .goToTop__button::before,
body.type-search .listingControls .goToTop__button::before,
body.oxy-search-results-page .listingControls .goToTop__button::before,
body.type-category .listingControls .goToTop__button > i,
body.type-category .listingControls .goToTop__button > svg,
body.type-search .listingControls .goToTop__button > i,
body.type-search .listingControls .goToTop__button > svg,
body.oxy-search-results-page .listingControls .goToTop__button > i,
body.oxy-search-results-page .listingControls .goToTop__button > svg {
    vertical-align: middle !important;
}

/* Page numbers are not buttons: no fill, no outline. */
body:is(.type-category,.type-search,.oxy-search-results-page) .listingControls a.pagination__link:not(.pagination__link--prev):not(.pagination__link--next),
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination .pagination-link:not(.pagination-prev):not(.pagination-next),
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination .current,
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination .active,
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination-wrapper .current,
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination-wrapper .active {
    border-color: transparent !important;
    border-width: 0 !important;
    background: transparent !important;
    color: var(--oxy-list-text) !important;
    box-shadow: none !important;
}

/* ================================================================
   C) INTERACTION STATES
   ================================================================ */
@media (hover: hover) and (pointer: fine) {
    body:is(.in-index,.type-index) .oxy-home-products-list .oxy-home-cart-cta:not(.is-added):not(.is-loading):hover,
    body:is(.in-index,.type-index) .oxy-home-news-all-v80:hover,
    body:is(.in-index,.type-index) .oxy-hp-reviews__all:hover,
    body.type-detail .oxy-detail-reviews .oxy-hp-reviews__all:hover,
    #footer .oxy-newsletter__submit:hover,
    body:is(.type-category,.type-search,.oxy-search-results-page) .listingControls .btn:not(:disabled):not(.disabled):not([aria-disabled="true"]):hover,
    body:is(.type-category,.type-search,.oxy-search-results-page) .listingControls .loadMore__button:not(:disabled):hover,
    body:is(.type-category,.type-search,.oxy-search-results-page) .listingControls .goToTop__button:not([aria-disabled="true"]):hover,
    body:is(.type-category,.type-search,.oxy-search-results-page) .listingControls .pagination__link--prev:not([aria-disabled="true"]):hover,
    body:is(.type-category,.type-search,.oxy-search-results-page) .listingControls .pagination__link--next:not([aria-disabled="true"]):hover,
    body:is(.type-category,.type-search,.oxy-search-results-page) .pagination-loader > a:not(.disabled):not([aria-disabled="true"]):hover,
    body:is(.type-category,.type-search,.oxy-search-results-page) .pagination-loader > button:not(:disabled):hover,
    body:is(.type-category,.type-search,.oxy-search-results-page) .pagination-loader > .btn:not(.disabled):hover,
    body:is(.type-category,.type-search,.oxy-search-results-page) .pagination :is(.pagination-prev,.pagination-next):not(.disabled):hover,
    body:is(.type-category,.type-search,.oxy-search-results-page) .pagination-wrapper :is(.pagination-prev,.pagination-next):not(.disabled):hover,
    body:is(.type-category,.type-search,.oxy-search-results-page) .pagination :is([rel="prev"],[rel="next"]):not(.disabled):hover,
    body:is(.type-category,.type-search,.oxy-search-results-page) .pagination-wrapper :is([rel="prev"],[rel="next"]):not(.disabled):hover {
        border-color: var(--oxy-btn-pink) !important;
        background: var(--oxy-btn-pink) !important;
        color: #fff !important;
        text-decoration: none !important;
    }
}

body:is(.in-index,.type-index) .oxy-home-news-all-v80:focus-visible,
body:is(.in-index,.type-index) .oxy-hp-reviews__all:focus-visible,
body.type-detail .oxy-detail-reviews .oxy-hp-reviews__all:focus-visible,
#footer .oxy-newsletter__submit:focus-visible,
body:is(.type-category,.type-search,.oxy-search-results-page) .listingControls :is(.btn,.loadMore__button,.goToTop__button,.pagination__link--prev,.pagination__link--next):focus-visible,
body:is(.type-category,.type-search,.oxy-search-results-page) .pagination-loader > :is(a,button,.btn):focus-visible {
    border-color: var(--oxy-btn-pink) !important;
    background: var(--oxy-btn-pink) !important;
    color: #fff !important;
    outline: 2px solid rgba(217,71,139,.22) !important;
    outline-offset: 2px !important;
}

@media (hover: none), (pointer: coarse) {
    body:is(.type-category,.type-search,.oxy-search-results-page) .listingControls :is(.btn,.loadMore__button,.goToTop__button,.pagination__link--prev,.pagination__link--next):active,
    body:is(.type-category,.type-search,.oxy-search-results-page) .pagination-loader > :is(a,button,.btn):active,
    body:is(.in-index,.type-index) .oxy-home-news-all-v80:active,
    body:is(.in-index,.type-index) .oxy-hp-reviews__all:active,
    body.type-detail .oxy-detail-reviews .oxy-hp-reviews__all:active,
    #footer .oxy-newsletter__submit:active {
        border-color: var(--oxy-btn-pink) !important;
        background: var(--oxy-btn-pink) !important;
        color: #fff !important;
    }
}