/* ------------------------------------------------------------------
   The one enquiry form (resources/views/frontend/inc/lead-form-fields.blade.php)
   and the two boxes it sits in: the side panel (.sideBar .formm) and the
   centre popup (.main_home_popup). The Contact Us page uses the form as is.

   Everything new is prefixed avf- / avp- so it cannot touch the theme; the
   few theme rules restated below (panel width, popup size) are marked.
------------------------------------------------------------------- */
:root {
    --avf-green: #00441f;          /* the site's --aura-green */
    --avf-green-dark: #003317;
    --avf-gold: #b9975b;
    --avf-ink: #1d2a23;
    --avf-muted: #69726c;
    --avf-line: #d8ddd8;
    --avf-field: #fbfaf7;
}

/* ---- the form ---- */
.avf { font-family: "DM Sans", "Figtree", sans-serif; color: var(--avf-ink); margin: 0; }
.avf *, .avf *::before, .avf *::after { box-sizing: border-box; }
.avf-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.avf--grid .avf-grid { grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.avf--grid .avf-wide { grid-column: 1 / -1; }
/* one column, but first + last name share a row */
.avf--stack .avf-grid { grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.avf--stack .avf-grid > * { grid-column: 1 / -1; }
.avf--stack .avf-grid > .avf-pair { grid-column: auto; }

.avf-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.avf label, .avf legend {
    display: block; margin: 0 0 6px; padding: 0;
    font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--avf-ink); line-height: 1.3; float: none; width: auto;
}
.avf label b, .avf legend b { color: #b3261e; font-weight: 600; }
.avf label span, .avf legend span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--avf-muted); }

