/* eSIM screens. Buttons, panels, the back header, payment rows and the
   payment screen come from styles.css; this file only lays them out and adds
   the few pieces the card flow has no equivalent for. */
#esim-store { padding-bottom: var(--space-24); }
#esim-content { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }
#esim-content h1, #esim-content h2, #esim-content h3, #esim-content p, #esim-content dl, #esim-content ol { margin: 0; }
#esim-content > .pay-note, #esim-content .esim-install > .pay-note { margin-top: 0; }
#esim-content .pay-note > svg { color: var(--color-icon-brand); }
#esim-content > .sec-label, #esim-content .esim-install > .sec-label, #esim-content .esim-field > .sec-label, .esim-methods > .sec-label { margin: var(--space-8) 2px 0; }
#esim-content > .flow-head { padding-bottom: 0; }
#esim-content .flow-title { overflow-wrap: anywhere; }
#esim-content button:focus-visible, #esim-content input:focus-visible, #esim-content summary:focus-visible,
.esim-methods .payopt:has(input:focus-visible) { outline: 2px solid var(--color-border-brand); outline-offset: 2px; }
.esim-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.esim-hint { font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); line-height: var(--type-caption-lh); color: var(--color-text-tertiary); padding: 0 2px; overflow-wrap: anywhere; }
.esim-error { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); color: var(--color-state-error); }
.esim-error:empty { display: none; }
.esim-actions { display: flex; flex-direction: column; gap: var(--space-10); width: 100%; }
.esim-pages { display: flex; gap: var(--space-10); }

/* ---- Loading ------------------------------------------------------------- */
.esim-skeleton { display: flex; flex-direction: column; gap: var(--space-12); }
.esim-skel { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface-default); box-shadow: var(--hairline); }
.esim-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--divider), transparent); transform: translateX(-100%); animation: esim-shimmer 1.3s ease-in-out infinite; }
.esim-skel-inline { display: inline-block; vertical-align: middle; width: 96px; height: 22px; border-radius: var(--radius-pill); }
@keyframes esim-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .esim-skel::after { animation: none; } }

/* ---- Catalogue / My eSIMs switch ------------------------------------------ */
.esim-segments { display: flex; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-pill); background: var(--color-surface-default); box-shadow: var(--hairline); }
.esim-segments button { flex: 1; min-height: var(--touch-min); border-radius: var(--radius-pill); text-align: center; font: 600 14px/1 var(--font-ui); color: var(--color-text-secondary); transition: background-color var(--t-state), color var(--t-state); }
.esim-segments button[aria-pressed="true"] { background: var(--color-surface-nav-active); color: var(--color-text-primary); }

.esim-hero { padding: var(--space-8) 2px 0; }
.esim-hero h1 { font-family: var(--font-display); font-size: var(--type-display-size); font-weight: var(--type-display-weight); line-height: 1.1; letter-spacing: var(--tracking-tight); }
#esim-content .esim-hero p { margin-top: var(--space-12); font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: 18px; color: var(--color-text-secondary); }

.esim-search { display: flex; align-items: center; gap: var(--space-10); height: var(--control-h); padding: 0 var(--space-8) 0 var(--space-16); border-radius: var(--radius-md); background: var(--color-surface-default); box-shadow: var(--hairline); color: var(--color-icon-secondary); transition: box-shadow var(--t-state); }
.esim-search:focus-within { box-shadow: var(--ring-brand); }
#esim-content .esim-search input:focus-visible { outline: none; }
.esim-search svg { flex-shrink: 0; }
.esim-search input { flex: 1; min-width: 0; height: 100%; font: 500 16px var(--font-ui); }
.esim-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.esim-search-clear { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: var(--color-text-secondary); background: var(--color-surface-elevated); }
#esim-plans { display: flex; flex-direction: column; gap: var(--space-12); overflow-anchor: none; }
.esim-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-8); height: var(--control-h); flex-shrink: 0; }
.esim-pagination .primary { width: auto; height: var(--touch-min); flex-shrink: 0; }

