/* =========================================================================
   WhatsApp cost calculator — a calculator device

   The whole thing is one object: a dark body with a bevelled edge, two
   selectors moulded into the top plate, an LCD-style screen, and raised keys
   that depress when pressed. Everything the visitor needs is inside the device,
   so there is no "form over here, answer over there" split to follow.

   The screen is the only place numbers live, so its type is tabular — digits
   must not shift sideways as the total changes, the way they would on a real
   display.

   Plain CSS on purpose — the Tailwind sheet is compiled (build/README.md).
   ========================================================================= */

.wc-stage {
  display: flex;
  justify-content: center;
  padding: 3.5rem 1.25rem 1.5rem;
}

/* ---- the device ---- */
.wc-calc {
  width: 100%;
  max-width: 26rem;
  padding: 1.125rem;
  border-radius: 2rem;
  background: linear-gradient(165deg, #23282F 0%, #14181D 42%, #0B0E12 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 -1px 0 rgba(0, 0, 0, 0.5) inset,
    0 40px 70px -30px rgba(0, 0, 0, 0.85),
    0 10px 24px -14px rgba(0, 0, 0, 0.7);
}

/* ---- brand strip ---- */
.wc-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.375rem 0.875rem;
}

.wc-brand-name {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #E2E8F0;
}

.wc-brand-name i, .wc-brand-name svg { width: 0.9375rem; height: 0.9375rem; color: #D4FB0A; }

.wc-brand-tag {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #64748B;
}

/* ---- top plate: country + currency ---- */
.wc-plate {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.75rem;
  margin-bottom: 0.875rem;
  border-radius: 1.125rem;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) inset;
}

.wc-field { display: flex; flex-direction: column; gap: 0.3125rem; min-width: 0; }

.wc-field > label {
  padding-inline-start: 0.25rem;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #7C8798;
}

.wc-select-wrap { position: relative; }

.wc-select {
  width: 100%;
  padding: 0.5625rem 0.75rem;
  padding-inline-end: 1.875rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  background: #171C22;
  color: #E9EEF5;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
  text-overflow: ellipsis;
}

.wc-select:focus-visible {
  outline: none;
  border-color: #D4FB0A;
  box-shadow: 0 0 0 3px rgba(212, 251, 10, 0.2);
}

/* painted so it mirrors with the direction instead of an <img> */
.wc-select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.75rem;
  top: 50%;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-top: -0.3rem;
  border-right: 2px solid #7C8798;
  border-bottom: 2px solid #7C8798;
  transform: rotate(45deg);
  pointer-events: none;
}

.wc-market-note {
  grid-column: 1 / -1;
  margin: 0;
  padding-inline-start: 0.25rem;
  font-size: 0.625rem;
  line-height: 1.6;
  color: #64748B;
}

/* ---- the screen ---- */
.wc-screen {
  position: relative;
  padding: 1rem 1.125rem 1.125rem;
  margin-bottom: 1rem;
  border-radius: 1.125rem;
  background: linear-gradient(170deg, #0D1710 0%, #0A1310 60%, #070D0A 100%);
  border: 1px solid rgba(212, 251, 10, 0.14);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 6px 18px rgba(0, 0, 0, 0.55) inset;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  transition: box-shadow 0.2s;
}

/* faint glass sheen across the top of the display */
.wc-screen::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
  pointer-events: none;
}

.wc-screen.is-confirm { animation: wc-confirm 0.42s ease-out; }
.wc-screen.is-error { animation: wc-error 0.42s ease-out; }

@keyframes wc-confirm {
  0%   { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.55) inset; }
  35%  { box-shadow: 0 0 0 2px rgba(212,251,10,.75), 0 0 26px rgba(212,251,10,.35); }
  100% { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.55) inset; }
}

@keyframes wc-error {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* entry line — what the keypad is typing */
.wc-entry-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.6875rem;
  border-bottom: 1px dashed rgba(212, 251, 10, 0.2);
}

