/* Price Check — modal card + lead form.
   Anchors to NFR-MOBILE-1 (single column at 375px), NFR-MOBILE-2
   (≥16px input fonts to prevent iOS auto-zoom; ≥44px tap targets). */

:root {
  --pc-input-font-size: 16px;
  --pc-tap-min: 44px;
  --pc-brand: #1976d2;
  --pc-brand-dark: #115293;
  --pc-text: #1a1a1a;
  --pc-muted: #666;
  --pc-bg: #ffffff;
  --pc-border: #e0e0e0;
  --pc-success: #2e7d32;
  --pc-danger: #c62828;
}

/* Trigger card lives inside .welcome-examples-grid (a 2-column grid).
   Span both columns + center the content so the 5th card doesn't sit
   alone in the bottom-left under the 2x2 grid, AND visually signals
   "this is a different kind of action" (opens a form, not a chat
   query). */
.welcome-example-card--price-check {
  grid-column: 1 / -1;
  justify-content: center;
  background: linear-gradient(135deg, #e3f2fd 0%, #f5f9ff 100%);
  border-color: #90caf9;
}
.welcome-example-card--price-check:hover {
  border-color: #1976d2;
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.15);
}

/* Modal scaffolding. */
.pc-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  /* Centre the panel inside the chat area (right of the 280px sidebar)
     rather than the full viewport, so the panel aligns with the
     worldesk logo above it. The dark backdrop still covers the entire
     viewport because it's `position: fixed` independently. Tablet
     breakpoint (≤1200px) drops the sidebar to 240px; mobile (≤768px)
     hides the sidebar entirely and the offset goes to 0.
     2026-05-28 UX overhaul. */
  padding-left: 280px;
}
.pc-modal[hidden] { display: none !important; }

.pc-modal-backdrop {
  /* `fixed inset: 0` rather than `absolute inset: 0` so the backdrop
     still covers the FULL viewport (including the area behind the
     sidebar) regardless of the parent .pc-modal's padding-left. */
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.pc-modal-panel {
  position: relative;
  background: var(--pc-bg);
  border-radius: 12px;
  /* 2026-05-28 UX overhaul widened from 560 → 760 to fit the new
     single-row Sent → Received layout. The horizontal row needs ~700px
     to give both amount inputs readable width side-by-side. Mobile
     stacking kicks in at ≤600px via the .pc-direction-row @media rule
     so the wider panel doesn't disadvantage phones. */
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 56px 32px 24px;
  color: var(--pc-text);
}

/* Responsive sidebar-offset for the modal's panel-centering, mirroring
   style.css's .app grid-template-columns breakpoints (sidebar widths
   are 280 / 240 / 0px from largest to smallest). The backdrop is
   `position: fixed` independently, so it stays full-viewport. */
@media (max-width: 1024px) {
  .pc-modal { padding-left: 240px; }
}
@media (max-width: 768px) {
  /* Sidebar collapses to a slide-out overlay below 768px, so the chat
     area takes the full viewport — no offset needed. */
  .pc-modal { padding-left: 0; }
}

.pc-close-btn {
  position: absolute; top: 12px; right: 12px;
  width: var(--pc-tap-min); height: var(--pc-tap-min);
  border: 0; background: transparent;
  font-size: 28px; line-height: 1; cursor: pointer;
  color: var(--pc-muted);
  border-radius: 50%;
}
.pc-close-btn:hover { background: #f3f4f6; color: var(--pc-text); }

/* Headings + lede. */
.pc-step h2 {
  margin: 0 0 6px; font-size: 22px; color: var(--pc-brand);
}
.pc-lede {
  margin: 0 0 20px; color: var(--pc-muted); font-size: 14px;
}

/* Form fields — single column. */
.pc-field {
  display: block;
  margin-bottom: 16px;
}
.pc-field-label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--pc-text);
  margin-bottom: 6px;
}
.pc-field-label small {
  font-weight: normal;
  color: var(--pc-muted);
}
.pc-field input,
.pc-field select {
  width: 100%;
  height: var(--pc-tap-min);
  padding: 0 12px;
  font-size: var(--pc-input-font-size);
  border: 1px solid var(--pc-border);
  border-radius: 8px;
  background: #fff;
  color: var(--pc-text);
  box-sizing: border-box;
  font-family: inherit;
}
.pc-field input:focus,
.pc-field select:focus {
  outline: none;
  border-color: var(--pc-brand);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}
