/* ============================================================
   Emirae.Pro — Shared contact fields (phone control)

   Port of the design system's ui_kits/_partials/contact-fields.css.
   Scoped under `.uaec-ds` so it neither leaks into non-migrated
   pages nor needs the tokens to be global.

   The control is mounted by assets/js/components/contact-fields.js
   on `[data-phone-field]`. There is NO phone verification in this
   product: the green tick means "this looks like a complete number
   for the selected country", never "confirmed".
   ============================================================ */

/* ---------- phone shell ---------- */
.uaec-ds .pf {
  position: relative; display: flex; align-items: stretch; width: 100%;
  background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.uaec-ds .pf:hover { border-color: var(--text-muted); }
.uaec-ds .pf:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); background: #fff; }
.uaec-ds .pf.is-open { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }

.uaec-ds .pf__cc {
  display: flex; align-items: center; gap: 7px; flex: none; padding: 0 10px 0 12px;
  border: 0; border-right: 1px solid var(--border); border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: transparent; font: inherit; font-size: var(--fs-sm); color: var(--text-strong);
  cursor: pointer; transition: background var(--dur) var(--ease);
}
.uaec-ds .pf__cc:hover { background: var(--surface-alt); }
.uaec-ds .pf__cc:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The flag is an inline <svg> from assets/images/flags.svg, not an emoji glyph, so both
   it and its wrapper are sized explicitly and pinned against two forces that squash them:

   - the wrapper is a flex item of .pf__cc, and at its default `flex: 0 1 auto` it gets
     shrunk when the row is tight, which drags the flag down with it;
   - base.css sets `:where(.uaec-ds) :is(img, svg) { max-width: 100% }`, so once the
     wrapper is narrow the svg is clamped to the wrapper rather than to its own width.

   Together those produced a 12x12 flag on a 3:2 artwork - visibly squashed. `flex: none`
   on both and `max-width: none` on the svg is what actually holds the size. */
