/**
 * Airfiber application modal — split layout (artwork | 6-stage form).
 * Palette follows the site: #ea002a (nethouse blue), #089fac (airfiber cyan),
 * #f99b24 (accent), #e3e9ef (hairline). Structure mirrors main.css conventions
 * (pill CTAs, rounded inputs) but lives in its own file so the Airfiber feature
 * can be reviewed/reverted in isolation.
 *
 * Stage flow: 1 location+apartment → 2/3 availability fork → 4 phone+packages
 * → 5 details → 6 success. See modules/nh_template/nh_webapp/nh_footer.php.
 */

/* ---------------------------------------------------------------- nav CTA */
.navbar .nav-item.airfiber-cta-item:before {
    content: none !important; /* no menu-strip divider — the pill is its own separator */
}

.navbar .nav-item .nav-link.airfiber-cta {
    background-image: linear-gradient(135deg, #dc3545 0%, #fe9043 100%);
    color: #ffffff;
    border-radius: 999px;
    padding: 9px 20px;
    /* !important: the >=2400px media query in main.css pins nav margins */
    margin: 0 6px 0 10px !important;
    font-size: 13px;
    white-space: nowrap;
    letter-spacing: .3px;
    box-shadow: 0 6px 16px rgba(234, 0, 42, .28);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* Laptop widths: main.css shrinks the other nav items here — the pill has to
 * follow, otherwise the seven items overflow the 992–1558px bar. */
@media (max-width: 1558px) {
    .navbar .nav-item .nav-link.airfiber-cta {
        padding: 7px 13px;
        margin: 0 4px 0 7px !important;
        font-size: 11px;
        letter-spacing: .2px;
    }
}

.navbar .nav-item .nav-link.airfiber-cta:hover,
.navbar .nav-item .nav-link.airfiber-cta:focus {
    color: #ffffff;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(234, 0, 42, .34);
}

/* ------------------------------------------------------------ modal shell */
.airfiberApplyModal .modal-dialog {
    max-width: 1080px;
    width: calc(100% - 32px);
}

.airfiberApplyModal .modal-content {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(11, 34, 57, .32);
}

.airfiberApplyModal [hidden] {
    display: none !important; /* beats our own display:flex rules */
}

.airfiber-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 6;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(11, 34, 57, .06);
    color: #0b2239;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.airfiber-modal-close:hover {
    background: #ea002a;
    color: #ffffff;
}

.airfiber-modal-split {
    display: flex;
    align-items: stretch;
    min-height: min(620px, calc(100vh - 110px));
    max-height: calc(100vh - 110px);
}

/* ------------------------------------------------------- left: artwork half */
.airfiber-modal-visual {
    position: relative;
    flex: 0 0 46%;
    overflow: hidden;
    background: #ea002a;
}

.airfiber-visual-art {
    position: absolute;
    inset: 0;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.airfiber-visual-art > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 34%;
}

.airfiber-visual-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 40, 70, 0) 38%, rgba(0, 40, 70, .78) 100%);
}

.airfiber-visual-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 26px 28px;
    color: #ffffff;
}

.airfiber-visual-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.airfiber-visual-caption h5 {
    margin: 0 0 8px;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .3px;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 32, 60, .45);
}

.airfiber-visual-caption p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 2px 10px rgba(0, 32, 60, .4);
}

/* ------------------------------------------------ right: form half, centred */
.airfiber-modal-form {
    flex: 1 1 54%;
    display: flex;
    flex-direction: column;
    /* scrolls instead of clipping when a stage is taller than the modal */
    overflow-y: auto;
    background: #ffffff;
    padding: 34px 38px 26px;
}

/* The vertical centring: auto block margins centre the block when there is
 * room and collapse to 0 when the content is taller (no clipped top, which is
 * what justify-content:center would do on an overflowing flex container). */
.airfiber-form-inner {
    margin-block: auto;
    width: 100%;
}

