/* Buying pages: Türk Telekom top-up, digital sections with their purchase window, and the Alo eSIM order page.
   Loaded after commerce.css; shared pieces live in ../tweetcell.css. */

/* A notice at the top of the page (order refused, validation) sits above the hero: no second gap under it. */
.tc3-flash + .wrap > .phero:first-child { margin-block-start: 22px; }
.tc3-flash + .wrap.pagehead, .tc3-flash + #products > .wrap.pagehead:first-child { padding-block-start: 28px; }
.tc3-flash + #products > .wrap:first-child > .phero:first-child { margin-block-start: 22px; }

/* ---------- Busy states ---------- */
.tc3-spinner { display: inline-block; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2.5px solid color-mix(in oklab, currentColor 22%, transparent); border-top-color: currentColor; animation: tc3-turn .8s linear infinite; vertical-align: -4px; }
@keyframes tc3-turn { to { rotate: 360deg; } }
.btn[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"]::after { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2.5px solid color-mix(in oklab, currentColor 28%, transparent); border-top-color: currentColor; animation: tc3-turn .8s linear infinite; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .tc3-spinner, .btn[aria-busy="true"]::after { animation-duration: 2.4s; } }

/* ---------- Top-up: the number inquiry in the hero ---------- */
html:not([lang="ar"]) .tc3-topup .phero .display { max-width: 10em; }   /* Latin headings are longer: keep them clear of the artwork */
.tc3-inquiry { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: start; width: min(100%, 560px); }
.tc3-inquiry .cmd { width: 100%; }
.tc3-inquiry .cmd-field input.has-error { color: #FFB4A8; }
.tc3-captcha { min-height: 78px; max-width: 100%; overflow: hidden; border-radius: 6px; }
/* The widget is 304px wide and cannot shrink: on a phone it is scaled from its leading corner, as on the previous page. */
@media (max-width: 575.98px) { .tc3-captcha { width: 100%; min-height: 0; height: 68px; } .tc3-captcha .g-recaptcha { transform: scale(.86); transform-origin: top right; } [dir="ltr"] .tc3-captcha .g-recaptcha { transform-origin: top left; } }
@media (max-width: 359.98px) { .tc3-captcha { height: 62px; } .tc3-captcha .g-recaptcha { transform: scale(.77); } }
.phero[data-tone="dark"] .notice { color: #fff; background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); width: 100%; }
.phero[data-tone="dark"] .notice > .tci { color: #fff; }
.phero[data-tone="dark"] .notice--ok { background: rgb(64 214 150 / .22); } .phero[data-tone="dark"] .notice--warn { background: rgb(255 196 61 / .22); } .phero[data-tone="dark"] .notice--err { background: rgb(255 110 96 / .26); }
.tc3-on-dark { width: min(100%, 560px) !important; }
.left9.is-complete { color: #9BF0C4; } .left9.has-error { color: #FFB4A8; }
.tc3-wide-notice { margin-block-end: 18px; align-items: center; }
.tc3-topup #available-packages-title { scroll-margin-top: 76px; }   /* clear of the sticky category bar when the script scrolls to the results */

/* Category filters are buttons here (they filter the list on the page); same look as the links of the shared bar. */
.filterbar button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding-inline: 16px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: 14px; font-weight: 500; white-space: nowrap; flex: none;
  color: color-mix(in oklab, var(--ink) 84%, transparent); transition: background .25s, color .25s; }
.filterbar button:hover { background: color-mix(in oklab, var(--ink) 7%, transparent); }
.filterbar button[aria-pressed="true"] { background: var(--ink); color: var(--bg); font-weight: 650; }
.filterbar button b { font-weight: 600; opacity: .55; font-size: 12.5px; }

/* Package cards: the wrapper is the grid item the script shows and hides. */
.package-card-container { display: grid; min-width: 0; } .package-card-container > .pack { min-width: 0; }
.pack h3 { overflow-wrap: anywhere; }
.pack .more { cursor: pointer; } .pack .more .tci { transition: rotate .3s var(--ease); } .pack .more[aria-expanded="true"] .tci { rotate: 180deg; }
.tc-feature-lines { display: grid; gap: 6px; padding-inline-start: 1.1em; list-style: disc; font-size: 13px; line-height: 1.7; color: var(--muted); }
.pack button.btn { cursor: pointer; }

/* ---------- The order windows ---------- */
.sheet { max-height: min(92dvh, 860px); overflow-y: auto; overscroll-behavior: contain; }
.tc3-order-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-radius: 20px; background: color-mix(in oklab, var(--accent) 7%, var(--surface)); box-shadow: inset 0 0 0 1px var(--line); }
.tc3-order-summary strong { font-size: 15.5px; font-weight: 650; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; direction: ltr; unicode-bidi: plaintext; }
[dir="rtl"] .tc3-order-summary strong { text-align: right; }
.tc3-order-summary .price { font-size: 20px; color: var(--accent); flex: none; }
.tc3-order-line { padding: 14px 18px; border-radius: 18px; text-align: center; font-size: 14.5px; background: color-mix(in oklab, var(--ink) 4.5%, transparent); }
.tc3-order-line strong { font-size: 17px; font-weight: 700; letter-spacing: .03em; font-variant-numeric: tabular-nums; unicode-bidi: isolate; display: inline-block; margin-inline-start: 6px; }
.tc3-order-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tc3-order-foot .small strong { font-size: 15px; color: var(--ink); }
.tc3-legal-hint { display: flex; gap: 8px; align-items: flex-start; } .tc3-legal-hint .tci { font-size: 15px; margin-block-start: 2px; flex: none; color: var(--info); }
.sheet .duty { margin: 0; }

/* Live quote */
.tc3-quote { padding: 16px 18px; border-radius: 20px; background: color-mix(in oklab, var(--ink) 4%, var(--surface)); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.7; }
.tc3-quote [data-quote-loading] { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.tc3-quote [data-quote-ready] { display: grid; gap: 4px; }
.tc3-quote-total { font-size: 26px; font-weight: 700; line-height: 1.25; color: var(--accent); font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
[dir="rtl"] .tc3-quote-total, [dir="rtl"] .tc3-quote [data-quote-rate] { text-align: right; }
.tc3-quote [data-quote-rate] { unicode-bidi: plaintext; }
.tc3-quote-error { color: var(--err); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .tc3-quote-error .btn { height: 32px; padding-inline: 4px; color: var(--accent); }

/* ---------- Digital sections ---------- */
.tc3-cat-name { direction: ltr; unicode-bidi: plaintext; overflow-wrap: anywhere; } [dir="rtl"] .tc3-cat-name { text-align: right; }
.cat-top .ico--lg { width: 96px; height: 96px; border-radius: 28px; } .cat-top .ico--lg .tci { font-size: 44px; }
.cat-top > .stack { min-width: 0; flex: 1 1 260px; }
.tc3-subcat { grid-template-columns: 64px minmax(0, 1fr) auto; } .tc3-subcat h3 { direction: ltr; unicode-bidi: plaintext; overflow-wrap: anywhere; } [dir="rtl"] .tc3-subcat h3 { text-align: right; }
.tc3-subcat .thumb .tci { font-size: 26px; color: var(--accent); }
.tc3-products .product { align-content: start; grid-template-rows: auto 1fr; }
.tc3-products .product-body { align-content: start; grid-template-rows: auto auto; } .tc3-products .product-foot { margin-block-start: auto; flex-wrap: wrap; }
.tc3-products .product-body h4 { overflow-wrap: anywhere; }
.tc3-products .voucher small { text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.tc3-products .voucher strong .tci { font-size: 1.2em; }
.tc3-products .specs .tag { height: 22px; padding-inline: 8px; font-size: 11px; }
.tc3-go { height: 38px; padding-inline: 14px; font-size: 13px; cursor: pointer; }
.tc3-go::after { content: ""; position: absolute; inset: 0; border-radius: 26px; }   /* the whole card opens the window */
.product > dialog { cursor: auto; }
@media (max-width: 560px) { .tc3-go { padding-inline: 12px; } .tc3-products .product-foot .price { font-size: 16px; } }

/* Search inside a section: beside the heading on a wide screen, a full row on a phone. */
.sub-head > .tc3-sub-search { display: flex; flex: 1 1 300px; justify-content: flex-end; gap: 10px; }
.tc3-sub-search .search, .tc3-head-search .search { flex: 1 1 240px; max-width: 420px; width: auto; }
.tc3-head-search { gap: 14px; width: 100%; }

/* Alo eSIM destinations */
.tc3-countries { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.tc3-country { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.tc3-country:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line), 0 22px 36px -26px var(--shadow); }
.tc3-flag { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 10%, transparent); color: var(--accent); }
.tc3-flag img { width: 100%; height: 100%; object-fit: cover; } .tc3-country-name { flex: 1 1 auto; min-width: 0; line-height: 1.45; unicode-bidi: plaintext; overflow-wrap: anywhere; }
.tc3-country > .tci { font-size: 14px; color: var(--faint); flex: none; }
@media (max-width: 560px) { .tc3-countries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tc3-country { padding: 8px 10px; gap: 9px; font-size: 13px; border-radius: 18px; } .tc3-flag { width: 32px; height: 32px; } .tc3-country > .tci { display: none; } }
.phero .search [data-country-reset] { flex: none; }

/* ---------- Alo eSIM order ---------- */
.tc3-esim-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; width: 100%; }
.tc3-esim-head .cat-top { flex: 1 1 420px; min-width: 0; flex-wrap: nowrap; align-items: flex-start; }
.tc3-esim-logo { width: 96px; height: 96px; flex: none; border-radius: 28px; display: grid; place-items: center; padding: 14px; background: linear-gradient(180deg, #B9E4FE, #E3EEFC); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5), 0 24px 40px -24px var(--shadow); }
.tc3-esim-logo img { width: 100%; height: auto; }
.tc3-esim-meta { display: grid; gap: 2px; padding: 16px 22px; min-width: 180px; } .tc3-esim-meta strong { font-size: 24px; font-weight: 700; }
.tc3-esim-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.tc3-state { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .tc3-state > .stack { flex: 1 1 260px; min-width: 0; } .tc3-state h2 { font-size: 20px; font-weight: 700; line-height: 1.4; }
.tc3-state .ico .tc3-spinner { width: 28px; height: 28px; vertical-align: 0; }
.tc3-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tc3-overview dd { overflow-wrap: anywhere; unicode-bidi: plaintext; }
.tc3-break { overflow-wrap: anywhere; unicode-bidi: plaintext; } [dir="rtl"] .tc3-break { text-align: right; }
.tc3-esim-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 34px); }
.tc3-install { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.tc3-qr { display: grid; gap: 16px; justify-items: start; }
.tc3-step-head { display: flex; align-items: center; gap: 14px; } .tc3-step-head h2 { font-size: 19px; font-weight: 700; line-height: 1.4; }
.tc3-step-no { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #fff; background: linear-gradient(180deg, #7C24FF, #5A00D4); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4); font-variant-numeric: tabular-nums; }
.tc3-qr-frame { width: min(100%, 300px); aspect-ratio: 1; padding: 16px; border-radius: 26px; background: #fff; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgb(19 12 36 / .1), 0 30px 50px -34px var(--shadow); }
.tc3-qr-frame img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.tc3-qr-none { color: #5B5371; text-align: center; font-size: 13.5px; line-height: 1.7; align-content: center; gap: 10px; } .tc3-qr-none .tci { font-size: 54px; color: #8C84A1; }
.tc3-cloud { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 22px; background: color-mix(in oklab, var(--accent) 8%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent); transition: transform .35s var(--ease); }
.tc3-cloud:hover { transform: translateY(-2px); } .tc3-cloud strong { font-size: 15px; font-weight: 650; } .tc3-cloud > .tci { color: var(--accent); }
.tc3-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tc3-fields--full { grid-template-columns: minmax(0, 1fr); padding-block-start: 12px; }
.tc3-data { position: relative; display: grid; gap: 4px; padding: 12px 16px; border-radius: 18px; background: color-mix(in oklab, var(--ink) 4%, transparent); min-width: 0; }
.tc3-data > span { font-size: 12px; color: var(--faint); } .tc3-data > strong { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; unicode-bidi: plaintext; }
[dir="rtl"] .tc3-data > strong[dir="ltr"] { text-align: right; }
.tc3-data:has(> .ibtn) { padding-inline-end: 58px; } .tc3-data > .ibtn { position: absolute; inset-inline-end: 8px; top: 50%; translate: 0 -50%; width: 40px; height: 40px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); } .tc3-data > .ibtn .tci { font-size: 18px; }
.tc3-manual { border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); padding: 4px 16px; }
.tc3-manual summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; font-size: 14.5px; font-weight: 600; }
.tc3-manual summary::-webkit-details-marker { display: none; } .tc3-manual summary span { display: inline-flex; align-items: center; gap: 10px; } .tc3-manual summary .tci { font-size: 17px; color: var(--accent); }
.tc3-manual summary > .tci { transition: rotate .3s var(--ease); } .tc3-manual[open] summary > .tci { rotate: 180deg; } .tc3-manual[open] { padding-block-end: 14px; }
.tc3-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block-start: clamp(20px, 3vw, 32px); border-block-start: 1px solid var(--line); }
.tc3-life { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: 22px; background: color-mix(in oklab, var(--ink) 3.5%, transparent); } .tc3-life h3 { font-size: 15.5px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.tc3-facts { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13.5px; } .tc3-facts span { unicode-bidi: isolate; } .tc3-facts b { font-weight: 500; color: var(--faint); margin-inline-end: 6px; }
.tc3-dates { display: grid; gap: 2px; } .tc3-dates b { font-weight: 600; color: var(--ink); unicode-bidi: isolate; display: inline-block; }
.tc-guide-tabs button { cursor: pointer; } .tc-guide-tabs small { font-size: 11.5px; font-weight: 500; opacity: .7; }
.tc3-guide { display: grid; gap: 14px; } .tc3-guide h3 { font-size: 15px; font-weight: 650; margin-block-end: 8px; }
.tc3-guide ol, .tc3-list { display: grid; gap: 6px; padding-inline-start: 1.3em; font-size: 14px; line-height: 1.8; } .tc3-guide ol { list-style: decimal; color: var(--muted); } .tc3-list { list-style: disc; margin-block-start: 6px; }
@media (max-width: 860px) { .tc3-install { grid-template-columns: minmax(0, 1fr); } .tc3-qr { justify-items: center; } .tc3-qr .tc3-step-head { justify-self: start; } .tc3-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tc3-fields { grid-template-columns: minmax(0, 1fr); } .tc3-esim-logo { width: 72px; height: 72px; border-radius: 22px; padding: 10px; } .tc3-esim-meta { width: 100%; } .tc3-order-foot .btn { flex: 1 1 100%; } }
@media print { .nav-wrap, .dock, .footer, .crumbs, [data-reload], [data-copy] { display: none !important; } }