/* ============================================================================
   Home / Index.cshtml — hero redesign. Palette taken from
   mockups/hero/hero-full-desktop.png. The logo has its own green
   (~#19b056); the rest of the design uses a more vivid green, standardized
   here. This file only loads on Index.cshtml (Layout = null, its own
   head) -- the rest of the site keeps the dark navbar from styles.css.
   Full decision history: .claude/bitacora/hero-publico.md
   ============================================================================ */

:root {
    --niuroof-green: #00c84f;
    --niuroof-green-dark: #00a844;
    --niuroof-ink: #0f172a;
}

/* Overrides background:var(--color-bg) from styles.css (home.css loads
   after it, and only on this page). Flat color, no image. */
body {
    background: #ebebeb;
}

/* ----------------------------------------------------------------------
   Navbar
   ---------------------------------------------------------------------- */

.navbar {
    background: #f5f6f7 !important;
    /* Must always match section's scroll-margin-top below, or anchor-jump
       sections hide behind the sticky navbar again. */
    height: 80px !important;
}

/* Anchor links (#why-niuroof, #contact, etc.) need scroll-margin-top or
   the jump leaves the section top hidden behind the sticky navbar.
   Applied to every <section>, not just the ones with anchors today, so a
   future one is covered without remembering to add it here. */
section {
    scroll-margin-top: 80px;
}

.navbar-container {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0px 1rem !important;
}

.navbar-logo-v2 {
    display: flex;
    align-items: center;
}

.navbar-logo-v2 img {
    height: 30px;
    display: block;
}

/* flex:1 + justify-content:center so it stays centered across the full
   width of the navbar, regardless of the logo and button measuring
   differently (centering with space-between alone would drift toward the
   narrower element's side). */
.navbar-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.75rem;
    flex: 1;
}

.navbar-links a {
    color: #111827;
    font-weight: 700;
    /* Desktop only -- .navbar-links is fully hidden on mobile, replaced
       by the hamburger menu. */
    font-size: 14.4px;
    letter-spacing: 1.5px;
    text-decoration: none;
}

.navbar-links a:hover {
    color: var(--niuroof-green);
}

.btn-hero-cta {
    background: var(--niuroof-green) !important;
    color: #fff !important;
    font-weight: 700;
    padding: 17px 34px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    font-size: 17px;
}

.btn-hero-cta:hover {
    background: var(--niuroof-green-dark) !important;
}

/* .navbar-links and .navbar-actions are fully hidden on mobile, so this
   is the only way to navigate at that resolution. Hidden on desktop; see
   the mobile override further below for when it's shown. */
.navbar-hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    color: #111827;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
}

.navbar-mobile-menu {
    display: none;
}

/* ----------------------------------------------------------------------
   Hero
   ----------------------------------------------------------------------
   hero-fondo.jpg has the house + satellite + black diagonal + green circle
   all composited in a single 1920x1080 (16:9) image. Everything below
   (title, text, address bar) scales in pure vw, no clamp floors/ceilings,
   at exactly the same rate as this image, so the 16:9 ratio never breaks
   at any desktop width. Full history of why: .claude/bitacora/hero-publico.md
   (several earlier approaches -- aspect-ratio on the box, layered CSS
   shapes -- broke across resolutions or cropped the image). */
.hero-v2 {
    /* Image width fixed to 100% (never cropped on the sides), anchored at
       the bottom. min-height:56.25vw (1080/1920, hero-fondo.jpg's real
       ratio) is a FLOOR, not a forced aspect-ratio -- if content ever
       needs more height, the box grows and the extra space is whitespace
       on top, it never crops the image again. Verify the image's real
       dimensions before changing this value. */
    min-height: 56.25vw;
    /* Before: align-items:center (text was centered, with ~11.96vw of
       space above and below at 1920px). To move it up by half that
       distance without touching the box height: align-items:flex-start +
       explicit padding-top of half that (~6vw) instead of centering. */
    padding: 6vw 0 0;
    /* Visible wherever the image doesn't cover (text past the min-height
       floor, or the extra space on top from align-items). */
    background: #ebebeb url('/img/hero-fondo.jpg') no-repeat bottom / 100% auto;
    position: relative;
    /* .hero (styles.css) has its own z-index:1, which traps
       .hero-v2-addr-bar below .navbar despite its own high z-index (own
       stacking context problem, see .hero-v2-container below). auto cancels it. */
    z-index: auto;
    /* No overflow:hidden -- a background is always clipped to its own box
       regardless. With min-height shorter than the text at some widths,
       overflow:hidden was also cutting off the TEXT, not just the image. */
    display: flex;
    align-items: flex-start;
}