.airfiber-form-head {
    margin-bottom: 18px;
    padding-right: 30px;
}

.airfiber-form-head h4 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #0b2239;
}

.airfiber-form-head p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7c8d;
}

/* --------------------------------------------------------------- progress */
.airfiber-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #8a99a8;
}

.airfiber-progress-meta b {
    color: #ea002a;
}

.airfiber-progress {
    height: 6px;
    margin-bottom: 22px;
    border-radius: 999px;
    background: #e3e9ef;
    overflow: hidden;
}

.airfiber-progress span {
    display: block;
    width: 20%;
    height: 100%;
    border-radius: 999px;
    background-image: linear-gradient(90deg, #dc3545 0%, #fe9043 100%);
    transition: width .35s cubic-bezier(.4, .15, .2, 1);
}

/* ------------------------------------------------------------------ steps */
.airfiber-step {
    display: none;
}

.airfiber-step.is-active {
    display: flex;
    flex-direction: column;
    animation: airfiber-step-in .28s ease both;
}

@keyframes airfiber-step-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.airfiber-step-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: #0b2239;
}

.airfiber-step-desc {
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6b7c8d;
}

/* --------------------------------------------------------------- fields */
.airfiber-field {
    margin-bottom: 14px;
}

.airfiber-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #3c4f61;
}

.airfiber-field .form-control {
    height: 46px;
    border: 1px solid #d8e1ea;
    border-radius: 12px;
    font-size: 14px;
    color: #0b2239;
    background-color: #fbfcfd;
    box-shadow: none;
}

.airfiber-field .form-control:focus {
    border-color: #089fac;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(8, 159, 172, .14);
}

.airfiber-field .form-control.is-invalid,
.airfiber-field.is-invalid .form-control {
    border-color: #e0453b;
    background-color: #fff7f6;
}

.airfiber-error {
    display: none;
    margin-top: 5px;
    font-size: 11.5px;
    color: #e0453b;
}

.airfiber-field.is-invalid .airfiber-error {
    display: block;
}


/* ------------------------------------------------------------- turnstile */

/* Reserve the widget's height so the CTA does not jump when the challenge renders. */
.airfiber-turnstile {
    margin-bottom: 16px;
    min-height: 65px;
}

/* ------------------------------------------------------ branded CTA button */
.airfiber-form .airfiber-cta {
    width: 100%;
    margin-top: 8px;
    padding: 13px 18px;
    border: 0;
    border-radius: 12px;
    background-image: linear-gradient(135deg, #dc3545 0%, #fe9043 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    box-shadow: 0 10px 22px rgba(234, 0, 42, .24);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.airfiber-form .airfiber-cta:hover,
.airfiber-form .airfiber-cta:focus {
    color: #ffffff;
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(234, 0, 42, .3);
}

/* ------------------------------------- stage 2: availability verdict + banner */
.airfiber-step-status.is-active {
    align-items: center;
    text-align: center;
}

.airfiber-status-icon {
    width: 104px;
    height: 104px;
    margin-bottom: 10px;
}

.airfiber-status-text {
    margin: 0 0 6px;
    max-width: 400px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.2px;
    line-height: 1.3;
    color: #ea002a;
}

.airfiber-status-speed {
    width: 180px;
    max-width: 70%;
    height: auto;
    margin: 6px 0 10px;
}

/* ------------------------------- package cards (no markup emits these now) */
/* The package-selection stage was removed from the flow; these rules are kept
   because the file has no git history yet and the cards are expected to come
   back from an endpoint later. Nothing matches them today. */
.airfiber-carousel {
    position: relative;
    margin: 4px 0 6px;
    padding: 0 24px;
}

.airfiber-carousel-viewport {
    overflow: hidden;
    border-radius: 16px;
}

.airfiber-carousel-track {
    display: flex;
    transition: transform .42s cubic-bezier(.4, .15, .2, 1);
    will-change: transform;
}

.airfiber-carousel-nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border: 1px solid #d8e1ea;
    border-radius: 50%;
    background: #ffffff;
    color: #ea002a;
    font-size: 0;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.airfiber-carousel-nav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.airfiber-carousel-prev { left: 0; }
.airfiber-carousel-next { right: 0; }

.airfiber-carousel-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.airfiber-carousel-next::before { transform: translate(-70%, -50%) rotate(45deg); }

.airfiber-carousel-nav:hover {
    border-color: #089fac;
    box-shadow: 0 6px 14px rgba(234, 0, 42, .16);
}

.airfiber-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
}

.airfiber-carousel-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cfd9e3;
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}

