/*
Theme Name: Mal- und Rätselbücher
Author: Gabor
Description: 100% tiszta Tailwind CSS alapú egyedi sablon.
Version: 1.0.0
*/

:root {
    /* Surface */
    --background: 0 0% 100%;
    --foreground: 240 5% 11%;
    --muted: 0 0% 94%;
    --muted-foreground: 240 4% 38%;
    --card: 0 0% 100%;
    --card-foreground: 240 5% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 5% 11%;
    --primary: 28 100% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 211 71% 59%;
    --secondary-foreground: 0 0% 100%;
    --accent: 0 0% 96%;
    --accent-foreground: 240 5% 11%;
    --border: 0 0% 90%;
    --input: 0 0% 90%;
    --ring: 28 100% 50%;
    --radius: 0.875rem;
    --shadow-soft: 0 4px 20px -8px hsl(240 5% 11% / 0.08);
    --shadow-lift: 0 12px 32px -10px hsl(240 5% 11% / 0.12);
    --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
}

/* * TAILWIND & LOVABLE BORDER FIX 
 * Ez garantálja, hogy a keretek látszódjanak és felvegyék a var(--border) színt 
 */
*,
::before,
::after {
    border-style: solid;
    border-width: 0;
    border-color: hsl(var(--border));
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Onest', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 17px !important;
    line-height: 1.6;
}

