/* Homepage callback-form test variant — page-specific additions only.
   Layered on top of homepage-draft.css (shared tokens, .evp-hero, .evp-container,
   .evp-eyebrow, .evp-section-h2, .evp-btn-hero-primary etc. already defined there). */

.evp-hero.evp-hero--form{height:auto;max-height:none;min-height:0;padding:4.5rem 0 4rem}
.evp-hero--form .evp-hero-content{height:auto;align-items:center}
.evp-hero-grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:1024px){.evp-hero-grid{grid-template-columns:minmax(0,1fr) 400px;gap:4rem}}
.evp-hero-grid .evp-hero-inner{max-width:none}

.evp-callback{background:rgba(1,13,20,0.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(226,178,123,0.28);border-top:3px solid var(--gold);border-radius:6px;padding:1.75rem 1.5rem;box-shadow:0 16px 48px rgba(0,0,0,0.45)}
@media (min-width:640px){.evp-callback{padding:2rem 1.75rem}}
.evp-callback-head{margin-bottom:1.25rem}
.evp-callback-head h2{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;color:#fff;font-size:1.375rem;line-height:1.2;margin-bottom:0.35rem}
.evp-callback-head h2 span{color:var(--gold)}
.evp-callback-head p{font-family:"DM Sans",sans-serif;color:rgba(255,255,255,0.65);font-size:0.875rem;line-height:1.5}
.evp-callback-row{display:grid;gap:0.75rem;margin-bottom:0.75rem}
@media (min-width:480px){.evp-callback-row--split{grid-template-columns:1.4fr 1fr}}
.evp-field label{display:block;font-family:"DM Sans",sans-serif;font-size:0.75rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:0.35rem}
.evp-field input,.evp-field select{width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.18);border-radius:4px;padding:0.7rem 0.85rem;font-family:"DM Sans",sans-serif;font-size:0.9375rem;color:#fff;transition:border-color 0.2s,background 0.2s;appearance:none;-webkit-appearance:none}
.evp-field input::placeholder{color:rgba(255,255,255,0.35)}
.evp-field input:focus,.evp-field select:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,0.09)}
.evp-field select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e2b27b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.85rem center;padding-right:2.25rem;cursor:pointer}
.evp-field select:invalid{color:rgba(255,255,255,0.35)}

/* The theme's global main.js runs jQuery niceSelect() against every <select> on
   every page, but nice-select.css is never enqueued anywhere on this site --
   so its widget briefly renders unstyled (every option stacked open) between
   page load and our JS cleanup (which only runs on window 'load', after images
   etc. finish, so the broken flash can be visible for a while). Fix it with
   CSS instead of a timing race: always hide whatever niceSelect builds, and
   force our real selects to stay visible the whole time (!important beats the
   inline display:none niceSelect's jQuery .hide() sets on them). The JS
   cleanup still runs later purely to remove the orphaned DOM node. */
#cb-service, #b-service { display: block !important; }
.evp-field .nice-select { display: none !important; }
.evp-field select option{color:var(--dark);background:#fff}
.evp-callback-submit{width:100%;justify-content:center;border:none;cursor:pointer;margin-top:0.5rem}
.evp-callback-note{display:flex;align-items:center;justify-content:center;gap:0.4rem;margin-top:0.85rem;font-family:"DM Sans",sans-serif;font-size:0.75rem;color:rgba(255,255,255,0.45)}
.evp-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.evp-callback-success{text-align:center;padding:2.5rem 1rem;display:none}
.evp-callback-success .tick{width:56px;height:56px;border-radius:50%;background:rgba(226,178,123,0.12);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem}
.evp-callback-success h3{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;color:#fff;font-size:1.25rem;margin-bottom:0.5rem}
.evp-callback-success p{font-family:"DM Sans",sans-serif;color:rgba(255,255,255,0.65);font-size:0.9375rem;line-height:1.6}
.evp-callback.is-sent form{display:none}
.evp-callback.is-sent .evp-callback-success{display:block}

/* Mid-page band variant */
.evp-callback-band{background:var(--dark);border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);padding:3.5rem 0}
.evp-callback-band .evp-callback{background:transparent;border:none;box-shadow:none;backdrop-filter:none;padding:0;max-width:none}
.evp-band-grid{display:grid;gap:2rem;align-items:center}
@media (min-width:1024px){.evp-band-grid{grid-template-columns:minmax(0,0.9fr) 1.1fr;gap:4rem}}
.evp-band-fields{display:grid;gap:0.75rem}
@media (min-width:640px){.evp-band-fields{grid-template-columns:1fr 1fr}}
.evp-band-fields .evp-field--wide{grid-column:1/-1}
@media (min-width:640px){.evp-band-fields .evp-callback-submit{grid-column:1/-1}}

@media (max-width:768px){
    .evp-hero.evp-hero--form{padding:3rem 0}
}

/* Service page hero variant (page-water-softener.php / page-leak-detection.php) */
.ws-hero.ws-hero--form{height:auto;max-height:none;min-height:0;padding:4.5rem 0 4rem}
.ws-hero--form .ws-hero__inner{height:auto;align-items:center}
.ws-hero--form .ws-hero__content{max-width:none}
.evp-hero-grid .ws-hero__content{max-width:none}
@media (max-width:768px){
    .ws-hero.ws-hero--form{padding:3rem 0}
}