.airfiber-carousel-dot.is-active {
    width: 20px;
    border-radius: 999px;
    background: #ea002a;
}

/* package card + flip */
.airfiber-pkg {
    flex: 0 0 100%;
    height: 292px;
    padding: 0 6px;
    perspective: 1200px;
}

.airfiber-pkg-inner {
    position: relative;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.4, .15, .2, 1);
}

.airfiber-pkg.is-flipped .airfiber-pkg-inner {
    transform: rotateY(180deg);
}

.airfiber-pkg-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 22px;
    border: 1px solid #e3e9ef;
    border-radius: 16px;
    background: #ffffff;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}

.airfiber-pkg-front {
    background-image: radial-gradient(circle at 88% 8%, rgba(220, 53, 69, .13) 0%, rgba(255, 255, 255, 0) 62%);
}

.airfiber-pkg-back {
    transform: rotateY(180deg);
    justify-content: flex-start;
    background: #f7fbfe;
}

.airfiber-pkg-flip {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 5px 12px;
    border: 1px solid rgba(234, 0, 42, .22);
    border-radius: 999px;
    background: #ffffff;
    color: #ea002a;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.airfiber-pkg-flip:hover {
    background: #ea002a;
    color: #ffffff;
}

.airfiber-pkg-unflip {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
}

.airfiber-pkg-speed {
    display: block;
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    color: #ea002a;
}

.airfiber-pkg-speed i {
    margin-left: 5px;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    color: #089fac;
}

.airfiber-pkg-name {
    margin: 8px 0 2px;
    font-size: 14px;
    font-weight: 700;
    color: #0b2239;
}

.airfiber-pkg-price {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #f99b24;
}

.airfiber-pkg-price span {
    margin-left: 2px;
    font-size: 12px;
    font-weight: 600;
    color: #8a99a8;
}

.airfiber-pkg-desc {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7c8d;
}

.airfiber-pkg-back .airfiber-pkg-name {
    margin: 0 0 10px;
    padding-right: 26px;
    font-size: 13px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #ea002a;
}

.airfiber-pkg-features {
    margin: 0;
    padding: 0;
    list-style: none;
}

.airfiber-pkg-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 7px;
    font-size: 12.5px;
    line-height: 1.35;
    color: #3c4f61;
}

.airfiber-pkg-features img {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: 1px;
}

/* -------------------------------------------------------- stage 4 summary */
.airfiber-summary {
    margin: 4px 0 16px;
    padding: 14px 16px;
    border: 1px solid #e3e9ef;
    border-radius: 14px;
    background: #f7fbfe;
}

.airfiber-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 3px 0;
    font-size: 12.5px;
}

.airfiber-summary-row dt {
    margin: 0;
    font-weight: 600;
    color: #6b7c8d;
}

.airfiber-summary-row dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
    color: #0b2239;
}

/* Gateway refusal: a small toast that appears directly under the review CTA. */
.airfiber-toast {
    margin: 12px 0 0;
    padding: 10px 14px;
    border: 1px solid #f3c4c0;
    border-left: 3px solid #d93025;
    border-radius: 10px;
    background: #fdf2f1;
    font-size: 12.5px;
    line-height: 1.45;
    color: #a3231a;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease;
}