/* ── GLOBÁLIS CÍMSOROK (HEADLINES) ───────────────────────── */
h1:not(.eyebrow),
h2:not(.eyebrow),
h3:not(.eyebrow),
h4:not(.eyebrow),
h5:not(.eyebrow),
h6:not(.eyebrow),
.elementor-widget-heading:not(.eyebrow) .elementor-heading-title {
    font-family: 'Onest', ui-sans-serif, system-ui, sans-serif !important;
    color: hsl(var(--foreground));
    text-wrap: balance;
    letter-spacing: -0.02em;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

/* H1 - Főcímek (pl. text-4xl / md:text-5xl) */
h1 {
    font-size: 2.25rem !important;
    /* 36px */
    line-height: 1.1 !important;
    font-weight: 800;
    /* Extra bold */
}

@media (min-width: 768px) {
    h1 {
        font-size: 3rem !important;
        /* 48px */
    }
}

/* H2 - Szekció címek (pl. text-3xl / md:text-4xl) */
h2 {
    font-size: 1.875rem !important;
    /* 30px */
}

@media (min-width: 768px) {
    h2 {
        font-size: 2.25rem !important;
        /* 36px */
    }
}

/* H3 - Kisebb blokk címek (pl. text-2xl / md:text-3xl) */
h3 {
    font-size: 1.5rem !important;
    /* 24px */
}

@media (min-width: 768px) {
    h3 {
        font-size: 1.875rem !important;
        /* 30px */
    }
}

/* H4 - Kártya címek (pl. text-xl) */
h4 {
    font-size: 1.25rem !important;
    /* 20px */
    font-weight: 600;
    /* Semibold */
}

/* H5 & H6 - Apró címek */
h5 {
    font-size: 1.125rem !important;
    font-weight: 600;
}

/* 18px */
h6 {
    font-size: 1rem !important;
    font-weight: 600;
}

/* 16px */

p {
    text-wrap: pretty;
    overflow-wrap: break-word;
}

::selection {
    background: hsl(var(--primary) / 0.2);
}

/* ── ENTRY CONTENT (POST/PAGE) TYPOGRAPHY ───────────────── */
.entry-content > * + * {
    margin-top: 1.5em;
}

.entry-content ul {
    list-style-type: disc;
    padding-left: 1.5em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.entry-content ol {
    list-style-type: decimal;
    padding-left: 1.5em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.entry-content li + li {
    margin-top: 0.5em;
}

.entry-content img {
    border-radius: 0.75rem;
    height: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.entry-content a:not(.button):not(.added_to_cart):not(.woocommerce-MyAccount-navigation a):not(.no-underline):not(.bg-primary):not(.bg-muted) {
    color: hsl(var(--primary));
    text-decoration: none;
    font-weight: 500;
}

.entry-content a:not(.button):not(.added_to_cart):not(.woocommerce-MyAccount-navigation a):not(.no-underline):not(.bg-primary):not(.bg-muted):hover {
    color: hsl(var(--primary) / 0.8);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ── WooCommerce Account Speciális Fixek ───────────────────────── */
.woocommerce-account .entry-content ul:not(.woocommerce-error):not(.woocommerce-message):not(.woocommerce-info):not(.woocommerce-notice) {
    list-style-type: none !important;
    padding-left: 0 !important;
}

.woocommerce-MyAccount-navigation a,
.woocommerce-MyAccount-content a:not(.view) {
    text-decoration: none !important;
}

.woocommerce-MyAccount-content .prose a,
.woocommerce-MyAccount-content p a {
    text-decoration: underline !important;
}

.eyebrow {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: hsl(var(--muted-foreground));
    font-weight: 500;
}

/* Hide Spin Buttons */
.hide-spin-button::-webkit-outer-spin-button,
.hide-spin-button::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.hide-spin-button {
    -moz-appearance: textfield;
}

/* WP Utilities (Ezek kellenek a WP admin sávhoz és az akadálymentesítéshez, de nem zavarnak be a dizájnba) */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    word-break: normal
}

.screen-reader-text:focus {
    background-color: #f7f7f7;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
    clip: auto !important;
    clip-path: none;
    color: #007acc;
    display: block;
    font-size: 14px;
    font-size: .875rem;
    font-weight: 700;
    height: auto;
    right: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000
}

/* WooCommerce Grid Fix - Megállítjuk a Woo alapértelmezett elrendezését */
.woocommerce ul.products.grid,
.woocommerce-page ul.products.grid {
    display: grid !important;
}

.woocommerce ul.products.grid::before,
.woocommerce ul.products.grid::after {
    display: none !important;
    /* A Woo 'clearfix' elrontja a gridet */
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: auto !important;
    /* Felülírjuk a Woo fix %-os szélességét */
    margin: 0 !important;
    /* A Tailwind gap-et használunk helyette */
    float: none !important;
    display: flex !important;
    flex-direction: column;
}

/* WooCommerce felesleges gombok és elemek elrejtése */
.woocommerce-loop-product__title,
.woocommerce-after-shop-loop-item .button,
.woocommerce-product-details__short-description+.button {
    display: none !important;
}

/* A rendező és számláló legyen teljes szélességű, ne a rács része */
.woocommerce-before-shop-loop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 2rem;
    grid-column: 1 / -1;
    /* Ha véletlen rácson belül maradna */
}

/* Rács fix: kényszerítjük a 3 oszlopot és töröljük a Woo floatokat */
.woocommerce ul.products.grid {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

@media (min-width: 768px) {
    .woocommerce ul.products.grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    .woocommerce ul.products.grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

.woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    list-style: none !important;
}

/* A "clear" elemek törlése, amik eltolják az első sort */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none !important;
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
 * UNIFIED BUTTON SYSTEM
 * Etalon: 404.php Primary Button
 * Három variáns: Primary, Secondary (Quiet), Outline
 * Két méret: Default (h-12), Compact (h-10)
 * ═══════════════════════════════════════════════════════════════ */

/* ── Base: Minden gomb közös tulajdonsága ────────────────────── */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.wp-element-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    font-family: 'Onest', ui-sans-serif, system-ui, sans-serif !important;
    border-radius: 9999px !important;
    height: 3rem !important;
    /* h-12 */
    padding: 0 2rem !important;
    /* px-8 */
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 200ms ease !important;
    line-height: 1 !important;
    border: none !important;
    outline: none !important;
}

/* ── PRIMARY: .button.alt, .checkout-button, .single_add_to_cart_button ── */
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.checkout-button,
.woocommerce .single_add_to_cart_button,
.woocommerce #respond input#submit.alt,
.wc-block-components-button:not(.wc-block-components-button--outlined),
.wp-element-button {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    box-shadow: var(--shadow-soft) !important;
}

.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.checkout-button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #respond input#submit.alt:hover,
.wc-block-components-button:not(.wc-block-components-button--outlined):hover,
.wp-element-button:hover {
    box-shadow: var(--shadow-lift) !important;
    transform: translateY(-2px) !important;
}

.woocommerce .button.alt:active,
.woocommerce a.button.alt:active,
.woocommerce button.button.alt:active,
.woocommerce input.button.alt:active,
.woocommerce a.checkout-button:active,
.woocommerce .single_add_to_cart_button:active,
.wc-block-components-button:not(.wc-block-components-button--outlined):active,
.wp-element-button:active {
    transform: scale(0.97) !important;
}

/* ── SECONDARY (Quiet): .button (alap, nem .alt) ────────────── */
.woocommerce .button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button),
.woocommerce a.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button),
.woocommerce button.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button),
.woocommerce input.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button) {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
    box-shadow: none !important;
}

.woocommerce .button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):hover,
.woocommerce a.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):hover,
.woocommerce button.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):hover,
.woocommerce input.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):hover {
    background-color: hsl(var(--muted) / 0.8) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-soft) !important;
}

.woocommerce .button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):active,
.woocommerce a.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):active,
.woocommerce button.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):active,
.woocommerce input.button:not(.alt):not(.checkout-button):not(.single_add_to_cart_button):active {
    transform: scale(0.97) !important;
}

/* ── OUTLINE variáns: .btn-outline (egyedi osztály) ──────────── */
.btn-outline,
.woocommerce .button.btn-outline,
.wc-block-components-button--outlined {
    background-color: transparent !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border)) !important;
    box-shadow: none !important;
}

.btn-outline:hover,
.woocommerce .button.btn-outline:hover,
.wc-block-components-button--outlined:hover {
    background-color: hsl(var(--muted)) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-soft) !important;
}

.btn-outline:active,
.woocommerce .button.btn-outline:active,
.wc-block-components-button--outlined:active {
    transform: scale(0.97) !important;
}

