/* Country-guide cost calculator — Figma JFLnawhi6priThp4fDRuTC 1772:9966.
   2026-09-15, Mo. Enqueued only on single `country` guides by
   inc/country-guide-cost-calc.php, so the .rp-cgcc namespace never reaches
   another page and nothing here needs page-scoping.

   Every value below is read from the frame, not estimated:
     card      border #D6E0FD, radius 16, padding 25/41, gap 48
     question  Mulish Bold 26/31.2 -0.52 #121212, salary in #114EF7
     hint      Medium 15/21.75 #6B6B6B
     track     h6 #F1F1F1 r20; fill #114EF7 h7; thumb 24 with a 4px white ring
     pill      border #D9D9D9 r99, padding 11/21, label SemiBold 13/18.85 #3C3C3C,
               value Bold 13 #121212; the "+N more" pill is #F0F4FE / #114EF7
     total     label SemiBold 13/18.85 #525252, figure Bold 44/44 -1.32 #114EF7
     button    #114EF7 r8, padding 14/24, Bold 16 white
     table     border #EBEBEB r12; head #FAFAFA, SemiBold 11/15.95 +0.66 upper
               #6B6B6B; rows border #F1F1F1 padding 14/20/15; name SemiBold
               14/20.3 #121212, note Medium 13/18.85 #6B6B6B, rate Medium 14
               #6B6B6B (120 wide), amount SemiBold 14 #121212 (140 wide)
     blur      3px + a top-transparent -> rgba(250,250,250,.9) veil at 60%
     unlock    1px #114EF7 r8, padding 16/32, Bold 13/18.85 #114EF7

   Typographic rules carry the block class twice to reach (0,2,0): the guide body
   is wrapped in .entry-content and qa-fixes-pages' `.wp-block-group h2 / h3 / p`
   is (0,1,1), which otherwise resizes the question and the table copy. Same
   trick the /cost-calculator sections use. */

