/* ================================
   SadaqahChain - Hero AI Prompt UI
   Load AFTER Bootstrap/theme CSS
   ================================ */

:root {
    --r: 20px; /* glass radius */
    --c: #171717; /* text color inside widget */
    --hh: 8rem; /* header height of glass bar */
}

/* Keep slider shapes from eating clicks */
.vl-hero-shape {
    pointer-events: none;
}

/* Right-column container */
.ai-prompt-wrap {
    max-width: 540px;
    margin-left: auto;
    position: relative;
    z-index: 20; /* above decorative layers */
}

/* Base form wrapper */
.form {
    position: relative;
    --gap: .5rem;
    max-width: 100%;
    height: var(--hh);
    transition: 250ms ease all;
}

    .form.open {
        height: calc(var(--hh) * 1.5 + var(--gap));
    }

/* Glass blocks */
.glass {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 4rem;
    width: 100%;
    border: 0;
    border-radius: var(--r);
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(10px);
    text-shadow: 0.25em 0.25em 1px #00000010;
    overflow: hidden;
    box-shadow: 5px -30px 30px -20px #ffffff70, 5px 10px 30px -20px #ffffff70, 0.5px 1px 1.1px rgba(0,0,0,0.28), 1.4px 3.1px 3.4px -0.4px rgba(0,0,0,0.27), 2.5px 5.3px 5.9px -0.7px rgba(0,0,0,0.25), 3.9px 8.4px 9.3px -1.1px rgba(0,0,0,0.24), inset 0 -6px 2px -5px #ffffff24, inset 0 -8px 3px -5px #ffffff3b, inset 0 -20px 10px -15px #ffffff5c, inset 7px 25px 10px -20px #ffffff5c, inset -20px 5px 10px -20px #00000021, inset -40px 50px 7px -55px #00000021;
}

/* Animated gradient header */
@keyframes gradient {
    0%,100% {
        background-size: 100%;
    }

    50% {
        background-size: 150%;
    }
}

.glass--gradient {
    background: linear-gradient(45deg,#85d5e757,#7a9ed254,#ba6ac93d,#de54c217,#f86b2d4f);
    background-position: center;
    animation: gradient 10s linear infinite;
}

/* Header row */
.form-header {
    height: var(--hh);
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Logo circle */
.form-icon {
    background: rgba(255,255,255,0.2);
    aspect-ratio: 1/1;
    border-radius: 50%;
    height: 4rem;
    background-image: url('/img/justlogo.png'); /* your logo */
    background-position: center;
    background-size: 150%;
    background-repeat: no-repeat;
    box-shadow: inset -5px 20px 2px -20px #fff, inset 5px -20px 2px -20px #fff;
}

/* Title reveal */
@keyframes text {
    0% {
        clip-path: polygon(0 0,0 0,0 100%,0 100%);
    }

    100% {
        clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    }
}

.form-title {
    clip-path: polygon(0 0,0 0,0 100%,0 100%);
    animation: text 1s linear forwards;
    color: #fff !important; /* white title */
}

/* Close button */
.form-close-button {
    position: absolute;
    top: .75rem;
    right: .75rem;
    height: 1.5rem;
    width: 1.5rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    color: var(--c);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: 250ms ease opacity;
}

.form.open .form-close-button {
    opacity: 1;
    visibility: visible;
}

/* Click target for opening */
.js-heading {
    cursor: pointer;
    transition: 250ms ease all;
}

    .js-heading:hover {
        transform: scale(.99);
        filter: brightness(.95);
    }

/* ---- Input panel: CLOSED by default ---- */
.js-input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: var(--hh);
    opacity: 0;
    transform: translate(0,0);
    transition: 500ms ease all;
}

/* ---- OPEN state ---- */
.js-form.open .js-input {
    transform: translate(0, calc(var(--hh) + var(--gap)));
    height: calc(var(--hh) / 2);
    opacity: 1;
    z-index: 2;
}

/* Inputs inside widget */
.ai-prompt-wrap input,
.ai-prompt-wrap .form-control {
    appearance: none;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 100%;
    height: 3.5rem;
    padding: 0 1.25rem;
    color: #fff; /* white input text */
}

    .ai-prompt-wrap input:focus {
        outline: none;
    }

    .ai-prompt-wrap input::placeholder {
        color: rgba(255,255,255,0.7) !important;
    }

/* Ensure widget is clickable above slider layers */
.vl-hero-slider {
    position: relative;
}

    .vl-hero-slider .ai-prompt-wrap .glass {
        pointer-events: auto;
    }

/* ---------- Send button + compact layout ---------- */
.ai-quick-form {
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 3.2rem;
}

    .ai-quick-form input {
        height: 3.2rem !important;
        padding: 0 2.75rem 0 1.25rem !important; /* room for send btn */
        font-size: 0.95rem;
        line-height: 1;
    }

    .ai-quick-form .ai-send {
        position: absolute;
        right: .6rem;
        top: 50%;
        transform: translateY(-50%);
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: .2s ease;
        color: #fff;
        font-size: .9rem;
    }

        .ai-quick-form .ai-send:hover {
            background: rgba(255,255,255,0.4);
            transform: translateY(-50%) scale(1.05);
        }

        .ai-quick-form .ai-send:active {
            transform: translateY(-50%) scale(0.98);
        }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 1199px) {
    .ai-prompt-wrap {
        max-width: 520px;
    }
}

