/* ========================================
   TamRank Cookie-consent banner + modal + toast
   Self-built theme-code (no Complianz).
   Recreates the approved design in
   Website/Design/consent-banner/handoff/.
   Brand tokens live in variables.css.
   ======================================== */

/* Shared focus ring for the consent surfaces (design uses a stronger 0.35
   emerald glow than the global --tr-shadow-focus). */
:root {
    --tr-consent-focus: 0 0 0 3px rgba(16, 185, 129, 0.35);
}

.tr-consent[hidden],
.tr-consent-modal[hidden],
.tr-consent-toast[hidden] {
    display: none;
}

/* ---- Buttons (equal prominence for accept / essential) --------------- */

.tr-consent-btn {
    flex: 1;
    font-family: var(--tr-font-family);
    font-size: 14px;
    font-weight: var(--tr-font-semibold);
    line-height: 1;
    border-radius: var(--tr-radius-md);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--tr-transition-fast),
                border-color var(--tr-transition-fast),
                color var(--tr-transition-fast),
                box-shadow var(--tr-transition-fast),
                transform var(--tr-transition-fast);
}

.tr-consent-btn:focus-visible {
    outline: none;
    box-shadow: var(--tr-consent-focus);
}

/* Accept all — TamRank brand fill (--tr-color-primary / #10b981), matching every
   other primary CTA on the site (white text on brand green: blog, changelog,
   checkout, features). The design originally used the darker #047857 for a 4.5:1
   AA ratio, but that read as off-brand against the rest of the site; we align with
   the site-wide CTA convention instead. Hover already uses --tr-color-primary-hover. */
.tr-consent-btn--accept {
    padding: 15px 0;
    color: var(--tr-color-white);
    background: var(--tr-color-primary);
}

.tr-consent-btn--accept:hover {
    background: var(--tr-color-primary-hover);
    box-shadow: var(--tr-shadow-primary-hover);
    transform: translateY(-1px);
}

/* Adjust preferences (banner) — white with a 2px slate border, equal weight
   next to the brand-green "Accept all". (Formerly --essential; the reject action
   moved to the secondary link below, so this slot now opens the preferences modal.) */
.tr-consent-btn--adjust {
    padding: 13px 0;
    color: var(--tr-color-slate-800);
    background: var(--tr-color-white);
    border: 2px solid var(--tr-color-slate-800);
}

.tr-consent-btn--adjust:hover {
    background: var(--tr-color-surface);
    transform: translateY(-1px);
}

/* Essential only (modal) — solid slate fill. */
.tr-consent-btn--essential-solid {
    padding: 11px 0;
    color: var(--tr-color-white);
    background: var(--tr-color-slate-800);
}

.tr-consent-btn--essential-solid:hover {
    background: var(--tr-color-slate-700);
    transform: translateY(-1px);
}

/* Save choices (modal) — quiet outline. */
.tr-consent-btn--save {
    padding: 9px 0;
    font-size: 13px;
    color: var(--tr-color-slate-800);
    background: transparent;
    border: 2px solid var(--tr-color-surface);
}

.tr-consent-btn--save:hover {
    border-color: var(--tr-color-slate-400);
}

/* ---- Banner: centered card over a dimmed overlay --------------------- */

.tr-consent {
    position: fixed;
    inset: 0;
    z-index: var(--tr-z-toast, 700);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.5);
    font-family: var(--tr-font-family);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tr-transition-slow), visibility var(--tr-transition-slow);
}

.tr-consent.is-visible {
    opacity: 1;
    visibility: visible;
}

.tr-consent__card {
    width: 520px;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--tr-color-white);
    border-radius: var(--tr-radius-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transform: translateY(8px);
    transition: transform var(--tr-transition-slow);
}

.tr-consent.is-visible .tr-consent__card {
    transform: translateY(0);
}

.tr-consent__card:focus {
    outline: none;
}