.rp-cgcc {
  margin: 8px 0 40px;
  font-family: Mulish, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Idle card ─────────────────────────────────────────────────────────── */

.rp-cgcc__card {
  display: flex; align-items: center; gap: 48px;
  background: #fff; border: 1px solid #D6E0FD; border-radius: 16px;
  /* 24, not Figma's 41. Figma drew this card on /cost-calculator, where the
     container is wider. On a country guide it sits in the 840 content column
     next to .rp-cp-facts (padding-inline 24) and the prose (0), so 41 put the
     calculator's content 18px inside every other section's left edge —
     measured at 1440: calculator content x=522, fact tiles x=504, prose x=480.
     24 lines it up with the fact card, and matches what the mobile rule below
     already used. */
  padding: 25px 24px;
}
.rp-cgcc__main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

/* The guide body decorates every heading it contains — `.rp-cp-body h2` adds a
   4px #114EF7 left bar with 14px padding and a 48px top margin, `h3` its own
   size and colour (cp-body.css, specificity (0,1,1)). Those are BODY-COPY
   section styles; the headings in this card are component headings, so the
   decoration is cancelled rather than inherited. The question stays an <h2> for
   document structure. (0,2,0) beats (0,1,1). */
.rp-cgcc .rp-cgcc__q,
.rp-cgcc .rp-cgcc__bd-h,
.rp-cgcc .rp-cgcc__modal-h {
  border-left: 0; border-right: 0; padding-left: 0; padding-right: 0;
}

.rp-cgcc .rp-cgcc__q {
  font-size: 26px; line-height: 31.2px; font-weight: 700; letter-spacing: -0.52px;
  color: #121212; margin: 0;
}
.rp-cgcc__q-salary { color: #114EF7; }

.rp-cgcc .rp-cgcc__hint {
  font-size: 15px; line-height: 21.75px; font-weight: 500; color: #6B6B6B; margin: 0;
}

/* ── Slider ────────────────────────────────────────────────────────────────
   Native range input rather than a JS widget: it is keyboard accessible for
   free, announces its value, and supports touch drag without any code. The
   filled portion is painted with a gradient the JS updates, because a range
   input has no standard "fill" pseudo-element across browsers. */
.rp-cgcc__slider-wrap { display: block; }
.rp-cgcc__slider {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 6px; margin: 0;
  border-radius: 20px; background: #F1F1F1; cursor: pointer;
}
.rp-cgcc__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 20px;
  background: #114EF7; border: 4px solid #fff;
  box-shadow: 0 2px 2px rgba(0,0,0,.1), 0 4px 3px rgba(0,0,0,.1);
  cursor: grab;
}
.rp-cgcc__slider::-webkit-slider-thumb:active { cursor: grabbing; }
.rp-cgcc__slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 20px;
  background: #114EF7; border: 4px solid #fff;
  box-shadow: 0 2px 2px rgba(0,0,0,.1), 0 4px 3px rgba(0,0,0,.1);
  cursor: grab;
}
.rp-cgcc__slider::-moz-range-track { height: 6px; border-radius: 20px; background: transparent; }
.rp-cgcc__slider:focus-visible { outline: 2px solid #114EF7; outline-offset: 4px; }

/* ── Contribution pills ────────────────────────────────────────────────── */

.rp-cgcc__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-cgcc__pill {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid #D9D9D9; border-radius: 99px; padding: 11px 21px;
  font-size: 13px; line-height: 18.85px; white-space: nowrap;
}
.rp-cgcc__pill-name { font-weight: 600; color: #3C3C3C; }
.rp-cgcc__pill-val  { font-weight: 700; color: #121212; }
.rp-cgcc__pill--more {
  border-color: transparent; background: #F0F4FE; color: #114EF7;
  font-weight: 600; padding: 10px 20px 12px; gap: 4px;
}

/* ── Loading skeletons ─────────────────────────────────────────────────────
   The first quote is a network round trip. Without placeholders the total and
   the pills row start empty and then pop in, which both flashes and reflows the
   card. These occupy the right space from the first paint and are replaced
   wholesale by the first successful quote — subsequent slider drags update the
   text in place, so the shimmer is never seen again. */
.rp-cgcc__skel {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
  background-size: 400% 100%;
  animation: rp-cgcc-shimmer 1.4s ease-in-out infinite;
}
@keyframes rp-cgcc-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
/* Sized to the real figure so the swap does not move anything: the total is
   44px tall and about 190 wide at six digits. */
.rp-cgcc__skel--total { width: 190px; height: 44px; margin-inline-start: auto; }

.rp-cgcc__pill--skel {
  border-color: transparent; padding: 0; height: 41px;
  background: linear-gradient(90deg, #EEF1F6 25%, #F7F9FC 37%, #EEF1F6 63%);
  background-size: 400% 100%;
  animation: rp-cgcc-shimmer 1.4s ease-in-out infinite;
}
/* Three different widths so the row reads as content rather than as three
   identical blocks. */
.rp-cgcc__pill--skel:nth-child(1) { width: 190px; }
.rp-cgcc__pill--skel:nth-child(2) { width: 150px; }
.rp-cgcc__pill--skel:nth-child(3) { width: 130px; }

/* ── Total + CTA ───────────────────────────────────────────────────────── */

.rp-cgcc__side {
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center; gap: 32px; text-align: end;
}
.rp-cgcc .rp-cgcc__total-label {
  font-size: 13px; line-height: 18.85px; font-weight: 600; color: #525252;
  margin: 0 0 12px; white-space: nowrap;
}
.rp-cgcc .rp-cgcc__total {
  font-size: 44px; line-height: 44px; font-weight: 700; letter-spacing: -1.32px;
  color: #114EF7; margin: 0; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* The label and figure are one visual group; the 32px gap belongs between that
   group and the button, so the label carries its own 12px and the gap is reset. */
.rp-cgcc__side > .rp-cgcc__total { margin-top: -32px; }

.rp-cgcc__btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: #114EF7; color: #fff; border: 0; border-radius: 8px;
  padding: 14px 24px; font: 700 16px/1 Mulish, sans-serif; cursor: pointer;
  white-space: nowrap; transition: background .15s ease;
}
.rp-cgcc__btn:hover { background: #0B3FCC; color: #fff; }
.rp-cgcc__btn:focus-visible { outline: 2px solid #114EF7; outline-offset: 3px; }
.rp-cgcc__btn[hidden] { display: none; }

/* ── Breakdown ─────────────────────────────────────────────────────────── */

.rp-cgcc__breakdown { position: relative; margin-top: 16px; }
.rp-cgcc__breakdown[hidden] { display: none; }

.rp-cgcc__bd-inner { display: flex; flex-direction: column; gap: 20px; }
/* The heading takes tabindex="-1" so focus can be moved here after the gate is
   submitted. That is a programmatic move, not a keyboard one, so the default
   ring is suppressed — :focus-visible still shows it if someone genuinely tabs
   here, so nothing is lost for keyboard users. */
.rp-cgcc__bd-h:focus { outline: none; }
.rp-cgcc__bd-h:focus-visible { outline: 2px solid #114EF7; outline-offset: 4px; }
.rp-cgcc .rp-cgcc__bd-h {
  font-size: 22px; line-height: 26.4px; font-weight: 700; letter-spacing: -0.22px;
  color: #121212; margin: 0;
}
.rp-cgcc .rp-cgcc__bd-sub {
  font-size: 15px; line-height: 21.75px; font-weight: 500; color: #6B6B6B;
  margin: -14px 0 0; /* frame gap is 6 from the heading, not the 20 flex gap */
}
.rp-cgcc .rp-cgcc__bd-sub strong { font-weight: 600; color: #121212; }

.rp-cgcc__table { background: #fff; border: 1px solid #EBEBEB; border-radius: 12px; overflow: hidden; }
.rp-cgcc__thead, .rp-cgcc__row { display: flex; align-items: center; padding: 14px 20px 15px; }
.rp-cgcc__thead {
  background: #FAFAFA; border-bottom: 1px solid #EBEBEB;
  padding: 11px 20px 13px; align-items: flex-start;
}
.rp-cgcc__th {
  font-size: 11px; line-height: 15.95px; font-weight: 600;
  letter-spacing: 0.66px; text-transform: uppercase; color: #6B6B6B;
}
.rp-cgcc__th--item { flex: 1 1 0; min-width: 0; }
.rp-cgcc__th--rate { flex: 0 0 120px; text-align: end; }
.rp-cgcc__th--amt  { flex: 0 0 140px; text-align: end; }

.rp-cgcc__row { border-bottom: 1px solid #F1F1F1; }
.rp-cgcc__row:last-child { border-bottom: 0; }
.rp-cgcc__cell-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-cgcc__item-name { font-size: 14px; line-height: 20.3px; font-weight: 600; color: #121212; }
.rp-cgcc__item-note { font-size: 13px; line-height: 18.85px; font-weight: 500; color: #6B6B6B; }
.rp-cgcc__cell-rate {
  flex: 0 0 120px; text-align: end;
  font-size: 14px; line-height: 20.3px; font-weight: 500; color: #6B6B6B;
  font-variant-numeric: tabular-nums;
}
.rp-cgcc__cell-amt {
  flex: 0 0 140px; text-align: end;
  font-size: 14px; line-height: 20.3px; font-weight: 600; color: #121212;
  font-variant-numeric: tabular-nums;
}
/* Total row — not in the frame's blurred state but present once unlocked, so the
   table does not end on a contribution line with no sum. */
.rp-cgcc__row--total { background: #FAFAFA; border-top: 1px solid #EBEBEB; }

/* ── RTL ───────────────────────────────────────────────────────────────────
   Everything directional above uses logical properties, so the only things
   needing an explicit flip are the two that cannot: the mobile stacked side
   column (text-align: left is correct there in LTR, start in both) and the
   slider fill, which is a background gradient and is handled in JS by flipping
   the angle to 270deg. */
[dir="rtl"] .rp-cgcc__modal-card,
[dir="rtl"] .rp-cgcc__field { text-align: right; }
[dir="rtl"] .rp-cgcc .rp-cgcc__fine { text-align: center; }
.rp-cgcc__row--total .rp-cgcc__item-name,
.rp-cgcc__row--total .rp-cgcc__cell-amt { font-weight: 700; color: #021143; }

/* ── Locked state ──────────────────────────────────────────────────────────
   The blur is on the CONTENT, the veil is a sibling. Blurring a parent that
   also holds the unlock button would blur the button with it. */
.rp-cgcc__breakdown.is-locked .rp-cgcc__bd-inner {
  filter: blur(3px); user-select: none; pointer-events: none;
  max-height: 415px; overflow: hidden;
}
.rp-cgcc__veil { display: none; }
.rp-cgcc__breakdown.is-locked .rp-cgcc__veil {
  display: block; position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(180deg, rgba(250,250,250,0) 0%, rgba(250,250,250,.9) 60%);
  pointer-events: none;
}
.rp-cgcc__unlock {
  display: none;
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%);
  background: #fff; border: 1px solid #114EF7; border-radius: 8px;
  padding: 16px 32px; font: 700 13px/18.85px Mulish, sans-serif; color: #114EF7;
  cursor: pointer; white-space: nowrap; transition: background .15s ease;
}
.rp-cgcc__breakdown.is-locked .rp-cgcc__unlock { display: block; }
.rp-cgcc__unlock:hover { background: #F0F4FE; color: #114EF7; }
.rp-cgcc__unlock:focus-visible { outline: 2px solid #114EF7; outline-offset: 3px; }

/* ── Lead gate modal ───────────────────────────────────────────────────── */

.rp-cgcc__modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rp-cgcc__modal[hidden] { display: none; }
.rp-cgcc__modal-backdrop { position: absolute; inset: 0; background: rgba(2,17,67,.45); }
.rp-cgcc__modal-card {
  position: relative; width: 100%; max-width: 440px;
  background: #fff; border-radius: 16px; padding: 32px;
  box-shadow: 0 24px 60px rgba(2,17,67,.22);
}
.rp-cgcc__modal-x {
  position: absolute; top: 12px; inset-inline-end: 14px;
  background: none; border: 0; font-size: 26px; line-height: 1; color: #98A2B3; cursor: pointer;
}
.rp-cgcc__modal-x:hover { color: #121212; }
.rp-cgcc__modal-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; background: #F0F4FE; margin-bottom: 16px;
}
.rp-cgcc .rp-cgcc__modal-h { font-size: 20px; line-height: 26px; font-weight: 700; color: #121212; margin: 0 0 8px; }
.rp-cgcc .rp-cgcc__modal-p { font-size: 14px; line-height: 21px; font-weight: 500; color: #6B6B6B; margin: 0 0 20px; }

.rp-cgcc__form { display: flex; flex-direction: column; gap: 12px; }
.rp-cgcc__field {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #E4E7EC; border-radius: 8px; padding: 12px 14px; background: #fff;
}
.rp-cgcc__field:focus-within { border-color: #114EF7; }
.rp-cgcc__field svg { flex: none; }
.rp-cgcc__field input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none;
  font: 500 14px/20px Mulish, sans-serif; color: #121212;
}
.rp-cgcc__field input::placeholder { color: #98A2B3; }
.rp-cgcc__field.is-invalid { border-color: #DE2626; }

.rp-cgcc__submit {
  background: #114EF7; color: #fff; border: 0; border-radius: 8px;
  padding: 14px 20px; font: 700 15px/1 Mulish, sans-serif; cursor: pointer;
  transition: background .15s ease;
}
.rp-cgcc__submit:hover { background: #0B3FCC; color: #fff; }
.rp-cgcc__submit[disabled] { opacity: .6; cursor: default; }
.rp-cgcc .rp-cgcc__fine { font-size: 12px; line-height: 18px; color: #98A2B3; text-align: center; margin: 4px 0 0; }
.rp-cgcc .rp-cgcc__error { font-size: 13px; line-height: 18px; color: #DE2626; margin: 0; }
.rp-cgcc__error[hidden] { display: none; }

/* ── Responsive ────────────────────────────────────────────────────────────
   No tablet or mobile frame was supplied. Below 900 the card stacks and the
   total group moves left-aligned above the button; below 700 the rate column
   is dropped from the table rather than squeezed, because the amount is the
   number people came for. */
@media (max-width: 900px) {
  .rp-cgcc__card { flex-direction: column; align-items: stretch; gap: 24px; padding: 24px; }
  .rp-cgcc__side { align-items: stretch; text-align: start; gap: 20px; }
  .rp-cgcc__side > .rp-cgcc__total { margin-top: -20px; }
  .rp-cgcc__btn { width: 100%; }
  .rp-cgcc .rp-cgcc__q { font-size: 22px; line-height: 28px; }
  .rp-cgcc .rp-cgcc__total { font-size: 36px; line-height: 36px; }
}
@media (max-width: 700px) {
  .rp-cgcc__th--rate, .rp-cgcc__cell-rate { display: none; }
  .rp-cgcc__th--amt, .rp-cgcc__cell-amt { flex: 0 0 110px; }
  .rp-cgcc__thead, .rp-cgcc__row { padding: 12px 14px; }
  .rp-cgcc__unlock { white-space: normal; max-width: 86%; text-align: center; padding: 14px 20px; }
  .rp-cgcc__modal-card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-cgcc__btn, .rp-cgcc__submit, .rp-cgcc__unlock { transition: none; }
  /* Keep the placeholder shape — it is what stops the reflow — but drop the
     travelling highlight. */
  .rp-cgcc__skel, .rp-cgcc__pill--skel { animation: none; background: #EEF1F6; }
}

/* Mobile: match .rp-cp-facts, which drops to padding-inline 16 below 768.
   The card's own responsive block breaks at 900 and stays at 24, so at 360 the
   calculator's content sat at x=41 against the fact tiles' x=32 — measured.
   Same 16 here closes it. */
@media (max-width: 767.98px) {
  .rp-cgcc__card { padding-inline: 16px; }
}