/*
 * NOVABET789 Global Feedback Frontend V1.0.3
 * Premium motion presentation only. No business/API/database logic.
 */

:root {
    --nova-feedback-z: 3100;
    --nova-feedback-panel: linear-gradient(180deg, rgba(31, 17, 27, 0.99), rgba(12, 8, 12, 0.99));
    --nova-feedback-border: rgba(238, 198, 89, 0.58);
    --nova-feedback-gold: #f2d373;
    --nova-feedback-gold-2: #c89d38;
    --nova-feedback-text: #ffffff;
    --nova-feedback-muted: rgba(255, 255, 255, 0.74);
    --nova-feedback-success: #59d992;
    --nova-feedback-error: #ff737d;
    --nova-feedback-warning: #f6c85f;
    --nova-feedback-info: #72c9ff;
    --nova-feedback-pending: #c59cff;
    --nova-feedback-enter-ease: cubic-bezier(0.16, 1, 0.30, 1);
    --nova-feedback-icon-ease: cubic-bezier(0.16, 1.28, 0.30, 1);
    --nova-feedback-exit-ease: cubic-bezier(0.40, 0, 1, 1);
}

html.nova-feedback-open,
html.nova-feedback-open body {
    overflow: hidden !important;
}

.nova-feedback-layer[hidden],
.nova-feedback-toast-region[hidden] {
    display: none !important;
}

.nova-feedback-layer {
    position: fixed;
    inset: 0;
    z-index: var(--nova-feedback-z);
    display: grid;
    place-items: center;
    padding:
        max(18px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(18px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    opacity: 0;
    transition: opacity 250ms ease-out;
    will-change: opacity;
}

.nova-feedback-layer[data-motion-state='open'] {
    opacity: 1;
}

.nova-feedback-layer[data-motion-state='closing'] {
    opacity: 0;
    transition-duration: 190ms;
    transition-timing-function: var(--nova-feedback-exit-ease);
}

.nova-feedback-dialog {
    position: relative;
    width: min(100%, 430px);
    max-height: min(88dvh, 660px);
    overflow: auto;
    border: 1px solid var(--nova-feedback-border);
    border-radius: 24px;
    padding: 26px 22px 22px;
    color: var(--nova-feedback-text);
    background: var(--nova-feedback-panel);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.58),
        0 0 34px rgba(238, 198, 89, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    text-align: center;
    outline: none;
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.94);
    transform-origin: 50% 56%;
    transition:
        opacity 230ms ease-out,
        transform 390ms var(--nova-feedback-enter-ease);
    will-change: opacity, transform;
}

.nova-feedback-layer[data-motion-state='open'] .nova-feedback-dialog {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.nova-feedback-layer[data-motion-state='closing'] .nova-feedback-dialog {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.985);
    transition-duration: 145ms, 190ms;
    transition-timing-function: ease-in, var(--nova-feedback-exit-ease);
}

.nova-feedback-dialog::before {
    content: '';
    position: absolute;
    inset: 0 18% auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 221, 124, 0.88), transparent);
}

.nova-feedback-brand {
    min-height: 30px;
    margin: 0 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translate3d(0, -7px, 0) scale(0.96);
    transition:
        opacity 230ms ease-out 60ms,
        transform 320ms var(--nova-feedback-enter-ease) 60ms;
}

.nova-feedback-layer[data-motion-state='open'] .nova-feedback-brand.is-ready {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.nova-feedback-brand-logo {
    display: block;
    width: clamp(92px, 24vw, 108px);
    height: auto;
    max-height: 38px;
    object-fit: contain;
}

.nova-feedback-brand-fallback {
    color: var(--nova-feedback-gold);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.nova-feedback-icon {
    position: relative;
    width: 74px;
    height: 74px;
    margin: 0 auto 17px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.035);
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.68);
    transition:
        opacity 210ms ease-out 105ms,
        transform 390ms var(--nova-feedback-icon-ease) 105ms,
        box-shadow 380ms ease-out 105ms;
}