@media (max-width: 991px) {
    .ai-prompt-wrap {
        max-width: 100%;
        margin-top: 24px;
    }
}

@media (max-width: 576px) {
    :root {
        --hh: 6.5rem;
    }

    .form-header {
        height: auto;
        padding: .75rem 1rem;
        gap: .75rem;
        flex-direction: column;
        text-align: center;
    }

    .form-icon {
        height: 3.25rem;
    }

    .form-title {
        font-size: 1rem;
    }
}

/* (Your CSS block repeats; keeping as-is per your request)
   ================================ */
:root {
    --r: 20px;
    --c: #171717;
    --hh: 8rem;
}

.vl-hero-shape {
    pointer-events: none;
}

.ai-prompt-wrap {
    max-width: 540px;
    margin-left: auto;
    position: relative;
    z-index: 20;
}

.form {
    position: relative;
    --gap: .5rem;
    max-width: 100%;
    height: var(--hh);
    transition: 250ms ease all;
}

    .form.open {
        height: calc(var(--hh) * 1.5 + var(--gap));
    }
/* ... (keeping your duplicated section unchanged) ... */

/* ================================
   Hero AI Prompt — Compact Gap Overrides
   (Fixes the large space when expanding)
   ================================ */
:root {
    --stack-gap: 25px;
    --inph: 3.2rem;
}

.ai-prompt-wrap .form {
    height: var(--hh);
    transition: height 220ms ease;
}

    .ai-prompt-wrap .form.open {
        height: calc(var(--hh) + var(--stack-gap) + var(--inph));
    }

.ai-prompt-wrap .js-input {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--hh) + var(--stack-gap));
    height: var(--inph) !important;
    z-index: 2 !important;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: transform 220ms ease, opacity 220ms ease;
}