/* ── COMPACT méret: .btn-compact ─────────────────────────────── */
.btn-compact,
.woocommerce .button.btn-compact {
    height: 2.5rem !important;
    /* h-10 */
    padding: 0 1.5rem !important;
    /* px-6 */
    font-size: 0.8125rem !important;
}

/* ── Disabled állapot ────────────────────────────────────────── */
.woocommerce .button:disabled,
.woocommerce .button[disabled],
.woocommerce input.button:disabled,
.woocommerce input.button[disabled] {
    opacity: 0.5 !important;
    pointer-events: none !important;
    transform: none !important;
}

/* ── Focus-visible (akadálymentesítés) ───────────────────────── */
.woocommerce .button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce input.button:focus-visible,
.wp-element-button:focus-visible {
    outline: 2px solid hsl(var(--ring)) !important;
    outline-offset: 2px !important;
}

/* ── WooCommerce natív quantity input melletti gomb fix ───────── */
.woocommerce div.quantity+.button,
.woocommerce div.quantity+.single_add_to_cart_button {
    margin-left: 0.75rem !important;
}

/* ── Custom Quantity Input Double Border Fix ──────────────────── */
.qty-wrapper input.qty {
    border: 0 !important;
    box-shadow: none !important;
}


/* ═══════════════════════════════════════════════════════════════
 * CHECKOUT PAGE — Layout & Form Overrides
 * ═══════════════════════════════════════════════════════════════ */

/* ── Float → Grid: form-row-first / form-row-last ────────────── */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {

    .woocommerce-billing-fields__field-wrapper,
    .woocommerce-shipping-fields__field-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Wide mezők (email, street, country, notes) teljes szélességre */
.woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce-shipping-fields__field-wrapper .form-row-wide,
.woocommerce-additional-fields__field-wrapper .form-row-wide {
    grid-column: 1 / -1;
}

/* Woo float reset */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
    float: none !important;
    width: auto !important;
}

.woocommerce form .form-row {
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Review order table reset ────────────────────────────────── */
.woocommerce-checkout-review-order-table {
    border: none !important;
    padding: 0 !important;
    list-style: none !important;
}

.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout-review-order-table tfoot,
.woocommerce-checkout-review-order-table tr,
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* ── Shipping method radios in checkout ──────────────────────── */
.woocommerce-shipping-methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-shipping-methods li {
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-shipping-methods label {
    font-size: 0.875rem;
    cursor: pointer;
}

.woocommerce-shipping-methods input[type="radio"] {
    accent-color: hsl(var(--primary));
}

/* ── Payment box (gateway fields) ────────────────────────────── */
.woocommerce-checkout-payment .payment_box {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 0.5rem !important;
    color: hsl(var(--muted-foreground)) !important;
    font-size: 13px !important;
}

.woocommerce-checkout-payment .payment_box::before {
    display: none !important;
}

/* ── Payment method radio highlight ──────────────────────────── */
.wc_payment_method input[type="radio"]:checked~div .payment_box,
.wc_payment_method input[type="radio"]:checked+div .payment_box {
    display: block !important;
}

/* ── Checkout error states ───────────────────────────────────── */
.woocommerce form .form-row.woocommerce-invalid .select2-container,
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
    border-color: #ef4444 !important;
}

.woocommerce form .form-row.woocommerce-invalid label {
    color: #ef4444 !important;
}

.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
    border-color: hsl(var(--primary)) !important;
}

/* ── Global Input Overrides ── */
input.input-text,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
    border: 1px solid hsl(var(--input)) !important;
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
    transition: all 0.2s ease !important;
}

input.input-text:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus {
    border-color: hsl(var(--primary)) !important;
    box-shadow: 0 0 0 2px hsla(var(--primary), 0.15) !important;
    outline: none !important;
}

/* ── Terms & Conditions checkbox area ────────────────────────── */
.woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 1rem;
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text {
    font-size: 12.5px;
    color: hsl(var(--muted-foreground));
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

/* ── WooCommerce notices on checkout (styled alerts) ─────────── */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
    border-radius: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 13.5px !important;
    border-width: 1px !important;
    border-style: solid !important;
    margin-bottom: 1.5rem !important;
    list-style: none !important;
    background-image: none !important;
}

