/* "Plan Your Trip" inquiry popup — redesigned UI/UX (BI popup replacement).
   All rules are scoped under .bit-overlay so they can't leak into/be leaked
   into by the rest of the site's (partly Bootstrap-based) styles. Ported
   verbatim from plan-your-trip-popup.html except: (1) the overlay defaults to
   display:none and only shows via .is-open — the source file was a standalone
   demo page that started pre-opened, which doesn't apply once this is a real
   triggered popup; (2) an .intl-tel-input restyle block was added at the end
   since this popup keeps the site's existing intlTelInput phone widget
   instead of the demo's plain country-code <select>. */
.bit-overlay{
  --ink:#222;
  --ink-soft:#555;
  --rail-1:#2e2b27;
  --rail-2:#181613;
  --marigold:#aa8453;
  --marigold-deep:#8a6e49;
  --rose:#ab8a62;
  --ivory:#f8f5f0;
  --paper:#ffffff;
  --line:#e6e1d8;
  --muted:#666;
  --err:#c2452d;
  --shadow:0 40px 90px rgba(0,0,0,.5);
  --fd:"Gilda Display",serif;
  --fc:"Barlow Condensed",sans-serif;
  --fb:"Barlow",sans-serif;
}
/* component-scoped reset: neutralises Bootstrap/site element styles inside the popup */
.bit-overlay,.bit-overlay *,.bit-overlay *::before,.bit-overlay *::after{
  box-sizing:border-box;margin:0;padding:0;
  letter-spacing:normal;text-transform:none;
}
.bit-overlay{
  position:fixed !important;inset:0 !important;z-index:99999 !important;
  /* visibility:hidden, not display:none — #phone must stay laid out (non-zero size)
     even while the popup is closed. The ITP page's intl-tel-input build lazily
     self-inits on the page's first scroll/mousemove/touchstart/keydown, and on
     touch devices the very tap that opens this popup fires touchstart before the
     click that adds .is-open — so intl-tel-input can measure #phone while it's
     still display:none, permanently breaking its dropdown positioning (country
     list silently not showing, worse on some devices' touch/click event timing
     than others). visibility:hidden keeps it measurable without being visible or
     interactive. */
  display:grid !important;visibility:hidden !important;place-items:center;padding:24px;
  background:rgba(22,18,13,.62);
  font-family:var(--fb);font-size:16px;line-height:normal;
  color:var(--ink);text-align:left;letter-spacing:normal;
  -webkit-font-smoothing:antialiased;
}
.bit-overlay.is-open{visibility:visible !important}
.bit-overlay button,.bit-overlay input,.bit-overlay select,.bit-overlay textarea{
  font-family:inherit;line-height:inherit;text-transform:none;
  border-radius:0;box-shadow:none;background-image:none;
}
.bit-overlay img{max-width:none;border:0}
.bit-overlay label{margin:0;font-weight:inherit}

/* ============ shell ============ */
.bit-trip-modal{
  width:min(620px,100%);
  max-height:min(92vh, 780px);
  background:var(--ivory);
  border-radius:20px;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  overflow:hidden;position:relative;
}
@media (prefers-reduced-motion:no-preference){
  .bit-trip-modal{animation:bit-pop .5s cubic-bezier(.22,1,.36,1)}
  @keyframes bit-pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
}
.bit-close-x{
  position:absolute;top:16px;right:16px;z-index:9;
  width:34px;height:34px;border:none !important;border-radius:50% !important;
  background:#fff;color:var(--ink) !important;box-shadow:0 2px 10px rgba(34,34,34,.15) !important;
  cursor:pointer;
  transition:transform .2s, background .2s, box-shadow .2s;
  display:flex;align-items:center;justify-content:center;
}
.bit-close-x svg{width:14px;height:14px}
.bit-close-x:hover{
  background:var(--ivory);color:var(--marigold-deep) !important;
  transform:scale(1.08);box-shadow:0 6px 16px rgba(34,34,34,.22) !important;
}
.bit-close-x:focus-visible{outline:2px solid var(--marigold);outline-offset:2px}

