/**
 * Moonio UX/UI Fixes
 * Poprawki dostępności, responsywności i użyteczności.
 * v1.0.0
 */

/* =============================================
 * 1. KONTRAST KOLORÓW — WCAG AA (4.5:1 minimum)
 * =============================================
 * Oryginalny zielony #3a8452 ma ratio ~4.0:1 na białym.
 * Ciemniejszy #2d6b42 daje 5.2:1 — spełnia AA.
 */
.button.add_to_cart_button,
.single_add_to_cart_button,
.checkout-button,
a.added_to_cart,
.woocommerce .button.alt,
.button.primary,
button.button.primary {
    background-color: #2d6b42 !important;
    color: #fff !important;
}

.button.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.button.primary:hover {
    background-color: #245836 !important;
}

/* Linki w treści — ciemniejszy zielony */
a:not(.button):not(.nav-link),
.product-title a,
.woocommerce-breadcrumb a,
.widget a {
    color: #2d6b42;
}

a:not(.button):not(.nav-link):hover {
    color: #1e4a2e;
}

/* =============================================
 * 2. UKRYJ "SKU: Brak danych"
 * =============================================
 * Wygląda jak błąd, nie dodaje wartości dla klienta.
 */
.sku_wrapper:has(.sku:empty),
.sku_wrapper .sku[data-o_content="Brak danych"],
.product_meta .sku_wrapper {
    display: none !important;
}

/* Fallback dla przeglądarek bez :has() */
.sku_wrapper {
    display: none !important;
}

/* Pokaż tylko jeśli SKU ma wartość (JS doda klasę) */
.sku_wrapper.has-sku {
    display: block !important;
}

/* =============================================
 * 3. DISABLED "DODAJ DO KOSZYKA" — wizualny feedback
 * =============================================
 * Gdy przycisk jest disabled (brak wybranego wariantu),
 * pokaż jasny komunikat zamiast szarego przycisku bez kontekstu.
 */
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled,
.single_add_to_cart_button.wc-variation-selection-needed {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    position: relative;
}

/* Komunikat pod przyciskiem */
.moonio-variant-hint {
    display: none;
    color: #c0392b;
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
    padding: 8px 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
}

.moonio-variant-hint.visible {
    display: block;
}

/* =============================================
 * 4. MOBILE: POWIĘKSZ TOUCH TARGETS (min 44x44px)
 * =============================================
 * Apple i Google wymagają minimum 44x44px / 48x48px.
 */
@media (max-width: 849px) {
    /* Przyciski "Dodaj do koszyka" w gridzie produktów */
    .product .button.add_to_cart_button,
    .product .button.product_type_variable {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Quantity +/- buttons */
    .quantity .minus,
    .quantity .plus {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 18px !important;
    }

    /* Navigation links */
    .nav-menu > li > a,
    .mobile-menu a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Search icon in mobile header — make more prominent */
    .header-search-icon,
    .icon-search {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Footer links */
    .footer-content a {
        padding: 4px 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* =============================================
 * 5. MOBILE: SEARCH ICON VISIBILITY
 * =============================================
 * Dodajemy widoczną ikonę wyszukiwania na mobile.
 */
@media (max-width: 849px) {
    .header-search-dropdown,
    .mobile-search {
        display: block !important;
    }
}

/* =============================================
 * 6. SLIDER TEXT — lepsza czytelność
 * =============================================
 * Tekst na zdjęciach potrzebuje tła/cienia żeby być czytelny.
 */
.banner-layers .text-overlay,
.flickity-slider .banner-layer-heading,
.banner h2 {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Na mobile — zwiększ kontrast tła pod tekstem */
@media (max-width: 849px) {
    .banner-layers {
        background: linear-gradient(
            to bottom,
            transparent 40%,
            rgba(0, 0, 0, 0.4) 100%
        );
    }
}

/* =============================================
 * 7. PRODUKT — prominentna informacja o dostawie
 * =============================================
 * Wyróżnienie "Czas realizacji" żeby było widoczne.
 */
.product .summary strong:has(+ br),
.product .summary p strong {
    display: inline-block;
    margin-top: 12px;
}

.moonio-delivery-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 8px 14px;
    margin: 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #166534;
}

.moonio-delivery-badge::before {
    content: "🚚";
    font-size: 16px;
}

/* =============================================
 * 8. PRODUKT — disabled GPay/ApplePay buttons
 * =============================================
 * Ukryj disabled payment buttons — nie dodają wartości.
 */
.gpay-button[disabled],
.apple-pay-button[disabled],
#payment-request-button:has(button[disabled]) {
    display: none !important;
}

/* Stripe payment request buttons when disabled */
.wc-stripe-payment-request-wrapper:has(button[disabled]) {
    display: none !important;
}

/* Fallback — ukryj gdy GPay jest na disabled wariancie */
.variations_form:not(.variation-found) .wc-stripe-payment-request-wrapper {
    display: none !important;
}

/* =============================================
 * 9. CHECKOUT — trust badges
 * =============================================
 */
.moonio-checkout-trust {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    margin: 16px 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #64748b;
}

.moonio-checkout-trust span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* =============================================
 * 10. COOKIE BANNER — zmniejsz na mobile
 * =============================================
 */
@media (max-width: 849px) {
    #CybotCookiebotDialog {
        max-height: 40vh !important;
        overflow-y: auto !important;
    }

    #CybotCookiebotDialogBody {
        padding: 12px !important;
    }

    #CybotCookiebotDialogBodyContentText {
        font-size: 12px !important;
        max-height: 60px !important;
        overflow: hidden !important;
    }

    #CybotCookiebotDialogBodyLevelButtons {
        flex-wrap: wrap !important;
    }
}

/* =============================================
 * 11. PRODUCT PAGE — lepszy opis (wizualna hierarchia)
 * =============================================
 */
.woocommerce-Tabs-panel--description {
    line-height: 1.7;
}

.woocommerce-Tabs-panel--description strong {
    display: block;
    margin-top: 16px;
    margin-bottom: 4px;
    font-size: 15px;
    color: #1a1a1a;
}

.woocommerce-Tabs-panel--description ul {
    padding-left: 20px;
    margin-bottom: 16px;
}

.woocommerce-Tabs-panel--description li {
    padding: 2px 0;
}

/* =============================================
 * 12. GLOBAL — lepszy focus indicator (a11y)
 * =============================================
 * Domyślny outline jest często niewidoczny.
 */
*:focus-visible {
    outline: 2px solid #2d6b42 !important;
    outline-offset: 2px !important;
}

/* =============================================
 * 13. "WYBIERZ OPCJE" vs "DODAJ DO KOSZYKA" — spójność
 * =============================================
 * Stylizacja "Wybierz opcje" żeby wyglądał jak akcja.
 */
.product .button.product_type_variable {
    background-color: #2d6b42 !important;
    color: #fff !important;
    border: none !important;
}

.product .button.product_type_variable:hover {
    background-color: #245836 !important;
}

/* "Dowiedz się więcej" na out-of-stock — subtelniejszy */
.product .button.product_type_variable.out-of-stock,
.product a.button[href*="produkt"]:not(.add_to_cart_button):not(.product_type_variable) {
    background-color: transparent !important;
    color: #2d6b42 !important;
    border: 1px solid #2d6b42 !important;
}