/* =============================================================================
   Cookie Consent Manager — v1.0.0
   Customise brand colours via Settings › Cookie Consent in WordPress admin,
   or override the CSS custom properties below in your theme's Additional CSS.
   ============================================================================= */

/* --- CSS Custom Properties (brand colours set dynamically via JS) ----------- */
:root {
    --ccm-primary:        #1e3a5f; /* Set via WordPress admin */
    --ccm-accent:         #ff622b; /* Set via WordPress admin */
    --ccm-accent-hover:   color-mix(in srgb, var(--ccm-accent) 85%, #000);
    --ccm-text:           #1f2937;
    --ccm-text-muted:     #6b7280;
    --ccm-bg:             #ffffff;
    --ccm-border:         #e5e7eb;
    --ccm-radius:         12px;
    --ccm-shadow-banner:  0 -4px 24px rgba(0, 0, 0, 0.10);
    --ccm-shadow-modal:   0 20px 60px rgba(0, 0, 0, 0.22);
    --ccm-toggle-on:      var(--ccm-accent);
    --ccm-toggle-off:     #d1d5db;
    --ccm-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ccm-transition:     0.25s ease;
    --ccm-z-banner:       9998;
    --ccm-z-modal:        9999;
}

/* --- Reset within plugin scope --------------------------------------------- */
#ccm-banner *,
#ccm-modal * {
    box-sizing: border-box;
    font-family: var(--ccm-font);
}

/* Reset only applies to non-.ccm-btn buttons (e.g. modal close ×) to avoid
   overriding styled button classes with the high-specificity #id selector */
#ccm-banner button:not(.ccm-btn),
#ccm-modal button:not(.ccm-btn) {
    font-family: var(--ccm-font);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

/* =============================================================================
   Banner — bottom-left floating card
   ============================================================================= */

#ccm-banner {
    position:   fixed;
    bottom:     24px;
    left:       24px;
    z-index:    var(--ccm-z-banner);
    width:      calc(100% - 48px);
    max-width:  380px;
    transform:  translateX(calc(-100% - 48px));
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#ccm-banner.ccm-banner--visible {
    transform: translateX(0);
}

#ccm-banner .ccm-banner__card {
    background:    var(--ccm-bg);
    border-radius: var(--ccm-radius);
    box-shadow:    var(--ccm-shadow-modal);
    border:        1px solid var(--ccm-border);
    padding:       24px;
}

#ccm-banner .ccm-banner__title {
    margin:         0 0 10px;
    font-size:      15px;
    font-weight:    700;
    color:          var(--ccm-primary);
    line-height:    1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#ccm-banner .ccm-banner__text {
    margin:      0 0 8px;
    font-size:   13px;
    line-height: 1.6;
    color:       var(--ccm-text-muted);
}

#ccm-banner .ccm-banner__policy-link {
    display:               inline-block;
    margin-bottom:         18px;
    font-size:             12px;
    color:                 var(--ccm-primary);
    text-decoration:       underline;
    text-underline-offset: 2px;
}

#ccm-banner .ccm-banner__policy-link:hover {
    opacity: 0.75;
}

#ccm-banner .ccm-banner__actions {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

/* Force Accept All full-width inside banner */
#ccm-banner .ccm-banner__actions .ccm-btn--primary {
    width:           100%;
    justify-content: center;
}

#ccm-banner .ccm-banner__row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   8px;
}

/* =============================================================================
   Buttons
   ============================================================================= */

#ccm-banner .ccm-btn,
#ccm-modal .ccm-btn,
.ccm-yt-placeholder .ccm-btn {
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    padding:     11px 24px;
    border-radius: 6px;
    font-size:   14px;
    font-weight: 600;
    line-height: 1;
    cursor:      pointer;
    transition:  background var(--ccm-transition),
                 color      var(--ccm-transition),
                 border-color var(--ccm-transition),
                 opacity    var(--ccm-transition);
    border: 2px solid transparent;
    white-space: nowrap;
    text-decoration: none;
}

/* Primary — Accept All */
#ccm-banner .ccm-btn--primary,
#ccm-modal .ccm-btn--primary,
.ccm-yt-placeholder .ccm-btn--primary {
    background:   var(--ccm-accent);
    color:        #ffffff;
    border-color: var(--ccm-accent);
}

#ccm-banner .ccm-btn--primary:hover,
#ccm-banner .ccm-btn--primary:focus-visible,
#ccm-modal .ccm-btn--primary:hover,
#ccm-modal .ccm-btn--primary:focus-visible,
.ccm-yt-placeholder .ccm-btn--primary:hover,
.ccm-yt-placeholder .ccm-btn--primary:focus-visible {
    background:   var(--ccm-accent-hover);
    border-color: var(--ccm-accent-hover);
    outline:      none;
}

