/* ==========================================================================
   Jaygah Design System (JDS) — Student Journey & Consent Banner
   ========================================================================== */

.jaygah-journey-consent {
    box-sizing: border-box;
    position: fixed;
    inset: auto 24px 24px auto;
    width: min(420px, calc(100vw - 48px));
    z-index: 100010;
    background: var(--jds-color-surface, #fff);
    color: var(--jds-color-text, #18343d);
    border: 1px solid var(--jds-color-border, #e2e8f0);
    border-radius: var(--jds-radius-card, 24px);
    padding: var(--jds-space-5, 20px);
    box-shadow: var(--jds-shadow-raised, 0 16px 40px rgba(0, 0, 0, 0.12));
    direction: rtl;
    font-family: var(--jds-font-family, inherit);
    max-height: 70dvh;
    overflow: auto;
    backdrop-filter: blur(12px);
    transition: all var(--jds-duration-base, 220ms) var(--jds-ease);
}

.jaygah-journey-consent[hidden] {
    display: none;
}

.jaygah-journey-consent h3,
.jaygah-journey-consent strong {
    font-family: var(--jds-font-heading, inherit);
    font-size: var(--jds-type-small, 14px);
    font-weight: 800;
    color: var(--jds-color-text, #18343d);
}

.jaygah-journey-consent p {
    font-size: var(--jds-type-caption, 12px);
    line-height: var(--jds-leading-body, 1.8);
    color: var(--jds-color-muted, #64748b);
    margin-block: var(--jds-space-2, 8px);
}

.jaygah-journey-consent div {
    display: flex;
    gap: var(--jds-space-2, 8px);
    flex-wrap: wrap;
    margin-top: var(--jds-space-3, 12px);
}

.jaygah-journey-consent button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--jds-touch-target, 44px);
    padding: 8px var(--jds-space-4, 16px);
    border-radius: var(--jds-radius-control, 12px);
    border: 1px solid var(--jds-color-border, #e2e8f0);
    background: var(--jds-color-surface-soft, #f8fafc);
    color: var(--jds-color-text, #18343d);
    font-family: inherit;
    font-size: var(--jds-type-caption, 12px);
    font-weight: var(--jds-weight-label, 700);
    cursor: pointer;
    transition: all var(--jds-duration-fast, 160ms) var(--jds-ease);
}

.jaygah-journey-consent button:hover {
    background: color-mix(in srgb, var(--jds-color-primary, #008a90) 8%, var(--jds-color-surface, #fff));
    border-color: color-mix(in srgb, var(--jds-color-primary, #008a90) 25%, var(--jds-color-border, #e2e8f0));
    color: var(--jds-color-primary, #008a90);
    transform: translateY(-1px);
}

.jaygah-journey-consent div button:first-child {
    background: var(--jds-action-background, linear-gradient(135deg, var(--jds-color-primary), var(--jds-color-secondary)));
    color: var(--jds-action-text, #fff) !important;
    border-color: transparent;
    font-weight: 800;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--jds-color-primary, #008a90) 25%, transparent);
}

.jaygah-journey-consent div button:first-child:hover {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--jds-color-primary, #008a90) 35%, transparent);
    filter: brightness(1.05);
}

.jaygah-journey-consent summary {
    cursor: pointer;
    font-size: var(--jds-type-caption, 11px);
    color: var(--jds-color-muted, #64748b);
    padding-block: var(--jds-space-1, 4px);
}

.jaygah-journey-consent button:focus-visible {
    outline: 2px solid var(--jds-color-primary, #008a90);
    outline-offset: 2px;
}

.jaygah-privacy-link {
    display: block;
    padding: var(--jds-space-3, 12px) var(--jds-space-5, 20px);
    text-align: center;
    font-size: var(--jds-type-caption, 12px);
    color: var(--jds-color-muted, #64748b);
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 600px) {
    .jaygah-journey-consent {
        inset: auto 12px 12px auto;
        width: calc(100vw - 24px);
        padding: var(--jds-space-4, 16px);
    }
}

@media print {
    .jaygah-journey-consent {
        display: none !important;
    }
}