/* Pricing calculator — pricing.html / precios.html
 *
 * Built on the template's own section-contact-form pattern: the input side
 * reuses .form-contact / fieldset / label styling so it reads as a sibling of
 * the quote form below it. Only two things are custom — the numeric steppers
 * (the template has no such control) and the dark result panel, which is the
 * one dark surface on the section so the number carries the emphasis.
 *
 * Brand: Base #0D211E, Surface #17453B, Mint #9FE6AC, Ember #F0763A,
 * Off-White #F7FAF8, Muted #A7BCB7. Ember is the single action per view and is
 * never used for text below 24px.
 */

/* ---- Tier choice ---- */
.rk-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
@media (max-width: 575.98px) { .rk-tiers { grid-template-columns: 1fr; } }

.rk-tier {
  /* display:block is load-bearing: the template gives <button> a flex layout,
     which lays these stacked divs out side by side and overlaps them. */
  display: block; width: 100%; height: 100%;
  text-align: left; cursor: pointer;
  background: var(--white, #fff);
  border: 1.5px solid rgba(13, 33, 30, .12);
  border-radius: 16px; padding: 20px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.rk-tier > * { display: block; width: 100%; }
.rk-tier:hover { border-color: rgba(13, 33, 30, .28); }
.rk-tier[aria-pressed="true"] {
  border-color: #17453B;
  box-shadow: 0 2px 12px rgba(13, 33, 30, .10);
}
.rk-tier__name { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.rk-tier__price { font-size: 30px; font-weight: 600; line-height: 1.1; color: #17453B; }
.rk-tier__unit { font-size: 13px; opacity: .65; margin-bottom: 10px; }
.rk-tier__sla { font-size: 13px; line-height: 1.55; opacity: .75; }

/* ---- Numeric stepper (no template equivalent) ---- */
.rk-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 0;
  border-bottom: 1px solid rgba(13, 33, 30, .08);
}
.rk-row:last-of-type { border-bottom: 0; }
.rk-row__label { flex: 1; }
.rk-row__label label { font-weight: 600; font-size: 15px; display: block; margin-bottom: 2px; }
.rk-row__hint { font-size: 13px; line-height: 1.55; opacity: .65; }

/* On narrow screens the fixed-width stepper squeezes the label column hard
   enough that hints wrap to eight lines and short labels break mid-phrase.
   Stack instead: label full width, stepper beneath it on the right. */
@media (max-width: 575.98px) {
  .rk-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .rk-row .rk-stepper { align-self: flex-end; }
}

.rk-stepper { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.rk-stepper button {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(13, 33, 30, .16);
  background: var(--white, #fff); color: #17453B;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .18s ease;
}
.rk-stepper button:hover { border-color: #17453B; }
.rk-stepper button:disabled { opacity: .3; cursor: not-allowed; }
.rk-stepper input {
  width: 64px; height: 36px; text-align: center;
  border: 1.5px solid rgba(13, 33, 30, .16); border-radius: 10px;
  font-size: 15px; font-weight: 600; -moz-appearance: textfield;
}
.rk-stepper input::-webkit-outer-spin-button,
.rk-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.rk-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; cursor: pointer; }
.rk-check input { margin-top: 3px; accent-color: #17453B; width: 17px; height: 17px; flex-shrink: 0; }
.rk-check span { font-size: 15px; line-height: 1.5; }

/* Honeypot — off-screen, never display:none (bots skip hidden fields). */
.rk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Result panel: the one dark surface, so the number leads ---- */
.rk-result {
  background: #0D211E; color: #F7FAF8;
  border-radius: 24px; padding: 32px;
  position: sticky; top: 24px; overflow: hidden;
}
.rk-result::after {          /* single mint glow, centre off-canvas */
  content: ''; position: absolute; pointer-events: none;
  width: 360px; height: 360px; right: -160px; top: -160px;
  background: radial-gradient(circle, rgba(159,230,172,.16) 0%, rgba(159,230,172,0) 70%);
}
.rk-result > * { position: relative; z-index: 1; }
@media (max-width: 991.98px) { .rk-result { position: static; padding: 24px; } }

.rk-result__label {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: #9FE6AC; margin-bottom: 10px;
}
.rk-result__range {
  font-size: 38px; font-weight: 600; line-height: 1.15;
  color: #F7FAF8; word-break: break-word;
}
@media (max-width: 575.98px) { .rk-result__range { font-size: 30px; } }
.rk-result__empty { font-size: 15px; line-height: 1.6; color: #A7BCB7; }
.rk-result__note { font-size: 13px; line-height: 1.6; color: #A7BCB7; margin: 16px 0 0; }
.rk-result__min {
  font-size: 13px; line-height: 1.6; color: #9FE6AC; margin: 14px 0 0;
  padding: 10px 12px; background: rgba(159,230,172,.08); border-radius: 10px;
}

.rk-lines {
  list-style: none; margin: 20px 0 0; padding: 18px 0 0;
  border-top: 1px solid rgba(159,230,172,.18);
}
.rk-lines li {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 14px; padding: 7px 0;
}
.rk-lines li span:last-child {
  color: #9FE6AC; white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ---- Actions ---- */
.rk-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.rk-btn-primary {
  display: block; width: 100%; text-align: center;
  background: #F0763A; color: #0D211E;
  font-size: 16px; font-weight: 600;
  border: none; border-radius: 999px; padding: 15px 24px;
  cursor: pointer; text-decoration: none; transition: filter .18s ease;
}
.rk-btn-primary:hover { filter: brightness(1.06); color: #0D211E; }
.rk-btn-ghost {
  display: block; width: 100%; text-align: center;
  background: transparent; color: #9FE6AC;
  font-size: 15px; font-weight: 500;
  border: 1px solid rgba(159,230,172,.35); border-radius: 999px;
  padding: 13px 24px; cursor: pointer; text-decoration: none;
  transition: border-color .18s ease;
}
.rk-btn-ghost:hover { border-color: #9FE6AC; color: #9FE6AC; }

/* Inline email panel — not a modal, so there is no focus trap to get wrong. */
.rk-email-panel { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(159,230,172,.18); }
.rk-email-panel[hidden] { display: none; }
.rk-email-panel input[type="text"],
.rk-email-panel input[type="email"] {
  width: 100%; height: 46px; margin-bottom: 10px; padding: 0 14px;
  background: #17453B; border: 1px solid rgba(159,230,172,.18);
  border-radius: 10px; color: #F7FAF8; font-size: 15px;
}
.rk-email-panel input::placeholder { color: #7E938D; }
.rk-privacy { font-size: 12px; line-height: 1.6; color: #A7BCB7; margin: 12px 0 0; }
.rk-privacy a { color: #9FE6AC; text-decoration: underline; }

.rk-status { font-size: 14px; line-height: 1.6; margin-top: 14px; }
.rk-status.is-ok { color: #9FE6AC; }
.rk-status.is-error { color: #F0763A; font-size: 15px; }

.rk-result :focus-visible { outline: 2px solid #9FE6AC; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .rk-tier, .rk-btn-primary, .rk-btn-ghost, .rk-stepper button { transition: none; }
}

/* Spacing utilities. The template markup references mt-8/mt-12/mt-40 but never
   defines them, so the calculator uses its own rather than inherit dead classes. */
.rk-mt-12 { margin-top: 12px; }
.rk-mt-40 { margin-top: 40px; }