.hero-v2::before {
    content: none; /* cancels the dark overlay from the base .hero */
}

.hero-v2-container {
    /* No max-width -- that broke the proportion with the image on wider
       screens. Padding in vw (5.2vw = the real left margin measured in
       the mockup) for the same reason -- everything scales together with
       .hero-v2. No z-index -- creates its own stacking context, trapping
       any child (even .hero-v2-addr-bar) below .navbar. */
    position: relative;
    width: 100%;
    padding: 2vh 5.2vw;
    display: flex;
    align-items: center;
}

.hero-v2-text {
    /* Capped at its 1920px-reference value above that width (matches
       ownwell.com's pattern) -- safe because .hero-v2's min-height is a
       floor, not a forced ratio, so a column that stops growing just
       leaves more background visible, it can't force a crop. */
    max-width: clamp(361px, 47vw, 902px);
}

.hero-v2-text h1 {
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: -1px;
    /* Uncapped below 1920px (scales at the same rate as the background
       image). Capped above it (matches ownwell.com's fixed-size title) --
       safe since .hero-v2's min-height is a floor, not a rigid ratio. */
    font-size: clamp(37px, 4.8vw, 92px);
    max-width: clamp(431px, 56vw, 1075px);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.hero-v2-text h1 .line-green {
    color: var(--niuroof-green);
    display: block;
}

.hero-v2-text h1 .line-dark {
    color: var(--niuroof-ink);
    font-weight: 600;
    display: block;
    font-size: clamp(32px, 4.2vw, 81px);
}

.hero-v2-text h1 .line-dark strong {
    color: var(--niuroof-green);
    font-weight: 900;
}

.hero-v2-lead {
    /* Capped the same way as .hero-v2-text h1 above. */
    font-size: clamp(12px, 1.55vw, 30px);
    max-width: clamp(369px, 48vw, 922px);
    color: #374151;
    margin-bottom: 1.25rem;
    /* Open Sans loaded in Index.cshtml alongside Poppins. */
    font-family: 'Open Sans', sans-serif;
}

.hero-v2-lead strong {
    color: var(--niuroof-green);
    font-weight: 700;
}

.hero-v2-addr-bar {
    /* position so z-index applies once the spotlight raises this above
       .navbar (z-index itself lives in .spotlight-active below, only
       while actually focused). */
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Capped like .hero-v2-text above -- its contents (icon/input/button)
       would otherwise outgrow the capped column and wrap past ~1920px. */
    gap: clamp(5px, 0.62vw, 12px);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: clamp(9px, 1.13vw, 22px);
    padding: clamp(5px, 0.62vw, 12px) clamp(5px, 0.62vw, 12px) clamp(5px, 0.62vw, 12px) clamp(12px, 1.5vw, 29px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
    transition: box-shadow .25s ease;
}

/* "Spotlight" effect on focus (seen on ownwell.com) -- a box-shadow on
   the element itself instead of a separate overlay <div>, since a
   separate overlay can't out-rank .hero-v2-container's own stacking
   context (it creates one via position:relative + z-index). */
.hero-v2-addr-bar.spotlight-active {
    /* Only needs to outrank .navbar (z-index:1000) while actually focused. */
    z-index: 1500;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06), 0 0 0 9999px rgba(0, 0, 0, .72);
}

.hero-v2-addr-icon {
    /* The SVG has width/height as HTML attributes (18), which is why
       explicit CSS is needed to override them -- color alone isn't enough. */
    width: clamp(23px, 2.98vw, 57px);
    height: clamp(23px, 2.98vw, 57px);
    color: #000;
    flex-shrink: 0;
}

.hero-v2-geocoder-mount {
    flex: 1;
    /* A real minimum (not 0) -- without it the Mapbox geocoder's <input>
       squeezes until it overflows instead of wrapping to its own line
       (flex-wrap above) when the container narrows. */
    min-width: clamp(72px, 9.4vw, 180px);
}

.hero-v2-addr-btn {
    flex-shrink: 0;
    background: var(--niuroof-green);
    color: #fff;
    border: none;
    border-radius: 38px;
    padding: clamp(6px, 0.83vw, 16px) clamp(10px, 1.35vw, 26px);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(7px, 0.93vw, 18px);
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
    display: inline-flex;
    align-items: center;
    gap: clamp(2px, 0.31vw, 6px);
}

.hero-v2-addr-btn:hover {
    background: var(--niuroof-green-dark);
}

.hero-v2-caption {
    margin-top: clamp(6px, 0.83vw, 16px);
    text-align: center;
    font-size: clamp(9px, 1.225vw, 24px);
    color: #6b7280;
}

/* ----------------------------------------------------------------------
   Mapbox geocoder inside the hero's address bar
   ---------------------------------------------------------------------- */

#heroGeocoder .mapboxgl-ctrl-geocoder {
    width: 100% !important;
    max-width: 100% !important;
    /* the Mapbox plugin ships with min-width:240px out of the box --
       without overriding it, it overflows its container
       (.hero-v2-geocoder-mount) as soon as that container narrows below
       240px, riding up over the button next to it. */
    min-width: 0 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: clamp(9px, 1.12vw, 22px) !important;
    min-height: 0 !important;
}