.airfiber-toast.is-visible {
    opacity: 1;
    transform: none;
}

.airfiber-toast[hidden] {
    display: none;
}

/* ------------------------------------------------------- stage 5: success */
.airfiber-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 0;
}

.airfiber-success img {
    width: 86px;
    height: 86px;
    margin-bottom: 14px;
}

.airfiber-success h5 {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
    color: #0b2239;
}

.airfiber-success p {
    margin: 0 0 18px;
    max-width: 340px;
    font-size: 13px;
    line-height: 1.55;
    color: #6b7c8d;
}

.airfiber-success .airfiber-done {
    width: 100%;
    max-width: 240px;
    padding: 12px 18px;
    border: 1px solid #d8e1ea;
    border-radius: 12px;
    background: #ffffff;
    color: #ea002a;
    font-size: 13px;
    font-weight: 700;
}

.airfiber-success .airfiber-done:hover {
    border-color: #ea002a;
    background: #ea002a;
    color: #ffffff;
}

/* --------------------------------------------------------------- footer */
.airfiber-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 14px;
}

.airfiber-form-actions .airfiber-back {
    padding: 0;
    border: 0;
    background: transparent;
    color: #8a99a8;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.airfiber-form-actions .airfiber-back:hover {
    color: #ea002a;
}

/* hidden but keeps its space, so the CTA above never shifts */
.airfiber-form-actions .airfiber-back.is-invisible {
    visibility: hidden;
}

/* ----------------------------------------------------------- responsive */
/* --------------------------------------- stage 1 — approximate on map */

/* The map is a second layer over the artwork half: both are absolutely positioned
   and slide horizontally, so the modal's width never changes. */
.airfiber-map-panel {
    position: absolute;
    inset: 0;
    z-index: 3;
    transform: translateX(-100%);
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
    background: #eef3f8;
}

.airfiberApplyModal.is-map .airfiber-visual-art {
    transform: translateX(-100%);
}

.airfiberApplyModal.is-map .airfiber-map-panel {
    transform: translateX(0);
}

.airfiber-map-canvas {
    position: absolute;
    inset: 0;
    background: #dde7f0;
}

.airfiber-map-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #ea002a;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 46, 90, .22);
}

.airfiber-map-close:hover {
    background: #ffffff;
}

.airfiber-map-status {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    margin: 0;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .95);
    color: #0f2b45;
    font-size: 12.5px;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0, 46, 90, .16);
}

/* Grouping, measured against the real rhythm: the apartment field's own 14px bottom
   margin is dropped so the input, the OR divider and the trigger sit as one unit
   (8px), while the stage CTA keeps 8px + this button's 14px = 22px of separation. */
.airfiber-field--typeahead {
    margin-bottom: 0;
}

.airfiber-or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    color: #8a99a8;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.airfiber-or::before,
.airfiber-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e3e9ef;
}

.airfiber-or span {
    flex: 0 0 auto;
}

/* Trigger under the apartment field: a quiet, full-width secondary action. */
.airfiber-map-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 14px;
    padding: 11px 14px;
    border: 1px solid #c9d8e6;
    border-radius: 10px;
    background: #f7fafd;
    color: #ea002a;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s, border-color .18s, color .18s;
}

.airfiber-map-open:hover:not(:disabled) {
    background: #eaf4fb;
    border-color: #089fac;
}

/* Loud enough to read as "do this first", quiet enough not to look like a failure. */
.airfiber-map-warning {
    display: block;
    margin-top: 7px;
    padding: 8px 11px;
    border-radius: 8px;
    border: 1px solid #f3d8a8;
    background: #fff8ec;
    color: #8a5a00;
    font-size: 12px;
    line-height: 1.45;
}

.airfiber-map-warning[hidden] {
    display: none;
}