.pc-field-inputrow {
  display: flex; align-items: stretch; gap: 0;
}
.pc-field-inputrow input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  flex: 1;
}
.pc-suffix {
  min-width: 56px;
  height: var(--pc-tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  background: #f3f4f6;
  border: 1px solid var(--pc-border);
  border-left: 0;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  font-weight: 600;
  color: var(--pc-text);
}
.pc-hint {
  display: block;
  margin-top: 4px;
  color: var(--pc-muted);
  font-size: 12px;
}

/* ──────────────────────────────────────────────────────────────────────
   Direction row (2026-05-28 UX overhaul). Replaces three separate
   sections (Direction dropdown / Amount sent / Amount received) with a
   single horizontal row:

     Sent: [amount input] [ccy dropdown w/ flag] ⇒ Received: [amount] [ccy]

   The direction is implicit (Sent ccy → Received ccy) so the prior
   "Direction" select is gone. Each side is a flex group; the arrow sits
   between them. Mobile (< 600px): stack vertically with the arrow
   rotating to ⇩ to read top-to-bottom.
   ─────────────────────────────────────────────────────────────────── */
.pc-direction-field {
  margin-bottom: 18px;
}
.pc-direction-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: nowrap;
}
.pc-direction-side {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
}
.pc-direction-tag {
  font-weight: 600;
  font-size: 13px;
  color: var(--pc-text);
  white-space: nowrap;
  /* Fix-width tag so both sides allocate the same horizontal budget
     to the amount input below. Without this the "Received:" word
     (75px) ate ~25px more from the right side than "Sent:" (50px),
     squeezing the Received amount input to ~30px in the original
     2026-05-28 ship. The min-content fallback keeps the label visible
     if the user's font is wider than expected. */
  flex: 0 0 auto;
  min-width: 72px;
}
.pc-direction-amount {
  /* Override the .pc-field input { width: 100% } default — within the
     direction row we want amount inputs to shrink/grow with the flex
     container, not demand full width.
     flex-basis bumped 70 → 110 (2026-05-28 fix) so each amount input
     starts with enough room to show ~5 digits + the cursor before
     having to scroll horizontally. min-width hard-floors it at 72px
     so it can't collapse below readable. */
  flex: 1 1 110px;
  min-width: 72px;
  width: auto !important;
  text-align: right;
}
.pc-direction-ccy {
  /* Same: opt out of the 100% width default; size to content + a bit. */
  flex: 0 0 auto;
  width: auto !important;
  min-width: 92px;
  padding-right: 28px; /* room for the native select chevron */
  font-weight: 600;
}
.pc-direction-arrow {
  flex: 0 0 auto;
  align-self: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--pc-brand);
  line-height: 1;
  padding: 0 2px;
  user-select: none;
}

/* Phone layout: stack the two sides vertically with the arrow rotated
   to read top-to-bottom. The 600px breakpoint matches the existing
   .pc-modal-panel mobile cutoff (CSS file's overall convention). */
@media (max-width: 600px) {
  .pc-direction-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .pc-direction-side {
    flex: 1 1 100%;
  }
  .pc-direction-arrow {
    flex: 1 1 100%;
    text-align: center;
    transform: rotate(90deg);
    transform-origin: center;
    padding: 4px 0;
    height: 22px;
  }
}

/* Split date + time row (2026-05-19). Replaces datetime-local because
   Chrome's datetime-local popup has no Done/OK button — only "Clear"
   and "Today" links. type="date" auto-commits on day click; type="time"
   is an inline spinner without a fullscreen popup. */
.pc-datetime-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}
.pc-datetime-row .pc-date {
  flex: 1 1 160px;
  min-width: 0;
}
.pc-datetime-row .pc-time {
  flex: 0 0 110px;
}

/* Inline quick-action button (e.g. "Use current time") that sits next
   to inputs inside .pc-datetime-row. */
.pc-quick-btn {
  height: var(--pc-tap-min);
  padding: 0 14px;
  background: #f3f4f6;
  border: 1px solid var(--pc-border);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--pc-text);
  cursor: pointer;
  white-space: nowrap;
}
.pc-quick-btn:hover { background: #e6e9ee; }
.pc-quick-btn:active { background: #dbe0e7; }

/* Inline echo confirming the parsed datetime after the user picks one. */
.pc-ts-echo {
  color: var(--pc-text);
  font-weight: 500;
}

/* Phone layout: stack date + time on their own row, then the button
   below. Keeps tap targets ≥ 44px even on the narrowest screens. */
@media (max-width: 480px) {
  .pc-datetime-row .pc-date { flex: 1 1 60%; }
  .pc-datetime-row .pc-time { flex: 1 1 35%; }
  .pc-datetime-row .pc-quick-btn { flex: 1 1 100%; }
}

/* Submit + reset buttons. */
.pc-submit {
  width: 100%;
  min-height: var(--pc-tap-min);
  background: var(--pc-brand);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}
.pc-submit:hover { background: var(--pc-brand-dark); }
.pc-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.pc-reset {
  background: transparent;
  border: 1px solid var(--pc-border);
  padding: 10px 16px;
  border-radius: 8px;
  color: var(--pc-muted);
  cursor: pointer;
  margin-top: 16px;
  font-size: 14px;
}
.pc-reset:hover { color: var(--pc-text); border-color: var(--pc-muted); }

/* Error banner. */
.pc-error {
  background: #fdecea;
  border: 1px solid #f5c6cb;
  color: var(--pc-danger);
  padding: 10px 12px;
  border-radius: 8px;
  margin: 12px 0;
  font-size: 14px;
}
.pc-error[hidden] { display: none; }

/* Result section. */
.pc-result-body {
  margin-bottom: 16px;
}
.pc-result-body p { line-height: 1.55; margin: 0 0 12px; }
.pc-result-body strong { font-weight: 700; }
.pc-result-body .pc-footnote {
  margin-top: 16px;
  font-size: 12px;
  color: var(--pc-muted);
}

/* Lead-capture form. */
.pc-lead {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--pc-border);
  border-radius: 10px;
  background: #fafbfc;
}
.pc-lead h3 {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--pc-brand);
}
.pc-lead p { font-size: 13px; color: var(--pc-muted); margin-bottom: 14px; }

.pc-consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}
.pc-consent input {
  width: auto;
  margin-top: 3px;
  height: auto;
  min-width: 18px;
  min-height: 18px;
  cursor: pointer;
}
.pc-consent a { color: var(--pc-brand); }

.pc-lead-thanks {
  margin-top: 24px;
  padding: 16px;
  background: #e8f5e9;
  border: 1px solid #c8e6c9;
  border-radius: 8px;
  color: var(--pc-success);
  text-align: center;
}

/* Mobile (single column already; just tighten paddings). */
@media (max-width: 600px) {
  .pc-modal-panel {
    padding: 52px 18px 16px;
    border-radius: 10px;
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
  .pc-step h2 { font-size: 19px; }
}