/* Account, order and invoice utilities. Shares the storefront colour system. */
.account-page .account-hero {padding:0 0 28px}
.account-page h1,.account-page h2,.invoice-page h1,.gift-send-page h1 {text-wrap:balance}
.account-page .archive-grid {align-items:start}
.account-jump {display:flex;gap:20px;margin-top:20px;border-bottom:1px solid var(--line);padding-bottom:14px;font-weight:600}
.account-jump a {padding:5px 0}
.account-jump a:hover {color:var(--coral-dark)}
.account-wallet .sim-balance {font-variant-numeric:tabular-nums;line-height:1.3;overflow-wrap:anywhere}
.account-wallet>.text-link {display:inline-block;margin-top:22px}
.wallet-rule {background:var(--paper);padding:18px;border-radius:12px;margin:22px 0 8px;font-size:14px;line-height:1.7}
.wallet-rule p {margin:7px 0 12px}
.wallet-rule a {font-weight:600;text-decoration:underline;text-underline-offset:4px}
.topup-presets {display:flex;gap:8px;flex-wrap:wrap}
.topup-presets button {background:var(--cream);border:1px solid var(--line);border-radius:8px;padding:9px 12px;min-height:44px;color:var(--ink);font-variant-numeric:tabular-nums;transition:background .18s,border-color .18s}
.topup-presets button:hover,.topup-presets button:focus-visible {background:#fff;border-color:var(--coral-dark)}
.account-verified {color:#206048;font-weight:600}
.account-history {margin-top:44px;scroll-margin-top:116px}
.account-history>h2,.account-section-head h2 {font-size:clamp(24px,3vw,32px);margin:0 0 8px;line-height:1.3}
.account-section-head {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.account-section-head p {margin:0}
.account-section-head button {flex:none}
.account-wallet,.sim-referral {scroll-margin-top:116px}
.order-tools {display:flex;flex-wrap:wrap;align-items:end;gap:16px;background:#fffaf1;padding:18px 20px;border-radius:14px;margin-bottom:20px}
.order-search {flex:1 1 240px;display:grid;gap:6px;font-size:14px;font-weight:600}
.order-search .input {background:#fff;font-size:16px}
.order-filters {display:flex;gap:5px;padding:4px;border:1px solid var(--line);border-radius:10px}
.order-filters button {background:transparent;color:var(--ink);border:0;padding:8px 12px;min-height:40px;border-radius:7px;font-weight:600;transition:background .18s,color .18s}
.order-filters button[aria-pressed="true"] {background:var(--ink);color:#fff}
.order-filters button:not([aria-pressed="true"]):hover {background:#ece8df}
.account-order[hidden],.account-empty[hidden],.form-feedback[hidden] {display:none!important}
.account-order {padding:25px;background:var(--cream);margin:0 0 18px;border-radius:18px;border:1px solid var(--line);box-shadow:none}
.account-order .order-top {align-items:start;gap:16px;margin-bottom:20px}
.account-order .order-top h3 {margin:5px 0 0;font-size:19px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.account-caption {font-size:13px;color:var(--muted);line-height:1.6}
.order-status {flex:none;display:inline-flex;padding:6px 11px;border-radius:7px;background:#ece8df;color:var(--ink);font-size:13px;font-weight:600}
.order-status.status-3 {background:#e5f3eb;color:#205c45}
.account-order-items {display:grid;gap:13px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.account-order-item {display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:14px;align-items:center;min-width:0}
.account-order-item>img,.account-order-item>.item-placeholder {width:60px;height:60px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#fff;padding:5px}
.account-order-item>.item-placeholder {display:grid;place-items:center;font-size:25px;color:var(--muted)}
.account-order-item>div {min-width:0}
.account-order-item a,.account-order-item>div>strong {font-size:16px;font-weight:600;line-height:1.45;display:block;overflow-wrap:anywhere}
.account-order-item a:hover {color:var(--coral-dark);text-decoration:underline;text-underline-offset:3px}
.account-order-item small {display:block;font-size:13px;color:var(--muted);margin-top:4px}
.account-order-item>strong {font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.order-progress {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;margin:26px 0 12px;gap:0}
.order-progress li {position:relative;display:flex;flex-direction:column;gap:9px;align-items:center;text-align:center;font-size:13px;color:var(--muted);z-index:0}
.order-progress li:before {content:"";position:absolute;top:15px;left:-50%;right:50%;height:2px;background:var(--line);z-index:-1}
.order-progress li:first-child:before {display:none}
.order-progress li>span {display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--cream);border:2px solid var(--line);font-variant-numeric:tabular-nums;font-weight:600}
.order-progress li>strong {font-weight:500}
.order-progress li.done>span {border-color:#407b63;background:#e5f3eb;color:#205c45}
.order-progress li.done:before,.order-progress li.current:before {background:#407b63}
.order-progress li.current>span {background:var(--ink);border-color:var(--ink);color:#fff}
.order-progress li.current>strong {color:var(--ink);font-weight:700}
.tracking-caption {display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:24px 0 8px}
.tracking-caption strong {font-size:15px}
.tracking-caption>span {font-size:12px;color:var(--muted)}
.order-progress-expanded {grid-template-columns:repeat(5,minmax(0,1fr));margin-top:18px}
.order-progress-expanded li {padding:0 7px;line-height:1.6;min-width:0}
.order-progress-expanded li>small {font-size:11px;line-height:1.7;width:100%;font-weight:400}
.order-progress-expanded time {display:block;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.order-item-share {display:inline-flex;align-items:center;min-height:44px;border:0;padding:5px 0;background:transparent;color:#1c5962;font-family:inherit;font-size:13px;font-weight:600;line-height:1.5;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.order-item-share:hover {color:var(--coral-dark)}
.order-item-share:focus-visible {outline:3px solid #286e83;outline-offset:3px;border-radius:3px}
.order-eta {font-size:13px;color:var(--muted);line-height:1.7;margin:18px 0 0}
.order-eta strong {color:var(--ink);font-weight:600}
.order-bottom {display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);margin-top:20px;padding-top:18px}
.order-bottom>div {display:grid;gap:3px}
.order-bottom>div span {font-size:13px;color:var(--muted)}
.order-bottom>div strong {font-size:22px;font-variant-numeric:tabular-nums}
.account-empty {text-align:left;background:#fffaf1;border:1px dashed var(--line);padding:28px;border-radius:14px;margin:18px 0;line-height:1.7}
.account-empty>span {display:block;font-size:32px;color:var(--muted);line-height:1;margin-bottom:16px}
.account-empty h3 {font-size:21px;line-height:1.4;margin:0 0 8px}
.account-empty p {font-size:15px;color:var(--muted);max-width:58ch;margin:0 0 18px}
.account-empty .text-link {display:inline-block}
.account-gift h3 {margin:0;font-size:19px;line-height:1.4}
.account-gift .account-order-item {grid-template-columns:60px minmax(0,1fr)}
.account-gift p {margin:8px 0;overflow-wrap:anywhere}
.account-gift blockquote {margin:20px 0 12px;padding:10px 16px;background:var(--paper);border-left:3px solid var(--line);font-size:15px;line-height:1.7}
.gift-state {font-weight:600;color:#205c45}
.account-ledger {margin-top:18px}
.account-ledger .sim-ledger-row {padding:16px 0;gap:20px;font-size:14px}
.account-ledger .sim-ledger-row>span:first-child {min-width:0}
.account-ledger .sim-ledger-row>span:first-child small {display:block;line-height:1.6;margin-top:3px}
.account-ledger .sim-ledger-row>strong {font-variant-numeric:tabular-nums;white-space:nowrap}
.account-ledger .sim-ledger-row>span:last-child {font-size:13px;color:var(--muted)}
.ledger-credit {color:#205c45}
.ledger-debit {color:var(--ink)}
.form-feedback {border-radius:9px;padding:12px 14px;margin:12px 0 0;font-size:14px;line-height:1.6;border:1px solid var(--line);color:var(--ink);background:var(--paper)}
.form-feedback.error {background:#fff1ec;border-color:#e7b9a8;color:#853724}
.form-feedback.success {background:#e9f4ee;border-color:#c1dbcd;color:#205c45}
.form-feedback.info {background:#f6f1e8;color:var(--ink)}
.form-feedback a {text-decoration:underline;text-underline-offset:3px;font-weight:600}
.form-feedback:focus-visible {outline:3px solid #286e83;outline-offset:3px}
.account-skeleton {padding:24px;background:var(--cream);border-radius:14px;border:1px solid var(--line)}
.account-skeleton>span {display:block;height:14px;background:#e9e1d6;border-radius:5px;margin:16px 0;animation:account-pulse 1.5s ease-in-out infinite}
.account-skeleton>span:nth-child(1) {width:35%}
.account-skeleton>span:nth-child(2) {width:72%}
.account-skeleton>span:nth-child(3) {width:55%}
@keyframes account-pulse {50%{opacity:.45}}
.gift-send-layout {display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:25px;margin-top:24px;align-items:start}
.gift-send-layout h1 {font-size:clamp(28px,4vw,42px);line-height:1.2;margin:12px 0 18px}
.gift-send-layout .sim-form {margin-top:22px}
.gift-send-layout>.panel>p {max-width:60ch;line-height:1.7}
.gift-preview .sim-photo {min-height:0;height:220px;border-radius:12px;margin-bottom:20px}
.gift-preview h2 {font-size:23px;line-height:1.4}
.gift-preview .summary-line {gap:14px}
.gift-preview .summary-line strong {text-align:right;font-variant-numeric:tabular-nums}
.invoice-navigation {display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px;font-size:15px;font-weight:600}
.invoice-page .sim-invoice {max-width:900px;margin:0 auto;padding:38px;position:relative;overflow:hidden;background:#fff;border-radius:18px;box-shadow:0 8px 36px #163d4508}
.invoice-page .sim-invoice h2 {color:var(--ink)}
.invoice-heading {display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:30px;border-bottom:2px solid var(--ink);padding-bottom:28px}
.invoice-heading .brand {font-size:25px}
.invoice-issuer>p {font-size:14px;line-height:1.7;margin:12px 0 0;color:var(--muted)}
.invoice-issuer>p>span {font-size:12px}
.invoice-title {display:grid;gap:8px;text-align:right;min-width:0}
.invoice-title>strong {font:600 14px/1.5 ui-monospace,monospace;color:var(--muted);overflow-wrap:anywhere}
.invoice-paid {display:inline-block;justify-self:end;padding:7px 12px;border-radius:7px;background:#e5f3eb;color:#205c45;font-size:12px;font-weight:600;white-space:nowrap}
.invoice-page h1 {font:600 clamp(24px,4vw,38px)/1.1 Arial,sans-serif;letter-spacing:1px;margin:0}
.invoice-billing {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:28px 0}
.invoice-billing>div {display:grid;gap:5px;min-width:0}
.invoice-billing strong {font-size:18px;line-height:1.55;overflow-wrap:anywhere}
.invoice-billing>div>span:not(.account-caption) {font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.invoice-meta {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 35px;margin:27px 0;background:var(--paper);padding:20px;border-radius:10px}
.invoice-meta>div {min-width:0}
.invoice-meta dt {font-size:13px;color:var(--muted);margin-bottom:5px}
.invoice-meta dd {font-size:14px;font-weight:600;margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.invoice-lines {margin:30px 0 0}
.invoice-lines h2 {font-size:18px;margin:0 0 16px}
.invoice-table-wrap {overflow-x:auto;max-width:100%}
.invoice-table {width:100%;border-collapse:collapse;text-align:left;font-size:14px;min-width:500px}
.invoice-table th {font-weight:600;color:var(--muted);background:var(--paper);padding:12px}
.invoice-table td {padding:16px 12px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.invoice-table td:first-child {font-weight:600;width:46%}
.invoice-table td:last-child,.invoice-table th:last-child {text-align:right;white-space:nowrap}
.invoice-line-product {display:flex;align-items:center;gap:12px;min-width:0;line-height:1.55}
.invoice-line-product>img {width:48px;height:48px;flex:none;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:7px;padding:3px}
.invoice-line-product>span {min-width:0;overflow-wrap:anywhere}
.invoice-line-product small {display:block;font-size:12px;color:var(--muted);margin-top:4px}
.invoice-total {display:flex;gap:20px;align-items:center;justify-content:space-between;padding:20px;background:var(--ink);color:#fff;border-radius:10px;margin:24px 0 8px}
.invoice-total strong {font-size:28px;font-variant-numeric:tabular-nums;white-space:nowrap}
.invoice-payment {display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap;padding:10px 0;color:var(--muted);font-size:12px;line-height:1.7}
.invoice-payment strong {color:#205c45;font-weight:600}
.invoice-tracking {margin:24px 0;border-top:1px solid var(--line);padding-top:6px}
.invoice-verification {display:grid;grid-template-columns:144px minmax(0,1fr);align-items:center;gap:24px;padding:22px;border:1px solid var(--line);border-radius:12px;margin:28px 0}
.invoice-qr {width:144px;height:144px;display:grid;place-items:center;background:#fff;flex:none}
.invoice-qr>img {display:block;width:144px;height:144px;object-fit:contain;image-rendering:pixelated}
.qr-placeholder {font:600 14px/1.7 Arial,sans-serif;text-align:center;color:var(--muted)}
.invoice-verification h2 {font:600 20px/1.35 Arial,sans-serif;margin:0 0 10px}
.invoice-verification p {font-size:14px;line-height:1.75;margin:0 0 10px;color:var(--muted)}
.invoice-verification a {font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.invoice-verification small {display:block;color:var(--muted);font-size:12px;line-height:1.7;margin-top:12px}
.invoice-footer {border-top:1px solid var(--line);padding-top:18px;margin-top:26px;line-height:1.75}
.invoice-footer>strong {font:600 12px/1.6 Arial,sans-serif;color:var(--ink)}
.invoice-footer>p {font-size:12px;color:var(--muted);margin:7px 0 0;max-width:80ch}
.invoice-branding {display:block;color:var(--muted);margin-top:15px;font:11px/1.8 Arial,sans-serif}
.invoice-actions {margin:28px 0 14px}
.invoice-product-actions {border-top:1px solid var(--line);padding-top:18px;margin-top:24px}
.invoice-product-actions h2 {font-size:17px;margin:0 0 10px}
.invoice-product-actions>div {display:flex;justify-content:space-between;align-items:center;gap:18px;border-bottom:1px solid var(--line);padding:5px 0}
.invoice-product-actions>div>span {font-size:14px;line-height:1.7;min-width:0;overflow-wrap:anywhere}
.invoice-product-actions .order-item-share {flex:none}
.invoice-sharing {background:var(--paper);border-radius:10px;margin-top:22px;padding:18px;font-size:14px;line-height:1.7}
.invoice-sharing p {color:var(--muted);font-size:13px;margin:6px 0 12px}
.invoice-share-consent {display:flex;align-items:start;gap:10px;color:var(--muted);font-size:13px;line-height:1.8;margin:10px 0 15px}
.invoice-share-consent input {width:18px;height:18px;flex:none;margin:4px 0 0;accent-color:var(--ink)}
.invoice-mail-note {margin:20px 0 0}
@media(max-width:700px){
  .account-section-head {align-items:start;gap:12px}
  .account-section-head button {padding:10px 13px;font-size:14px}
  .order-tools {padding:16px;gap:12px}
  .order-search {flex-basis:100%}
  .account-order {padding:18px}
  .account-order .order-top {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .account-order .order-top h3 {font-size:16px}
  .order-status {font-size:12px;padding:6px 8px;white-space:normal;max-width:110px}
  .account-order-item {grid-template-columns:48px minmax(0,1fr);gap:10px}
  .account-order-item>img,.account-order-item>.item-placeholder {width:48px;height:48px}
  .account-order-item>strong {grid-column:2;font-size:15px;margin-top:-5px}
  .account-order-item a,.account-order-item>div>strong {font-size:15px}
  .order-progress {margin-top:22px}
  .order-progress li {font-size:11px;padding:0 4px;gap:7px;line-height:1.5}
  .order-progress li>span {width:28px;height:28px}
  .order-progress li:before {top:13px}
  .order-progress-expanded {display:flex;flex-direction:column;gap:0;margin:18px 0}
  .order-progress-expanded li {display:grid;grid-template-columns:30px minmax(0,1fr);gap:3px 13px;text-align:left;align-items:start;padding:0 0 17px;font-size:13px}
  .order-progress-expanded li:last-child {padding-bottom:0}
  .order-progress-expanded li>span {grid-row:1 / 3;width:30px;height:30px;position:relative;z-index:1}
  .order-progress-expanded li>strong {grid-column:2;padding-top:3px}
  .order-progress-expanded li>small {grid-column:2;font-size:11px;display:flex;gap:8px;flex-wrap:wrap;line-height:1.6}
  .order-progress-expanded li:before {display:block;left:14px;right:auto;top:25px;bottom:-2px;width:2px;height:auto}
  .order-progress-expanded li:first-child:before {display:block}
  .order-progress-expanded li:last-child:before {display:none}
  .tracking-caption {flex-wrap:wrap;gap:4px 14px}
  .order-bottom {flex-wrap:wrap;gap:12px}
  .order-bottom .button {padding:10px 14px;font-size:14px}
  .account-empty {padding:22px}
  .account-ledger .sim-ledger-row {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px}
  .account-ledger .sim-ledger-row>span:last-child {grid-column:1 / -1}
  .gift-send-layout {grid-template-columns:minmax(0,1fr)}
  .gift-send-layout .gift-preview {order:-1}
  .gift-preview .sim-photo {height:165px}
  .invoice-page .sim-invoice {padding:22px 18px}
  .invoice-heading {gap:16px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:22px}
  .invoice-heading .brand {font-size:21px;gap:6px}
  .invoice-heading .brand-logo {width:30px;height:30px}
  .invoice-title {margin-left:auto}
  .invoice-title h1 {font-size:25px}
  .invoice-title>strong {font-size:12px}
  .invoice-paid {font-size:11px;padding:6px 9px;white-space:normal}
  .invoice-issuer>p {font-size:12px}
  .invoice-issuer>p>span {font-size:11px}
  .invoice-billing {grid-template-columns:minmax(0,1fr);gap:20px}
  .invoice-billing strong {font-size:16px}
  .invoice-meta {gap:18px;padding:16px;grid-template-columns:minmax(0,1fr)}
  .invoice-meta dd {font-size:14px}
  .invoice-total {padding:16px;gap:12px}
  .invoice-total strong {font-size:23px}
  .invoice-total span {font-size:14px}
  .invoice-verification {grid-template-columns:minmax(0,1fr);gap:14px;padding:18px}
  .invoice-verification .invoice-qr {justify-self:center}
  .invoice-verification h2 {font-size:18px}
  .invoice-product-actions>div {align-items:start;flex-direction:column;gap:0;padding:10px 0}
  .invoice-sharing {padding:16px}
}
@media screen and (max-width:700px) {
  .invoice-table {display:block;min-width:0;font-size:13px}
  .invoice-table thead {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .invoice-table tbody {display:grid;gap:14px}
  .invoice-table tr {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;border-bottom:1px solid var(--line);padding-bottom:14px}
  .invoice-table td {display:block;padding:0;border:0;min-width:0}
  .invoice-table td:first-child {grid-column:1 / -1;width:auto;margin-bottom:4px}
  .invoice-table td[data-label]:before {content:attr(data-label);display:block;font-size:11px;color:var(--muted);font-weight:400;margin-bottom:4px}
  .invoice-table td:nth-child(3) {text-align:center}
  .invoice-table td:last-child {white-space:normal}
}
@media(prefers-reduced-motion:reduce){.account-skeleton>span {animation:none}}
@media print {
  .invoice-page .invoice-navigation,.invoice-actions,.invoice-product-actions,.invoice-sharing,.invoice-mail-note {display:none!important}
  .invoice-page .shell {width:100%;margin:0}
  .invoice-page {padding:0;min-height:0}
  .invoice-page .sim-invoice {border:0;border-radius:0;box-shadow:none;max-width:none;padding:6mm;background:#fff}
  .invoice-heading .brand {color:#163037}
  .invoice-footer,.invoice-branding,.invoice-footer>strong,.invoice-verification {display:block!important}
  .invoice-verification {display:grid!important;grid-template-columns:35mm minmax(0,1fr);padding:5mm;gap:6mm;break-inside:avoid}
  .invoice-qr,.invoice-qr>img {width:35mm;height:35mm}
  .invoice-verification a {overflow-wrap:anywhere}
  .invoice-heading,.invoice-billing,.invoice-meta,.invoice-total,.invoice-payment,.invoice-footer,.invoice-tracking {break-inside:avoid}
  .invoice-table tr {break-inside:avoid}
  .invoice-table thead {display:table-header-group}
  .invoice-table-wrap {overflow:visible}
  .invoice-total {background:#eef2ee!important;color:#163037!important;border:1px solid #bfd0c4}
  .invoice-paid {background:#eef2ee!important;color:#205c45!important;border:1px solid #bfd0c4}
  .order-progress-expanded {display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  .order-progress-expanded li {display:flex;flex-direction:column;align-items:center;text-align:center;font-size:11px;padding:0 5px}
  .order-progress-expanded li>small {display:block;font-size:9px;line-height:1.5}
  .order-progress-expanded li:before,.order-progress-expanded li:first-child:before,.order-progress-expanded li:last-child:before {display:none}
  .invoice-qr img {print-color-adjust:exact;-webkit-print-color-adjust:exact}
}
/* Bounded private histories retain their page and reset at the account boundary. */
.account-pagination{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:22px 0 12px;padding:14px 0;border-top:1px solid var(--line)}
.account-pagination>span{text-align:center;font-variant-numeric:tabular-nums;font-size:15px;font-weight:600}
.account-pagination small{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:2px}
.account-pagination .button{font-size:14px;min-height:44px;padding:10px 15px}
.account-pagination:focus{outline:0}
.account-pagination:focus-visible{outline:3px solid #286e83;outline-offset:4px;border-radius:8px}
.invoice-delivery{border-top:1px solid var(--line);margin:24px 0;padding-top:20px}
.invoice-delivery h2{font-size:20px;margin:0 0 12px}
.invoice-delivery p{white-space:pre-line;overflow-wrap:anywhere;font-size:14px;line-height:1.7;margin:5px 0}
.invoice-delivery small{display:block;font-size:12px;line-height:1.7;color:var(--muted);margin-top:10px}
@media(max-width:420px){.account-pagination{gap:8px}.account-pagination .button{padding:9px 10px;font-size:13px}.account-pagination>span{font-size:13px}}
@media print{.invoice-delivery{break-inside:avoid}}
.sim-referral{margin:30px 0 38px;padding:30px;background:var(--cream);border:1px solid #edc7b7;box-shadow:0 8px 28px #9b56320b;overflow:hidden}
.referral-heading{display:flex;align-items:flex-start;gap:28px;justify-content:space-between}
.referral-heading>div{max-width:680px}.referral-heading h2{font-size:clamp(24px,3vw,32px);line-height:1.3;margin:7px 0 12px}
.referral-heading p{color:var(--muted);line-height:1.7;margin:0}.referral-heading p strong{color:var(--ink)}
.referral-total{flex-shrink:0;text-align:center;background:#fbe6de;color:var(--ink);padding:16px 25px;border-radius:18px;font-size:14px}
.referral-total strong{display:block;color:#ab3c28;font-size:30px;line-height:1.25;margin:3px 0;font-variant-numeric:tabular-nums}.referral-total small{font-size:12px}
.referral-rewards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}.referral-rewards>div{border:1px solid var(--line);background:#fff;padding:19px 22px;border-radius:16px}.referral-rewards span,.referral-rewards small{display:block}.referral-rewards span{font-weight:600}.referral-rewards strong{display:block;color:#ab3c28;font-size:32px;font-variant-numeric:tabular-nums;margin:3px 0}.referral-rewards small{color:var(--muted);font-size:13px}
.referral-steps{list-style:none;counter-reset:referral;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:25px 0;padding:0}.referral-steps li{counter-increment:referral;position:relative;padding-left:37px;line-height:1.6}.referral-steps li:before{content:counter(referral,bengali);position:absolute;left:0;top:0;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#fbe6de;color:#ab3c28;font-weight:700;font-size:14px}.referral-steps strong{display:block;font-size:15px}.referral-steps span{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.referral-share-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:20px;border-top:1px solid var(--line);padding-top:22px}.referral-share-fields label{display:block;font-size:14px;font-weight:600;margin-bottom:9px}.sim-ref-row{display:flex;align-items:center;gap:10px;min-width:0}.sim-ref-row .input{min-width:0;flex:1;font-size:14px}.sim-ref-row .button{white-space:nowrap;min-height:46px;padding:12px 18px;font-size:14px}.referral-code-row .input{font-family:ui-monospace,monospace;font-weight:700;font-size:19px;letter-spacing:1px}.referral-share-button{margin-top:16px}
.referral-credit-note{font-size:14px;line-height:1.7;margin:23px 0 12px}.referral-disclosure{font-size:12px;line-height:1.7;color:var(--muted);margin:0;max-width:860px}.sim-referral:focus{outline:none}.sim-referral:focus-visible{outline:3px solid #286e83;outline-offset:4px}
@media(max-width:760px){.sim-referral{padding:23px}.referral-heading{gap:18px}.referral-total{padding:14px}.referral-total strong{font-size:25px}.referral-steps{grid-template-columns:1fr;gap:16px}.referral-share-fields{grid-template-columns:1fr;gap:18px}}
@media(max-width:480px){.sim-referral{padding:20px 16px}.referral-heading{display:block}.referral-total{display:block;text-align:left;margin-top:18px;padding:12px 16px}.referral-total strong{display:inline;margin:0 8px;font-size:25px}.referral-total small{display:block;margin-top:2px}.referral-rewards{gap:10px;margin:18px 0}.referral-rewards>div{padding:15px 12px}.referral-rewards strong{font-size:27px}.referral-rewards small{font-size:12px}.sim-ref-row{gap:7px}.sim-ref-row .button{padding:12px;font-size:13px}.referral-code-row .input{font-size:17px}.referral-share-button{width:100%}}