/**
 * Copyright (c) Monogo. All rights reserved.
 * See COPYING.txt for license details.
 *
 * Visual parity between the Amasty GDPR surfaces (bottom bar, settings
 * modal, info modal) and the headless cookie consent component shipped
 * by `frontend-app/src/modules/cookie-consent`.
 *
 * Strategy:
 *   - Reset Amasty's default visual layer (rounded blue buttons,
 *     drop shadows, theme-coloured borders) to a neutral baseline.
 *   - Restyle on top of the neutral baseline using the SAME design
 *     tokens used by the headless React component:
 *       white / black / gray-200 / gray-700 / gray-800
 *       text-sm (14/20)   text-base (16/24)   text-lg (18/28)
 *       font-semibold (600)
 *       px-4 py-2 (16/8) for buttons, px-6 py-3 (24/12) for primary CTA
 *       gap-2 (8) / gap-3 (12)
 *       shadow-lg = 0 10px 15px -3px rgb(0 0 0 / 0.1)
 *   - Use system font stack (Magento Luma ships a custom font; we
 *     intentionally override so both worlds look identical even when
 *     fonts differ).
 *
 * Selectors target the structure rendered by:
 *   - vendor/amasty/gdpr-frontend-ui/view/frontend/web/template/cookiebar.html
 *   - vendor/amasty/gdpr-frontend-ui/view/frontend/web/template/components/modal/cookie-settings.html
 *   - vendor/amasty/gdpr-frontend-ui/view/frontend/web/template/components/modal/cookie-information.html
 *
 * Inline `style=` attributes generated by cookiebar.html (lines 31-115)
 * only fire when the admin filled a colour field; the recommended setup
 * is to clear all colour fields in
 *   Stores → Configuration → Amasty Extensions → Cookie Consent
 *   → Cookie Bar Settings  (+ Settings Bar + Information Bar)
 * so this stylesheet owns the visual layer end-to-end.
 */

/* ============================================================
 * Bottom cookie bar — `.amgdprcookie-bar-container`
 *
 * Amasty markup (cookiebar.html, when rendered by Magento via
 * Knockout):
 *   <div role="alertdialog"
 *        class="modal-popup _show amgdprcookie-bar-container"
 *        data-amcookie-js="bar"
 *        aria-label="Cookie Bar">
 *     <div data-amgdprcookie-focus-start>
 *       <span class="amgdprcookie-focus-guard"></span>
 *       <button class="action-close"
 *               data-amcookie-js="close-cookiebar">×</button>
 *       <div class="amgdprcookie-bar-block">
 *         <div class="amgdprcookie-policy">…</div>
 *         <div class="amgdprcookie-buttons-block">…</div>
 *       </div>
 *       <span class="amgdprcookie-focus-guard"></span>
 *     </div>
 *   </div>
 *
 * Visual contract: 1:1 with the React headless `CookieBanner`
 * (`frontend-app/src/modules/cookie-consent/components/
 *  cookie-banner.tsx`). Tailwind on the React root:
 *   `fixed inset-x-0 bottom-0 z-[1600]
 *    border-t border-gray-200 bg-white shadow-lg`
 * Inner row:
 *   `mx-auto max-w-screen-2xl px-4 lg:px-8 py-4 md:py-5
 *    flex flex-col md:flex-row md:items-center md:gap-6 gap-3`
 * Text:
 *   `flex-1 min-w-0 / cookie-policy-text text-sm text-gray-700`
 * Buttons row:
 *   `flex flex-col sm:flex-row gap-2 shrink-0`
 *
 * CRITICAL — Magento Luma `_modals.less` (vendor/magento/
 * magento2-base/lib/web/css/source/components/_modals.less
 * line 43-73 + 98-132) ships `.modal-popup { position: fixed;
 * top: 0; left: 0; right: 0; bottom: 0; visibility: hidden;
 * opacity: 0; overflow-y: auto; z-index: <high>; left: 0; …}`
 * plus `.modal-popup._show { visibility: visible; opacity: 1; }`
 * and a `text-align: center` further down. That turns the cookie
 * bar into a full-screen overlay, which is the OPPOSITE of what
 * React renders. We override every single property below.
 *
 * Selector specificity:
 *   `body .modal-popup.amgdprcookie-bar-container` = 0,3,1
 *   Luma `.modal-popup` = 0,1,0  (we win even without !important)
 *   Luma `.modal-popup._show` = 0,2,0 (we still win)
 *   We ADD `!important` to the layout-critical props anyway, to
 *   defeat any production-mode CSS bundle merge ordering.
 * ============================================================ */

body .modal-popup.amgdprcookie-bar-container,
body .modal-popup.amgdprcookie-bar-container._show,
body .amgdprcookie-bar-container {
    /* Kill Luma full-screen overlay and pin to the bottom strip. */
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 1600 !important;
    /* Amasty `_modal.less` line 75-83 ships at the bar scope:
       `.amgdprcookie-bar-container { display: flex;
         justify-content: center; padding: 30px 10px; }`.
       The `display: flex; justify-content: center` makes the
       `[data-amgdprcookie-focus-start]` wrapper a flex child
       sized to its content and centered horizontally, which
       collapses the policy + buttons row to ~640 px instead of
       the full viewport width. Force block layout so the
       wrapper spans 100 % and the inner `.amgdprcookie-bar-block`
       handles the centering via `max-width: 1536px; margin: 0 auto`
       (matching React `mx-auto max-w-screen-2xl`). */
    display: block !important;
    /* Reset Luma's transition/visibility shenanigans. */
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
    -webkit-transition: none !important;
    /* Visual chrome. */
    background: #ffffff !important;
    color: #374151;
    border: 0;
    border-top: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
    text-align: left !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, sans-serif;
}

/* Outer focus-trap wrapper that Amasty inserts between the bar
   root and the actual content. Must be a plain block container so
   the inner `.amgdprcookie-bar-block` flex layout works. */
