/* =====================================================================
   Probot X — Premium Auth Theme
   High-tech glassmorphic layer on top of the existing violet palette.
   Palette (unchanged): #9772f7 accent · #251057 deep · #0a0527 panel
                        #322873 border · #c4bee5 muted text
   Loaded AFTER auth.css so it intentionally refines those rules.
   ===================================================================== */

:root {
    --px-accent: #9772f7;
    --px-accent-2: #6b8bff;
    --px-muted: #c4bee5;
    --px-border: #322873;
    --px-panel: #0a0527;
}

/* Keep page content above the animated backdrop */
body.bg-img > .container,
body.bg-img > #loader {
    position: relative;
    z-index: 1;
}

/* Drop the legacy raster background in favour of the animated SVG backdrop */
body.bg-img {
    background-image: none !important;
}

/* ----------------------------------------------------------------------
   Glass card
---------------------------------------------------------------------- */
.theme-box {
    position: relative;
    background: linear-gradient(155deg, rgba(40, 22, 92, 0.62) 0%, rgba(10, 5, 39, 0.78) 100%) !important;
    border: 1px solid rgba(151, 114, 247, 0.22);
    border-radius: 26px;
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
    box-shadow:
        0 24px 70px -24px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset,
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
    overflow: hidden;
    animation: pxCardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Top sheen line + ambient corner glow */
.theme-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(151, 114, 247, 0.85), transparent);
    opacity: 0.8;
}
.theme-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 60% at 50% -10%, rgba(151, 114, 247, 0.18), transparent 60%);
    pointer-events: none;
}

.theme-box > * {
    position: relative;
    z-index: 1;
}