/* ---- Rows inside a panel: destinations, profiles, invoices, top-ups ------- */
.esim-list, .esim-dest { padding: var(--space-4) 0; overflow: hidden; }
.esim-row, .esim-dest-head { position: relative; display: flex; align-items: center; gap: var(--space-12); width: 100%; min-height: 60px; padding: var(--space-12) var(--space-16); text-align: start; color: var(--color-text-primary); }
.esim-row { transition: background-color var(--t-state); }
.esim-row:active { background: var(--accent-tint); }
.esim-row + .esim-row::before, .esim-dest-head + .esim-row::before { content: ""; position: absolute; top: 0; left: var(--space-16); right: var(--space-16); height: 1px; background: var(--divider); }
.esim-dest-head { min-height: 56px; padding-bottom: var(--space-8); }
.esim-dest-head + .esim-row::before { left: var(--space-16); }
.esim-dest-plans > .esim-row:first-child::before { content: ""; position: absolute; top: 0; left: var(--space-16); right: var(--space-16); height: 1px; background: var(--divider); }
.esim-dest-toggle { display: flex; align-items: center; justify-content: center; gap: var(--space-8); width: 100%; min-height: var(--touch-min); padding: var(--space-12) var(--space-16); box-shadow: inset 0 1px 0 var(--divider); color: var(--color-text-brand); font: 600 14px/20px var(--font-ui); }
.esim-dest-toggle:active { background: var(--accent-tint); }
.esim-dest-toggle:disabled { color: var(--color-text-secondary); cursor: wait; }
.esim-dest-message { padding: var(--space-12) var(--space-16); font-size: var(--type-caption-size); line-height: var(--type-caption-lh); color: var(--color-text-secondary); }
.esim-dest-message.esim-error { color: var(--color-state-error); }
#esim-catalogue-notice:empty { display: none; }
#esim-content .esim-dest-toggle:focus-visible { outline-offset: -3px; }
.esim-dest-toggle .esim-chev { margin: 0; color: inherit; transform: rotate(90deg); }
.esim-dest-toggle[aria-expanded="true"] .esim-chev { transform: rotate(-90deg); }
.esim-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.esim-row-main strong { font-family: var(--font-display); font-size: var(--type-row-size); font-weight: var(--type-row-weight); line-height: var(--type-row-lh); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.esim-row-main > span { font-size: var(--type-caption-size); font-weight: var(--type-caption-weight); line-height: var(--type-caption-lh); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.esim-row-price { font: 700 16px/1 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.esim-chev { display: flex; flex-shrink: 0; margin-inline-start: -4px; color: var(--color-icon-secondary); }
.esim-flag { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--color-surface-elevated); font-size: 22px; line-height: 1; overflow: hidden; }
.esim-flag-ico, .esim-tile { color: var(--color-text-brand); background: var(--accent-tint); }
.esim-tile { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-sm); }
.esim-tone-wait { color: var(--color-state-warning) !important; }
.esim-tone-ok { color: var(--color-text-brand) !important; }
.esim-tone-bad { color: var(--color-state-error) !important; }

/* ---- Empty and error states ----------------------------------------------- */
.esim-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); padding: var(--space-32) var(--space-16); text-align: center; }
.esim-empty h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 22px; letter-spacing: var(--tracking-tight); }
.esim-empty p { font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-lh); color: var(--color-text-secondary); max-width: 280px; }
.esim-empty .primary { margin-top: var(--space-8); }
.esim-empty-ico { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--color-surface-default); box-shadow: var(--hairline); color: var(--color-icon-brand); }
.esim-empty-ico svg { width: 26px; height: 26px; }

/* ---- Plan ----------------------------------------------------------------- */
.esim-sum-head { display: flex; align-items: center; gap: var(--space-12); }
.esim-sum-head .esim-flag { width: 48px; height: 48px; font-size: 30px; }
#esim-content .esim-sum-title { font: 700 22px/1.2 var(--font-ui); letter-spacing: normal; }
.esim-facts { padding: var(--space-4) var(--space-16); }
.esim-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-12); padding: var(--space-12) 0; font-size: var(--type-body-size); line-height: var(--type-body-lh); }
.esim-facts > div + div { box-shadow: inset 0 1px 0 var(--divider); }
.esim-facts dt { flex: 0 1 45%; color: var(--color-text-secondary); }
.esim-facts dd { flex: 1 1 55%; margin: 0; text-align: end; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.esim-more { padding: 0; }
.esim-more > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: var(--nav-item-h); padding: var(--space-12) var(--space-16); cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: var(--tracking-tight); }
.esim-more > summary::-webkit-details-marker { display: none; }
.esim-more > summary::after { content: ""; width: 8px; height: 8px; flex-shrink: 0; margin: -4px 4px 0 0; border: solid var(--color-icon-secondary); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--t-state); }
.esim-more[open] > summary::after { transform: translateY(4px) rotate(-135deg); }
.esim-more > p { padding: 0 var(--space-16) var(--space-14); font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--color-text-secondary); }
.esim-more > .pay-field { margin: 0 var(--space-12) var(--space-12); width: auto; background: var(--color-surface-elevated); box-shadow: none; }

