/**
 * /plan-my-trip/{id}/ — the trip request form.
 *
 * Public design language, matching /find-a-trip/: the brand faces (Google Sans
 * with Graphik behind), the design-system tokens, left-aligned, 60px of clear
 * air under the navigation. NOT the partner language — no DM Sans, no .ss-btn,
 * which belong to the dashboard.
 */

.smt-wrap {
  --smt-primary: #7700FF;
  --smt-primary-dark: #5C00CC;
  --smt-primary-light: #F0E5FF;
  --smt-primary-ultra: #F8F4FF;
  --smt-text-1: #090902;
  --smt-text-2: #5A5A6E;
  --smt-text-3: #8E8EA0;
  --smt-surface: #FFFFFF;
  --smt-border: #E8E8EE;
  --smt-error: #E5243B;
  --smt-error-light: #FDEAED;
  --smt-shadow: 0 1px 2px rgba(10, 11, 31, .04), 0 12px 32px rgba(10, 11, 31, .05);
  --smt-ease: cubic-bezier(.25, .1, .25, 1);
  --smt-font: "Google Sans", -apple-system,
              BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  font-family: var(--smt-font);
  color: var(--smt-text-1);
}

/* --smt-nav is measured by plan-my-trip.js; the 60px is the clear air. */
.smt-wrap.smt-wrap {
  padding-top: calc(var(--smt-nav, 0px) + 60px) !important;
  padding-bottom: 60px !important;
}

.smt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}

/* ─────────────────────────── the head ─────────────────────────── */

.smt-head { max-width: 640px; margin: 0 0 32px; }

.smt-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--smt-primary);
}

.smt-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  flex: none;
  background: var(--smt-primary);
}

.smt-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
}

.smt-sub {
  margin: 16px 0 0;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--smt-text-2);
}

/* ─────────────────────────── the form ─────────────────────────── */

.smt-form { max-width: 640px; }

.smt-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.smt-field { margin: 0 0 18px; }

.smt-field label {
  display: block;
  margin: 0 0 7px;
  font-size: 15px;
  font-weight: 700;
  color: var(--smt-text-1);
}

.smt-field input,
.smt-field textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--smt-font);
  font-size: 16px;           /* 16px stops iOS zooming the page on focus */
  line-height: 1.4;
  color: var(--smt-text-1);
  background: var(--smt-surface);
  border: 1.5px solid var(--smt-border);
  border-radius: 12px;
  transition: border-color 160ms var(--smt-ease), box-shadow 160ms var(--smt-ease);
  box-sizing: border-box;
}

.smt-field textarea { resize: vertical; min-height: 110px; }

.smt-field input:focus,
.smt-field textarea:focus {
  outline: 0;
  border-color: var(--smt-primary);
  box-shadow: 0 0 0 4px rgba(119, 0, 255, .12);
}

.smt-field input.is-bad,
.smt-field textarea.is-bad {
  border-color: var(--smt-error);
  background: var(--smt-error-light);
}

.smt-help {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--smt-text-3);
}

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and the point is that they fill it in. */
.smt-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.smt-error {
  margin: 0 0 18px;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--smt-error-light);
  color: #B91C2F;
  font-size: 15px;
  line-height: 1.5;
}

.smt-error[hidden] { display: none; }

.smt-btn {
  display: inline-block;
  padding: 17px 40px;
  border: 0;
  border-radius: 9999px;
  background: var(--smt-primary);
  color: #fff;
  font-family: var(--smt-font);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 200ms var(--smt-ease);
}

.smt-btn:hover:not(:disabled),
.smt-btn:focus:not(:disabled) { background: var(--smt-primary-dark); }
.smt-btn:disabled { opacity: .6; cursor: default; }
.smt-btn:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(119, 0, 255, .12); }

.smt-small {
  margin: 16px 0 0;
  font-size: 14.5px;
  color: var(--smt-text-3);
}

/* ─────────────────────────── the thank-you ─────────────────────────── */

.smt-done[hidden] { display: none; }
.smt-done { max-width: 640px; }