.nova-feedback-icon::after {
    content: '';
    position: absolute;
    inset: -8px;
    border: 1px solid currentColor;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
}

.nova-feedback-layer[data-motion-state='open'] .nova-feedback-icon {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow:
        inset 0 0 24px rgba(255, 255, 255, 0.035),
        0 0 30px color-mix(in srgb, currentColor 16%, transparent);
}

.nova-feedback-layer[data-motion-state='open'] .nova-feedback-icon::after {
    animation: novaFeedbackIconRing 540ms ease-out 145ms both;
}

.nova-feedback-dialog[data-feedback-type='success'] .nova-feedback-icon {
    color: var(--nova-feedback-success);
    background: radial-gradient(circle, rgba(89, 217, 146, 0.10), rgba(255, 255, 255, 0.025) 68%);
}

.nova-feedback-dialog[data-feedback-type='error'] .nova-feedback-icon {
    color: var(--nova-feedback-error);
    background: radial-gradient(circle, rgba(255, 115, 125, 0.10), rgba(255, 255, 255, 0.025) 68%);
}

.nova-feedback-dialog[data-feedback-type='warning'] .nova-feedback-icon {
    color: var(--nova-feedback-warning);
    background: radial-gradient(circle, rgba(246, 200, 95, 0.10), rgba(255, 255, 255, 0.025) 68%);
}

.nova-feedback-dialog[data-feedback-type='info'] .nova-feedback-icon {
    color: var(--nova-feedback-info);
    background: radial-gradient(circle, rgba(114, 201, 255, 0.10), rgba(255, 255, 255, 0.025) 68%);
}

.nova-feedback-dialog[data-feedback-type='pending'] .nova-feedback-icon {
    color: var(--nova-feedback-pending);
    background: radial-gradient(circle, rgba(197, 156, 255, 0.10), rgba(255, 255, 255, 0.025) 68%);
}

.nova-feedback-title,
.nova-feedback-message,
.nova-feedback-actions {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition:
        opacity 220ms ease-out,
        transform 320ms var(--nova-feedback-enter-ease);
}

.nova-feedback-layer[data-motion-state='open'] .nova-feedback-title {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 165ms;
}

.nova-feedback-layer[data-motion-state='open'] .nova-feedback-message {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 215ms;
}

.nova-feedback-layer[data-motion-state='open'] .nova-feedback-actions {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 265ms;
}

.nova-feedback-layer[data-motion-state='closing'] .nova-feedback-brand,
.nova-feedback-layer[data-motion-state='closing'] .nova-feedback-icon,
.nova-feedback-layer[data-motion-state='closing'] .nova-feedback-title,
.nova-feedback-layer[data-motion-state='closing'] .nova-feedback-message,
.nova-feedback-layer[data-motion-state='closing'] .nova-feedback-actions {
    opacity: 0;
    transform: translate3d(0, 4px, 0) scale(0.99);
    transition-delay: 0ms !important;
    transition-duration: 110ms !important;
    transition-timing-function: ease-in !important;
}

.nova-feedback-title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.28rem, 5vw, 1.62rem);
    font-weight: 800;
    line-height: 1.3;
}

