/* ==========================================
   Drop Your Party Track – Electronic landing styling
   Bootstrap-first, original, "muziq-like" vibe
   ========================================== */

:root {
    --dtt-bg: #05060a;
    --dtt-surface: rgba(255,255,255,.04);
    --dtt-surface-2: rgba(255,255,255,.06);
    --dtt-border: rgba(255,255,255,.10);
    --dtt-text: rgba(255,255,255,.92);
    --dtt-muted: rgba(255,255,255,.65);
    --dtt-blue: #4f7cff;
    --dtt-pink: #ff3bd4;
    --dtt-violet: #9a5cff;
    --dtt-cyan: #2de2ff;
    --dtt-max: 1180px;
}

html, body {
    height: 100%;
}

/* ==========================================
   App shell (sticky footer)
   ========================================== */

.dtt-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.dtt-header,
.dtt-footer {
    flex: 0 0 auto;
}

.dtt-main {
    flex: 1 0 auto;
}

.dtt-footer {
    margin-top: auto;
}

.dtt-body {
    background: radial-gradient(1200px 700px at 15% 10%, rgba(79,124,255,.18), transparent 55%), radial-gradient(900px 600px at 90% 15%, rgba(255,59,212,.12), transparent 55%), radial-gradient(1200px 700px at 50% 110%, rgba(45,226,255,.10), transparent 55%), var(--dtt-bg);
    color: var(--dtt-text);
}

a {
    text-underline-offset: .18em;
}

    a:hover {
        text-decoration-thickness: 2px;
    }

/* ==========================================
   Navbar
   ========================================== */

.dtt-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    backdrop-filter: blur(10px);
    background: linear-gradient(180deg, rgba(5,6,10,.85), rgba(5,6,10,.55));
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Brand always visible */
.dtt-navbar .navbar-brand,
.dtt-navbar .navbar-brand:visited,
.dtt-navbar .navbar-brand:hover,
.dtt-navbar .navbar-brand:focus {
    color: rgba(255,255,255,1) !important;
    text-decoration: none;
}

/* Navbar links always visible and NOT button-like */
.dtt-navbar .navbar-nav .nav-link {
    color: rgba(255,255,255,.90) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    text-decoration: none;
}

    .dtt-navbar .navbar-nav .nav-link:hover,
    .dtt-navbar .navbar-nav .nav-link:focus {
        color: rgba(255,255,255,1) !important;
        text-decoration: underline;
    }

/* If any scaffolded Identity markup still uses text-dark/link-dark in navbar, override it */
.dtt-navbar .text-dark,
.dtt-navbar .link-dark {
    color: rgba(255,255,255,.92) !important;
}

/* Logo mark */
.dtt-logo {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: radial-gradient(circle at 25% 30%, rgba(255,255,255,.22), transparent 45%), linear-gradient(135deg, rgba(79,124,255,1), rgba(255,59,212,1));
    box-shadow: 0 10px 28px rgba(79,124,255,.18), 0 10px 28px rgba(255,59,212,.12);
}

/* ==========================================
   Layout helpers (fluid sections)
   ========================================== */

.dtt-section {
    padding: clamp(3rem, 4vw, 5rem) 0;
}

.dtt-wrap {
    max-width: var(--dtt-max);
    margin: 0 auto;
}

.dtt-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}

/* ==========================================
   Hero
   ========================================== */

.dtt-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 6vw, 6.5rem) 0;
}

    .dtt-hero::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(900px 600px at 30% 20%, rgba(79,124,255,.22), transparent 60%), radial-gradient(900px 600px at 70% 20%, rgba(255,59,212,.14), transparent 60%), radial-gradient(1000px 700px at 50% 110%, rgba(45,226,255,.10), transparent 60%);
        pointer-events: none;
    }

    .dtt-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .18;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
        mix-blend-mode: overlay;
        pointer-events: none;
    }

    .dtt-hero .container-fluid {
        position: relative;
        z-index: 1;
    }

.dtt-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.85);
    font-size: .9rem;
}

.dtt-title {
    letter-spacing: -0.03em;
    line-height: 1.02;
    font-weight: 700;
    font-size: clamp(2.35rem, 4.6vw, 3.8rem);
    margin: 1rem 0 .9rem;
}