.smt-done-title {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.smt-back {
  display: inline-block;
  margin-top: 26px;
  font-size: 15px;
  font-weight: 700;
  color: var(--smt-primary);
  text-decoration: none;
}

.smt-back:hover { color: var(--smt-primary-dark); text-decoration: underline; }

/* ─────────────────────────── the place card ─────────────────────────── */

.smt-card {
  background: var(--smt-surface);
  border: 1px solid var(--smt-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--smt-shadow);
  position: sticky;
  top: 24px;
}

.smt-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--smt-primary-ultra); }
.smt-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.smt-card-body { padding: 18px 20px 22px; }

.smt-card-kind {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--smt-primary);
}

.smt-card-name {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
}

.smt-card-place { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: var(--smt-text-3); }

.smt-card-note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--smt-border);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--smt-text-2);
}

/* ── specificity: the global listing-page paragraph rule lands here too,
   because this page borrows the listing as its queried object. ── */
.smt-wrap .smt-sub { font-size: 16px !important; line-height: 1.6 !important; }
.smt-wrap .smt-help { font-size: 13.5px !important; line-height: 1.5 !important; }
.smt-wrap .smt-small { font-size: 14.5px !important; }
.smt-wrap .smt-eyebrow { font-size: 18px !important; font-weight: 700 !important; padding: 0 !important; }
/* padding-top is pinned for the same reason the error banner's is: the global
   `.single.st-header-9 p { padding: 0 }` lands on this page and would flatten
   the rule above its border. */
.smt-wrap .smt-card-note {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  padding-top: 14px !important;
}
.smt-wrap p.smt-card-name { font-size: 18px !important; font-weight: 600 !important; }
.smt-wrap p.smt-card-place { font-size: 14px !important; line-height: 20px !important; }

@media (max-width: 900px) {
  .smt-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* The place moves above the form on a phone: it is the context for everything
     below it, and a sticky sidebar means nothing on one column. */
  .smt-aside { order: -1; }
  .smt-card { position: static; max-width: 420px; }
}

