/* CheckInSIM — components.css
 * Composed components. All consume tokens.css. */

/* ----- Layout chrome ----- */
.container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
}

/* ----- Brand mark + wordmark ----- */
.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand-mark {
  width: 36px; height: 36px;
  background: var(--navy);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-mark::before {
  content: ""; position: absolute;
  left: 4px; right: 4px; top: 17px; height: 1px;
  background-image: linear-gradient(90deg, var(--canvas) 50%, transparent 50%);
  background-size: 4px 1px;
}
.brand-mark::after {
  content: "C"; color: var(--canvas);
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  margin-top: -8px; letter-spacing: -0.02em;
}
.brand-mark.green { background: var(--green); }
.brand-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px;
  color: var(--navy); letter-spacing: -0.02em;
}
.brand-name .dot { color: var(--green); }

/* ----- Navigation ----- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--hairline);
  background: var(--canvas);
  position: sticky; top: 0; z-index: 50;
}
.nav-links { display: flex; gap: 32px; font-size: 15px; color: var(--ink); font-weight: 500; }
.nav-links a { color: inherit; text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; }
.nav-links a:hover { border-bottom-color: var(--green); }
.nav-links a.active { color: var(--navy); border-bottom-color: var(--green); }

/* ----- Footer ----- */
.footer {
  border-top: 1px solid var(--hairline);
  padding: var(--space-12) clamp(20px, 4vw, 64px) var(--space-8);
  margin-top: var(--space-20);
  background: var(--paper);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-12);
  max-width: var(--max-content);
  margin: 0 auto;
}
.footer h4 {
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-4);
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer a { color: var(--ink); text-decoration: none; font-size: 14px; }
.footer-meta {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4);
  color: var(--muted);
  font-size: 12px;
  max-width: var(--max-content);
  margin-left: auto; margin-right: auto;
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 24px;
  border-radius: var(--r-lg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border: none; cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
  white-space: nowrap;
}
.btn-sm { padding: 10px 16px; font-size: 14px; gap: 8px; }
.btn-primary {
  background: var(--green); color: var(--canvas);
  box-shadow: var(--shadow-green);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost {
  background: var(--paper); color: var(--navy);
  border: 1px solid var(--hairline);
  font-weight: 600;
}
.btn-dark {
  background: var(--navy); color: var(--canvas);
}
.btn-pill { border-radius: var(--r-pill); }
.btn-block { width: 100%; justify-content: center; }
.btn-link {
  background: none; border: none; color: var(--navy);
  font-weight: 600; padding: 8px 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-color: var(--green);
}

.icon-whatsapp::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.6 6.4A8 8 0 0 0 4 17l-1 4 4-1A8 8 0 0 0 17.6 6.4ZM12.9 18.5a6.5 6.5 0 0 1-3.3-.9l-2.6.7.7-2.5A6.5 6.5 0 1 1 12.9 18.5Zm3.7-4.9c-.2-.1-1.2-.6-1.4-.6s-.3 0-.5.2l-.7.7c-.1.1-.2.2-.5 0a5.4 5.4 0 0 1-1.6-1c-.6-.5-1-1.2-1.1-1.4 0-.2 0-.4.2-.5l.4-.4.2-.4v-.4l-.6-1.4c-.1-.4-.3-.3-.5-.3h-.4a.7.7 0 0 0-.5.2 2 2 0 0 0-.7 1.5 3.5 3.5 0 0 0 .8 2A8 8 0 0 0 13 16c.5.2.9.4 1.2.4.5 0 1-.1 1.3-.5.4-.4.4-.8.3-1Z'/></svg>") no-repeat center;
  -webkit-mask-size: contain;
}

/* ----- Eyebrow ----- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--mint); color: var(--green-dark);
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 14px; border-radius: var(--r-pill);
  margin-bottom: var(--space-6);
}
.eyebrow.live::before {
  content: ""; width: 8px; height: 8px; background: var(--green); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(22, 199, 132, 0.18);
}

/* ----- Headings ----- */
.h-display {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(46px, 5.4vw, 80px);
  line-height: 1.02; letter-spacing: -0.035em;
  color: var(--navy);
}
.h-section {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.05; letter-spacing: -0.03em;
  color: var(--navy);
}
.h-card {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; letter-spacing: -0.02em;
  color: var(--navy);
}
.accent { color: var(--green); }
.subcopy {
  font-size: 17px;
  color: var(--muted);
  max-width: 56ch;
  line-height: 1.55;
}

