/**
 * Frontend styles for Amondi CMP
 *
 * The main colour comes from Amondi CMP → Banner (printed as
 * --amondi-cmp-primary on :root); a theme can restyle anything else on top.
 */

/* Banner Container */
.amondi-cmp-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 999999;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s;
    border-top: 3px solid var(--amondi-cmp-primary, #0073aa);
}

/*
 * A dismissed banner slides off-screen, which would leave it in the
 * accessibility tree with focusable buttons; visibility takes it out, and the
 * delay keeps the slide-out animation.
 */
.amondi-cmp-banner:not(.amondi-cmp-banner-visible) {
    visibility: hidden;
}

.amondi-cmp-banner.amondi-cmp-banner-visible {
    visibility: visible;
    transition: transform 0.3s ease-in-out, visibility 0s linear 0s;
}

.amondi-cmp-banner-hidden {
    display: none !important;
}

.amondi-cmp-banner-visible {
    transform: translateY(0);
    display: block !important;
}

.amondi-cmp-banner-active {
    padding-bottom: 0;
}

/* Banner Content */
.amondi-cmp-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Banner Header */
.amondi-cmp-banner-header {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.amondi-cmp-banner-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

/* Banner Body */
.amondi-cmp-banner-body {
    margin-bottom: 20px;
}

.amondi-cmp-description {
    margin: 0 0 20px 0;
    color: #555;
    line-height: 1.6;
    font-size: 14px;
}

.amondi-cmp-description a {
    color: var(--amondi-cmp-primary, #0073aa);
    text-decoration: underline;
}

.amondi-cmp-description a:hover {
    color: color-mix(in srgb, var(--amondi-cmp-primary, #0073aa) 72%, #000);
}

.amondi-cmp-privacy-link {
    margin-left: 5px;
    font-weight: 500;
}

/* Categories */
.amondi-cmp-categories {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.amondi-cmp-category {
    padding: 12px;
    background: #f9f9f9;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

/* Toggle Switch */
.amondi-cmp-toggle {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    gap: 12px;
}

.amondi-cmp-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.amondi-cmp-toggle-slider {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background-color: #ccc;
    border-radius: 24px;
    transition: background-color 0.3s;
    flex-shrink: 0;
    margin-top: 2px;
}

.amondi-cmp-toggle-slider:before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.amondi-cmp-toggle input:checked + .amondi-cmp-toggle-slider {
    background-color: var(--amondi-cmp-primary, #0073aa);
}

.amondi-cmp-toggle input:checked + .amondi-cmp-toggle-slider:before {
    transform: translateX(20px);
}

.amondi-cmp-toggle input:disabled + .amondi-cmp-toggle-slider {
    background-color: #4caf50;
    cursor: not-allowed;
}

.amondi-cmp-toggle-label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.amondi-cmp-toggle-label strong {
    display: block;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.amondi-cmp-toggle-description {
    display: block;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

/* Banner Footer */
.amondi-cmp-banner-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
}

/* Buttons */
.amondi-cmp-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

.amondi-cmp-btn-primary {
    background-color: var(--amondi-cmp-primary, #0073aa);
    color: #fff;
}

.amondi-cmp-btn-primary:hover {
    background-color: color-mix(in srgb, var(--amondi-cmp-primary, #0073aa) 72%, #000);
}

.amondi-cmp-btn-secondary {
    background-color: #f0f0f0;
    color: #333;
}

.amondi-cmp-btn-secondary:hover {
    background-color: #e0e0e0;
}

/* Responsive */
@media (max-width: 768px) {
    .amondi-cmp-banner-content {
        padding: 15px;
    }

    .amondi-cmp-banner-header h2 {
        font-size: 18px;
    }

    .amondi-cmp-banner-footer {
        flex-direction: column;
    }

    .amondi-cmp-btn {
        width: 100%;
    }

    .amondi-cmp-toggle {
        flex-direction: row;
    }
}

/* Overlay (optional, for modal style) */
body.amondi-cmp-banner-active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* Accessibility */
/* The modal focuses the dialog itself on open; only its buttons show a ring. */
.amondi-cmp-banner:focus {
    outline: none;
}

.amondi-cmp-btn:focus {
    outline: 2px solid var(--amondi-cmp-primary, #0073aa);
    outline-offset: 2px;
}

/* Previous consent note: only once there is a previous choice to show */
.amondi-cmp-previous-consent-note:has(#amondi-cmp-previous-consent-text:empty) {
    display: none !important;
}

/* ==========================================================================
   Modal layout (Amondi CMP → Banner → Layout). The banner opens as a centred
   dialog over a dimmed, blurred page that cannot be scrolled or clicked until
   a choice is made; frontend.js makes the rest of the page inert and moves
   focus in. The privacy policy page keeps the bar (when that option is on),
   so the policy can be read before choosing: the banner there has no
   --modal class.
   ========================================================================== */

html.amondi-cmp-modal-open {
    overflow: hidden;
}

/*
 * The overlay covers the whole page, not only the viewport (1.3.2): iOS
 * Safari 26 draws the page under its floating toolbar but clips fixed
 * elements at the toolbar's edge, so a fixed overlay left the bottom of the
 * page sharp. The page cannot scroll while the modal is open, so an overlay
 * on the full height of <body> covers every visible pixel.
 */
html.amondi-cmp-modal-open body.amondi-cmp-modal {
    position: relative;
    min-height: 100vh;
}

body.amondi-cmp-banner-active.amondi-cmp-modal::before {
    position: absolute;
    background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 1;
    pointer-events: auto;
}

.amondi-cmp-banner.amondi-cmp-banner--modal {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(600px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translate(-50%, calc(-50% + 16px));
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.3s;
}

.amondi-cmp-banner.amondi-cmp-banner--modal.amondi-cmp-banner-visible {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0s;
}

.amondi-cmp-banner--modal .amondi-cmp-banner-content {
    padding: 32px;
}

.amondi-cmp-banner--modal .amondi-cmp-banner-footer {
    flex-wrap: wrap;
    justify-content: stretch;
}

.amondi-cmp-banner--modal .amondi-cmp-btn {
    flex: 1 1 auto;
    text-align: center;
}

/* Accept All gets a row of its own under the two secondary choices. */
.amondi-cmp-banner--modal .amondi-cmp-btn-primary {
    flex-basis: 100%;
}

@media (max-width: 600px) {
    .amondi-cmp-banner--modal .amondi-cmp-banner-content {
        padding: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .amondi-cmp-banner,
    .amondi-cmp-banner.amondi-cmp-banner--modal {
        transition: none;
    }
}

/* Floating Icon */
.amondi-cmp-floating-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--amondi-cmp-primary, #0073aa);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 999998;
    transition: all 0.3s ease;
    color: #fff;
}

.amondi-cmp-floating-icon:hover {
    background-color: color-mix(in srgb, var(--amondi-cmp-primary, #0073aa) 72%, #000);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.amondi-cmp-floating-icon:focus {
    outline: 2px solid var(--amondi-cmp-primary, #0073aa);
    outline-offset: 2px;
}

.amondi-cmp-floating-icon svg {
    width: 24px;
    height: 24px;
}

.amondi-cmp-floating-icon--left {
    right: auto;
    left: 20px;
}

.amondi-cmp-floating-icon .amondi-cmp-cookie {
    width: 26px;
    height: 26px;
}

/*
 * While the banner is open the reopen button has nothing to do (and on a
 * phone it would cover the last button). visibility keeps it out of the tab
 * order; no transition, or `transition: all` keeps it on screen for 0.3 s.
 */
body.amondi-cmp-banner-active .amondi-cmp-floating-icon {
    visibility: hidden;
    transition: none;
}

/* Print styles */
@media print {
    .amondi-cmp-banner,
    .amondi-cmp-floating-icon {
        display: none;
    }
}