/* Reason: one small visual system preserves Smart Net's white identity across every checkout state. */
/* Reason: fallback text remains visible on slow mobile connections until the bundled Tajawal font finishes loading. */
@font-face{font-family:Tajawal;src:url("assets/Tajawal-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Tajawal;src:url("assets/Tajawal-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
:root{color-scheme:light;font-family:Tajawal,Arial,sans-serif;font-synthesis:weight;color:#1b2a33;background:#fff;text-size-adjust:100%;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{--ink:#1b2a33;--muted:#62707c;--line:#e5eaee;--surface:#f6f8fa;--accent:#76bc21;--secondary:#0458a9;--accent-soft:#f6faef;--focus:rgba(118,188,33,.16);margin:0;min-width:280px;min-height:100svh;direction:rtl;background:#fff;color:var(--ink);font-size:16px;line-height:1.65}
body[data-provider="palpay"]{--accent:#a91b80;--secondary:#7f145f;--accent-soft:#fcf5fa;--focus:rgba(169,27,128,.13)}
body[data-provider="jawwal"]{--accent:#76bc21;--secondary:#0458a9;--accent-soft:#f6faef;--focus:rgba(118,188,33,.16)}
/* Reason: a deeper green gives white action text sufficient contrast while the merchant accent remains unchanged. */
body{--button-bg:#4f8216}
body[data-provider="palpay"]{--button-bg:#a91b80}
button,input,select,textarea{font:inherit}
button,input,a{-webkit-tap-highlight-color:transparent}
button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;max-width:100%;padding:11px 17px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);line-height:1.45;cursor:pointer;touch-action:manipulation;transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease,transform 160ms ease}
button:disabled{opacity:.46;cursor:not-allowed}
button:not(:disabled):active{transform:scale(.98)}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--secondary);outline-offset:3px}
input:focus-visible{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px var(--focus)}
a{color:var(--secondary);text-underline-offset:4px}
img,svg{max-width:100%;vertical-align:middle}
svg{flex-shrink:0}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:700;line-height:1.45;color:var(--ink)}
h1{font-size:28px}
h2{font-size:22px}
h3{font-size:19px}
strong,b{font-weight:700}
p+p{margin-top:10px}
hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.muted{color:var(--muted)}
.small{font-size:13px}
.centered{text-align:center}
.wide{width:100%}
.row,.split{display:flex;align-items:center;gap:10px}
.split{justify-content:space-between}
.row>*,.split>*{min-width:0}
.actions{display:flex;align-items:stretch;gap:10px;margin-top:22px}
.actions>button,.actions>a{flex:1}
.actions.stack{flex-direction:column}
.primary,a.primary{border-color:var(--accent);background:var(--button-bg);color:#fff;font-size:18px;font-weight:700;text-align:center;text-decoration:none}
.secondary{background:#fff;color:var(--ink);border-color:var(--line)}
.text-button{background:transparent;border-color:transparent;color:var(--muted)}
.danger{color:#994b4b}
/* Reason: cancellation is visually consistent and unmistakable without competing with the filled purchase action. */
.cancel-outline{min-height:44px;border:1.5px solid #b42318;background:transparent;color:#b42318;font-weight:700;box-shadow:none}
.cancel-outline:focus-visible{outline-color:#b42318}
.checkout-card>.cancel-outline{margin-top:12px}
.warning{background:#fffdf6;border-color:#e8d9b4;color:#876422}
.icon-button{display:inline-grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0}
.icon-button svg{width:19px;height:19px}

/* Reason: small descriptive text uses the same readable slate instead of low-contrast grey. */
/* Reason: the header stays quiet and the current purchase decision occupies a comfortable reading width. */
.shell{width:calc(100% - 40px);max-width:760px;margin-inline:auto}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:76px;border-bottom:1px solid #edf0f3}
.brand{flex-shrink:0;white-space:nowrap;direction:ltr;color:var(--ink);font-family:Arial,sans-serif;font-size:23px;font-weight:700;letter-spacing:-.7px;text-decoration:none}
.brand span{color:#76bc21}
.header-history{padding:9px 0;color:var(--muted);font-size:14px;white-space:nowrap}
.header-history svg{width:18px;height:18px}
.header-actions{display:flex;gap:10px}
.history-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding-inline:5px;border-radius:6px;background:#eff3f5;color:var(--muted);font-family:Arial,sans-serif;font-size:11px;line-height:1}
.preview-ribbon{display:flex;align-items:center;justify-content:center;min-height:29px;margin-block:6px 0;font-size:11px;color:#687580}
.preview-link{min-height:28px;padding:3px 5px;border:0;border-radius:5px;background:none;color:#687580;font-size:11px;text-decoration:underline;text-underline-offset:3px}
main.shell{max-width:640px;padding-block:24px max(24px,env(safe-area-inset-bottom))}
.site-footer{margin-block:22px 26px;padding-top:17px;border-top:1px solid #edf0f3;color:#687580;font-size:12px;text-align:center}
.page-heading{text-align:center;margin-bottom:23px}
.page-heading h1{margin-bottom:6px}
/* Reason: programmatic heading focus announces the new step without framing a noninteractive title. */
.page-heading h1[tabindex="-1"]:focus{outline:none}
.page-heading p{color:var(--muted);font-size:14px}
body[data-step="catalog"] #app>.page-heading,body[data-step="wallet"] #app>.page-heading{text-align:right;margin-bottom:23px}
body[data-step="catalog"] #app>.page-heading h1,body[data-step="wallet"] #app>.page-heading h1{font-size:29px}
.panel,.checkout-card{padding:24px;border:1px solid #e8edf1;border-radius:20px;background:#fff}
.panel{margin-bottom:16px}
.checkout-card>:last-child{margin-bottom:0}
.checkout-card .page-heading h1{font-size:24px}
.checkout-card .page-heading p{font-size:14px}

/* Reason: duration, price and quantity have separate places so selection never shifts a product's layout. */
.catalog-tabs{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:18px;padding:4px;border:1px solid #eff2f4;border-radius:15px;background:#f5f7f9}
.catalog-tabs::before{content:"";position:absolute;inset-block:4px;right:4px;width:calc(50% - 6px);border:1px solid #e3e8ec;border-radius:11px;background:#fff;box-shadow:0 1px 3px #1b2a3305;transition:transform 180ms ease;z-index:-1}
.catalog-tabs[data-group="special"]::before{transform:translateX(calc(-100% - 4px))}
.catalog-tabs button{min-width:0;min-height:44px;padding:9px 8px;border:0;border-radius:11px;background:transparent;color:var(--muted);font-size:14px}
.catalog-tabs button[aria-pressed="true"]{color:var(--ink);font-weight:700}
.product-list{display:grid;gap:11px}
.product-row{display:grid;grid-template-columns:minmax(0,1fr) 128px;align-items:center;column-gap:18px;min-height:116px;padding:17px 19px;border:1px solid #e4e9ee;border-radius:18px;background:#fff;transition:border-color 160ms ease,background-color 160ms ease,box-shadow 160ms ease}
.product-row.selected{border-color:#76bc21;background:#f8fbf3;box-shadow:inset 0 0 0 1px #76bc211c}
.product-copy{min-width:0}
.product-copy h3{font-size:19px;font-weight:700;line-height:1.6}
.duration-value{font-size:29px;line-height:1.1;letter-spacing:-.6px}
.product-spec{display:flex;flex-wrap:wrap;gap:0 5px;margin-top:5px;color:var(--muted);font-size:13px;line-height:1.65}
.product-spec span+span::before{content:"·";margin-inline-end:5px;color:#a7b1b9}
.product-purchase{display:grid;justify-items:center;align-content:center;gap:8px;width:128px;min-width:0}
.product-price{display:inline-flex;align-items:baseline;justify-content:center;gap:5px;color:var(--ink);font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.product-price strong{font-size:28px;line-height:1.15;letter-spacing:-.5px}
.product-price small{font-size:12px;color:var(--muted)}
.product-copy>.product-price{margin-top:5px}
.stepper{display:flex;align-items:center;justify-content:center;width:126px;min-height:46px;border:1px solid #e2e8ec;border-radius:14px;background:#fff;overflow:visible}
.stepper button{flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:12px;background:transparent;font-family:Arial,sans-serif;font-size:20px;color:var(--ink)}
.stepper output{flex:0 0 36px;min-width:36px;text-align:center;font-family:Arial,sans-serif;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.stepper.empty{width:46px;height:46px;border-color:#e3edda;background:#f2f8eb}
.stepper.empty button{color:#598b2b}
.product-row>.stepper{justify-self:center}
.sticky-checkout{display:flex;align-items:center;gap:16px;margin-top:18px;padding:15px 0;border-top:1px solid var(--line);background:#fff}
.sticky-checkout>button{flex:1;min-width:0;min-height:52px}
.cart-count{flex:0 0 auto;max-width:110px;color:var(--muted);font-size:13px;line-height:1.55}
.cart-count strong{display:block;color:var(--ink);font-size:19px}
.sticky-checkout .empty-state{flex:1;padding:5px;margin:0;font-size:14px}
.minimum-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;flex:1;gap:9px;min-width:0}
.minimum-row>span{flex:1 1 110px;color:var(--muted);font-size:13px}
.minimum-row>button{flex:0 0 auto;min-height:44px;padding-inline:12px;font-size:13px}
.sticky-checkout:has(.minimum-row){flex-wrap:wrap;gap:8px}
.sticky-checkout:has(.minimum-row)>.minimum-row{flex-basis:100%}
.support-panel{margin-top:19px;padding-top:14px;border-top:1px solid #eef1f3;font-size:12px;color:#687580}
.support-row{display:flex;align-items:center;gap:9px;line-height:1.8}
.support-row svg{width:17px;height:17px}
.support-row>span{flex:1}
.support-panel>p+p{margin-top:8px}

/* Reason: wallet selection is a compact order review, not a second catalogue. */
dialog.modal{width:min(450px,calc(100% - 32px));max-height:calc(100svh - 36px);overflow:auto;margin:auto;padding:25px;border:1px solid #e8edf1;border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 20px 70px #15242f26}
dialog.modal::backdrop{background:#1b2a3352}
dialog.modal[open]{animation:modal-entry 180ms ease-out}
.modal-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
.modal-heading h2{font-size:23px}
.modal-heading button{width:44px;padding:0;color:var(--muted)}
.summary-list{display:grid;gap:11px;margin-block:16px}
.summary-line{display:flex;justify-content:space-between;align-items:baseline;gap:15px;font-size:15px}
.summary-line>:first-child{min-width:0}
.summary-line>:last-child{flex-shrink:0;white-space:nowrap}
.total-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:17px;margin-top:17px;border-top:1px solid var(--line)}
.total-row strong{font-size:27px}
.summary-caption{margin-block:11px 0;color:var(--muted);font-size:14px;text-align:center}
.provider-options{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-block:13px 0}
.provider-option{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:97px;padding:15px 8px;border-radius:16px;font-size:16px;font-weight:700}
.provider-option.jawwal{border-color:#e0edce;background:#f8fbf3;color:#527f25}
.provider-option.palpay{border-color:#efdae9;background:#fdf7fb;color:#a91b80}
.provider-option img{height:28px;width:auto;max-width:92px;object-fit:contain}
.provider-option small{display:block;margin-top:4px;color:var(--muted);font-size:11px;font-weight:400}
.provider-option:disabled{background:#f6f7f8;border-color:#e5e9ed;color:#7d8791}
.provider-option:disabled img{filter:grayscale(1)}
.dialog-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.dialog-actions>button{width:100%}
.dialog-actions .text-button{text-decoration:underline;text-underline-offset:4px}

/* Reason: progress provides context while the phone number remains the only input decision. */
.step-nav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;color:var(--muted);font-size:12px}
.step-nav>.text-button{flex:0 0 auto;padding-inline:0;font-size:14px}
.step-nav>.row{flex-wrap:wrap;justify-content:flex-end;column-gap:9px;row-gap:3px}
.step-nav>.row>span{white-space:nowrap}
.provider-badge{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;line-height:1.4}
.provider-badge img{height:22px;width:auto;max-width:68px;object-fit:contain}
.journey-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:460px;margin:0 auto 23px;padding:0;list-style:none}
.journey-progress>li{display:flex;justify-content:center;align-items:center;gap:6px;min-width:0;padding:5px 2px 10px;border-bottom:1px solid #eaf0f3;color:#687580;font-size:12px;line-height:1.6;list-style:none}
.journey-progress>li::marker{content:""}
.journey-progress>li>span{display:inline-grid;place-items:center;min-width:15px;height:15px;font-family:Arial,sans-serif;font-size:10px}
.journey-progress>li.complete{color:#677885;border-color:#dce4e9}
.journey-progress>li[data-current="true"]{color:var(--ink);border-color:var(--accent);font-weight:700}
.device-choice{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:22px}
.device-choice button{width:100%;min-height:48px;padding:10px 9px;font-size:14px}
.device-choice button.active,.device-choice button[aria-pressed="true"]{border-color:color-mix(in srgb,var(--accent) 30%,white);background:var(--accent-soft);color:var(--ink);font-weight:700}
.device-choice button svg{width:18px;height:18px}
.field{display:grid;gap:10px;margin-block:0 18px}
.field label{font-size:15px;font-weight:700}
.field input,.phone-input{width:100%;min-width:0;height:60px;padding:12px 16px;border:1px solid #dce3e9;border-radius:14px;background:#fbfcfd;color:var(--ink);font-size:24px;line-height:1.5;transition:border-color 160ms ease,box-shadow 160ms ease}
input[type="tel"],input[inputmode="numeric"],.phone-input{direction:ltr;text-align:left;font-variant-numeric:tabular-nums}
.field input::placeholder,.phone-input::placeholder{color:#a1abb3;opacity:1;font-size:21px}
input[aria-invalid="true"]{border-color:#b75f5f}
.error{margin-block:8px 15px;color:#a33c3c;font-size:13px}
.error:empty{display:none}
.phone-field{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:8px}
.phone-field>label,.phone-field>p{grid-column:1/-1}
.phone-field button{min-width:74px;padding-inline:12px}
.recent-phones{display:grid;gap:8px;margin-block:0 17px}
.recent-phones:empty{display:none}
.recent-phones button{justify-content:flex-start;flex-wrap:wrap;min-height:48px;padding:11px 13px;color:var(--muted);font-size:13px;text-align:right}
.recent-phones bdi{color:var(--ink);font-variant-numeric:tabular-nums}
.other-device-note{margin-block:0 16px;padding-inline-start:12px;border-inline-start:2px solid #dee6ec;color:var(--muted);font-size:13px;line-height:1.8}
.confirmation-number,.phone-large{direction:ltr;margin-block:20px;font-family:Arial,sans-serif;font-size:clamp(27px,7.6vw,36px);font-weight:700;line-height:1.5;letter-spacing:.4px;text-align:center;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.phone-confirm-provider{display:flex;justify-content:center;margin-bottom:17px}
body[data-step="confirm"] .checkout-card{padding-block:29px}
body[data-step="confirm"] .checkout-card .actions{margin-top:25px}
.spinner{display:inline-block;width:19px;height:19px;flex:0 0 auto;border:2px solid #d5dee5;border-top-color:var(--accent);border-radius:50%;vertical-align:middle;animation:loading 850ms linear infinite}
.primary .spinner{border-color:#ffffff70;border-top-color:#fff}
.status-icon{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 15px;border-radius:50%;background:var(--accent-soft);color:var(--secondary);font-size:22px}

/* Reason: the transfer instructions, acknowledgement and timed verification remain visually distinct. */
.transfer-heading{text-align:center;margin-bottom:18px}
.transfer-heading>.provider-badge{margin-bottom:10px}
.transfer-heading .page-heading{margin:0}
.transfer-total{display:flex;align-items:baseline;justify-content:center;gap:9px;margin-block:0 24px}
.transfer-total strong,.amount{font-size:29px;font-weight:700;line-height:1.4;color:var(--ink);font-variant-numeric:tabular-nums}
.transfer-total>span,.transfer-total>small{font-size:13px;color:var(--muted)}
.transfer-steps,.instruction-list{display:grid;gap:19px;margin:0 0 25px;padding:0;list-style:none;counter-reset:transfer-step}
.transfer-steps li,.instruction-list li{position:relative;min-height:29px;padding-inline-start:39px;font-size:15px;line-height:1.8;counter-increment:transfer-step}
.transfer-steps li::before,.instruction-list li::before{content:counter(transfer-step);position:absolute;inset-inline-start:0;top:2px;display:grid;place-items:center;width:27px;height:27px;border:1px solid #e1e7eb;border-radius:9px;background:#f6f8fa;color:var(--muted);font-family:Arial,sans-serif;font-size:12px}
.transfer-steps li strong{display:block;font-weight:700}
.transfer-steps li p{margin-top:5px;color:var(--muted);font-size:13px;line-height:1.8}
.transfer-steps bdi{white-space:nowrap;font-variant-numeric:tabular-nums}
.transfer-preview-hint{margin-block:9px 18px;color:#687580;font-size:11px;text-align:center}
.quoted-success{display:inline-block;margin-top:4px}
.confirmation-question{text-align:center;font-size:23px;line-height:1.65;margin-bottom:22px}
.retry-hint{margin-block:10px 0;color:#687580;text-align:center;font-size:12px}
.transfer-details{margin:22px 0 19px;padding-top:15px;border-top:1px solid var(--line);text-align:start}
.transfer-details>div{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:baseline;gap:14px;margin-bottom:10px;font-size:13px}
.transfer-details dt{color:var(--muted)}
.transfer-details dd{margin:0;color:var(--ink);text-align:end;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.transfer-details dd[dir="ltr"]{text-align:left}
.transfer-details dd .provider-badge{color:var(--ink)}
.notice{margin-block:17px;padding:12px 14px;border:1px solid #e5eaef;border-radius:12px;background:#f8fafc;color:var(--muted);font-size:13px;line-height:1.8}
.notice.warning{border-color:#e8ddc1;background:#fffdf5;color:#876422}
.wait-clock{position:relative;width:108px;height:108px;margin:4px auto 23px}
.wait-clock>svg{display:block;width:108px;height:108px;transform:rotate(-90deg);overflow:visible}
.ring-track{fill:none;stroke:#ebf0f3;stroke-width:4}
.ring-progress{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset 500ms linear}
.countdown{display:grid;place-items:center;font-family:Arial,sans-serif;font-size:29px;font-weight:700;font-variant-numeric:tabular-nums;direction:ltr}
.wait-clock>.countdown{position:absolute;inset:0;margin:0}
.wait-clock+.page-heading{margin-bottom:14px}
#waitMessage{font-size:15px}
.waiting-progress{display:grid;gap:11px;width:fit-content;max-width:100%;margin:23px auto 19px;padding:0;list-style:none;text-align:start}
.waiting-progress>li{display:flex;align-items:center;gap:10px;color:#687580;font-size:13px}
.waiting-progress>li::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:#dce3e9}
.waiting-progress .done{color:#687985}
.waiting-progress .done::before{background:#a4b4bf}
.waiting-progress .current{color:var(--ink);font-weight:700}
.waiting-progress .current::before{background:var(--accent)}

/* Reason: the delivered card owns the primary action; saved-card navigation remains secondary. */
.receipt-heading{text-align:center;margin-bottom:24px}
.receipt-heading .page-heading{margin-block:11px 7px}
.receipt-heading .page-heading h1{font-size:27px}
.success-mark{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:15px;background:#f0f8e8;color:#609432}
.success-mark svg{width:24px;height:24px}
.success-mark svg path{stroke-dasharray:30;stroke-dashoffset:0;animation:success-draw 360ms ease-out both}
.receipt-meta{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.card-list{display:grid;gap:15px}
.internet-card{padding:20px;border:1px solid var(--line);border-radius:18px;background:#fff}
.card-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:11px}
.card-header h3{font-size:18px}
.card-number{display:block;margin-bottom:2px;color:#687580;font-size:11px}
.status-badge{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;padding:4px 8px;border:1px solid #e0ebd8;border-radius:7px;background:#f7fbf3;color:#69854f;font-size:11px;white-space:nowrap}
.status-badge.used{border-color:#dfe7ee;background:#f6f9fb;color:#637d91}
.credentials{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-block:16px}
.credential{position:relative;min-width:0;padding:12px 13px 12px 54px;border-radius:13px;background:#f6f8fa;color:var(--muted);font-size:12px;text-align:right}
.credential strong{display:block;margin-top:6px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:21px;font-weight:600;line-height:1.45;direction:ltr;text-align:left;color:var(--ink);overflow-wrap:anywhere}
.credential>.icon-button{position:absolute;left:5px;top:50%;transform:translateY(-50%);margin:0;background:transparent;border:0;border-radius:10px;color:#7b8c98}
.credential>.icon-button:active{transform:translateY(-50%) scale(.98)}
.credential>.icon-button svg{width:17px;height:17px}
.card-actions{display:flex;align-items:stretch;gap:8px;margin-top:15px}
.card-actions>.primary{flex:1;min-width:0;min-height:48px;font-size:16px}
.card-actions>.icon-button{flex:0 0 48px;width:48px;height:48px;min-height:48px;border-radius:13px;color:var(--muted)}
.card-utility{display:flex;gap:8px}
.demo-card-note{margin-top:12px;color:#687580;font-size:11px;text-align:center}
.receipt-help{margin:19px auto 0;text-align:center;font-size:13px;color:var(--muted)}
.receipt-help+.actions{margin-top:19px}
body[data-step="result"] #app>.actions>.secondary{background:#f8fafb;border-color:#e7edf1;font-size:16px}

/* Reason: saved cards use the same receipt layout and never require a second sign-in experience. */
.account-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:21px;padding-block:15px;border:1px solid var(--line);border-radius:16px}
.account-stats>div{min-width:0;padding-inline:5px;text-align:center}
.account-stats>div+div{border-inline-start:1px solid var(--line)}
.account-stats strong{display:block;margin-bottom:3px;font-size:25px;line-height:1.35;font-variant-numeric:tabular-nums}
.account-stats span{display:block;color:var(--muted);font-size:12px;line-height:1.55}
.account-row{flex-wrap:wrap;margin-bottom:13px;font-size:14px}
.history-filters{display:flex;gap:7px;flex-wrap:wrap;margin-block:20px}
.history-filters button{min-height:44px;padding:9px 13px;font-size:13px;color:var(--muted)}
.history-filters button[aria-pressed="true"]{background:#f2f5f7;border-color:#dce4ea;color:var(--ink);font-weight:700}
.history-order{margin-top:25px;padding-top:20px;border-top:1px solid var(--line)}
.history-order>.split{flex-wrap:wrap;gap:8px}
.history-order h2{font-size:18px}
.history-order>.split+p{margin-top:7px}
.history-order>h3{margin-block:16px 11px;font-size:14px}
.history-order .card-list{margin-top:0}
.empty-state,.history-empty{padding:30px 12px;text-align:center;color:var(--muted)}
.history-empty>svg{width:30px;height:30px;color:#a3b0ba}
.history-empty h2{margin-block:12px 8px;font-size:20px}
.history-empty p{max-width:335px;margin-inline:auto;font-size:14px}
.pending-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:19px;padding:12px 14px;border:1px solid #e3eaf0;border-radius:14px;background:#f8fafc;font-size:13px;color:var(--muted)}
.pending-strip button{flex-shrink:0;padding-inline:12px;font-size:13px}
/* Reason: the saved-order prompt has exactly three compact decisions, with the primary action spanning the row on narrow screens. */
.entry-payment{align-items:stretch;flex-direction:column}
.saved-order-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
.saved-order-actions [data-action="resume"]{grid-column:1/-1}
.saved-order-actions button{width:100%;min-height:44px;padding-inline:10px}
.copy-fallback{max-width:100%;padding:14px;border:1px solid var(--line);border-radius:12px;background:#f7f9fb;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text;font-family:Tajawal,ui-monospace,monospace;font-size:15px;line-height:1.9}
.remember{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--muted)}
.remember input{width:18px;height:18px;accent-color:var(--accent)}
.review-tools{display:none;padding:16px 0;margin-block:15px 25px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
body[data-review="true"] .review-tools{display:block}
.review-tools summary{min-height:40px;padding-block:8px;cursor:pointer}
.review-tools label{display:block;margin-block:8px}
.review-tools select{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.review-tools button{margin-top:11px;font-size:13px}
.toast{position:fixed;z-index:100;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:12px 17px;border-radius:13px;background:#213340;color:#fff;box-shadow:0 6px 26px #1b2a3319;font-size:14px;text-align:center}

/* Reason: pointer feedback is brief, and only real loading states continue to animate. */
@media(hover:hover) and (pointer:fine){
 .cancel-outline:not(:disabled):hover{border-color:#8f1c13;background:#fff5f4;color:#8f1c13}
 button:not(:disabled):not(.text-button):not(.preview-link):not(.icon-button):hover{transform:translateY(-1px);border-color:#c5d0d8}
 .primary:not(:disabled):hover{border-color:var(--accent);filter:brightness(.97)}
 .product-row:hover{border-color:#c9d7bf}
 .product-row.selected:hover{border-color:#76bc21}
 .stepper button:not(:disabled):hover{background:#f0f5eb;transform:none}
 .icon-button:not(:disabled):hover{background:#eef3f6;color:var(--ink)}
 .text-button:not(:disabled):hover{color:var(--ink);background:#f8fafb}
 .provider-option.jawwal:not(:disabled):hover{border-color:#91bd67}
 .provider-option.palpay:not(:disabled):hover{border-color:#c97db5}
}
@keyframes modal-entry{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
@keyframes success-draw{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
@keyframes loading{to{transform:rotate(360deg)}}

/* Reason: the cart keeps its place in document flow while small screens retain generous touch targets. */
@media(max-width:759px){
 .sticky-checkout{position:sticky;bottom:0;z-index:5;padding-bottom:max(13px,env(safe-area-inset-bottom))}
 .site-header{min-height:66px}
 main.shell{padding-top:16px}
 body[data-step="catalog"] #app>.page-heading,body[data-step="wallet"] #app>.page-heading{margin-bottom:18px}
 .catalog-tabs{gap:3px;padding:3px;margin-bottom:14px}
 .catalog-tabs::before{inset-block:3px;right:3px;width:calc(50% - 4.5px)}
 .catalog-tabs[data-group="special"]::before{transform:translateX(calc(-100% - 3px))}
 .product-list{gap:10px}
 .product-row{min-height:104px;padding:10px 14px}
 .product-purchase{gap:6px}
 .checkout-card{padding:21px}
 .site-footer{margin-top:19px}
}
@media(max-width:540px){
 .credentials{grid-template-columns:1fr;gap:9px}
 .credential strong{font-size:23px}
 .step-nav>.row{max-width:calc(100% - 59px)}
 .page-heading h1{font-size:26px}
 .checkout-card .page-heading h1{font-size:23px}
 .product-row{column-gap:13px;padding:10px 14px;min-height:104px}
 .product-copy h3{font-size:18px}
 .product-spec{font-size:12px}
 .duration-value{font-size:27px}
 .product-purchase{width:128px}
 .receipt-heading .page-heading h1{font-size:26px}
}
@media(max-width:359px){
 .shell{width:calc(100% - 28px)}
 .site-header{min-height:66px}
 .brand{font-size:21px}
 .header-history{font-size:13px}
 .catalog-tabs button{font-size:13px}
 .product-row{grid-template-columns:minmax(0,1fr) 126px;column-gap:10px;min-height:104px;padding:10px 12px}
 .product-copy h3{font-size:16px}
 .duration-value{font-size:26px}
 .product-spec{font-size:12px}
 .product-purchase{width:126px}
 .product-price strong{font-size:26px}
 .checkout-card{padding:16px}
 .checkout-card .page-heading h1{font-size:21px}
 .primary{font-size:17px}
 .journey-progress{gap:5px;margin-bottom:19px}
 .journey-progress>li{gap:4px;font-size:11px}
 dialog.modal{padding:20px}
 .provider-options{gap:8px}
 .provider-option{font-size:15px}
 .transfer-steps li,.instruction-list li{padding-inline-start:35px;font-size:14px}
 .transfer-details>div{grid-template-columns:72px minmax(0,1fr);gap:10px}
 .field input{font-size:23px;padding-inline:13px}
 .device-choice button{font-size:13px}
 .internet-card{padding:15px}
 .card-header{flex-wrap:wrap;gap:7px}
 .card-header h3{font-size:17px}
 .card-actions{gap:7px}
 .card-actions>.primary{padding-inline:9px;font-size:15px}
 .card-actions>.icon-button{flex-basis:44px;width:44px}
 .account-stats span{font-size:11px}
 .pending-strip{gap:8px;padding:10px;font-size:12px}
 .sticky-checkout{gap:11px}
 .sticky-checkout>button{padding-inline:11px}
}
/* Reason: short viewports use normal scrolling so the checkout bar cannot cover a product control. */
@media(max-width:759px) and (max-height:760px){
 .sticky-checkout{position:static}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 button:not(:disabled):hover,button:not(:disabled):active{transform:none}
 .credential>.icon-button:hover,.credential>.icon-button:active{transform:translateY(-50%)}
}
/* Reason: retain the complete license alongside the two bundled Tajawal font files.
Copyright 2018 Boutros International. (http://www.boutrosfonts.com)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded, 
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

*/