/* ----- Cards ----- */
.card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: var(--space-6);
}
.card-elevated { box-shadow: var(--shadow-md); }
.card-tight { padding: var(--space-4); }

/* ----- Form fields ----- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.input {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(22, 199, 132, 0.18);
}
.input-display {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; letter-spacing: -0.01em;
  border: none; padding: 0; background: transparent;
}

/* ----- Trust strip ----- */
.trust {
  display: flex; align-items: center; gap: 24px;
  color: var(--muted);
  font-size: 14px;
  flex-wrap: wrap;
}
.trust b { color: var(--ink); font-weight: 600; }
.trust-item { display: inline-flex; align-items: center; gap: 8px; }
.trust-divider { width: 1px; height: 24px; background: var(--hairline); }
.trust-stars { color: var(--amber); letter-spacing: 1px; font-size: 16px; }

/* ----- Pills / chips ----- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600;
  background: var(--paper); color: var(--navy);
  border: 1px solid var(--hairline);
}
.chip.active { background: var(--navy); color: var(--canvas); border-color: var(--navy); }
.chip.green { background: var(--mint); color: var(--green-dark); border-color: transparent; }

/* ----- Section ----- */
.section {
  padding: var(--space-20) 0;
}
.section-tight { padding: var(--space-12) 0; }

.section-head {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-bottom: var(--space-12);
  max-width: 50ch;
}
.section-head .lead {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--green-dark);
}

/* ----- Phone mockup (used on home + checkout + install screens) ----- */
.phone {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 380 / 760;
  background: var(--navy-2);
  border-radius: 44px;
  padding: 12px;
  box-shadow: 0 50px 100px -40px rgba(7, 27, 51, 0.45),
              0 20px 50px -20px rgba(7, 27, 51, 0.25);
  position: relative;
}
.phone-tilt { transform: rotate(2deg); }
.phone::after {
  content: "";
  position: absolute;
  top: 22px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 28px;
  background: var(--navy-2);
  border-radius: 16px;
  z-index: 3;
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 32px;
  background: var(--canvas);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
}
.phone-screen-app {
  background: var(--whatsapp-bg);
}