/* brand eyebrow (pane header) */
.bit-brand-eyebrow{
  font-family:var(--fc);
  font-size:13px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--marigold-deep);font-weight:600;margin-bottom:8px;
}

/* ============ right pane ============ */
.bit-pane{display:flex;flex-direction:column;min-width:0;min-height:0;flex:1;position:relative}
.bit-pane form{display:flex;flex-direction:column;flex:1;min-height:0}
.bit-pane-top{
  padding:20px 44px 0;
}
.bit-crumb{
  display:flex;align-items:center;gap:10px;
  font-family:var(--fc);
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--marigold-deep);font-weight:600;
}
.bit-crumb .bit-bar{
  flex:1;height:3px;border-radius:99px;background:#e8e3da;overflow:hidden;max-width:120px;
}
.bit-crumb .bit-bar i{display:block;height:100%;width:50%;background:var(--marigold);border-radius:99px;transition:width .4s cubic-bezier(.22,1,.36,1)}
.bit-pane h3{font-family:var(--fd) !important;font-weight:400 !important;font-size:24px !important;color:var(--ink) !important;margin:8px 0 2px !important;letter-spacing:normal !important}
.bit-pane .bit-sub{font-size:14px;color:var(--muted);margin-bottom:2px}

.bit-pane-scroll{
  overflow-y:auto;padding:10px 44px 12px;flex:1;min-height:0;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:#d5cec2 transparent;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 18px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 18px),transparent 100%);
}

.bit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 14px}
.bit-span2{grid-column:span 1}
.bit-span3{grid-column:1 / -1}
.bit-field label{
  display:block;font-size:12.5px !important;font-weight:600 !important;
  letter-spacing:.04em !important;margin:0 0 5px !important;
  color:var(--ink) !important;text-transform:none !important;line-height:normal !important;
}
.bit-field label .req{color:var(--marigold-deep)}
.bit-control{
  width:100%;height:44px !important;padding:0 13px !important;
  font:inherit;font-size:14.5px !important;color:var(--ink) !important;
  letter-spacing:normal !important;text-transform:none !important;
  background:var(--paper) !important;border:1px solid var(--line) !important;border-radius:10px !important;
  transition:border-color .2s, box-shadow .2s;
}
textarea.bit-control{height:86px !important;padding:11px 13px !important;resize:vertical}
.bit-control::placeholder{color:#adadad}
.bit-control:hover{border-color:#cfc7ba}
/* Browser autofill (name/email are the common triggers) paints its own blue/yellow
   background ignoring our styling — override with an inset shadow matching our own
   background so autofilled fields stay visually consistent with the rest of the form. */
.bit-control:-webkit-autofill,
.bit-control:-webkit-autofill:hover,
.bit-control:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink) !important;
  -webkit-box-shadow:0 0 0 1000px var(--paper) inset !important;
  transition:background-color 5000s ease-in-out 0s;
}
.bit-control:focus{outline:none;border-color:var(--marigold) !important;box-shadow:0 0 0 3px rgba(170,132,83,.18) !important}
select.bit-control{
  appearance:none;cursor:pointer;
  /* !important needed: .bit-control's `background:var(--paper) !important` shorthand
     above implicitly resets background-image to none !important too, which a plain
     (non-important) background-image here can never win against — that's why the
     dropdown chevron wasn't showing on any <select class="bit-control">. */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23222222' stroke-width='1.5'/></svg>") !important;
  background-repeat:no-repeat !important;background-position:right 13px center !important;padding-right:34px;
}
/* ---- custom themed dropdown for age group / budget — replaces the native <select> popup,
   since its open option-list is OS-rendered and Chrome/Edge won't let CSS restyle its
   hover/selected highlight (stays system blue) no matter what's set on <option>. The
   original <select> stays in the DOM (hidden) as the real form field; see enhanceSelect()
   in inquiry-btn.blade.php. ---- */