.dtt-gradient-text {
    background: linear-gradient(90deg, var(--dtt-blue), var(--dtt-pink), var(--dtt-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dtt-lead {
    color: var(--dtt-muted);
    font-size: 1.1rem;
    max-width: 58ch;
}

/* CTA button (kept) */
.btn-dtt {
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.92);
    background: linear-gradient(135deg, rgba(79,124,255,.35), rgba(255,59,212,.20));
    box-shadow: 0 18px 50px rgba(79,124,255,.10), 0 18px 50px rgba(255,59,212,.08);
}

    .btn-dtt:hover,
    .btn-dtt:focus {
        color: rgba(255,255,255,1);
        border-color: rgba(255,255,255,.22);
        background: linear-gradient(135deg, rgba(79,124,255,.45), rgba(255,59,212,.26));
    }

/* ==========================================
   Cards / Panels
   ========================================== */

.dtt-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 1rem;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

    .dtt-card:hover {
        transform: translateY(-2px);
        border-color: rgba(255,255,255,.16);
        box-shadow: 0 22px 70px rgba(0,0,0,.40);
    }

    .dtt-card .text-secondary,
    .dtt-muted {
        color: var(--dtt-muted) !important;
    }

.dtt-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.86);
    font-size: .85rem;
}

/* ==========================================
   Mock UI
   ========================================== */

.dtt-mock {
    position: relative;
    overflow: hidden;
    border-radius: 1.1rem;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}

.dtt-mock-topbar {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .75rem .95rem;
    border-bottom: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.70);
    font-size: .9rem;
}

.dtt-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
}

.dtt-form-control {
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.92);
}

    .dtt-form-control::placeholder {
        color: rgba(255,255,255,.45);
    }

    .dtt-form-control:focus {
        border-color: rgba(79,124,255,.55);
        box-shadow: 0 0 0 .25rem rgba(79,124,255,.18);
    }

/* ==========================================
   Footer
   ========================================== */

.dtt-footer {
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.12);
}

/* Responsive spacing helpers */
@media (max-width: 991.98px) {
    .dtt-lead {
        max-width: none;
    }
}

/* ==========================================
   Identity
   ========================================== */

.validation-summary-errors ul {
    margin-bottom: 0;
    padding-left: 1.2rem;
}

.form-check-label {
    color: rgba(255,255,255,.78);
}

/* Disabled/readonly inputs in dark theme must not turn light grey */
.dtt-body .form-control.dtt-form-control:disabled,
.dtt-body .form-control.dtt-form-control[readonly] {
    background: rgba(0,0,0,.22) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.85) !important;
    opacity: 1 !important; /* Bootstrap dims disabled controls */
}

/* Optional: make readonly text slightly muted (if you prefer) */
.dtt-body .form-control.dtt-form-control[readonly] {
    color: rgba(255,255,255,.75) !important;
}

/* ==========================================
   table-dark look, but transparent background
   ========================================== */

.dtt-table-dark {
    /* Kill the grey fill coming from table-dark */
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    /* Keep the “dark” text contrast */
    --bs-table-color: rgba(255,255,255,.88);
    /* Keep subtle lines and hover */
    --bs-table-border-color: rgba(255,255,255,.10);
    --bs-table-hover-bg: rgba(255,255,255,.04);
    /* If you ever use striped rows */
    --bs-table-striped-bg: rgba(255,255,255,.03);
}

    /* Ensure Bootstrap doesn't re-inject a background on cells */
    .dtt-table-dark > :not(caption) > * > * {
        background-color: transparent !important;
    }

    /* Header styling stays crisp */
    .dtt-table-dark thead th {
        color: rgba(255,255,255,.70);
        font-weight: 600;
        border-bottom-color: rgba(255,255,255,.12) !important;
    }

    /* Muted text readable in table */
    .dtt-table-dark .text-secondary {
        color: rgba(255,255,255,.60) !important;
    }

/* Required asterisk spacing */
.dtt-required {
    color: #ff5a5a;
    margin-left: .15rem;
}

/* Make validation errors more visible in dark theme */
.field-validation-error {
    display: block;
    margin-top: .35rem;
}

.input-validation-error,
.dtt-form-control.input-validation-error {
    border-color: rgba(239, 68, 68, .75) !important;
    box-shadow: 0 0 0 .2rem rgba(239, 68, 68, .18);
}