.ai-prompt-wrap .js-form.open .js-input {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ai-prompt-wrap .glass {
    margin: 0 !important;
}

.ai-prompt-wrap .ai-quick-form,
.ai-prompt-wrap .ai-quick-form input {
    min-height: var(--inph) !important;
    height: var(--inph) !important;
}

/* ===== Edge-to-edge (≤576px) — FIRST copy (kept) ===== */
@media (max-width: 576px) {
    .vl-hero-slider .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .vl-hero-slider .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .vl-hero-slider [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .ai-prompt-wrap {
        position: relative;
        width: 100vw !important;
        max-width: 100vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        padding-left: 12px;
        padding-right: 12px;
    }

    :root {
        --mobile-gap-extra: 14px;
    }

    .ai-prompt-wrap .form.open {
        height: calc(var(--hh) * 1.5 + var(--gap) + var(--mobile-gap-extra)) !important;
    }

    .ai-prompt-wrap .js-form.open .js-input {
        transform: translate(0, calc(var(--hh) + var(--gap) + var(--mobile-gap-extra))) !important;
    }

    html, body {
        overflow-x: hidden;
    }
}

/* ===== Edge-to-edge (≤576px) — SECOND copy (kept) ===== */
@media (max-width: 576px) {
    .vl-hero-slider .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .vl-hero-slider .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .vl-hero-slider [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .ai-prompt-wrap {
        position: relative;
        width: 100vw !important;
        max-width: 100vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        padding-left: 12px;
        padding-right: 12px;
    }

    :root {
        --mobile-gap-extra: 14px;
    }

    .ai-prompt-wrap .form.open {
        height: calc(var(--hh) * 1.5 + var(--gap) + var(--mobile-gap-extra)) !important;
    }

    .ai-prompt-wrap .js-form.open .js-input {
        transform: translate(0, calc(var(--hh) + var(--gap) + var(--mobile-gap-extra))) !important;
    }

    html, body {
        overflow-x: hidden;
    }
}

/* ===== MOBILE FIX variant (≤576px) — THIRD copy (kept) ===== */
@media (max-width: 576px) {
    .vl-hero-slider .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .vl-hero-slider .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .vl-hero-slider [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .vl-hero-slider .ai-prompt-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px;
        padding-right: 12px;
        margin-left: 0 !important;
        transform: none !important;
    }

    :root {
        --mobile-gap-extra: 66px;
    }

    .vl-hero-slider .ai-prompt-wrap .form.open {
        height: calc(var(--hh) * 1.5 + var(--gap) + var(--mobile-gap-extra)) !important;
    }

    .vl-hero-slider .ai-prompt-wrap .js-form.open .js-input {
        transform: translate(0, calc(var(--hh) + var(--gap) + var(--mobile-gap-extra))) !important;
    }

    html, body {
        overflow-x: hidden;
    }
}

/* =========================================================
   VIBRANT, NON-SOLID BACKDROP
   ========================================================= */
.ai-prompt-wrap {
    isolation: isolate;
}

/* inner padding so colorful shell is visible */
.form {
    padding: 10px;
}

    .form::before {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: calc(var(--r) + 14px);
        background: radial-gradient(1200px 600px at 6% -20%, #79e2ff33 0%, transparent 60%), radial-gradient(800px 800px at 102% 8%, #ff89e533 0%, transparent 55%), radial-gradient(900px 900px at 50% 120%, #ffd36b33 0%, transparent 50%), linear-gradient(135deg,#63d4ff66 0%,#a88beb66 30%,#f093fb66 62%,#ff6f9166 100%);
        box-shadow: 0 18px 40px rgba(0,0,0,.18), 0 6px 16px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.7);
        filter: saturate(1.15);
        z-index: 0;
    }

    .form::after {
        content: "";
        position: absolute;
        inset: 6px;
        border-radius: calc(var(--r) + 6px);
        background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
        backdrop-filter: blur(4px);
        z-index: 0;
    }

.glass {
    z-index: 1;
}

@keyframes ringSweep {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.js-form.open .glass--gradient::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from 0deg,#7dd3fc55,#a78bfa55,#f0abfc55,#fb718555,#fbbf2455,#7dd3fc55);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ringSweep 8s linear infinite;
    z-index: 1;
}

/* stronger shadow on input glass */
.ai-prompt-wrap .js-form.open .js-input.glass {
    box-shadow: 0 14px 34px -10px rgba(0,0,0,.35), 0 6px 10px -6px rgba(0,0,0,.25), inset 0 -6px 2px -5px #ffffff24, inset 0 -8px 3px -5px #ffffff3b, inset 0 -20px 10px -15px #ffffff5c, inset 7px 25px 10px -20px #ffffff5c;
}

@media (max-width: 576px) {
    .form {
        padding: 12px;
    }

        .form::after {
            inset: 8px;
        }
}

/* =========================================================
   FINAL OVERRIDES (width, alignment, and BLACK text)
   ========================================================= */
:root {
    --page-gap: 32px;
}

.ai-prompt-wrap {
    max-width: none !important;
    width: calc(100vw - (var(--page-gap) * 2)) !important;
    margin-left: var(--page-gap) !important;
    margin-right: var(--page-gap) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.form, .glass, .js-input {
    border-radius: var(--r);
}

.ai-prompt-wrap .glass, .ai-prompt-wrap .js-input {
    width: 100% !important;
}

.form-title {
    color: #111 !important;
    text-shadow: none !important;
}

.ai-prompt-wrap input, .ai-prompt-wrap .form-control {
    color: #111 !important;
}

    .ai-prompt-wrap input::placeholder {
        color: rgba(0,0,0,.55) !important;
    }

.ai-quick-form .ai-send {
    color: #111 !important;
}

.form-close-button {
    color: #111 !important;
    background: rgba(255,255,255,0.55);
}

.glass {
    background: rgba(255,255,255,0.18);
}

@media (min-width: 992px) {
    :root {
        --hh: 8.25rem;
    }
}

@media (max-width: 991.98px) {
    :root {
        --page-gap: 24px;
    }
}

@media (max-width: 576px) {
    :root {
        --page-gap: 12px;
    }

    .ai-prompt-wrap {
        width: calc(100vw - (var(--page-gap) * 2)) !important;
        margin-left: var(--page-gap) !important;
        margin-right: var(--page-gap) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* =========================================================
   >>> FINAL MOBILE FIX APPENDED <<<
   Keeps the dropdown a standard distance under the header on phones
   ========================================================= */
@media (max-width: 576px) {
    /* Single source of truth for spacing on phones */
    .ai-prompt-wrap {
        --stack-gap: 14px; /* distance between header glass and input glass */
        --inph: 3.1rem; /* input bar height on phones */
    }

        /* Total open height = header + gap + input height */
        .ai-prompt-wrap .form.open {
            height: calc(var(--hh) + var(--stack-gap) + var(--inph)) !important;
        }

        /* Position input by 'top' so it doesn’t jump too far */
        .ai-prompt-wrap .js-input {
            top: calc(var(--hh) + var(--stack-gap)) !important;
            height: var(--inph) !important;
            transform: none !important; /* cancel earlier translate rules */
        }

        .ai-prompt-wrap .js-form.open .js-input {
            transform: none !important;
        }

        /* Keep the internal field height consistent with the bar */
        .ai-prompt-wrap .ai-quick-form,
        .ai-prompt-wrap .ai-quick-form input {
            min-height: var(--inph) !important;
            height: var(--inph) !important;
            line-height: var(--inph) !important;
        }
}