.woocommerce-checkout .woocommerce-error {
    border-color: #fecaca !important;
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

.woocommerce-checkout .woocommerce-message {
    border-color: hsl(var(--border)) !important;
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
}

.woocommerce-checkout .woocommerce-info {
    border-color: hsl(var(--border)) !important;
    background-color: hsl(var(--muted) / 0.5) !important;
    color: hsl(var(--muted-foreground)) !important;
}

/* ── Select2 (country/state dropdown) override ───────────────── */
.woocommerce .select2-container--default .select2-selection--single {
    height: 2.5rem !important;
    border: 1px solid hsl(var(--input)) !important;
    border-radius: 0.375rem !important;
    background-color: hsl(var(--background)) !important;
    padding: 0 0.75rem !important;
    display: flex !important;
    align-items: center !important;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1 !important;
    padding: 0 !important;
    color: hsl(var(--foreground)) !important;
    font-size: 15px !important;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 0.5rem !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

.select2-dropdown {
    border-color: hsl(var(--border)) !important;
    border-radius: 0.375rem !important;
    box-shadow: var(--shadow-lift) !important;
}

.select2-container--open .select2-selection--single {
    outline: 2px solid hsl(var(--ring)) !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   WOOCOMMERCE ÉRTESÍTÉSEK (TOASTS / NOTICES / ALERTS) JAVÍTÁSA
   ========================================================================== */


/* Explicit bulletproof padding guarantee for all notice boxes (Lost password, Account, Checkout, Single product) */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-notice,
ul.woocommerce-error,
ul.woocommerce-message,
ul.woocommerce-info,
.entry-content ul.woocommerce-error,
.entry-content ul.woocommerce-message,
.entry-content ul.woocommerce-info,
.woocommerce-account .entry-content ul.woocommerce-error,
.woocommerce-account .entry-content ul.woocommerce-message,
.woocommerce-account .entry-content ul.woocommerce-info,
.woocommerce-notices-wrapper ul.woocommerce-error,
.woocommerce-notices-wrapper ul.woocommerce-message,
.woocommerce-notices-wrapper ul.woocommerce-info {
    padding: 16px 22px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    margin: 0 0 1.5rem 0 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    list-style: none !important;
}

ul.woocommerce-error li,
ul.woocommerce-message li,
ul.woocommerce-info li,
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    list-style: none !important;
    line-height: 1.6 !important;
}

/* Az értesítéseket összefogó konténer */
.woocommerce-notices-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1.75rem 0 !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Alapstílus minden értesítésre (Info, Error, Success) */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notice {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1.5rem 0 !important;
    float: none !important;
    clear: both !important;
    padding: 16px 22px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    display: block !important;
    box-sizing: border-box !important;
    list-style: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    word-break: break-word !important;
}

/* Listák és bekezdések az értesítéseken belül */
.woocommerce-message li,
.woocommerce-error li,
.woocommerce-info li,
.woocommerce-notice li,
.woocommerce-message p,
.woocommerce-error p,
.woocommerce-info p,
.woocommerce-notice p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    list-style: none !important;
    display: block !important;
}

.woocommerce-message li:not(:last-child),
.woocommerce-error li:not(:last-child),
.woocommerce-info li:not(:last-child) {
    margin-bottom: 8px !important;
}

/* Ikonok eltüntetése */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
    display: none !important;
}

/* 1. INFO (pl. "Van kuponod?") */
.woocommerce-info,
.showcoupon {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 5px solid #0284c7 !important;
    color: #0f172a !important;
}

/* 2. ERROR (Hibaüzenetek) */
.woocommerce-error,
.woocommerce-NoticeGroup-checkout .woocommerce-error {
    background-color: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-left: 5px solid #ef4444 !important;
    color: #991b1b !important;
}

.woocommerce-error strong,
.woocommerce-error li strong {
    color: #7f1d1d !important;
    font-weight: 600 !important;
}

/* 3. SUCCESS (Sikeres művelet) */
.woocommerce-message {
    background-color: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-left: 5px solid #22c55e !important;
    color: #166534 !important;
}

.woocommerce-message strong,
.woocommerce-message li strong {
    color: #14532d !important;
    font-weight: 600 !important;
}

/* Linkek az értesítéseken belül */
.woocommerce-message a:not(.button),
.woocommerce-error a:not(.button),
.woocommerce-info a:not(.button) {
    color: inherit !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    transition: opacity 0.2s ease !important;
}

.woocommerce-message a:not(.button):hover,
.woocommerce-error a:not(.button):hover,
.woocommerce-info a:not(.button):hover {
    opacity: 0.8 !important;
}

/* Gombok az értesítéseken belül (pl. "Kosár megtekintése") */
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
    float: right !important;
    margin-left: 12px !important;
    margin-top: -2px !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

/* Speciális eset: Ha az értesítés nem konténerben van (pl. más oldalak tetején) */
body:not(.woocommerce-checkout) .woocommerce-notices-wrapper {
    max-width: 1280px;
    padding: 0 1.5rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    body:not(.woocommerce-checkout) .woocommerce-notices-wrapper {
        padding: 0 2.5rem;
    }
}

/* ── Shop Rendezés (Sorting Dropdown) Stílusok ───────────────────────────── */
.woocommerce-ordering {
    margin: 0 !important;
}

.woocommerce-ordering select {
    display: flex !important;
    height: 2.5rem !important;
    /* h-10 */
    width: 100% !important;
    min-width: 200px !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: calc(var(--radius) - 2px) !important;
    /* rounded-md */
    border: 1px solid hsl(var(--border)) !important;
    background-color: hsl(var(--card)) !important;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    /* text-sm */
    font-weight: 500 !important;
    color: hsl(var(--foreground)) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    /* Custom Chevron SVG */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1rem !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    /* shadow-sm */
    transition: all 0.2s ease !important;
}

.woocommerce-ordering select:hover {
    border-color: hsl(var(--primary) / 0.5) !important;
}