body .modal-popup.amgdprcookie-bar-container > [data-amgdprcookie-focus-start],
body .amgdprcookie-bar-container > [data-amgdprcookie-focus-start] {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Focus-guard sentinel spans are zero-area a11y hooks. They are
   `<span tabindex="0">` so Tab cycles back into the bar. We make
   them visually invisible without taking them out of the
   accessibility tree. */
body .modal-popup.amgdprcookie-bar-container .amgdprcookie-focus-guard,
body .amgdprcookie-bar-container .amgdprcookie-focus-guard {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* The Amasty bar ships a "Close Cookie Bar" X button. React
   `CookieBanner` does NOT have a close button. We hide the
   Amasty one entirely so the visual layout matches. (a11y note:
   the bar still has all three actionable buttons — accept,
   decline, settings — so the user has a way to dismiss; we are
   not removing the only escape hatch.) */
body .modal-popup.amgdprcookie-bar-container > [data-amgdprcookie-focus-start] > .action-close,
body .amgdprcookie-bar-container .action-close[data-amcookie-js="close-cookiebar"] {
    display: none !important;
}

/* Inner wrapper — React: `mx-auto max-w-screen-2xl px-4 lg:px-8
   py-4 md:py-5 flex flex-col md:flex-row md:items-center
   md:gap-6 gap-3`. Mobile-first: column + 12 px gap, then at
   md (>=768) switches to row + 24 px gap + items-center. */
body .modal-popup.amgdprcookie-bar-container .amgdprcookie-bar-block,
body .amgdprcookie-bar-container .amgdprcookie-bar-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    max-width: 1536px !important;
    width: auto !important;
    margin: 0 auto !important;
    padding: 16px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: left !important;
}

@media (min-width: 768px) {
    body .modal-popup.amgdprcookie-bar-container .amgdprcookie-bar-block,
    body .amgdprcookie-bar-container .amgdprcookie-bar-block {
        flex-direction: row !important;
        align-items: center !important;
        gap: 24px !important;
        padding: 20px 16px !important;
    }
}

@media (min-width: 1024px) {
    body .modal-popup.amgdprcookie-bar-container .amgdprcookie-bar-block,
    body .amgdprcookie-bar-container .amgdprcookie-bar-block {
        padding: 20px 32px !important;
    }
}

/* Text column — React: `flex-1 min-w-0` wrapping `cookie-policy-text
   text-sm text-gray-700 prose-sm max-w-none`. Amasty markup goes
   straight to `.amgdprcookie-policy` (no intermediate `flex-1`
   wrapper), so the policy element itself plays the role of the
   React `<div className="flex-1 min-w-0">` PLUS the React
   `<div className="cookie-policy-text text-sm text-gray-700">`. */
body .modal-popup.amgdprcookie-bar-container .amgdprcookie-policy,
body .amgdprcookie-bar-container .amgdprcookie-policy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    /* Amasty `_modal.less` lines 102-107 ship at the bar scope
       `.amgdprcookie-bar-container .amgdprcookie-policy {
            max-width: 640px;
            max-height: 30vh;
            overflow-y: auto;
            margin-bottom: 20px;
        }`
       (specificity 0,2,0). That `max-width: 640px` is what makes
       the Magento text column visibly narrower than React's
       `flex-1 min-w-0` (which takes the whole remaining width).
       We reset all four properties + the margin so the headline
       text block fills the row exactly like React. */
    max-width: none !important;
    max-height: none !important;
    width: auto !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #374151; /* gray-700 */
    font-size: 14px;
    line-height: 20px;
    overflow: visible !important;
}

body .modal-popup.amgdprcookie-bar-container .amgdprcookie-policy p,
body .amgdprcookie-bar-container .amgdprcookie-policy p {
    margin: 0;
    padding: 0;
    color: #374151;
    font-size: 14px;
    line-height: 20px;
}

body .modal-popup.amgdprcookie-bar-container .amgdprcookie-policy p + p,
body .amgdprcookie-bar-container .amgdprcookie-policy p + p {
    margin-top: 8px;
}

