/* ===================================================================
   PHONE COUNTRY SELECTOR
   Built by assets/js/phone-country.js; flags from assets/js/country-flags.js.

   Shared by contact-sales.html and become-a-partner.html, whose form fields
   are styled quite differently (.tt-bc-input is a grey inset field with an
   11px radius; .tt-contact-input is white with a 2px border and a 52px floor).
   The picker has to look like it was cut from whichever field sits next to it,
   so the four properties that differ are per-context variables set on
   .tt-phone-group - everything else is shared.

   To use this on a third form: link this file, add data-intl-phone to the tel
   input, and add a variable block below plus a rule stripping the input's left
   corners. Do not fork the component.

   The landing pages deliberately keep their plain single phone field.
   =================================================================== */

.tt-phone-group {
  display: flex;
  align-items: stretch;
  width: 100%;

  /* Defaults = the booking form's field treatment (.tt-bc-input). */
  --tt-cc-bg: #f1f3f6;
  --tt-cc-bg-hover: #eaedf2;
  --tt-cc-border-w: 1.5px;
  --tt-cc-border-c: #cbd0d9;
  --tt-cc-radius: 11px;
  --tt-cc-pad-y: 0.78rem;
  --tt-cc-min-h: 0;
  --tt-cc-inset: inset 0 1px 2px rgba(16, 20, 28, 0.05);
}

/* The partner page's field treatment (.tt-contact-input). */
.tt-contact-form .tt-phone-group {
  --tt-cc-bg: #FFFFFF;
  --tt-cc-bg-hover: #F4F6F9;
  --tt-cc-border-w: 2px;
  --tt-cc-border-c: #AEB4BD;
  --tt-cc-radius: 10px;
  --tt-cc-pad-y: 0.75rem;
  --tt-cc-min-h: 52px;
  --tt-cc-inset: none;
}

/* The real <select> stays in the DOM as the source of truth for the chosen
   dial code (see assets/js/phone-country.js) but is never shown. Moved
   off-screen rather than display:none so it keeps its value semantics. */
.tt-phone-cc-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.tt-cc {
  position: relative;
  flex: 0 0 auto;
}

/* Closed state: flag + dial code only. The country name would push the
   number field too narrow on mobile; it lives in the open list and in the
   button's title/aria-label. */
.tt-cc-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  height: 100%;
  min-height: var(--tt-cc-min-h);
  /* Matches the neighbouring field exactly minus the right edge, so the pair
     reads as one control rather than a button glued to a field. */
  padding: var(--tt-cc-pad-y) 0.7rem;
  border: var(--tt-cc-border-w) solid var(--tt-cc-border-c);
  border-right: 0;
  border-radius: var(--tt-cc-radius) 0 0 var(--tt-cc-radius);
  background: var(--tt-cc-bg);
  box-shadow: var(--tt-cc-inset);
  font-family: var(--tt-font-primary);
  font-size: 0.95rem;
  color: #1c1f26;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.tt-cc-btn:hover { background: var(--tt-cc-bg-hover); }

.tt-cc-btn:focus-visible,
.tt-cc[data-open="1"] .tt-cc-btn {
  outline: none;
  border-color: var(--tt-primary);
  box-shadow: 0 0 0 3px rgba(var(--tt-primary-rgb), 0.16);
  background: #fff;
  position: relative;
  z-index: 1;
}

/* Both hosts: the number field gives up its left corners to the picker. */
.tt-phone-group .tt-bc-input,
.tt-phone-group .tt-contact-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.tt-cc-flag {
  display: block;
  flex: 0 0 auto;
  width: 21px;
  height: 14px;
  border-radius: 2px;
}

.tt-cc-dial { font-weight: 600; letter-spacing: 0.01em; }

.tt-cc-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--tt-muted, #6B7280);
}

/* Popup. z-index sits below the webinar modal (2500) and the album viewer
   (2200) by a wide margin - it is page furniture, not a dialog. */
.tt-cc-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 19rem;
  max-width: 78vw;
  padding: 0.5rem;
  border: 1px solid var(--tt-border);
  border-radius: 12px;
  background-color: #FFFFFF;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
}
.tt-cc-pop[hidden] { display: none; }

.tt-cc-search {
  width: 100%;
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--tt-border);
  border-radius: 8px;
  font-family: var(--tt-font-primary);
  font-size: 0.86rem;
  color: var(--tt-dark);
}
.tt-cc-search:focus {
  outline: none;
  border-color: var(--tt-primary);
  box-shadow: 0 0 0 3px rgba(var(--tt-primary-rgb), 0.15);
}

.tt-cc-list {
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tt-cc-opt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.5rem;
  border-radius: 8px;
  font-size: 0.86rem;
  color: var(--tt-dark);
  cursor: pointer;
}
.tt-cc-opt[hidden] { display: none; }
.tt-cc-opt.is-active { background-color: rgba(var(--tt-primary-rgb), 0.10); }
.tt-cc-opt[aria-selected="true"] { font-weight: 600; }

.tt-cc-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-cc-code {
  flex: 0 0 auto;
  color: var(--tt-muted, #6B7280);
  font-variant-numeric: tabular-nums;
}

.tt-cc-empty {
  margin: 0;
  padding: 0.6rem 0.5rem;
  font-size: 0.85rem;
  color: var(--tt-muted, #6B7280);
}
.tt-cc-empty[hidden] { display: none; }