/* ------------------------------------------------------------------ *
 * Toast notifications — one consistent look shared by the public site
 * and the dashboard. Bootstrap ships the `.toast` layout; these rules
 * carry the card look (white, shadowed, colored icon per variant) and
 * a spring-like transition in place of Bootstrap's instant show/hide.
 *
 * Raised by assets/js/forms.js (AJAX form feedback) and rendered by
 * partials/flash.blade.php (server-flashed, no-JavaScript fallback).
 * ------------------------------------------------------------------ */

.toast-success,
.toast-info,
.toast-error {
    --toast-accent: #16A34A;
    --toast-accent-soft: rgba(22, 163, 74, 0.09);
    --toast-accent-border: rgba(22, 163, 74, 0.32);
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #FFFFFF 0%, #FFFFFF 58%, var(--toast-accent-soft) 100%);
    border: 1px solid var(--toast-accent-border);
    color: #0B1220;
    box-shadow: 0 14px 30px -8px rgba(11, 18, 32, 0.2), 0 4px 10px -4px rgba(11, 18, 32, 0.1);
}

.toast-info {
    --toast-accent: #2563EB;
    --toast-accent-soft: rgba(37, 99, 235, 0.09);
    --toast-accent-border: rgba(37, 99, 235, 0.32);
}

.toast-error {
    --toast-accent: #DC2626;
    --toast-accent-soft: rgba(220, 38, 38, 0.09);
    --toast-accent-border: rgba(220, 38, 38, 0.32);
}

/* A slim gold-to-accent ribbon along the top edge — the detail that keeps
   the toast from reading as a generic Bootstrap alert with a colored icon
   stapled on. Sits inside the same overflow:hidden box as .toast-progress
   below, so it inherits the toast's own rounded corners for free. */
.toast-success::before,
.toast-info::before,
.toast-error::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #C89B5A 0%, var(--toast-accent) 100%);
}

/* A little taller than Bootstrap's default so the icon and text can breathe,
   plus room at the bottom for the progress bar. */
.toast-success .toast-body,
.toast-info .toast-body,
.toast-error .toast-body {
    padding: 0.85rem 0.95rem calc(0.85rem + 4px);
}

/* ------------------------------------------------------------------ *
 * The tick / cross itself: a small self-drawing SVG badge rather than a
 * static glyph. The ring draws in, then the mark inside it draws, then
 * each variant gets its own signature finish — a warm-gold ripple for
 * success (ties even a green "success" state back to the site's own
 * accent instead of reading as a generic UI-kit checkmark), a small
 * settling shake for error (a calm line alone under-reacts to "something
 * went wrong"). Built on SVG's `pathLength="100"`, so the dash values
 * below are percentages of each path, not real coordinate lengths. */
.toast-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.toast-icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: scale(0.5);
    animation: toast-icon-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.toast-icon-ring,
.toast-icon-check,
.toast-icon-cross-a,
.toast-icon-cross-b,
.toast-icon-info-bar {
    fill: none;
    stroke: var(--toast-accent);
    stroke-width: 2.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.toast-icon-dot {
    fill: var(--toast-accent);
}

.toast-icon-ring {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: toast-icon-draw 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.toast-icon-check {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: toast-icon-draw 0.35s 0.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.toast-icon-cross-a,
.toast-icon-cross-b {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: toast-icon-draw 0.28s 0.4s ease-out forwards;
}

.toast-icon-cross-b {
    animation-delay: 0.48s;
}

.toast-icon-info-bar,
.toast-icon-dot {
    opacity: 0;
    animation: toast-icon-fade-in 0.3s 0.45s ease-out forwards;
}

@keyframes toast-icon-pop {
    to { transform: scale(1); }
}

@keyframes toast-icon-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes toast-icon-fade-in {
    to { opacity: 1; }
}

/* Success only: a soft ring of the site's warm-gold accent breathes
   outward once, a beat after the check finishes drawing. */
.toast-icon-success::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid #C89B5A;
    opacity: 0;
    animation: toast-icon-ripple 0.7s 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toast-icon-ripple {
    0% { transform: scale(0.6); opacity: 0.9; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* Error only: one small settling shake once the cross has landed. */
.toast-icon-error svg {
    animation: toast-icon-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
               toast-icon-shake 0.4s 0.72s ease-in-out;
}

@keyframes toast-icon-shake {
    0%, 100% { transform: translateX(0) scale(1); }
    20% { transform: translateX(-3px) scale(1); }
    40% { transform: translateX(3px) scale(1); }
    60% { transform: translateX(-2px) scale(1); }
    80% { transform: translateX(2px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .toast-icon svg,
    .toast-icon-error svg,
    .toast-icon-ring,
    .toast-icon-check,
    .toast-icon-cross-a,
    .toast-icon-cross-b,
    .toast-icon-info-bar,
    .toast-icon-dot {
        animation: none !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
        opacity: 1 !important;
    }

    .toast-icon-success::after {
        display: none !important;
    }
}

/* Shrinks from full width to 0 over the toast's visible duration — set up by
   assets/js/forms.js (JS-raised toasts) and adoptServerRenderedToasts()
   (flashed toasts) so the countdown always matches the real autohide delay. */
.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: var(--toast-accent);
    transition-property: width;
    transition-timing-function: linear;
}

/* Spring-like slide + fade. Higher specificity than Bootstrap's generic
   `.fade` rule (opacity only, 0.15s linear) so this wins without `!important`. */
.toast.fade {
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(-12px) scale(0.95);
}

.toast.fade.show {
    transform: translateY(0) scale(1);
}

/* The toast host sits under the sticky navbar on small screens, where the
   offcanvas toggle occupies the same corner. */
@media (max-width: 991.98px) {
    #toastContainer {
        top: auto !important;
        bottom: 0;
    }
}