.tr-consent__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tr-space-3);
    padding: 16px 24px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.tr-consent__brand {
    display: flex;
    align-items: center;
    gap: 9px;
}

.tr-consent__brand-icon {
    display: block;
}

.tr-consent__wordmark {
    font-size: 17px;
    font-weight: var(--tr-font-bold);
    letter-spacing: -0.02em;
    color: var(--tr-color-white);
}

.tr-consent__policy {
    font-size: 11.5px;
    font-weight: var(--tr-font-medium);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    white-space: nowrap;
    border-radius: var(--tr-radius-sm);
}

.tr-consent__policy:hover {
    color: var(--tr-color-white);
}

.tr-consent__policy:focus-visible {
    outline: none;
    box-shadow: var(--tr-consent-focus);
}

.tr-consent__body {
    padding: 20px 24px 22px;
}

.tr-consent__title {
    margin: 0;
    font-size: 18px;
    font-weight: var(--tr-font-bold);
    letter-spacing: -0.01em;
    color: var(--tr-color-slate-800);
}

.tr-consent__desc,
.tr-consent__nudge {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--tr-color-slate-600);
}

.tr-consent__nudge {
    margin-top: 6px;
}

.tr-consent__actions {
    display: flex;
    gap: var(--tr-space-3);
    margin-top: 20px;
}

.tr-consent__reject-row {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* Essential only — the one-click reject, now in the secondary (link) slot.
   Kept deliberately readable: slate-700 (darker than the slate-600 the "Adjust
   preferences" link used before), 14px, semibold + underline, so declining stays
   a clear, obviously-clickable choice and never reads as grey-on-grey. */
.tr-consent__reject-link {
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: var(--tr-radius-md);
    font-family: var(--tr-font-family);
    font-size: 14px;
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-700);
    text-decoration: underline;
    cursor: pointer;
}

.tr-consent__reject-link:hover {
    color: var(--tr-color-slate-800);
}

.tr-consent__reject-link:focus-visible {
    outline: none;
    box-shadow: var(--tr-consent-focus);
}

/* ---- Preferences modal ----------------------------------------------- */

.tr-consent-modal {
    position: fixed;
    inset: 0;
    z-index: var(--tr-z-modal, 400);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: var(--tr-font-family);
}

.tr-consent-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
}

.tr-consent-modal__dialog {
    position: relative;
    width: 560px;
    max-width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-sizing: border-box;
    background: var(--tr-color-white);
    border-radius: var(--tr-radius-xl);
    box-shadow: var(--tr-shadow-xl);
}

.tr-consent-modal__dialog:focus {
    outline: none;
}

.tr-consent-modal__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 24px 0 24px;
}

.tr-consent-modal__icon {
    display: block;
    flex: none;
}

.tr-consent-modal__title {
    flex: 1;
    font-size: 17px;
    font-weight: var(--tr-font-bold);
    letter-spacing: -0.01em;
    color: var(--tr-color-slate-800);
}

.tr-consent-modal__close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: transparent;
    border: none;
    border-radius: var(--tr-radius-md);
    color: var(--tr-color-slate-600);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.tr-consent-modal__close:hover {
    background: var(--tr-color-surface);
}

.tr-consent-modal__close:focus-visible {
    outline: none;
    box-shadow: var(--tr-consent-focus);
}

.tr-consent-modal__intro {
    margin: 8px 0 0;
    padding: 0 24px 16px 24px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tr-color-slate-600);
}

.tr-consent-modal__intro strong {
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-slate-800);
}

.tr-consent-modal__rows {
    border-top: 1px solid var(--tr-color-surface);
}

/* ---- One category row ------------------------------------------------ */

.tr-consent-row {
    display: flex;
    align-items: flex-start;
    gap: var(--tr-space-4);
    padding: 13px 24px;
    border-bottom: 1px solid var(--tr-color-surface);
}

.tr-consent-row__text {
    flex: 1;
    min-width: 0;
}

.tr-consent-row__name-line {
    display: flex;
    align-items: center;
    gap: var(--tr-space-2);
}

