/* ============================================================================
   Fixit Cookie Notice - card design ported from the WordPress plugin (1.5.1).
   Selectors use the Magento classes: `v-box` is the popup (WordPress: `v-popup`),
   `#v-badge` is the reopen chip (WordPress: `#cookienotice-reopen-button`).
   Admin colours are inline styles on the card and its buttons, so they win over these rules.
   ============================================================================ */

/* Reset & base */
#m-cookienotice {
    all: initial;
    display: none;
    position: fixed;
    /* Consent comes before anything else on the page: chat widgets sit at 999999 (Talos) and up,
       and on phones they covered «Accept all» and «Save choices» (fixit.gr, 2026-10-07). */
    z-index: 2147483000;
    /* The shop's own typeface. `all: initial` would otherwise drop it for the browser default. */
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: #1f2937;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

#m-cookienotice * {
    box-sizing: border-box;
}

/* widget.phtml hides the card and the chip inline until this file applies; `body` outranks that rule. */
body #m-cookienotice,
body #v-badge {
    visibility: visible;
}

/* Centre popup (default) */
/* Centred with inset + margin:auto instead of a transform: a transformed parent becomes the
   containing block of position:fixed children, and the backdrop below would only cover the card. */
#m-cookienotice.v-box.v-center {
    inset: 0;
    margin: auto;
    height: fit-content;
    width: min(640px, calc(100% - 48px));
    max-width: none;
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border: none;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 0;
    animation: cn-fade-in 0.3s ease-out;
}

#m-cookienotice.v-box.v-center::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: -1;
    animation: cn-backdrop-in 0.3s ease-out;
}

@keyframes cn-fade-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes cn-backdrop-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #m-cookienotice.v-box.v-center,
    #m-cookienotice.v-box.v-center::before {
        animation: none;
    }
}

/* Other popup positions */
#m-cookienotice.v-box.v-top-left {
    top: 16px;
    left: 16px;
    max-width: 420px;
}

#m-cookienotice.v-box.v-top-right {
    top: 16px;
    right: 16px;
    max-width: 420px;
}

#m-cookienotice.v-box.v-bottom-left {
    bottom: 16px;
    left: 16px;
    max-width: 420px;
}

#m-cookienotice.v-box.v-bottom-right {
    bottom: 16px;
    right: 16px;
    max-width: 420px;
}

/* Bar positions */
#m-cookienotice.v-bar {
    left: 0;
    right: 0;
    width: 100%;
    padding: 16px;
    background: white;
    border: none;
}

#m-cookienotice.v-bar.v-top {
    top: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#m-cookienotice.v-bar.v-bottom {
    bottom: 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}

/* Inner container */
#m-cookienotice .inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 36px 40px 32px;
    width: 100%;
}

/* The popup backdrop is the card's ::before at z-index -1. Inside the card's own stacking context
   it paints over the card's background (the admin colour is an inline style on the card), so a white
   card came out grey (eclatpharmacy.gr, 2026-10-07). The inner wrapper repaints the card colour above it. */
#m-cookienotice .inner {
    position: relative;
    background: inherit;
    border-radius: inherit;
}

/* Title */
.m-message.title {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Colour is inherited: the admin's title colour is inline on the span, and the card's text colour
   (admin «header font colour») must reach the message on dark cards too. */
.titlecookie {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: inherit;
    margin: 0;
}

/* Message text */
#message-custom-css {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.65;
    color: inherit;
}

/* Settings header (shown with the board) */
.cookie-settings-header {
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    color: inherit;
}

#m-cookienotice.settings-open .cookie-settings-header {
    display: block;
}

/* Settings board: hidden until the card is in settings view */
#settings-inner-container {
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: 8px;
}

#m-cookienotice.settings-open #settings-inner-container {
    display: flex;
}

.cookie-settings-board {
    max-height: 300px;
    overflow-y: auto;
}

.cookie-settings-board::-webkit-scrollbar {
    width: 6px;
}

.cookie-settings-board::-webkit-scrollbar-track {
    background: transparent;
}

.cookie-settings-board::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.cookie-settings-board::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.cookie-settings-general {
    font-size: 13px;
    line-height: 20px;
    color: inherit;
    opacity: 0.85;
    margin: 0 0 4px;
}