.nova-feedback-message {
    margin: 12px auto 0;
    max-width: 34rem;
    color: var(--nova-feedback-muted);
    font-size: 0.98rem;
    line-height: 1.68;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.nova-feedback-actions {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.nova-feedback-primary {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    padding: 10px 20px;
    cursor: pointer;
    color: #211506;
    background: linear-gradient(180deg, #ffe38a, #d2a940);
    box-shadow: 0 10px 26px rgba(184, 135, 37, 0.22);
    font: inherit;
    font-weight: 800;
    transition: transform 140ms ease, box-shadow 180ms ease;
}

.nova-feedback-primary:hover {
    box-shadow: 0 12px 30px rgba(184, 135, 37, 0.28);
}

.nova-feedback-primary:focus-visible {
    outline: 3px solid rgba(255, 232, 160, 0.42);
    outline-offset: 3px;
}

.nova-feedback-primary:active {
    transform: translateY(1px) scale(0.995);
}

.nova-feedback-toast-region {
    position: fixed;
    left: 50%;
    bottom: max(22px, calc(14px + env(safe-area-inset-bottom)));
    z-index: calc(var(--nova-feedback-z) - 20);
    width: min(calc(100% - 28px), 430px);
    transform: translateX(-50%);
    pointer-events: none;
}

.nova-feedback-toast {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    min-height: 52px;
    padding: 12px 15px;
    border: 1px solid rgba(238, 198, 89, 0.36);
    border-radius: 16px;
    color: #fff;
    background: rgba(15, 10, 14, 0.96);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.44);
    pointer-events: auto;
}

.nova-feedback-toast::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nova-feedback-info);
    box-shadow: 0 0 14px currentColor;
}

.nova-feedback-toast[data-feedback-type='success']::before { background: var(--nova-feedback-success); }
.nova-feedback-toast[data-feedback-type='error']::before { background: var(--nova-feedback-error); }
.nova-feedback-toast[data-feedback-type='warning']::before { background: var(--nova-feedback-warning); }
.nova-feedback-toast[data-feedback-type='pending']::before { background: var(--nova-feedback-pending); }

.nova-feedback-toast__text {
    min-width: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body [data-member-toast],
body [data-profile-toast],
body [data-dc-toast] {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: max(22px, calc(14px + env(safe-area-inset-bottom))) !important;
    z-index: calc(var(--nova-feedback-z) - 30) !important;
    width: min(calc(100% - 28px), 430px) !important;
    max-width: 430px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 12px 15px !important;
    border: 1px solid rgba(238, 198, 89, 0.36) !important;
    border-radius: 16px !important;
    color: #fff !important;
    background: rgba(15, 10, 14, 0.96) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.44) !important;
    transform: translate(-50%, 14px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}

body [data-member-toast].is-visible,
body [data-profile-toast].is-visible,
body [data-dc-toast].is-visible {
    transform: translate(-50%, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (min-width: 768px) {
    .nova-feedback-dialog {
        padding: 30px 28px 26px;
        border-radius: 28px;
    }

    .nova-feedback-primary {
        min-height: 50px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .nova-feedback-toast,
    body [data-member-toast],
    body [data-profile-toast],
    body [data-dc-toast] {
        transition: opacity 170ms ease, transform 190ms var(--nova-feedback-enter-ease), visibility 170ms ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nova-feedback-layer,
    .nova-feedback-dialog,
    .nova-feedback-brand,
    .nova-feedback-icon,
    .nova-feedback-title,
    .nova-feedback-message,
    .nova-feedback-actions,
    .nova-feedback-primary,
    .nova-feedback-toast,
    body [data-member-toast],
    body [data-profile-toast],
    body [data-dc-toast] {
        animation: none !important;
        transition: none !important;
    }

    .nova-feedback-layer[data-motion-state='open'],
    .nova-feedback-layer[data-motion-state='open'] .nova-feedback-dialog,
    .nova-feedback-layer[data-motion-state='open'] .nova-feedback-brand.is-ready,
    .nova-feedback-layer[data-motion-state='open'] .nova-feedback-icon,
    .nova-feedback-layer[data-motion-state='open'] .nova-feedback-title,
    .nova-feedback-layer[data-motion-state='open'] .nova-feedback-message,
    .nova-feedback-layer[data-motion-state='open'] .nova-feedback-actions {
        opacity: 1 !important;
        transform: none !important;
    }
}

@keyframes novaFeedbackIconRing {
    0% { opacity: 0; transform: scale(0.76); }
    34% { opacity: 0.46; }
    100% { opacity: 0; transform: scale(1.18); }
}
