/**
 * NB Cookie Consent - Frontend Styles
 *
 * Dynamic values are applied via CSS custom properties (variables) set inline on the
 * container element by PHP: --nb-font-size, --nb-font-color, --nb-overlay-display,
 * --nb-accent (owner's Accept colour) and --nb-decline (owner's Decline colour).
 * Physical directions use logical properties (inset-inline, margin-inline, text-align:start)
 * so the banner is correct in both LTR and RTL without duplicated rules.
 */

#cookie-consent-container {
    position: fixed;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Dynamic values via CSS variables (defaults kept in sync with the plugin defaults) */
    --nb-font-size: 14px;
    --nb-font-color: #333333;
    --nb-overlay-display: none;
    --nb-accent: #0073aa;
    --nb-decline: #6c757d;
}

#cookie-consent-container.cookie-consent-rtl { direction: rtl; }
#cookie-consent-container.cookie-consent-ltr { direction: ltr; }

/* --- Positioning: bottom-docked "banner" vs centered "modal" --- */
.cookie-consent-banner {
    inset-block-end: 0;
    inset-inline: 0;
    padding: 18px;
    /* JS sets display:flex when showing; center the card horizontally so it never depends
       solely on the content's auto margins. */
    justify-content: center;
}

.cookie-consent-modal {
    /* inset:0 alone gives a full-viewport fixed layer; avoid 100vw/100vh, which include the
       scrollbar width/height and cause a few px of horizontal overflow on desktop. */
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cookie-consent-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 30, 0.55);
    z-index: 999998;
    display: var(--nb-overlay-display, none);
}

/* --- The card --- */
.cookie-consent-content {
    position: relative;
    z-index: 1000000;
    box-sizing: border-box;
    max-width: 540px;
    margin: 0 auto;
    padding: 20px 24px 18px;
    border-radius: 16px;
    /* No top accent bar - the card stays clean; the Accept button and privacy link carry the
       brand colour. (The owner's background colour is set inline by PHP.) */
    box-shadow: 0 2px 6px rgba(15, 23, 30, 0.06), 0 18px 50px -12px rgba(15, 23, 30, 0.28);
    text-align: start;
}

/* The card gets programmatic focus when a blocking modal opens (tabindex=-1); it's not a
   keyboard-navigable control, so don't show a focus ring on the whole card. */
.cookie-consent-content:focus { outline: none; }

.cookie-consent-modal .cookie-consent-content {
    width: 500px;
    max-width: 92vw;
    max-height: 85vh;
    overflow-y: auto;
}

/* --- Message --- */
.cookie-consent-message {
    margin: 0 0 11px;
    font-size: var(--nb-font-size, 14px);
    line-height: 1.55;
    color: var(--nb-font-color, #333333);
    text-align: start;
}

/* --- Privacy link --- */
.cookie-consent-privacy-links {
    margin: 0 0 13px;
    font-size: 13px;
    text-align: center;
}
.cookie-consent-privacy-links a {
    color: var(--nb-accent, #0073aa);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}
.cookie-consent-privacy-links a:hover {
    border-bottom-color: currentColor;
}

/* Lock background scroll while the modal/overlay is open (class toggled by JS). */
body.cookie-modal-open { overflow: hidden; }

/* --- Action buttons --- */
.cookie-consent-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.cookie-consent-buttons button {
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    text-align: center;
}
/* Accept gets a soft branded lift so it reads as the primary action. Its background-color
   is set inline (owner's accept colour); we only add depth here. */
#cookie-consent-container #accept-cookies {
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.28);
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--nb-accent, #0073aa) 75%, transparent);
}
.cookie-consent-buttons button:hover { filter: brightness(0.94); }
.cookie-consent-buttons button:focus-visible {
    outline: 2px solid var(--nb-accent, #0073aa);
    outline-offset: 2px;
}

/* MULTIPLE buttons (Accept/Decline, or Accept All/Reject/Customize) always share ONE row
   side by side in BOTH width modes - they never stack on desktop, so an owner who leaves
   "Full width" on can't accidentally get a confusing column of buttons. They shrink to fit
   rather than wrapping, and their labels stay on a single line. (Mobile stacks them below.) */
.cookie-consent-buttons.nb-btn-auto button,
.cookie-consent-buttons.nb-btn-full button {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    padding-inline: 14px;
}
/* The Button Width setting only changes a LONE button (Accept-only mode):
   Auto = a comfortable content-width CTA, centred; Full = spans the whole banner. */
.cookie-consent-buttons.nb-btn-auto button:only-child {
    flex: 0 1 auto;
    min-width: 220px;
    max-width: 100%;
}
.cookie-consent-buttons.nb-btn-full button:only-child { flex: 1 1 100%; }

/* "Customize" = a neutral outlined button (not a link): same size/shape as the primary
   buttons but transparent fill + neutral border + body-coloured text. */
#cookie-consent-container .nb-cc-secondary-btn {
    background: transparent;
    border-color: rgba(0, 0, 0, 0.22);
    color: var(--nb-font-color, #333);
    box-shadow: none;
}
#cookie-consent-container .nb-cc-secondary-btn:hover {
    background: rgba(0, 0, 0, 0.045);
    filter: none;
}

/* --- Powered-by credit --- */
.nb-credit-link {
    margin-top: 14px;
    text-align: center;
    font-size: 11px;
    opacity: 0.6;
}
.nb-credit-link a { color: inherit; text-decoration: none; transition: opacity 0.2s ease; }
.nb-credit-link a:hover { opacity: 1; text-decoration: underline; }

/* --- Preference center --- */
#cookie-consent-container .nb-cc-prefs {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: start;
}
#cookie-consent-container .nb-cc-prefs-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.72;
    color: var(--nb-font-color, #333);
    margin-bottom: 10px;
}

