/**
 * wt-quote-master.css — the WT quote block's styled form.
 *
 * Adapted from site-global/css/main-form-master.css and scoped under
 * .wt-quote-master, because the original's site-theme rules would break a WT
 * page. Dropped: the hero-overlay positioning of #quote_id and the rules for
 * site-theme elements. Button and addon colours use --wt-primary so the form
 * follows the active template.
 */

/* Map the ported variable onto the WT token, so the rules below can keep
   reading --main-form-primary exactly as they did on the site. */
.wt-quote-master {
    --main-form-primary: var(--wt-primary, #3C8DBC);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    color: var(--wt-ink, #22303f);
    text-align: left;
}
.wt-quote-master *,
.wt-quote-master *::before,
.wt-quote-master *::after { box-sizing: border-box; }
.wt-quote-master .boxForm,
.wt-quote-master #quote_id,
.wt-quote-master .wt-qm-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* ---- panel ---- */
.wt-quote-master .wt-qm-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wt-quote-master .form-group { margin: 0; }

/* Two-up on desktop, stacked on a phone. Replaces the original's
   bootstrap col-md-6 pairs, which relied on the site's grid. */
.wt-quote-master .wt-qm-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
/* The desktop sidebar is a fixed 340px track. Stack paired date/time fields
   there so their labels and controls remain readable. Once the whole sidebar
   drops below the main column it has enough room for two columns again. */
[data-wt-family="sidebar"] .wt-aside .wt-quote-master .wt-qm-row {
    grid-template-columns: 1fr;
}
@media (max-width: 900px) and (min-width: 561px) {
    [data-wt-family="sidebar"] .wt-aside .wt-quote-master .wt-qm-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {
    .wt-quote-master .wt-qm-row { grid-template-columns: 1fr; }
}
.wt-quote-master .wt-qm-col { min-width: 0; }

/* ---- one way / return toggle ---- */
.wt-quote-master .the_way { display: flex; }
.wt-quote-master .the_way input { display: none; }
.wt-quote-master .the_way label {
    flex: 1 1 0;
    display: inline-block;
    font-size: 13px;
    font-weight: normal;
    text-align: center;
    padding: 8px 0;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3), 0 1px rgba(255, 255, 255, .1);
    transition: all .1s ease-in-out;
    cursor: pointer;
}
.wt-quote-master .the_way label:first-of-type { border-radius: 4px 0 0 4px; }
.wt-quote-master .the_way label:last-of-type { border-radius: 0 4px 4px 0; }
.wt-quote-master .the_way input:checked + label {
    background-color: var(--main-form-primary);
    box-shadow: none;
    color: #fff;
}

/* ---- fields ---- */
.wt-quote-master .input-group { display: flex; width: 100%; }
.wt-quote-master .form-control {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    background: #fff;
    cursor: pointer;
}
/* The fields are always white (above), so the placeholder is a fixed grey that holds 4.5:1 on white
   (Bootstrap's #999 is 2.85:1). */
.wt-quote-master .form-control::placeholder,
.wt-quote-master .intl-tel-input .form-control::placeholder { color: #6b7280; opacity: 1; }
.wt-quote-master .input-group-addon {
    /* the Return Time clock is a <label>; Bootstrap gives labels margin-bottom:5px, which shrank
       that box 5px shorter than the field beside it */
    margin: 0;
    flex: 0 0 auto;
    background: var(--main-form-primary);
    border-color: var(--main-form-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
}
.wt-quote-master .glyphicon { color: #fff; }
.wt-quote-master .wt-qm-disabled { background-color: rgba(158, 163, 168, .5) !important; }
.wt-quote-master .intl-tel-input { width: 100%; }
.wt-quote-master .intl-tel-input .form-control { width: 100% !important; }

.wt-quote-master .btn-primary {
    background-color: var(--main-form-primary) !important;
    border-color: var(--main-form-primary) !important;
}
/* the button fills the form exactly: a legacy margin-left:5px pushed it 5px past the fields on the right */
.wt-quote-master #quotenext { margin: 8px 0 0; width: 100%; box-sizing: border-box; }

.wt-quote-master .wt-qm-link {
    font-size: 13px;
    align-self: flex-start;
    /* text colour: the readable shade of the brand colour (the raw one stays for fills) */
    color: var(--wt-primary-text, var(--main-form-primary));
}

/* ---- extra drops ---- */
.wt-quote-master .box-extra-drop-detail { max-height: 140px; overflow: auto; }
.wt-quote-master .wt-qm-drop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--wt-rule, #e3e6ea);
}
.wt-quote-master .wt-qm-drop-name { flex: 1 1 auto; font-size: 13px; }
.wt-quote-master .wt-qm-drop-del { flex: 0 0 auto; line-height: 1; }
.wt-quote-master .wt-qm-drop .hideOpts { flex: 0 0 auto; }

/* ---- locate panel ----
   The original positioned this at a fixed top/left over the site's hero. Here
   it is a centred overlay, so it works wherever the block sits on the page. */
.wt-quote-master #findlocation {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* No dimmed backdrop - just the map card floating over the page. The layer
       still spans the viewport to centre the card, so it must not intercept
       clicks meant for the page behind it; only the card takes pointer events. */
    background: none;
    pointer-events: none;

    /* ecm.css:7 styles this SAME id for the legacy quote form:
         #findlocation { position:absolute; background:#FFF; width:500px;
                         min-height:350px; padding:25px; border:1px solid #666;
                         border-radius:15px; }
       It is loaded on WT pages as part of the funnel bundle. This selector out-
       specifies it (1,1,0 vs 1,0,0), but ONLY for the properties it actually
       names - so every one of those has to be reset here explicitly or the
       leftovers show up as a bordered 500px-wide box behind the map card. */
    width: auto;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.wt-quote-master #findlocation.hidden { display: none; }
.wt-quote-master .wt-qm-locate {
    pointer-events: auto;
    background: #fff;
    border-radius: 4px;
    padding: 14px;
    width: 100%;
    max-width: 560px;
    font-size: 14px;
    color: #22303f;
    /* Carries its own separation now that nothing dims behind it. */
    border: 1px solid var(--wt-rule, #dde3ea);
    box-shadow: 0 12px 40px rgba(16, 28, 44, .28);
}
.wt-quote-master #map {
    width: 100%;
    height: 320px;
    margin: 10px 0;
}
.wt-quote-master .wt-qm-accept { float: right; }