/* Secondary — Manage Preferences / Save */
#ccm-banner .ccm-btn--secondary,
#ccm-modal .ccm-btn--secondary {
    background:   transparent;
    color:        var(--ccm-primary);
    border-color: var(--ccm-primary);
}

#ccm-banner .ccm-btn--secondary:hover,
#ccm-banner .ccm-btn--secondary:focus-visible,
#ccm-modal .ccm-btn--secondary:hover,
#ccm-modal .ccm-btn--secondary:focus-visible {
    background: var(--ccm-primary);
    color:      #ffffff;
    outline:    none;
}

/* Outline — Reject All */
#ccm-banner .ccm-btn--outline,
#ccm-modal .ccm-btn--outline {
    background:   transparent;
    color:        var(--ccm-text-muted);
    border-color: var(--ccm-border);
}

#ccm-banner .ccm-btn--outline:hover,
#ccm-banner .ccm-btn--outline:focus-visible,
#ccm-modal .ccm-btn--outline:hover,
#ccm-modal .ccm-btn--outline:focus-visible {
    border-color: var(--ccm-text-muted);
    color:        var(--ccm-text);
    outline:      none;
}

/* Ghost — small secondary buttons in banner (Reject All / Set Preferences) */
#ccm-banner .ccm-btn--ghost,
#ccm-modal .ccm-btn--ghost {
    background:     #f3f4f6;
    color:          var(--ccm-text-muted);
    border-color:   transparent;
    font-size:      12px;
    font-weight:    700;
    padding:        10px 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#ccm-banner .ccm-btn--ghost:hover,
#ccm-banner .ccm-btn--ghost:focus-visible,
#ccm-modal .ccm-btn--ghost:hover,
#ccm-modal .ccm-btn--ghost:focus-visible {
    background: #e5e7eb;
    color:      var(--ccm-text);
    outline:    none;
}

/* =============================================================================
   Modal — preferences panel
   ============================================================================= */

.ccm-modal {
    position: fixed;
    inset:    0;
    z-index:  var(--ccm-z-modal);
    display:  flex;
    align-items:     center;
    justify-content: center;
    padding: 20px;
}

#ccm-modal .ccm-modal__overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0.50);
    cursor:     pointer;
    animation:  ccm-fade-in 0.2s ease forwards;
}

@keyframes ccm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#ccm-modal .ccm-modal__dialog {
    position:     relative;
    background:   var(--ccm-bg);
    border-radius: var(--ccm-radius);
    box-shadow:   var(--ccm-shadow-modal);
    width:        100%;
    max-width:    560px;
    max-height:   90vh;
    display:      flex;
    flex-direction: column;
    overflow:     hidden;
    /* Enter animation */
    transform:    translateY(16px);
    opacity:      0;
    transition:   transform var(--ccm-transition), opacity var(--ccm-transition);
}

#ccm-modal.ccm-modal--visible .ccm-modal__dialog {
    transform: translateY(0);
    opacity:   1;
}

#ccm-modal .ccm-modal__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 24px 18px;
    border-bottom:   1px solid var(--ccm-border);
    flex-shrink:     0;
}

#ccm-modal .ccm-modal__title {
    margin:      0;
    font-size:   18px;
    font-weight: 700;
    color:       var(--ccm-primary);
    line-height: 1;
}

#ccm-modal .ccm-modal__close {
    font-size:     22px;
    line-height:   1;
    color:         var(--ccm-text-muted);
    padding:       6px 8px;
    border-radius: 6px;
    transition:    color var(--ccm-transition), background var(--ccm-transition);
}

#ccm-modal .ccm-modal__close:hover,
#ccm-modal .ccm-modal__close:focus-visible {
    color:      var(--ccm-text);
    background: var(--ccm-border);
    outline:    none;
}

#ccm-modal .ccm-modal__body {
    padding:    20px 24px;
    overflow-y: auto;
    flex:       1;
}

#ccm-modal .ccm-modal__body > p {
    margin:      0 0 20px;
    font-size:   14px;
    color:       var(--ccm-text-muted);
    line-height: 1.55;
}

#ccm-modal .ccm-modal__footer {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     16px 24px 22px;
    border-top:  1px solid var(--ccm-border);
    flex-wrap:   wrap;
    flex-shrink: 0;
}

/* Push Accept All to the right */
#ccm-modal .ccm-modal__footer .ccm-btn--primary {
    margin-left: auto;
}

/* =============================================================================
   Cookie category rows
   ============================================================================= */

#ccm-modal .ccm-category {
    border:        1px solid var(--ccm-border);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow:      hidden;
    transition:    border-color var(--ccm-transition);
}

#ccm-modal .ccm-category:last-child {
    margin-bottom: 0;
}

#ccm-modal .ccm-category:hover {
    border-color: color-mix(in srgb, var(--ccm-primary) 40%, var(--ccm-border));
}