/* ----- WhatsApp chat header ----- */
.wa-header {
  background: var(--navy);
  color: var(--canvas);
  padding: 50px 16px 14px;
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.wa-back { color: var(--canvas); font-size: 18px; opacity: 0.8; }
.wa-avatar {
  width: 36px; height: 36px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--canvas);
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
}
.wa-contact { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.wa-contact .name { font-weight: 600; font-size: 15px; }
.wa-contact .status { font-size: 11px; opacity: 0.65; display: flex; align-items: center; gap: 6px; }
.wa-contact .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* ----- WhatsApp chat body ----- */
.wa-chat {
  flex: 1;
  padding: 14px 12px;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  background-image:
    radial-gradient(rgba(7, 27, 51, 0.05) 1px, transparent 1px),
    radial-gradient(rgba(7, 27, 51, 0.04) 1px, transparent 1px);
  background-size: 32px 32px, 16px 16px;
  background-position: 0 0, 8px 8px;
}
.bubble {
  padding: 8px 11px 22px;
  border-radius: 10px;
  max-width: 78%;
  font-size: 13.5px;
  line-height: 1.45;
  position: relative;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
.bubble .time {
  position: absolute;
  bottom: 4px; right: 8px;
  font-size: 10.5px;
  color: var(--whatsapp-meta);
}
.bubble.in {
  background: var(--whatsapp-bubble-in);
  color: var(--ink);
  align-self: flex-start;
  border-top-left-radius: 2px;
}
.bubble.out {
  background: var(--whatsapp-bubble-out);
  color: var(--ink);
  align-self: flex-end;
  border-top-right-radius: 2px;
}
.bubble.in::before {
  content: ""; position: absolute;
  left: -6px; top: 0;
  border: 6px solid transparent;
  border-top-color: var(--whatsapp-bubble-in);
  border-right-color: var(--whatsapp-bubble-in);
}
.bubble.out::before {
  content: ""; position: absolute;
  right: -6px; top: 0;
  border: 6px solid transparent;
  border-top-color: var(--whatsapp-bubble-out);
  border-left-color: var(--whatsapp-bubble-out);
}
.bubble strong { font-weight: 600; }

/* ----- Install card (the rich preview WhatsApp shows) ----- */
.install-card {
  background: var(--whatsapp-bubble-in);
  border-radius: 10px;
  padding: 10px;
  align-self: flex-start;
  max-width: 80%;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
.install-card .preview {
  background: var(--mint);
  border-radius: 6px;
  padding: 14px 12px;
  margin-bottom: 8px;
  display: flex; gap: 12px; align-items: center;
}
.install-card .preview .ico {
  width: 36px; height: 36px;
  background: var(--green);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--canvas);
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  flex-shrink: 0;
}
.install-card .preview .text { display: flex; flex-direction: column; gap: 2px; }
.install-card .preview .text b { font-size: 13px; font-weight: 700; color: var(--ink); }
.install-card .preview .text span { font-size: 11px; color: var(--muted); }
.install-card .body { font-size: 13px; color: var(--ink); padding: 0 4px 4px; line-height: 1.4; }
.install-card .button {
  background: var(--green); color: var(--canvas);
  text-align: center;
  padding: 9px;
  border-radius: 6px;
  font-weight: 700; font-size: 13.5px;
  margin-top: 6px;
}

/* ----- Boarding pass ----- */
.boarding-pass {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-xl);
  display: grid;
  grid-template-columns: 1fr 0 280px;
  overflow: hidden;
  text-align: left;
  position: relative;
}
.boarding-pass-main { padding: 36px 44px; background: var(--paper); }
.boarding-pass-perf {
  width: 0;
  border-left: 2px dashed var(--hairline);
  position: relative;
}
.boarding-pass-perf::before, .boarding-pass-perf::after {
  content: ""; position: absolute;
  left: -16px;
  width: 32px; height: 32px;
  background: var(--canvas);
  border-radius: 50%;
}
.boarding-pass-perf::before { top: -16px; }
.boarding-pass-perf::after { bottom: -16px; }
.boarding-pass-stub {
  background: var(--navy);
  color: var(--canvas);
  padding: 28px 24px;
  display: flex; flex-direction: column; justify-content: space-between;
}

.pass-row { display: flex; gap: 48px; align-items: end; margin-bottom: 28px; }
.pass-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.pass-code {
  font-family: var(--font-display); font-weight: 800;
  font-size: 56px; color: var(--navy);
  letter-spacing: -0.025em;
  line-height: 1;
}
.pass-arrow {
  font-family: var(--font-display); font-weight: 700;
  font-size: 38px; color: var(--green);
  margin-bottom: 6px;
}
.pass-detail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 32px;
  padding-top: 24px;
  border-top: 1px dashed var(--hairline);
}
.pass-detail .label { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.pass-detail .value { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy); }
.pass-detail .value.green { color: var(--green-dark); }

/* ----- SIM contact pad (used in stubs) ----- */
.sim-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6px;
}
.sim-pad div {
  background: var(--canvas);
  border-radius: 4px;
  aspect-ratio: 2 / 1;
}
.sim-pad div.accent { background: var(--green); }

/* ----- Destination tile ----- */
.dest-tile {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
  text-decoration: none; color: inherit;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.dest-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dest-tile .flag { font-size: 32px; line-height: 1; }
.dest-tile .name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: var(--navy); letter-spacing: -0.01em;
}
.dest-tile .meta { color: var(--muted); font-size: 13px; }
.dest-tile .price {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; color: var(--green-dark);
  margin-top: auto;
}

