/**
 * WPAO Cookie Consent – Frontend Styles
 * Supports bottom-bar and modal positions.
 * Colours are overridden at runtime via CSS custom properties set inline.
 *
 * @package WP_Application_Online
 * @since   1.5.0
 */

/* ── Custom properties (defaults; overridden inline by PHP) ── */
#wpao-cc-banner,
.wpao-cc-prefs-inner {
    --wpao-cc-bg           : #ffffff;
    --wpao-cc-text         : #1f2937;
    --wpao-cc-primary      : #4f46e5;
    --wpao-cc-primary-text : #ffffff;
    --wpao-cc-border       : #e5e7eb;
    --wpao-cc-radius       : 14px;
    --wpao-cc-shadow       : 0 8px 32px rgba(0,0,0,0.14);
    --wpao-cc-transition   : 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* ── Banner base ── */
#wpao-cc-banner {
    position    : fixed;
    z-index     : 1000000;
    font-family : 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size   : 15px;
    line-height : 1.55;
    color       : var(--wpao-cc-text);
    background  : var(--wpao-cc-bg);
    box-shadow  : var(--wpao-cc-shadow);
    opacity     : 0;
    pointer-events : none;
    transition  : opacity var(--wpao-cc-transition), transform var(--wpao-cc-transition);
}

#wpao-cc-banner.wpao-cc-visible {
    opacity        : 1;
    pointer-events : auto;
}

/* ── Bottom-bar position ── */
#wpao-cc-banner.wpao-cc-position-bottom-bar {
    bottom        : 0;
    left          : 0;
    right         : 0;
    border-radius : var(--wpao-cc-radius) var(--wpao-cc-radius) 0 0;
    border-top    : 1px solid var(--wpao-cc-border);
    transform     : translateY(100%);
}

#wpao-cc-banner.wpao-cc-position-bottom-bar.wpao-cc-visible {
    transform : translateY(0);
}

/* ── Modal position ── */
#wpao-cc-banner.wpao-cc-position-modal {
    top       : 50%;
    left      : 50%;
    transform : translate(-50%, -40%);
    width     : min(520px, calc(100vw - 32px));
    border-radius : var(--wpao-cc-radius);
    border    : 1px solid var(--wpao-cc-border);
}

#wpao-cc-banner.wpao-cc-position-modal.wpao-cc-visible {
    transform : translate(-50%, -50%);
}

.wpao-cc-overlay {
    position   : fixed;
    inset      : 0;
    background : rgba(0,0,0,0.45);
    z-index    : -1;
}

/* ── Inner layout ── */
.wpao-cc-inner {
    padding : 22px 24px 20px;
}

.wpao-cc-header {
    display     : flex;
    align-items : center;
    gap         : 10px;
    margin-bottom : 10px;
}

.wpao-cc-icon {
    font-size : 22px;
    line-height : 1;
}

.wpao-cc-title {
    margin      : 0;
    font-size   : 17px;
    font-weight : 700;
    color       : var(--wpao-cc-text);
}

.wpao-cc-body {
    margin-bottom : 18px;
}

.wpao-cc-text {
    margin : 0;
    color  : var(--wpao-cc-text);
}

.wpao-cc-policy-link {
    color           : var(--wpao-cc-primary);
    text-decoration : underline;
    font-weight     : 600;
}

/* ── Action buttons ── */
.wpao-cc-actions {
    display   : flex;
    flex-wrap : wrap;
    gap       : 10px;
    align-items : center;
}

.wpao-cc-btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    padding         : 10px 20px;
    border-radius   : 8px;
    font-size       : 14px;
    font-weight     : 700;
    cursor          : pointer;
    border          : none;
    transition      : background 0.2s, transform 0.15s, box-shadow 0.2s;
    white-space     : nowrap;
    font-family     : inherit;
}

.wpao-cc-btn:focus-visible {
    outline        : 3px solid var(--wpao-cc-primary);
    outline-offset : 2px;
}

.wpao-cc-btn-primary {
    background : var(--wpao-cc-primary);
    color      : var(--wpao-cc-primary-text) !important;
}

.wpao-cc-btn-primary:hover {
    filter    : brightness(1.1);
    transform : translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.wpao-cc-btn-secondary {
    background : #f3f4f6;
    color      : #374151 !important;
    border     : 1px solid var(--wpao-cc-border);
}

.wpao-cc-btn-secondary:hover {
    background : #e5e7eb;
}

.wpao-cc-btn-link {
    background  : transparent;
    color       : var(--wpao-cc-primary) !important;
    padding     : 10px 8px;
    text-decoration : underline;
    font-weight : 600;
    font-size   : 13px;
}

.wpao-cc-btn-link:hover {
    color : #3730a3 !important;
}

/* ── Preferences Modal ── */
.wpao-cc-prefs-modal {
    position   : fixed;
    inset      : 0;
    z-index    : 1000001;
    display    : flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.wpao-cc-prefs-modal[hidden] {
    display : none;
}

.wpao-cc-prefs-overlay {
    position   : fixed;
    inset      : 0;
    background : rgba(0,0,0,0.55);
    z-index    : -1;
    opacity    : 0;
    transition : opacity 0.3s ease;
}

.wpao-cc-prefs-visible .wpao-cc-prefs-overlay {
    opacity : 1;
}

.wpao-cc-prefs-inner {
    background    : var(--wpao-cc-bg);
    color         : var(--wpao-cc-text);
    border-radius : 16px;
    box-shadow    : 0 20px 60px rgba(0,0,0,0.2);
    width         : min(560px, calc(100vw - 32px));
    max-height    : 90vh;
    overflow-y    : auto;
    padding       : 28px 28px 24px;
    position      : relative;
    transform     : translateY(20px);
    opacity       : 0;
    transition    : transform 0.3s ease, opacity 0.3s ease;
}

.wpao-cc-prefs-visible .wpao-cc-prefs-inner {
    transform : translateY(0);
    opacity   : 1;
}

.wpao-cc-prefs-close {
    position   : absolute;
    top        : 14px;
    right      : 16px;
    background : none;
    border     : none;
    font-size  : 24px;
    line-height: 1;
    cursor     : pointer;
    color      : #6b7280;
    padding    : 4px 8px;
    border-radius : 6px;
    transition : background 0.2s, color 0.2s;
}

.wpao-cc-prefs-close:hover {
    background : #f3f4f6;
    color      : #111827;
}

.wpao-cc-prefs-title {
    margin      : 0 0 8px;
    font-size   : 20px;
    font-weight : 800;
    color       : var(--wpao-cc-text);
}

.wpao-cc-prefs-intro {
    font-size  : 14px;
    color      : #6b7280;
    margin     : 0 0 20px;
    line-height: 1.55;
}

/* ── Category rows ── */
.wpao-cc-categories {
    display        : flex;
    flex-direction : column;
    gap            : 12px;
    margin-bottom  : 24px;
}

.wpao-cc-category {
    border        : 1px solid var(--wpao-cc-border);
    border-radius : 10px;
    padding       : 14px 16px;
    background    : #f9fafb;
}

.wpao-cc-category-required {
    background : #f0fdf4;
    border-color : #bbf7d0;
}

.wpao-cc-cat-header {
    display         : flex;
    justify-content : space-between;
    align-items     : flex-start;
    gap             : 16px;
}

.wpao-cc-cat-info {
    flex : 1;
}

.wpao-cc-cat-label {
    font-size   : 15px;
    font-weight : 700;
    color       : var(--wpao-cc-text);
    display     : block;
    margin-bottom : 4px;
}

.wpao-cc-cat-desc {
    font-size  : 13px;
    color      : #6b7280;
    margin     : 0;
    line-height: 1.5;
}

.wpao-cc-cat-toggle {
    flex-shrink : 0;
    padding-top : 2px;
}

.wpao-cc-always-on {
    font-size   : 12px;
    font-weight : 700;
    color       : #16a34a;
    background  : #dcfce7;
    padding     : 3px 10px;
    border-radius : 999px;
    white-space : nowrap;
}

/* ── Toggle switch ── */
.wpao-cc-switch {
    position : relative;
    display  : inline-block;
    width    : 44px;
    height   : 24px;
    cursor   : pointer;
}

.wpao-cc-switch input {
    opacity  : 0;
    width    : 0;
    height   : 0;
    position : absolute;
}

.wpao-cc-switch-slider {
    position      : absolute;
    inset         : 0;
    background    : #d1d5db;
    border-radius : 999px;
    transition    : background 0.25s;
}

.wpao-cc-switch-slider::before {
    content       : '';
    position      : absolute;
    height        : 18px;
    width         : 18px;
    left          : 3px;
    bottom        : 3px;
    background    : #ffffff;
    border-radius : 50%;
    box-shadow    : 0 1px 3px rgba(0,0,0,0.2);
    transition    : transform 0.25s;
}

.wpao-cc-switch input:checked + .wpao-cc-switch-slider {
    background : var(--wpao-cc-primary);
}

.wpao-cc-switch input:checked + .wpao-cc-switch-slider::before {
    transform : translateX(20px);
}

.wpao-cc-switch input:focus-visible + .wpao-cc-switch-slider {
    outline        : 3px solid var(--wpao-cc-primary);
    outline-offset : 2px;
}

/* ── Prefs action row ── */
.wpao-cc-prefs-actions {
    display   : flex;
    gap       : 10px;
    flex-wrap : wrap;
}

/* ── Body scroll lock ── */
body.wpao-cc-modal-open {
    overflow : hidden;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .wpao-cc-inner {
        padding : 18px 16px 16px;
    }

    .wpao-cc-actions {
        flex-direction : column;
    }

    .wpao-cc-btn {
        width : 100%;
    }

    .wpao-cc-btn-link {
        width      : auto;
        text-align : center;
    }

    .wpao-cc-prefs-inner {
        padding : 22px 18px 20px;
    }

    .wpao-cc-prefs-actions {
        flex-direction : column;
    }

    .wpao-cc-prefs-actions .wpao-cc-btn {
        width : 100%;
    }
}