.woocommerce-ordering select:focus {
    outline: none !important;
    border-color: hsl(var(--primary)) !important;
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

/* ── Kosárba tétel utáni AJAX gomb logikája ───────────────────────────── */

/* 1. Töltés (Loading) állapota az Add to cart gombnak */
ul.products li.product .add_to_cart_button.loading {
    opacity: 0.8 !important;
    pointer-events: none !important;
    position: relative !important;
    color: transparent !important;
    /* Szöveg eltüntetése */
}

ul.products li.product .add_to_cart_button.loading::after {
    content: "sync" !important;
    font-family: 'Material Symbols Outlined' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    color: hsl(var(--primary-foreground)) !important;
    font-size: 1.25rem !important;
    animation: spin-center 1s linear infinite !important;
    /* Alapértelmezett Woo spinner felülírása */
    background: none !important;
    display: block !important;
    margin: 0 !important;
}

@keyframes spin-center {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 2. Az eredeti kosárba rakás gomb eltüntetése sikeres hozzáadás után */
ul.products li.product .add_to_cart_button.added {
    display: none !important;
}

/* ── Checkout Kupon Űrlap Rejtése ─────────────────────────────────────────── */
.woocommerce-form-coupon-toggle,
form.checkout_coupon {
    display: none !important;
}

/* 3. A dinamikusan bekerülő "Kosár megtekintése" (View cart) link formázása és animálása */
ul.products li.product a.added_to_cart {
    display: inline-flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    transition-property: all !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 200ms !important;
    border-radius: 9999px !important;
    /* rounded-full */
    font-size: 0.875rem !important;
    /* text-sm */
    height: 3rem !important;
    /* h-12 */
    padding-left: 1.5rem !important;
    /* px-6 */
    padding-right: 1.5rem !important;
    background-color: hsl(var(--secondary)) !important;
    color: hsl(var(--secondary-foreground)) !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    text-decoration: none !important;
    margin-top: 0 !important;
    /* Finom megjelenési animáció */
    animation: slideUpFade 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

ul.products li.product a.added_to_cart:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
    transform: translateY(-0.125rem) !important;
}

ul.products li.product a.added_to_cart:active {
    transform: scale(0.97) !important;
}

/* ── Widgets & Sidebar ────────────────────────────────────────── */
.widget-container ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.widget-container ul li {
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid hsl(var(--border) / 0.3) !important;
}

.widget-container ul li:last-child {
    border-bottom: none !important;
}

.widget-container ul li a {
    font-size: 14.5px !important;
    color: hsl(var(--foreground)) !important;
    text-decoration: none !important;
    transition: all 200ms ease !important;
    display: block !important;
}

.widget-container ul li a:hover {
    color: hsl(var(--primary)) !important;
    padding-left: 2px !important;
}

.widget-container .eyebrow {
    color: hsl(var(--foreground)) !important;
    font-weight: 600 !important;
    opacity: 0.9 !important;
}

/* ── Single Product Layout Fixes ─────────────────────────────── */
.single-product .product-actions-wrapper,
.single-product form.cart,
.single-product .single_variation_wrap,
.single-product .variations_button,
.single-product .woocommerce-variation-add-to-cart {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* Ensure single add to cart button stretches nicely next to quantity input */
.single-product form.cart .single_add_to_cart_button,
.single-product .single_add_to_cart_button,
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce form.cart button.single_add_to_cart_button {
    flex: 1 1 0% !important;
    min-width: 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
}

.single-product .quantity {
    display: inline-flex !important;
    align-items: center !important;
    shrink: 0 !important;
}

.single-product .quantity.hidden {
    display: none !important;
}

/* ── Variation Card Selector ─────────────────────────────────── */
/* Override: variations_form should NOT use the simple product flex layout */
.single-product .variations_form.cart {
    display: block !important;
}

/* Active / selected variation card */
.variation-card.is-active {
    border-color: hsl(var(--primary)) !important;
    background-color: hsl(var(--primary) / 0.04) !important;
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12) !important;
}

/* Hide the default WooCommerce variation table */
.variations_form .variations {
    display: none !important;
}

/* Reset link styling inside variation forms */
.variations_form .reset_variations {
    display: none !important;
}

/* Price display within the variation area */
.woocommerce-variation-price .price {
    font-family: 'Onest', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    color: hsl(var(--foreground)) !important;
    letter-spacing: -0.02em !important;
}

.woocommerce-variation-price .price del {
    opacity: 0.4;
    font-size: 20px !important;
}

.woocommerce-variation-price .price ins {
    text-decoration: none !important;
}

/* Hide the duplicate single_variation inside the wrap (WC renders its own) */
.single_variation_wrap > .woocommerce-variation.single_variation {
    display: none !important;
}

/* ==========================================================================
   FILTER ACTIVE STATE TEXT COLOR FIX
   ========================================================================== */
.wc-block-components-filter-list-item.is-active > a,
.wc-block-components-filter-list-item.is-active > span,
.wc-block-components-product-categories-list-item.is-active > a,
.wc-block-components-product-categories-list-item.is-active > span,
.wc-block-components-product-tag-filter-item.is-active > a,
.wc-block-components-product-tag-filter-item.is-active > span,
.wc-block-components-checkbox-list-item.is-active > label,
.wc-block-components-checkbox-list-item.is-active > a,
.wc-block-components-checkbox-list-item.is-active > span,
.wc-block-components-filter-list-item.is-active .wc-block-components-product-name,
.wc-block-components-filter-list-item.is-active .wc-block-components-product-count,
.wpc-term.wpc-term-active > a,
.wpc-term.wpc-term-active > span,
.wpf-filter.active > a,
.facetwp-radio.checked,
.facetwp-checkbox.checked,
.woof_term.active > a,
.current-cat > a,
.current-cat > span {
    color: hsl(var(--primary-foreground, #ffffff)) !important;
}

/* Fallback for elements with bg-primary to ensure text is white inside them if they are pills */
.bg-primary.rounded-full, 
.bg-primary.rounded-xl,
.bg-primary.rounded-lg,
.bg-primary.rounded-md {
    color: hsl(var(--primary-foreground, #ffffff));
}
.bg-primary.rounded-full > *, 
.bg-primary.rounded-xl > *,
.bg-primary.rounded-lg > *,
.bg-primary.rounded-md > * {
    color: hsl(var(--primary-foreground, #ffffff));
}

/* ═══════════════════════════════════════════════════════════════
 * WOOCOMMERCE PRODUCT REVIEWS STYLING
 * ═══════════════════════════════════════════════════════════════ */
.commentlist .comment {
    list-style: none !important;
    margin-bottom: 1.25rem !important;
}

.commentlist .comment_container {
    display: flex !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
    border-radius: calc(var(--radius) - 2px) !important;
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--border)) !important;
    box-shadow: var(--shadow-soft) !important;
}

.commentlist .avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 9999px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    border: 1px solid hsl(var(--border)) !important;
}

.commentlist .comment-text {
    flex: 1 !important;
    min-width: 0 !important;
}

.commentlist .star-rating {
    float: right !important;
    overflow: hidden !important;
    position: relative !important;
    height: 1.2em !important;
    line-height: 1 !important;
    font-size: 1.1rem !important;
    width: 5.4em !important;
    font-family: 'Material Symbols Outlined' !important;
    color: #fbbf24 !important;
}

.commentlist .star-rating::before {
    content: 'star star star star star' !important;
    color: hsl(var(--muted-foreground) / 0.25) !important;
    float: left !important;
    top: 0 !important;
    left: 0 !important;
    position: absolute !important;
    font-variation-settings: 'FILL' 1 !important;
    letter-spacing: 2px !important;
}

.commentlist .star-rating span {
    overflow: hidden !important;
    float: left !important;
    top: 0 !important;
    left: 0 !important;
    position: absolute !important;
    padding-top: 1.5em !important;
}

.commentlist .star-rating span::before {
    content: 'star star star star star' !important;
    top: 0 !important;
    position: absolute !important;
    left: 0 !important;
    color: #fbbf24 !important;
    font-variation-settings: 'FILL' 1 !important;
    letter-spacing: 2px !important;
}

.commentlist .meta {
    font-size: 0.875rem !important;
    color: hsl(var(--foreground)) !important;
    margin-bottom: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

.commentlist .meta strong {
    font-weight: 600 !important;
}

.commentlist .meta time {
    font-size: 0.775rem !important;
    color: hsl(var(--muted-foreground)) !important;
}

.commentlist .description {
    font-size: 0.925rem !important;
    line-height: 1.6 !important;
    color: hsl(var(--foreground) / 0.9) !important;
}

.commentlist .woocommerce-review__verified {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    font-size: 0.725rem !important;
    font-weight: 500 !important;
    padding: 0.125rem 0.5rem !important;
    border-radius: 9999px !important;
    background-color: hsl(var(--primary) / 0.1) !important;
    color: hsl(var(--primary)) !important;
}

/* ═══════════════════════════════════════════════════════════════
 * HOVER ZOOM EFFECTS (Desktop only)
 * ═══════════════════════════════════════════════════════════════ */
@media (hover: hover) {
    /* Termékkártya és shortcode kártya képének nagyítása */
    .woocommerce ul.products li.product:hover .aspect-\[4\/5\] img,
    article:hover .aspect-\[4\/5\] img {
        transform: scale(1.04) !important;
    }
    
    .woocommerce ul.products li.product .aspect-\[4\/5\] img,
    article .aspect-\[4\/5\] img {
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* Termékoldali fő kép nagyítása */
    .main-product-image {
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    .main-product-image:hover {
        transform: scale(1.2) !important;
    }
    
    /* Levágás biztosítása a tárolóknál */
    .woocommerce-product-gallery, 
    .lg\:col-span-6 .rounded-xl.border-border {
        overflow: hidden !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
 * DROPDOWN AND MOBILE HAMBURGER MENU STYLING
 * ═══════════════════════════════════════════════════════════════ */

/* Dropdown list resets */
.hidden.md\:flex ul.sub-menu,
.mobile-nav ul.sub-menu {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Desktop Dropdown logic */
@media (min-width: 768px) {
    /* Set parent container relative for absolute dropdown */
    .hidden.md\:flex li.menu-item-has-children {
        position: relative !important;
    }

    /* Sub-menu styling */
    .hidden.md\:flex ul.sub-menu {
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(10px) !important;
        background-color: hsl(var(--card)) !important;
        border: 1px solid hsl(var(--border)) !important;
        border-radius: 0.75rem !important;
        box-shadow: var(--shadow-lift) !important;
        padding: 0.5rem !important;
        min-width: 200px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
        z-index: 50 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
    }

    /* Chevron icon for parent menu items */
    .hidden.md\:flex li.menu-item-has-children > a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }

    .hidden.md\:flex li.menu-item-has-children > a::after {
        content: 'keyboard_arrow_down' !important;
        font-family: 'Material Symbols Outlined' !important;
        font-size: 16px !important;
        font-weight: normal !important;
        transition: transform 0.2s ease !important;
    }

    .hidden.md\:flex li.menu-item-has-children:hover > a::after {
        transform: rotate(180deg) !important;
    }

    /* Show on hover */
    .hidden.md\:flex li.menu-item-has-children:hover > ul.sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(0) !important;
    }

    /* Dropdown links */
    .hidden.md\:flex ul.sub-menu li a {
        display: block !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: 0.375rem !important;
        font-size: 0.875rem !important;
        color: hsl(var(--muted-foreground)) !important;
        transition: all 0.2s ease !important;
        font-weight: 500 !important;
    }

    .hidden.md\:flex ul.sub-menu li a:hover {
        background-color: hsl(var(--muted)) !important;
        color: hsl(var(--primary)) !important;
        padding-left: 1rem !important;
    }
}

/* Mobile Navigation drawer styling */
.mobile-nav ul {
    list-style-type: none !important;
}

.mobile-nav li {
    margin: 0 !important;
}

.mobile-nav li a {
    display: block !important;
    padding: 0.5rem 0 !important;
    font-[500] !important;
    font-size: 16px !important;
    color: hsl(var(--foreground)) !important;
    transition: color 0.2s ease !important;
}

.mobile-nav li.menu-item-has-children > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.mobile-nav li.menu-item-has-children > a::after {
    content: 'keyboard_arrow_down' !important;
    font-family: 'Material Symbols Outlined' !important;
    font-size: 20px !important;
    color: hsl(var(--muted-foreground)) !important;
}

.mobile-nav ul.sub-menu {
    padding-left: 1rem !important;
    border-left: 1.5px solid hsl(var(--border)) !important;
    margin: 0.25rem 0 0.5rem 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

.mobile-nav ul.sub-menu li a {
    font-size: 14.5px !important;
    color: hsl(var(--muted-foreground)) !important;
    font-weight: normal !important;
}

/* ── HIGHLIGHTED MENU ITEMS (BRAND ORANGE STAR) ────────────────────────── */
.menu-item-highlighted > a {
    font-weight: 600 !important;
}

.hidden.md\:flex ul.sub-menu li.menu-item-highlighted > a {
    color: hsl(var(--foreground)) !important;
    font-weight: 600 !important;
    background-color: hsl(var(--primary) / 0.06) !important;
}

.hidden.md\:flex ul.sub-menu li.menu-item-highlighted > a:hover {
    background-color: hsl(var(--primary) / 0.12) !important;
    color: hsl(var(--primary)) !important;
}

.mobile-nav li.menu-item-highlighted > a {
    color: hsl(var(--foreground)) !important;
    font-weight: 600 !important;
}

.menu-highlight-star {
    font-variation-settings: 'FILL' 1, 'wght' 600 !important;
}
/* Product price on single product page */
.product-price-wrapper .price {
    font-family: 'Onest', ui-sans-serif, system-ui, sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: hsl(var(--foreground)) !important;
    letter-spacing: -0.02em !important;
}

.product-price-wrapper .price del {
    opacity: 0.4;
    font-size: 20px !important;
    margin-right: 6px;
}

.product-price-wrapper .price ins {
    text-decoration: none !important;
}
/* ==========================================================================
   STRIPE & CHECKOUT PAYMENT BOX FORM STYLING FIX
   ========================================================================== */

/* Hide empty description boxes and redundant 'Zahlungsoptionen' duplicate headings */
.payment_box:empty,
.payment_box p:empty,
.wc-stripe-elements-field:empty,
#wc-stripe-payment-request-button-separator:empty,
#wc-stripe-payment-request-wrapper:empty,
.payment_box legend,
.payment_box fieldset > legend,
.payment_box .payment_options_heading,
.wc-stripe-elements-field > legend,
div[class*="stripe-"] > legend,
.payment_method_stripe .payment_box > div > legend {
    display: none !important;
}

/* FORCE WHITE BACKGROUND ON ALL STRIPE CONTAINERS & PAYMENT BOXES */
.woocommerce-checkout-payment .payment_box,
.woocommerce-checkout-payment .payment_box.payment_method_stripe,
.woocommerce-checkout-payment .payment_box.payment_method_stripe-card,
.woocommerce-checkout-payment .payment_box.payment_method_woocommerce_payments,
.woocommerce-checkout-payment #stripe-payment-element,
.woocommerce-checkout-payment #wc-stripe-cc-form,
.woocommerce-checkout-payment .wc-stripe-elements-field,
.woocommerce-checkout-payment .stripe-card-group,
.woocommerce-checkout-payment fieldset[id*="stripe"],
.woocommerce-checkout-payment div[class*="stripe-"],
.woocommerce-checkout-payment iframe[name*="stripe"],
div[id*="stripe-payment"],
div[class*="StripeElement"],
.StripeElement {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #1e293b !important;
}

/* Outer single clean border around payment box */
.woocommerce-checkout-payment .payment_box {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-top: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Remove inner duplicate background & borders inside payment box */
.payment_box > div,
.payment_box fieldset,
.payment_box #stripe-payment-element,
.payment_box .wc-stripe-elements-field,
.payment_box .stripe-card-group {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Crisp dark labels and text */
.woocommerce-checkout-payment label,
.woocommerce-checkout-payment span,
.payment_box label,
.payment_box span,
.payment_box p {
    color: #1e293b !important;
}

.payment_box label {
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Input fields inside Stripe form */
.payment_box input,
#wc-stripe-cc-form input,
.wc-stripe-elements-field input {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
}


/* ==========================================================================
   CHECKOUT TERMS, PRIVACY POLICY & DIGITAL CONSENT UNIFORM STYLING (FINE PRINT)
   ========================================================================== */

/* Privacy policy text fine print */
.woocommerce-privacy-policy-text,
.woocommerce-checkout-payment .woocommerce-privacy-policy-text,
.woocommerce-privacy-policy-text p,
.woocommerce-checkout .woocommerce-privacy-policy-text p {
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: hsl(var(--muted-foreground)) !important;
    margin-bottom: 0.5rem !important;
}

/* Checkbox form row container compact spacing */
.woocommerce-checkout-payment .form-row.mre-digital-consent,
.woocommerce-checkout-payment .form-row.validate-required,
.woocommerce-checkout-payment .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout-payment .mre-digital-consent,
.form-row.mre-digital-consent,
.form-row.terms {
    margin-bottom: 0.75rem !important;
    margin-top: 0.5rem !important;
    display: block !important;
}

/* Checkbox label text fine print font-size, color, and line-height */
.woocommerce-checkout-payment .form-row.mre-digital-consent label,
.woocommerce-checkout-payment .form-row.mre-digital-consent span,
.woocommerce-checkout-payment .woocommerce-form__label-for-checkbox span,
.woocommerce-checkout-payment label.checkbox,
.woocommerce-checkout-payment label.checkbox span,
.mre-digital-consent label,
.mre-digital-consent span,
label.woocommerce-form__label-for-checkbox {
    font-size: 11px !important;
    line-height: 1.3 !important;
    color: hsl(var(--foreground) / 0.8) !important;
    font-weight: 400 !important;
}

/* Checkbox input alignment and sizing */
.woocommerce-checkout-payment input[type="checkbox"],
.mre-digital-consent input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    margin-top: 1px !important;
    margin-right: 6px !important;
    border-radius: 3px !important;
    border: 1px solid hsl(var(--border)) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

/* Ensure flex container for checkbox + label for perfect top alignment */
.woocommerce-checkout-payment .form-row.mre-digital-consent .woocommerce-input-wrapper,
.woocommerce-checkout-payment .form-row.mre-digital-consent label.checkbox,
.mre-digital-consent .woocommerce-input-wrapper,
.mre-digital-consent label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
}

/* Place order button top spacing & margin guarantee */
.woocommerce-checkout-payment button#place_order,
.woocommerce-checkout-payment .place-order button[type="submit"] {
    margin-top: 1rem !important;
    clear: both !important;
}


/* ==========================================================================
   WOOCOMMERCE CHECKOUT NOTICES & ERROR GRID FIX
   ========================================================================== */

/* Force notices and error banners to span full width inside CSS Grid form */
form.checkout .woocommerce-NoticeGroup,
form.checkout .woocommerce-NoticeGroup-checkout,
form.checkout .woocommerce-error,
form.checkout .woocommerce-info,
form.checkout .woocommerce-message,
form.checkout .woocommerce-notices-wrapper,
.woocommerce-NoticeGroup-checkout {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.5rem !important;
    clear: both !important;
}

/* Beautiful modern red error banner for checkout errors */
.woocommerce-error,
.woocommerce-NoticeGroup-checkout .woocommerce-error {
    background-color: #fef2f2 !important;
    border: 1px solid #fca5a5 !important;
    border-left: 4px solid #ef4444 !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    color: #991b1b !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    list-style: none !important;
    margin: 0 0 1.5rem 0 !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.08) !important;
}

.woocommerce-error li {
    margin: 4px 0 !important;
    padding: 0 !important;
    color: #991b1b !important;
    font-weight: 500 !important;
}

.woocommerce-error li strong {
    color: #7f1d1d !important;
}