.bit-dropdown{position:relative}
.bit-dd-native{position:absolute !important;opacity:0 !important;pointer-events:none !important;height:1px !important;width:1px !important;overflow:hidden !important;padding:0 !important;border:0 !important}
.bit-dd-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  text-align:left;cursor:pointer;
}
.bit-dd-trigger .bit-dd-chev{width:10px;height:7px;flex:none;margin-left:8px;transition:transform .2s;color:var(--ink)}
.bit-dd-trigger[aria-expanded="true"] .bit-dd-chev{transform:rotate(180deg)}
.bit-dd-trigger[aria-expanded="true"]{border-color:var(--marigold) !important;box-shadow:0 0 0 3px rgba(170,132,83,.18) !important}
/* position:fixed + appended directly to .bit-overlay (see enhanceSelect() in
   inquiry-btn.blade.php) rather than absolute inside .bit-dropdown — the modal
   (.bit-trip-modal) has overflow:hidden for its rounded corners, and its inner scroll area
   (.bit-pane-scroll) has overflow-y:auto plus a fade mask, so an absolutely-positioned list
   nested inside either one gets clipped/faded long before it reaches its own bottom option.
   A native <select>'s popup avoids this because the OS renders it as a top-level layer
   outside the page's DOM/overflow rules; this recreates that by "portaling" the list up to
   .bit-overlay (a sibling of .bit-trip-modal) and positioning it via the trigger's viewport
   rect. Deliberately NOT document.body — .bit-overlay is where --paper/--marigold/etc are
   defined as CSS custom properties (and where the tours/blog page-theme classes/overrides
   live), and those don't inherit outside it. */
.bit-dd-list{
  display:none;position:fixed;z-index:20;
  max-height:230px;overflow-y:auto;list-style:none;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.16);padding:6px;
}
.bit-dd-list.is-open{display:block}
/* display:block/width/float/margin all forced !important: the tours page's own
   webtheme/tours-page-resources/css/style.css has an unscoped `ul li{display:inline-block}`
   rule that otherwise wins by default (this file never contested `display` on the item
   before), which is what wrapped the options into a 3-per-row grid instead of a stacked list. */