/* Small pin glyph so the button reads as "map" without an icon font. */
.airfiber-map-open-pin {
    position: relative;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

/* Google measures and then clips its own bubble: `.gm-style-iw-c` carries
   max-height:100% and `.gm-style-iw-d` overflow:hidden. This card is taller than the
   box Google reserved, so the content was pushed down (dead space at the top) and the
   CTA was cut off at the bottom. Drop the ceiling — the card defines the bubble height,
   so there is no empty band above and nothing to clip. */
div.gm-style-iw-c.gm-style-iw-c,
div.gm-style-iw-d.gm-style-iw-d {
    max-height: none !important;
    overflow: visible !important;
}

/* InfoWindow card rendered for each apartment marker. Fixed width so the bubble
   has a predictable shape and the CTA spans it instead of hugging its text. */
.airfiber-iw {
    /* Inset inside Google's bubble — the one knob to tune. Google contributes 12px of
       padding; --iw-pad-* is our own clearance on top of it. Raise --iw-pad-bottom when
       the CTA crowds the rounded bottom edge, --iw-pad-top when the close button crowds
       the title. Bound to the card, so no other InfoWindow on the site is affected. */
    --iw-pad-top: 0px;
    --iw-pad-x: 0px;
    --iw-pad-bottom: 6px;

    width: 244px;
    box-sizing: border-box;
    padding: var(--iw-pad-top) var(--iw-pad-x) var(--iw-pad-bottom);
    font-family: inherit;
    white-space: normal;            /* Google defaults InfoWindow content to nowrap */
}

.airfiber-iw-title {
    margin: 0 0 2px;
    padding-right: 20px;            /* clears the bubble's close button */
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #0f2b45;
}

.airfiber-iw-subtitle {
    margin: 0 0 8px;
    padding-right: 20px;
    font-size: 11.5px;
    line-height: 1.35;
    color: #7a8794;
}

.airfiber-iw-rows {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.airfiber-iw-row {
    display: flex;
    align-items: flex-start;
    padding: 5px 0;
    border-top: 1px solid #e8eef4;
}

.airfiber-iw-row:first-child {
    border-top: 0;
}

.airfiber-iw-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 1px 8px 0 0;
    color: #089fac;
}

.airfiber-iw-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.airfiber-iw-field {
    display: block;
    min-width: 0;
}

.airfiber-iw-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #93a1ae;
}

