/* ============================================
   Osprey Sports — KitDesigner client (host UI)

   Styles for the host-side pieces driven by
   assets/js/kitdesigner-client-launcher.js:
     - the header "Get Started" → "MY DESIGNS" transformation (every page);
     - the "MY OSPREY" tile of the mobile menu (MY DESIGNS / START DESIGNING);
     - the "My designs" section (bottom of the catalogue) and its "Request
       quotation" button;
     - the /catalogue/mydesigns page + the quotation flow (picker + form) shared
       by every "Request quotation" button, the 3D studio's own included;
     - the country dialog of that form — ONE dialog, shared by the Country field
       AND the Phone field (flags borrowed from intl-tel-input);
     - the "Continue your design?" dialog / mobile drawer;
     - the "Your design is saved in My designs" notice shown after the studio.
   The widget overlay ships its own stylesheet
   (assets/kitdesigner/style.css) — nothing here touches it.
   Loaded by templates/includes/kitdesigner-client.php.
   ============================================ */

:root {
  --kd-accent: #e8482a;
  --kd-ink: #101828;
  --kd-muted: #667085;
  --kd-line: #e4e7ec;
}

/* ── Buttons (namespaced: never clash with .btn / .ct-btn-dark) ────────── */
.kd-btn {
  appearance: none;
  border: 1px solid var(--kd-line);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: var(--kd-ink);
  background: #ffffff;
  min-height: 40px;
  transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
}
.kd-btn:hover { background: #f9fafb; border-color: #d3d8e0; }
.kd-btn:active { transform: translateY(1px); }
.kd-btn-dark { background: var(--kd-ink); border-color: var(--kd-ink); color: #ffffff; }
.kd-btn-dark:hover { background: #1d2939; border-color: #1d2939; }
.kd-btn-ghost { background: transparent; border-color: var(--kd-line); color: #344054; }
.kd-btn-ghost:hover { background: #f9fafb; }
.kd-btn-icon { flex: 0 0 auto; width: 40px; padding: 0; color: var(--kd-muted); }
.kd-btn-icon:hover { color: #dc2626; border-color: #f5c2c2; background: #fef4f4; }

/* ── "My designs" ─────────────────────────────────────────────────────── */
/* Defensive: the section is revealed by JS, but a page style setting
   `display` on <section> could otherwise defeat the [hidden] attribute. */
.kd-mydesigns[hidden] { display: none !important; }
.kd-mydesigns-grid[hidden] { display: none !important; }
.kd-mydesigns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.kd-design-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--kd-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}
.kd-design-thumb {
  display: block;
  width: 100%;
  /* The thumbnail is SQUARE (same framing as the backoffice design thumbnail):
     never crop it, or the garment would be cut again. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #ffffff;
}
.kd-design-thumb--empty {
  background: radial-gradient(80% 90% at 30% 20%, #eef3fb 0%, #dfe8f6 60%, #cfdcee 100%);
}
.kd-design-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px 6px;
}
.kd-design-meta strong { font-size: 14px; color: var(--kd-ink); }
.kd-design-meta small { font-size: 11.5px; color: var(--kd-muted); }
.kd-design-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 14px;
}
.kd-design-actions .kd-btn-dark { flex: 1 1 auto; }

/* ── Host dialogs: "Continue your design?", quotation flow ────────────── */
/* ABOVE everything the widget can stack: its overlay (2147483000), its own
   dialogs (2147483100) and the gradient picker popup (2147483210). The
   quotation flow can be started FROM the studio ("Request quotation" in its
   top bar), and the design picker + contact form must then cover the studio —
   the client keeps customising behind them. The "Continue your design?" dialog
   is closed before the studio mounts, so it is never actually layered with the
   overlay. Above the site header/footer too. */
.kd-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483300;
  background: rgba(16, 24, 40, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.kd-dialog {
  width: min(440px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--kd-line);
  border-radius: 18px;
  padding: 20px;
  color: var(--kd-ink);
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.22);
}
.kd-dialog h2 { margin: 0 0 4px; font-size: 18px; }
.kd-dialog-sub { color: var(--kd-muted); font-size: 13px; margin: 0 0 14px; }
.kd-dialog-thumb {
  display: block;
  width: 100%;
  /* Square, like the backoffice design thumbnail. Never cropped — and never
     upscaled either: the preview is 500×500, so cap the CSS size (a bigger box
     would blow it up and look pixelated on a HiDPI screen). */
  max-width: 280px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--kd-line);
  margin: 0 auto 14px;
  background: #ffffff;
}
.kd-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}
.kd-choices { display: flex; flex-direction: column; gap: 10px; }
.kd-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--kd-line);
  border-radius: 12px;
  color: var(--kd-ink);
  font: inherit;
  transition: border-color 140ms ease, background 140ms ease, transform 80ms ease;
}
.kd-choice:hover { border-color: var(--kd-accent); background: #fff7f5; }
.kd-choice:active { transform: translateY(1px); }
.kd-choice-danger:hover { border-color: #dc2626; background: #fef4f4; }
.kd-choice-ico {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: #fef0ec;
  color: var(--kd-accent);
}
.kd-choice-danger .kd-choice-ico { background: #fdecec; color: #dc2626; }
.kd-choice-text { min-width: 0; }
.kd-choice-text strong { display: block; font-size: 13.5px; }
.kd-choice-text small {
  display: block;
  margin-top: 2px;
  color: var(--kd-muted);
  font-size: 12px;
  line-height: 1.45;
}

/* ── Mobile: bottom sheet ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .kd-dialog-backdrop-sheet { align-items: flex-end; padding: 0; }
  .kd-dialog-sheet {
    width: 100%;
    max-height: 86vh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
  }
  .kd-mydesigns-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Header CTA → "MY DESIGNS" (3D rotate), every page
   Driven by the launcher: only when this browser really has saved designs does
   the "Get Started" button flip in 3D into the "MY DESIGNS" button and point at
   /catalogue/mydesigns. The FRONT state ("Get Started") is NOT touched: it keeps
   the plain .btn-outline-volt shell with its theme + hover styling. Only the
   FLIPPED state is restyled, and it wears the SAME design as the mobile-menu
   "MY OSPREY" tile (.kd-menu-my-designs, below): dark glass card, the Osprey
   wing guessed through the glass and the animated rainbow bottom border.
   The flip container is sized to the wider label so the header layout
   (measured by the site's priority-nav) never shifts.
   ══════════════════════════════════════════════════════════════════════════ */
.header-cta .kd-cta {
  padding: 0;            /* the faces own the padding: both labels must fit */
  perspective: 800px;
}
.kd-cta-flip {
  position: relative;
  display: inline-block;
  text-align: center;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 900ms var(--ease-out);
}
.kd-cta--flipped .kd-cta-flip { transform: rotateY(180deg); }
.kd-cta-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: 5px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Both faces are transparent: the shell (border / background / hover) is the
   .btn-outline-volt anchor itself, so the front state is pixel-identical. */
.kd-cta-face--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}
/* Light sweep racing across the flipped glass card. */
.kd-cta-face--back::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 35%, rgba(255, 255, 255, .65) 50%, transparent 65%);
  transform: translateX(-130%);
}
.kd-cta--flipped .kd-cta-face--back::after {
  animation: kd-rainbow-sheen 2.8s var(--ease-out) infinite;
}
/* Flipped shell = the SAME design as the mobile-menu "MY OSPREY" tile
   (.kd-menu-my-designs): dark glass card + Osprey wing + animated rainbow
   bottom border. The shell only turns once the MY DESIGNS face is on screen —
   the front "Get Started" state keeps the plain .btn-outline-volt look.
   !important so the theme + :hover rules of .btn-outline-volt (higher
   specificity) can never win back the plain look. */
.header-cta .kd-cta--flipped,
.header-cta .kd-cta--flipped:hover,
.header-cta .kd-cta--flipped:focus-visible {
  z-index: 0;             /* stacking context: the ::before wing stays behind
                             the label but above the card background */
  overflow: hidden;       /* clips the wing and the rainbow bar to the card */
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 12px;    /* the tile's 16px, tuned to the header button height */
  background:
    /* glass sheen, diagonal */
    linear-gradient(112deg,
      rgba(255, 255, 255, 0) 26%,
      rgba(255, 255, 255, 0.07) 44%,
      rgba(255, 255, 255, 0.02) 54%,
      rgba(255, 255, 255, 0) 68%),
    /* light pooling in the top-right corner */
    radial-gradient(130% 150% at 88% -10%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 58%),
    /* body */
    linear-gradient(165deg, #26292d 0%, #0b0c0e 48%, #16181c 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 10px 24px rgba(9, 12, 16, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  animation: kd-cta-pop 620ms var(--ease-out) 1;
}
.header-cta .kd-cta--flipped:hover,
.header-cta .kd-cta--flipped:focus-visible {
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* The Osprey wing, guessed through the glass: same technique and same mask as
   the menu tile's ::before (assets/img/ospreyWing.svg), scaled to the card. */
.header-cta .kd-cta--flipped::before {
  content: '';
  position: absolute;
  top: -33%;
  right: -14%;
  z-index: -1;
  width: 76%;
  height: 160%;
  transform: translateY(20%) rotate(0deg) scale(2);
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.17));
  -webkit-mask: url(/assets/img/ospreyWing.svg) no-repeat center / contain;
  mask: url(/assets/img/ospreyWing.svg) no-repeat center / contain;
  opacity: 0.8;
  pointer-events: none;
}

/* Animated rainbow bottom border — the tile's, kept on the card's padding box
   (kd-rainbow-drift, declared with the other keyframes below). */
.header-cta .kd-cta--flipped::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #00CBFF, #7CFF6B, #CEFF00, #FF8A3D, #FF5FA2, #8A6BFF, #00CBFF);
  background-size: 200% 100%;
  animation: kd-rainbow-drift 6s linear infinite;
  box-shadow: 0 0 14px rgba(0, 203, 255, 0.65), 0 0 26px rgba(255, 95, 162, 0.35);
}
@keyframes kd-cta-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* Mobile menu entry — the header CTA is hidden below 1024px.
   The tile keeps the .mm-card layout (flex, padding, gaps) and the
   .mm-card--dark base of styles.css; everything below is the KitDesigner
   polish: a taller black glass card, the Osprey wing guessed through the
   glass, an embossed design icon and an animated rainbow bottom border.
   BOTH states of the tile share this look — "MY DESIGNS" (→ /catalogue/mydesigns)
   when this browser has saved designs, "START DESIGNING" (→ /catalogue) when it
   has none; only the label and the href differ (see the launcher). */
.kd-menu-my-designs {
  position: relative;
  z-index: 0;                 /* stacking context: the ::before wing stays behind
                                 the label/icon but above the card background */
  overflow: hidden;
  min-height: 72px;           /* a touch taller than the 60px tiles */
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  background:
    /* glass sheen, diagonal */
    linear-gradient(112deg,
      rgba(255, 255, 255, 0) 26%,
      rgba(255, 255, 255, 0.07) 44%,
      rgba(255, 255, 255, 0.02) 54%,
      rgba(255, 255, 255, 0) 68%),
    /* light pooling in the top-right corner */
    radial-gradient(130% 150% at 88% -10%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 58%),
    /* body */
    linear-gradient(165deg, #26292d 0%, #0b0c0e 48%, #16181c 100%);
  box-shadow:
    0 16px 34px rgba(9, 12, 16, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

/* The Osprey wing, guessed through the glass: a soft light gradient masked by
   the brand mark (assets/img/ospreyWing.svg), tilted like the reference. */
.kd-menu-my-designs::before {
  content: '';
  position: absolute;
  top: -33%;
  right: -14%;
  z-index: -1;
  width: 76%;
  height: 160%;
  transform: translateY(20%) rotate(0deg) scale(2);
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.17));
  -webkit-mask: url(/assets/img/ospreyWing.svg) no-repeat center / contain;
  mask: url(/assets/img/ospreyWing.svg) no-repeat center / contain;
  opacity: 0.8;
  pointer-events: none;
}

/* Animated rainbow bottom border (kd-rainbow-drift, declared below). */
.kd-menu-my-designs::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #00CBFF, #7CFF6B, #CEFF00, #FF8A3D, #FF5FA2, #8A6BFF, #00CBFF);
  background-size: 200% 100%;
  animation: kd-rainbow-drift 6s linear infinite;
  box-shadow: 0 0 14px rgba(0, 203, 255, 0.65), 0 0 26px rgba(255, 95, 162, 0.35);
}

.kd-menu-my-designs:hover { border-color: rgba(255, 255, 255, 0.22); }

/* Embossed ("incrusted") design icon: a dark well with a light lower edge, the
   glyph itself carrying a soft dark halo + a bottom highlight. Sized up for the
   taller card. */
.kd-menu-my-designs .mm-icon {
  width: 36px;
  height: 36px;
  padding: 7px;
  color: rgba(255, 255, 255, 0.94);
  /*
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.06);
  */
}

/* The rule between the icon and the label follows the taller card. */
.kd-menu-my-designs .mm-sep { margin: 16px 0; }

.kd-menu-my-designs .mm-icon svg {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18))
          drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.7));
}