.uaec-ds .pf__flag { display: flex; align-items: center; justify-content: center; line-height: 1; flex: none; width: 18px; height: 12px; }
.uaec-ds .pf__flagimg { display: block; width: 18px; height: 12px; flex: none; max-width: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .12); }
.uaec-ds .pf__dial { font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
/* :not(.pf__flagimg) - this rule means "the chevron". It was written when the flag was a
   text glyph and the chevron was the only svg in the button; the flag is now an svg too,
   and `.pf--sm .pf__cc svg` below outranks any .pf__flagimg rule, so without the
   exclusion the flag is forced square and the artwork is visibly squashed. */
.uaec-ds .pf__cc svg:not(.pf__flagimg) { width: 14px; height: 14px; flex: none; color: var(--text-muted); transition: transform var(--dur) var(--ease); }
.uaec-ds .pf.is-open .pf__cc svg:not(.pf__flagimg) { transform: rotate(180deg); }
.uaec-ds .pf__vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.uaec-ds .pf__num {
  flex: 1 1 auto; min-width: 0; width: 100%; font: inherit; font-size: var(--fs-body);
  color: var(--text-strong); background: transparent; border: 0; padding: 12px 34px 12px 12px;
  font-variant-numeric: tabular-nums;
}
.uaec-ds .pf__num:focus { outline: none; }
.uaec-ds .pf__num::placeholder { color: var(--text-muted); }

.uaec-ds .pf__ok {
  position: absolute; right: 11px; top: 50%; width: 17px; height: 17px;
  transform: translateY(-50%) scale(.7); color: var(--success-700); opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.uaec-ds .pf.is-valid .pf__ok { opacity: 1; transform: translateY(-50%) scale(1); }

/* input the mask refused (a letter, or one digit too many) */
@keyframes pf-reject { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }
.uaec-ds .pf.is-reject { animation: pf-reject .16s var(--ease) 2; border-color: var(--error-500); }
@media (prefers-reduced-motion: reduce) { .uaec-ds .pf.is-reject { animation: none; } }

/* ---------- country panel ---------- */
.uaec-ds .pf__panel {
  display: none; position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  width: max(100%, 292px); max-width: 340px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.uaec-ds .pf.is-open .pf__panel { display: block; }
.uaec-ds .pf__search { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--border); }
.uaec-ds .pf__search svg { width: 15px; height: 15px; flex: none; color: var(--text-muted); }
.uaec-ds .pf__search input { flex: 1; min-width: 0; font: inherit; font-size: var(--fs-sm); color: var(--text-strong); background: transparent; border: 0; padding: 0; }
.uaec-ds .pf__search input:focus { outline: none; }
.uaec-ds .pf__list { max-height: 232px; overflow: auto; margin: 0; padding: 5px; list-style: none; overscroll-behavior: contain; display: block; }
.uaec-ds .pf__opt {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: var(--radius-sm);
  font-size: var(--fs-sm); color: var(--text); cursor: pointer;
}
.uaec-ds .pf__opt::before { content: none; }
.uaec-ds .pf__opt .f { display: flex; align-items: center; justify-content: center; line-height: 1; flex: none; width: 18px; height: 12px; }
.uaec-ds .pf--sm .pf__flag, .uaec-ds .pf--sm .pf__flagimg { width: 16px; height: 11px; }
.uaec-ds .pf__opt .n { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.uaec-ds .pf__opt .d { flex: none; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.uaec-ds .pf__opt:hover, .uaec-ds .pf__opt.is-active { background: var(--surface-alt); }
.uaec-ds .pf__opt[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text-strong); font-weight: var(--fw-medium); }
.uaec-ds .pf__opt[aria-selected="true"] .d { color: var(--accent); }
.uaec-ds .pf__empty { margin: 0; padding: 12px 13px 14px; font-size: var(--fs-xs); color: var(--text-muted); }

/* ---------- compact variant (352px sidebar widget) ---------- */
.uaec-ds .pf--sm { border-width: 1px; }
.uaec-ds .pf--sm:focus-within, .uaec-ds .pf--sm.is-open { box-shadow: 0 0 0 3px var(--accent-ring); }
.uaec-ds .pf--sm .pf__cc { gap: 5px; padding: 0 7px 0 9px; font-size: var(--fs-xs); }
.uaec-ds .pf--sm .pf__cc svg:not(.pf__flagimg) { width: 12px; height: 12px; }
.uaec-ds .pf--sm .pf__num { font-size: var(--fs-sm); padding: 10px 28px 10px 10px; }
.uaec-ds .pf--sm .pf__ok { right: 9px; width: 15px; height: 15px; }
.uaec-ds .pf--sm .pf__panel { width: max(100%, 268px); }
.uaec-ds .pf--sm .pf__list { max-height: 200px; }

/* The host page styles every input in the card; the number field must stay
   bare so the shell provides the single border. Both the normal and the
   error-state host rules are neutralised at matching specificity. */
.uaec-ds .pf__num,
.uaec-ds .pf__num:focus,
.uaec-ds .pf__search input,
.uaec-ds .pf__search input:focus { border: 0; box-shadow: none; background: transparent; }

/* ---------- error / valid states from the host field ---------- */
.uaec-ds .is-error .pf, .uaec-ds .has-error .pf { border-color: var(--error-500); }
.uaec-ds .is-error .pf:focus-within, .uaec-ds .has-error .pf:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--error-500) 15%, transparent); }
.uaec-ds .is-error .pf .pf__ok, .uaec-ds .has-error .pf .pf__ok { opacity: 0; }

/* caption under the phone field (no verification is implied or performed) */
.uaec-ds .pf-cap { display: flex; align-items: flex-start; gap: 6px; }
.uaec-ds .pf-cap svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--text-muted); }

/* the sidebar card clips its content — let the country panel escape it */
.uaec-ds .au-scard:has([data-phone-field]) { overflow: visible; }
.uaec-ds .au-scard:has([data-phone-field]) .au-scard__head--form { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }