/* Details is a frontend view of the existing local eSIM fixture. */
.esim-pass__details:focus-visible { outline:2px solid var(--cherry-primary); outline-offset:2px; }
.esim-detail-page { padding:32px 40px 80px; background:var(--cherry-canvas); color:var(--cherry-ink); }
.esim-detail-shell { display:grid; gap:20px; max-width:1120px; min-width:0; margin:0 auto; }
.esim-detail-card { min-width:0; padding:24px; border:1px solid rgb(0 0 0/.06); border-radius:20px; background:#fff; box-shadow:0 10px 30px rgb(15 23 42/.04); }
.esim-detail-order__heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.esim-detail-order h1 { margin:0; color:var(--cherry-heading); font-size:22px; line-height:33px; font-weight:700; }
.esim-detail-status { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; padding:4px 10px; border:1px solid #bfdbfe; border-radius:999px; background:#eff6ff; color:#1d4ed8; font-size:12px; line-height:16px; font-weight:600; }
.esim-detail-status i { width:6px; height:6px; border-radius:50%; background:#3b82f6; }
.esim-detail-usage { overflow:hidden; height:6px; margin-top:20px; border-radius:999px; background:var(--cherry-surface-alt); }
.esim-detail-usage>span { display:block; width:0; height:100%; background:var(--cherry-primary); }
.esim-detail-used { margin:8px 0 0; color:var(--cherry-muted); font-size:14px; line-height:20px; }
.esim-detail-heading { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.esim-detail-icon { display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; border-radius:16px; background:var(--cherry-surface-alt); color:var(--cherry-text); }
.esim-detail-heading h2 { margin:0; font-size:18px; line-height:28px; font-weight:600; }
.esim-detail-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; }
.esim-detail-fields>div { min-width:0; min-height:64px; padding:12px 16px; border-radius:16px; background:var(--cherry-surface); }
.esim-detail-fields dt { color:var(--cherry-muted); font-size:12px; line-height:16px; font-weight:600; text-transform:uppercase; }
.esim-detail-fields dd { margin:4px 0 0; overflow-wrap:anywhere; font-size:14px; line-height:20px; font-weight:600; }
.esim-detail-coverage { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.esim-detail-coverage>span { display:inline-flex; align-items:center; gap:4px; min-height:24px; padding:2px 8px; border-radius:999px; background:var(--cherry-surface-alt); color:var(--cherry-text); font-size:12px; line-height:20px; }
.esim-detail-coverage b { font-size:10px; font-weight:800; }
.esim-detail-hotspot { display:inline-flex; align-items:center; gap:6px; min-height:24px; margin-top:12px; padding:4px 12px; border-radius:999px; background:var(--cherry-surface); color:var(--cherry-text); font-size:12px; line-height:16px; font-weight:600; }
.esim-detail-hotspot svg { color:#059669; }
.esim-detail-topup { margin-top:12px; padding:12px 16px; border:1px solid #ffedd5; border-radius:16px; background:#fffaf5; color:var(--cherry-primary); }
.esim-detail-topup p { margin:0; font-size:13px; line-height:20px; }
.esim-detail-topup a { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; margin-top:8px; padding:8px 16px; border-radius:999px; background:var(--cherry-primary); color:#fff; font-size:13px; line-height:20px; font-weight:700; }
.esim-detail-topup a:hover { background:var(--cherry-primary-hover); }
.esim-detail-topup a:active { background:var(--cherry-primary-active); }
.esim-detail-receipt { overflow:hidden; border-radius:16px; background:var(--cherry-surface); }
.esim-detail-receipt summary { position:relative; display:grid; gap:4px; padding:20px 40px 16px 16px; list-style:none; cursor:pointer; }
.esim-detail-receipt summary::-webkit-details-marker { display:none; }
.esim-detail-receipt__label { margin-bottom:4px; color:var(--cherry-muted); font-size:10px; line-height:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.esim-detail-receipt strong { color:var(--cherry-heading); font-size:14px; line-height:20px; font-weight:700; }
.esim-detail-receipt__date { color:var(--cherry-muted); font-size:12px; line-height:16px; }
.esim-detail-chevron { position:absolute; top:20px; right:16px; color:var(--cherry-muted); }
.esim-detail-receipt[open] .esim-detail-chevron { transform:rotate(180deg); }
.esim-detail-receipt__purchase { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; border-top:1px solid var(--cherry-line); color:var(--cherry-text); font-size:12px; line-height:16px; }
.esim-detail-receipt__purchase small { display:block; margin-top:2px; color:var(--cherry-muted); font-size:10px; line-height:15px; }
.esim-detail-receipt__amount { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
.esim-detail-installation { display:flex; align-items:center; gap:16px; width:100%; padding:32px 36px; text-align:left; cursor:pointer; }
.esim-detail-installation .esim-detail-icon { background:var(--cherry-soft); color:var(--cherry-accent); }
.esim-detail-installation__copy { display:grid; flex:1; gap:4px; min-width:0; }
.esim-detail-installation__copy strong { font-size:16px; line-height:24px; font-weight:600; }
.esim-detail-installation__copy>span { color:var(--cherry-muted); font-size:14px; line-height:20px; }
.esim-detail-installation>svg { flex-shrink:0; color:var(--cherry-subtle); }
.esim-detail-installation:hover { border-color:var(--cherry-border); }
.esim-detail-back { display:block; margin-top:20px; color:var(--cherry-primary); }
.esim-detail-page a:focus-visible,.esim-detail-page button:focus-visible,.esim-detail-receipt summary:focus-visible { outline:2px solid var(--cherry-primary); outline-offset:3px; }
/* Same panel size, corners, backdrop and controls as the existing account dialog. */
.esim-installation-dialog { position:fixed; inset:0; width:calc(100% - 32px); max-width:560px; max-height:80vh; max-height:80dvh; margin:auto; padding:0; overflow:auto; border:1px solid var(--cherry-line); border-radius:16px; background:#fff; color:var(--cherry-ink); font-family:inherit; }
.esim-installation-dialog::backdrop { background:rgb(0 0 0/.5); }
.esim-installation-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid var(--cherry-line); }
.esim-installation-dialog h2 { margin:0; font-size:18px; line-height:28px; font-weight:600; }
.esim-installation-dialog header button { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:32px; height:32px; border:0; border-radius:999px; background:transparent; color:var(--cherry-subtle); cursor:pointer; }
.esim-installation-dialog header button:hover { background:var(--cherry-surface-alt); }
.esim-installation-dialog__body { display:grid; gap:20px; padding:16px 20px 20px; }
.esim-installation-dialog__body>p { margin:0; color:var(--cherry-muted); font-size:14px; line-height:24px; }
.esim-installation-dialog h3 { margin:0 0 12px; font-size:14px; line-height:20px; font-weight:600; }
.esim-installation-qr { text-align:center; }
.esim-installation-qr img { display:block; width:192px; max-width:100%; height:auto; margin:auto; }
.esim-installation-manual dl { display:grid; gap:12px; margin:0; }
.esim-installation-manual dl>div,.esim-installation-link>p { margin:0; padding:12px 16px; border-radius:16px; background:var(--cherry-surface); }
.esim-installation-manual dt { color:var(--cherry-muted); font-size:12px; line-height:16px; }
.esim-installation-manual dd,.esim-installation-link>p { margin:4px 0 0; overflow-wrap:anywhere; color:var(--cherry-text); font-size:14px; line-height:20px; }
.esim-installation-copy { display:flex; align-items:center; justify-content:center; min-height:48px; width:100%; margin-top:12px; padding:12px 16px; border:0; border-radius:16px; background:var(--cherry-primary); color:white; font-size:14px; line-height:20px; font-weight:700; cursor:pointer; }
.esim-installation-copy:hover { background:var(--cherry-primary-hover); }
.esim-installation-copy:active { background:var(--cherry-primary-active); }
.esim-installation-copy-status { display:block; margin-top:8px; color:var(--cherry-muted); font-size:12px; line-height:16px; }
.esim-installation-copy-status:empty { display:none; }
.esim-installation-dialog button:focus-visible { outline:2px solid var(--cherry-primary); outline-offset:2px; }
body.esim-installation-open { overflow:hidden; }
@media (max-width:767px) {
  .esim-detail-page { padding:20px 16px 80px; }
  .esim-installation-dialog { inset:auto 0 0; width:100%; max-width:none; max-height:85vh; max-height:85dvh; margin:0; border-radius:16px 16px 0 0; }
}
@media (max-width:639px) {
  .esim-detail-card { padding:20px; }
  .esim-detail-fields { grid-template-columns:minmax(0,1fr); }
  .esim-detail-order h1 { font-size:20px; line-height:30px; }
  .esim-detail-order__heading { gap:8px; }
  .esim-detail-status { gap:5px; padding:4px 8px; font-size:11px; }
  .esim-detail-installation { gap:12px; padding:24px 20px; }
}