body .modal-popup.amgdprcookie-bar-container .amgdprcookie-policy h1,
body .modal-popup.amgdprcookie-bar-container .amgdprcookie-policy h2,
body .modal-popup.amgdprcookie-bar-container .amgdprcookie-policy h3,
body .amgdprcookie-bar-container .amgdprcookie-policy h1,
body .amgdprcookie-bar-container .amgdprcookie-policy h2,
body .amgdprcookie-bar-container .amgdprcookie-policy h3 {
    /* React: `[&_h1]:text-base [&_h1]:md:text-lg [&_h1]:font-semibold
       [&_h1]:mb-1` (and the same for h2). */
    margin: 0 0 4px 0;
    padding: 0;
    color: #111827;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

@media (min-width: 768px) {
    body .modal-popup.amgdprcookie-bar-container .amgdprcookie-policy h1,
    body .modal-popup.amgdprcookie-bar-container .amgdprcookie-policy h2,
    body .modal-popup.amgdprcookie-bar-container .amgdprcookie-policy h3,
    body .amgdprcookie-bar-container .amgdprcookie-policy h1,
    body .amgdprcookie-bar-container .amgdprcookie-policy h2,
    body .amgdprcookie-bar-container .amgdprcookie-policy h3 {
        font-size: 18px;
        line-height: 28px;
    }
}

body .modal-popup.amgdprcookie-bar-container .amgdprcookie-policy a,
body .amgdprcookie-bar-container .amgdprcookie-policy a {
    /* React: `[&_a]:underline`, inherits gray-700 colour from
       the wrapper. */
    color: inherit;
    text-decoration: underline;
}

/* Buttons row — React: `flex flex-col sm:flex-row gap-2 shrink-0`.
   Mobile: stacked column, full-width; >=640 px: row, content-sized. */
body .modal-popup.amgdprcookie-bar-container .amgdprcookie-buttons-block,
body .amgdprcookie-bar-container .amgdprcookie-buttons-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

@media (min-width: 640px) {
    body .modal-popup.amgdprcookie-bar-container .amgdprcookie-buttons-block,
    body .amgdprcookie-bar-container .amgdprcookie-buttons-block {
        flex-direction: row !important;
        align-items: center !important;
    }
}

/* ============================================================
 * Bar buttons — `.amgdprcookie-button`
 *   .-allow / .-save  -> primary (Accept all)   : bg-black text-white
 *   .-settings        -> secondary (Manage)     : border-black, hover invert
 *   .-decline         -> secondary (Reject all) : border-black, hover invert
 *
 * React contract (cookie-banner.tsx):
 *   class="px-4 py-2 text-sm font-semibold border border-black
 *          text-black hover:bg-black hover:text-white
 *          transition-colors disabled:opacity-60"
 *   accept:
 *   class="px-4 py-2 text-sm font-semibold bg-black text-white
 *          hover:bg-gray-800 transition-colors disabled:opacity-60"
 *
 * We force ORDER so the visual sequence matches headless even when
 * the Amasty admin has different `btnOrder` values:
 *   1. Manage preferences   (settings)
 *   2. Reject all           (decline)
 *   3. Accept all           (allow / save / accept)
 *
 * CRITICAL — Amasty `_modal.less` lines 148-179 ship:
 *   .amgdprcookie-buttons-block .amgdprcookie-button {
 *     background: white; border: none; border-radius: 3px;
 *     color: <link-color>; font-weight: bold;
 *     letter-spacing: 1.35px; margin-top: 15px;
 *     padding: 10px 15px; text-transform: uppercase;
 *   }
 *   .amgdprcookie-button.-allow, .-save {
 *     background: <link-color>; color: white; flex-basis: 33%;
 *   }
 *
 * Same specificity (0,2,0) as ours — `!important` is mandatory.
 * ============================================================ */

body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button,
body .amgdprcookie-bar-container .amgdprcookie-buttons-block button.amgdprcookie-button,
body .modal-popup.amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #ffffff !important;
    color: #000000 !important;
    /* Beats Amasty's `border: none`. */
    border: 1px solid #000000 !important;
    border-radius: 0 !important;
    /* Beats Amasty's `margin-top: 15px`. */
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* React `px-4 py-2` = 8 / 16. Beats Amasty `padding: 10px 15px`. */
    padding: 8px 16px !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    /* Beats Amasty's `flex-basis: 33%` on .-allow / .-save. */
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    font-family: inherit !important;
    /* React `text-sm` = 14 / 20. */
    font-size: 14px !important;
    line-height: 20px !important;
    /* React `font-semibold` = 600. Beats Amasty `bold` (700). */
    font-weight: 600 !important;
    /* Beats Amasty `letter-spacing: 1.35px`. */
    letter-spacing: 0 !important;
    /* Beats Amasty `text-transform: uppercase`. */
    text-transform: none !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, opacity 0.15s ease;
    box-shadow: none !important;
    text-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    text-align: center;
    white-space: normal;
}

/* On mobile (<640) the parent flex column + `align-items: stretch`
   makes buttons full-width automatically. We just re-assert it on
   the button itself in case some inherited rule sets `align-self`. */
@media (max-width: 639px) {
    body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button,
    body .modal-popup.amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button {
        width: 100% !important;
        align-self: stretch !important;
    }
}

body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button:hover,
body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button:focus,
body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button:active,
body .modal-popup.amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button:hover,
body .modal-popup.amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button:focus {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
    text-decoration: none;
    opacity: 1;
}

body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button:focus-visible,
body .modal-popup.amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
}

body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button:disabled,
body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button[disabled],
body .modal-popup.amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed;
}