.bit-dd-list li{
  display:block !important;width:100% !important;float:none !important;margin:0 !important;
  padding:9px 12px;border-radius:8px;font-size:14px;cursor:pointer;transition:background .15s,color .15s;
}
.bit-dd-list li:hover,.bit-dd-list li.is-active{background:var(--ivory)}
.bit-dd-list li.is-selected{background:var(--marigold);color:#fff}
.bit-dd-list li.is-selected.is-active{background:var(--marigold-deep)}

/* themed calendar for Tour Start Date — see enhanceDateField() in inquiry-btn.blade.php */
.bit-date-trigger .bit-dd-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bit-date-trigger.bit-date-empty .bit-dd-value{color:#adadad}
.bit-date-icon{width:15px;height:15px;flex:none;margin-left:8px;color:var(--marigold-deep)}
.bit-cal-panel{
  display:none;position:fixed;z-index:20;width:272px;max-width:calc(100vw - 32px);
  background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.16);padding:12px;
}
.bit-cal-panel.is-open{display:block}
.bit-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.bit-cal-label{font-family:var(--fc);font-weight:600;font-size:13.5px;letter-spacing:.03em;color:var(--ink)}
.bit-cal-nav{
  width:26px;height:26px;border:none;border-radius:50%;background:transparent;
  display:grid;place-items:center;cursor:pointer;color:var(--ink-soft,var(--muted));
  transition:background .15s,color .15s;
}
.bit-cal-nav svg{width:7px;height:11px}
.bit-cal-nav:hover{background:var(--ivory);color:var(--marigold-deep)}
.bit-cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:2px}
.bit-cal-weekdays span{
  font-size:10.5px;font-weight:600;text-align:center;color:var(--muted);
  letter-spacing:.03em;padding-bottom:6px;
}
.bit-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.bit-cal-day{
  aspect-ratio:1;border:none;border-radius:8px;background:transparent;
  font:inherit;font-size:12.5px;color:var(--ink);cursor:pointer;
  display:grid;place-items:center;transition:background .15s,color .15s;
}
.bit-cal-day:hover:not(:disabled){background:var(--ivory)}
.bit-cal-day.is-out{color:#c9c2b5}
.bit-cal-day.is-today{box-shadow:inset 0 0 0 1.5px var(--marigold)}
.bit-cal-day.is-selected{background:var(--marigold) !important;color:#fff;font-weight:600}
.bit-cal-day.is-disabled,.bit-cal-day:disabled{color:#d8d2c6;cursor:not-allowed}
.bit-cal-day.is-disabled.is-out,.bit-cal-day:disabled.is-out{color:#e6e1d8}

.bit-phone-merged{
  position:relative;
  display:flex;align-items:stretch;height:44px;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  transition:border-color .2s, box-shadow .2s;
  /* NOT overflow:hidden — intlTelInput's .country-list dropdown is position:absolute
     and needs to overflow below this field; the demo had overflow:hidden here only to
     square off its (now-removed) manual select+divider layout. */
}
.bit-phone-merged:hover{border-color:#cfc7ba}
.bit-phone-merged:focus-within{border-color:var(--marigold);box-shadow:0 0 0 3px rgba(170,132,83,.18)}
.bit-field.invalid .bit-phone-merged{border-color:var(--err);box-shadow:0 0 0 3px rgba(194,69,45,.12)}

.bit-err-msg{display:none !important} /* errors now surface as a single footer alert */
.bit-field.invalid .bit-control{border-color:var(--err) !important;box-shadow:0 0 0 3px rgba(194,69,45,.12) !important}
.bit-field.invalid .bit-pick-card input:not(:checked) + .bit-card{border-color:var(--err)}
.bit-hide{display:none !important}
.bit-err-note{
  display:none;position:absolute;top:1px;right:0;
  font-size:11.5px;font-weight:500;color:var(--err);
  max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:help;
}
.bit-field.invalid .bit-err-note{display:block}
/* #destination-field has no <label> row for the note to sit beside — drop it below the grid instead */
#destination-field .bit-err-note{
  position:static;margin-top:8px;text-align:left;
  max-width:100%;white-space:normal;overflow:visible;text-overflow:clip;
}
.bit-overlay .bit-sub.bit-suberr{color:var(--err) !important}
.bit-field{position:relative}
.bit-valid-tick{
  display:none;position:absolute;right:12px;bottom:13px;
  width:16px;height:16px;color:var(--marigold);pointer-events:none;
}
/* SVGs are inline-level replaced elements by default (like <img>) and get baseline
   vertical-align, which leaves a few px gap below the glyph inside its box — that gap,
   not the container's own centering, is what made the tick look vertically off. */
.bit-valid-tick svg{display:block}
.bit-phone-merged .bit-valid-tick{bottom:auto;top:50%;transform:translateY(-50%)}
.bit-field.valid .bit-valid-tick{display:block}
.bit-field.valid .bit-control,
.bit-field.valid .bit-phone-merged{border-color:var(--marigold) !important}
@media (max-width:820px){ .bit-valid-tick{bottom:17px} }

.bit-sect{margin-top:11px}
.bit-sect > label{display:block;font-size:12.5px !important;font-weight:600 !important;letter-spacing:.04em !important;margin:0 0 8px !important;color:var(--ink) !important;text-transform:none !important}

/* accommodation cards */
.bit-cards-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bit-pick-card{position:relative;display:block}
.bit-pick-card input{position:absolute !important;opacity:0 !important;pointer-events:none !important;width:1px !important;height:1px !important;border:0 !important}
.bit-pick-card .bit-card{
  display:block;padding:11px 15px;border-radius:12px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--paper);
  transition:border-color .2s, box-shadow .2s, transform .2s;position:relative;
}
.bit-pick-card .bit-card:hover{border-color:#cfc7ba;transform:translateY(-1px)}
.bit-pick-card .bit-t{font-weight:600;font-size:14.5px}
.bit-pick-card .bit-stars{color:var(--marigold);font-size:12px;letter-spacing:2.5px;display:block;margin-top:2px}
.bit-pick-card .bit-d{font-size:12.5px;color:var(--muted);display:block;margin-top:5px;line-height:1.45}
.bit-pick-card .bit-mark{
  position:absolute;top:12px;right:12px;width:19px;height:19px;border-radius:50%;
  border:2px solid var(--line);transition:all .2s;display:grid;place-items:center;color:transparent;
}
.bit-pick-card .bit-mark svg{width:10px;height:10px}
.bit-pick-card input:checked + .bit-card{
  border-color:var(--marigold);background:#fffdf6;
  box-shadow:0 8px 22px rgba(138,110,73,.14);
}
.bit-pick-card input:checked + .bit-card .bit-mark{
  border-color:var(--marigold);background:var(--marigold);color:#fff;
}
.bit-pick-card input:focus-visible + .bit-card{outline:2px solid var(--marigold);outline-offset:2px}

/* interest chips */
.bit-chips{display:flex;flex-wrap:wrap;gap:9px}
.bit-chip{position:relative}
.bit-chip input{position:absolute !important;opacity:0 !important;pointer-events:none !important;width:1px !important;height:1px !important;border:0 !important}
.bit-chip span{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--paper);
  font-size:13.5px;transition:all .18s;user-select:none;
}
.bit-chip span:hover{border-color:#cfc7ba}
.bit-chip .bit-plus{font-size:14px;color:var(--marigold-deep);line-height:1;transition:transform .2s}
.bit-chip input:checked + span{border-color:var(--ink);background:var(--ink);color:#f4f1ea}
.bit-chip input:checked + span .bit-plus{transform:rotate(45deg);color:var(--marigold)}
.bit-chip input:focus-visible + span{outline:2px solid var(--marigold);outline-offset:2px}

/* destination tiles (compact) */
.bit-dest-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bit-dest-grid .bit-pick-card{display:flex}
.bit-dest-grid .bit-card{
  display:flex;align-items:center;width:100%;
  padding:13px 42px 13px 15px;
}
.bit-dest-grid .bit-t{font-size:14px}
.bit-dest-grid .bit-mark{top:50%;transform:translateY(-50%);right:12px;border-radius:6px}
.bit-dest-grid input:checked + .bit-card{border-color:var(--marigold);background:#fdfbf6}

/* footer */
.bit-pane-footer{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 44px 15px;border-top:1px solid var(--line);background:var(--ivory);
}
.bit-hint{font-size:12.5px;color:var(--muted)}
.bit-btn{
  font:inherit;font-weight:600 !important;font-size:14px !important;letter-spacing:.05em !important;
  border:none !important;border-radius:999px !important;cursor:pointer;
  padding:13px 28px !important;line-height:normal !important;text-transform:none !important;
  transition:all .2s;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.bit-btn-primary{background:var(--marigold) !important;color:#fff !important;box-shadow:0 6px 18px rgba(170,132,83,.35)}
.bit-btn-primary:hover{background:var(--marigold-deep) !important;transform:translateY(-1px)}
.bit-btn-ghost{background:transparent !important;color:var(--ink) !important;border:1.5px solid var(--line) !important}
.bit-btn-ghost:hover{border-color:var(--ink)}
.bit-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.bit-btn:active{transform:scale(.97)}
.bit-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;pointer-events:none}

.bit-form-step{display:none}
.bit-form-step.is-visible{display:block}
@media (prefers-reduced-motion:no-preference){
  .bit-form-step.is-visible{animation:bit-stepIn .38s cubic-bezier(.22,1,.36,1)}
  @keyframes bit-stepIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
}
.honeypot{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* ---- button loading spinner ---- */
.bit-btn .bit-spin{
  display:none;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:bit-rot .7s linear infinite;
}
@keyframes bit-rot{to{transform:rotate(360deg)}}
.bit-btn.is-loading{pointer-events:none;opacity:.85}
.bit-btn.is-loading .bit-spin{display:inline-block}
.bit-btn.is-loading .bit-lbl-arrow{display:none}

/* ============ mobile ============ */
@media (max-width:820px){
  .bit-overlay{padding:0}
  .bit-trip-modal{border-radius:0;width:100%;max-height:none;height:100dvh}
  .bit-close-x{top:12px;right:12px}
  .bit-pane-top{padding:16px 20px 0}
  .bit-pane h3{font-size:21px;margin:8px 0 2px}
  .bit-pane .bit-sub{font-size:13px;margin-bottom:4px}
  .bit-pane-scroll{padding:12px 20px 16px}
  .bit-pane-footer{padding:10px 16px calc(12px + env(safe-area-inset-bottom));gap:10px}
  .bit-control,.bit-phone-merged input{font-size:16px !important}
  .bit-control{height:48px !important}
  textarea.bit-control{height:96px !important}
  .bit-phone-merged{height:48px !important}
  .bit-chip span{padding:9px 14px;font-size:14px}
  .bit-grid{grid-template-columns:1fr;gap:11px}
  .bit-span2,.bit-span3,.bit-g-half{grid-column:1 / -1}
  .bit-cards-2{grid-template-columns:1fr 1fr}
  .bit-dest-grid{grid-template-columns:1fr;gap:9px}
  .bit-dest-grid .bit-card{padding:14px 42px 14px 15px}
  .bit-hint{display:none}
  .bit-pane-footer > div:last-child{width:100%;display:flex}
  .bit-pane-footer .bit-btn{flex:1;justify-content:center;padding:15px 20px}
}

/* ============ existing intlTelInput widget, restyled to sit inside .bit-phone-merged ============
   This popup keeps the site's existing intlTelInput plugin (full country list, geo-IP
   detection, phone-rules.js digit validation) rather than the demo's plain country-code
   <select> — see .bit-phone-merged usage in inquiry-btn.blade.php. intlTelInput injects
   its own .intl-tel-input wrapper + .selected-flag button (showing the dial code text,
   since the library defaults to separateDialCode:true) around the #phone input.

   Deliberately NOT overriding padding-left/width on the input or .selected-flag here:
   the library sizes those itself per dial-code digit count via its own
   .iti-sdc-2/-3/-4/-5 classes (e.g. 2-digit "+91" needs less room than 3-digit "+971"),
   and a fixed value here fights that and misaligns whenever the selected country's
   dial-code length differs — which is exactly what caused the phone digits to overlap
   the "+91" label. Only cosmetic properties that don't affect that positioning are set. */
.bit-phone-merged .intl-tel-input{display:block;width:100%;height:100%}
.bit-phone-merged input.bit-phone-input{
  width:100%;height:100% !important;border:none !important;background:transparent !important;
  font:inherit;font-size:14.5px !important;color:var(--ink) !important;
  box-shadow:none !important;
  /* border-radius:10px on .bit-phone-merged is on the *wrapper*; it can't be overflow:hidden
     (the country dropdown needs to overflow below it), so the input's own square corners were
     visible under mobile autofill's opaque fill. Matching radius here on the input itself fixes
     that regardless of the wrapper's overflow setting. */
  border-radius:9px;
}
.bit-phone-merged input.bit-phone-input::placeholder{color:#adadad}
.bit-phone-merged input.bit-phone-input:focus{outline:none;box-shadow:none}
.bit-phone-merged input.bit-phone-input:-webkit-autofill,
.bit-phone-merged input.bit-phone-input:-webkit-autofill:hover,
.bit-phone-merged input.bit-phone-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink) !important;
  -webkit-box-shadow:0 0 0 1000px var(--paper) inset !important;
  transition:background-color 5000s ease-in-out 0s;
}
.bit-phone-merged .selected-flag{height:100% !important;background:transparent !important}
/* .iti-arrow sits position:absolute;right:6px regardless of dial-code text length, and
   .selected-dial-code (a table-cell) has no reserved right-side gap by default — fine
   for 2-digit codes (+91) but 3-digit codes (+355 etc.) run right up against the arrow.
   padding-right guarantees clearance no matter the digit count. */
.bit-phone-merged .selected-dial-code{color:var(--ink);padding-right:12px}
.bit-phone-merged .flag-container{height:100%}
.bit-phone-merged .country-list{font-family:var(--fb);font-size:14px;z-index:5}

/* tours page loads a different intlTelInput build (v17, BEM classes) — mirror same styling */
.bit-phone-merged .iti{display:block;width:100%;height:100%}
.bit-phone-merged .iti__selected-flag{height:100% !important;background:transparent !important}
.bit-phone-merged .iti__selected-dial-code{color:var(--ink);margin-right:4px}
.bit-phone-merged .iti__flag-container{height:100%}
.bit-phone-merged .iti__country-list{font-family:var(--fb);font-size:14px;z-index:5}

/* soften the flag + swap the stock triangle arrow for a themed chevron (mask-image) */
/* .bit-phone-merged isn't overflow:hidden (see above), so the flag box's own hover
   background needs matching rounded corners on its left edge — otherwise the wrapper's
   rounded corner shows a square notch poking out from this box underneath it on hover. */
.bit-phone-merged .selected-flag,
.bit-phone-merged .iti__selected-flag{border-top-left-radius:9px;border-bottom-left-radius:9px}
.bit-phone-merged .selected-flag:hover,
.bit-phone-merged .iti__selected-flag:hover{background:var(--ivory) !important}
/* border-radius was 4px — on an ~11px-tall flag icon that clips ~36% of each corner,
   which for flags with detail packed into a corner (e.g. the US canton's stars, top-left)
   can look like smudged/lost detail rather than a soft rounded corner. Dropped to 1.5px:
   still visibly rounded on the icon's straight edges, clips far less of the corner art. */
.bit-phone-merged .iti-flag,
.bit-phone-merged .iti__flag{border-radius:1.5px;box-shadow:0 0 0 1px var(--line)}
.bit-phone-merged .iti-arrow,
.bit-phone-merged .iti__arrow{
  border:none !important;width:9px !important;height:6px !important;margin-top:-3px;
  background-color:var(--ink-soft,var(--muted));
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  transition:transform .2s;
}
.bit-phone-merged .iti-arrow.up,
.bit-phone-merged .iti__arrow--up{transform:rotate(180deg)}
.bit-phone-merged .iti__divider,
.bit-phone-merged .divider{border-bottom-color:var(--line) !important}
/* tours page's global `ul li{display:inline-block}` collapses the empty divider <li> */
.bit-phone-merged .iti__country-list li,
.bit-phone-merged .country-list li{
  display:block !important;width:100% !important;float:none !important;margin:0 !important;
}
.bit-phone-merged .iti__country.iti__highlight,
.bit-phone-merged .country.highlight{background-color:var(--ivory) !important}
/* round the list panel to match .bit-dd-list instead of the library's stock square box */
.bit-phone-merged .iti__country-list,
.bit-phone-merged .country-list{
  border-radius:12px !important;
  border-color:var(--line) !important;
  box-shadow:0 16px 40px rgba(0,0,0,.16) !important;
  padding:6px !important;
}
.bit-phone-merged .iti__country,
.bit-phone-merged .country{border-radius:8px !important}

/* On mobile UA (real phones + Safari's device UA override), the tours-page intl-tel-input
   build (v17) auto-switches to "mobile mode": it detaches its dropdown from #phone and
   re-appends it as .iti--container directly under <body>, as a SIBLING of .bit-overlay
   rather than a descendant. .iti--container's own z-index (1060, from intlTelInput.css)
   is far below .bit-overlay's 99999, so the popup's own backdrop always paints over the
   country list — it's there (not display:none) but permanently hidden underneath. Can't
   scope this under .bit-overlay since it's not nested inside it once detached — and for
   the same reason none of the .bit-phone-merged-scoped restyling above (rounded corners,
   shadow, theme colors) reaches it either, nor can it use .bit-overlay's --ink/--paper/etc
   custom properties (no inheritance across sibling subtrees), hence the hardcoded colors
   below instead of var(--paper) etc. — matches the *base* theme only, not page-specific
   .bit-theme-tours/.bit-theme-blog overrides, since only the ITP page hits this today. */
.iti--container{z-index:100000 !important}
.iti-mobile .iti--container{
  top:16px !important;bottom:16px !important;left:16px !important;right:16px !important;
  border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.iti-mobile .iti__country-list{
  position:static !important;width:100% !important;height:100% !important;
  max-height:none !important;border:none !important;box-shadow:none !important;margin:0 !important;
  border-radius:0 !important;background:#fff;padding:8px !important;
  font-family:"Barlow",sans-serif;font-size:15px;color:#222;
}
.iti-mobile .iti__country{border-radius:10px !important;padding:12px 10px !important}
.iti-mobile .iti__country.iti__highlight{background-color:#f8f5f0 !important}
.iti-mobile .iti__dial-code{color:#666}
.iti-mobile .iti__divider{border-bottom:1px solid #d8d2c4 !important;padding-bottom:8px;margin-bottom:8px}

/* Same detach-to-<body> mobile-mode issue on the Homepage/Blog popup's build (the older,
   non-BEM intl-tel-input in webtheme/intl-tel-input/ — class names differ: .iti-container
   (single dash), .country-list, .country, .divider, .dial-code). That build's base
   z-index (100000, in its own intlTelInput.css) is already above .bit-overlay's 99999,
   so it doesn't suffer the hidden-behind-backdrop bug — only the unstyled/oversized
   full-screen box once detached, same as the ITP page. */
.iti-mobile .intl-tel-input.iti-container{
  top:16px !important;bottom:16px !important;left:16px !important;right:16px !important;
  border-radius:16px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.iti-mobile .country-list{
  position:static !important;width:100% !important;height:100% !important;
  max-height:none !important;border:none !important;box-shadow:none !important;margin:0 !important;
  border-radius:0 !important;background:#fff;padding:8px !important;
  font-family:"Barlow",sans-serif;font-size:15px;color:#222;
}
.iti-mobile .country{border-radius:10px !important;padding:12px 10px !important}
.iti-mobile .country.highlight{background-color:#f8f5f0 !important}
.iti-mobile .dial-code{color:#666}
.iti-mobile .divider{border-bottom:1px solid #d8d2c4 !important;padding-bottom:8px;margin-bottom:8px}

/* ===== PAGE THEME: India Tour Packages ===== */
.bit-overlay.bit-theme-tours{
  --marigold:#f19e42;        /* accent orange as rendered on the page */
  --marigold-deep:#17233e;   /* navy — eyebrow, step tag, success icon */
  --accent-rgb:241,158,66;
  --ink:#17233e;             /* navy — headings & text */
  --ink-soft:#3f3f3f;
  --ivory:#f1f1f1;           /* modal background */
  --paper:#fff;
  --line:#cccccc;
  --muted:#777;
}
.bit-overlay.bit-theme-tours .bit-btn-primary{color:#fff !important}
.bit-overlay.bit-theme-tours .bit-btn-primary:hover{background:#e18c2e !important}
.bit-overlay.bit-theme-tours .bit-btn-ghost{
  background:#dcdcdc !important;color:#444 !important;border-color:#dcdcdc !important;
}
.bit-overlay.bit-theme-tours .bit-btn-ghost:hover{background:#cfcfcf !important;border-color:#cfcfcf !important}

/* ===== PAGE THEME: Blog ===== */
/* Fonts only — Jost/Marcellus are already loaded by blog_layout.blade.php, no extra @font-face needed. */
.bit-overlay.bit-theme-blog{
  --fd:"Marcellus",serif;      /* headings — matches blog h1-h6 */
  --fc:"Jost",sans-serif;      /* eyebrow / step label — blog has no condensed face, reuse body font */
  --fb:"Jost",sans-serif;      /* body — matches blog body */
}