/**
 * Quick freemium tunnel (« Avaliação Essencial ») — lot 2.
 * Palette alignée sur le formulaire long (feuille de base
 * tagus-value-public.css) : accent Tagus teal #1ABC9C → #16A085,
 * bordures #E0E6ED, textes #2C3E50 / #505050 / #787878, tint #E6F7F4.
 * Objectif : le tunnel court partage exactement les couleurs, les champs
 * et la typographie du tunnel long.
 */

.tv-quick {
    max-width: 1100px;
    /* Breathing room so the card ne colle ni à l'en-tête ni au pied de page. */
    margin: 44px auto 56px;
    background: #ffffff;
    border: 1px solid #E0E6ED;
    /* Pas de filet vert en haut : la carte du résultat en porte déjà un, et
       deux cadres verts imbriqués font « encadré dans un encadré ». */
    border-radius: 12px;
    /* Plus d'air à l'intérieur : le tunnel court ne fait plus « écrasé ». */
    padding: 40px 44px 44px;
    color: #505050;
    /* Une hauteur minimale donne de la présence à un écran à une seule question. */
    min-height: 480px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
/* The form fills the remaining height so the nav buttons sit at the bottom, on
   both a short screen (one field) and a tall one (many options). */
#tv-quick-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.tv-quick__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.tv-quick__brand {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #16A085;
    font-weight: 700;
}
.tv-quick__dots {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.tv-quick__dots li {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E0E6ED;
}
.tv-quick__dots li.is-on { background: #1ABC9C; }
.tv-quick__dots li.is-done { background: #16A085; }

.tv-quick__screen { display: none; }
.tv-quick__screen.is-active { display: block; }

.tv-quick__eyebrow {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #787878;
    margin: 0 0 4px;
}
.tv-quick__q {
    /* Titre repris du formulaire long (.tv-form-header h2 : 32px/700). */
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    color: #2C3E50;
    margin: 0 0 20px;
}
.tv-quick__hint { font-size: 13px; color: #787878; margin: -6px 0 12px; }

/* Indicatif + numéro sur une seule ligne : le pays devant le numéro, comme on
   l'écrit. Le select garde une largeur fixe pour que le champ du numéro ne
   rétrécisse pas quand on passe de « EUA / Canadá (+1) » à « Moçambique ». */
.tv-quick__phone { display: flex; gap: 8px; align-items: stretch; }
.tv-quick__phone select { flex: 0 0 200px; max-width: 200px; }
.tv-quick__phone input { flex: 1 1 auto; }
@media (max-width: 560px) {
    .tv-quick__phone { flex-direction: column; }
    .tv-quick__phone select { flex: 1 1 auto; max-width: none; }
}

.tv-quick__cards { display: flex; gap: 10px; }
.tv-quick__cards--wrap { flex-wrap: wrap; }
.tv-quick__cards--stack { flex-direction: column; }
.tv-quick__card {
    flex: 1 1 auto;
    display: block;
    border: 1.5px solid #E0E6ED;
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    color: #2C3E50;
    font-weight: 600;
    margin: 0;
    transition: border-color .15s, background .15s;
}
.tv-quick__cards--wrap .tv-quick__card { flex: 0 1 calc(50% - 5px); }
/* Cartes décrites (état du bien) : le libellé, puis ce qu'il veut dire. */
.tv-quick__cards--desc .tv-quick__card span { display: flex; flex-direction: column; gap: 2px; }
.tv-quick__cards--desc .tv-quick__card small { font-size: 13px; line-height: 18px; font-weight: 400; color: #5A6B7B; }
.tv-quick__card input { position: absolute; opacity: 0; pointer-events: none; }
.tv-quick__card:has(input:checked),
.tv-quick__card.is-selected {
    border-color: #1ABC9C;
    background: #E6F7F4;
}
.tv-quick__card:focus-within { outline: 2px solid #1ABC9C; outline-offset: 1px; }

/* Type cards carry an icon column above the label (inline flex on the span);
   tint the glyph with the brand accent so it reads as part of the control. */
.tv-quick__card svg { color: #16A085; }

/* Extras — a vertical list of full-width check cards, each optionally
   revealing a count / area sub-field once ticked. Multi-select (unlike the
   single-choice card rows), so the screen hint tells the visitor to check
   everything that applies. The reveal is driven by the [hidden] attribute in
   JS: no rule here may set `display` on a toggled block, or it would defeat
   the hiding. */
.tv-quick__extras { display: flex; flex-direction: column; gap: 10px; }
.tv-quick__extra-sub { margin: 8px 0 2px; padding-left: 14px; border-left: 2px solid #E6F7F4; }
.tv-quick__extra-sub .form-group { margin-bottom: 0; }


.tv-quick .form-group { margin-bottom: 12px; }
.tv-quick label { color: #2C3E50; font-weight: 600; }
.tv-quick .form-check-label { font-weight: 400; font-size: 14px; }

/* Une question par écran : seule l'unité courante (.tv-q-cur) est visible.
   Sa question est le titre de l'écran, libellé compris (label.tv-quick__q). */
.tv-quick__qu.tv-q-off { display: none; }
.tv-quick__qu { margin-bottom: 0; }
.tv-quick label.tv-quick__q { display: block; font-size: 30px; font-weight: 700; }
.tv-quick__q small { font-size: 16px; font-weight: 400; color: #787878; }
.tv-quick__qu > .tv-quick__hint { margin: -10px 0 14px; }
/* Réponses courtes côte à côte (Sim / Não / Não sei, Inferior / Comparável /
   Superior) ; la classe énergétique en grille de pastilles. */
.tv-quick__cards--row { flex-wrap: wrap; max-width: 640px; }
.tv-quick__cards--row .tv-quick__card { flex: 1 1 140px; text-align: center; }
.tv-quick__cards--grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); max-width: 720px; }
.tv-quick__cards--grid .tv-quick__card { text-align: center; padding: 12px 6px; }
.tv-quick__cards--grid .tv-quick__card:nth-last-child(-n+2) { grid-column: span 4; }
@media (max-width: 520px) {
    .tv-quick__cards--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tv-quick__card { padding: 14px 16px; }
/* Pastilles : une valeur par clic, « + » ouvre la saisie libre. */
.tv-quick__pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.tv-quick__pill {
    min-width: 48px; height: 48px; padding: 0 14px;
    border: 1.5px solid #E0E6ED; border-radius: 10px;
    background: #ffffff; color: #2C3E50;
    font-size: 16px; font-weight: 600; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.tv-quick__pill:hover { border-color: #1ABC9C; }
.tv-quick__pill[aria-pressed="true"] { border-color: #1ABC9C; background: #E6F7F4; color: #0E6655; }
.tv-quick__pill:focus-visible { outline: 2px solid #1ABC9C; outline-offset: 1px; }
.tv-quick__pills.has-error .tv-quick__pill { border-color: #E74C3C; }
.tv-quick__pills-input { max-width: 160px; }

.tv-quick__nav { display: flex; gap: 10px; margin-top: auto; padding-top: 24px; }
.tv-quick__back {
    border: 1.5px solid #E0E6ED;
    background: none;
    border-radius: 8px;
    padding: 10px 16px;
    color: #787878;
    cursor: pointer;
}
.tv-quick__next {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 11px 18px;
    background: linear-gradient(90deg, #1ABC9C 0%, #16A085 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}
.tv-quick__next:disabled { opacity: .5; cursor: wait; }

.tv-quick__error {
    background: #FDF6F6;
    color: #C8463C;
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 14px;
    font-size: 14px;
}
.tv-quick .has-error input,
.tv-quick .has-error select,
.tv-quick__cards.has-error .tv-quick__card { border-color: #C8463C; }

/* Resultado */
.tv-quick__range {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 0 6px;
}
.tv-quick__range strong { font-size: 26px; color: #16A085; }
.tv-quick__range span { color: #787878; }
.tv-quick__meta { text-align: center; color: #505050; margin: 0 0 4px; }
.tv-quick__conf { color: #1ABC9C; letter-spacing: .15em; }
.tv-quick__note { text-align: center; font-size: 12.5px; color: #787878; }
.tv-quick__nodata {
    background: #FCF7E8;
    color: #8B5E14;
    border-radius: 8px;
    padding: 14px;
    text-align: center;
}
.tv-quick__ctas { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.tv-quick__cta {
    display: block;
    text-align: center;
    border: 1.5px solid #E0E6ED;
    border-radius: 8px;
    padding: 11px 16px;
    color: #2C3E50;
    font-weight: 700;
    text-decoration: none;
}
.tv-quick__cta--primary {
    background: linear-gradient(90deg, #1ABC9C 0%, #16A085 100%);
    border-color: #16A085;
    color: #ffffff;
}
.tv-quick__optin-note {
    margin-top: 12px;
    background: #E6F7F4;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #16A085;
    text-align: center;
}

/* ===== Écran « Confirme a sua morada » =================================
   Le bloc partagé porte sa propre bordure haute pointillée quand il suit le
   champ de recherche ; sur son écran dédié il EST l'écran, donc pas de
   séparateur, et il ne doit jamais rester masqué (le thème le révèle après
   la résolution, mais la saisie manuelle doit rester possible sans lui). */
.tv-quick__screen[data-slug="confirmacao"] .tv-loc-confirm {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.tv-quick__screen[data-slug="confirmacao"].is-active .tv-loc-confirm[hidden] {
    display: block;
}

@media (max-width: 520px) {
    .tv-quick { padding: 24px 16px 28px; margin: 20px auto 32px; min-height: 360px; }
    .tv-quick__q, .tv-quick label.tv-quick__q { font-size: 24px; }
    .tv-quick__cards--wrap .tv-quick__card { flex: 1 1 100%; }
}

/* ==========================================================================
   Mode téléphone (.tvq-app, posé par le JS après le premier écran) : le
   tunnel se déploie en surcouche plein écran, sur le modèle du formulaire
   long — barre du haut (retour, formule, fermer, jauge), bouton au pouce.
   La page dessous reste intacte : ✕ referme sur l'écran en cours.
   ========================================================================== */
.tv-quick__app-btn { display: none; }
@media (max-width: 767px) {
    html.tvq-app body { overflow: hidden; }
    html.tvq-app .tv-quick {
        position: fixed; inset: 0; z-index: 100000;
        max-width: none; min-height: 0; margin: 0; padding: 0 20px;
        border: 0; border-radius: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    html.tvq-app #tv-quick-form { min-height: calc(100dvh - 96px); }
    html.tvq-app .tv-quick__head {
        position: sticky; top: 0; z-index: 2;
        display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px;
        margin: 0 -20px 24px; padding: calc(env(safe-area-inset-top) + 10px) 16px 12px;
        background: #fff; box-shadow: 0 6px 18px rgba(18, 40, 58, .08);
    }
    html.tvq-app .tv-quick__app-btn {
        display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
        border: 0; border-radius: 50%; background: #fff; color: #12283A;
        box-shadow: 0 2px 10px rgba(18, 40, 58, .16); cursor: pointer;
    }
    /* Garde la colonne : sans retour (écran du résultat), le titre reste centré. */
    html.tvq-app .tv-quick__app-btn[hidden] { visibility: hidden; }
    html.tvq-app .tv-quick__app-btn:focus-visible { outline: 3px solid #12283A; outline-offset: 2px; }
    html.tvq-app .tv-quick__brand { text-align: center; }
    html.tvq-app .tv-quick__dots {
        grid-column: 1 / -1; gap: 0; height: 6px; margin: 10px 44px 0;
        border-radius: 999px; overflow: hidden; background: #E9ECEF;
    }
    html.tvq-app .tv-quick__dots li { flex: 1; width: auto; height: 6px; border-radius: 0; background: transparent; }
    html.tvq-app .tv-quick__dots li.is-done,
    html.tvq-app .tv-quick__dots li.is-on { background: #1ABC9C; }
    html.tvq-app .tv-quick__nav {
        position: sticky; bottom: 0; margin: auto -20px 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: #fff; border-top: 1px solid #E9ECEF; box-shadow: 0 -6px 18px rgba(18, 40, 58, .06);
    }
    html.tvq-app .tv-quick__back { display: none; }
    html.tvq-app .tv-quick__next { min-height: 56px; border-radius: 999px; font-size: 17px; }
    html.tvq-app .tv-quick__card { min-height: 56px; border-radius: 14px; }
    html.tvq-app .tv-quick input.form-control,
    html.tvq-app .tv-quick select.form-control { min-height: 56px; font-size: 17px; border-radius: 14px; }
}

/* Unité dans le champ (« 120  m² ») : elle se lit avec le chiffre, là où on
   le tape — pas seulement dans le libellé. */
.tv-unit{position:relative;display:block;max-width:220px}
.tv-unit::after{content:attr(data-unit);position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#5A6B7B;pointer-events:none}
.tv-unit > input{padding-right:48px}

/* Carte « A sua estimativa » (écran contact) : le bien, et trois montants
   encore voilés — des barres, jamais des chiffres. */
.tv-quick__teaser { border: 1.5px solid #E0E6ED; border-radius: 12px; padding: 14px 16px; margin: 0 0 18px; background: #F7FAFB; }
.tv-quick__teaser-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #16A085; }
.tv-quick__teaser-bien { margin: 4px 0 12px; font-weight: 600; color: #2C3E50; }
.tv-quick__teaser-bien:empty { display: none; }
.tv-quick__teaser-range { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tv-quick__teaser-range small { display: block; font-size: 12px; color: #787878; margin-bottom: 6px; }
/* Des chiffres floutés (factices) : on devine une estimation cachée. */
.tv-quick__teaser-range i { display: block; font-style: normal; font-weight: 800; font-size: 18px; line-height: 1.3; color: #2C3E50; white-space: nowrap; filter: blur(5px); user-select: none; -webkit-user-select: none; }
.tv-quick__teaser-range span:nth-child(2) i { font-size: 22px; color: #16A085; }
.tv-quick__teaser-range i:empty::before { content: "000 000 €"; }

.tv-quick__reassure { display: flex; gap: 8px; align-items: flex-start; margin: -8px 0 14px; font-size: 13px; line-height: 18px; color: #5A6B7B; }
.tv-quick__reassure svg { flex: none; margin-top: 1px; color: #16A085; }

/* Largeur des champs = largeur de la réponse : une surface ou une année en
   pleine largeur se lisait comme une zone de texte libre. Le téléphone (colonne
   étroite) n'est pas touché : ces plafonds dépassent sa largeur. */
.tv-quick input[type="number"].form-control:not(.tv-quick__pills-input){max-width:220px}
.tv-quick .tv-quick__extra-sub input[name^="num_garage_"].form-control{max-width:120px}
.tv-quick #tv_complemento{max-width:320px}
.tv-quick #tv_quick_first_name,.tv-quick #tv_quick_last_name{max-width:360px}
.tv-quick #tv_quick_email{max-width:420px}
.tv-quick .tv-quick__screen select.form-control:not(#tv_quick_phone_code){max-width:420px}
.tv-quick__cards--stack{max-width:640px}


/* ==========================================================================
   Téléphone, avant le mode surcouche : la carte ne colle plus aux bords.
   iOS zoome la page dès qu'on touche un champ écrit en moins de 16 px
   (.form-control est à 15 px) et ne la dézoome pas : le tunnel débordait à
   droite, texte à 3 px du bord, jauge coupée. Champs à 16 px, marges
   latérales et jauge en barre (comme le mode surcouche) au lieu de 11
   points qui dépassaient.
   ========================================================================== */
@media (max-width: 767px) {
    .tv-quick input, .tv-quick select, .tv-quick textarea { font-size: 16px; }
    .tv-quick .form-control { width: 100%; max-width: 100%; box-sizing: border-box; }
    .tv-quick { width: auto; max-width: none; margin: 16px 12px 28px; padding: 22px 18px 26px; overflow-wrap: anywhere; }
    .tv-quick__head { flex-wrap: wrap; }
    .tv-quick__dots { flex: 1 1 100%; gap: 0; height: 6px; border-radius: 999px; overflow: hidden; background: #E9ECEF; }
    .tv-quick__dots li { flex: 1; width: auto; height: 6px; border-radius: 0; background: transparent; }
    .tv-quick__dots li.is-done, .tv-quick__dots li.is-on { background: #1ABC9C; }
    .tv-quick__q { font-size: 24px; }
}