.tr-consent-row__name {
    font-size: 14px;
    font-weight: var(--tr-font-bold);
    color: var(--tr-color-slate-800);
}

.tr-consent-row__badge {
    font-size: 10.5px;
    font-weight: var(--tr-font-semibold);
    letter-spacing: 0.03em;
    color: #047857;
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 8px;
    border-radius: var(--tr-radius-full);
}

.tr-consent-row__desc {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--tr-color-slate-600);
}

.tr-consent-row__proc {
    margin-top: 4px;
    font-size: 11px;
    color: var(--tr-color-slate-500);
    font-family: Monaco, Menlo, monospace;
}

/* ---- Toggle (role="switch") ------------------------------------------ */

.tr-consent-toggle {
    position: relative;
    flex: none;
    width: 44px;
    height: 24px;
    margin-top: 4px;
    padding: 0;
    border: none;
    border-radius: var(--tr-radius-full);
    background: var(--tr-color-slate-400);
    cursor: pointer;
    transition: background var(--tr-transition-base);
}

.tr-consent-toggle[aria-checked="true"] {
    background: var(--tr-color-primary);
}

.tr-consent-toggle:disabled {
    cursor: not-allowed;
}

.tr-consent-toggle:focus-visible {
    outline: none;
    box-shadow: var(--tr-consent-focus);
}

.tr-consent-toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: var(--tr-radius-full);
    background: var(--tr-color-white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: left var(--tr-transition-base);
}

.tr-consent-toggle[aria-checked="true"] .tr-consent-toggle__knob {
    left: 22px;
}

/* ---- Modal actions + footer ------------------------------------------ */

.tr-consent-modal__actions {
    display: flex;
    gap: var(--tr-space-2);
    padding: 16px 24px 10px 24px;
}

.tr-consent-modal__foot {
    margin: 0;
    padding: 0 24px 18px 24px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--tr-color-slate-500);
}

.tr-consent-modal__foot a {
    color: var(--tr-color-slate-600);
    text-decoration: underline;
}

/* ---- Toast confirmation ---------------------------------------------- */

.tr-consent-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    z-index: var(--tr-z-toast, 700);
    display: flex;
    align-items: center;
    gap: var(--tr-space-2);
    max-width: calc(100% - 32px);
    padding: 10px 16px;
    background: var(--tr-color-slate-800);
    color: var(--tr-color-white);
    font-family: var(--tr-font-family);
    font-size: 12.5px;
    font-weight: var(--tr-font-medium);
    border-radius: var(--tr-radius-full);
    box-shadow: var(--tr-shadow-lg);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px);
    transition: opacity var(--tr-transition-slow),
                transform var(--tr-transition-slow),
                visibility var(--tr-transition-slow);
}

.tr-consent-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.tr-consent-toast__check {
    flex: none;
}

/* ---- Footer reopen link ---------------------------------------------- */

.tr-consent-reopen {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.tr-consent-reopen:hover {
    color: var(--tr-color-primary);
}

/* ---- Responsive ------------------------------------------------------ */

@media (max-width: 480px) {
    .tr-consent-modal__actions {
        flex-wrap: wrap;
    }

    .tr-consent-modal__actions .tr-consent-btn {
        flex: 1 1 100%;
    }

    .tr-consent-toast {
        white-space: normal;
        text-align: left;
    }
}

/* Respect reduced-motion: no slide, just fade. */
@media (prefers-reduced-motion: reduce) {
    .tr-consent,
    .tr-consent__card,
    .tr-consent-toast {
        transition: opacity var(--tr-transition-base), visibility var(--tr-transition-base);
        transform: none;
    }

    .tr-consent.is-visible .tr-consent__card {
        transform: none;
    }

    .tr-consent-toast.is-visible {
        transform: translateX(-50%);
    }

    .tr-consent-toggle,
    .tr-consent-toggle__knob {
        transition: none;
    }
}