@keyframes pxCardIn {
    from { opacity: 0; transform: translateY(22px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Logo + heading subtle entrance */
.content-top-agile img {
    filter: drop-shadow(0 6px 22px rgba(151, 114, 247, 0.45));
    animation: pxFadeUp 0.7s ease-out 0.08s both;
}
.content-top-agile h1,
.content-top-agile h2 {
    letter-spacing: 0.4px;
    animation: pxFadeUp 0.7s ease-out 0.16s both;
}
.content-top-agile p {
    animation: pxFadeUp 0.7s ease-out 0.24s both;
}

@keyframes pxFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Stagger the form rows in */
.theme-box .form-group,
.theme-box .row > [class^="col-"] {
    animation: pxFadeUp 0.6s ease-out both;
}
.theme-box form .form-group:nth-of-type(1) { animation-delay: 0.18s; }
.theme-box form .form-group:nth-of-type(2) { animation-delay: 0.26s; }
.theme-box form .form-group:nth-of-type(3) { animation-delay: 0.34s; }
.theme-box form .form-group:nth-of-type(4) { animation-delay: 0.42s; }
.theme-box form .form-group:nth-of-type(5) { animation-delay: 0.50s; }

/* ----------------------------------------------------------------------
   Inputs — refined glass fields with focus glow
---------------------------------------------------------------------- */
.custom-input {
    background: rgba(10, 5, 39, 0.45) !important;
    border-radius: 14px;
    border: 1px solid rgba(151, 114, 247, 0.18);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    overflow: hidden;
}
.custom-input .input-group-text {
    border: 0 !important;
    color: var(--px-muted) !important;
    transition: color 0.25s ease, transform 0.25s ease;
}
.custom-input .form-control,
.custom-input .form-select {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.custom-input:focus-within {
    border-color: rgba(151, 114, 247, 0.65);
    background: rgba(10, 5, 39, 0.62) !important;
    box-shadow:
        0 0 0 3px rgba(151, 114, 247, 0.16),
        0 8px 24px -12px rgba(151, 114, 247, 0.55);
}
.custom-input:focus-within .input-group-text {
    color: var(--px-accent) !important;
    transform: scale(1.08);
}
.custom-input .form-control:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    transition: background-color 5000s ease-in-out 0s;
}

/* Standalone selects (DOB / calling-code rows) */
.theme-box .form-select {
    border-radius: 12px;
    border: 1px solid rgba(151, 114, 247, 0.18) !important;
    background-color: rgba(10, 5, 39, 0.45) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.theme-box .form-select:focus {
    border-color: rgba(151, 114, 247, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(151, 114, 247, 0.16) !important;
}
.theme-box .input-group .form-control {
    border-radius: 12px;
    border: 1px solid rgba(151, 114, 247, 0.18) !important;
    background-color: rgba(10, 5, 39, 0.45) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.theme-box .input-group .form-control:focus {
    border-color: rgba(151, 114, 247, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(151, 114, 247, 0.16) !important;
}

/* ----------------------------------------------------------------------
   Buttons — premium gradient CTA with shine sweep
---------------------------------------------------------------------- */
.theme-primary .btn-info,
.theme-primary .btn-danger {
    position: relative;
    border: 0;
    border-radius: 14px;
    padding: 12px 40px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fff;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
    isolation: isolate;
}
.theme-primary .btn-info {
    background: linear-gradient(135deg, #9772f7 0%, #6b8bff 100%);
    box-shadow: 0 12px 30px -10px rgba(151, 114, 247, 0.7);
}
.theme-primary .btn-danger {
    background: linear-gradient(135deg, #ff6b6b 0%, #9772f7 120%);
    box-shadow: 0 12px 30px -10px rgba(255, 107, 107, 0.55);
}
.theme-primary .btn-info::before,
.theme-primary .btn-danger::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-18deg);
    transition: left 0.6s ease;
    z-index: -1;
}
.theme-primary .btn-info:hover,
.theme-primary .btn-danger:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 18px 40px -12px rgba(151, 114, 247, 0.8);
    color: #fff;
}
.theme-primary .btn-info:hover::before,
.theme-primary .btn-danger:hover::before {
    left: 130%;
}
.theme-primary .btn-info:active,
.theme-primary .btn-danger:active {
    transform: translateY(0);
}
.theme-primary .btn-info:focus-visible,
.theme-primary .btn-danger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(151, 114, 247, 0.45), 0 12px 30px -10px rgba(151, 114, 247, 0.7);
}

/* Secondary / neutral buttons (e.g. verify-email log out) */
.theme-primary .btn-light,
.theme-primary .btn-outline {
    border-radius: 14px;
    padding: 12px 36px;
    font-weight: 600;
    color: var(--px-muted);
    background: rgba(151, 114, 247, 0.08);
    border: 1px solid rgba(151, 114, 247, 0.3);
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.theme-primary .btn-light:hover,
.theme-primary .btn-outline:hover {
    background: rgba(151, 114, 247, 0.16);
    border-color: rgba(151, 114, 247, 0.55);
    color: #fff;
    transform: translateY(-2px);
}
.theme-primary .btn-light:focus-visible,
.theme-primary .btn-outline:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(151, 114, 247, 0.45);
}
.theme-primary .btn-outline:disabled {
    opacity: 0.6;
    transform: none;
    cursor: wait;
}
.theme-primary .btn-outline .fa-fingerprint {
    color: var(--px-accent);
    transition: color 0.22s ease;
}
.theme-primary .btn-outline:hover .fa-fingerprint {
    color: #fff;
}

/* ----------------------------------------------------------------------
   Links, checkbox, helper text polish
---------------------------------------------------------------------- */
.theme-box a.text-primary,
.theme-box a.hover-warning {
    transition: color 0.2s ease, text-shadow 0.2s ease;
}
.theme-box a.text-primary:hover,
.theme-box a.hover-warning:hover {
    text-shadow: 0 0 14px rgba(151, 114, 247, 0.6);
}

.custom-checkbox label::before {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.custom-checkbox input:checked + label::before {
    background-color: var(--px-accent) !important;
    border-color: var(--px-accent) !important;
}

/* Alerts inside the glass shell */
.theme-box .alert,
.col-12 > .alert {
    border-radius: 14px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(151, 114, 247, 0.25);
}

/* Captcha hint */
#turnstile-loader { color: var(--px-muted) !important; }

/* Trust / security indicator */
.auth-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.4px;
    color: var(--px-muted);
    opacity: 0.85;
}
.auth-secure-note i {
    color: var(--px-accent);
    filter: drop-shadow(0 0 6px rgba(151, 114, 247, 0.6));
}

@media (prefers-reduced-motion: reduce) {
    .theme-box,
    .content-top-agile img,
    .content-top-agile h1,
    .content-top-agile h2,
    .content-top-agile p,
    .theme-box .form-group,
    .theme-box .row > [class^="col-"] {
        animation: none !important;
    }
    .theme-primary .btn-info,
    .theme-primary .btn-danger,
    .theme-primary .btn-light {
        transition: none;
    }
}