#heroGeocoder .mapboxgl-ctrl-geocoder--input {
    height: clamp(26px, 3.36vw, 65px) !important;
    padding: clamp(3px, 0.37vw, 7px) clamp(6px, 0.76vw, 15px) !important;
    font-size: clamp(9px, 1.12vw, 22px) !important;
    font-family: inherit !important;
    color: #111 !important;
}

#heroGeocoder .mapboxgl-ctrl-geocoder--input::placeholder {
    color: #9ca3af !important;
}

#heroGeocoder .mapboxgl-ctrl-geocoder--icon-search {
    display: none !important;
}

#heroGeocoder .mapboxgl-ctrl-geocoder--button {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

#heroGeocoder .suggestions {
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15) !important;
    margin-top: 8px !important;
}

#heroGeocoder .suggestions li a {
    font-size: 14px !important;
    padding: 10px 16px !important;
}

#heroGeocoder .suggestions li.active a {
    background: #f0fdf4 !important;
}

/* ----------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 992px) {
    /* Between 768 and 992px the hero behaves exactly like desktop (2
       columns, vw-scaled, inherited from the base rule) -- the collapse
       to text-only starts at the next breakpoint. Only the navbar changes
       here (gets hidden, no "shrunk" version). */
    .navbar-links {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Hamburger visible here (the base rule hides it) -- actual toggle
       via JS (see the <script> next to the nav in Index.cshtml), adds/
       removes .open on #navbarMobileMenu. */
    .navbar-hamburger {
        display: block;
    }

    .navbar-mobile-menu {
        /* Real display:none (not max-height:0) on request -- so it's
           GUARANTEED to be neither visible nor interactive (tab/screen
           reader) until it's opened via the icon, not just visually
           collapsed. .open (JS) switches it to flex. */
        display: none;
        flex-direction: column;
        gap: 4px;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
        padding: 8px 2rem 16px;
        box-sizing: border-box;
    }

    .navbar-mobile-menu.open {
        display: flex;
    }

    .navbar-mobile-menu a {
        color: #111827;
        font-weight: 600;
        font-size: 16px;
        text-decoration: none;
        padding: 10px 0;
        border-bottom: 1px solid #f1f5f9;
    }

    /* The CTA is <a class="btn btn-hero-cta">, not a plain text link --
       it shouldn't carry the padding/border from above. */
    .navbar-mobile-menu a.btn-hero-cta {
        border-bottom: none;
        text-align: center;
        margin-top: 6px;
    }

    /* scroll-margin-top below must match this height too, same reason as
       the base rule. */
    .navbar {
        height: 50px !important;
    }

    section {
        scroll-margin-top: 50px;
    }

    /* The mobile hero image is a real block AFTER .hero-v2-text in normal
       flow (::after, last child of .hero-v2-container, column direction
       here), not anyone's background -- so the browser always positions
       it below the text no matter how tall the text is (a background
       coupled the image's position to the text's height, which isn't
       safe with variable-height text). */
    .hero-v2 {
        padding: 2rem 0 0;
        background: #ebebeb;
        /* .hero-v2-container and the image's ::after need to stack one
           below the other -- without this .hero-v2 stays row (base rule). */
        flex-direction: column;
    }

    .hero-v2-container {
        flex-direction: column;
        /* Same as .quote-section (styles.css) at this width. */
        padding: 0 16px;
    }

    /* The image is .hero-v2's ::after (no side padding on mobile), not
       .hero-v2-container's -- so it takes the full screen width instead
       of getting cropped by that container's padding. */
    .hero-v2::after {
        content: "";
        display: block;
        width: 100%;
        /* Pulls the satellite up to the same height as .hero-v2-caption
           instead of sitting below it -- safe to overlap .hero-v2-text,
           which has its own z-index:2 above this. */
        margin-top: -20px;
        /* aspect-ratio matches the current file's real dimensions, so
           "contain" doesn't leave white bars on any edge -- verify the
           image's real size before changing this if it's ever replaced. */
        aspect-ratio: 425 / 321;
        background: url('/img/hero-fondo-movil.jpg') no-repeat center / contain;
    }

    .hero-v2-text {
        /* width:100% -- .hero-v2-container has align-items:center (doesn't
           stretch children), so without this .hero-v2-text shrank to its
           content's natural width instead of filling the available space. */
        width: 100%;
        max-width: 100%;
        text-align: center;
        /* Guarantees the text always paints above the image (negative
           margin-top on .hero-v2::after can overlap it). Keep this at 2,
           not higher -- raising it further makes .hero-v2-text its own
           stacking context escape above .navbar as a whole unit instead of
           just darkening correctly under it. See .navbar::after in
           styles.css for how the navbar actually gets darkened instead. */
        z-index: 2;
    }

    /* The title and the text above use pure vw (see comments in the base
       rule) to scale along with the background image on desktop -- here,
       with no image (see .hero-v2-shape further below), a pure vw would
       leave them illegibly small on a real phone, but a fixed rem (like
       before) also stopped shrinking below 768px -- on a genuinely narrow
       phone (320-400px) the text ends up too big for the width and forces
       extra line breaks. clamp() with a real floor: keeps scaling with vw
       down to that floor, instead of staying fixed as soon as this
       breakpoint is entered. */
    .hero-v2-text h1 {
        /* A real clamp() (min < max) -- a previous version had MIN > MAX,
           which makes clamp() always return the fixed minimum regardless
           of width, and that didn't fit on one line at 320-375px. */
        font-size: clamp(1.19rem, 6.9vw, 3.3rem);
        font-weight: 600;
        /* 100%, not the base rule's 56vw -- vw is relative to the full
           viewport, not the parent, so on a narrow phone 56vw ends up
           SMALLER than .hero-v2-text itself, cutting the title off. */
        max-width: 100%;
    }

    .hero-v2-text h1 .line-dark {
        color: var(--niuroof-ink);
        font-weight: 500;
        display: block;
        font-size: 6.2vw;
    }

    .hero-v2-lead {
        /* Same cause/fix as the h1 above -- the previous floor didn't go
           low enough for the first line to fit at 320-360px. */
        font-size: clamp(0.75rem, 3.75vw, 1.16rem);
        max-width: 100%;
    }

    .hero-v2-caption {
        margin-top: 16px;
        font-size: 14px;
    }

    .hero-v2-addr-icon {
        width: clamp(21px, 8.26vw, 35px);
        height: clamp(21px, 8.26vw, 35px);
    }

    /* Fixed sizes here instead of the base rule's pure vw -- vw alone
       would be illegibly small on a real phone. */
    .hero-v2-addr-bar {
        max-width: 100%;
        flex-wrap: wrap;
        gap: 10px;
        border-radius: 14px;
        padding: 3px 10px 7px 24px;
        /* More noticeable than the base rule's 1px -- barely visible on a
           real phone. */
        border: 2px solid #d1d5db;
    }

    .hero-v2-geocoder-mount {
        /* flex:1 (base rule) is enough for this to share a line with the
           icon while the button (width:100%) still falls to its own line. */
        min-width: 180px;
    }

    .hero-v2-addr-btn {
        width: 100%;
        justify-content: center;
        padding: 6px 26px;
        font-size: 16px;
        gap: 6px;
    }

    /* 16px, not smaller -- iOS Safari auto-zooms the whole page when a
       focused input's font-size is under 16px, which broke the layout on
       iPhones when selecting an address. Matches ownwell.com's own mobile
       address input (also 16px, no viewport zoom tricks). */
    #heroGeocoder .mapboxgl-ctrl-geocoder {
        font-size: 16px !important;
    }

    #heroGeocoder .mapboxgl-ctrl-geocoder--input {
        height: 41px !important;
        padding: 4px 8px !important;
        font-size: 16px !important;
    }
}