.airfiber-iw-value {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: #0f2b45;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Only the status row carries a verdict — colour its value, keep the icon accent. */
.airfiber-iw-value.is-available {
    color: #178a5b;
}

.airfiber-iw-value.is-unavailable {
    color: #d8473d;
}

.airfiber-iw-select {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    background-image: linear-gradient(135deg, #dc3545 0%, #fe9043 100%);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
}

/* Hover is an explicit colour shift, not a brightness filter: a filter washes the
   gradient out inside Google's map overlay (and reads as a different hue on the
   amber state), while a darker gradient stays on brand. */
.airfiber-iw-select:hover,
.airfiber-iw-select:focus {
    background-image: linear-gradient(135deg, #c22a38 0%, #e0772c 100%);
    color: #ffffff;
}

/* i_60ghz = 0: nothing to install today, so the CTA is the waitlist. It drops the
   primary gradient for the shared accent (#f99b24 — the one hue all three brands
   carry), and flips to dark type because white on accent fails contrast. */
.airfiber-iw-select.is-waitlist {
    background-image: none;
    background-color: #f99b24;
    color: #33240f;
}

.airfiber-iw-select.is-waitlist:hover,
.airfiber-iw-select.is-waitlist:focus {
    background-image: none;
    background-color: #e58a10;
    color: #33240f;
}

@media (max-width: 991px) {

    /* On mobile the map replaces the whole banner height instead of sliding half
       a screen: the form keeps its scroll position. */
    .airfiber-map-panel {
        transform: translateX(-100%);
    }

    .airfiber-map-status {
        font-size: 12px;
        padding: 7px 10px;
    }
}

/* ----------------------------------------- stage 1 — TTAG geo typeahead */

/* The result list is absolutely positioned against the input wrapper, so the
   wrapper owns the stacking context — otherwise the next field paints over it. */
.airfiber-typeahead {
    position: relative;
}

.airfiber-typeahead .form-control {
    padding-right: 104px;
}

.airfiber-typeahead-status {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    max-width: 92px;
    font-size: 11.5px;
    line-height: 1.2;
    color: #7b8794;
    text-align: right;
    pointer-events: none;
}

.airfiber-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 214px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid #e3e9ef;
    border-radius: 12px;
    box-shadow: 0 18px 38px rgba(0, 46, 90, .16);
}

.airfiber-suggest li {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.35;
    color: #0f2b45;
    cursor: pointer;
}

.airfiber-suggest li:hover,
.airfiber-suggest li.is-active {
    background: #eaf4fb;
    color: #ea002a;
}

/* The field's permanent helper line ("pick from the list"), separate from the
   transient status text that sits inside the input. */
.airfiber-hint {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.45;
    color: #7b8794;
}

@media (max-width: 991px) {
    .airfiberApplyModal .modal-dialog {
        width: calc(100% - 20px);
    }

    .airfiber-modal-split {
        flex-direction: column;
        min-height: 0;
        max-height: calc(100vh - 60px);
    }

    .airfiber-modal-visual {
        flex: 0 0 156px;
    }

    .airfiber-visual-art > img {
        object-position: 50% 30%;
    }

    .airfiber-visual-caption {
        padding: 14px 18px;
    }

    .airfiber-visual-caption h5 {
        font-size: 18px;
    }

    .airfiber-visual-caption p {
        display: none;
    }

    .airfiber-status-text {
        font-size: 19px;
    }

    .airfiber-modal-form {
        flex: 1 1 auto;
        padding: 22px 18px 18px;
    }

    .airfiber-form-head h4 {
        font-size: 18px;
    }

    .airfiber-pkg {
        height: 300px;
    }

    .airfiber-status-icon {
        width: 84px;
        height: 84px;
    }

    .airfiber-status-speed {
        width: 150px;
    }
}

@media (max-width: 420px) {

    .airfiber-carousel {
        padding: 0 18px;
    }
}

/* ------------------------------------------------------- legacy-site shell */
.airfiber-backdrop {
    position: fixed;
    inset: 0;
    /* Below .modal (1060 in Bootstrap 5.0.0-beta3) — this backdrop is the manual
       fallback used when no modal API is available, and it must not dim the dialog. */
    z-index: 1040;
    background: rgba(11, 34, 57, .55);
}

/* Bootstrap 5.0.0-beta3 stacks .modal at 1060 and .modal-backdrop at 1050, so the
   dialog already paints above its backdrop. An earlier override raised the backdrop
   to 1070, which put it OVER every dialog that had no explicit lift of its own —
   that is the dim layer seen on the application and package modals. Leave the
   backdrop at Bootstrap's 1050 and only lift the dialogs we own. */
.airfiberApplyModal.show,
.airfiberPkgModal.show {
    z-index: 1080 !important;
}

.navbar .nav-link.airfiber-cta,
.nav-item .nav-link.airfiber-cta {
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 700;
    color: #ffffff !important;
    background: #ea002a;
}

/* Menu CTA: the live menus are plain <a> lists inside the theme's own nav, not
   Bootstrap .nav-link items, so the pill has to stand on its own. */
a.airfiber-cta,
.main-menu__list a.airfiber-cta,
#menu-main-menu a.airfiber-cta {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 999px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .2px;
    text-decoration: none;
    color: #ffffff !important;
    background: #ea002a;
    transition: filter .15s ease, transform .15s ease;
}

a.airfiber-cta:hover,
a.airfiber-cta:focus {
    color: #ffffff !important;
    filter: brightness(1.08);
    transform: translateY(-1px);
    text-decoration: none;
}

.main-menu__list .airfiber-nav-item,
#menu-main-menu .airfiber-nav-item {
    margin-left: 6px;
}