/* Accordion row */
.cookie-menu-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    gap: 8px;
}

.cookie-menu-item .toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 12px 16px;
    background: #f3f4f6;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    transition: background-color 0.2s, border-color 0.2s;
    width: 100%;
    margin: 0;
}

/* Chevron: rotates when the row is open (WordPress uses two SVG images) */
.cookie-menu-item .toggle::before {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin: 0 4px 0 2px;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: rotate(-45deg);
    transition: transform 0.2s;
}

.cookie-menu-item.active .toggle {
    background: #eff6ff;
    border-color: #3b82f6;
}

.cookie-menu-item.active .toggle::before {
    transform: rotate(45deg);
}

.cookie-menu-item:hover:not(.active) .toggle {
    background: #f9fafb;
}

.cookie-menu-item .toggle > span:first-of-type {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}

/* «Always On» badge (necessary cookies) */
.cookie-settings-option-always-on {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #d1fae5;
    color: #059669;
    border: none;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    margin: 0;
    margin-left: auto;
}

/* Toggle switch */
.cookie-settings-option-select {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.cookie-settings-option-checkbox {
    display: none;
}

.cookie-settings-option-checkbox-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 28px;
    background: #e5e7eb;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

.cookie-settings-option-checkbox-box::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 12px;
    left: 2px;
    transition: left 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cookie-settings-option-checkbox:checked + .cookie-settings-option-checkbox-box {
    background: #10b981;
    border-color: #059669;
}

.cookie-settings-option-checkbox:checked + .cookie-settings-option-checkbox-box::after {
    left: 22px;
}

.cookie-settings-option-checkbox:focus-visible + .cookie-settings-option-checkbox-box {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.cookie-settings-option-checkbox-box .text {
    display: none;
}

/* Row description */
.cookie-menu-item .content {
    display: none;
    padding: 0 16px 12px;
    font-size: 13px;
    line-height: 20px;
    color: #6b7280;
    margin: 0;
}

.cookie-menu-item.active .content {
    display: block;
}

/* Buttons: the choice view and the settings view each have their own row */
#action-custom-css {
    display: flex;
}

#action-settings-css {
    display: none;
}

#m-cookienotice.settings-open #action-custom-css {
    display: none;
}

#m-cookienotice.settings-open #action-settings-css {
    display: flex;
}

#action-custom-css,
#action-settings-css {
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    justify-content: center;
    flex-wrap: wrap;
}

#m-cookienotice .m-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    height: 44px;
    padding: 0 24px;
    border: none;
    border-radius: 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
    text-align: center;
    margin: 0;
}

#m-cookienotice .m-button:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Accept (primary) */
#m-cookienotice .m-button.m-accept,
#m-cookienotice .m-button.m-save-choices {
    background: #1f2937;
    color: white;
    border: 1px solid #1f2937;
    min-width: 120px;
}

#m-cookienotice .m-button.m-accept:hover,
#m-cookienotice .m-button.m-save-choices:hover {
    background: #374151;
    border-color: #374151;
    box-shadow: 0 4px 8px rgba(31, 41, 55, 0.15);
}

#m-cookienotice .m-button.m-accept:active,
#m-cookienotice .m-button.m-save-choices:active {
    background: #111827;
    border-color: #111827;
}

/* Decline (outlined) */
#m-cookienotice .m-button.m-decline {
    background: white;
    color: #1f2937;
    border: 1px solid #d1d5db;
    min-width: 120px;
}

#m-cookienotice .m-button.m-decline:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

#m-cookienotice .m-button.m-decline:active {
    background: #f3f4f6;
}

/* Settings / Back (text button) */
#m-cookienotice .m-button.m-settings {
    background: transparent;
    color: #3b82f6;
    border: 1px solid transparent;
    padding: 0 16px;
    min-width: auto;
}

#m-cookienotice .m-button.m-settings:hover {
    background: #eff6ff;
}

#m-cookienotice .m-button.m-settings:active {
    background: #dbeafe;
}

/* Privacy policy link: keeps the shop's policy colours from the admin */
#m-cookienotice .m-button.m-terms {
    min-width: auto;
    padding: 0 16px;
    font-size: 13px;
}

#m-cookienotice .m-button.m-terms:hover {
    text-decoration: underline;
}