/* ----------------------------------------------------------------------
   Cotizador -- location confirmation. Appears instead of #btnQuote right
   when the roof is auto-detected (footprint found), before step 1.
   ---------------------------------------------------------------------- */

.location-confirm-text {
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    color: #111827;
    margin: 12px 0 10px;
}

/* Side-by-side rows (icon + title + subtitle), matching the "Confirm
   your roof" mockup -- stacks only once space is tight (768px below).
   HTML order is Deny, Confirm; "Yes" renders on the right on desktop,
   and column-reverse on mobile puts it first/on top instead. */
.location-confirm-actions {
    display: flex;
    gap: 10px;
}

@media (max-width: 768px) {
    .location-confirm-actions {
        flex-direction: column-reverse;
    }
}

.confirm-option {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1.5px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.confirm-option:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Single-CTA buttons (no paired alternative like Yes/No or
   Schedule/Save) are pushed to the right instead of stretching full width
   (align-self overrides .step-body's default stretch). A % width (not
   fixed px) standardizes their size while still scaling with the card. */
.btn-cta-right {
    align-self: flex-end;
    width: 38%;
    transition: width 0.3s ease;
}

.confirm-option-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.confirm-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.confirm-option-text strong {
    font-size: 15px;
    color: #111;
    font-weight: 700;
}

.confirm-option-text small {
    font-size: 13px;
    color: #4b5563;
}

.confirm-option-no {
    border-color: #e5e7eb;
}

.confirm-option-no .confirm-option-icon {
    background: #eef0f2;
    color: #4b5563;
}

.confirm-option-yes {
    background: #ecfdf3;
    border-color: var(--niuroof-green, #00c84f);
}

.confirm-option-yes .confirm-option-icon {
    background: var(--niuroof-green, #00c84f);
    color: #fff;
}

/* Icon circle dropped here (frees room for the text on narrow screens) --
   applies to every .confirm-option, single-CTA and paired alike. */
@media (max-width: 992px) {
    .btn-cta-right {
        /* Matches the tallest of the 5 single-CTA buttons at this width
           (one subtitle wraps to 2 lines while the others stay at 1), so
           all 5 render the same size. */
        min-height: 98px;
        /* 51.5% matches stepBreakdown's paired "Schedule Free Inspection"
           width at this breakpoint (measured live) -- desktop (>992px)
           keeps the original 38%. */
        width: 51.5%;
    }
}

@media (max-width: 768px) {
    .confirm-option-icon {
        display: none;
    }

    .confirm-option {
        gap: 0;
        padding: 10px 14px;
    }

    /* Subtitle hidden again here (restored on desktop above) -- only room
       for one line at this width. Icon already gone, so center the
       single remaining title instead of the button's default left-align.
       Must come after the 992px rule above in source order (same
       selector/specificity) so this 100% wins at every width <=768px. */
    .btn-cta-right {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .btn-cta-right .confirm-option-text {
        align-items: center;
    }

    /* The paired buttons already go full-width here once they stack to a
       column -- but with the icon gone and text-align:left untouched, the
       text sat flush left instead of centered, same issue as .btn-cta-right. */
    .location-confirm-actions .confirm-option,
    .summary-actions .confirm-option {
        justify-content: center;
        text-align: center;
    }

    .location-confirm-actions .confirm-option .confirm-option-text,
    .summary-actions .confirm-option .confirm-option-text {
        align-items: center;
    }
}

.confirm-header {
    margin-bottom: 16px;
}

.confirm-card {
    padding: 0;
}

.confirm-title {
    font-size: 32px;
    font-weight: 800;
    color: #111;
    margin: 0 0 6px;
}

/* Floats over the map itself (top-left), matching the "Confirm your roof"
   mockup, instead of sitting in the card below it. Shown/hidden by
   revealLocationConfirm()/hideLocationConfirm() in cotizador.js. */
.map-property-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    background: var(--niuroof-green, #00c84f);
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.confirm-address-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    margin: 14px 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    color: #333;
}

.confirm-address-chip i {
    color: var(--niuroof-green, #00c84f);
}

.confirm-address-chip span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.confirm-change-address {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: #00a844;
    cursor: pointer;
    flex-shrink: 0;
}

.confirm-change-address:hover {
    text-decoration: underline;
}

.confirm-area-stat {
    margin: -8px 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

/* "This is my house" (manual-draw mode, see enterManualDrawMode() in
   cotizador.js) while there's no polygon yet. */
#btnQuote:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ----------------------------------------------------------------------
   Cotizador -- "Draw your roof manually" button. #btnDrawPolygon (more
   specific than the class alone) so it doesn't affect any other .map-btn.
   ---------------------------------------------------------------------- */

#btnDrawPolygon {
    background: #fff;
    border: 2px solid var(--niuroof-green);
    color: var(--niuroof-green);
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#btnDrawPolygon:hover {
    background: #f0fdf4;
}

/* Active state while draw mode is on (added/removed by JS -- see
   enterDrawingButtonState()/exitDrawingButtonState() in cotizador.js) --
   solid fill instead of outline, so it's clearly obvious the map can now
   be tapped. */
#btnDrawPolygon.drawing {
    background: var(--niuroof-green);
    color: #fff;
    animation: btnDrawPulse 1.4s ease-in-out infinite;
}

@keyframes btnDrawPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 200, 79, .45); }
    50% { box-shadow: 0 0 0 6px rgba(0, 200, 79, 0); }
}

