/* =========================================
   ShastaRobux notifications (inc/notifications.php, assets/notify.js)
   One look for every message: WooCommerce's notices and the theme's own toasts
   Local preview: notifications.html in the project root (npm run dev)
   ========================================= */

.srx-toasts {
    position: fixed;
    top: 6rem;
    right: 1rem;
    z-index: 100001;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

body.admin-bar .srx-toasts {
    top: calc(6rem + 32px);
}

.srx-toast {
    --srx-toast-rgb: 168, 85, 247;
    --srx-toast-text: #c084fc;
    --srx-toast-duration: 5000ms;

    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    overflow: hidden;
    padding: 0.875rem 0.75rem 1.05rem 0.875rem;
    border: 1px solid rgba(var(--srx-toast-rgb), 0.28);
    border-radius: 1rem;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(var(--srx-toast-rgb), 0.16), transparent 55%),
        rgba(22, 27, 34, 0.94);
    box-shadow:
        0 24px 48px -16px rgba(0, 0, 0, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem));
    transition:
        opacity 0.3s ease,
        transform 0.5s cubic-bezier(0.22, 1.15, 0.36, 1);
}

.srx-toast.is-visible {
    opacity: 1;
    transform: none;
}

.srx-toast.is-leaving {
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem));
    transition-duration: 0.25s;
    transition-timing-function: ease-in;
}

.srx-toast--success {
    --srx-toast-rgb: 34, 197, 94;
    --srx-toast-text: #4ade80;
}

.srx-toast--error {
    --srx-toast-rgb: 239, 68, 68;
    --srx-toast-text: #f87171;
}

.srx-toast--info {
    --srx-toast-rgb: 168, 85, 247;
    --srx-toast-text: #c084fc;
}

.srx-toast-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: rgba(var(--srx-toast-rgb), 0.16);
    box-shadow: inset 0 0 0 1px rgba(var(--srx-toast-rgb), 0.3);
    color: var(--srx-toast-text);
}

.srx-toast-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.srx-toast-body {
    flex: 1;
    min-width: 0;
    padding-top: 0.1rem;
}

.srx-toast .srx-toast-title {
    margin: 0 0 0.15rem;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--srx-toast-text);
}

.srx-toast-message {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #cbd5e1;
    overflow-wrap: anywhere;
}

.srx-toast-message ul {
    margin: 0.2rem 0 0;
    padding-left: 1.1rem;
    list-style: disc;
}

.srx-toast-message li + li {
    margin-top: 0.2rem;
}

.srx-toast-message a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: #fff;
}

/* WooCommerce's checkout errors link each line to its field; keep them reading like text */
.srx-toast-message li a {
    font-weight: inherit;
    text-decoration: none;
    color: inherit;
}

.srx-toast-message li a:hover {
    text-decoration: underline;
    color: #fff;
}

/* Buttons such as WooCommerce's "View cart", shown on their own line under the text */
.srx-toast .srx-toast-action {
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 0.55rem 0 0;
    padding: 0.3rem 0.8rem;
    border: 1px solid rgba(var(--srx-toast-rgb), 0.4);
    border-radius: 999px;
    background: rgba(var(--srx-toast-rgb), 0.14);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    transition: background-color 0.2s;
}

.srx-toast .srx-toast-action:hover {
    background: rgba(var(--srx-toast-rgb), 0.3);
    color: #fff;
}

.srx-toast .srx-toast-close {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: -0.2rem -0.1rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s;
}

.srx-toast .srx-toast-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.srx-toast-close svg {
    width: 1rem;
    height: 1rem;
}

/* Time left before it closes; pauses while hovered */
.srx-toast-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(var(--srx-toast-rgb), 0.95), rgba(var(--srx-toast-rgb), 0.35));
    transform-origin: left center;
    animation: srx-toast-progress var(--srx-toast-duration) linear forwards;
}

.srx-toast.is-paused .srx-toast-progress {
    animation-play-state: paused;
}

.srx-toast a:focus-visible,
.srx-toast button:focus-visible {
    outline: 2px solid var(--srx-toast-text);
    outline-offset: 2px;
}

@keyframes srx-toast-progress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

/* ---------- WooCommerce's in-page messages (woocommerce/notices/*.php) ----------
   Hidden until notify.js turns them into toasts, so they don't flash. If that script
   never runs, they appear in place after 4 seconds, styled like a toast. */
.srx-js .srx-notice[data-srx-type] {
    visibility: hidden;
    animation: srx-notice-fallback 0s 4s forwards;
}

@keyframes srx-notice-fallback {
    to {
        visibility: visible;
    }
}

.srx-notice[data-srx-type] {
    --srx-toast-rgb: 168, 85, 247;

    display: block;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(var(--srx-toast-rgb), 0.3);
    border-radius: 1rem;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(var(--srx-toast-rgb), 0.14), transparent 55%),
        rgba(22, 27, 34, 0.94);
    font-size: 0.9rem;
    line-height: 1.5;
    list-style: none;
    color: #e5e7eb;
}

.srx-notice[data-srx-type="success"] {
    --srx-toast-rgb: 34, 197, 94;
}

.srx-notice[data-srx-type="error"] {
    --srx-toast-rgb: 239, 68, 68;
}

/* ---------- The short error WooCommerce shows under a checkout field that needs fixing ---------- */
.woocommerce-checkout .checkout-inline-error-message {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: #f87171;
}

.woocommerce-checkout .woocommerce-invalid input.input-text,
.woocommerce-checkout .woocommerce-invalid select {
    border-color: rgba(239, 68, 68, 0.6);
}

/* ---------- Phones: full width under the header, sliding down ---------- */
@media (max-width: 640px) {
    .srx-toasts {
        top: 5.5rem;
        right: 1rem;
        left: 1rem;
        width: auto;
    }

    .srx-toast,
    .srx-toast.is-leaving {
        transform: translateY(-1rem) scale(0.97);
    }

    .srx-toast.is-visible {
        transform: none;
    }
}

@media (max-width: 782px) {
    body.admin-bar .srx-toasts {
        top: calc(5.5rem + 46px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .srx-toast,
    .srx-toast.is-leaving {
        transform: none;
        transition: opacity 0.2s ease;
    }
}