/* ----- Plan card ----- */
.plan-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-3);
  position: relative;
}
.plan-card.recommended { border-color: var(--green); box-shadow: 0 0 0 4px rgba(22, 199, 132, 0.1); }
.plan-card .recommended-tag {
  position: absolute; top: -10px; right: 16px;
  background: var(--green); color: var(--canvas);
  padding: 4px 12px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.plan-card .data {
  font-family: var(--font-display); font-weight: 800;
  font-size: 38px; line-height: 1; color: var(--navy);
}
.plan-card .validity { color: var(--muted); font-size: 14px; }
.plan-card .price-row { display: flex; align-items: baseline; gap: 6px; margin-top: var(--space-2); }
.plan-card .price {
  font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--green-dark);
}
.plan-card .currency { font-size: 14px; color: var(--muted); }
.plan-card .meta-list { display: flex; flex-direction: column; gap: 4px; padding-top: var(--space-3); border-top: 1px dashed var(--hairline); }
.plan-card .meta-list li { display: flex; gap: 8px; font-size: 13px; color: var(--ink-2); list-style: none; }
.plan-card .meta-list li::before { content: "✓"; color: var(--green-dark); font-weight: 700; }
.plan-card ul { margin: 0; padding: 0; }

/* ----- State cards (install flow) ----- */
.state-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.state-card.success { border-color: var(--green); background: var(--mint); }
.state-card.warning { background: var(--warn-bg); border-color: var(--amber); }
.state-card.error   { background: var(--error-bg); border-color: var(--coral); }

.device-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600;
  color: var(--navy);
  align-self: flex-start;
}
.device-badge.detected { background: var(--mint); border-color: transparent; color: var(--green-darker); }
.device-badge::before {
  content: ""; width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask-size: contain;
}
.device-badge.iphone::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16 1H8c-1.7 0-3 1.3-3 3v16c0 1.7 1.3 3 3 3h8c1.7 0 3-1.3 3-3V4c0-1.7-1.3-3-3-3Zm-2.5 21h-3v-1h3v1Zm3.5-3H7V4h10v15Z'/></svg>") no-repeat center;
}
.device-badge.android::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.5 9.5h-11C5 9.5 4 10.5 4 12v6c0 .5.5 1 1 1h1v3h2v-3h8v3h2v-3h1c.5 0 1-.5 1-1v-6c0-1.5-1-2.5-2.5-2.5Zm-9 1h7v8h-7v-8Zm9.7-3-.6-1c-.1 0-.2 0-.2-.1l1-1.6c.1-.1 0-.3-.1-.4-.1-.1-.3 0-.4.1l-1 1.7C16.3 6 15.2 5.7 14 5.7c-1.2 0-2.3.3-3 .6l-1-1.7c-.1-.1-.3-.2-.4-.1-.1.1-.2.3-.1.4l1 1.6c-.1 0-.1.1-.2.1l-.6 1c-1.1.5-1.9 1.4-2.2 2.5h13c-.3-1.1-1.1-2-2.2-2.5Zm-7.7 1.5c-.4 0-.8-.3-.8-.7s.3-.8.8-.8c.4 0 .8.4.8.8s-.3.7-.8.7Zm6 0c-.4 0-.8-.3-.8-.7s.4-.8.8-.8c.5 0 .8.4.8.8s-.3.7-.8.7Z'/></svg>") no-repeat center;
}
.device-badge.desktop::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 2H3a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7v2H7v2h10v-2h-3v-2h7a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Zm0 14H3V4h18v12Z'/></svg>") no-repeat center;
}

/* ----- QR placeholder ----- */
.qr {
  width: 200px; height: 200px;
  background:
    repeating-conic-gradient(var(--navy) 0% 25%, var(--paper) 0% 50%) 0 0 / 20px 20px,
    var(--paper);
  border: 8px solid var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

/* ----- Stepper (commerce flow) ----- */
.stepper {
  display: flex; gap: var(--space-2); margin-bottom: var(--space-8);
  font-size: 13px;
}
.step {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--hairline);
  color: var(--muted);
  font-weight: 600;
}
.step.active { background: var(--navy); color: var(--canvas); border-color: var(--navy); }
.step.done   { background: var(--mint); color: var(--green-darker); border-color: transparent; }
.step.done::before {
  content: "✓"; font-weight: 700;
}

/* ----- Mobile breakpoint ----- */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav { padding: 14px 18px; gap: 10px; }
  .brand-name { font-size: 18px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-mark::after { font-size: 15px; }
  .h-display { font-size: clamp(36px, 9vw, 52px); }
  .h-section { font-size: clamp(28px, 7vw, 36px); }
  .section { padding: var(--space-12) 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .boarding-pass { grid-template-columns: 1fr; }
  .boarding-pass-perf { display: none; }
  .pass-detail { grid-template-columns: repeat(2, 1fr); }
}