@media (prefers-reduced-motion: reduce) {
  .kd-menu-my-designs::after { animation: none; }
}

/* Rainbow motion — shared by the flipped header CTA and the menu tile. */
@keyframes kd-rainbow-drift {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}
@keyframes kd-rainbow-sheen {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}

/* ══════════════════════════════════════════════════════════════════════════
   /catalogue/mydesigns — full page + quotation flow
   ══════════════════════════════════════════════════════════════════════════ */
.kd-mydesigns-page .ct-title-row { margin-bottom: 36px; }
.kd-mydesigns-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.kd-mydesigns-toolbar[hidden] { display: none !important; }
.kd-mydesigns-toolbar .ct-desc { margin: 0; max-width: 560px; }

/* "Request quotation" — the catalogue's plain outline button (.ct-btn-outline,
   loaded with catalogue.css). Only the font metrics and the disabled state need
   to be pinned here: catalogue.css sets `font: inherit` on button.ct-btn-outline. */
.kd-mydesigns-toolbar .ct-btn-outline {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 24px;
  cursor: pointer;
}
.kd-mydesigns-toolbar .ct-btn-outline svg { flex: 0 0 auto; }
.kd-mydesigns-toolbar .ct-btn-outline:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  background: #fff;
  color: #0a0a0a;
}

