/* ============================================================
   WISHORA — global utilities
   ============================================================ */

/* Fix global horizontal scrolling */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* View/panel visibility (This is what hides the other pages!) */
.view {
    display: block;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

.hide {
    display: none !important;
}

/* Nav link (desktop) */
.nav-link {
    padding: .5rem .75rem;
    border-radius: .5rem;
    color: #b6a6d4;
    transition: color .15s, background .15s;
    font-weight: 500;
    text-decoration: none;
}

    .nav-link:hover {
        color: #fff;
        background: rgba(255,255,255,.05);
    }

/* Nav link (mobile) */
.mobile-nav-link {
    display: block;
    padding: .75rem 1rem;
    border-radius: .75rem;
    color: #b6a6d4;
    transition: color .15s, background .15s;
    font-weight: 500;
    text-decoration: none;
}

    .mobile-nav-link:hover {
        color: #fff;
        background: rgba(255,255,255,.05);
    }

/* ============ Buttons ============ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-radius: .75rem;
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.2;
    min-height: 44px;
    transition: all .2s ease;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    font-family: inherit;
    max-width: 100%;
}

    .btn:disabled {
        opacity: .4;
        cursor: not-allowed;
        transform: none !important;
    }

.btn-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    color: #fff;
    box-shadow: 0 10px 30px -10px rgba(124,58,237,.65), inset 0 0 0 1px rgba(255,255,255,.06);
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px -12px rgba(124,58,237,.75), inset 0 0 0 1px rgba(255,255,255,.12);
    }

.btn-ghost {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.12);
    color: #fff;
}

    .btn-ghost:hover {
        background: rgba(255,255,255,.08);
        border-color: rgba(255,255,255,.22);
        transform: translateY(-1px);
    }

.btn-shimmer {
    position: relative;
    overflow: hidden;
}

    .btn-shimmer::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
        background-size: 200% 100%;
        animation: shimmer 3s linear infinite;
    }

/* ============ Glass ============ */
.glass {
    background: rgba(255,255,255,.035);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.08);
    max-width: 100%;
}

/* ============ Inputs ============ */
.input, .select, .textarea {
    width: 100%;
    padding: .75rem 1rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .75rem;
    color: #fff;
    font-size: .875rem;
    transition: all .2s;
    outline: none;
    font-family: inherit;
}

    .input::placeholder, .textarea::placeholder {
        color: rgba(255,255,255,.35);
    }

    .input:focus, .select:focus, .textarea:focus {
        border-color: rgba(168,85,247,.65);
        box-shadow: 0 0 0 3px rgba(124,58,237,.18);
        background: rgba(255,255,255,.06);
    }

.textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.55;
}

.select {
    cursor: pointer;
}

    .select option {
        background: #180b2e;
        color: #fff;
    }

.field-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #b6a6d4;
    margin-bottom: .5rem;
}

/* ============ Chips ============ */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .5rem .875rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    color: #b6a6d4;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}

    .chip:hover {
        color: #fff;
        border-color: rgba(255,255,255,.22);
        background: rgba(255,255,255,.08);
    }

    .chip.is-active {
        background: linear-gradient(135deg, #7c3aed, #ec4899);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 4px 14px -4px rgba(124,58,237,.65);
    }

/* ============ Stepper ============ */
.stepper-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 700;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    color: #b6a6d4;
    transition: all .3s;
}

    .stepper-dot.is-active {
        background: linear-gradient(135deg, #7c3aed, #ec4899);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 0 0 4px rgba(124,58,237,.2), 0 4px 14px -4px rgba(124,58,237,.65);
        transform: scale(1.08);
    }

    .stepper-dot.is-done {
        background: rgba(124,58,237,.2);
        color: #f472b6;
        border-color: rgba(168,85,247,.4);
    }

/* ============ Reveal on scroll ============ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
    max-width: 100%;
}

    .reveal.in {
        opacity: 1;
        transform: none;
    }

    .reveal[data-delay="1"] {
        transition-delay: .08s;
    }

    .reveal[data-delay="2"] {
        transition-delay: .16s;
    }

    .reveal[data-delay="3"] {
        transition-delay: .24s;
    }

/* ============ Text helpers ============ */
.gradient-text {
    background: linear-gradient(120deg, #f472b6 0%, #a855f7 45%, #f6c667 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.glow-text {
    text-shadow: 0 0 60px rgba(168,85,247,.45);
}

/* ============ Spotlight hover ============ */
.spotlight {
    position: relative;
    isolation: isolate;
}

    .spotlight::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.09), transparent 40%);
        opacity: 0;
        transition: opacity .3s;
        pointer-events: none;
        z-index: 1;
    }

    .spotlight:hover::before {
        opacity: 1;
    }

/* ============ Toasts ============ */
#toasts {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 22rem;
    pointer-events: none;
}

.toast {
    padding: .875rem 1.125rem;
    border-radius: .75rem;
    background: rgba(15,7,28,.92);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.12);
    font-size: .875rem;
    color: #fff;
    box-shadow: 0 12px 40px -8px rgba(0,0,0,.65);
    animation: toast-in .3s cubic-bezier(.2,.7,.2,1);
    pointer-events: auto;
}

    .toast.ok {
        border-color: rgba(168,85,247,.5);
    }

    .toast.err {
        border-color: rgba(236,72,153,.6);
    }

/* ============ Confetti canvas ============ */
#confettiCanvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 80;
}

/* ============ Keyframes ============ */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.96);
    }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}