@media (max-width: 640px) {
  .smt-wrap.smt-wrap { padding-top: calc(var(--smt-nav, 0px) + 40px) !important; }
  .smt-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ─────────────────────────── the phone picker ───────────────────────────
   A picker rather than a plea: asking for "the country code" in helper text
   was ignored, and an unreachable number is a lost traveller. */
.smt-phone {
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  gap: 10px;
}

.smt-wrap .smt-dial {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--smt-font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--smt-text-1);
  background: var(--smt-surface);
  border: 1.5px solid var(--smt-border);
  border-radius: 12px;
  box-sizing: border-box;
  /* The native arrow disappears under a custom radius on some browsers. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238E8EA0' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.smt-wrap .smt-dial:focus {
  outline: 0;
  border-color: var(--smt-primary);
  box-shadow: 0 0 0 4px rgba(119, 0, 255, .12);
}

.smt-wrap .smt-dial.is-bad { border-color: var(--smt-error); background-color: var(--smt-error-light); }

/* ─────────────────────────── the typo suggestion ─────────────────────────── */

.smt-suggest[hidden] { display: none; }

.smt-wrap .smt-suggest {
  margin: 8px 0 0;
  font-size: 14px !important;
  line-height: 1.5;
  color: var(--smt-text-2);
}

.smt-suggest-fix {
  border: 0;
  background: none;
  padding: 0 2px;
  font: inherit;
  font-weight: 700;
  color: var(--smt-primary);
  cursor: pointer;
  text-decoration: underline;
}

.smt-suggest-fix:hover { color: var(--smt-primary-dark); }
.smt-suggest-fix:focus-visible { outline: 2px solid var(--smt-primary); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 520px) {
  .smt-phone { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ─────────────────────────── the service badge ───────────────────────────
   ONE NAMING AND COLOUR SCHEME EVERYWHERE (Chiran 2026-08-14). A hotel is a
   Hotel, not a "Stay", and it carries the same icon and colour it wears in the
   itinerary builder and in a trip story. Tones are the builder's own:
   assets/css/itinerary-builder-redesign.css. */
/* Chiran's values, 2026-08-14. They arrived written against .t-hotel because he
   was looking at a hotel, but the SIZE and WEIGHT belong to every badge — only
   the colour changes by service type. Putting them on the base class is what
   keeps the one-scheme-everywhere rule true; a 12px hotel next to a 12.5px
   activity is the exact inconsistency he asked us to stop. */
.smt-wrap .smt-card-kind {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--smt-primary);
}

.smt-card-kind .svgico {
  width: 16px;
  height: 16px;
  flex: none;
  /* sarisara_ric_svg() emits no width/height — it takes its size from the
     builder's stylesheet, which is not loaded here. Left unsized it expands to
     fill its parent (a 14px icon rendered 300px wide, seen before). */
}

.smt-card-kind.t-hotel    { color: #0050d8; }
.smt-card-kind.t-activity { color: #3c6b52; }
.smt-card-kind.t-curated  { color: #8a6a2f; }
.smt-card-kind.t-custom   { color: #9a4f43; }
.smt-card-kind.t-guide    { color: #7700ff; }


/* ─────────────────────────── padding on our own boxes ───────────────────────
   `.single.st-header-9 p { padding: 0 }` is a GLOBAL rule for body copy on
   listing pages, and this page borrows the listing as its queried object so the
   theme's header works — which drags that rule along. It out-specifies a single
   class, so the error banner and the suggestion computed padding: 0 and the text
   sat flat against the pill (Chiran's image 39; measured 0px against the 13/16
   the stylesheet asked for).

   Any BOX of ours that happens to be a <p> needs its padding restored here.
   Plain sentences are left alone — they should follow the site's rule. */
.smt-wrap p.smt-error {
  padding: 14px 18px !important;
}

.smt-wrap p.smt-suggest,
.smt-wrap p.smt-help,
.smt-wrap p.smt-small {
  padding: 0 !important;   /* explicit: these ARE plain sentences */
}

/* ─────────────────────────── the country dropdown ───────────────────────────
   Sarisara's own, not the browser's: a white panel, the brand face, and a search
   box at the top so typing "ger" finds Germany rather than scrolling 182 rows
   (Chiran 2026-08-14).

   The real <select> is still in the form and still what submits — this only
   hides it. If the JS never runs, the native control is there and everything
   works. */

/* Hidden from sight, present for the form and for assistive tech that wants it. */
/* Every declaration is pinned: `.smt-wrap .smt-dial` (two classes) out-specifies
   this one and left the select clipped but still 1000px wide, holding a gap in
   the layout where the branded button sits. */
.smt-visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  overflow: hidden !important; white-space: nowrap !important;
  /* Not display:none — it must still submit and still reach a screen reader. */
}

.smt-combo { position: relative; }

.smt-wrap .smt-combo-btn {
  width: 100%;
  padding: 13px 36px 13px 15px;
  font-family: var(--smt-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  color: var(--smt-text-1);
  background: var(--smt-surface);
  border: 1.5px solid var(--smt-border);
  border-radius: 12px;
  cursor: pointer;
  box-sizing: border-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238E8EA0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color 160ms var(--smt-ease), box-shadow 160ms var(--smt-ease);
}

.smt-wrap .smt-combo-btn:hover { border-color: #d6d2e4; }

.smt-wrap .smt-combo-btn:focus-visible,
.smt-combo-btn[aria-expanded="true"] {
  outline: 0;
  border-color: var(--smt-primary);
  box-shadow: 0 0 0 4px rgba(119, 0, 255, .12);
}

.smt-combo-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--smt-surface);
  border: 1px solid var(--smt-border);
  border-radius: 14px;
  box-shadow: 0 4px 8px rgba(9, 9, 2, .06), 0 20px 44px -16px rgba(9, 9, 2, .28);
  overflow: hidden;
}

.smt-combo-panel[hidden] { display: none; }

.smt-wrap .smt-combo-search {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--smt-font);
  font-size: 15px;
  color: var(--smt-text-1);
  background: var(--smt-surface);
  border: 0;
  border-bottom: 1px solid var(--smt-border);
  border-radius: 0;
  box-sizing: border-box;
}

.smt-wrap .smt-combo-search:focus { outline: 0; box-shadow: none; border-color: var(--smt-border); }

.smt-combo-list {
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
}

.smt-combo-item {
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--smt-text-1);
  cursor: pointer;
}

.smt-combo-item.is-active { background: var(--smt-primary-ultra); }
.smt-combo-item.is-current { font-weight: 700; color: var(--smt-primary); }

.smt-combo-none {
  padding: 14px 12px;
  font-size: 14.5px;
  color: var(--smt-text-3);
}


/* ===== The Sarisara calendar and the minus/plus steppers (Chiran, 25 Oct 2026). The calendar is the trip
   page's month card (same sizes and colours); the steppers are the trip page's round buttons. ===== */
.smt-date { position: relative; }
.smt-wrap button.smt-date__btn { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; padding: 13px 15px;
  font-family: var(--smt-font); font-size: 16px; line-height: 1.4; color: var(--smt-text-3); background: var(--smt-surface);
  border: 1.5px solid var(--smt-border); border-radius: 12px; cursor: pointer; transition: border-color 160ms var(--smt-ease), box-shadow 160ms var(--smt-ease); }
.smt-wrap button.smt-date__btn.has-date { color: var(--smt-text-1); }
.smt-wrap button.smt-date__btn svg { width: 18px; height: 18px; flex: none; color: var(--smt-primary); }
.smt-wrap button.smt-date__btn:focus-visible, .smt-wrap button.smt-date__btn[aria-expanded="true"] { border-color: var(--smt-primary); box-shadow: 0 0 0 4px rgba(119, 0, 255, .12); }
.smt-wrap button.smt-date__btn.is-bad { border-color: var(--smt-error); background: var(--smt-error-light); }
.smt-pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 300px; max-width: calc(100vw - 32px); border: 1px solid #E5E5E5; border-radius: 16px;
  background: #fff; box-shadow: 0 14px 34px rgba(9,9,32,.14); padding: 14px; box-sizing: border-box; }
.smt-pop[hidden] { display: none !important; }
.smt-pop .ss-cal__h { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; font-family: var(--smt-font); color: #090920; }
.smt-pop .ss-cal__h b { font-size: 14px; font-weight: 700; }
.smt-wrap .smt-pop button.ss-cal__nav { all: unset; box-sizing: border-box; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #090920; border: 1px solid #E5E5E5; }
.smt-wrap .smt-pop button.ss-cal__nav:hover { border-color: #7700FF; color: #7700FF; }
.smt-wrap .smt-pop button.ss-cal__nav[disabled] { opacity: .35; cursor: default; }
.smt-pop .ss-cal__nav svg { width: 15px; height: 15px; }
.smt-pop .ss-cal__w, .smt-pop .ss-cal__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-family: var(--smt-font); }
.smt-pop .ss-cal__w i { font-style: normal; font-size: 11px; color: var(--smt-text-3); padding: 4px 0; }
.smt-pop .ss-cal__g i { font-style: normal; font-size: 13px; padding: 7px 0; color: #C9C9D4; }
.smt-wrap .smt-pop .ss-cal__g button { all: unset; box-sizing: border-box; font-family: var(--smt-font); font-size: 13px; color: #090920; padding: 7px 0; border-radius: 999px; cursor: pointer; text-align: center; }
.smt-wrap .smt-pop .ss-cal__g button:hover { background: #F3ECFF; color: #7700FF; }
.smt-wrap .smt-pop .ss-cal__g button.on { background: #7700FF; color: #fff; font-weight: 700; }
.smt-stp { display: flex; align-items: center; gap: 10px; padding: 6px; background: var(--smt-surface); border: 1.5px solid var(--smt-border); border-radius: 12px; box-sizing: border-box; }
.smt-stp:focus-within { border-color: var(--smt-primary); box-shadow: 0 0 0 4px rgba(119, 0, 255, .12); }
.smt-wrap .smt-stp button.smt-stp__b { all: unset; box-sizing: border-box; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #E5E5E5; display: grid; place-items: center; cursor: pointer; color: #090920; background: #fff; }
.smt-wrap .smt-stp button.smt-stp__b:hover { border-color: #7700FF; color: #7700FF; }
.smt-wrap .smt-stp button.smt-stp__b[disabled] { color: #D0D0D8; border-color: #EFEFF4; cursor: default; }
.smt-stp button.smt-stp__b svg { width: 16px; height: 16px; }
.smt-field .smt-stp input { flex: 1 1 auto; min-width: 0; width: 40px; padding: 0; border: 0; background: none; box-shadow: none; text-align: center; font-weight: 700; font-size: 17px; }
.smt-field .smt-stp input:focus { box-shadow: none; }

/* the guide-language list looks exactly like the country list (25 Oct 2026) */
.smt-wrap .smt-select {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--smt-font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--smt-text-1);
  background: var(--smt-surface);
  border: 1.5px solid var(--smt-border);
  border-radius: 12px;
  box-sizing: border-box;
  /* The native arrow disappears under a custom radius on some browsers. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238E8EA0' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.smt-wrap .smt-select:focus {
  outline: 0;
  border-color: var(--smt-primary);
  box-shadow: 0 0 0 4px rgba(119, 0, 255, .12);
}

/* THE SARISARA DROP-DOWN (25 Oct 2026): the field-shaped button and the search bar's list */
.smt-dd { position: relative; }
.smt-wrap select.smt-dd__native { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; }
.smt-wrap button.smt-dd__btn { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px;
  font-family: var(--smt-font); font-size: 16px; line-height: 1.4; color: var(--smt-text-1); background: var(--smt-surface);
  border: 1.5px solid var(--smt-border); border-radius: 12px; cursor: pointer; transition: border-color 160ms var(--smt-ease), box-shadow 160ms var(--smt-ease); }
.smt-wrap button.smt-dd__btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smt-wrap button.smt-dd__btn svg { width: 16px; height: 16px; flex: none; color: var(--smt-text-3); transition: transform .15s; }
.smt-wrap button.smt-dd__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.smt-wrap button.smt-dd__btn:focus-visible, .smt-wrap button.smt-dd__btn[aria-expanded="true"] { border-color: var(--smt-primary); box-shadow: 0 0 0 4px rgba(119, 0, 255, .12); }
.smt-wrap button.smt-dd__btn.is-bad { border-color: var(--smt-error); background: var(--smt-error-light); }
.smt-dd__pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; min-width: 220px; border: 1px solid #E5E5E5; border-radius: 16px; background: #fff;
  box-shadow: 0 14px 34px rgba(9,9,32,.14); overflow: hidden; }
.smt-dd--dial .smt-dd__pop { width: 300px; max-width: calc(100vw - 32px); right: auto; }
.smt-dd__pop[hidden] { display: none !important; }
.smt-dd__s { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-bottom: 1px solid #EFEFF4; color: var(--smt-text-3); }
.smt-dd__s svg { width: 16px; height: 16px; flex: none; }
.smt-wrap .smt-dd__s input { flex: 1; min-width: 0; padding: 4px 0; border: 0; background: none; box-shadow: none; font-size: 15px; }
.smt-wrap .smt-dd__s input:focus { box-shadow: none; }
.smt-dd__list { list-style: none; margin: 0; padding: 6px; max-height: 300px; overflow-y: auto; }
.smt-dd__list li { margin: 0; padding: 0; }
.smt-wrap .smt-dd__list button.smt-dd__opt { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  font-family: var(--smt-font); font-size: 15px; color: var(--smt-text-1); }
.smt-wrap .smt-dd__list button.smt-dd__opt:hover, .smt-wrap .smt-dd__list button.smt-dd__opt:focus-visible { background: #F5EEFF; }
.smt-wrap .smt-dd__list button.smt-dd__opt.is-sel { color: #5C00CC; font-weight: 600; }
.smt-dd__none { padding: 10px; font-size: 14px; color: var(--smt-text-3); }

/* the agree-to-offers box (25 Oct 2026) */
.smt-check { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--smt-text-2); cursor: pointer; }
.smt-wrap .smt-check input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--smt-primary); cursor: pointer; }