.esim-field { display: flex; flex-direction: column; gap: var(--space-8); }
.esim-stepper { display: flex; align-items: center; gap: var(--space-8); height: var(--row-h); padding: 0 var(--space-10); border-radius: var(--radius-md); background: var(--color-surface-default); box-shadow: var(--hairline); }
.esim-stepper button { width: var(--touch-min); height: var(--touch-min); flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--color-surface-elevated); font: 500 24px/1 var(--font-ui); color: var(--color-text-primary); transition: background-color var(--t-state); }
.esim-stepper button:active { background: var(--accent-tint); color: var(--color-text-brand); }
.esim-stepper button:disabled { color: var(--color-text-tertiary); background: transparent; box-shadow: var(--hairline); cursor: default; }
.esim-step-v { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: baseline; gap: 6px; font: 700 20px/1 var(--font-ui); cursor: text; }
.esim-step-v input { width: 3ch; padding: 0; text-align: center; font: inherit; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.esim-step-v input::-webkit-outer-spin-button, .esim-step-v input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.esim-step-v span { font-size: 15px; font-weight: 600; color: var(--color-text-secondary); }

#esim-buy-form { display: flex; flex-direction: column; gap: var(--space-12); }
.esim-methods { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; }
.esim-methods > .sec-label { padding: 0; margin-bottom: var(--space-8); }
.esim-methods .payopt { position: relative; cursor: pointer; }
.esim-methods .payopt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.esim-check { display: flex; align-items: flex-start; gap: var(--space-12); padding: var(--space-4) 2px; font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-lh); color: var(--color-text-primary); cursor: pointer; }
.esim-check input { width: 22px; height: 22px; flex-shrink: 0; margin: 0; accent-color: var(--color-action-primary); }
.esim-total { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); padding: var(--space-8) 2px 0; border-top: 1px solid var(--divider); }
.esim-total > span { font-size: var(--type-body-size); font-weight: var(--type-body-weight); color: var(--color-text-secondary); }
.esim-total strong { font: 700 24px/1.2 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Invoice ---------------------------------------------------------------
   The card payment screen's own blocks; these only cover what differs. */
.esim-invoice { padding-top: var(--space-4); }
.esim-invoice .pay-amount { text-align: center; overflow-wrap: anywhere; }
.esim-money { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); max-width: 100%; }
.esim-money svg { flex-shrink: 0; color: var(--color-icon-secondary); }
.esim-invoice .pay-amount-sub { text-align: center; }
.pay-status.neutral { background: var(--color-surface-default); box-shadow: var(--hairline); color: var(--color-text-secondary); }
.esim-done { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); text-align: center; padding: var(--space-16) var(--space-8) 0; }
.esim-done-ico { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--color-action-primary); color: var(--color-text-on-brand); margin-bottom: var(--space-4); }
.esim-done h2 { font-family: var(--font-display); font-size: var(--type-title-size); font-weight: 600; line-height: 1.2; letter-spacing: var(--tracking-tight); }
.esim-done p { font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--color-text-secondary); max-width: 280px; }

/* ---- Profile -------------------------------------------------------------- */
.esim-section { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: var(--tracking-tight); padding: var(--space-4) 2px 0; }
.esim-installed { align-self: flex-start; margin-top: 0; }
.esim-installed svg { margin: -4px -2px -4px -6px; }
.esim-install { display: flex; flex-direction: column; gap: var(--space-12); }
.esim-install > .pay-field { margin-top: 0; }
.esim-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.esim-qr-wrap .qr-box { margin-top: 0; }
.esim-qr-wrap .esim-hint { text-align: center; max-width: 290px; }
.esim-install-more { display: flex; flex-direction: column; }
.esim-install-more > summary { padding: var(--space-12) 2px; }
.esim-install-more[open] > summary { margin-bottom: var(--space-4); }
.esim-steps { padding: var(--space-8) var(--space-16) var(--space-8) 40px; font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--color-text-secondary); }
.esim-steps li { padding: var(--space-4) 0 var(--space-4) var(--space-4); }
.esim-steps li::marker { color: var(--color-text-brand); font-weight: 700; }
.esim-usage { display: flex; flex-direction: column; gap: var(--space-8); }
.esim-k { font-size: var(--type-body-size); font-weight: var(--type-body-weight); color: var(--color-text-secondary); }
.esim-usage strong { font: 700 32px/1.1 var(--font-ui); font-variant-numeric: tabular-nums; }
.esim-usage .esim-hint { padding: 0; }
.esim-usage p { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); color: var(--color-text-secondary); }
.esim-bar { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-elevated); overflow: hidden; margin: var(--space-4) 0; }
.esim-bar i { display: block; height: 100%; border-radius: inherit; background: var(--color-action-primary); }

@media (max-width: 340px) {
  .esim-row, .esim-dest-head { padding-left: var(--space-12); padding-right: var(--space-12); gap: var(--space-10); }
  .esim-row-price { font-size: 14px; }
}