/* Primary (Accept all) — inverted by default (bg-black text-white). */
body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-allow,
body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-save,
body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-accept,
body .modal-popup.amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-allow,
body .modal-popup.amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-save {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-allow:hover,
body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-allow:focus,
body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-save:hover,
body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-save:focus,
body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-accept:hover,
body .modal-popup.amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-allow:hover {
    background: #1f2937 !important; /* gray-800 — React `hover:bg-gray-800` */
    color: #ffffff !important;
    border-color: #1f2937 !important;
}

/* Force visual order: Manage (settings) -> Reject (decline) -> Accept (allow).
   Anchored on the bar container so the modal buttons (in `.amgdprcookie-buttons-block.-settings/.-information`) are unaffected. */
body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-settings,
body .modal-popup.amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-settings { order: 1; }
body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-decline,
body .modal-popup.amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-decline { order: 2; }
body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-allow,
body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-accept,
body .amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-save,
body .modal-popup.amgdprcookie-bar-container .amgdprcookie-buttons-block .amgdprcookie-button.-allow { order: 3; }

/* ============================================================
 * MODAL: Cookie Settings + Cookie Information
 *
 * Visual contract — strict 1:1 parity with the React headless
 * CookieSettingsModal + CookieGroup + ModalShell components shipped
 * by frontend-app/src/modules/cookie-consent. Every value below
 * mirrors a specific Tailwind utility from those components; the
 * comment next to each block names the source.
 *
 * Reference React file paths:
 *   - frontend-app/src/modules/cookie-consent/components/modal-shell.tsx
 *   - frontend-app/src/modules/cookie-consent/components/cookie-settings-modal.tsx
 *   - frontend-app/src/modules/cookie-consent/components/cookie-group.tsx
 *
 * Real Amasty class names — verified against the vendor templates
 * shipped with this stack:
 *   - vendor/amasty/gdpr-frontend-ui/view/frontend/web/template/
 *     components/modal/cookie-settings.html
 *   - vendor/amasty/gdpr-frontend-ui/view/frontend/web/template/
 *     components/modal/cookie-settings/modal-popup.html
 *   - vendor/amasty/gdpr-frontend-ui/view/frontend/web/template/
 *     components/modal/cookie-information.html
 *   - vendor/amasty/gdpr-frontend-ui/view/frontend/web/js/modal/
 *     cookie-settings.js (modalClass declared here)
 *
 * DOM hierarchy:
 *   div.modal-popup
 *      .amgdprcookie-groups-modal
 *      .amgdprcookie-cookie-settings-modal       <-- per-modal anchor
 *      [ or .amgdprcookie-cookie-information-modal for the info modal ]
 *     div.modal-inner-wrap
 *       header.modal-header
 *         p.amgdprcookie-description[data-role="title"]      <-- title
 *         button.action-close > span "Close"
 *       div.modal-content
 *         div.amgdprcookie-main-wrapper
 *           form.amgdprcookie-settings-form#amgdprcookie-form
 *             div.amgdprcookie-form-container
 *               div.amgdprcookie-cookie-container  (per group)
 *                 div.amgdprcookie-header
 *                   h3.amgdprcookie-caption        <-- group title
 *                   div.amgdprcookie-toggle-cookie
 *                     input.amgdprcookie-input     (disabled = essential)
 *                     label.amgdprcookie-label
 *                 p.amgdprcookie-text              <-- description
 *                 a.amgdprcookie-options           <-- "More Information"
 *             div.amgdprcookie-buttons-block.-settings
 *               button.amgdprcookie-done           <-- primary CTA
 *
 * IMPORTANT differences vs. the previous (broken) selector set:
 *   - no `.amgdprcookie-modal-container` — root is `.modal-popup
 *     .amgdprcookie-cookie-settings-modal`
 *   - no `.modal-title` — title is `.amgdprcookie-description`
 *   - no `.amgdprcookie-name`     — group title is `.amgdprcookie-caption`
 *   - no `.amgdprcookie-switcher` — toggle is `.amgdprcookie-toggle-cookie`
 *     with raw `.amgdprcookie-input` checkbox + `.amgdprcookie-label`
 *   - no `.amgdprcookie-policy-button.-save` — primary CTA is
 *     `.amgdprcookie-done` inside `.amgdprcookie-buttons-block.-settings`
 *   - no `.modal-footer` — the Done button sits INSIDE `.modal-content`
 *     as the last child of the form
 *   - essential groups carry NO `.-required` modifier; the only
 *     signal is the `disabled` attribute on `.amgdprcookie-input`,
 *     set via the `attr: { disabled: isEssential }` data-binding.
 *
 * Specificity strategy:
 *   - Every rule that needs to beat Magento's `_modals.less`
 *     (specificity 0,2,0) is anchored on
 *     `body .modal-popup.amgdprcookie-cookie-settings-modal` or
 *     `body .modal-popup.amgdprcookie-cookie-information-modal`
 *     (0,3,0 — wins without `!important` on the visual layer).
 *   - Structural overrides (width / margin / padding) that fight
 *     Magento's `lib-modal-popup()` keep `!important` so the
 *     outcome stays deterministic regardless of theme merge order.
 *   - Rules SCOPED to the modal body (per-group container, toggle,
 *     button) use the per-modal class on the modal-popup as the
 *     scope root so they never bleed into unrelated Magento_Ui
 *     modals (image gallery, checkout agreements, ratings, etc.).
 *
 * `transform` / `transition` are intentionally NOT touched — they
 * drive the open / close animation and depend on the `_show` class
 * toggled by the Amasty modal widget.
 * ============================================================ */

body .modal-popup.amgdprcookie-cookie-settings-modal,
body .modal-popup.amgdprcookie-cookie-information-modal {
    z-index: 1700;
}

body .modal-popup.amgdprcookie-cookie-settings-modal .modal-inner-wrap,
body .modal-popup.amgdprcookie-cookie-information-modal .modal-inner-wrap {
    background: #ffffff;
    color: #111827;
    border: 0;
    /* Sharp corners — matches the rest of the Magento storefront
       chrome (cart, minicart, auth modal); the headless React
       shell uses `rounded-md` but the Magento brand contract
       keeps every modal flat-edged. `!important` defeats
       Magento Luma `_modals.less` (`.modal-popup .modal-inner-wrap
       { border-radius: 3px; }`, specificity 0,2,0). */
    border-radius: 0 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 8px 10px -6px rgba(0, 0, 0, 0.1);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, sans-serif;
    /* Magento _modals.less ships `width: 75%; margin: 5rem auto;
       padding: 3rem;`. React uses `max-w-3xl` (CookieSettingsModal
       sets `panelClassName="max-w-3xl"` = 48rem = 768 px). */
    width: auto !important;
    max-width: 768px !important;
    margin: 5rem auto !important;
    overflow: hidden;
}

/* Cookie information modal panel matches the default React shell
   (`max-w-2xl` when used from the "More information" button —
   modal-shell.tsx default `max-w-2xl` = 42rem = 672 px). */
body .modal-popup.amgdprcookie-cookie-information-modal .modal-inner-wrap {
    max-width: 672px !important;
}

@media (max-width: 767px) {
    body .modal-popup.amgdprcookie-cookie-settings-modal .modal-inner-wrap,
    body .modal-popup.amgdprcookie-cookie-information-modal .modal-inner-wrap {
        max-width: calc(100vw - 24px) !important;
        margin: 2rem auto !important;
    }
}

/* Header — title strip. React `ModalShell` does NOT separate
   header from body with a visible divider; the title is just an
   `<h2 className="text-xl md:text-2xl font-semibold mb-2 pr-8">`
   inside the same scrollable padded container. To mirror that,
   we remove the bottom border, kill the padding-bottom on the
   header AND the padding-top on `.modal-content` (next block)
   so they read as one continuous surface.

   Padding strategy: 24px horizontal + 24px top on the header,
   8px gap below the title (`mb-2`), then the body owns the
   remaining vertical padding. Matches `p-6` (24 px all-around)
   on the React panel. */
body .modal-popup.amgdprcookie-cookie-settings-modal .modal-header,
body .modal-popup.amgdprcookie-cookie-information-modal .modal-header {
    /* padding-bottom 0 — the title's own `margin-bottom: 8 px`
       (next rule) supplies the 8 px gap, matching React `mb-2`. */
    padding: 24px 24px 0 !important;
    background: #ffffff;
    border: 0;
    border-bottom: 0;
    margin: 0;
    position: relative;
}

/* Title. React: `text-xl md:text-2xl font-semibold mb-2 pr-8`.
   Amasty uses `.amgdprcookie-description` on the title <p>, NOT
   `.modal-title`. The `[data-role="title"]` attribute keeps this
   from accidentally re-styling the body description <p> (which
   ALSO uses `.amgdprcookie-description` in cookie-settings.html
   line 2 / cookie-information.html line 9). `pr-8` = 32 px right
   padding leaves room for the close X overlay. */
body .modal-popup.amgdprcookie-cookie-settings-modal .modal-header .amgdprcookie-description,
body .modal-popup.amgdprcookie-cookie-information-modal .modal-header .amgdprcookie-description {
    margin: 0 0 8px 0;
    padding: 0 32px 0 0;
    color: #111827;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    border: 0;
    background: transparent;
}

@media (min-width: 768px) {
    body .modal-popup.amgdprcookie-cookie-settings-modal .modal-header .amgdprcookie-description,
    body .modal-popup.amgdprcookie-cookie-information-modal .modal-header .amgdprcookie-description {
        font-size: 24px;
        line-height: 32px;
    }
}

/* Close X — replicates React ModalShell:
       `absolute top-3 right-3 z-10 p-2 text-xl leading-none
        text-gray-700 hover:text-black`
   rendering a single `×` character (modal-shell.tsx line 151-154).

   Strategy: render OUR OWN × via `::before` and visually hide
   both the Magento Luma icon (which would otherwise sit behind
   our character via `.action-close::before { content: "" }` in
   `lib/web/css/source/_actions.less`) AND the `<span>Close</span>`
   text inside the button. Magento's default `.action-close` ships
   with a 1 px blue border + focus shadow — we strip those.

   Positioned absolutely over `.modal-header` (top-3 right-3 =
   12 px from each corner). `.modal-popup` itself is the
   stacking-context root, but `.modal-header` is `position: relative`
   above so the anchor coordinate is the header rectangle. */
body .modal-popup.amgdprcookie-cookie-settings-modal .modal-header .action-close,
body .modal-popup.amgdprcookie-cookie-information-modal .modal-header .action-close {
    appearance: none;
    -webkit-appearance: none;
    color: #374151; /* gray-700 */
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 8px !important; /* p-2 = 8px */
    top: 12px !important; /* top-3 = 12px */
    right: 12px !important; /* right-3 = 12px */
    box-shadow: none !important;
    text-shadow: none !important;
    height: auto !important;
    width: auto !important;
    min-width: 0 !important;
    font-size: 0; /* hide Magento's default font-size on the wrapper */
    line-height: 1;
}

body .modal-popup.amgdprcookie-cookie-settings-modal .modal-header .action-close::before,
body .modal-popup.amgdprcookie-cookie-information-modal .modal-header .action-close::before {
    content: "\00d7"; /* multiplication sign — same as the React `×` */
    display: block;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 20px; /* text-xl */
    line-height: 1;
    font-weight: 400;
    color: inherit;
    background: transparent;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}

body .modal-popup.amgdprcookie-cookie-settings-modal .modal-header .action-close:hover,
body .modal-popup.amgdprcookie-cookie-settings-modal .modal-header .action-close:focus,
body .modal-popup.amgdprcookie-cookie-information-modal .modal-header .action-close:hover,
body .modal-popup.amgdprcookie-cookie-information-modal .modal-header .action-close:focus {
    color: #000000; /* hover:text-black */
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* The `<span>Close</span>` inside `.action-close` is for screen
   readers — Magento paints the visible icon via CSS background on
   `.action-close::before`. We replaced ::before above; hide the
   text span visually (keep it for AT). */
body .modal-popup.amgdprcookie-cookie-settings-modal .modal-header .action-close > span,
body .modal-popup.amgdprcookie-cookie-information-modal .modal-header .action-close > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

/* Content area — the form (settings) or table (information) lives
   here. Picks up where `.modal-header` left off (no padding-top
   so the header + content read as one continuous `p-6` surface
   matching React `ModalShell` line 156). */
body .modal-popup.amgdprcookie-cookie-settings-modal .modal-content,
body .modal-popup.amgdprcookie-cookie-information-modal .modal-content {
    padding: 0 24px 24px !important;
    color: #374151;
    font-size: 14px;
    line-height: 20px;
    background: #ffffff;
    overflow-y: auto;
    max-height: calc(90vh - 64px); /* React: max-h-[90vh] */
}

/* Reset Amasty's own wrappers inside `.modal-content` so the form
   sits flush with our padding. */
body .modal-popup.amgdprcookie-cookie-settings-modal .modal-content .amgdprcookie-main-wrapper,
body .modal-popup.amgdprcookie-cookie-information-modal .modal-content .amgdprcookie-main-wrapper {
    margin: 0;
    padding: 0;
    background: transparent;
}

body .modal-popup.amgdprcookie-cookie-settings-modal .modal-content .amgdprcookie-settings-form,
body .modal-popup.amgdprcookie-cookie-settings-modal .modal-content .amgdprcookie-form-container {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

/* Body-level description paragraph (cookie-settings.html line 2 /
   cookie-information.html line 9 — appears INSIDE modal-content,
   above the form / table). Distinct from the title in the header. */
body .modal-popup.amgdprcookie-cookie-settings-modal .modal-content .amgdprcookie-description,
body .modal-popup.amgdprcookie-cookie-information-modal .modal-content .amgdprcookie-description {
    margin: 0 0 16px 0;
    padding: 0;
    color: #374151;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    background: transparent;
    border: 0;
}

/* ============================================================
 * Per-group row inside the settings modal — 1:1 with React
 * `CookieGroup` (cookie-group.tsx).
 *
 * React layout:
 *   <div className="flex flex-col items-start gap-2
 *                   border-b border-gray-200 pb-4 mb-4
 *                   last:border-b-0">
 *     <div className="flex items-start gap-3 w-full">
 *       <input type="checkbox" ... className="mt-1 h-5 w-5 accent-black" />
 *       <div className="flex-1">
 *         <label className="flex flex-wrap items-baseline gap-2
 *                            text-base font-semibold">
 *           <span>{name}</span>
 *           {isEssential ? <span PILL /> : null}
 *         </label>
 *         <p className="mt-1 text-sm text-gray-700">{description}</p>
 *         <button className="mt-2 text-xs font-medium
 *                            text-gray-700 underline">More info</button>
 *       </div>
 *     </div>
 *   </div>
 *
 * Amasty DOM (different structure — toggle inside `.amgdprcookie-header`,
 * text + options as siblings):
 *   <div class="amgdprcookie-cookie-container">
 *     <div class="amgdprcookie-header">
 *       <h3 class="amgdprcookie-caption">{name}</h3>
 *       <div class="amgdprcookie-toggle-cookie">
 *         <input class="amgdprcookie-input" type="checkbox" ...>
 *         <label class="amgdprcookie-label">{name}</label>
 *       </div>
 *     </div>
 *     <p class="amgdprcookie-text">{description}</p>
 *     <a class="amgdprcookie-options">More Information</a>
 *   </div>
 *
 * Trick to rewire the layout without JS:
 *   - `.amgdprcookie-cookie-container` becomes a 2-column CSS grid
 *     (checkbox | content).
 *   - `.amgdprcookie-header` gets `display: contents` so its
 *     children (caption + toggle-cookie) participate in the
 *     PARENT grid directly.
 *   - Toggle is placed at column 1, row 1 / span 3 (left rail
 *     spanning the entire height of the group block).
 *   - Caption → col 2 row 1, text → col 2 row 2, options →
 *     col 2 row 3.
 *
 * `display: contents` is supported by Chrome 65+, Firefox 37+,
 * Safari 11.1+. The Safari a11y regression that historically
 * removed the wrapper from the AX tree was fixed in 15.4 (2022);
 * older Safari falls back to flattening but the `<div>` here has
 * no semantic role to lose.
 *
 * Scoped to `.amgdprcookie-cookie-settings-modal` so the rules do
 * not leak into the standalone sidebar widget (which also renders
 * `.amgdprcookie-cookie-container` via the `widget/settings.html`
 * template — that widget has its own visual contract).
 * ============================================================ */

.amgdprcookie-cookie-settings-modal .amgdprcookie-cookie-container {
    /* Reset Amasty's box: NO border around the group, just a
       single bottom divider matching React `border-b border-gray-200`. */
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 16px 0; /* mb-4 = 16 px */
    /* Bottom padding bumped from 16 → 20 px so the "More
       Information" link breathes off the divider — small visual
       fix requested over the React `pb-4` baseline; the divider
       still sits 20 px below the link, then a 16 px margin gap
       before the next group's caption. */
    padding: 0 0 20px 0;

    /* 2-column grid: checkbox rail (20 px) | content. */
    display: grid;
    grid-template-columns: 20px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 12px; /* React `gap-3` */
    row-gap: 4px;
    align-items: start;
}

.amgdprcookie-cookie-settings-modal .amgdprcookie-cookie-container:last-of-type {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Explicit 20 px bottom padding on the group block + its header
   and text — verified visually by the user in DevTools. Anchored
   on `.amgdprcookie-groups-modal` (the outer modal wrapper Amasty
   adds in `_modal.less` line 65+) so the rule applies across
   every flavour of the settings surface (modal popup, sidebar
   widget, the rare "inline" variant) without us having to track
   each. `!important` overrides Amasty's own `padding-bottom`
   shipped in the same vendor stylesheet (e.g. `_modal.less` lines
   96, 140, 144) which would otherwise win on the sidebar variant. */
.amgdprcookie-groups-modal .amgdprcookie-cookie-container,
.amgdprcookie-groups-modal .amgdprcookie-header {
    padding-bottom: 20px !important;
}

/* Flatten Amasty's `.amgdprcookie-header` wrapper so its children
   (caption + toggle) participate in the parent grid directly. */
.amgdprcookie-cookie-settings-modal .amgdprcookie-cookie-container .amgdprcookie-header {
    display: contents;
}

/* Toggle / checkbox cell — left rail, spans all rows so a tall
   description (3+ lines) does not push the checkbox off the
   visual centre of the title. `align-self: start` plus a 2 px
   top margin matches React `mt-1` on the input. */
.amgdprcookie-cookie-settings-modal .amgdprcookie-cookie-container .amgdprcookie-toggle-cookie {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    margin: 2px 0 0 0;
    padding: 0;
    position: static;
    width: 20px;
    height: 20px;
    display: block;
    background: transparent;
    border: 0;
    flex-shrink: 0;
}

/* Group title — `<h3 class="amgdprcookie-caption">`. React:
   `text-base font-semibold` (16/24) inside a `<label>` that also
   carries the optional essential pill. Amasty's caption is just
   the name; the pill is injected via `::after` further below. */
.amgdprcookie-cookie-settings-modal .amgdprcookie-cookie-container h3.amgdprcookie-caption,
.amgdprcookie-cookie-settings-modal .amgdprcookie-cookie-container .amgdprcookie-caption {
    grid-column: 2;
    grid-row: 1;
    color: #111827;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    font-family: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    min-height: 0;
    display: inline-flex;
    align-items: baseline; /* React `items-baseline` */
    gap: 8px; /* React `gap-2` */
    flex-wrap: wrap;
}

/* Description paragraph. React: `mt-1 text-sm text-gray-700`. */
.amgdprcookie-cookie-settings-modal .amgdprcookie-cookie-container .amgdprcookie-text {
    grid-column: 2;
    grid-row: 2;
    color: #374151; /* gray-700 */
    font-size: 14px;
    line-height: 20px;
    margin: 4px 0 0 0; /* mt-1 = 4 px */
    padding: 0;
    background: transparent;
}

/* "More Information" link. React: `mt-2 text-xs font-medium
   text-gray-700 underline hover:text-black`. Amasty renders this
   as an `<a>` (not button) but the styling is identical. */
.amgdprcookie-cookie-settings-modal .amgdprcookie-cookie-container .amgdprcookie-options {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    display: inline-block;
    color: #374151; /* gray-700 */
    font-size: 12px; /* text-xs */
    line-height: 16px;
    font-weight: 500; /* font-medium */
    text-decoration: underline;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 8px 0 0 0; /* mt-2 = 8 px */
    cursor: pointer;
}

.amgdprcookie-cookie-settings-modal .amgdprcookie-cookie-container .amgdprcookie-options:hover,
.amgdprcookie-cookie-settings-modal .amgdprcookie-cookie-container .amgdprcookie-options:focus {
    color: #000000; /* hover:text-black */
    text-decoration: underline;
}

/* ============================================================
 * Checkbox — replicates React `<input type="checkbox" ... className=
 * "mt-1 h-5 w-5 accent-black cursor-pointer
 *  disabled:cursor-not-allowed disabled:opacity-60">`.
 *
 * Amasty ships `.amgdprcookie-toggle-cookie` as a wrapper around
 * a native `<input type="checkbox">` PLUS a `<label>` that re-binds
 * the group name as text (cookie-settings.html line 31). The
 * vendor stylesheet then absolutely-positions the input with
 * `opacity: 0` and turns the label into a pill toggle.
 *
 * Our take: revert to a NATIVE checkbox.
 *   1. Show the input itself (`appearance: auto`, `opacity: 1`).
 *   2. Hide the `<label>` visually (kept in the DOM so Magento's
 *      forms.js can still react to label clicks for click-through).
 *   3. Drop the pill styling entirely.
 *
 * Why `accent-color`: the modern (Chrome 93+, Firefox 92+, Safari
 * 15.4+) way to recolour native form controls without losing
 * platform a11y (high-contrast mode, focus rings). The legacy
 * pseudo-element overrides would have required us to fight
 * Magento's `_forms.less` checkbox skin all the way down.
 * ============================================================ */

.amgdprcookie-cookie-settings-modal .amgdprcookie-toggle-cookie .amgdprcookie-input {
    /* Override Amasty's absolute / opacity-0 reset from
       gdpr-frontend-ui/view/frontend/web/css/source/_module.less.
       We use a NATIVE checkbox as the control. */
    position: static;
    inset: auto;
    appearance: auto;
    -webkit-appearance: auto;
    accent-color: #000000;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    opacity: 1;
    cursor: pointer;
    z-index: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.amgdprcookie-cookie-settings-modal .amgdprcookie-toggle-cookie .amgdprcookie-input:disabled {
    cursor: not-allowed;
    opacity: 0.6; /* React `disabled:opacity-60` */
}

.amgdprcookie-cookie-settings-modal .amgdprcookie-toggle-cookie .amgdprcookie-input:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* Hide Amasty's pill label (would otherwise sit next to the
   checkbox and re-render the group name). Kept in the DOM so
   click-through via `label[for=...]` continues to work for AT. */
.amgdprcookie-cookie-settings-modal .amgdprcookie-toggle-cookie .amgdprcookie-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    background: transparent;
    white-space: nowrap;
}

/* ============================================================
 * Essential group → "Always active" pill — 1:1 with React:
 *   <span className="text-xs font-medium uppercase tracking-wider
 *                     bg-gray-100 text-gray-700 px-2 py-0.5 rounded">
 *     {essentialBadge}
 *   </span>
 *
 * Amasty marks essential group(s) by setting `disabled` on
 * `.amgdprcookie-input` (cookie-settings.html line 26:
 * `attr: { disabled: isEssential }`). There is NO `.-required`
 * modifier on the container — we detect via
 * `:has(.amgdprcookie-input[disabled])` and render a CSS pill
 * on `.amgdprcookie-caption::after`. The disabled checkbox itself
 * stays visible (React keeps the disabled input visible too, see
 * cookie-group.tsx lines 54-61).
 *
 * Pill copy is driven by `--unilayer-essential-badge` which we
 * set per language via `:lang()` below. Default falls back to
 * the en_US source string so the rule never renders blank when
 * the storefront ships an unexpected locale.
 *
 * `:has()` is supported by Chrome 105+, Firefox 121+, Safari 15.4+
 * (already used by Monogo_UnilayerCustomerAuth/embed.css).
 * ============================================================ */

.amgdprcookie-cookie-settings-modal
    .amgdprcookie-cookie-container:has(.amgdprcookie-input[disabled])
    .amgdprcookie-caption::after {
    content: var(--unilayer-essential-badge, "Always active");
    display: inline-block;
    padding: 2px 8px; /* px-2 py-0.5 */
    background: #f3f4f6; /* bg-gray-100 */
    color: #374151; /* text-gray-700 */
    border: 0;
    font-size: 11px; /* text-xs ≈ 12; we drop 1 px so the pill
                        feels lighter next to the 16 px caption */
    line-height: 16px;
    font-weight: 500; /* font-medium */
    letter-spacing: 0.05em; /* tracking-wider */
    text-transform: uppercase;
    border-radius: 4px; /* rounded (Tailwind default 4 px) */
    text-decoration: none;
    vertical-align: middle;
}

/* Per-locale pill copy. The `lang` attribute is set by Magento on
   `<html lang="...">` per store view (`general/locale/code`). The
   matching i18n CSV files in this module translate the rest of the
   modal copy that Amasty renders via `$t(...)`. */
:root:lang(en) { --unilayer-essential-badge: "Always active"; }
:root:lang(pl) { --unilayer-essential-badge: "Zawsze aktywne"; }
:root:lang(cs) { --unilayer-essential-badge: "Vždy aktivní"; }
:root:lang(sk) { --unilayer-essential-badge: "Vždy aktívne"; }
:root:lang(ro) { --unilayer-essential-badge: "Întotdeauna active"; }
:root:lang(bg) { --unilayer-essential-badge: "Винаги активни"; }
:root:lang(de) { --unilayer-essential-badge: "Immer aktiv"; }
:root:lang(ar) { --unilayer-essential-badge: "نشطة دائمًا"; }

/* ============================================================
 * Cookie information modal — title + cookie details table
 *
 * Rendered when the user clicks "More Information" on a group.
 * Layout: title + description (re-used selectors above) + table.
 * ============================================================ */

.amgdprcookie-cookie-information-modal .amgdprcookie-information-title {
    color: #111827;
    font-size: 18px;
    line-height: 28px;
    font-weight: 600;
    margin: 0 0 12px 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.amgdprcookie-cookie-information-modal .amgdprcookie-table {
    width: 100%;
    margin: 12px 0 0 0;
    border: 1px solid #e5e7eb;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 18px;
    background: #ffffff;
}

.amgdprcookie-cookie-information-modal .amgdprcookie-table th,
.amgdprcookie-cookie-information-modal .amgdprcookie-table td,
.amgdprcookie-cookie-information-modal .amgdprcookie-table .amgdprcookie-title,
.amgdprcookie-cookie-information-modal .amgdprcookie-table .amgdprcookie-cell {
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
    color: #374151;
    background: #ffffff;
    font-size: 13px;
    line-height: 18px;
}

.amgdprcookie-cookie-information-modal .amgdprcookie-table thead .amgdprcookie-title,
.amgdprcookie-cookie-information-modal .amgdprcookie-table th.amgdprcookie-title {
    background: #f9fafb;
    color: #111827;
    font-weight: 600;
}

/* ============================================================
 * Primary CTA — `.amgdprcookie-done`
 *
 * Settings modal: lives in `.amgdprcookie-buttons-block.-settings`
 * Information modal: lives in `.amgdprcookie-buttons-block.-information`
 *
 * Both are INSIDE `.modal-content` (Amasty does NOT use a
 * `.modal-footer` slot — there's no footer in `modal-popup.html`).
 *
 * Visual contract mirrors the React headless component:
 * `px-6 py-3 text-sm font-semibold bg-black text-white
 *  hover:bg-gray-800`. We anchor each rule on the per-modal class
 * so unrelated `.amgdprcookie-done` instances (if any future
 * vendor change uses the same class elsewhere) are not affected.
 * ============================================================ */

.amgdprcookie-cookie-settings-modal .amgdprcookie-buttons-block.-settings,
.amgdprcookie-cookie-information-modal .amgdprcookie-buttons-block.-information {
    /* React: `mt-6 flex justify-end` */
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 24px 0 0 0; /* mt-6 = 24 px */
    padding: 0;
    background: transparent;
    border: 0;
    text-align: right;
}

/* IMPORTANT: every size / appearance property carries `!important`
   to beat Amasty's compiled `_modal.less` (gdpr-cookie/view/frontend/
   web/css/source/module/_modal.less line 39-49) which ships
   `.amgdprcookie-done { width: 100%; border-radius: 3px;
   letter-spacing: 1.35px; text-transform: uppercase;
   font-weight: bold; }`. Amasty's selector is `.amgdprcookie-done`
   (specificity 0,1,0) — our anchor (0,3,2) wins on paper, but the
   bundle merge order in production-mode is not deterministic
   because Magento's `Magento\Framework\View\Asset\Bundle` reorders
   CSS by alphabetical chunk name. `!important` makes the outcome
   independent of merge order. */
body .modal-popup.amgdprcookie-cookie-settings-modal button.amgdprcookie-done,
body .modal-popup.amgdprcookie-cookie-information-modal button.amgdprcookie-done,
body .modal-popup.amgdprcookie-cookie-settings-modal .amgdprcookie-buttons-block .amgdprcookie-done,
body .modal-popup.amgdprcookie-cookie-information-modal .amgdprcookie-buttons-block .amgdprcookie-done {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    /* `border-radius: 0` beats Amasty's `border-radius: 3px`. */
    border-radius: 0 !important;
    margin: 0 !important;
    /* `px-6 py-3` from React = 12 px vertical, 24 px horizontal. */
    padding: 12px 24px !important;
    min-width: 0 !important;
    /* `width: auto` beats Amasty's `width: 100%` — the button must
       size to its content, not stretch to the buttons block. */
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    font-family: inherit !important;
    /* `text-sm` from React = 14 / 20. */
    font-size: 14px !important;
    line-height: 20px !important;
    /* `font-semibold` from React = 600. Beats Amasty's `bold` (700). */
    font-weight: 600 !important;
    /* `letter-spacing: 0` beats Amasty's `letter-spacing: 1.35px`. */
    letter-spacing: 0 !important;
    /* React label is sentence-case; Amasty forces uppercase. */
    text-transform: none !important;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, opacity 0.15s ease;
    box-shadow: none !important;
    text-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

body .modal-popup.amgdprcookie-cookie-settings-modal button.amgdprcookie-done:hover,
body .modal-popup.amgdprcookie-cookie-settings-modal button.amgdprcookie-done:focus,
body .modal-popup.amgdprcookie-cookie-information-modal button.amgdprcookie-done:hover,
body .modal-popup.amgdprcookie-cookie-information-modal button.amgdprcookie-done:focus {
    background: #1f2937;
    color: #ffffff;
    border-color: #1f2937;
}

body .modal-popup.amgdprcookie-cookie-settings-modal button.amgdprcookie-done:focus-visible,
body .modal-popup.amgdprcookie-cookie-information-modal button.amgdprcookie-done:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

body .modal-popup.amgdprcookie-cookie-settings-modal button.amgdprcookie-done:disabled,
body .modal-popup.amgdprcookie-cookie-information-modal button.amgdprcookie-done:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================
 * Backdrop — match React ModalShell (`fixed inset-0 bg-black/70`)
 *
 * 70% black, matching frontend-app/src/modules/cookie-consent/
 * components/modal-shell.tsx line 124. Scoped to OUR cookie
 * modals only so we don't recolour overlays for unrelated
 * Magento modals (image gallery, checkout agreements, ratings,
 * etc.). The Amasty modal toggles `._show` on the per-modal
 * class when open.
 * ============================================================ */

body:has(.amgdprcookie-cookie-settings-modal._show) .modals-overlay,
body:has(.amgdprcookie-cookie-information-modal._show) .modals-overlay {
    background: rgba(0, 0, 0, 0.7);
}

/* ============================================================
 * Footer cookie-policy link injected by Amasty
 * ============================================================ */

.amgdprcookie-link {
    color: inherit;
    text-decoration: underline;
}

.amgdprcookie-link:hover {
    text-decoration: none;
}