.avf input[type="text"], .avf input[type="email"], .avf input[type="tel"], .avf textarea, .avf .avf-phone {
    width: 100%; height: 46px; margin: 0;
    border: 1px solid var(--avf-line); border-radius: 10px; background: var(--avf-field);
    font: 400 15px/1.4 "DM Sans", "Figtree", sans-serif; color: var(--avf-ink);
    padding: 0 14px; outline: none; box-shadow: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.avf textarea { height: auto; min-height: 84px; padding: 11px 14px; resize: vertical; }
.avf input::placeholder, .avf textarea::placeholder { color: #9aa29c; opacity: 1; }
.avf input:focus, .avf textarea:focus, .avf .avf-phone:focus-within {
    border-color: var(--avf-green); background: #fff; box-shadow: 0 0 0 3px rgba(0, 68, 31, .12);
}

/* phone: country code + number inside one box */
.avf .avf-phone { display: flex; align-items: stretch; padding: 0; overflow: hidden; }
.avf .avf-phone select.av-isd {
    flex: 0 0 auto; width: 112px; max-width: 45%; height: 100%; margin: 0;
    border: 0; border-right: 1px solid var(--avf-line); border-radius: 0; background: transparent;
    padding: 0 6px 0 12px; font: 400 14px "DM Sans", sans-serif; color: var(--avf-ink); cursor: pointer; outline: none;
}
.avf .avf-phone input[type="tel"] {
    flex: 1 1 auto; min-width: 0; height: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.avf .avf-phone input[type="tel"]:focus { box-shadow: none; }

/* BHK choice as tappable chips (radio buttons underneath) */
.avf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.avf-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.avf .avf-chips label {
    margin: 0; padding: 10px 18px; border: 1px solid var(--avf-line); border-radius: 999px; background: var(--avf-field);
    font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.avf .avf-chips label:hover { border-color: var(--avf-green); }
.avf .avf-chips input:checked + label { background: var(--avf-green); border-color: var(--avf-green); color: #fff; }
.avf .avf-chips input:focus-visible + label { box-shadow: 0 0 0 3px rgba(0, 68, 31, .25); }

/* Cloudflare check: no gap when Cloudflare shows nothing */
.avf .av-turnstile { margin: 0; }

.avf .avf-submit {
    display: block; width: 100%; height: 50px; margin: 2px 0 0; border: 0; border-radius: 10px;
    background: var(--avf-green); color: #fff; cursor: pointer;
    font: 600 15px "DM Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase;
    transition: background .2s;
}
.avf .avf-submit:hover, .avf .avf-submit:focus-visible { background: var(--avf-green-dark); }
.avf .avf-submit:disabled { opacity: .7; cursor: wait; }
.avf .avf-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--avf-muted); text-align: center; }

/* ---- header shared by the side panel and the popup ---- */
.avp-head { position: relative; background: var(--avf-green); color: #fff; padding: 20px 24px 18px; }
.avp-head small { display: block; font: 600 11px "DM Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #e4c88f; }
.avp-head h3 { margin: 6px 0 4px; color: #fff; font: 500 26px/1.15 "Playfair Display", Georgia, serif; }
.avp-head p { margin: 0; color: rgba(255, 255, 255, .78); font-size: 14px; line-height: 1.45; }
.avp-body { padding: 20px 24px 22px; background: #fff; }
.avp-close {
    position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .14);
    transition: background .2s;
}
.avp-close:hover { background: rgba(255, 255, 255, .28); }
.avp-close svg { width: 20px; height: 20px; }

/* PDF download note inside the popup */
.avp-body .av-dl-note { margin: 0 0 16px; padding: 10px 14px; border: 1px solid #e8dcc4; border-radius: 10px; background: #f8f3e9; font-size: 14px; color: var(--avf-ink); }

/* ---- centre popup (theme: .main_home_popup) ---- */
.main_home_popup { background: rgba(10, 20, 15, .72); }
.main_home_popup .width { padding: 16px; }
.main_home_popup .width .width_point.avp {
    width: 100%; max-width: 680px; max-height: calc(100vh - 32px); overflow: auto;
    border: 0; border-radius: 16px; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.main_home_popup .avp .avp-head { border-radius: 16px 16px 0 0; padding-right: 64px; }

/* ---- side panel (theme: .sideBar .formm) ---- */
.sideBar .formm { width: 360px; right: -362px; top: 120px; }
.sideBar .formm.active { right: 0; }
.sideBar .formm .formBox.avp {
    max-height: calc(100vh - 140px); overflow: auto; border-radius: 16px 0 0 16px;
    background: #fff; box-shadow: -12px 18px 50px rgba(0, 0, 0, .22);
}
.sideBar .formm .avp .avp-head { padding: 16px 20px 14px; border-radius: 16px 0 0 0; }
.sideBar .formm .avp .avp-head h3 { font-size: 23px; margin: 4px 0 2px; }
.sideBar .formm .avp .avp-head p { font-size: 13px; }
.sideBar .formm .avp .avp-body { padding: 16px 20px 18px; }
/* compact fields so the button is on screen without scrolling */
.sideBar .avf input[type="text"], .sideBar .avf input[type="email"], .sideBar .avf .avf-phone { height: 42px; }
.sideBar .avf textarea { min-height: 62px; }
.sideBar .avf .avf-chips label { padding: 8px 16px; }
.sideBar .avf .avf-submit { height: 46px; }
.sideBar .avf .avf-note { margin-top: 8px; }

/* ---- Contact Us page: the form sits in the page, no header ---- */
.contact-four__form .avf { margin-top: 26px; }

@media (max-width: 767px) {
    .avf--grid .avf-grid { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
    .avf--grid .avf-grid > * { grid-column: 1 / -1; }
    .avf--grid .avf-grid > .avf-pair { grid-column: auto; }
    .avp-head { padding: 18px 20px 16px; }
    .avp-head h3 { font-size: 23px; }
    .avp-body { padding: 18px 20px 20px; }
    .sideBar .formm { width: min(360px, calc(100vw - 56px)); right: calc(-1 * min(362px, calc(100vw - 54px))); top: 90px; }
    .sideBar .formm .formBox.avp { max-height: calc(100vh - 110px); }
}