/* ------------------------------------------------------------------ menu width
   At 1200px the theme's header is exactly full: 1200 container - 30 padding - 80
   wrapper gutters = 1090, and 170 logo + 920 menu column = 1090. Zero slack, which
   is why the pill pinned itself against Contact. Widen only the header's own
   container and let the menu column take the extra room; the item rhythm (45px),
   the right-block alignment and the 23px item padding stay the theme's, so the
   menu keeps its height and its centring. */
.main-menu > .container,
.stricky-header.main-menu > .container {
    max-width: 1320px;
}

.main-menu__right {
    width: calc(100% - 170px);      /* never overlap the floated logo */
    max-width: 1000px;              /* 170 + 1000 = 1170 in a 1210 inner box */
}

.main-menu__right-bottom,
.main-menu .main-menu__list {
    flex-wrap: nowrap;              /* wrapping is what grew the row's height */
}

/* The pill, sized to the existing rhythm: 8px of padding keeps it shorter than the
   23px-padded list items, so the row height does not change. */
.main-menu .main-menu__list > li > a {
    white-space: nowrap;
}

.main-menu__list .airfiber-nav-item {
    display: flex;
    align-items: center;
}

.main-menu__list a.airfiber-cta {
    padding: 8px 20px;
    font-size: .95rem;
    line-height: 1.2;
    white-space: nowrap;
    background-color: #dc3545;
    background-image: linear-gradient(0deg, #dc3545 0%, #fe9043 100%);
}

.main-menu__list a.airfiber-cta:hover,
.main-menu__list a.airfiber-cta:focus {
    background-image: linear-gradient(0deg, #fe9043 0%, #dc3545 100%);
}

/* ------------------------------------- package lead modal (single package) */
/* Opened by a package card's apply button. Narrow and upright: it only asks for
   contact details, so it must not inherit the stepper's split layout. */
.airfiberPkgModal .modal-dialog {
    max-width: 560px;
    width: calc(100% - 32px);
}

.airfiberPkgModal .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(11, 34, 57, .32);
}

.airfiberPkgModal .modal-header {
    position: relative;
    padding: 26px 34px 14px;
    border-bottom: 1px solid #eceff3;
}

.airfiberPkgModal .modal-title {
    font-size: 21px;
    font-weight: 700;
    color: #1c2b36;
}

.airfiberPkgModal .modal-body {
    padding: 22px 34px 30px;
}

.airfiberPkgModal [hidden] {
    display: none !important; /* beats the form/display rules below */
}

/* Phone and e-mail share one row; each keeps the full field styling. */
.airfiber-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

/* Larger type: four fields, not a dense wizard. */
#airfiber_package_form .airfiber-field {
    margin-bottom: 18px;
}

#airfiber_package_form .airfiber-field label {
    margin-bottom: 8px;
    font-size: 13.5px;
}

#airfiber_package_form .airfiber-field .form-control {
    height: 50px;
    font-size: 15.5px;
}

/* The package comes from the card that was clicked - read it, don't retype it. */
#airfiber_package_form #s_airfiber_pkg_package {
    background-color: #f4f6f8;
    font-weight: 600;
}

#airfiber_package_form .airfiber-turnstile {
    margin-bottom: 18px;
}

#airfiber_package_form .airfiber-cta {
    width: 100%;
}

@media (max-width: 575.98px) {
    .airfiberPkgModal .modal-header {
        padding: 20px 20px 12px;
    }
    .airfiberPkgModal .modal-body {
        padding: 18px 20px 24px;
    }
    .airfiber-field-row {
        grid-template-columns: 1fr;
    }
}