/* Reopen chip: a light square with a shield-and-check mark in the accept colour (set inline from the
   admin). It replaces the cookie disc, which read as another vendor's widget. Left side, below the
   card's layer and above page content. */
#v-badge {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9998;
    width: 46px;
    height: 46px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 14px;
    background: #ffffff;
    color: #4257e0;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(20, 24, 38, 0.08), 0 10px 26px -10px rgba(20, 24, 38, 0.35), 0 6px 22px -8px rgba(91, 108, 255, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    line-height: 1;
}

#v-badge svg {
    width: 22px;
    height: 22px;
}

#v-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(20, 24, 38, 0.10), 0 14px 30px -10px rgba(20, 24, 38, 0.40), 0 8px 26px -8px rgba(91, 108, 255, 0.45);
}

#v-badge:active {
    transform: none;
}

#v-badge:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Tablet and below */
@media (max-width: 768px) {
    #m-cookienotice .inner {
        padding: 32px 24px;
        gap: 18px;
    }

    .titlecookie {
        font-size: 18px;
        line-height: 24px;
    }

    #message-custom-css {
        font-size: 13px;
    }

    #action-custom-css,
    #action-settings-css {
        gap: 10px;
    }

    #m-cookienotice .m-button {
        flex: 1;
        min-width: 100px;
    }

    .cookie-settings-board {
        max-height: 250px;
    }
}

/* Phones: the centre card becomes a bottom sheet, edge to edge, with safe-area padding */
@media (max-width: 480px) {
    #m-cookienotice.v-box.v-center {
        inset: auto 0 0 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        height: auto;
        transform: none;
        border-radius: 20px 20px 0 0;
        animation: cn-slide-up 0.3s ease-out;
    }

    #m-cookienotice.v-box.v-center::before {
        animation: cn-backdrop-in 0.3s ease-out;
    }

    @keyframes cn-slide-up {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    #m-cookienotice .inner {
        padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px));
        gap: 16px;
    }

    .titlecookie {
        font-size: 18px;
        line-height: 26px;
    }

    #message-custom-css {
        font-size: 14px;
        line-height: 1.6;
    }

    #action-custom-css,
    #action-settings-css {
        flex-direction: column;
        gap: 8px;
    }

    /* `flex: 1` from the 768 px block becomes a zero flex-basis once the actions stack in a column and
       the 44 px height is ignored; the buttons then measured 22 px. 44 px is the touch target. */
    #m-cookienotice .m-button {
        flex: 0 0 auto;
        width: 100%;
        height: 44px;
    }

    #m-cookienotice .m-button.m-settings {
        padding: 0 12px;
    }

    #v-badge {
        bottom: 16px;
        left: 16px;
        width: 44px;
        height: 44px;
    }

    .cookie-settings-board {
        max-height: calc(100vh - 400px);
    }

    .cookie-menu-item .toggle {
        padding: 10px 12px;
    }

    .cookie-menu-item .content {
        padding: 0 12px 10px;
    }
}

/* Safe area (iPhone X and later) */
@supports (padding: max(0px)) {
    #m-cookienotice.v-box.v-center {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }

    #v-badge {
        bottom: max(24px, calc(24px + env(safe-area-inset-bottom)));
        left: max(24px, calc(24px + env(safe-area-inset-left)));
    }

    @media (max-width: 480px) {
        #v-badge {
            bottom: max(16px, calc(16px + env(safe-area-inset-bottom)));
            left: max(16px, calc(16px + env(safe-area-inset-left)));
        }
    }
}

/* Buttons as on fixit.gr (cookienotice-wp 1.5.1): one filled primary, an outlined decline, and text buttons
   for Settings / Back and the policy. The admin colours are inline styles, so these rules use !important where
   they replace one: only Accept / Save keep the shop's colours. The text buttons take --cn-accent, the admin's
   decline colour (set on the card), which is the shop's dark brand colour on every store we checked (Eclat
   #0E4444, closet22 #37618D) and reads on a white card. Giorgos 2026-10-08: the 1.4.1 buttons (every one a
   filled pill in its admin colour, hover = darken + lift) did not look like fixit.gr. */
#m-cookienotice .m-button {
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#m-cookienotice .m-button:focus-visible {
    outline: 2px solid var(--cn-accent, #1f2937);
    outline-offset: 2px;
}

