/* Phaseshift Calculator — front-end widget styles.
   Auto-scoped under .phsc-root so nothing leaks into or out of the host theme.
   Brand colors are overridden via inline custom properties on .phsc-root. */

.phsc-root {
  --phsc-bg:        #f6f7f5;
  --phsc-surface:   #ffffff;
  --phsc-text:      #0f2125;
  --phsc-muted:     #5a6a6f;
  --phsc-line:      #e2e6e4;
  --phsc-primary:   #0e6e6e;       /* deep teal */
  --phsc-primary-d: #094f4f;
  --phsc-accent:    #f3b13a;       /* sun yellow */
  --phsc-good:      #2f8a4a;
  --phsc-warn:      #c5743a;
  --phsc-bad:       #b03a3a;
  --phsc-radius:    14px;
  --phsc-shadow:    0 1px 3px rgba(15, 33, 37, 0.06), 0 4px 16px rgba(15, 33, 37, 0.05);
  --phsc-font:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.phsc-root, .phsc-root * { box-sizing: border-box; }

.phsc-root { margin: 0; padding: 0; }

.phsc-root {
  background: var(--phsc-bg);
  color: var(--phsc-text);
  font-family: var(--phsc-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Stop iOS Safari from zooming when a sub-16px input gains focus. */
.phsc-root input, .phsc-root select, .phsc-root textarea, .phsc-root button { font-size: 16px; }

.phsc-root .wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

/* ---------- Header ---------- */
.phsc-root .brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.phsc-root .brand-logo {
  height: 44px;
  width: auto;
  display: block;
}

.phsc-root .brand-tag { color: var(--phsc-muted); font-size: 14px; }

/* Current-step caption above the progress bar — orients the user, especially
   on mobile where the slim pills alone are hard to read. */
.phsc-root .step-caption {
  font-size: 13px;
  font-weight: 600;
  color: var(--phsc-muted);
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}

/* ---------- Card ---------- */
.phsc-root .card {
  background: var(--phsc-surface);
  border-radius: var(--phsc-radius);
  box-shadow: var(--phsc-shadow);
  padding: 28px;
  margin-bottom: 20px;
}

.phsc-root h1 { margin: 0 0 8px; font-size: 28px; letter-spacing: -0.01em; }

.phsc-root h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.01em; }

.phsc-root h3 { margin: 24px 0 12px; font-size: 16px; color: var(--phsc-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

.phsc-root p.lead { color: var(--phsc-muted); margin: 0 0 24px; }

/* ---------- Progress ---------- */
.phsc-root .steps {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.phsc-root .step-pill {
  flex: 1 1 0;
  min-width: 64px;
  height: 6px;
  background: var(--phsc-line);
  background-clip: content-box;   /* lets mobile add a transparent tap zone */
  border: none;
  padding: 0;
  border-radius: 999px;
  position: relative;
  overflow: visible;
  cursor: default;
  transition: transform 0.1s ease, background 0.15s;
}

.phsc-root .step-pill.done { background: var(--phsc-primary); }

.phsc-root .step-pill.current { background: var(--phsc-accent); }

.phsc-root .step-pill.clickable { cursor: pointer; }

.phsc-root .step-pill.clickable:hover {
  transform: scaleY(1.6);
  background: var(--phsc-primary-d);
}

.phsc-root .step-pill.clickable:focus-visible {
  outline: 2px solid var(--phsc-primary);
  outline-offset: 3px;
}

.phsc-root .step-pill:disabled { cursor: not-allowed; }

/* ---------- Form controls ---------- */
.phsc-root .field { margin-bottom: 18px; }

.phsc-root .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 600px) {
 .phsc-root .field-row { grid-template-columns: 1fr; }
 
}

.phsc-root label.field-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.phsc-root .field-help { font-size: 13px; color: var(--phsc-muted); margin-top: 4px; }

/* "I'm not sure" toggle that lets the user accept a sensible default
   instead of having to guess a number / pick a value. */
.phsc-root .unknown-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.phsc-root .unknown-btn {
  font: inherit;
  font-size: 13px;
  color: var(--phsc-primary);
  background: transparent;
  border: 1px dashed var(--phsc-primary);
  border-radius: 999px;
  padding: 6px 14px;
  min-height: 36px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.phsc-root .unknown-btn:hover { background: rgba(14, 110, 110, 0.08); }

.phsc-root .unknown-btn.active {
  background: var(--phsc-primary);
  color: white;
  border-style: solid;
}

.phsc-root .unknown-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--phsc-warn);
  background: #fff8eb;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
}

.phsc-root input[type='text'], .phsc-root input[type='email'], .phsc-root input[type='tel'], .phsc-root input[type='number'], .phsc-root select, .phsc-root textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--phsc-line);
  border-radius: 10px;
  font: inherit;
  background: white;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.phsc-root input:focus, .phsc-root select:focus, .phsc-root textarea:focus {
  outline: none;
  border-color: var(--phsc-primary);
  box-shadow: 0 0 0 3px rgba(14, 110, 110, 0.12);
}

.phsc-root textarea { min-height: 80px; resize: vertical; }

/* Choice cards (segment, phase, etc) */
.phsc-root .choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.phsc-root .choice {
  border: 2px solid var(--phsc-line);
  background: white;
  border-radius: 12px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
  font: inherit;
  color: inherit;
}

.phsc-root .choice:hover { border-color: var(--phsc-primary); }

.phsc-root .choice.selected {
  border-color: var(--phsc-primary);
  background: rgba(14, 110, 110, 0.05);
}

.phsc-root .choice .choice-title { font-weight: 700; margin-bottom: 4px; }

.phsc-root .choice .choice-sub { font-size: 13px; color: var(--phsc-muted); }

/* Appliance grid */
.phsc-root .appliance-group { margin-bottom: 28px; }

.phsc-root .appliance-table {
  border: 1px solid var(--phsc-line);
  border-radius: 12px;
  overflow: hidden;
}

.phsc-root .appliance-row {
  display: grid;
  grid-template-columns: 1fr 110px 130px 120px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--phsc-line);
}

.phsc-root .appliance-row:first-child { border-top: none; }

.phsc-root .appliance-row.header {
  background: #f3f5f3;
  font-size: 12px;
  font-weight: 600;
  color: var(--phsc-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.phsc-root .appliance-row.has-qty { background: rgba(14, 110, 110, 0.04); }

.phsc-root .appliance-row .name { font-size: 14px; }

.phsc-root .appliance-row .name small { color: var(--phsc-muted); display: block; font-size: 12px; }

.phsc-root .appliance-row .qty input, .phsc-root .appliance-row .hours input { padding: 6px 8px; }

.phsc-root .appliance-row .live-kwh { text-align: right; font-variant-numeric: tabular-nums; color: var(--phsc-muted); font-size: 13px; }

/* Custom (user-added) appliance rows */
.phsc-root .appliance-row.custom-row .name .custom-label {
  width: 100%;
  padding: 6px 8px;
  font-size: 16px;   /* 16px+ so iOS doesn't zoom on focus */
}

.phsc-root .appliance-row.custom-row .name .custom-watts-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.phsc-root .appliance-row.custom-row .name .custom-watts {
  width: 84px;
  padding: 4px 6px;
  font-size: 16px;   /* 16px+ so iOS doesn't zoom on focus */
}

.phsc-root .appliance-row.custom-row .live-kwh {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.phsc-root .appliance-row.custom-row .custom-remove {
  background: transparent;
  border: 1px solid var(--phsc-line);
  color: var(--phsc-muted);
  border-radius: 6px;
  width: 36px;
  height: 36px;
  line-height: 1;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}

.phsc-root .appliance-row.custom-row .custom-remove:hover {
  color: #b3261e;
  border-color: #b3261e;
}

.phsc-root .appliance-row.custom-empty .name { padding: 6px 0; }

.phsc-root .custom-add-btn { font-size: 14px; }

@media (max-width: 720px) {

  /* Keep the remove button reachable on mobile by giving custom rows a
     dedicated grid that includes a narrow trailing column for it. */
  .phsc-root .appliance-row.custom-row { grid-template-columns: 1fr 72px 92px 44px; }

  .phsc-root .appliance-row.custom-row .live-kwh { display: flex; }

  .phsc-root .appliance-row.custom-row .live-kwh .live-kwh-val { display: none; }

}

@media (max-width: 720px) {

  .phsc-root .appliance-row { grid-template-columns: 1fr 80px 100px; }

  .phsc-root .appliance-row .live-kwh { display: none; }

  .phsc-root .appliance-row.header .live-kwh { display: none; }

  /* Bigger touch targets for the qty / hours / custom inputs on phones. */
  .phsc-root .appliance-row .qty input, .phsc-root .appliance-row .hours input, .phsc-root .appliance-row.custom-row .custom-watts { min-height: 40px; }

}

/* Tighten the appliance grid on very narrow phones so the name column
   (e.g. "Air conditioners (split / window)") keeps room to wrap. */
@media (max-width: 420px) {

  .phsc-root .appliance-row { grid-template-columns: 1fr 60px 68px; gap: 8px; padding: 10px 10px; }

  .phsc-root .appliance-row.custom-row { grid-template-columns: 1fr 56px 64px 40px; gap: 7px; }

  .phsc-root .appliance-row.header { font-size: 11px; }

  .phsc-root .appliance-row .qty input, .phsc-root .appliance-row .hours input { padding: 6px 6px; }

}

/* ---------- Buttons ---------- */
.phsc-root .actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.phsc-root button.btn {
  font: inherit;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  min-height: 46px;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
  -webkit-tap-highlight-color: transparent;
}

.phsc-root button.btn:active { transform: translateY(1px); }

.phsc-root button.btn-primary {
  background: var(--phsc-primary);
  color: white;
}

.phsc-root button.btn-primary:hover { background: var(--phsc-primary-d); }

.phsc-root button.btn-ghost {
  background: transparent;
  color: var(--phsc-muted);
}

.phsc-root button.btn-ghost:hover { color: var(--phsc-text); }

.phsc-root button.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Stats / results ---------- */
.phsc-root .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 18px 0 24px;
}

/* Horizontal-scroll wrapper for wide tables (offer / appliance recap) so they
   never force the whole page to scroll sideways on a phone. */
.phsc-root .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.phsc-root .table-scroll > table { margin-top: 0; }

.phsc-root .stat {
  background: #f3f7f5;
  border: 1px solid var(--phsc-line);
  border-radius: 12px;
  padding: 14px 16px;
}

.phsc-root .stat .stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--phsc-muted); font-weight: 600; }

.phsc-root .stat .stat-value { font-size: 22px; font-weight: 700; margin-top: 4px; }

.phsc-root .stat .stat-sub { font-size: 12px; color: var(--phsc-muted); margin-top: 2px; }

.phsc-root .callout {
  border-left: 4px solid var(--phsc-accent);
  background: #fff8eb;
  padding: 12px 16px;
  border-radius: 8px;
  margin: 16px 0;
  font-size: 14px;
}

.phsc-root .callout.ok { border-color: var(--phsc-good); background: #ebf6ee; }

.phsc-root .callout.warn { border-color: var(--phsc-warn); background: #fdf1e6; }

.phsc-root .callout.bad { border-color: var(--phsc-bad);  background: #fbecec; }

/* ---------- Results bar chart ---------- */
.phsc-root .breakdown { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

.phsc-root .breakdown-row { display: grid; grid-template-columns: 180px 1fr 80px; align-items: center; gap: 10px; font-size: 14px; }

@media (max-width: 600px) {
 .phsc-root .breakdown-row { grid-template-columns: 130px 1fr 60px; }
 
}

.phsc-root .bar-track { height: 10px; background: var(--phsc-line); border-radius: 999px; overflow: hidden; }

.phsc-root .bar-fill { height: 100%; background: linear-gradient(90deg, var(--phsc-primary), var(--phsc-accent)); }

/* ---------- Footer / utility ---------- */
.phsc-root .muted { color: var(--phsc-muted); font-size: 13px; }

.phsc-root .right { text-align: right; }

.phsc-root .success { color: var(--phsc-good); font-weight: 600; }

.phsc-root .warn { color: var(--phsc-warn); font-weight: 600; }

.phsc-root .fail { color: var(--phsc-bad);  font-weight: 600; }

.phsc-root hr.sep { border: none; border-top: 1px solid var(--phsc-line); margin: 24px 0; }

/* ---------- Admin panel ---------- */
/* The admin dashboard is data-dense (lead list + detail with tables), so it
   uses a much wider container than the narrow wizard form. */
.phsc-root .wrap-admin { max-width: 1400px; }

.phsc-root .admin-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
}

@media (max-width: 800px) {

  .phsc-root .admin-grid { grid-template-columns: 1fr; }

  /* Once stacked, cap the lead list so the selected lead's detail below it is
     reachable without scrolling past a full-height list. */
  .phsc-root .lead-list { max-height: 42vh; }

}

.phsc-root .lead-list { background: var(--phsc-surface); border-radius: var(--phsc-radius); box-shadow: var(--phsc-shadow); padding: 12px; max-height: 80vh; overflow: auto; }

.phsc-root .lead-item { padding: 12px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }

.phsc-root .lead-item:hover { background: #f3f5f3; }

.phsc-root .lead-item.active { background: rgba(14, 110, 110, 0.07); border-color: var(--phsc-primary); }

.phsc-root .lead-item .name { font-weight: 600; }

.phsc-root .lead-item .meta { font-size: 12px; color: var(--phsc-muted); margin-top: 2px; }

.phsc-root .badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--phsc-line);
  color: var(--phsc-muted);
}

.phsc-root .badge.new { background: #fff8eb; color: var(--phsc-warn); }

.phsc-root .badge.contacted { background: #eaf2f8; color: #2c6ea7; }

.phsc-root .badge.quoted { background: #ebf6ee; color: var(--phsc-good); }

.phsc-root .badge.lost { background: #fbecec; color: var(--phsc-bad); }

.phsc-root .badge.won { background: #ebf6ee; color: var(--phsc-good); }

.phsc-root .offer-table { width: 100%; border-collapse: collapse; margin-top: 8px; }

.phsc-root .offer-table th, .phsc-root .offer-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--phsc-line); font-size: 14px; }

.phsc-root .offer-table td.right, .phsc-root .offer-table th.right { text-align: right; font-variant-numeric: tabular-nums; }

.phsc-root .offer-table tr.total td { font-weight: 700; border-bottom: none; padding-top: 14px; }

.phsc-root .login-card { max-width: 360px; margin: 80px auto; }

/* Inputs recap on the results page */
.phsc-root .recap-table { width: 100%; border-collapse: collapse; margin-top: 8px; }

.phsc-root .recap-table th, .phsc-root .recap-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--phsc-line); font-size: 14px; vertical-align: top; }

.phsc-root .recap-table thead th { color: var(--phsc-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

.phsc-root .recap-table td.right, .phsc-root .recap-table th.right { text-align: right; font-variant-numeric: tabular-nums; }

.phsc-root .recap-table tr.recap-group td { background: var(--phsc-bg); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--phsc-muted); }

.phsc-root .recap-def th { width: 42%; color: var(--phsc-muted); font-weight: 500; }

/* Battery-autonomy slider on the results page */
.phsc-root .autonomy-box { margin: 16px 0 4px; padding: 16px; border: 1px solid var(--phsc-line); border-radius: var(--phsc-radius); background: var(--phsc-surface); }

.phsc-root .autonomy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.phsc-root .autonomy-value { color: var(--phsc-primary); font-weight: 600; font-variant-numeric: tabular-nums; }

.phsc-root .autonomy-row { display: flex; align-items: center; gap: 12px; }

/* Range sliders (day/night share + battery autonomy): keep the native
   accent-color thumb but give the control a taller hit area so it's easy to
   grab on touch (the old 4px height made it a hairline target). */
.phsc-root input[type='range'] { width: 100%; accent-color: var(--phsc-primary); height: 28px; cursor: pointer; }

.phsc-root .autonomy-slider { flex: 1; }

.phsc-root .small { font-size: 12px; }

.phsc-root .linkbtn { background: none; border: none; padding: 0; margin-top: 8px; color: var(--phsc-primary); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }

/* "Why this configuration" rationale on the results page */
.phsc-root .why-block { margin: 16px 0 4px; padding: 16px 18px; border: 1px solid var(--phsc-line); border-left: 3px solid var(--phsc-primary); border-radius: var(--phsc-radius); background: var(--phsc-surface); }

.phsc-root .why-title { margin: 0 0 10px; font-size: 14px; }

.phsc-root .why-row { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 7px 0; border-top: 1px solid var(--phsc-line); }

.phsc-root .why-row:first-of-type { border-top: none; }

.phsc-root .why-label { font-weight: 600; font-size: 13px; color: var(--phsc-primary); }

.phsc-root .why-text { font-size: 14px; color: var(--phsc-text); line-height: 1.5; }

@media (max-width: 600px) {
 .phsc-root .why-row { grid-template-columns: 1fr; gap: 2px; }
 
}

/* ============================================================
   Mobile layout pass (phones). Reclaims horizontal space, scales
   headings, and pins the Back/Continue bar so it's always reachable
   on the long form steps. Keeps the desktop design untouched.
   ============================================================ */
@media (max-width: 600px) {

  .phsc-root .wrap { padding: 20px 14px 96px; }
   /* room at the bottom for the sticky bar */
  .phsc-root .card { padding: 18px 16px; border-radius: 12px; }

  .phsc-root h1 { font-size: 24px; }

  .phsc-root h2 { font-size: 20px; }

  .phsc-root h3 { margin-top: 20px; }

  .phsc-root p.lead { margin-bottom: 18px; }

  .phsc-root .brand { margin-bottom: 20px; gap: 12px; }

  .phsc-root .brand-logo { height: 38px; }

  .phsc-root .appliance-group { margin-bottom: 22px; }

  /* Sticky action bar: the primary CTA stays in reach on tall steps. The two
     buttons share the width; empty spacer <span>s (rendered when Back is
     hidden) collapse so the single button can stretch full-width. */
  .phsc-root .actions {
    position: sticky;
    bottom: 0;
    margin: 20px -16px -18px;     /* bleed to the card edges */
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--phsc-surface);
    border-top: 1px solid var(--phsc-line);
    box-shadow: 0 -2px 12px rgba(15, 33, 37, 0.05);
    z-index: 5;
  }

  .phsc-root .actions .btn { flex: 1 1 0; }

  .phsc-root .actions > span:empty { flex: 0; display: none; }

  /* The results page's actions (Start over / Print) and the contact step use
     the same class, so they get the same treatment automatically. */

}

/* Final tighten for very small phones (iPhone SE and similar). */
@media (max-width: 380px) {

  .phsc-root .wrap { padding: 16px 10px 96px; }

  .phsc-root .card { padding: 16px 12px; }

  .phsc-root h1 { font-size: 22px; }

  .phsc-root .actions { margin: 18px -12px -16px; padding-left: 12px; padding-right: 12px; }

}

/* ============================================================
   UI polish (v0.2.0): compact header selectors, region-step
   visuals, and a selected check-mark on choice cards.
   ============================================================ */

/* Compact, inline language + region selectors in the header.
   Overrides the full-width generic <select> style. */
.phsc-root .brand-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.phsc-root .brand-select {
  width: auto;
  min-height: 0;
  padding: 6px 26px 6px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--phsc-muted);
  background-color: var(--phsc-bg);
  border: 1px solid var(--phsc-line);
  border-radius: 8px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  max-width: 44vw;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235a6a6f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}

.phsc-root .brand-select:hover { color: var(--phsc-text); border-color: var(--phsc-primary); }

.phsc-root .brand-select:focus {
  outline: none;
  border-color: var(--phsc-primary);
  box-shadow: 0 0 0 3px rgba(14, 110, 110, 0.12);
}

/* Selected check-mark on any choice card (brand-tinted via mask). */
.phsc-root .choice { position: relative; }

.phsc-root .choice.selected::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 16px;
  height: 16px;
  background-color: var(--phsc-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Region cards on the intro get a brand-tinted map-pin badge + hover lift. */
.phsc-root .choice.region-choice { padding-top: 14px; }

.phsc-root .region-choice .choice-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--phsc-primary) 12%, #fff);
}

.phsc-root .region-choice .choice-ico::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: var(--phsc-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6a2.5 2.5 0 010 5.5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6a2.5 2.5 0 010 5.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.phsc-root .region-choice:hover { box-shadow: var(--phsc-shadow); transform: translateY(-1px); }

/* Language options render as compact inline pills, not full cards. */
.phsc-root .choices-inline { display: flex; flex-wrap: wrap; gap: 8px; }

.phsc-root .choices-inline .choice.lang-choice { padding: 8px 14px; border-radius: 999px; }

.phsc-root .choices-inline .lang-choice .choice-title { margin: 0; font-weight: 600; }

/* A corner check would crowd the small pill; the border + fill already signal it. */
.phsc-root .lang-choice.selected::after { display: none; }