/* ----------------------------------------------------------------------
   Cotizador -- manual-draw instructions (enterManualDrawMode()).
   ---------------------------------------------------------------------- */

.manual-draw-instructions {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #1e40af;
    line-height: 1.4;
}

.manual-draw-instructions i {
    flex-shrink: 0;
    margin-top: 2px;
}

.manual-draw-steps {
    margin: 0;
    padding-left: 18px;
}

.manual-draw-steps li {
    margin-bottom: 4px;
}

.manual-draw-steps li:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------------
   Cotizador -- no coverage (handleNoCoverage() in cotizador.js).
   ---------------------------------------------------------------------- */

.coverage-fallback {
    margin-bottom: 16px;
}

.coverage-box {
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.coverage-box i {
    color: #ea580c;
    font-size: 20px;
}

.coverage-box h5 {
    font-weight: 600;
    margin: 8px 0 6px;
    color: #111827;
}

.coverage-box p {
    font-size: 14px;
    color: #57534e;
    margin-bottom: 14px;
}

/* Matches the rest of the wizard's CTAs (.btn-quote/.btn-green in
   styles.css) -- gradient + lift on hover, not a flat darken. */
.btn-retry {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-retry:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.coverage-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.55);
}

.coverage-modal-overlay.show {
    display: flex;
}

.coverage-modal-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    max-width: 380px;
    width: 100%;
    padding: 28px 24px;
    text-align: center;
}

.coverage-modal-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.coverage-modal-text {
    font-size: 15px;
    color: #111;
    line-height: 1.5;
    margin: 0 0 20px;
}

.coverage-modal-close {
    background: var(--niuroof-green);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s;
}

.coverage-modal-close:hover {
    background: var(--niuroof-green-dark);
}