/* Primary: the shop's accept colours (inline); hover darkens it and adds the fixit.gr shadow. */
#m-cookienotice .m-button.m-accept,
#m-cookienotice .m-button.m-save-choices {
    /* The base rule above draws a #1f2937 border made for the default dark button; on a shop colour
       (Eclat gold) it read as a dark outline. fixit.gr's primary has no visible border. */
    border-color: transparent !important;
}

#m-cookienotice .m-button.m-accept:hover,
#m-cookienotice .m-button.m-save-choices:hover {
    filter: brightness(0.92);
    box-shadow: 0 4px 8px rgba(31, 41, 55, 0.15);
}

#m-cookienotice .m-button.m-accept:active,
#m-cookienotice .m-button.m-save-choices:active {
    filter: brightness(0.85);
    box-shadow: none;
}

/* Decline: outlined, whatever colour the admin gave it. */
#m-cookienotice .m-button.m-decline:not(.modalcustomsetting) {
    background: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid #d1d5db !important;
    min-width: 120px;
}

#m-cookienotice .m-button.m-decline:not(.modalcustomsetting):hover {
    background: #f9fafb !important;
    border-color: #9ca3af !important;
}

#m-cookienotice .m-button.m-decline:not(.modalcustomsetting):active {
    background: #f3f4f6 !important;
}

/* Settings / Back: text button in the brand colour, a light tint on hover. */
#m-cookienotice .m-button.m-settings {
    background: transparent !important;
    color: var(--cn-accent, #1f2937) !important;
    border: 1px solid transparent !important;
    padding: 0 16px;
    min-width: auto;
}

#m-cookienotice .m-button.m-settings:hover {
    /* Fallback for browsers without color-mix() (Safari < 16.2, Chrome < 111). */
    background: #f3f4f6 !important;
    background: color-mix(in srgb, var(--cn-accent, #1f2937) 8%, transparent) !important;
}

#m-cookienotice .m-button.m-settings:active {
    /* Fallback for browsers without color-mix() (Safari < 16.2, Chrome < 111). */
    background: #e5e7eb !important;
    background: color-mix(in srgb, var(--cn-accent, #1f2937) 14%, transparent) !important;
}

/* Policy: a text link, underlined on hover. */
#m-cookienotice .m-button.m-terms {
    background: transparent !important;
    color: var(--cn-accent, #1f2937) !important;
    border: none !important;
    padding: 0 8px;
    min-width: auto;
    font-size: 13px;
}

#m-cookienotice .m-button.m-terms:hover {
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    #m-cookienotice .m-button {
        transition: none;
    }
}

/* Theme-proof states. Themes style every link on hover: closet22 (Claue) has `a:hover { color: #47A2CE
   !important }` and `a:hover { text-decoration: underline }`, which turned Accept into blue text on its blue
   background and underlined every button (Giorgos 2026-10-08: «χτυπάει σε hover»). The button colours are
   locked in every state here, with more specificity than any `a:hover`, and only the policy link underlines. */
#m-cookienotice .m-button,
#m-cookienotice .m-button:hover,
#m-cookienotice .m-button:focus {
    text-decoration: none !important;
}

#m-cookienotice .m-button.m-terms:hover,
#m-cookienotice .m-button.m-terms:focus {
    text-decoration: underline !important;
    background: transparent !important;
}

#m-cookienotice .m-button.m-accept,
#m-cookienotice .m-button.m-accept:hover,
#m-cookienotice .m-button.m-accept:focus,
#m-cookienotice .m-button.m-save-choices,
#m-cookienotice .m-button.m-save-choices:hover,
#m-cookienotice .m-button.m-save-choices:focus {
    color: var(--cn-accept-fg, #ffffff) !important;
}

#m-cookienotice .m-button.m-decline:not(.modalcustomsetting):hover,
#m-cookienotice .m-button.m-decline:not(.modalcustomsetting):focus {
    color: #1f2937 !important;
}

#m-cookienotice .m-button.m-settings:hover,
#m-cookienotice .m-button.m-settings:focus,
#m-cookienotice .m-button.m-terms:hover,
#m-cookienotice .m-button.m-terms:focus {
    color: var(--cn-accent, #1f2937) !important;
}