.kd-mydesigns-empty {
  border: 1px dashed #c4ccd6;
  border-radius: 14px;
  padding: 48px 32px;
  text-align: center;
  color: #5a6778;
  background: #fff;
}
.kd-mydesigns-empty[hidden] { display: none !important; }
.kd-mydesigns-empty h2 { color: #0a0a0a; margin-bottom: 12px; }
.kd-mydesigns-empty p { max-width: 560px; margin: 0 auto; }

/* ── Quote dialog: design picker ──────────────────────────────────────── */
.kd-quote-dialog { width: min(560px, 100%); }
.kd-pick-actions { display: flex; align-items: center; gap: 16px; margin: 0 0 10px; }
.kd-link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--kd-accent);
  cursor: pointer;
  text-decoration: underline;
}
.kd-pick-count { margin-left: auto; font-size: 12px; color: var(--kd-muted); }
.kd-pick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 44vh;
  overflow-y: auto;
  padding: 5px;
}
.kd-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--kd-line);
  border-radius: 12px;
  cursor: pointer;
  background: #ffffff;
  transition: border-color 140ms ease, background 140ms ease;
}
.kd-pick:hover { border-color: #b9c2cf; }
.kd-pick:focus-within { outline: 2px solid var(--volt); outline-offset: 2px; }
.kd-pick:has(.kd-pick-input:checked) { border-color: #0a0a0a; background: #f6f8fb; }
/* Kept in the tab order (accessible) but visually replaced by .kd-pick-check. */
.kd-pick-input { position: absolute; left: 12px; width: 18px; height: 18px; opacity: 0; margin: 0; }
.kd-pick-thumb {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 9px;
  object-fit: cover;
  background: #ffffff;
  border: 1px solid var(--kd-line);
}
.kd-pick-thumb--empty {
  background: radial-gradient(80% 90% at 30% 20%, #eef3fb 0%, #dfe8f6 60%, #cfdcee 100%);
}
.kd-pick-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kd-pick-text strong { font-size: 13.5px; color: var(--kd-ink); }
.kd-pick-text small { font-size: 11.5px; color: var(--kd-muted); }
.kd-pick-check {
  flex: 0 0 auto;
  margin-left: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  background: #0a0a0a;
  opacity: .16;
  transition: opacity 140ms ease, transform 140ms ease;
}
.kd-pick:has(.kd-pick-input:checked) .kd-pick-check { opacity: 1; transform: scale(1); }

/* ── Quote dialog: form ───────────────────────────────────────────────── */
.kd-quote-form { display: flex; flex-direction: column; }
.kd-quote-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 520px) { .kd-quote-grid { grid-template-columns: 1fr 1fr; } }
.kd-field { display: flex; flex-direction: column; gap: 5px; }
.kd-field--wide { grid-column: 1 / -1; }
.kd-field > span { font-size: 11.5px; font-weight: 700; color: #1a1a1a; letter-spacing: .02em; }
.kd-field input, .kd-field textarea, .kd-field select {
  width: 100%;
  background: #ffffff;
  border: 1px solid #d3d8e0;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  color: #101828;
}
.kd-field textarea { resize: vertical; }
.kd-field input:focus, .kd-field textarea:focus, .kd-field select:focus {
  outline: none;
  border-color: var(--kd-accent);
  box-shadow: 0 0 0 3px rgba(232, 72, 42, .12);
}
.kd-hp { position: absolute !important; left: -9999px !important; width: 0; height: 0; opacity: 0; }
.kd-quote-error { margin: 10px 0 0; font-size: 12.5px; color: #dc2626; }

/* ── Quote form: country dropdown (flag list) ─────────────────────────── */
/* The FLAG GLYPH is the intl-tel-input one (.iti__flag iti__xx), already loaded
   on every page for the contact form's phone field: its stylesheet ships the
   sprite and the per-country offsets, so nothing is downloaded for this field.
   Only the shell (button, list) is styled here. */
.kd-country-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: #ffffff;
  border: 1px solid #d3d8e0;
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  color: #101828;
  text-align: left;
  cursor: pointer;
}
.kd-country-btn:focus-visible,
.kd-country-btn[aria-expanded="true"] {
  outline: none;
  border-color: var(--kd-accent);
  box-shadow: 0 0 0 3px rgba(232, 72, 42, .12);
}
/* A flex item is blockified, so the sprite's width/height apply to the span. */
.kd-country-btn-flag { flex: 0 0 auto; display: block; }
.kd-country-btn-flag[hidden] { display: none !important; }
/* Phone field only: the dial code sits where the country NAME sits for the
   Country field ("🇳🇿 +64"), and is painted by the launcher (the library's own
   country UI is off — see the phone block below). */
.kd-country-btn-dial { flex: 0 0 auto; color: #101828; font-weight: 600; }
.kd-country-btn-dial[hidden] { display: none !important; }
.kd-country-btn-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #667085;
}
.kd-country-btn[data-filled="true"] .kd-country-btn-name { color: #101828; }
.kd-country-caret { flex: 0 0 auto; color: #667085; }
/* The LIST is DETACHED from the form's flow. Left in flow (what we did first),
   its ~200 rows pushed every field below them out of the screen — on a phone
   the client lost the very field they were filling in — and the dialog's own
   scroll box (max-height 88vh + overflow-y: auto) would clip an absolutely
   positioned popup. `position: fixed` escapes BOTH, and the launcher pins it:
     - desktop → a real dropdown POPUP under the field (countryPopPlacement(),
       re-pinned while the dialog scrolls, flipped ABOVE when the room left
       below the field is too small);
     - phone (≤ 860px, the dialog's own sheet breakpoint) → a FULL-SCREEN sheet,
       the same UX as the country picker of the phone field (intl-tel-input
       `iti--fullscreen-popup`): the list owns the whole screen.
   The base rule below IS the desktop popup; `is-pop` (set by the launcher) only
   documents that state, while `is-sheet` switches to the full-screen sheet in
   the media query at the end of this block. */
.kd-country-pop {
  position: fixed;
  z-index: 2147483350;   /* just above the dialog backdrop (2147483300) */
  display: flex;
  flex-direction: column;
  /* NO `overflow: hidden` here: it would clip the card's shadow, and the card
     cannot overflow anyway (it is a flex child with min-height 0, and the list
     inside it scrolls). The launcher's max-height is the only limit. */
}
.kd-country-pop[hidden] { display: none !important; }
.kd-country-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;         /* lets the list shrink + scroll inside the card */
  background: #ffffff;
  border: 1px solid var(--kd-line);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, .18);
}
/* Title + Close button: the FULL-SCREEN sheet only (see the media query below).
   In the desktop popup the list is anchored to the field the client just
   tapped, so a title would only be noise. */
.kd-country-head { display: none; }
.kd-country-head-title { font-size: 13px; font-weight: 700; color: #1a1a1a; }
.kd-country-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid var(--kd-line);
  border-radius: 50%;
  color: #1a1a1a;
  font-size: 17px;
  line-height: 1;
}
.kd-country-close:hover { border-color: var(--kd-accent); color: var(--kd-accent); }
.kd-country-search {
  width: 100%;
  background: #ffffff;
  border: 1px solid #d3d8e0;
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  color: #101828;
}
.kd-country-search:focus {
  outline: none;
  border-color: var(--kd-accent);
  box-shadow: 0 0 0 3px rgba(232, 72, 42, .12);
}
.kd-country-list {
  flex: 1 1 auto;
  min-height: 0;         /* the popup's max-height must be able to shrink it */
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  /* ~7 rows, then it scrolls: the popup itself must never grow forever. The
     launcher only ever LOWERS this (it pins the popup to the room left on
     screen); the phone sheet overrides it to "none" and fills the screen. */
  max-height: 212px;
  overflow-y: auto;
}
.kd-country-list li[hidden] { display: none !important; }
.kd-country-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 8px 9px;
  font-family: inherit;
  font-size: 13px;
  color: #101828;
  text-align: left;
  cursor: pointer;
}
.kd-country-item:hover { background: #f6f8fb; }
.kd-country-item:focus-visible { outline: 2px solid var(--volt); outline-offset: -2px; }
.kd-country-item[aria-selected="true"] { background: #eef3fb; font-weight: 600; }
.kd-country-item-flag { flex: 0 0 auto; display: block; }
.kd-country-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The phone list also shows each country's dial code, right-aligned (the
   library's own list appended it to the name; a column reads better). */
.kd-country-item-dial {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 10px;
  color: var(--kd-muted);
  font-size: 12.5px;
}
.kd-country-empty { margin: 8px 2px 2px; font-size: 12px; color: var(--kd-muted); }
.kd-country-empty[hidden] { display: none !important; }
/* Plain ISO-code input (page that never printed the country list). */
.kd-country-code-input { text-transform: uppercase; }

/* ── Quote form: the country list on a phone = FULL-SCREEN sheet ───────── */
/* Same UX as the country picker of the phone field (intl-tel-input
   `iti--fullscreen-popup`): the client sees the list — and only the list —
   under a title with its Close button and the search box pinned on top, while
   the form behind it keeps every field exactly where it was. The launcher adds
   `is-sheet` (and drops every inline placement) as soon as the list opens. */
@media (max-width: 860px) {
  .kd-country-pop.is-sheet { inset: 0; background: #ffffff; }
  .kd-country-pop.is-sheet .kd-country-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 12px 14px 14px;
  }
  .kd-country-pop.is-sheet .kd-country-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  /* Fingers, not a mouse: a taller search box and taller rows. */
  .kd-country-pop.is-sheet .kd-country-search { padding: 11px 12px; }
  .kd-country-pop.is-sheet .kd-country-item { padding: 11px 9px; }
  .kd-country-pop.is-sheet .kd-country-list { max-height: none; }
}

/* ── Quote form: phone field (intl-tel-input + our own country dialog) ── */
/* The library does the NUMBER only — formatting as you type, libphonenumber
   validation, E.164 output. `countrySelectorMode: "OFF"` + `showFlags: false` +
   `separateDialCode: false` keep it from rendering ANY country UI of its own
   (no `.iti__country-container`, no detached selector, no padding-left), so the
   field shows OUR country button — the very same one, and the very same
   full-screen sheet, as the Country field above: ONE country dialog per form.
   Without the library the field stays a plain <input type="tel"> and this block
   is inert. */
.kd-field--phone { position: relative; }
.kd-phone { display: flex; gap: 8px; }
.kd-phone .kd-country { flex: 0 0 auto; }
/* The Country field's button is full-width; the phone one hugs its content
   (flag + dial code + caret). */
.kd-country-btn--phone { width: auto; }
.kd-phone .iti { flex: 1 1 auto; min-width: 0; width: auto; }
.kd-field .iti__tel-input { width: 100%; }
/* Green tick / red cross, exactly like the /client order form. */
.kd-phone-state {
  position: absolute;
  right: 12px;
  bottom: 9px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}
.kd-phone-state[hidden] { display: none !important; }
.kd-phone-state.is-ok { background: #e8f7ee; color: #067647; }
.kd-phone-state.is-ko { background: #fdecec; color: #dc2626; }

/* ── Quote dialog: result ─────────────────────────────────────────────── */
.kd-result-list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; }
.kd-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--kd-line);
  border-radius: 12px;
}
.kd-result > span {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.kd-result div { min-width: 0; }
.kd-result strong { display: block; font-size: 13.5px; color: var(--kd-ink); }
.kd-result small { display: block; font-size: 11.5px; color: var(--kd-muted); }
.kd-result--ok > span { background: #e8f7ee; color: #067647; }
.kd-result--ko > span { background: #fdecec; color: #dc2626; }

/* ── "Your design is saved in My designs" notice (leaving the studio) ───── */
/* Shown by the launcher when the client leaves the 3D studio (Back / Escape)
   with a design that really differs from the base one: it is in "My designs"
   now, and both next steps — reopen it, ask for a quotation — are one click
   away. Sits BELOW the dialogs (the quotation flow it opens must cover it) and
   well above the page. */
.kd-saved-notice {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  z-index: 2147481000;
  width: min(640px, calc(100% - 28px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #101828;
  color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, .3);
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}
.kd-saved-notice.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
.kd-saved-notice-ico {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: rgba(255, 255, 255, .14);
  color: var(--volt);
}
.kd-saved-notice-text { flex: 1 1 220px; min-width: 0; }
.kd-saved-notice-text strong { display: block; font-size: 13.5px; }
.kd-saved-notice-text p {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #cbd5e1;
}
.kd-saved-notice-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.kd-saved-notice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 10px;
  background: transparent;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.kd-saved-notice-btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .45); }
.kd-saved-notice-btn--primary { background: var(--volt); border-color: var(--volt); color: #0a0a0a; }
.kd-saved-notice-btn--primary:hover { background: var(--volt-hover); border-color: var(--volt-hover); }
.kd-saved-notice-btn--icon { width: 34px; padding: 0; font-size: 13px; }

/* ── Small screens: stack the toolbar, full-width CTA ─────────────────── */
@media (max-width: 640px) {
  .kd-mydesigns-toolbar { flex-direction: column; align-items: stretch; }
  .kd-mydesigns-toolbar .ct-btn-outline { width: 100%; }
  .kd-pick-list { max-height: 40vh; }
  /* Notice: full width, actions on their own line (the studio is above it). */
  .kd-saved-notice { flex-wrap: wrap; bottom: 14px; padding: 12px 14px; }
  .kd-saved-notice-text { flex: 1 1 100%; }
  .kd-saved-notice-actions { flex: 1 1 100%; }
  .kd-saved-notice-btn--primary { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .kd-saved-notice { transition: none; }
  .kd-cta-flip { transition: none; }
  .kd-cta-face--back::after { animation: none; }
  .header-cta .kd-cta--flipped { animation: none; }
  .header-cta .kd-cta--flipped::after { animation: none; }
}

/* ── iOS: no field may trigger the Safari 'auto-zoom' ───────────────────────── */
/* iOS Safari zooms the page into a field whose font is under 16px and does NOT
   zoom back out. That zoom is impossible to undo on iOS (the page zoom lock in
   assets/js/script.js → "PAGE ZOOM LOCK" explains why), so a 13px field — the
   quote form here, the studio's own `.kd3-field` inputs — used to leave the
   client stuck on a zoomed page. 16px on a touch device is what Safari considers
   legible: it is the only reliable way to keep the field zoom out of the
   picture. Desktop keeps the 13px of the design.
   `!important` for the studio's fields only: the widget's own stylesheet is
   injected with the bundle (later in the cascade) and its selectors are scoped
   (`.kd3-field input[type=text]`), so a plain rule would lose. */
@media (pointer: coarse) {
  .kd-field input, .kd-field textarea, .kd-field select,
  .kd-country-code-input, .iti__tel-input {
    font-size: 16px;
  }
  .kd3-root input, .kd3-root textarea, .kd3-root select {
    font-size: 16px !important;
  }
}