.wc-entry-label {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #5C7A5F;
}

.wc-entry {
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.2;
  color: #9FE870;
  text-shadow: 0 0 12px rgba(159, 232, 112, 0.35);
  direction: ltr;
  unicode-bidi: isolate;
}

/* the answer */
.wc-answer { padding-top: 0.875rem; }

.wc-answer-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #16A34A;
}

.wc-total-line {
  display: flex;
  align-items: baseline;
  gap: 0.4375rem;
  margin-top: 0.25rem;
  direction: ltr;
  justify-content: flex-end;
}

.wc-total {
  font-size: clamp(2rem, 9vw, 2.75rem);
  font-weight: 900;
  line-height: 1.1;
  color: #D4FB0A;
  text-shadow: 0 0 18px rgba(212, 251, 10, 0.3);
  word-break: break-all;
}

.wc-total-sym {
  font-size: 1rem;
  font-weight: 800;
  color: #9FE870;
}

.wc-summary {
  margin: 0.4375rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.75;
  color: #7E9A82;
}

.wc-unit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.875rem;
  padding: 0.5625rem 0.75rem;
  border-radius: 0.75rem;
  background: rgba(212, 251, 10, 0.08);
  border: 1px solid rgba(212, 251, 10, 0.16);
}

.wc-unit-row span { font-size: 0.6875rem; font-weight: 700; color: #9FE870; }
.wc-unit-row strong { font-size: 0.875rem; font-weight: 900; color: #D4FB0A; direction: ltr; }

.wc-fx-note {
  margin: 0.6875rem 0 0;
  font-size: 0.625rem;
  line-height: 1.7;
  color: #5C7A5F;
}

/* ---- keypad ---- */
.wc-keypad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.wc-key {
  position: relative;
  padding: 0.9375rem 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.9375rem;
  background: linear-gradient(180deg, #2A3038 0%, #1C2128 100%);
  color: #E9EEF5;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 3px 0 #10141A,
    0 5px 10px -4px rgba(0, 0, 0, 0.7);
  transition: transform 0.06s ease, box-shadow 0.06s ease, background-color 0.18s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.wc-key:hover { background: linear-gradient(180deg, #323944 0%, #232932 100%); }

/* the press: the key travels down and its shadow collapses under it */
.wc-key:active,
.wc-key.is-active {
  transform: translateY(3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 #10141A,
    0 2px 4px -2px rgba(0, 0, 0, 0.7);
}

.wc-key:focus-visible {
  outline: none;
  border-color: #D4FB0A;
  box-shadow:
    0 0 0 3px rgba(212, 251, 10, 0.28),
    0 3px 0 #10141A;
}

.wc-key i, .wc-key svg { width: 1.0625rem; height: 1.0625rem; }

/* key roles */
.wc-key--fn {
  background: linear-gradient(180deg, #3A3038 0%, #2A2128 100%);
  color: #FCA5A5;
  font-size: 0.9375rem;
}
.wc-key--fn:hover { background: linear-gradient(180deg, #453840 0%, #33272E 100%); }

.wc-key--preset {
  background: linear-gradient(180deg, #26302A 0%, #1A211D 100%);
  color: #9FE870;
  font-size: 0.8125rem;
}
.wc-key--preset:hover { background: linear-gradient(180deg, #2E3A31 0%, #202824 100%); }

.wc-key--eq {
  grid-column: span 2;
  background: linear-gradient(180deg, #D4FB0A 0%, #B4D608 100%);
  color: #0B0E12;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 3px 0 #7E9705,
    0 6px 14px -6px rgba(212, 251, 10, 0.55);
}
.wc-key--eq:hover { background: linear-gradient(180deg, #E2FF38 0%, #C2E60A 100%); }
.wc-key--eq:active,
.wc-key--eq.is-active {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 0 0 #7E9705,
    0 2px 6px -3px rgba(212, 251, 10, 0.5);
}

.wc-key--wide { grid-column: span 2; }

.wc-kbd-hint {
  margin: 0.875rem 0 0;
  text-align: center;
  font-size: 0.625rem;
  line-height: 1.7;
  color: #5A6472;
}

/* ---- other categories, read-only ---- */
.wc-other {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: 26rem;
  margin: 1.25rem auto 0;
}

.wc-other span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--wc-border, rgba(15, 23, 42, 0.12));
  border-radius: 9999px;
  background: var(--wc-surface-2, #F5F7F1);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--wc-text, #0F172A);
}

.wc-other b { font-weight: 800; color: var(--wc-text-soft, #64748B); }

/* ---- explanatory notes below the device ---- */
.wc-wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem 4.5rem;
}

.wc-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
  margin-top: 2.5rem;
}

.wc-note {
  padding: 1.125rem;
  border: 1px solid var(--wc-border, rgba(15, 23, 42, 0.1));
  border-radius: 1.125rem;
  background: var(--wc-surface-2, #F5F7F1);
}

.wc-note-ico {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.625rem;
  border-radius: 0.75rem;
  background: rgba(22, 163, 74, 0.12);
  color: #16A34A;
}

.wc-note-ico i, .wc-note-ico svg { width: 1rem; height: 1rem; }

.wc-note h3 {
  margin: 0 0 0.375rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--wc-text, #0F172A);
}

.wc-note p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.85;
  color: var(--wc-text-soft, #64748B);
}

.wc-source {
  margin: 1.5rem 0 0;
  font-size: 0.6875rem;
  line-height: 1.9;
  color: var(--wc-text-faint, #94A3B8);
  text-align: center;
}

.wc-source a { color: #16A34A; text-decoration: underline; }

.wc-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
}

/* ---- dark mode (the device is already dark; the page around it is not) ---- */
body.dark-mode {
  --wc-border: rgba(148, 163, 184, 0.18);
  --wc-surface-2: rgba(255, 255, 255, 0.03);
  --wc-text: #E9EEF5;
  --wc-text-soft: #94A3B8;
  --wc-text-faint: #7C8798;
}

/* ---- responsive ---- */
@media (max-width: 767px) {
  .wc-notes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .wc-stage { padding: 2.5rem 0.875rem 1.25rem; }
  .wc-calc { padding: 0.875rem; border-radius: 1.5rem; }
  .wc-plate { grid-template-columns: minmax(0, 1fr); }
  .wc-key { padding: 0.8125rem 0.25rem; font-size: 1rem; }
  .wc-keypad { gap: 0.4375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wc-key { transition: none; }
  .wc-screen.is-confirm, .wc-screen.is-error { animation: none; }
}

/* On a wide screen a 26rem device alone on white reads as an empty page rather
   than a deliberately staged object. A soft pool of light under it gives the
   calculator something to sit on without boxing it in. */
.wc-stage {
  position: relative;
  isolation: isolate;
}

.wc-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 3rem;
  width: min(46rem, 92vw);
  height: min(34rem, 70%);
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(22, 163, 74, 0.1), rgba(22, 163, 74, 0) 68%);
  pointer-events: none;
}

body.dark-mode .wc-stage::before {
  background: radial-gradient(ellipse at center, rgba(212, 251, 10, 0.07), rgba(212, 251, 10, 0) 68%);
}

@media (prefers-reduced-motion: no-preference) {
  .wc-calc { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
}

/* Cards carrying a dated warning rather than a standing fact. Amber, not red:
   this is a change to plan for, not a failure. */
.wc-note-alert { border-color: rgba(217, 119, 6, .38); background: rgba(251, 191, 36, .08); }
.wc-note-alert .wc-note-ico { color: #b45309; background: rgba(251, 191, 36, .2); }
.wc-note-alert strong { font-weight: 900; }
body.dark-mode .wc-note-alert { border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.07); }
body.dark-mode .wc-note-alert .wc-note-ico { color: #fcd34d; background: rgba(251,191,36,.16); }