/* ============================================================
   Cookie consent bar + confirmation toast.

   Split out of styles.css / styles-rtl.css (which held two copies
   of the same rules) so landing pages, which load neither, can
   still render the banner from one source of truth.

   --cookie-bar-offset is set by public/js/cookie-consent.js to the
   height of the mobile bottom nav, so the bar sits above it instead
   of on top of it. The same script adds the bar's own height to the
   body's padding-bottom, which is what stops it covering the last
   controls of a form — the sign-in screen especially.
   ============================================================ */

.cookie-bar {
    position: fixed;
    bottom: calc(20px + var(--sa-bottom, 0px) + var(--cookie-bar-offset, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    width: min(94%, 540px);
    background: #fff;
    border: 1px solid rgba(109, 74, 232, 0.08);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow:
        0 16px 48px -12px rgba(40, 37, 103, 0.12),
        0 4px 12px -4px rgba(109, 74, 232, 0.06);
}
.cookie-bar.display-none {
    display: none;
}
.cookie-bar.cookie-bar-visible {
    animation: cookieBarSlideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.cookie-bar.cookie-bar-closing {
    animation: cookieBarSlideDown 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes cookieBarSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes cookieBarSlideDown {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to   { opacity: 0; transform: translateX(-50%) translateY(16px); }
}
.cookie-bar-text {
    flex: 1;
    font-size: 13px;
    color: #6b7084;
    line-height: 1.5;
    margin: 0;
}
.cookie-bar-text a {
    color: #282567;
    text-decoration: underline;
    text-decoration-color: rgba(40, 37, 103, 0.25);
    text-underline-offset: 2px;
    font-weight: 500;
    transition: text-decoration-color 0.2s;
}
.cookie-bar-text a:hover {
    text-decoration-color: #282567;
}
.cookie-bar-btns {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.cookie-bar-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
    border: none;
}
.bar-btn-reject {
    background: transparent;
    color: #6b7084;
}
.bar-btn-reject:hover {
    background: #f6f5fa;
    color: #282567;
}
.bar-btn-accept {
    background: #6D4AE8;
    color: #fff;
}
.bar-btn-accept:hover {
    background: #5B3ACC;
    box-shadow: 0 4px 12px rgba(109, 74, 232, 0.3);
    transform: translateY(-1px);
}
.bar-btn-accept:active {
    transform: translateY(0);
}
@media (max-width: 575.98px) {
    .cookie-bar {
        flex-wrap: wrap;
        bottom: var(--cookie-bar-offset, 0px);
        width: 100%;
        border-radius: 14px 14px 0 0;
        padding: 14px 16px;
        /* Edge-to-edge at the bottom, so it owes the home indicator its inset. */
        padding-bottom: calc(14px + var(--sa-bottom, 0px));
        gap: 10px;
    }
    .cookie-bar-btns {
        width: 100%;
    }
    .cookie-bar-btn {
        flex: 1;
        text-align: center;
    }
}

/* ---- Confirmation toast ---- */
.cookie-confirmed {
    position: fixed;
    bottom: calc(24px + var(--sa-bottom, 0px) + var(--cookie-bar-offset, 0px));
    right: 24px;
    background: #ecfdf5;
    border: 1px solid rgba(5, 150, 105, 0.2);
    border-radius: 14px;
    padding: 12px 16px;
    display: none;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(5, 150, 105, 0.15);
    animation: cookieToastIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10000;
}
/* Its own keyframes rather than the privacy card's cookieSlideUp: that one is
   written for a centre-anchored card and dragged the toast sideways on entry. */
@keyframes cookieToastIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cookie-confirmed.show {
    display: flex;
}
.cookie-confirmed-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #059669;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cookie-confirmed-icon svg {
    width: 14px;
    height: 14px;
}
.cookie-confirmed-text {
    font-size: 13px;
    font-weight: 600;
    color: #059669;
}
.cookie-confirmed-manage {
    font-size: 12px;
    color: #059669;
    opacity: 0.7;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
}
@media (max-width: 575.98px) {
    .cookie-confirmed {
        bottom: calc(10px + var(--sa-bottom, 0px) + var(--cookie-bar-offset, 0px));
        right: 10px;
        left: 10px;
    }
}

/* ---- RTL ---- */
[dir="rtl"] .cookie-confirmed {
    right: auto;
    left: 24px;
}
@media (max-width: 575.98px) {
    [dir="rtl"] .cookie-confirmed {
        left: 10px;
        right: 10px;
    }
}