/* ══════════════════════════════════════════════════════════════════════════
   dk-phone.. the DK theme for the dependency-free phone widget that
   /assets/js/dk-phone.js builds around any [data-dk-phone] <input>.

   ponytail: hand-maintained twin of the Tailwind classes in
   packages/ui/src/inputs/PhoneInput.tsx. dk-www has no build step for JS-
   injected markup, so the widget's own chrome is plain CSS here; the page's
   <input> keeps ITS OWN utility classes (border, background, text colour) so
   each page's theme -- light books pages, dark gifts pages -- still owns the
   field. Only the country button, the dropdown panel and the reject flash
   live here. Change one side, change the other.

   Loaded UNLAYERED on purpose: Tailwind v4 emits its utilities inside
   @layer utilities, so these rules win over a page utility without needing
   !important (the reject flash has to beat the input's own bg-* class).

   DK tokens, hard-coded because these pages' CSS variables are Tailwind's and
   this file must also work if it ever loads alone: teal #007f7d, dark #121717,
   light #f2f4f4, red #e63946, radius 0.75rem.
   ══════════════════════════════════════════════════════════════════════════ */

.dk-phone {
  position: relative;
  display: block;
  width: 100%;
}

/* ── The country button: flag + caret, a divider, then the dial code ────────
 * Absolutely positioned over the page's own <input> (which is padded out of
 * its way in JS) so the field keeps exactly the border/background/radius the
 * page gave it. Inset by 2px so it never covers a 2px border. */
.dk-phone__country {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  z-index: 1;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 0.625rem 0 0.75rem;
  border: 0;
  border-radius: calc(0.75rem - 2px) 0 0 calc(0.75rem - 2px);
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s;
}
.dk-phone__country:hover {
  background: color-mix(in oklab, currentColor 8%, transparent);
}
.dk-phone__country:focus-visible {
  outline: 2px solid #007f7d;
  outline-offset: -2px;
}

/* The divider sits between the flag and the dial code, so the dial code reads
   as the first part of the number. */
.dk-phone__chip {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-right: 0.625rem;
  padding-right: 0.625rem;
  border-right: 2px solid color-mix(in oklab, currentColor 15%, transparent);
  transition: border-color 0.15s;
}
.dk-phone:focus-within .dk-phone__chip {
  border-right-color: color-mix(in oklab, #007f7d 60%, transparent);
}

.dk-phone__flag {
  flex-shrink: 0;
  font-size: 19px;
  line-height: 1;
}

/* Windows has no flag glyphs (it draws boxed letters), so the script swaps in
   the ISO code.. same box, same geometry. */
.dk-phone__iso {
  flex-shrink: 0;
  width: 22px;
  border: 1px solid color-mix(in oklab, currentColor 25%, transparent);
  border-radius: 4px;
  background: color-mix(in oklab, currentColor 8%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}

.dk-phone__caret {
  width: 0.5rem;
  height: 0.5rem;
  transform: translateY(-1px) rotate(45deg);
  border-right: 1.5px solid color-mix(in oklab, currentColor 40%, transparent);
  border-bottom: 1.5px solid color-mix(in oklab, currentColor 40%, transparent);
}

.dk-phone__dial {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── The strict-mode reject flash ───────────────────────────────────────────
 * A refused keystroke never lands, so the field itself has to say so. */
.dk-phone--reject > input {
  background-color: color-mix(in oklab, #e63946 12%, transparent);
}

/* ── The dropdown ───────────────────────────────────────────────────────────
 * A floating panel with its OWN light background, so its text colour is
 * STATED, never inherited: on the dark gifts pages (white text) inherited
 * white on this white panel made every country name vanish. */
.dk-phone__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  margin-top: 6px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, #121717 10%, transparent);
  border-radius: 0.75rem;
  background: #fff;
  color: #121717;
  font-family: inherit;
  text-align: left;
  box-shadow: 0 8px 24px color-mix(in oklab, #121717 12%, transparent);
}
.dk-phone__panel[hidden] {
  display: none;
}

.dk-phone__search-row {
  padding: 8px;
  border-bottom: 1px solid color-mix(in oklab, #121717 10%, transparent);
}
.dk-phone__search {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: #f2f4f4;
  color: #121717;
  font: inherit;
  font-size: 0.875rem;
  outline: none;
}
.dk-phone__search::placeholder {
  color: color-mix(in oklab, #121717 60%, transparent);
}

.dk-phone__list {
  max-height: 16rem;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  list-style: none;
  /* Minimal scrollbar: no track, just a slim thumb. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, #121717 20%, transparent) transparent;
}
.dk-phone__list::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}
.dk-phone__list::-webkit-scrollbar-thumb {
  border-radius: 9999px;
  background: color-mix(in oklab, #121717 20%, transparent);
}

.dk-phone__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: calc(100% - 0.75rem);
  margin: 2px 6px;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}
.dk-phone__row:hover,
.dk-phone__row[aria-current="true"] {
  background: #f2f4f4;
}
.dk-phone__row:focus-visible {
  outline: 2px solid #007f7d;
  outline-offset: -2px;
}
.dk-phone__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
/* 60%, not the 40% the other muted bits use: the dial code is how a user
   identifies the country they are picking, so it is meaningful text and owes
   the 4.5:1 threshold (40% measured 2.5:1 on white, 60% measures 4.73:1). */
.dk-phone__row-dial {
  flex-shrink: 0;
  color: color-mix(in oklab, #121717 60%, transparent);
  font-variant-numeric: tabular-nums;
}

.dk-phone__empty {
  padding: 1rem;
  color: color-mix(in oklab, #121717 60%, transparent);
  font-size: 0.875rem;
  text-align: center;
}