/* Each category = a soft card: info block on the leading side, switch on the trailing side. */
#cookie-consent-container .nb-cc-cat {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.018);
}
#cookie-consent-container .nb-cc-cat-info { flex: 1 1 auto; min-width: 0; }
#cookie-consent-container .nb-cc-cat-title {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: var(--nb-font-color, #333);
}
#cookie-consent-container .nb-cc-cat-always {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--nb-accent, #0073aa);
    background: color-mix(in srgb, var(--nb-accent, #0073aa) 12%, transparent);
    padding: 2px 7px;
    border-radius: 999px;
    margin-inline-start: 4px;
    white-space: nowrap;
    vertical-align: middle;
}
#cookie-consent-container .nb-cc-cat-desc {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    opacity: 0.75;
    color: var(--nb-font-color, #333);
}

/* Switch toggle (native checkbox hidden inside the label, styled slider span). */
#cookie-consent-container .nb-cc-switch {
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
    margin-top: 1px;
    cursor: pointer;
}
#cookie-consent-container .nb-cc-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
#cookie-consent-container .nb-cc-slider {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    background: #cbd0d6;
    /* Visible boundary so the toggle is perceivable against the card (WCAG 1.4.11, >=3:1). */
    border: 1px solid #8c8f94;
    border-radius: 999px;
    transition: background 0.15s ease, border-color 0.15s ease;
    pointer-events: none;
}
#cookie-consent-container .nb-cc-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: inset-inline-start 0.15s ease;
}
#cookie-consent-container .nb-cc-switch input:checked + .nb-cc-slider {
    background: var(--nb-accent, #0073aa);
    border-color: var(--nb-accent, #0073aa);
}
#cookie-consent-container .nb-cc-switch input:checked + .nb-cc-slider::before {
    inset-inline-start: 21px;
}
#cookie-consent-container .nb-cc-switch input:focus-visible + .nb-cc-slider {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nb-accent, #0073aa) 30%, transparent);
}
/* Essential: locked on. Dim slightly and show a not-allowed cursor. */
#cookie-consent-container .nb-cc-switch--locked,
#cookie-consent-container .nb-cc-switch input:disabled {
    cursor: not-allowed;
}
#cookie-consent-container .nb-cc-switch input:disabled + .nb-cc-slider { opacity: 0.7; }

#cookie-consent-container .nb-cc-prefs-actions { margin-top: 14px; }
#cookie-consent-container .nb-cc-prefs-actions button {
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease;
}
#cookie-consent-container .nb-cc-prefs-actions button:hover { filter: brightness(0.94); }

/* Screen-reader-only text (accessibility) */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Mobile --- */
@media (max-width: 600px) {
    .cookie-consent-content { padding: 20px 18px 18px; border-radius: 14px; }
    .cookie-consent-buttons { flex-direction: column; }
    .cookie-consent-buttons.nb-btn-auto button,
    .cookie-consent-buttons.nb-btn-full button { flex: none; width: 100%; }
    .nb-credit-link { font-size: 10px; margin-top: 10px; }
}

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    #cookie-consent-container * { transition: none !important; }
}