/* ============================================================
   UC V2 Shared Styles  (extracted from front-page-v2.php)
   Used by:
     - front-page-v2.php  (UC Front Page V2 template)
     - page-uc-content-v2.php  (UC Content Page V2 template)
   Brand: #337ab7 primary, #286090 dark, #1f4d7a deepest,
          #dfca8b gold, #515769 body text
   IMPORTANT: contains ONLY rules that are safe to share between
   both templates. Layout-specific rules (.ucv2-section padding,
   .ucv2-grid sizes, .ucv2-services-grid, etc.) live in each
   template's own <style> block to avoid cross-template collisions.
   ============================================================ */

/* ---------- Base brand foundation ---------- */
.ucv2 a  { color:#337ab7; text-decoration:none; }
.ucv2 a:hover { color:#286090; }
/* scroll-behavior:smooth removed 2026-04-27 — see front-page-v2.php inline note. */

/* ---------- Button system ---------- */
.ucv2-cta-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; }
.ucv2-btn {
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 32px; border-radius:6px;
    font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:.95rem;
    border:2px solid transparent; cursor:pointer;
    transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
    text-decoration:none;
}
.ucv2-btn-primary {
    background:linear-gradient(135deg,#dfca8b 0%, #e8d49a 100%);
    color:#1f4d7a !important; border-color:#dfca8b;
    box-shadow:0 10px 28px rgba(223,202,139,.45);
}
.ucv2-btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(223,202,139,.6); color:#1f4d7a !important; text-decoration:none; }
.ucv2-btn-primary .arrow { transition:transform .2s ease; }
.ucv2-btn-primary:hover .arrow { transform:translateX(4px); }
.ucv2-btn-ghost { background:rgba(255,255,255,.08); color:#fff !important; border-color:rgba(255,255,255,.7); backdrop-filter:blur(6px); }
.ucv2-btn-ghost:hover { background:rgba(255,255,255,.18); }

/* ============================================================
   QUOTE FORM CARD  (the big shared block — both templates use
   this verbatim wrapping their require of quotes_formmd.php)
   ============================================================ */
.ucv2-quote-wrap {
    max-width:1240px; margin:-110px auto 0; padding:0 22px;
    position:relative; z-index:5;
}
.ucv2-quote-card {
    background:#fff; border-radius:14px;
    box-shadow:0 30px 80px rgba(31,77,122,.25), 0 4px 14px rgba(0,0,0,.06);
    border-top:5px solid #337ab7; overflow:hidden; max-width:100%;
    position:relative;
}
.ucv2-quote-head {
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding:28px 36px; border-bottom:1px solid #eef0f3;
    background:linear-gradient(to right,#fafbfd, #fff);
    border-radius:14px 14px 0 0;
}
.ucv2-quote-head h2 { margin:0; font-size:1.75rem; color:#1f4d7a; line-height:1.2; }
.ucv2-quote-head .sub { color:#3d4558; font-weight:500; font-size:1.05rem; margin-top:4px; }
.ucv2-quote-head .badges { display:flex; gap:10px; flex-wrap:wrap; }
.ucv2-quote-head .badge {
    background:#dfca8b; color:#1f4d7a; padding:12px 22px; border-radius:999px;
    font-weight:800; font-size:1rem; text-transform:uppercase; letter-spacing:.06em;
    box-shadow:0 4px 14px rgba(31,77,122,.18);
}
.ucv2-quote-head .badge.alt { background:#e8f0fb; color:#286090; }
/* 2026-04-23: float badges side-by-side over the map on desktop. Mobile
   keeps them inline in the head so the stacked form/map isn't obstructed. */
@media (min-width: 769px) {
  .ucv2-quote-card { position:relative; }
  .ucv2-quote-head .badges {
    position:absolute;
    top:20px; right:20px;
    flex-direction:row; align-items:center;
    gap:10px;
    z-index:5;
  }
  .ucv2-quote-head .badge {
    padding:14px 26px; font-size:1.05rem;
    box-shadow:0 6px 22px rgba(31,77,122,.28);
  }
}

.ucv2-quote-body { padding:30px; overflow:hidden; }
.ucv2-quote-body .booking-form { margin-top:0 !important; padding:6px 4px 0 !important; }
.ucv2-quote-body .inner-form.row { margin:0 !important; }

/* Inputs */
.ucv2-quote-body #quoteform label { color:#1f4d7a; font-weight:700; font-size:1.18rem; margin-bottom:12px; display:block; line-height:1.3; }
.ucv2-quote-body #quoteform .form-control,
.ucv2-quote-body #quoteform input[type="text"],
.ucv2-quote-body #quoteform input[type="number"],
.ucv2-quote-body #quoteform input[type="email"],
.ucv2-quote-body #quoteform input[type="date"],
.ucv2-quote-body #quoteform select,
.ucv2-quote-body #quoteform textarea {
    background:#fff !important; color:#1f4d7a !important;
    border:1px solid #d8dbe0 !important; border-radius:8px !important;
    padding:20px 22px !important; height:auto !important; min-height:64px !important; font-size:1.25rem !important;
    transition:border-color .15s, box-shadow .15s;
}
.ucv2-quote-body #quoteform .form-control:focus,
.ucv2-quote-body #quoteform input:focus,
.ucv2-quote-body #quoteform select:focus {
    border-color:#337ab7 !important; box-shadow:0 0 0 3px rgba(51,122,183,.18) !important; outline:none;
}

/* Submit button — full-width gold CTA */
.ucv2-quote-body #quoteform .btn-base-bg,
.ucv2-quote-body #quoteform button[type="submit"],
.ucv2-quote-body #quoteform input[type="submit"]{
    background:linear-gradient(135deg,#dfca8b 0%,#c9a94f 100%) !important;
    border:none !important; color:#1f4d7a !important;
    font-weight:900 !important; letter-spacing:.06em; text-transform:uppercase;
    box-shadow:0 10px 26px rgba(201,169,79,.45);
    width:100% !important; display:block !important;
    padding:26px 32px !important; font-size:1.4rem !important; border-radius:10px !important;
    min-height:72px !important;
    margin-top:10px;
}
.ucv2-quote-body #quoteform .btn-base-bg:hover,
.ucv2-quote-body #quoteform button[type="submit"]:hover { transform:translateY(-1px); }
.ucv2-quote-body #quoteform .row.clearfix > div:has(button[type="submit"]),
.ucv2-quote-body #quoteform .row.clearfix > div:has(input[type="submit"]) {
    width:100% !important; max-width:100% !important; flex:0 0 100% !important;
}

/* Google Maps autocomplete dropdown — float above everything */
.pac-container { z-index:99999 !important; border-radius:6px; box-shadow:0 12px 30px rgba(0,0,0,.18); border:1px solid #d8dbe0; }

/* Constrain bundled containers so the card owns its width */
.ucv2-quote-body #quoteform,
.ucv2-quote-body .booking-form,
.ucv2-quote-body .booking-form .container,
.ucv2-quote-body #quoteform .container { width:100% !important; max-width:100% !important; padding:0 !important; }

/* ---- Side-by-side form (left) + map (right) ---- */
.ucv2-quote-body .container > .row {
    display:flex !important;
    flex-wrap:nowrap !important;
    flex-direction:row !important;
    gap:24px !important;
    align-items:stretch !important;
    margin:0 !important;
    padding:0 18px !important;
}
.ucv2-quote-body .container > .row > .formlass {
    flex:1.1 1 0 !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    float:none !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
}
.ucv2-quote-body .container > .row > .formlass > .booking-form {
    flex:1 !important;
    display:flex !important;
    flex-direction:column !important;
}
.ucv2-quote-body .container > .row > .formlass > .booking-form > div {
    flex:1 !important;
    display:flex !important;
    flex-direction:column !important;
}
.ucv2-quote-body .container > .row > .formlass .inner-form {
    flex:1 !important;
}
.ucv2-quote-body .container > .row > .formlass .tabcontent {
    flex:1 !important;
    flex-direction:column !important;
}
.ucv2-quote-body .container > .row > .formlass .fleet-form {
    flex:1 !important;
    display:flex !important;
    flex-direction:column !important;
}
.ucv2-quote-body .container > .row > .mapclass {
    flex:1 1 0 !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    float:none !important;
    padding:0 !important;
    margin:0 !important;
}
.ucv2-quote-body .row.clearfix { margin:0 -6px !important; }
.ucv2-quote-body .row.clearfix > [class*="col-"] { padding:0 8px !important; margin-bottom:24px !important; }

/* Map clipped to rounded card edge */
.ucv2-quote-body .mapclass {
    display:flex !important; flex-direction:column !important;
    overflow:hidden !important;
    border-radius:10px !important;
    max-width:100% !important;
    box-sizing:border-box !important;
}
.ucv2-quote-body .mapclass .mapcontainer {
    width:100% !important; max-width:100% !important; height:100% !important;
    overflow:hidden !important;
    border-radius:10px !important;
    box-sizing:border-box !important;
}
.ucv2-quote-body .mapclass .mapcontainer > .row {
    margin:0 !important; height:100% !important;
    width:100% !important; max-width:100% !important;
    overflow:hidden !important;
}
.ucv2-quote-body #map.map_wrapper,
.ucv2-quote-card #map,
.ucv2-quote-card [id*="map"] {
    width:100% !important; max-width:100% !important;
    height:100% !important; min-height:460px !important;
    margin-top:0 !important;
    border-radius:10px !important;
    border:1px solid #e2e6ee !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    /* Prevent flicker during map init by reserving space */
    contain:layout style;
}

/* Mobile: stack form on top, map below */
@media (max-width:768px){
    .ucv2-quote-body .container > .row { flex-direction:column !important; padding:0 !important; gap:12px !important; }
    .ucv2-quote-body .container > .row > .formlass { width:100% !important; min-width:100% !important; max-width:100% !important; flex:none !important; padding:0 !important; }
    .ucv2-quote-body .container > .row > .mapclass { width:100% !important; min-width:100% !important; max-width:100% !important; flex:none !important; padding:0 !important; min-height:auto !important; }
    .ucv2-quote-body #map.map_wrapper,
    .ucv2-quote-card #map,
    .ucv2-quote-card [id*="map"] { min-height:250px !important; height:250px !important; }
    .ucv2-quote-body { padding:10px 10px 16px !important; }
    .ucv2-quote-body .booking-form { padding:4px 0 0 !important; }
    .ucv2-quote-body .inner-form.row { padding:0 !important; }
    .ucv2-quote-body .row.clearfix > [class*="col-"] { flex:0 0 100% !important; max-width:100% !important; width:100% !important; margin-bottom:12px !important; }
    .ucv2-quote-head { padding:18px 18px; flex-direction:column; align-items:stretch; }
    .ucv2-quote-head h2 { font-size:1.35rem; }
    .ucv2-quote-head .sub { font-size:.95rem; }
    /* 2026-04-23: on mobile, badges form a centered horizontal row ABOVE the
       quote form (below the head copy). No overlay — plenty of space below. */
    .ucv2-quote-head .badges {
        display:flex;
        flex-direction:row;
        justify-content:center;
        width:100%;
        margin-top:12px;
        gap:10px;
    }
    .ucv2-quote-head .badge { padding:10px 18px; font-size:.9rem; }
    /* Slightly smaller form controls on mobile, but still comfortably tappable */
    .ucv2-quote-body #quoteform .form-control,
    .ucv2-quote-body #quoteform input[type="text"],
    .ucv2-quote-body #quoteform select,
    .ucv2-quote-body #quoteform textarea,
    .ucv2-quote-body #quoteformmd .form-control,
    .ucv2-quote-body #quoteformmd input[type="text"],
    .ucv2-quote-body #quoteformmd select {
        padding:15px 16px !important; font-size:1.1rem !important; min-height:56px !important;
    }
    .ucv2-quote-body #quoteform label,
    .ucv2-quote-body #quoteformmd label { font-size:1.08rem !important; margin-bottom:8px !important; }
    .ucv2-quote-body #quoteform button[type="submit"],
    .ucv2-quote-body #quoteform .btn-base-bg,
    .ucv2-quote-body #quoteformmd button[type="submit"] {
        padding:20px 24px !important; font-size:1.2rem !important; min-height:62px !important;
    }
    .ucv2-quote-body .mdtab .tablinks { padding:12px 22px; font-size:.98rem; }
}

/* ---- Hourly / Multi Day tab pills ---- */
.ucv2-quote-body .mdtab {
    display:flex; gap:10px; padding:0 4px 18px;
    border-bottom:1px solid #eef0f3; margin-bottom:18px;
}
.ucv2-quote-body .mdtab .tablinks {
    background:#f1f4f9; color:#1f4d7a; border:1px solid #e2e6ee;
    padding:16px 38px; border-radius:999px; font-weight:800;
    text-transform:uppercase; letter-spacing:.06em; font-size:1.08rem; cursor:pointer;
    transition:all .15s ease;
}
.ucv2-quote-body .mdtab .tablinks:hover { background:#e8f0fb; color:#286090; }
.ucv2-quote-body .mdtab .tablinks.active {
    background:linear-gradient(135deg,#337ab7,#286090); color:#fff; border-color:#286090;
    box-shadow:0 6px 16px rgba(51,122,183,.3);
}

/* ---- Hide native +/- spinner buttons + bare number inputs (replaced by selects via JS) ---- */
.ucv2-quote-body .custom_buttons .plusminus_button { display:none !important; }
.ucv2-quote-body input[name="passengers"],
.ucv2-quote-body input[name="num_hours"] { display:none !important; }
.ucv2-quote-body .ucv2-replace-select.form-control {
    display:block !important; width:100% !important;
    appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%231f4d7a' d='M6 8L0 0h12z'/></svg>");
    background-repeat:no-repeat;
    background-position:right 12px center;
    padding-right:32px;
}

/* ---- Hide orphaned decorative Font Awesome icons inside the form
   (multiday tab leaves chevron/clock icons dangling outside their wrappers) ---- */
.ucv2-quote-body .fleet-form .icon,
.ucv2-quote-body .fleet-form .fas,
.ucv2-quote-body .fleet-form .far { display:none !important; }