#ccm-modal .ccm-category__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    padding:         16px;
}

#ccm-modal .ccm-category__info {
    flex: 1;
}

#ccm-modal .ccm-category__title {
    margin:      0 0 5px;
    font-size:   14px;
    font-weight: 600;
    color:       var(--ccm-text);
    line-height: 1;
}

#ccm-modal .ccm-category__desc {
    margin:      0;
    font-size:   13px;
    color:       var(--ccm-text-muted);
    line-height: 1.45;
}

/* =============================================================================
   Toggle switch (iOS-style)
   ============================================================================= */

#ccm-modal .ccm-toggle {
    flex-shrink: 0;
}

/* Visually hide the native checkbox */
#ccm-modal .ccm-toggle input[type="checkbox"] {
    position:  absolute;
    width:     1px;
    height:    1px;
    padding:   0;
    margin:    -1px;
    overflow:  hidden;
    clip:      rect(0,0,0,0);
    white-space: nowrap;
    border:    0;
}

#ccm-modal .ccm-toggle__label {
    display:  block;
    position: relative;
    width:    50px;
    height:   28px;
    cursor:   pointer;
}

/* Track */
#ccm-modal .ccm-toggle__label::before {
    content:       '';
    display:       block;
    width:         50px;
    height:        28px;
    background:    var(--ccm-toggle-off);
    border-radius: 14px;
    transition:    background var(--ccm-transition);
}

/* Thumb */
#ccm-modal .ccm-toggle__label::after {
    content:       '';
    position:      absolute;
    top:           4px;
    left:          4px;
    width:         20px;
    height:        20px;
    background:    #ffffff;
    border-radius: 50%;
    box-shadow:    0 1px 4px rgba(0,0,0,0.20);
    transition:    left var(--ccm-transition);
}

#ccm-modal .ccm-toggle input:checked + .ccm-toggle__label::before {
    background: var(--ccm-toggle-on);
}

#ccm-modal .ccm-toggle input:checked + .ccm-toggle__label::after {
    left: 26px;
}

/* Focus ring */
#ccm-modal .ccm-toggle input:focus-visible + .ccm-toggle__label::before {
    outline:        2px solid var(--ccm-accent);
    outline-offset: 2px;
}

/* Disabled state — Necessary cookies */
#ccm-modal .ccm-toggle--disabled .ccm-toggle__label {
    cursor:  not-allowed;
    opacity: 0.65;
}

#ccm-modal .ccm-toggle--disabled input:checked + .ccm-toggle__label::before {
    background: var(--ccm-primary);
}

/* =============================================================================
   YouTube Facade — blocked embed placeholder
   ============================================================================= */

.ccm-yt-placeholder {
    position:            relative;
    width:               100%;
    padding-bottom:      56.25%; /* 16:9 */
    background-color:    #0f0f0f;
    background-size:     cover;
    background-position: center;
    overflow:            hidden;
    border-radius:       4px;
}

.ccm-yt-placeholder__overlay {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(0, 0, 0, 0.70);
    padding:         20px;
}

.ccm-yt-placeholder__lock {
    text-align:   center;
    color:        #ffffff;
    max-width:    320px;
}

.ccm-yt-placeholder__lock svg {
    margin-bottom: 12px;
    opacity:       0.85;
}

.ccm-yt-placeholder__lock p {
    margin:      0 0 6px;
    font-size:   14px;
    line-height: 1.5;
    color:       rgba(255, 255, 255, 0.85);
}

.ccm-yt-placeholder__lock p strong {
    color: #ffffff;
}

.ccm-yt-placeholder__btn {
    margin-top: 14px;
    font-size:  13px;
    padding:    9px 18px;
}

/* =============================================================================
   Footer preferences link (shortcode output)
   ============================================================================= */

.ccm-preferences-link {
    color:           inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor:          pointer;
}

/* =============================================================================
   Accessibility utility
   ============================================================================= */

.sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0,0,0,0);
    white-space: nowrap;
    border:     0;
}

/* =============================================================================
   Responsive — mobile
   ============================================================================= */

@media (max-width: 640px) {
    #ccm-banner {
        bottom:     0;
        left:       0;
        width:      100%;
        max-width:  none;
        transform:  translateY(110%);
    }

    #ccm-banner.ccm-banner--visible {
        transform: translateY(0);
    }

    .ccm-banner__card {
        border-radius: var(--ccm-radius) var(--ccm-radius) 0 0;
    }

    #ccm-modal .ccm-modal__footer {
        flex-direction: column;
    }

    #ccm-modal .ccm-modal__footer .ccm-btn {
        width:           100%;
        justify-content: center;
    }

    #ccm-modal .ccm-modal__footer .ccm-btn--primary {
        margin-left: 0;
        order: -1; /* Accept All first on mobile */
    }
}