/* AlkStore surfaces. Loaded last. Colors live in variables only. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050b0c;
  --paper: var(--bg);
  --surface: #0a1315;
  --surface-2: #101c1e;
  --line: rgba(255, 255, 255, 0.08);
  --accent: #00f8f8;
  --accent-fill: #00f8f8;
  --accent-hover: #7affff;
  --accent-soft: rgba(0, 248, 248, 0.14);
  --accent-ink: #031012;
  --cyan: var(--accent);
  --blue: var(--accent);
  --text: #e9f3f4;
  --ink: var(--text);
  --ink-soft: var(--text);
  --muted: #c5d4d6;
  --faint: #9eb4b7;
  --tile: #f3f8f9;
  --tile-ink: #0a1a1d;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  --radius-control: 12px;
  --radius-card: 16px;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6f7;
  --paper: var(--bg);
  --surface: #ffffff;
  --surface-2: #eef3f4;
  --line: rgba(13, 31, 34, 0.11);
  --line-strong: rgba(13, 31, 34, 0.2);
  --accent: #0b6e74;
  --accent-fill: #0b7a76;
  --accent-hover: #095f5c;
  --accent-soft: rgba(11, 122, 118, 0.1);
  --accent-ink: #ffffff;
  --cyan: var(--accent);
  --blue: var(--accent);
  --text: #0d1f22;
  --ink: var(--text);
  --ink-soft: var(--text);
  --muted: #4a6064;
  --faint: #66797c;
  --tile: #ffffff;
  --tile-ink: #0d1f22;
  --gold: #8a6212;
  --shadow: 0 1px 2px rgba(13, 31, 34, 0.05), 0 8px 24px rgba(13, 31, 34, 0.06);
  --radius-control: 12px;
  --radius-card: 16px;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="light"],
html[data-theme="light"] body {
  background:
    radial-gradient(ellipse at 50% -12%, var(--accent-soft), transparent 46%),
    var(--bg);
  color: var(--text);
}

body,
button,
input,
select,
textarea {
  font-family: "Cairo", Tahoma, sans-serif;
  font-weight: 400;
}

h1, h2, .store-intro-title, .hero-title, .page-intro h1 {
  font-family: "Cairo", Tahoma, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  color: #f3fbfa;
}

h3, h4, .section-heading h2, .operator-heading h2 {
  font-family: "Cairo", Tahoma, sans-serif;
  font-weight: 800;
}

p, small, .muted, .hero-sub, .store-intro p, .trust-lane small, .how-copy small {
  color: #7fa3a0;
}

.brand-lockup {
  display: block;
  height: 36px;
  width: auto;
  max-width: min(220px, 42vw);
  object-fit: contain;
}

footer .brand-lockup {
  height: 54px;
  max-width: 280px;
}

html[data-theme="dark"] body > header.topbar {
  background: rgba(5, 11, 12, 0.92);
  border-bottom: 1px solid rgba(46, 232, 217, 0.14);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.launch-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 16px;
  background: linear-gradient(90deg, #0a3d3d, #081416 42%, #0a3d3d);
  color: #f3fbfa;
  border-bottom: 1px solid rgba(46, 232, 217, 0.18);
  font-size: 0.95rem;
  text-align: center;
}

.launch-bar b {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 12px;
  background: linear-gradient(180deg, #2ee8d9, #1aa7a0);
  color: #04221f;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(46, 232, 217, 0.35);
}

.product-card,
.compact-product-card,
.ticket-card,
.plan-card,
.router-offer-card,
.coupon-card,
.address-card,
.dashboard-card,
.review-card,
.business-card,
.auth-card,
.order-record,
.skeleton-card,
.signal-card,
.admin-stats article,
.operator-tile,
.hero-cat,
.trust-lane article,
.how-modern li,
.faq-list details {
  border-radius: 22px !important;
  clip-path: none !important;
}

html[data-theme="dark"] .product-card,
html[data-theme="dark"] .compact-product-card,
html[data-theme="dark"] .ticket-card,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .router-offer-card,
html[data-theme="dark"] .coupon-card,
html[data-theme="dark"] .address-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .business-card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .order-record,
html[data-theme="dark"] .signal-card,
html[data-theme="dark"] .operator-tile,
html[data-theme="dark"] .hero-cat,
html[data-theme="dark"] .trust-lane article,
html[data-theme="dark"] .how-modern li,
html[data-theme="dark"] .faq-list details,
html[data-theme="dark"] .admin-stats article {
  background: #081416 !important;
  border: 1px solid rgba(46, 232, 217, 0.14) !important;
  color: #f3fbfa;
  box-shadow: none;
}

html[data-theme="dark"] .product-card:hover,
html[data-theme="dark"] .compact-product-card:hover,
html[data-theme="dark"] .plan-card:hover,
html[data-theme="dark"] .operator-tile:hover,
html[data-theme="dark"] .hero-cat:hover,
html[data-theme="dark"] .trust-lane article:hover {
  border-color: rgba(46, 232, 217, 0.55) !important;
  box-shadow: 0 0 28px rgba(46, 232, 217, 0.16);
}

.status-pill,
.stock-badge,
.operator-badge,
.offer-exclusive,
.filter-chip,
.ticket-sim,
.ticket-duration {
  border-radius: 999px !important;
  clip-path: none !important;
}

.primary-action,
.add-button {
  border-radius: 999px !important;
  background: linear-gradient(180deg, #2ee8d9, #1aa7a0) !important;
  color: #04221f !important;
  border: 0 !important;
  font-weight: 800;
  box-shadow: 0 0 22px rgba(46, 232, 217, 0.32);
}

.primary-action:hover,
.add-button:hover {
  filter: brightness(1.06);
  color: #04221f !important;
}

.secondary-action,
.detail-button {
  border-radius: 999px !important;
  background: transparent !important;
  color: #f3fbfa !important;
  border: 1px solid rgba(243, 251, 250, 0.28) !important;
  box-shadow: none;
}

.secondary-action:hover,
.detail-button:hover {
  color: #2ee8d9 !important;
  border-color: #2ee8d9 !important;
  background: transparent !important;
}

.filter,
.category-tab {
  border-radius: 999px !important;
}

html[data-theme="dark"] .filter.active,
html[data-theme="dark"] .category-tab.active {
  background: rgba(46, 232, 217, 0.14) !important;
  border-color: #2ee8d9 !important;
  color: #2ee8d9 !important;
}

.hero-stage {
  aspect-ratio: 2.2 / 1 !important;
  width: min(1180px, calc(100% - 32px)) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(46, 232, 217, 0.14) !important;
  background: #081416 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.hero-slide img,
.hero-slide--poster img {
  object-fit: cover !important;
  object-position: center !important;
}

.compact-product-card,
.plan-card {
  padding: 0 0 16px !important;
  overflow: hidden;
}

.compact-poster-frame,
.plan-card .ticket-media,
.plan-card .product-media,
.plan-card .offer-product-media,
.detail-media,
.offer-detail-media,
.brand-offer-detail-media,
.data-offer-detail-media,
.postpaid-offer-detail-media {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #081416 !important;
  position: relative;
}

.detail-media,
.offer-detail-media,
.brand-offer-detail-media,
.data-offer-detail-media,
.postpaid-offer-detail-media {
  border-radius: 22px !important;
}

.compact-poster,
.plan-card .product-media img,
.plan-card .offer-product-media img,
.detail-media img,
.offer-detail-media img,
.brand-offer-detail-media img,
.poster-art img,
.brand-offer-art.poster-art > img,
.brand-offer-art > img,
.data-plan-art > img,
.postpaid-plan-art > img,
.brand-offer-art,
.data-plan-art,
.postpaid-plan-art {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  background: transparent !important;
  display: block !important;
}

.brand-offer-detail-media,
.data-offer-detail-media,
.postpaid-offer-detail-media,
.detail-media {
  position: relative !important;
}

.brand-offer-detail-media .brand-offer-art,
.data-offer-detail-media .data-plan-art,
.postpaid-offer-detail-media .postpaid-plan-art {
  position: absolute !important;
  inset: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

.compact-product-card .compact-brand,
.compact-product-card h3,
.compact-product-card ul,
.compact-product-card .compact-price,
.compact-product-card .compact-details,
.plan-card .ticket-body,
.plan-card .product-body {
  margin-inline: 14px;
}

.plan-card .ticket-body,
.plan-card .product-body {
  padding-top: 12px;
}

.offer-pricing strong,
.offer-current strong,
.detail-price strong,
.plan-price strong,
.price-breakdown .price-total strong {
  color: #2ee8d9 !important;
}

.price-breakdown > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
}

.price-breakdown > div > span {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.45;
}

.price-breakdown > div > strong {
  flex: 0 0 auto;
  white-space: nowrap !important;
  unicode-bidi: isolate;
  line-height: 1.2;
}

main.page-shell {
  margin-top: 8px !important;
}

.breadcrumbs {
  margin-bottom: 8px !important;
}

.product-detail {
  margin-top: 4px !important;
  margin-bottom: 28px !important;
  gap: 28px !important;
  align-items: start !important;
}

.launch-bar {
  flex-wrap: nowrap;
  min-height: 36px;
}

.launch-bar span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.how-modern ol {
  position: relative;
}

.how-modern .how-num {
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #2ee8d9, #0a3d3d) !important;
  color: #04221f !important;
  font-weight: 900 !important;
  box-shadow: 0 0 16px rgba(46, 232, 217, 0.28);
}

.desktop-nav a,
.mobile-menu a,
.footer-links a {
  color: #7fa3a0;
}

.desktop-nav a:hover,
.mobile-menu a:hover,
.footer-links a:hover {
  color: #2ee8d9;
}

.op-stc { --op: #4b148c; }
.op-yaqoot { --op: #6d28d9; }
.op-redbull { --op: #e10600; }
.op-salam { --op: #1aa7a0; }
.op-mobily { --op: #00a0df; }
.op-zain { --op: #8dc63f; }

html[data-theme="dark"] .plan-card.op-yaqoot,
html[data-theme="dark"] .plan-card.op-redbull,
html[data-theme="dark"] .compact-product-card.theme-yaqoot,
html[data-theme="dark"] .compact-product-card.theme-redbull {
  border-color: color-mix(in srgb, var(--op) 45%, transparent) !important;
}

@media (max-width: 800px) {
  .brand-lockup { height: 30px; }
  footer .brand-lockup { height: 46px; }
  .launch-bar { font-size: 0.84rem; padding: 8px 12px; }
  .hero-stage {
    aspect-ratio: 16 / 10 !important;
    width: calc(100% - 16px) !important;
    border-radius: 20px !important;
    min-height: 210px;
  }
  .mobile-menu a { min-height: 48px; }
  .header-link, .menu-toggle, .cart-button { min-height: 44px; }
  .how-modern ol { grid-template-columns: 1fr !important; }
}

/* One page background, three surfaces, one accent. */
html[data-theme="dark"] body > header.topbar,
html[data-theme="light"] body > header.topbar,
footer,
.footer-main,
.footer-support,
.mobile-bottom {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
  color: var(--text);
  height: auto !important;
}

.launch-bar {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--line) !important;
}

.launch-bar b {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: none !important;
  min-height: 0 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  line-height: 1.3 !important;
}

.page-shell,
.catalog,
.operator-section,
.how-it-works,
.store-info,
.faq-section,
.business-card,
.trust-lane,
.store-intro,
main {
  background: transparent !important;
}

.product-card,
.compact-product-card,
.plan-card,
.dashboard-card,
.auth-card,
.detail-section,
.filter-panel,
.cart-dialog,
.store-info article,
.faq-section details,
.how-modern li,
.trust-strip {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text);
}

input,
select,
textarea,
.header-search,
.filter,
.category-tab,
.secondary-action,
.icon-button,
.detail-button {
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-control) !important;
  color: var(--text);
}

.primary-action,
.cart-button,
.add-button,
.launch-bar b {
  background: var(--accent-fill, var(--accent)) !important;
  color: var(--accent-ink) !important;
  border: 0 !important;
  border-radius: var(--radius-control) !important;
  min-height: 44px;
  box-shadow: var(--shadow) !important;
}

.primary-action:hover,
.cart-button:hover,
.add-button:hover {
  background: var(--accent-hover) !important;
  color: var(--accent-ink) !important;
}

.secondary-action {
  background: transparent !important;
  color: var(--text) !important;
  min-height: 44px;
}

.secondary-action:hover,
.desktop-nav a:hover,
.mobile-menu a:hover,
.footer-links a:hover,
.filter.active,
.category-tab.active {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.filter.active,
.category-tab.active {
  background: var(--accent-soft) !important;
}

h1, h2, h3, h4,
.store-intro-title,
.hero-title,
.page-intro h1 {
  color: var(--text);
}

p, small, .muted, .hero-sub, .desktop-nav a, .mobile-menu a, .footer-links a {
  color: var(--muted);
}

.page-shell,
.catalog,
.operator-section,
.hero-stage {
  width: min(1180px, calc(100% - 32px));
}

.hero-stage {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  background: var(--bg) !important;
  box-shadow: none !important;
  overflow: hidden;
}

html[data-theme="dark"] .hero-slide img,
html[data-theme="dark"] .hero-slide--poster img {
  object-fit: cover !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.hero-logo { display: none !important; }

.brand-lockup {
  background: transparent !important;
  mix-blend-mode: normal;
}

html[data-theme="light"] .brand-lockup {
  background: #050b0c !important;
  border-radius: 10px;
  padding: 3px 8px;
}

.operator-grid {
  align-items: stretch;
}

.operator-tile,
.operator-tile:hover,
html[data-theme="light"] .operator-tile,
html[data-theme="dark"] .operator-tile {
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  min-height: 112px !important;
  box-shadow: none !important;
  transform: none !important;
}

.operator-tile .operator-logo,
.operator-tile .operator-logo img,
.compact-operator-logo {
  background: transparent !important;
  object-fit: contain !important;
  object-position: center !important;
}

.operator-tile .operator-logo {
  height: 56px !important;
  padding: 8px 12px !important;
}

.operator-tile .operator-logo img {
  width: 100% !important;
  height: 40px !important;
  max-width: 120px !important;
  max-height: 40px !important;
}

.operator-tile .operator-name,
.operator-tile strong,
.operator-tile span {
  color: var(--text) !important;
}

.lang-icon,
.icon-arrow {
  display: inline-block;
  vertical-align: -3px;
}

.compact-price small { display: none !important; }
.compact-product-card .compact-price small.price-from,
.router-offer-card .router-start-price > span {
  display: inline !important;
  font-size: .82rem;
  font-weight: 800;
  margin-inline-end: .35rem;
  white-space: nowrap;
}
.router-duration-line {
  display: block;
  margin: 8px 14px 0;
  color: var(--text);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.45;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.missing-cost-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.missing-cost-list a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #d97706 18%, transparent);
  color: var(--text);
  text-decoration: none;
}

html[data-theme="light"] .desktop-nav a:hover,
html[data-theme="light"] .mobile-menu a:hover,
html[data-theme="light"] .footer-links a:hover,
html[data-theme="light"] .secondary-action:hover {
  color: color-mix(in srgb, var(--accent-ink) 62%, var(--accent)) !important;
}

.company-check{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:14px 0;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2);color:var(--text)}
.company-check strong{font-size:1.02rem}
.company-check a{color:#062027;background:#7ee0ea;border-radius:999px;padding:8px 14px;text-decoration:none;font-weight:700}
html[data-theme=light] .company-check a{color:#042026}
html{font-size:16px}
body{overflow-x:clip}
.filter-panel[hidden]{display:none !important}
.filter-extra{margin-top:10px}
.filter-extra summary,.feedback-details summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.ops-table-wrap{overflow-x:auto}
html[data-theme=light] .desktop-nav a,
html[data-theme=light] .header-link,
html[data-theme=light] .favorite-button,
html[data-theme=light] .account-link,
html[data-theme=light] .menu-toggle{color:#10211c}
html[data-theme=light] input,
html[data-theme=light] select,
html[data-theme=light] textarea{color:#10211c;border-color:#5f7c74;background:#fff}
html[data-theme=light] .muted,
html[data-theme=light] .ops-note{color:#3c564e}
.account-welcome-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.account-nav a[data-inactive]{color:var(--muted)}
.account-nav a[data-inactive]::after{content:" · غير مفعّل";font-size:.78rem}
.product-grid .pcard,.compact-product-card .pcard{height:100%}
.ops-preview,.product-grid img{object-fit:contain}

.detail-media.pcard-detail {
  aspect-ratio: auto !important;
  width: min(100%, 520px) !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.pcard {
  --b: var(--accent);
  --brand-hi: color-mix(in srgb, var(--b) 55%, #fff);
  --on: #fff;
  container-type: inline-size;
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 18px;
  background: var(--bg);
  border: 1px solid var(--brand-hi);
  color: var(--text);
  isolation: isolate;
}

.pcard.is-og { min-height: 0; aspect-ratio: 1200 / 630; }

.pcard::before,
.pcard::after,
.pcard .rb { content: none !important; display: none !important; }
.pcard { box-shadow: none; }

.activation-badge {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--accent);
  font-size: 0.92rem;
}
.city-field { display: grid; gap: 6px; margin-top: 12px; }
.city-field small { color: var(--muted); }
.product-skeleton { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 18px; }
.sk { display: block; border-radius: 16px; background: var(--surface-2); animation: sk 1.2s ease infinite; }
.sk-media { min-height: 280px; }
.sk-copy { display: grid; gap: 10px; align-content: start; }
.sk-line { height: 18px; }
.sk-line.short { width: 55%; }
@keyframes sk { 50% { opacity: .55 } }
@media (max-width: 800px) { .product-skeleton { grid-template-columns: 1fr; } }
.hero-lockup { width: min(420px, 70%); height: auto; margin: auto; display: block; }
img.brand-salam,
.pcard .op-logo,
.operator-tile .operator-logo,
.operator-tile.salam .operator-logo,
.compact-operator-logo.brand-salam {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.pcard .rb { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; color: var(--b); pointer-events: none; }
.pcard .in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(125cqw - 12cqw);
  margin: 6cqw;
}
.pcard .tp { display: flex; justify-content: space-between; align-items: center; min-height: 36px; }
.pcard .op {
  display: flex;
  align-items: center;
  min-height: 32px;
  max-width: 46%;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: max(12px, 4.2cqw);
  font-weight: 700;
  color: var(--brand-hi);
  border: 1px solid var(--brand-hi);
  background: color-mix(in srgb, var(--b) 22%, var(--bg));
}
.pcard .op-logo { height: 28px; width: auto; max-width: 92px; object-fit: contain; }
.pcard .lg { width: min(34%, 132px); height: auto; }
.pcard .hr { margin-top: 12px; display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.pcard .n { font-weight: 800; letter-spacing: -0.02em; color: var(--brand-hi); }
.pcard .u { font-size: max(12px, 5cqw); font-weight: 700; color: var(--brand-hi); }
.pcard .du {
  align-self: flex-start;
  margin-top: 8px;
  font-size: max(12px, 3.6cqw);
  padding: 4px 10px;
  border-radius: 99px;
  color: var(--brand-hi);
  background: color-mix(in srgb, var(--b) 30%, transparent);
  border: 1px solid var(--brand-hi);
}
.pcard .nm {
  margin-top: 10px;
  font-size: max(16px, 5.4cqw);
  font-weight: 800;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard .ft { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.pcard .ft li {
  display: block;
  font-size: max(12px, 3.4cqw);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.pcard .ft li:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: var(--brand-hi);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--b) 35%, transparent);
}
.pcard .note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.pcard .pr {
  margin-top: auto;
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--b) 16%, var(--bg));
  border: 1px solid var(--brand-hi);
}
.pcard .now { font-size: max(22px, 8cqw); font-weight: 800; line-height: 1; white-space: nowrap; }
.pcard .now small { font-size: max(12px, 3.4cqw); font-weight: 700; margin-inline-start: 4px; }
.pcard .was { display: grid; justify-items: end; gap: 4px; min-width: 0; }
.pcard .old { font-size: max(12px, 3.6cqw); color: var(--muted); text-decoration: line-through; }
.pcard .sv {
  display: inline-block;
  font-size: max(12px, 3.2cqw);
  font-weight: 700;
  background: var(--b);
  color: var(--on);
  border-radius: 99px;
  padding: 4px 8px;
  white-space: nowrap;
}
.pcard>.limited-ribbon{border-radius:0}
.pcard .rn{margin:8px 0 0;color:#ffb089;font-weight:800;font-size:max(12px, 3.4cqw);line-height:1.35}
.limited-ribbon{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0;
  padding:9px 14px 10px;
  background:
    radial-gradient(90% 160% at 100% 0%, #ff6b5a 0%, transparent 46%),
    linear-gradient(90deg, #6a0012 0%, #d10f1c 46%, #ff2a2a 100%);
  color:#fff;
  font-family:var(--font-title), Tahoma, sans-serif;
  font-weight:800;
  font-size:.98rem;
  line-height:1.15;
  text-align:center;
  text-shadow:0 1px 0 #4a000c;
}
.limited-ribbon:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 4px #ffffff2e;
  flex:none;
}
.product-detail.offer-detail>.limited-ribbon{margin:0 0 12px;border-radius:18px 18px 0 0}
html[data-theme=light] .limited-ribbon{color:#fff}
html[data-theme=light] .pcard .rn{color:#9a3412}

.product-grid,
.product-grid[data-view="compact"] {
  grid-template-columns: repeat(4, minmax(240px, 1fr)) !important;
}
@media (max-width: 1100px) {
  .product-grid,
  .product-grid[data-view="compact"] { grid-template-columns: repeat(2, minmax(240px, 1fr)) !important; }
}
@media (max-width: 640px) {
  .product-grid,
  .product-grid[data-view="compact"] { grid-template-columns: 1fr !important; }
}

.desktop-nav a[aria-current="page"],
.mobile-menu a[aria-current="page"] {
  color: var(--accent) !important;
}
.lang-code { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; }
.filter.active,
.category-tab.active,
.operator-tile.selected {
  border-color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px var(--accent) !important;
}

.brand-colors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.brand-colors label { display: grid; gap: 4px; font-size: 0.82rem; color: var(--muted); }
.brand-colors input { width: 64px; height: 36px; padding: 0; background: transparent; }

/* The plan card is the only frame. Kill the old compact strip and outer border. */
a.pcard-link,
a.pcard-link.compact-product-card,
a.pcard-link.product-card,
html[data-theme="dark"] a.pcard-link,
html[data-theme="light"] a.pcard-link {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
a.pcard-link::before,
a.pcard-link::after,
.compact-product-card::before,
.compact-product-card::after,
.product-card::before,
.ticket-card::before {
  content: none !important;
  display: none !important;
  height: 0 !important;
  background: none !important;
}

@media (max-width: 640px) {
  .launch-bar {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 0.8rem;
    flex-wrap: wrap;
    line-height: 1.35;
  }
  .launch-bar span {
    min-width: 0;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
  }
  .launch-bar b { white-space: nowrap; flex: none; }
  .brand-lockup { height: 30px; }
  .header-main { min-height: 56px; }
  .header-search-mobile { padding-bottom: 8px; }
  .cookie-bar {
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .cookie-bar p { font-size: 0.78rem !important; line-height: 1.45 !important; }
  body { padding-bottom: 76px; }
}

.order-assurance{display:grid;gap:8px;margin:16px 0;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.order-assurance strong{color:var(--text)}
.order-assurance p,.order-assurance a{color:var(--text);font-size:.95rem;line-height:1.7}
.order-assurance a{text-decoration:underline}
.pay-soon{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;width:min(100%,280px);min-height:48px;margin-top:4px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:not-allowed}
.pay-soon b{border-radius:999px;padding:3px 10px;background:var(--accent-soft);color:var(--accent);font-size:.78rem;font-weight:800}
.is-soon{opacity:.92}
.is-soon small{color:var(--accent)}
.operator-row{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}


.pay-soon{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 14px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--accent,#00f8f8) 55%,transparent);background:transparent;color:var(--text);cursor:not-allowed}
.detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.detail-actions>.primary-action,.detail-actions>.pay-soon{flex:none;width:auto;min-height:52px;margin:0}
.detail-actions>.secondary-action{grid-column:1/-1;justify-self:start}
.detail-actions .pay-soon{display:inline-flex}
@media(max-width:420px){.detail-actions{grid-template-columns:1fr}}

.hero-slide--quarter{background:#050b0c!important;color:#f4f8f9}
.hero-slide--quarter .q3-logo img{
  position:static!important;inset:auto!important;width:auto!important;height:18px!important;max-width:78px!important;
  object-fit:contain!important;transform:none!important;margin:0!important;background:transparent!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
.q3-kicker{color:#7ef6ef!important}
.q3-copy h2{color:#f4f8f9!important}
.q3-now b,.q3-now em{color:#7ef6ef!important}
.q3-card{color:#f4f8f9!important}
@media(max-width:1099px){
  .hero-stage{aspect-ratio:16/9!important}
}
@media(max-width:800px){
  .hero-stage{aspect-ratio:auto!important;height:512px!important;min-height:512px;width:calc(100% - 16px)!important}
}

/* Mobily postpaid 200 / 400 — same poster, live prices */
.pcard.mf{
  background:
    radial-gradient(90% 70% at 80% 0%, rgba(75,245,255,.28), transparent 46%),
    radial-gradient(80% 60% at 0% 100%, rgba(30,123,255,.35), transparent 52%),
    linear-gradient(165deg,#071428 0%,#0c2348 52%,#061018 100%) !important;
  border:1px solid rgba(126,196,255,.45) !important;
  color:#f4f8ff !important;
  box-shadow:0 18px 42px rgba(4,16,40,.45), inset 0 0 0 1px rgba(255,255,255,.05);
}
.pcard.mf .mf-ring{
  position:absolute;z-index:0;pointer-events:none;
  width:72%;aspect-ratio:1;left:14%;top:16%;
  border-radius:50%;
  border:12px solid rgba(30,123,255,.16);
  border-top-color:#7ec8ff;
  border-right-color:#1e7bff;
  transform:rotate(-32deg);
  filter:drop-shadow(0 0 18px rgba(75,245,255,.35));
}
.pcard.mf>.limited-ribbon{position:relative;z-index:2}
.pcard.mf .in{position:relative;z-index:1;min-height:calc(118cqw)}
.pcard.mf .op{
  background:rgba(4,12,28,.55);
  border-color:rgba(126,196,255,.45);
  padding:4px 8px;
}
.pcard.mf .op-logo{height:22px;max-width:72px;filter:drop-shadow(0 0 8px rgba(75,245,255,.45))}
.pcard.mf .mf-kind{
  font-size:max(11px,3.1cqw);font-weight:800;letter-spacing:.04em;
  color:#9fd4ff;white-space:nowrap;
}
.pcard.mf .mf-code{text-align:center;margin-top:4px;line-height:.82}
.pcard.mf .mf-code small{
  display:block;font-size:max(12px,3.4cqw);font-weight:800;
  letter-spacing:.22em;color:#9fd4ff;
}
.pcard.mf .mf-code strong{
  display:block;font-size:max(64px,30cqw);font-weight:800;letter-spacing:-.06em;
  background:linear-gradient(180deg,#fff 18%,#8ec6ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pcard.mf .mf-off{
  display:inline-flex;margin-top:8px;padding:5px 12px;border-radius:999px;
  background:linear-gradient(90deg,#ff2d2d,#ff6a32);
  color:#fff;font-weight:800;font-size:max(12px,3.3cqw);
  box-shadow:0 8px 18px rgba(255,45,45,.35);
}
.pcard.mf .mf-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
  margin:14px 0 0;padding:0;list-style:none;
}
.pcard.mf .mf-stats li{
  display:grid;justify-items:center;gap:2px;padding:8px 4px;border-radius:12px;
  background:rgba(4,14,32,.55);border:1px solid rgba(126,196,255,.28);
}
.pcard.mf .mf-stats b{font-size:max(14px,4.2cqw);color:#fff;line-height:1}
.pcard.mf .mf-stats span{font-size:max(11px,2.7cqw);color:#9fd4ff}
.pcard.mf .mf-pay{
  margin-top:auto;display:grid;grid-template-columns:1fr 1.15fr;gap:8px;
}
.pcard.mf .mf-pay>div{
  padding:10px 10px 8px;border-radius:14px;
  background:rgba(4,12,28,.62);border:1px solid rgba(126,196,255,.25);
}
.pcard.mf .mf-pay small{display:block;color:#9fd4ff;font-size:max(11px,2.7cqw);font-weight:700}
.pcard.mf .mf-pay strong{display:block;font-size:max(22px,7.2cqw);color:#fff;line-height:1.05;font-variant-numeric:tabular-nums}
.pcard.mf .mf-pay em{font-style:normal;color:#9fd4ff;font-size:max(11px,2.8cqw);font-weight:700}
.pcard.mf .mf-renew{
  background:linear-gradient(180deg,rgba(30,123,255,.42),rgba(6,16,36,.72)) !important;
  border-color:#8ec6ff !important;
}
html[data-theme=light] .pcard.mf{color:#f4f8ff !important}
html[data-theme=light] .pcard.mf .mf-code strong{
  background:linear-gradient(180deg,#fff 18%,#d7ecff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Homepage postpaid slide + 4s progress */
.hero-slide--mf{background:#050b0c!important;color:#f4f8f9}
.mf-slide-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(520px 280px at 12% 20%, rgba(75,245,255,.22), transparent 70%),
    radial-gradient(480px 260px at 88% 80%, rgba(30,123,255,.32), transparent 68%),
    linear-gradient(115deg,#07131f 0%,#050b0c 48%,#0a1c38 100%);
}
.mf-slide{
  position:relative;z-index:2;height:100%;
  display:grid;grid-template-columns:minmax(220px,.9fr) minmax(0,1.2fr);
  gap:18px;align-items:center;
  padding:22px 58px 40px;direction:rtl;
}
html[lang="en"] .mf-slide{direction:ltr}
.mf-slide-copy h2{
  margin:0;font-size:clamp(1.55rem,2.4vw,2.45rem);line-height:1.2;font-weight:800;letter-spacing:-.03em;color:#f4f8f9!important;
}
.mf-slide-copy p{margin:10px 0 16px;max-width:34rem;color:#9db2b6;font-size:.95rem;line-height:1.7}
.mf-slide-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
.mf-slide-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:2px;min-width:0;
  padding:12px 14px 14px;border-radius:18px;text-decoration:none;color:#f4f8ff;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(75,245,255,.2), transparent 42%),
    linear-gradient(180deg,#10284a,#071424);
  border:1px solid rgba(126,196,255,.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 16px 36px rgba(0,0,0,.28);
  transition:transform .2s ease,border-color .2s ease;
}
.mf-slide-card:hover{transform:translateY(-3px);border-color:#7ef6ef}
.mf-slide-card:focus-visible{outline:2px solid #7ef6ef;outline-offset:3px}
.mf-slide-card:before{
  content:"";position:absolute;width:140px;height:140px;right:-30px;top:-36px;border-radius:50%;
  border:10px solid rgba(30,123,255,.2);border-top-color:#7ec8ff;border-right-color:#1e7bff;
  transform:rotate(-30deg);pointer-events:none;
}
.mf-slide-top{position:relative;display:flex;align-items:center;justify-content:space-between}
.mf-slide-top b{
  border-radius:999px;padding:3px 8px;background:linear-gradient(90deg,#ff2d2d,#ff6a32);
  color:#fff;font-size:.75rem;font-weight:800;
}
.hero-slide--mf .mf-slide-top img,
.hero-slide--mf.is-active .mf-slide-top img{
  position:static!important;inset:auto!important;width:auto!important;height:20px!important;max-width:84px!important;
  object-fit:contain!important;transform:none!important;margin:0!important;background:transparent!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
.mf-slide-kicker{position:relative;margin-top:8px;color:#9fd4ff;font-size:.75rem;font-weight:800;letter-spacing:.16em}
.mf-slide-code{
  position:relative;font-size:clamp(2.4rem,4vw,3.6rem);line-height:.85;font-weight:800;letter-spacing:-.05em;
  background:linear-gradient(180deg,#fff,#8ec6ff);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.mf-slide-data{position:relative;color:#d7e8ff;font-weight:700;font-size:.9rem}
.mf-slide-pay,.mf-slide-renew{position:relative;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.mf-slide-pay{margin-top:8px}
.mf-slide-pay em,.mf-slide-renew em{font-style:normal;font-size:.68rem;font-weight:800;color:#9fd4ff}
.mf-slide-pay b,.mf-slide-renew b{font-size:1.25rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.mf-slide-pay i,.mf-slide-renew i{font-style:normal;font-size:.72rem;color:#9fd4ff;font-weight:700}
.mf-slide-renew b{color:#7ef6ef}
.hero-slide.is-active .mf-slide-card{animation:q3in .55s cubic-bezier(.22,1,.36,1) both}
.hero-slide.is-active .mf-slide-card:nth-child(2){animation-delay:.1s}
.hero-stage.is-auto .home-offers-dots button[aria-current="true"]{
  width:44px;height:44px;position:relative;overflow:visible;background:transparent;
}
.hero-stage.is-auto .home-offers-dots button[aria-current="true"]::after{
  content:"";position:absolute;left:calc(50% - 18px);top:calc(50% - 4px);
  width:36px;height:8px;border-radius:99px;background:#7ef6ef;
  transform:scaleX(0);transform-origin:left center;
  animation:alkSlide 4s linear forwards;
}
@keyframes alkSlide{to{transform:scaleX(1)}}
@media(max-width:800px){
  .mf-slide{grid-template-columns:1fr;padding:16px 16px 34px;gap:8px;align-content:center}
  .mf-slide-copy p{display:none}
  .mf-slide-copy h2{font-size:1.25rem}
  .mf-slide-copy .primary-action{display:none}
  .mf-slide-code{font-size:2.15rem}
  .mf-slide-card{padding:10px}
  .pcard.mf .in{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .hero-stage.is-auto .home-offers-dots button[aria-current="true"]::after{animation:none;transform:scaleX(1)}
  .pcard.mf .mf-ring{animation:none}
}


/* Cheap-renewal ad: Red Bull 95, Salam 149, Yaqoot 2X, Virgin 110 */
.hero-slide--cheap{background:#050b0c!important;color:#f4f8f9}
.cheap-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(480px 260px at 8% 20%,rgba(255,80,40,.22),transparent 70%),radial-gradient(420px 240px at 92% 80%,rgba(0,217,212,.18),transparent 68%),linear-gradient(115deg,#12080c,#050b0c 50%,#07141a)}
.cheap{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.35fr);gap:16px;align-items:center;padding:18px 52px 36px;direction:rtl}
html[lang="en"] .cheap{direction:ltr}
.cheap-copy h2{margin:0;font-size:clamp(1.45rem,2.2vw,2.2rem);line-height:1.2;font-weight:800;color:#f4f8f9!important}
.cheap-copy p{margin:8px 0 0;max-width:28rem;color:#c5d4d6;font-size:.92rem;line-height:1.65}
.cheap-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
.cheap-card{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 12px 12px;border-radius:16px;text-decoration:none;color:#f4f8f9;background:linear-gradient(180deg,rgba(16,24,28,.96),rgba(8,12,16,.96));border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.cheap-card:hover{transform:translateY(-2px);border-color:#7ef6ef}
.cheap-card.op-redbull{box-shadow:inset 0 3px 0 #E21B4D,0 14px 30px rgba(0,0,0,.28)}
.cheap-card.op-salam{box-shadow:inset 0 3px 0 #019C20,0 14px 30px rgba(0,0,0,.28)}
.cheap-card.op-yaqoot{box-shadow:inset 0 3px 0 #78272E,0 14px 30px rgba(0,0,0,.28)}
.cheap-card.op-virgin{box-shadow:inset 0 3px 0 #E11A2B,0 14px 30px rgba(0,0,0,.28)}
.cheap-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cheap-logo{display:grid;place-items:center;height:32px;width:86px;padding:0;background:transparent}
.hero-slide--cheap .cheap-logo img{position:static!important;width:auto!important;height:28px!important;max-width:86px!important;object-fit:contain!important;transform:none!important;margin:0!important;background:transparent!important;-webkit-mask-image:none!important;mask-image:none!important}
.cheap-top b{border-radius:999px;padding:3px 8px;background:linear-gradient(90deg,#ff2d2d,#ff6a32);color:#fff;font-size:.72rem;font-weight:800}
.cheap-card>strong{margin-top:6px;font-size:1.05rem;font-weight:800;color:#fff}
.cheap-perk{color:#9db2b6;font-size:.78rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cheap-renew,.cheap-first{display:flex;align-items:baseline;gap:5px}
.cheap-renew{margin-top:6px}
.cheap-renew em,.cheap-first em{font-style:normal;font-size:.68rem;font-weight:800;color:#9fd4ff}
.cheap-renew b{font-size:1.45rem;font-weight:800;color:#7ef6ef;letter-spacing:-.03em}
.cheap-renew i{font-style:normal;font-size:.72rem;color:#9fd4ff;font-weight:700}
.cheap-first b{font-size:.85rem;font-weight:700;color:#c5d4d6}
@media(max-width:800px){
  .cheap{grid-template-columns:1fr;padding:12px 12px 22px;gap:6px;align-content:center}
  .cheap-copy p{display:none}
  .cheap-copy h2{font-size:1.05rem;line-height:1.2}
  .hero-slide--cheap .q3-kicker{margin-bottom:4px;font-size:.78rem}
  .cheap-card{padding:6px 8px 7px;gap:0}
  .cheap-perk{display:none}
  .cheap-card>strong{margin-top:2px;font-size:.92rem}
  .cheap-renew{margin-top:1px}
  .cheap-renew b{font-size:1.15rem}
  .cheap-logo{height:24px;width:72px}
  .cheap-first b{font-size:.78rem}
}

.home-reviews{margin:8px auto 28px;padding:0 16px}
.home-review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.home-review{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.home-review-product{color:var(--text);font-weight:800;text-decoration:none;line-height:1.4}
.home-review-product:hover{color:var(--accent)}
.review-stars{margin:0;color:var(--accent);letter-spacing:.12em;font-size:1.05rem;line-height:1}
.home-review blockquote{margin:0;color:var(--text);line-height:1.65;font-size:.95rem}
.home-review-foot,.review-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.home-review-foot{margin-top:auto;color:var(--muted);font-size:.82rem}
.home-review-foot time,.review-meta time{margin-inline-start:auto;color:var(--muted);font-size:.8rem}
.review-card .review-meta b{font-weight:700}
@media(max-width:900px){
  .home-review-grid{grid-template-columns:1fr}
  .home-reviews{padding:0 12px}
}

/* Ratings: under the product title, the summary above the reviews, the store's reply, and product cards */
.detail-rating{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 6px;color:var(--text);text-decoration:none;font-size:.92rem;min-height:44px}
.detail-rating-stars{color:var(--accent);letter-spacing:.08em}
.detail-rating small{color:var(--muted)}
.detail-rating:hover b,.detail-rating:focus-visible b{text-decoration:underline}
.review-summary{margin:6px 0 14px}
.review-summary p{margin:0;color:var(--muted)}
.review-score{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.review-score>b{font-size:2rem;line-height:1;color:var(--text)}
.review-score small{color:var(--muted)}
.review-bars{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;max-width:360px}
.review-bars li{display:grid;grid-template-columns:3em 1fr 2.2em;align-items:center;gap:8px;font-size:.82rem;color:var(--muted)}
.review-bars i{height:8px;border-radius:999px;background:var(--surface-2);position:relative;overflow:hidden;border:1px solid var(--line)}
.review-bars i::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--w);background:var(--accent);border-radius:inherit}
.review-bars b{text-align:end;color:var(--text);font-weight:600}
.review-reply{margin-top:8px;padding:8px 12px;border-inline-start:3px solid var(--accent);background:var(--surface-2);border-radius:10px}
.review-reply b{font-size:.8rem;color:var(--muted)}
.review-reply p{margin:2px 0 0;white-space:pre-line}
.review-form h3{margin:14px 0 6px;font-size:1rem}
.review-form h3[hidden]{display:none}
.card-rating{display:block;font-size:.8rem;font-weight:700;line-height:1.3;margin:2px 0 4px;color:var(--text)}
.card-rating small{font-weight:500;color:var(--muted)}
.card-rating-star{color:var(--accent)}
.pcard .card-rating{color:inherit;font-size:12px;margin:4px 0 0}
.pcard .card-rating small{color:inherit;opacity:.72}
.pcard .card-rating-star{color:#f5b301}
.home-reviews-summary{margin:6px 0 0;color:var(--muted)}
.home-reviews-summary[hidden]{display:none}
.home-reviews-summary b{color:var(--text);font-size:1.1rem}
.home-reviews-summary b span{color:var(--accent)}

.profit-report{margin-bottom:16px}
.profit-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin:12px 0}
.profit-filters .active{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.profit-filters [data-profit-custom]{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.profit-filters label{display:grid;gap:4px;color:var(--muted);font-size:.82rem}
.profit-filters input{min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--text);padding:0 10px}
.profit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.profit-grid article{display:grid;gap:6px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.profit-grid span{color:var(--muted);font-size:.86rem}
.profit-grid strong{color:var(--accent);font-size:1.35rem;overflow-wrap:anywhere}
.profit-warning{margin:12px 0;padding:12px 14px;border:1px solid rgba(255,180,120,.45);border-radius:12px;background:rgba(255,160,80,.08)}
.profit-missing{display:grid;gap:8px;margin:8px 0 14px}
.profit-missing ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.profit-missing li{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.profit-table-wrap{overflow-x:auto}
.profit-table{width:100%;border-collapse:collapse;min-width:760px}
.profit-table th,.profit-table td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.profit-table small{display:block;color:var(--muted)}
@media(max-width:700px){.profit-grid{grid-template-columns:1fr 1fr}}


html[data-theme="dark"] .hero-slide--contain img,
html[data-theme="light"] .hero-slide--contain img,
.hero-slide--contain img{
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  background:#07131c!important;
}
.business-card{content-visibility:auto;contain-intrinsic-size:auto 480px}

.lang-switch{display:inline-flex!important;gap:4px;align-items:center;flex:0 0 auto}
.lang-switch button{min-width:0;padding:7px 10px;border-radius:10px;font-size:.78rem;font-weight:800;line-height:1;white-space:nowrap;cursor:pointer}
@media(max-width:800px){
  .header-main .lang-switch{display:none!important}
  .mobile-preferences .lang-switch{display:flex!important;width:100%}
  .mobile-preferences .lang-switch button{flex:1;min-height:44px;font-size:.92rem}
}
@media(min-width:801px){
  .header-actions .lang-switch{display:inline-flex!important}
}
html[dir=ltr] .icon-arrow{transform:scaleX(-1)}

/* Golden guarantee chip — gold only on the label, bar stays on brand surface */
.launch-bar b,
html[data-theme] .launch-bar b {
  background: linear-gradient(135deg, #f6dc8c, #c9962f) !important;
  color: #2b1d04 !important;
  font-weight: 800 !important;
}
html[data-theme=light] .launch-bar b {
  background: linear-gradient(135deg, #e7c25b, #a87818) !important;
  color: #1f1503 !important;
}

/* Bank transfer box on the order tracking page */
.bank-transfer{margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.bank-transfer h3{margin:0 0 6px}
.bank-transfer .spec-list{margin:12px 0}
.bank-transfer .bank-iban{font-variant-numeric:tabular-nums;letter-spacing:.02em;word-break:break-all}
.bank-transfer .bank-copy{margin-inline-start:8px;min-height:32px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.bank-transfer .primary-action{display:inline-flex;margin-top:4px}
.bank-transfer .bank-note{margin-top:10px;font-size:.9em}

/* Pay-now box (hosted payment link) on the tracking page */
.pay-now{margin:18px 0;padding:18px;border-radius:18px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 12%,var(--surface)),var(--surface))}
.pay-now h3{margin:0 0 6px}
.pay-now .pay-total{margin:4px 0 12px;font-size:1.05em}
.pay-now .pay-total b{font-size:1.25em}
.pay-now .pay-btn{display:flex;justify-content:center;width:100%;min-height:52px;font-size:1.05em}
.ops-paylink{margin:12px 0;padding:12px;border:1px dashed var(--line,#2a3a44);border-radius:12px}

/* Render lower home sections eagerly: lazy painting left blank gaps on fast scroll,
   in-page anchors (#faq, #about) and full-page captures. */
.pay-soon,.pay-soon *{pointer-events:none}
.pcard-shell{display:flex;flex-direction:column;gap:10px;min-width:0;height:100%}
.pcard-shell>.pcard-link,.pcard-shell>.compact-product-card,.pcard-shell>.product-card{flex:1 1 auto;min-width:0}
.pay-soon{display:grid;gap:8px;margin-top:auto}
.pay-soon-btn,.checkout-summary .payment-button.pay-soon-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:48px;padding:10px 14px;border-radius:12px;
  border:1px dashed color-mix(in srgb,var(--accent) 55%,var(--line));
  background:transparent;color:var(--text);font:inherit;font-weight:800;
  cursor:not-allowed;opacity:.78;box-shadow:none
}
.pay-soon-btn em{
  font-style:normal;font-size:.72rem;font-weight:800;line-height:1;
  padding:4px 8px;border-radius:999px;
  background:linear-gradient(135deg,#f6dc8c,#c9962f);color:#2b1d04
}
.pay-soon-caption,.pay-soon-steps{margin:0;color:var(--muted);font-size:.78rem;line-height:1.65}
.pay-soon-steps{display:grid;gap:4px;padding-inline-start:1.15rem}
.pay-soon-kicker{margin:0;font-size:.78rem;font-weight:800;color:var(--accent)}
.pay-soon-full{margin:16px 0;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.pay-soon-full .pay-soon-steps{font-size:.92rem}

.cr-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px 18px;
  align-items:center;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  margin:8px 0 18px;
  padding:18px 20px;
  border-radius:22px;
  border:1px solid color-mix(in srgb,#e7c25b 42%,var(--line));
  background:
    radial-gradient(90% 140% at 0% 0%,color-mix(in srgb,#e7c25b 18%,transparent),transparent 46%),
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),var(--surface));
}
.cr-seal{
  width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;color:#2b1d04;
  background:radial-gradient(circle at 32% 28%,#fff6d2,#e7c25b 46%,#a87818);
  box-shadow:inset 0 0 0 5px color-mix(in srgb,#2b1d04 16%,transparent),0 10px 24px #0000002e;
}
.cr-kicker{margin:0;color:#e7c25b;font-size:.74rem;font-weight:800;letter-spacing:.06em}
.cr-body h2{margin:3px 0 4px;font-size:1.2rem;font-weight:750;line-height:1.35}
.cr-body p{margin:0;max-width:48ch;color:var(--muted);font-size:.92rem;line-height:1.75}
.cr-meta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end;justify-content:space-between;grid-column:1 / -1}
.cr-meta span{color:var(--muted);font-size:.75rem;flex:1 0 100%}
.cr-meta strong{
  min-height:44px;display:flex;align-items:center;justify-content:center;
  padding:8px 16px;border-radius:14px;font-size:1.05rem;font-weight:800;
  letter-spacing:.08em;font-variant-numeric:tabular-nums;
  border:1px dashed color-mix(in srgb,#e7c25b 55%,var(--line));
  background:color-mix(in srgb,var(--bg) 55%,transparent);
}
.cr-meta strong.is-pending{letter-spacing:0;font-size:.92rem;color:#e7c25b}
.cr-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:0 18px;border-radius:999px;white-space:nowrap;
  background:#00f8f8;color:#042026;font-weight:800;text-decoration:none;
}
.cr-link:hover{background:#7ef6ef}
html[data-theme=light] .cr-kicker,html[data-theme=light] .cr-meta strong.is-pending{color:#8a6410}
@media(max-width:800px){
  .cr-card{padding:16px}
  .cr-meta{min-width:0}
  .cr-meta strong,.cr-link{width:100%}
  .cr-seal{width:62px;height:62px}
}

.pay-result{margin:14px 0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);font-weight:600}
.pay-result-ok{border-color:color-mix(in srgb,#2bd576 55%,var(--line));background:color-mix(in srgb,#2bd576 12%,var(--surface))}
.pay-result-bad{border-color:color-mix(in srgb,#ff6b6b 55%,var(--line));background:color-mix(in srgb,#ff6b6b 12%,var(--surface))}
.pay-result-warn{border-color:color-mix(in srgb,#f3d27a 60%,var(--line));background:color-mix(in srgb,#f3d27a 12%,var(--surface))}
.card-pay .pay-error{color:#ff8a8a}
.card-pay .pay-btn[disabled]{opacity:.7;cursor:progress}
.card-pay .card-mobile{display:grid;gap:6px;margin:0 0 12px;font-weight:600}
.card-pay .card-mobile input{min-height:48px;border-radius:12px;padding:0 14px;font-size:1.05em;border:1px solid var(--line);background:var(--surface);color:inherit}

/* ===== Shared fixes (both themes) ===== */
.header-search { position: relative; }
.header-search .search-icon {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: inline-flex;
  color: var(--faint) !important;
}
.header-search input,
.header-search input:focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  min-height: 42px;
  padding: 0 !important;
}
.header-search:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
.lang-switch button {
  width: auto !important;
  min-width: 40px !important;
  padding-inline: 10px !important;
  white-space: nowrap;
}
.price-breakdown { padding: 14px 16px !important; }
.hero-stage .home-offers-dots button {
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
}
.header-search-mobile { padding-inline: 12px !important; box-sizing: border-box; }
.soon-banner h2 { color: #f4fdff !important; }
.soon-banner p { color: #7ee0ea !important; }
footer {
  padding-inline: clamp(16px, 3vw, 32px) !important;
  border: 1px solid var(--line) !important;
  border-bottom: 0 !important;
  border-radius: 24px 24px 0 0 !important;
}
.footer-bottom { border-top: 1px solid var(--line) !important; }
.faq-list { border-top: 0 !important; }
.feedback-details > summary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  list-style: none;
}
.feedback-details > summary::-webkit-details-marker { display: none; }
.feedback-details[open] > summary { margin-bottom: 14px; }

/* ===== Light theme ===== */
html[data-theme="light"] body {
  background:
    radial-gradient(1100px 420px at 50% -160px, rgba(11, 122, 118, 0.09), transparent 70%),
    var(--bg) !important;
}
html[data-theme="light"] ::selection { background: rgba(11, 122, 118, 0.18); }
html[data-theme="light"] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-theme="light"] a:not([class]) { color: inherit; }

/* Header + launch bar */
html[data-theme="light"] body > header.topbar {
  background: rgba(255, 255, 255, 0.94) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 6px 24px rgba(13, 31, 34, 0.05) !important;
}
html[data-theme="light"] .launch-bar {
  background: linear-gradient(90deg, #e3f3f2, #f6fbfb 45%, #e3f3f2) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--line) !important;
}
html[data-theme="light"] .launch-bar b {
  background: linear-gradient(180deg, #d9a93a, #b8861f) !important;
  color: #fff !important;
}
html[data-theme="light"] .desktop-nav {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
}
html[data-theme="light"] .desktop-nav a,
html[data-theme="light"] .mobile-menu a,
html[data-theme="light"] .footer-links a { color: #2c4246 !important; }
html[data-theme="light"] .desktop-nav a:hover,
html[data-theme="light"] .desktop-nav a[aria-current="page"],
html[data-theme="light"] .mobile-menu a:hover,
html[data-theme="light"] .footer-links a:hover {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
html[data-theme="light"] .header-search {
  background: var(--surface) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 999px !important;
}
html[data-theme="light"] .header-search input { color: var(--text) !important; }
html[data-theme="light"] .header-search input::placeholder { color: var(--faint) !important; opacity: 1; }
html[data-theme="light"] .lang-switch,
html[data-theme="light"] .preference-select select,
html[data-theme="light"] .icon-button,
html[data-theme="light"] .menu-toggle {
  background: var(--surface) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .lang-switch button { background: transparent !important; color: var(--muted) !important; box-shadow: none !important; }
html[data-theme="light"] .lang-switch button[aria-pressed="true"],
html[data-theme="light"] .lang-switch button.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
html[data-theme="light"] .header-link,
html[data-theme="light"] .favorite-link,
html[data-theme="light"] .account-link { color: var(--text) !important; }
html[data-theme="light"] .mobile-menu:not([hidden]),
html[data-theme="light"] .mobile-bottom {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .mobile-bottom a { color: var(--muted); }
html[data-theme="light"] .mobile-bottom a[aria-current="page"] { color: var(--accent); }

/* Logo: dark-ink lockup instead of the white one on a black chip */
html[data-theme="light"] .brand-lockup {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  content: url("/assets/brand/logo-wide-light-400.webp");
}
html[data-theme="light"] .page-intro .brand-lockup { content: url("/assets/brand/logo-lockup-light-788.webp"); }
html[data-theme="light"] .pcard:not(.mf) .lg { content: url("/assets/brand/logo-lockup-light-394.webp"); }

/* Buttons */
html[data-theme="light"] .primary-action,
html[data-theme="light"] .add-button,
html[data-theme="light"] .cart-button,
html[data-theme="light"] button[type="submit"]:not(.text-button):not(.secondary-action) {
  background: var(--accent-fill) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(11, 122, 118, 0.22) !important;
  filter: none;
}
html[data-theme="light"] .primary-action:hover,
html[data-theme="light"] .add-button:hover,
html[data-theme="light"] .cart-button:hover,
html[data-theme="light"] button[type="submit"]:not(.text-button):not(.secondary-action):hover {
  background: var(--accent-hover) !important;
  color: #fff !important;
}
html[data-theme="light"] .primary-action.is-disabled,
html[data-theme="light"] .primary-action:disabled,
html[data-theme="light"] .add-button:disabled {
  background: #cfe3e2 !important;
  color: #4a6064 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .secondary-action,
html[data-theme="light"] .detail-button {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--line-strong) !important;
}
html[data-theme="light"] .secondary-action:hover,
html[data-theme="light"] .detail-button:hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
html[data-theme="light"] .text-button,
html[data-theme="light"] .text-link { color: var(--accent) !important; }
html[data-theme="light"] .cart-button span,
html[data-theme="light"] .cart-button svg,
html[data-theme="light"] .primary-action span,
html[data-theme="light"] .primary-action svg { color: #fff !important; }
html[data-theme="light"] .cr-link {
  background: var(--accent-fill) !important;
  color: #fff !important;
  box-shadow: none !important;
}
html[data-theme="light"] .hero-cat svg,
html[data-theme="light"] .trust-lane svg,
html[data-theme="light"] .product-highlights svg { color: var(--accent) !important; }
html[data-theme="light"] .skip-link { background: var(--accent-fill); color: #fff; }

/* Form controls */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: var(--surface) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .header-search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .header-search svg,
html[data-theme="light"] .header-search .search-icon { color: var(--accent) !important; }
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: var(--faint); opacity: 1; }
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none;
}
html[data-theme="light"] input[type="checkbox"],
html[data-theme="light"] input[type="radio"] { accent-color: var(--accent-fill); }
html[data-theme="light"] .password-wrap button,
html[data-theme="light"] .password-wrap .text-button {
  background: var(--surface-2) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--accent) !important;
}
html[data-theme="light"] .auth-tabs { background: var(--surface-2) !important; border-color: var(--line) !important; }
html[data-theme="light"] .auth-tabs button { color: var(--muted) !important; }
html[data-theme="light"] .auth-tabs button[aria-pressed="true"] {
  background: var(--surface) !important;
  color: var(--accent) !important;
  box-shadow: 0 1px 3px rgba(13, 31, 34, 0.1) !important;
}
html[data-theme="light"] .auth-benefits ul { color: var(--text) !important; }
html[data-theme="light"] .subtle-note,
html[data-theme="light"] .auth-benefits .subtle-note {
  background: var(--accent-soft) !important;
  border: 1px solid rgba(11, 122, 118, 0.22) !important;
  color: #1f4a4c !important;
}
html[data-theme="light"] .form-status:not(:empty) { background: #eaf4fb; border-color: #b9d6ea; color: #17405c; }
html[data-theme="light"] .form-status.error { background: #fdeeee !important; border-color: #f0b8b8 !important; color: #8c1d1d !important; }
html[data-theme="light"] .form-status.success { background: #e9f7ef !important; border-color: #a8dcbd !important; color: #17603a !important; }
html[data-theme="light"] .danger-text { color: #b42318; }

/* Cards and surfaces */
html[data-theme="light"] .product-card,
html[data-theme="light"] .compact-product-card:not(.pcard-link),
html[data-theme="light"] .ticket-card,
html[data-theme="light"] .router-offer-card,
html[data-theme="light"] .coupon-card,
html[data-theme="light"] .address-card,
html[data-theme="light"] .dashboard-card,
html[data-theme="light"] .review-card,
html[data-theme="light"] .business-card,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .order-record,
html[data-theme="light"] .operator-tile,
html[data-theme="light"] .hero-cat,
html[data-theme="light"] .trust-lane article,
html[data-theme="light"] .how-modern li,
html[data-theme="light"] .faq-list details,
html[data-theme="light"] .faq-section details,
html[data-theme="light"] .store-info article,
html[data-theme="light"] .detail-section,
html[data-theme="light"] .filter-panel,
html[data-theme="light"] .account-stats article,
html[data-theme="light"] .admin-stats article {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--text);
  box-shadow: var(--shadow) !important;
}
html[data-theme="light"] .operator-tile:hover,
html[data-theme="light"] .hero-cat:hover,
html[data-theme="light"] .trust-lane article:hover,
html[data-theme="light"] .product-card:hover {
  border-color: rgba(11, 122, 118, 0.45) !important;
  box-shadow: 0 10px 30px rgba(11, 122, 118, 0.12) !important;
}
html[data-theme="light"] .business-card p,
html[data-theme="light"] .store-info p,
html[data-theme="light"] .trust-lane small,
html[data-theme="light"] .how-copy small,
html[data-theme="light"] .hero-cat small,
html[data-theme="light"] .page-intro > p,
html[data-theme="light"] .section-heading p { color: var(--muted) !important; }
html[data-theme="light"] .eyebrow { color: var(--accent) !important; }
html[data-theme="light"] .how-modern .how-num {
  background: var(--accent-fill) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(11, 122, 118, 0.25) !important;
}
html[data-theme="light"] .faq-list summary,
html[data-theme="light"] .faq-section summary { color: var(--text); }
html[data-theme="light"] .faq-list details[open],
html[data-theme="light"] .faq-section details[open] { border-color: rgba(11, 122, 118, 0.35) !important; }
html[data-theme="light"] .filter,
html[data-theme="light"] .category-tab,
html[data-theme="light"] .filter-chip {
  background: var(--surface) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .filter.active,
html[data-theme="light"] .category-tab.active,
html[data-theme="light"] .filter-chip.active,
html[data-theme="light"] .operator-tile.selected {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
html[data-theme="light"] .status-pill { background: #e6f4f1 !important; border-color: #b5dbd3 !important; color: #145449 !important; }
html[data-theme="light"] .stock-badge { background: #edf1f2 !important; color: #3f5357 !important; }
html[data-theme="light"] .stock-badge.available,
html[data-theme="light"] .variant-available b,
html[data-theme="light"] .offer-exclusive {
  background: #e3f4ec !important;
  color: #17603a !important;
}
html[data-theme="light"] .product-tags span { border-color: var(--line-strong); color: var(--muted); }
html[data-theme="light"] .operator-badge,
html[data-theme="light"] .favorite-button {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .account-stats .mint-stat { background: #e6f4f1 !important; border-color: #b5dbd3 !important; }
html[data-theme="light"] .account-stats .mint-stat strong { color: #0b5a55 !important; }
html[data-theme="light"] .account-nav { background: var(--surface) !important; border-color: var(--line) !important; }
html[data-theme="light"] .account-nav a:hover,
html[data-theme="light"] .account-nav a:focus { background: var(--accent-soft) !important; color: var(--accent) !important; }
html[data-theme="light"] .dashboard-card .empty-state,
html[data-theme="light"] .empty-state { background: var(--surface-2) !important; border-color: var(--line) !important; }
html[data-theme="light"] .order-timeline { border-color: #b5dbd3; }
html[data-theme="light"] .toast { background: #0d1f22; border-color: #0d1f22; color: #fff; }
html[data-theme="light"] .toast.error { background: #8c1d1d; border-color: #8c1d1d; }
html[data-theme="light"] .cookie-bar {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  box-shadow: 0 16px 40px rgba(13, 31, 34, 0.14) !important;
}
html[data-theme="light"] .cart-dialog { background: var(--surface) !important; color: var(--text); }

/* Product page pricing */
html[data-theme="light"] .offer-pricing span,
html[data-theme="light"] .offer-condition { color: var(--muted) !important; }
html[data-theme="light"] .offer-pricing del { color: #645a7a !important; }
html[data-theme="light"] .offer-pricing strong,
html[data-theme="light"] .offer-current strong,
html[data-theme="light"] .detail-price strong,
html[data-theme="light"] .plan-price strong,
html[data-theme="light"] .price-breakdown .price-total strong { color: var(--accent) !important; }
html[data-theme="light"] .offer-saving {
  background: #e6f4f1 !important;
  color: #145449 !important;
  border: 1px solid #b5dbd3;
}
html[data-theme="light"] .price-breakdown { background: var(--surface) !important; border-color: var(--line) !important; }
html[data-theme="light"] .gold-guarantee {
  background: linear-gradient(135deg, #fff7e3, #fffdf6) !important;
  border-color: #e3c56f !important;
  color: #3a2d10 !important;
}
html[data-theme="light"] .gold-guarantee strong { color: var(--gold) !important; }
html[data-theme="light"] .gold-guarantee p { color: #4a3b16 !important; }
html[data-theme="light"] .company-check {
  background: var(--surface) !important;
  border: 1px solid rgba(11, 122, 118, 0.3) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow);
}
html[data-theme="light"] .company-check a { background: var(--accent-fill) !important; color: #fff !important; }
html[data-theme="light"] .pay-soon b { background: #fbefd4; color: #7a5410; }

/* Plan cards: brand color as ink on white instead of pastel-on-dark */
html[data-theme="light"] .pcard:not(.mf) {
  --brand-hi: color-mix(in srgb, var(--b) 78%, #0d1f22);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--b) 28%, #ffffff);
  box-shadow: var(--shadow);
}
html[data-theme="light"] a.pcard-link:hover .pcard:not(.mf) {
  border-color: color-mix(in srgb, var(--b) 60%, #ffffff);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--b) 16%, transparent);
}
html[data-theme="light"] .pcard:not(.mf) .op {
  background: color-mix(in srgb, var(--b) 9%, #ffffff);
  border-color: color-mix(in srgb, var(--b) 30%, #ffffff);
}
html[data-theme="light"] .pcard:not(.mf) .n { color: var(--b); }
html[data-theme="light"] .pcard:not(.mf) .du {
  background: color-mix(in srgb, var(--b) 9%, #ffffff);
  border-color: color-mix(in srgb, var(--b) 30%, #ffffff);
  color: var(--brand-hi);
}
html[data-theme="light"] .pcard:not(.mf) .nm { color: var(--text); }
html[data-theme="light"] .pcard:not(.mf) .ft li { color: var(--muted); }
html[data-theme="light"] .pcard:not(.mf) .pr {
  background: color-mix(in srgb, var(--b) 6%, #ffffff);
  border-color: color-mix(in srgb, var(--b) 24%, #ffffff);
}
html[data-theme="light"] .pcard:not(.mf) .now { color: var(--text); }
html[data-theme="light"] .pcard:not(.mf) .old { color: var(--faint); }
html[data-theme="light"] .pay-soon {
  background: var(--surface) !important;
  color: var(--muted) !important;
  border-color: var(--line-strong) !important;
}

/* Footer */
html[data-theme="light"] footer,
html[data-theme="light"] .footer-main,
html[data-theme="light"] .footer-support { background: var(--surface) !important; }
html[data-theme="light"] .footer-bottom { color: var(--muted); }

/* ===== Review pass: contrast, minimum text size, tap targets ===== */
.soon-banner a { color: #062027 !important; }
html[data-theme="light"] .pcard:not(.mf) .n { color: var(--brand-hi); }

/* Smallest UI text stays at 12px */
.launch-bar b { font-size: 0.78rem !important; }
.cheap-renew em, .cheap-first em,
.mf-slide-pay em, .mf-slide-renew em,
.q3-was em, .q3-now em,
.q3-was i, .q3-now i { font-size: 0.75rem !important; }

/* The guarantee line wraps instead of being cut with an ellipsis */
.launch-bar { flex-wrap: wrap !important; row-gap: 4px; }
.launch-bar span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }

/* Small links get a finger-sized hit area on touch screens */
@media (max-width: 640px) {
  .breadcrumbs a,
  .footer-bottom a,
  .footer-links a,
  .text-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .breadcrumbs { row-gap: 0; }
}
html[data-theme="light"] .recurring-offer-pricing {
  background: linear-gradient(135deg, #fff6f8, #f3f8fb) !important;
  border-color: #ecc9d3 !important;
}
html[data-theme="light"] .data-variant-options .variant-unavailable {
  background: #f6f1f3 !important;
  border-color: #e6d3da !important;
}
html[data-theme="light"] .data-variant-options .variant-unavailable b {
  background: #f8e3ea !important;
  color: #8a2846 !important;
}

/* Accepted payment marks in the footer */
.pay-methods {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  padding: 18px 0 4px;
}
.pay-methods > span { color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.pay-methods ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pay-methods li {
  display: grid;
  place-items: center;
  width: 76px;
  height: 46px;
  padding: 6px 8px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(13, 31, 34, 0.12);
  color: #111;
  direction: ltr;
}
.pay-methods svg { width: 100%; height: 100%; display: block; }
.pay-methods .pay-visa svg { transform: scale(1.35); }
.pay-methods .pay-applepay svg { transform: scale(1.4); }

/* WhatsApp order button under each product card */
.wa-order-box { display: grid; gap: 8px; margin-top: auto; }
.wa-order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #0f8a48;
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.wa-order-btn:hover { background: #0b7038; }
.wa-order-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wa-order-btn svg { width: 20px; height: 20px; flex: none; }
.wa-order-box .pay-soon-caption { font-size: 0.8rem; }

/* Sign-in with a Saudi mobile (code on WhatsApp) */
.phone-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  min-height: 50px;
  padding: 10px 16px;
  border-radius: 11px;
  border: 1px solid #1f9d55;
  background: #0f8a48;
  color: #fff;
  font: inherit;
  font-weight: 700;
  margin-bottom: 10px;
}
.phone-action:hover { background: #0b7038; }
.phone-action svg { flex: none; }
[data-phone-panel] [data-phone-back] { margin-top: 6px; }
.phone-action svg { background: #fff; border-radius: 50%; }

/* ===== Review pass 2: layout polish ===== */
/* Top bar: one short line on phones */
.launch-short { display: none; }
@media (max-width: 640px) {
  .launch-bar { flex-wrap: nowrap !important; min-height: 34px !important; padding: 6px 12px !important; font-size: 0.82rem !important; }
  .launch-bar span[data-i18n="launch.copy"] { display: none !important; }
  .launch-short { display: inline; white-space: nowrap; }
}

/* Category shortcuts under the slider: icon, title, arrow; compact on phones */
.hero-cats { gap: 12px !important; }
.hero-cat {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 20px;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  min-height: 84px !important;
  padding: 14px 18px !important;
  text-align: start;
}
.hero-cat > span[data-icon] {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
}
.hero-cat > span[data-icon] svg { width: 24px !important; height: 24px !important; color: currentColor !important; }
.hero-cat > span:not([data-icon]) { font-weight: 800; font-size: 1.02rem; color: var(--text); align-self: end; }
.hero-cat > small { grid-column: 2; align-self: start; font-size: 0.82rem !important; color: var(--muted) !important; }
.hero-cat::after {
  content: "";
  grid-column: 3;
  grid-row: 1 / 3;
  width: 9px;
  height: 9px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); /* points left: forward in Arabic */
  justify-self: center;
}
html[dir="ltr"] .hero-cat::after { transform: rotate(-135deg); /* points right */ }
@media (max-width: 640px) {
  .hero-cats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; width: calc(100% - 24px) !important; }
  .hero-cat {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    text-align: center;
    min-height: 0 !important;
    padding: 12px 6px !important;
    row-gap: 6px;
  }
  .hero-cat > span[data-icon] { grid-row: auto; width: 40px; height: 40px; border-radius: 12px; }
  .hero-cat > span:not([data-icon]) { font-size: 0.86rem; align-self: auto; }
  .hero-cat > small, .hero-cat::after { display: none; }
}
.order-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text) !important;
  font-size: 0.86rem;
  font-weight: 600;
}
.order-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #0f8a48; flex: none; }

/* Plan cards on phones: no empty poster gap */
@media (max-width: 640px) {
  .pcard:not(.mf) .in { min-height: 0 !important; }
  .pcard:not(.mf) .pr { margin-top: 14px; }
}

/* Gold guarantee banner */
.soon-banner .soon-kicker {
  display: inline-flex;
  margin: 0 0 10px !important;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e8c25a, #b8861f);
  color: #2b1d04 !important;
  font-weight: 800;
  font-size: 0.85rem;
}
.soon-banner h2 { font-size: clamp(1.6rem, 3vw, 2.4rem) !important; line-height: 1.3; }
.soon-banner p:not(.soon-kicker) { color: #c9e9ec !important; line-height: 1.8; max-width: 36rem; }
.soon-points { display: grid; gap: 8px; margin: 14px 0 4px; padding: 0; list-style: none; }
.soon-points li { display: flex; align-items: center; gap: 10px; color: #f4fdff; font-weight: 600; }
.soon-points li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #7ee0ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23062027' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Product page: the order button leads; the help link is secondary */
.ask-whatsapp {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--line-strong, var(--line)) !important;
  font-weight: 700;
}
.ask-whatsapp:hover { border-color: #0f8a48 !important; color: #0f8a48 !important; }
.offer-consent.needs-attention, .consent-row.needs-attention {
  outline: 2px solid #e8a33a;
  outline-offset: 3px;
  border-radius: 12px;
  animation: alkNudge 0.4s ease 2;
}
@keyframes alkNudge { 50% { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .offer-consent.needs-attention, .consent-row.needs-attention { animation: none; } }

/* Sticky order bar on phones */
.sticky-order {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
}
.sticky-order[hidden] { display: none; }
.sticky-order-price { display: grid; line-height: 1.2; min-width: 0; }
.sticky-order-price small { color: var(--muted); font-size: 0.75rem; }
.sticky-order-price strong { font-size: 1.1rem; color: var(--text); white-space: nowrap; }
.sticky-order-btn {
  flex: none;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: #0f8a48;
  color: #fff;
  font: inherit;
  font-weight: 800;
}
@media (min-width: 801px) { .sticky-order { display: none !important; } }
.hero-cat[hidden] { display: none !important; }

/* Best-seller label sitting on the card's top edge */
.pcard-shell { position: relative; }
.best-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f2cf6b, #c9962f);
  color: #2b1d04;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(201, 150, 47, 0.35);
  pointer-events: none;
}
.best-badge::before { content: "★"; font-size: 0.8rem; }
.product-grid { row-gap: 26px !important; }

/* Sign-in entry: labeled link in the header, prominent block at the top of the phone menu */
.account-link { display: inline-flex !important; align-items: center; gap: 6px; }
.account-link span[data-account-short] { display: none; font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
@media (min-width: 1200px) {
  .account-link span[data-account-short] { display: inline; }
  .account-link:not(.is-signed-in) {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--line-strong, var(--line));
  }
}
.menu-account {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
  padding: 12px;
  border-radius: 16px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
}
.mobile-menu .menu-signin {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  border-radius: 12px;
  background: var(--accent-fill, var(--accent)) !important;
  color: var(--accent-ink, #031012) !important;
  font-weight: 800;
  text-decoration: none;
}
.mobile-menu .menu-signin svg { width: 20px; height: 20px; }
.menu-account small { text-align: center; color: var(--muted); font-size: 0.8rem; }
/* Light menu: solid sheet so the page never shows through */
html[data-theme="light"] .mobile-menu:not([hidden]) { background: #ffffff !important; }
html[data-theme="light"] .mobile-menu .menu-signin,
html[data-theme="light"] .mobile-menu .menu-signin span { color: #ffffff !important; }
/* Desktop: the sign-in link grows to fit its label instead of overflowing the round icon button */
@media (min-width: 1200px) {
  .header-actions .account-link:not(.is-signed-in) { width: auto !important; min-width: 0 !important; }
}
/* Header: the search field gives up width first so nothing overlaps */
.header-search-desktop { flex: 1 1 200px !important; min-width: 0 !important; max-width: 380px !important; }
.header-search-desktop .header-search { min-width: 0 !important; }
.header-actions, .header-preferences { flex: none; }

/* Phone sign-in card */
.phone-card { display: grid; gap: 14px; }
.phone-head { display: flex; align-items: center; gap: 14px; }
.phone-head h2 { margin: 0; }
.phone-head .eyebrow { margin: 0 0 4px; }
.phone-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(37, 211, 102, 0.12);
}
.phone-lead { margin: 0; color: var(--muted); line-height: 1.8; }
.phone-input {
  display: flex !important;
  align-items: stretch;
  direction: ltr;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: var(--radius-control, 12px);
  background: var(--surface);
  overflow: hidden;
}
.phone-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.phone-prefix {
  display: grid;
  place-items: center;
  padding: 0 14px;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 700;
  border-inline-end: 1px solid var(--line);
}
.phone-input input,
html[data-theme="light"] .phone-input input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]) {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}
.phone-send { width: 100%; }
.phone-sent { margin: 0; line-height: 1.9; }
.phone-sent bdi { font-weight: 800; }
.otp-input {
  text-align: center;
  font-size: 1.8rem !important;
  font-weight: 800;
  letter-spacing: 0.5em;
  padding-inline-start: 0.5em !important;
  min-height: 60px;
  font-variant-numeric: tabular-nums;
}
.phone-name input { font-size: 1rem; }
.phone-actions { justify-content: center; }
.phone-alt { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); }
html[lang="en"] .account-nav a[data-inactive]::after { content: " · inactive"; }

/* Slider: keep headings and cards clear of the arrow buttons on wide screens */
@media (min-width: 801px) {
  .hero-stage .cheap,
  .hero-stage .mf-slide,
  .hero-stage .q3 { padding-inline: 76px !important; }
}

/* Account: features that are switched off are not listed */
.account-nav a[data-inactive] { display: none !important; }
/* Header account link fits its label in both signed-in and signed-out states */
@media (min-width: 1200px) {
  .header-actions .account-link { width: auto !important; min-width: 0 !important; padding: 8px 12px; border-radius: 999px; }
}

/* Product page: the WhatsApp order button is the main action and never looks switched off
   while it only waits for the consent box (clicking explains what is missing). */
.detail-actions [data-wa-order],
.detail-actions [data-wa-order].is-disabled:not(:disabled),
html[data-theme="light"] .detail-actions [data-wa-order].is-disabled:not(:disabled) {
  background: #0f8a48 !important;
  color: #fff !important;
  border: 0 !important;
  opacity: 1 !important;
  min-height: 54px;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 138, 72, 0.25) !important;
}
.detail-actions [data-wa-order]:hover { background: #0b7038 !important; }
/* Desktop: the product card stays in view while the details scroll */
@media (min-width: 1001px) {
  .product-detail { align-items: start !important; }
  .product-detail > .detail-media,
  .product-detail > .offer-detail-media,
  .product-detail > .pcard-detail { position: sticky !important; top: 132px; }
}

.wa-order-steps { width: 100%; box-sizing: border-box; }

/* Product image that could not load: branded placeholder, never a blank box */
.img-missing {
  background:
    url("/assets/brand/logo-lockup-light-394.webp") center / 46% auto no-repeat,
    radial-gradient(circle at 30% 20%, var(--accent-soft), transparent 60%),
    var(--surface-2) !important;
}
html[data-theme="dark"] .img-missing {
  background:
    url("/assets/brand/logo-lockup-394.webp?v=logo11") center / 46% auto no-repeat,
    radial-gradient(circle at 30% 20%, rgba(0, 248, 248, 0.12), transparent 60%),
    #0a1315 !important;
}
.img-missing > img[hidden] { display: none !important; }

/* Operator logos stay inside their cheap-plan card on phones (Salam and Red Bull were clipped). */
.cheap-top{min-width:0}
.cheap-logo{width:auto!important;min-width:0;max-width:78px;flex:0 1 auto;overflow:hidden}
.hero-slide--cheap .cheap-logo img{max-width:100%!important;width:auto!important;height:24px!important}
@media (max-width: 720px) { .hero-slide--cheap .cheap-logo img { height: 22px !important; } }

/* Phones: two compact cards per row so the catalog reads like a shelf, not a long scroll. */
@media (max-width: 640px) {
  .product-grid,
  .product-grid[data-view="compact"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 10px !important; row-gap: 20px !important; }
  .product-grid .pcard-shell { gap: 8px; }
  .product-grid .pcard { border-radius: 14px; }
  .product-grid .pcard .in { margin: 7cqw 6cqw 6cqw; min-height: 0; }
  .product-grid .pcard .tp { min-height: 26px; }
  .product-grid .pcard .lg { display: none; }
  .product-grid .pcard .op { max-width: 100%; min-height: 26px; padding: 2px 8px; font-size: 12px; }
  .product-grid .pcard .op-logo { height: 18px; max-width: 64px; }
  .product-grid .pcard .hr { margin-top: 8px; gap: 4px; }
  .product-grid .pcard .du { margin-top: 6px; padding: 2px 8px; font-size: 11px; }
  .product-grid .pcard .nm { margin-top: 6px; font-size: 13px; line-height: 1.4; }
  .product-grid .pcard .ft { display: none; }
  .product-grid .pcard .rn { font-size: 11px; }
  .product-grid .pcard .pr { margin-top: 10px; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; border-radius: 10px; }
  .product-grid .pcard .now { font-size: 20px; }
  .product-grid .pcard .now small { font-size: 11px; }
  .product-grid .pcard .pr > div:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
  .product-grid .pcard .old { font-size: 11px; }
  .product-grid .pcard .sv { font-size: 10.5px; padding: 2px 6px; }
  .product-grid .wa-order-btn { min-height: 40px; padding: 8px; gap: 6px; font-size: 13px; border-radius: 10px; }
  .product-grid .wa-order-btn svg { width: 17px; height: 17px; }
  .product-grid .best-badge { top: -10px; padding: 2px 9px; font-size: 0.7rem; }
}
@media (max-width: 640px) {
  .product-grid .pcard .n[style*="15cqw"] { font-size: 21cqw !important; }
}
@media (max-width: 640px) {
  .product-grid > .pcard-shell:only-child { grid-column: 1 / -1; }
}

/* Carrier logos keep their real colours with no plate behind them; dark marks are lifted on the dark theme below. */
.pcard:not(.mf) .op:has(img) .op-logo { filter: none !important; }
.pcard:not(.mf) .op:has(img) { background: transparent !important; border-color: color-mix(in srgb, var(--b) 45%, transparent) !important; padding: 3px 10px; }
@media (max-width: 640px) {
  .product-grid .pcard.mf .in { min-height: 0; }
  .product-grid .pcard.mf .tp { gap: 6px; }
  .product-grid .pcard.mf .op { background: transparent !important; padding: 2px 8px; }
  .product-grid .pcard.mf .op-logo { height: 18px; filter: none; }
  .product-grid .pcard.mf .mf-kind { font-size: 10px; letter-spacing: 0; }
  .product-grid .pcard.mf .mf-ring { border-width: 8px; width: 66%; left: 17%; top: 14%; }
  .product-grid .pcard.mf .mf-code { margin-top: 10px; }
  .product-grid .pcard.mf .mf-code small { font-size: 11px; letter-spacing: .12em; }
  .product-grid .pcard.mf .mf-code strong { font-size: 31cqw; }
  .product-grid .pcard.mf .mf-off { margin-top: 6px; padding: 3px 9px; font-size: 11px; }
  .product-grid .pcard.mf .mf-stats { gap: 4px; margin-top: 10px; }
  .product-grid .pcard.mf .mf-stats li { padding: 6px 2px; border-radius: 9px; }
  .product-grid .pcard.mf .mf-stats b { font-size: 13px; }
  .product-grid .pcard.mf .mf-stats span { font-size: 10px; }
  .product-grid .pcard.mf .mf-pay { margin-top: 10px; gap: 6px; grid-template-columns: 1fr 1fr; }
  .product-grid .pcard.mf .mf-pay > div { padding: 7px 6px 6px; border-radius: 10px; }
  .product-grid .pcard.mf .mf-pay small, .product-grid .pcard.mf .mf-pay em { font-size: 10px; }
  .product-grid .pcard.mf .mf-pay strong { font-size: 19px; }
}
@media (max-width: 640px) {
  .product-grid .pcard.mf .mf-code { line-height: 1; }
  .product-grid .pcard.mf .mf-code small { margin-bottom: 2px; }
  .product-grid .pcard.mf .mf-code strong { line-height: .9; }
}
/* Guarantee banner: the artwork shrinks to a short band on phones so the promise is read first. */
@media (max-width: 720px) {
  .soon-banner { gap: 14px; }
  .soon-banner img { aspect-ratio: 16 / 9; max-height: none; object-fit: cover; object-position: center 45%; order: 2; }
}

/* Phones: trust points as a tight 2×2 grid and the three steps as compact rows. */
@media (max-width: 640px) {
  .trust-lane { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .trust-lane article { min-height: 0 !important; padding: 14px 12px !important; gap: 6px !important; border-radius: 16px !important; }
  .trust-lane article strong { font-size: 0.95rem !important; margin: 0 !important; }
  .trust-lane article small { font-size: 0.78rem !important; line-height: 1.55 !important; }
  .how-it-works ol { gap: 10px !important; }
  .how-it-works ol li { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; justify-items: start !important; text-align: start !important; gap: 12px !important; min-height: 0 !important; padding: 14px !important; }
  .how-it-works .how-num { margin: 0 !important; }
  .how-it-works .how-copy strong { font-size: 1rem !important; }
}
/* Operator logos keep their real colours in both themes, on a transparent tile. */
.operator-tile .operator-logo, .operator-tile.salam .operator-logo { background: transparent !important; border-radius: 12px !important; padding: 6px 10px !important; }
.operator-tile .operator-logo img { filter: none !important; }
/* Phones: all eight carriers visible at once (4 × 2) instead of a hidden side-scroll. */
@media (max-width: 640px) {
  .operator-grid.operator-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; overflow: visible !important; padding-bottom: 0 !important; }
  .operator-row .operator-tile { min-width: 0 !important; min-height: 0 !important; padding: 8px 6px 6px !important; gap: 6px !important; border-radius: 14px !important; }
  .operator-row .operator-logo { height: 34px !important; width: 100% !important; padding: 4px 6px !important; border-radius: 9px !important; box-sizing: border-box; }
  .operator-row .operator-logo img { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain; }
  .operator-row .operator-name { font-size: 0.72rem !important; white-space: nowrap; }
}
.track-total dd b { font-size: 1.15rem; color: var(--accent); }
/* The official Red Bull MOBILE mark is wide and short: give it width instead of height. */
.pcard .op-logo[src*="redbull-official"] { max-width: 120px; height: 30px; }
.operator-tile .operator-logo img[src*="redbull-official"] { transform: scale(1.35); }
@media (max-width: 640px) {
  .product-grid .pcard .op-logo[src*="redbull-official"] { max-width: 100px; height: 22px; }
  .operator-row .operator-logo img[src*="redbull-official"] { transform: scale(1.5); }
}

/* Guest or email choice before a WhatsApp order */
@media (max-width:420px){}

/* Phones: while signing in, the form comes first; the page intro only repeats the card heading. */
@media (max-width: 720px) {
  main:has([data-auth-panel]:not([hidden])) [data-account-intro] { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important; }
}
/* Signed in: the dashboard's personal welcome is the page heading; drop the generic intro. */
main:has([data-account-dashboard]:not([hidden])) [data-account-intro] { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important; }

/* ===== Discount, front and centre ===== */
.pcard .pct{display:inline-block;padding:3px 10px;border-radius:999px;background:linear-gradient(90deg,#ff3b30,#ff7a1a);color:#fff;font-weight:800;font-size:max(12px,3.6cqw);line-height:1.5;box-shadow:0 6px 16px rgba(255,80,30,.28)}
.pcard .save-strip{margin:8px 0 0;padding:7px 10px;border-radius:12px;background:linear-gradient(90deg,rgba(255,80,40,.16),rgba(255,170,40,.14));border:1px solid rgba(255,120,40,.45);color:#ffb37a;font-weight:800;font-size:max(12px,3.5cqw);text-align:center;line-height:1.5}
html[data-theme="light"] .pcard .save-strip{background:linear-gradient(90deg,#fff1e8,#fff7e6);border-color:#ffc49a;color:#b3410c}

.save-hero{display:flex;align-items:center;gap:14px;margin:4px 0 12px;padding:14px 16px;border-radius:18px;background:linear-gradient(120deg,rgba(255,80,40,.14),rgba(255,180,40,.10));border:1px solid rgba(255,120,40,.45)}
.save-hero-pct{display:grid;place-items:center;flex:0 0 auto;width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#ff3b30,#ff8a1a);color:#fff;box-shadow:0 10px 24px rgba(255,80,30,.3);line-height:1}
.save-hero-pct b{font-size:1.45rem;font-weight:900}
.save-hero-pct small{font-size:.75rem;font-weight:800;margin-top:-10px}
.save-hero strong{display:block;font-size:1.2rem;font-weight:900;color:#ffb37a}
.save-hero p{margin:4px 0 0;color:var(--muted);font-size:.9rem;line-height:1.6}
html[data-theme="light"] .save-hero{background:linear-gradient(120deg,#fff1e8,#fff8ec);border-color:#ffc49a}
html[data-theme="light"] .save-hero strong{color:#b3410c}

/* Home trust lane: the discount card leads, in the same hot accent as the card badges. */
.trust-lane article.is-hot{border-color:rgba(255,120,40,.55)!important;background:linear-gradient(160deg,rgba(255,80,40,.16),rgba(255,170,40,.06))!important}
.trust-lane article.is-hot strong{color:#ffb37a}
.trust-lane article.is-hot strong bdi{font-size:1.35em;font-weight:900}
.trust-lane article.is-hot svg{color:#ff7a1a}
html[data-theme="light"] .trust-lane article.is-hot{background:linear-gradient(160deg,#fff1e8,#fffaf3)!important;border-color:#ffc49a!important}
html[data-theme="light"] .trust-lane article.is-hot strong{color:#b3410c}
@media (max-width: 720px) {
  .trust-lane{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .trust-lane article{min-height:0!important;padding:14px 12px!important;gap:4px!important}
  .trust-lane strong{font-size:.95rem}
  .trust-lane small{font-size:.8rem;line-height:1.55}
}
html[data-theme="dark"] .trust-lane article.is-hot{border-color:rgba(255,120,40,.55)!important;background:linear-gradient(160deg,rgba(255,80,40,.18),rgba(255,170,40,.05)),#0b1416!important}

/* =====================================================================
   Unified look v2: operator plates, product cards, discount colours
   ===================================================================== */
:root {
  --sale: #e11d48;          /* discount badge */
  --save: #047857;          /* "you save" text */
  --save-bg: #ecfdf5;
  --save-line: #a7f3d0;
}
html[data-theme="dark"] {
  --sale: #e11d48;
  --save: #34d399;
  --save-bg: rgba(16, 185, 129, 0.12);
  --save-line: rgba(52, 211, 153, 0.35);
}

/* Operator brand colour, one source for tiles and card badges */
.operator-tile.stc, .pcard.op-stc { --opc: #4b286d; }
.operator-tile.mobily, .pcard.op-mobily { --opc: #00a3e0; }
.operator-tile.zain, .pcard.op-zain { --opc: #7ab929; }
.operator-tile.virgin, .pcard.op-virgin { --opc: #e10a0a; }
.operator-tile.salam, .pcard.op-salam { --opc: #019c20; }
.operator-tile.yaqoot, .pcard.op-yaqoot { --opc: #d6006e; }
.operator-tile.redbull, .pcard.op-redbull { --opc: #db0a40; }
.operator-tile.friendi, .pcard.op-friendi { --opc: #00b5c9; }

/* Operator tiles: original logo colours, no white box behind them */
html[data-theme="light"] .operator-tile,
html[data-theme="light"] a.operator-tile,
html[data-theme="light"] a.operator-tile:hover,
html[data-theme="dark"] .operator-tile,
html[data-theme="dark"] a.operator-tile,
html[data-theme="dark"] a.operator-tile:hover {
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme="light"] a.operator-tile { border: 1px solid #d6e3df !important; }
html[data-theme="dark"] a.operator-tile { border: 1px solid rgba(255, 255, 255, 0.10) !important; }
.operator-tile { transition: transform .18s ease, border-color .18s ease !important; }
a.operator-tile:hover { transform: translateY(-2px) !important; border-color: var(--accent, #0e7490) !important; }
.operator-tile .operator-logo { height: 56px !important; padding: 6px 10px !important; display: grid !important; place-items: center !important; }
.operator-tile .operator-logo img { height: 32px !important; max-height: 32px !important; max-width: 112px !important; width: auto !important; }

/* Product cards: one rhythm for every card */
.pcard-shell { display: flex !important; flex-direction: column !important; }
.pcard-shell > .pcard-link { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; }
.pcard-shell > .pcard-link > .pcard { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; }
.pcard-shell .pcard > .in { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; }
.pcard .pr { margin-top: auto !important; }
.pcard .tp { gap: 8px; min-height: 38px; }
.pcard .op { height: 38px !important; min-height: 38px !important; min-width: 86px; justify-content: center; padding: 0 14px !important; }
.pcard .op-logo { height: 24px !important; max-width: 88px !important; width: auto !important; }
.pcard .tp .du {
  margin: 0 !important; height: 30px; display: inline-flex; align-items: center; padding: 0 12px;
  border-radius: 999px; font-size: 13px !important; font-weight: 700; white-space: nowrap;
}
.pcard .hr { align-items: flex-end; margin-top: 6px; }
@media (min-width: 721px) { .pcard .hr { min-height: clamp(70px, 24cqw, 104px); } }
.pcard .nm { font-size: clamp(15px, 4.4cqw, 18px) !important; font-weight: 800 !important; line-height: 1.45 !important; margin-top: 6px; }
.pcard .note { font-size: 12.5px !important; line-height: 1.6 !important; }
.pcard .ft li { font-size: 13px !important; line-height: 1.6 !important; }
.pcard .now { font-size: clamp(22px, 7cqw, 28px) !important; }
.pcard .old { font-size: 12.5px !important; }

/* Discount: solid crimson badge + green "you save" line */
.pcard .pct {
  background: var(--sale) !important; color: #fff !important; box-shadow: none !important;
  font-size: 12.5px !important; padding: 3px 10px !important; letter-spacing: .01em;
}
.pcard .save-strip,
html[data-theme="light"] .pcard .save-strip {
  background: var(--save-bg) !important; border: 1px solid var(--save-line) !important;
  color: var(--save) !important; font-size: 13px !important; font-weight: 800;
}
.save-hero,
html[data-theme="light"] .save-hero { background: var(--save-bg) !important; border-color: var(--save-line) !important; }
.save-hero-pct { background: var(--sale) !important; box-shadow: none !important; }
.save-hero strong,
html[data-theme="light"] .save-hero strong { color: var(--save) !important; }
.cheap-top b { background: var(--sale) !important; }

/* Home trust lane: discount card speaks the same green as the savings line */
.trust-lane article.is-hot,
html[data-theme="light"] .trust-lane article.is-hot,
html[data-theme="dark"] .trust-lane article.is-hot {
  background: var(--save-bg) !important; border-color: var(--save-line) !important;
}
.trust-lane article.is-hot strong,
html[data-theme="light"] .trust-lane article.is-hot strong { color: var(--save) !important; }
.trust-lane article.is-hot svg { color: var(--save) !important; }

/* Catalog toolbar sits on the page, not on a white strip */
html[data-theme="light"] .catalog-tools { background: transparent !important; }
.save-hero-pct b, .save-hero-pct small { color: #fff !important; }

/* =====================================================================
   Calm palette: one accent (teal), brand colour only on the operator
   badge and the big number, neutral boxes, muted crimson for discounts.
   ===================================================================== */
:root, html[data-theme="dark"] { --sale: #c8264a; }
html[data-theme="light"] .pcard {
  background: #ffffff;
  border: 1px solid #dfe8e5 !important;
  box-shadow: 0 6px 18px rgba(16, 42, 38, 0.05);
}
html[data-theme="dark"] .pcard {
  background: #0c1517;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
}
.pcard:hover { border-color: color-mix(in srgb, var(--b) 45%, transparent) !important; }
.pcard .hr .n, .pcard .hr .u { color: color-mix(in srgb, var(--b) 78%, var(--text)) !important; }
html[data-theme="dark"] .pcard .hr .n, html[data-theme="dark"] .pcard .hr .u { color: color-mix(in srgb, var(--b) 55%, #ffffff) !important; }
html[data-theme="light"] .pcard .pr { background: #f5f8f7 !important; border: 1px solid #e3ebe8 !important; }
html[data-theme="dark"] .pcard .pr { background: rgba(255, 255, 255, 0.035) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; }
.pcard .tp .du {
  color: var(--muted) !important; background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent) !important;
}
.pcard .op { border-color: color-mix(in srgb, var(--b) 35%, transparent) !important; }

/* Renewal savings line: same green as every saving, a touch stronger */
.pcard .renew-strip { font-size: 13px !important; line-height: 1.55; padding: 8px 10px !important; }
.cheap-save {
  display: block; margin-top: 6px; padding: 4px 8px; border-radius: 8px;
  font-size: .72rem; font-weight: 800; line-height: 1.4;
  color: #6ee7b7; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(52, 211, 153, 0.3);
}
@media (max-width: 720px) { .cheap-save { font-size: .66rem; padding: 3px 6px; margin-top: 4px; } }
.cheap-card.op-mobily { box-shadow: inset 0 3px 0 #1e7bff, 0 14px 30px rgba(0, 0, 0, .28); }
/* Dark theme: lift the two darkest logos so they stay readable, colours unchanged */
html[data-theme="dark"] .operator-tile.stc img,
html[data-theme="dark"] .operator-tile.salam img,
html[data-theme="dark"] .pcard.op-stc .op-logo,
html[data-theme="dark"] .pcard.op-salam .op-logo { filter: brightness(1.9) saturate(1.1) !important; }
.pcard .rn { color: var(--muted) !important; font-weight: 700; }
html[data-theme="light"] .pcard .old { color: #55635e !important; }

/* 3-month slide: operator logos without a white plate */
.q3-logo { background: transparent !important; padding: 0 !important; min-width: 0 !important; height: 30px !important; }
.hero-slide--quarter .q3-logo img,
.hero-slide--quarter.is-active .q3-logo img { height: 22px !important; max-width: 84px !important; }
.hero-slide--quarter .q3-logo img[src*="stc"] { filter: brightness(2.2) saturate(1.1) !important; }
@media (max-width: 720px) {
  .hero-slide--quarter .q3-logo img,
  .hero-slide--quarter.is-active .q3-logo img { height: 18px !important; max-width: 70px !important; }
}
/* Outside-Riyadh note on product pages */
.detail-delivery .outside-riyadh { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent, #0e7490) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent, #0e7490) 28%, transparent); font-weight: 700; }

/* Dark theme: logos drawn in dark colours stay readable without a white plate */
html[data-theme="dark"] .operator-tile .operator-logo img[src*="redbull"],
html[data-theme="dark"] .operator-tile .operator-logo img[src*="yaqoot"],
html[data-theme="dark"] .pcard .op-logo[src*="redbull"],
html[data-theme="dark"] .pcard .op-logo[src*="yaqoot"] { filter: brightness(1.6) saturate(1.1) !important; }
html[data-theme="dark"] .operator-tile.stc .operator-logo img,
html[data-theme="dark"] .operator-tile.salam .operator-logo img,
html[data-theme="dark"] .pcard.op-stc .op-logo,
html[data-theme="dark"] .pcard.op-salam .op-logo { filter: brightness(1.9) saturate(1.1) !important; }
@media (max-width: 640px) {
  .operator-row .operator-logo { overflow: hidden; }
  .operator-row .operator-logo img { height: 24px !important; max-height: 24px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; }
}
.wa-order-btn { background: #0d7a40 !important; } .wa-order-btn:hover { background: #0b6a37 !important; }

/* =====================================================================
   r31: bigger AlkStore logo (trimmed artwork), bigger operator logos on
   cards, calmer accents
   ===================================================================== */
body > header.topbar .brand { padding: 4px 0; transition: opacity .2s ease; }
body > header.topbar .brand:hover { opacity: .88; }
.brand-lockup { height: 48px !important; max-width: min(190px, 40vw) !important; }
footer .brand-lockup { height: 60px !important; max-width: 220px !important; }
@media (max-width: 800px) {
  .brand-lockup { height: 40px !important; max-width: min(150px, 40vw) !important; }
  footer .brand-lockup { height: 52px !important; }
}

/* Operator logo on product cards: larger and clear, still no plate */
.pcard .op { height: 46px !important; min-height: 46px !important; min-width: 96px; padding: 0 12px !important; border-radius: 14px !important; }
.pcard .op-logo { height: 32px !important; max-width: 112px !important; }
.pcard .op-logo[src*="redbull-official"] { height: 36px !important; max-width: 124px !important; }
@media (max-width: 640px) {
  .product-grid .pcard .op { height: 40px !important; min-height: 40px !important; min-width: 0; padding: 0 8px !important; }
  .product-grid .pcard .op-logo { height: 28px !important; max-width: 92px !important; }
  .product-grid .pcard .op-logo[src*="redbull-official"] { height: 30px !important; max-width: 100px !important; }
}

/* Calmer accents: softer savings line, gentle card lift, rounder buttons */
.pcard .save-strip,
html[data-theme="light"] .pcard .save-strip { border-color: transparent !important; font-weight: 700 !important; }
.wa-order-btn { border-radius: 14px !important; box-shadow: 0 6px 16px rgba(13, 122, 64, .18); }
@media (hover: hover) {
  .pcard { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .pcard:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, .14); }
}
.cheap-logo { max-width: 100px !important; height: auto !important; }
.hero-slide--cheap .cheap-logo img { height: 30px !important; }
@media (max-width: 720px) { .cheap-logo { max-width: 84px !important; } .hero-slide--cheap .cheap-logo img { height: 26px !important; } }

/* Product page: folded reference sections */
.detail-fold { padding: 0 !important; overflow: hidden; }
.detail-fold > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 16px 18px; min-height: 56px; }
.detail-fold > summary::-webkit-details-marker { display: none; }
.detail-fold > summary h2 { margin: 0 !important; font-size: 1.05rem !important; flex: 1; }
.detail-fold > summary::after { content: ""; width: 10px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: .6; transition: transform .2s ease; margin-inline-start: 4px; flex: none; }
.detail-fold[open] > summary::after { transform: rotate(-135deg); }
.detail-fold > summary:focus-visible { outline: 2px solid var(--accent, #0e7490); outline-offset: -2px; border-radius: inherit; }
.detail-fold .fold-count { font-size: .75rem; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); border-radius: 999px; padding: 1px 9px; }
.detail-fold > :not(summary) { margin: 0 18px 18px !important; }
.detail-grid:has(> .detail-fold) { align-items: start; }

/* =====================================================================
   r33: header that never squeezes. Nav links keep their width, the nav
   moves to the menu under 1100px, language + theme share one small menu,
   and search gets room for its full placeholder.
   ===================================================================== */
.desktop-nav { flex: none !important; }
.desktop-nav a { white-space: nowrap !important; flex-shrink: 0 !important; }
.header-search-desktop { flex: 1 1 260px !important; min-width: 240px !important; max-width: 440px !important; }
.header-search-desktop input { text-overflow: ellipsis; }

.header-preferences { position: relative; }
.pref-menu { position: relative; }
.pref-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 0 10px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: .85rem;
}
.pref-menu > summary::-webkit-details-marker { display: none; }
.pref-menu > summary:focus-visible { outline: 2px solid var(--accent, #22d3ee); outline-offset: 2px; }
.pref-menu[open] > summary { border-color: color-mix(in srgb, var(--accent, #22d3ee) 60%, transparent); }
.pref-pop {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
  display: grid; gap: 10px; min-width: 200px; padding: 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
}
.pref-pop .lang-switch { display: flex; gap: 6px; }
.pref-pop .lang-switch button { flex: 1; }
.pref-pop .preference-select, .pref-pop select { width: 100%; }
html[data-theme="light"] .pref-pop { background: #fff; }

@media (max-width: 1100px) {
  .desktop-nav { display: none !important; }
  .menu-toggle { display: inline-flex !important; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  body > header.topbar { position: sticky; }
  .mobile-menu:not([hidden]) {
    display: grid !important; position: absolute; top: 100%; inset-inline: 16px; z-index: 50;
    max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain;
    padding: 12px; border-radius: 0 0 18px 18px; background: var(--surface); border: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
  }
  .mobile-menu a { padding: 12px 15px; border-radius: 10px; min-height: 48px; display: flex; align-items: center; }
  .mobile-menu .mobile-preferences { display: none; }
}
/* Between the hamburger breakpoint and wide screens, the account link shows its icon only
   so search keeps its full width. */
@media (min-width: 1101px) and (max-width: 1320px) {
  .account-link [data-account-short] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Product card: the data amount (600, لامحدود) at about half its old size so the price,
   discount and the order button sit inside the first view of the card. */
.pcard .hr { min-height: 0 !important; margin-top: 4px !important; }
.pcard .hr .n, .product-grid .pcard .hr .n { line-height: 1 !important; }
.pcard .hr .n[style*="27cqw"], .product-grid .pcard .hr .n[style*="27cqw"] { font-size: clamp(28px, 14cqw, 44px) !important; }
.pcard .hr .n[style*="15cqw"], .product-grid .pcard .hr .n[style*="15cqw"] { font-size: clamp(22px, 9cqw, 30px) !important; }
.pcard .hr .u { font-size: 13px !important; }
/* No poster-style minimum height: a wide card (two columns at ~920px) was 547px tall with the
   price 370px down. Cards in a row still line up because the price block keeps margin-top:auto. */
.pcard .in, .product-grid .pcard .in { min-height: 0 !important; }
/* The reviews section shows only when there is at least one review to show. */
.home-reviews[hidden] { display: none !important; }
.home-reviews:has(.home-review-grid:empty) { display: none !important; }

/* Saudi Business Center seal: never floats over products. app.js moves it into the footer's
   commercial registration card; until then (or if that fails) it stays small. */
footer .sbc-verify-seal { max-width: 88px; }
footer .sbc-verify-seal > img, footer .sbc-verify-seal > a > img { max-width: 88px !important; max-height: 88px !important; height: auto !important; }
.sbc-seal-slot { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 10px; }
/* Only the badge sits still in the footer; the details window the seal opens on a tap keeps its own position and size. */
.sbc-seal-slot, .sbc-seal-slot > *, .sbc-seal-slot > * > a { position: static !important; inset: auto !important; transform: none !important; z-index: auto !important; box-shadow: none !important; }
.sbc-seal-slot > .sbc-verify-seal > img, .sbc-seal-slot > .sbc-verify-seal > a > img { max-width: 96px !important; max-height: 96px !important; height: auto !important; }
/* Phones: language and theme stay in the slide-out menu, not in the header row. */
@media (max-width: 800px) { .header-preferences { display: none !important; } }

/* =====================================================================
   r38: one product card layout for every plan (.pcard.v2).
   Order: ribbon, logo + duration, name (2 lines), amount, up to three
   features, then a footer pinned to the bottom: price, one detail line,
   one savings line. Fixed spacing in px so every card in a row lines up.
   ===================================================================== */
.pcard.v2 { display: flex !important; flex-direction: column; height: 100% !important; }
.pcard.v2 .limited-ribbon { flex: none; }
.pcard.v2 .in {
  flex: 1 1 auto; display: flex !important; flex-direction: column; gap: 10px;
  margin: 0 !important; padding: 16px !important; min-height: 0 !important;
}
.pcard.v2 .tp { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.pcard.v2 .op { height: 44px !important; min-height: 44px !important; flex: 0 1 auto; max-width: 62%; padding: 0 12px !important; }
.pcard.v2 .op-logo { height: 30px !important; max-width: 104px !important; }
.pcard.v2 .du {
  margin: 0 !important; align-self: center; flex: 0 1 auto; max-width: 42%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 12px !important; font-weight: 700; padding: 4px 10px !important;
}
.pcard.v2 .nm {
  margin: 0 !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.4 !important;
  min-height: calc(2 * 1.4em); -webkit-line-clamp: 2;
}
.pcard.v2 .hr { display: flex; align-items: baseline; gap: 6px; margin: 0 !important; min-height: 0 !important; }
.pcard.v2 .hr .n { font-size: 38px !important; font-weight: 800; line-height: 1 !important; letter-spacing: -0.02em; }
.pcard.v2 .hr .n.long { font-size: 28px !important; }
.pcard.v2 .hr .u { font-size: 13px !important; font-weight: 700; }
.pcard.v2 .ft { margin: 0 !important; gap: 4px; }
.pcard.v2 .ft li { font-size: 13px !important; line-height: 1.5 !important; color: var(--muted); }
.pcard.v2 .ft li:before { width: 6px; height: 6px; margin-inline-end: 8px; box-shadow: none; vertical-align: middle; }

.pcard.v2 .foot { margin-top: auto; display: grid; gap: 8px; padding-top: 4px; }
.pcard.v2 .pr { margin: 0 !important; display: grid !important; gap: 6px; padding: 12px 14px !important; }
.pcard.v2 .now { font-size: 26px !important; line-height: 1 !important; }
.pcard.v2 .now small { font-size: 13px !important; }
.pcard.v2 .sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.pcard.v2 .sub .pct { font-size: 12px !important; padding: 3px 10px !important; border-radius: 99px; white-space: nowrap; }
.pcard.v2 .sub .old { font-size: 12.5px !important; white-space: nowrap; }
.pcard.v2 .sub .sub-note { font-size: 12px; font-weight: 700; color: var(--muted); }
.pcard.v2 .save-strip {
  margin: 0 !important; padding: 8px 10px !important; border-radius: 12px;
  font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.5 !important; text-align: center;
  min-height: calc(2 * 1.5em + 16px); display: flex; align-items: center; justify-content: center;
}
.pcard.v2 .save-strip.is-empty { visibility: hidden; }
.pcard.v2 .rn, .pcard.v2 .note, .pcard.v2 .was { display: none !important; }

/* The card link fills its grid cell so all cards in a row share one height. */
.pcard-shell { display: flex; flex-direction: column; }
.pcard-shell > .pcard-link { flex: 1 1 auto; display: flex; }
.pcard-shell > .pcard-link > .pcard.v2 { flex: 1 1 auto; }

@media (max-width: 640px) {
  .pcard.v2 .in { padding: 12px !important; gap: 8px; }
  .pcard.v2 .tp { min-height: 36px; }
  .pcard.v2 .op { height: 36px !important; min-height: 36px !important; padding: 0 8px !important; }
  .pcard.v2 .op-logo { height: 24px !important; max-width: 80px !important; }
  .pcard.v2 .du { font-size: 12px !important; padding: 3px 8px !important; }
  .pcard.v2 .nm { font-size: 13px !important; }
  .pcard.v2 .hr .n { font-size: 30px !important; }
  .pcard.v2 .hr .n.long { font-size: 22px !important; }
  .pcard.v2 .ft { display: none !important; }
  .pcard.v2 .pr { padding: 10px !important; }
  .pcard.v2 .now { font-size: 21px !important; }
  .pcard.v2 .sub { flex-wrap: wrap; row-gap: 4px; }
  .pcard.v2 .sub .pct { font-size: 12px !important; padding: 2px 8px !important; }
  .pcard.v2 .sub .old { font-size: 12px !important; }
  .pcard.v2 .save-strip { font-size: 12px !important; padding: 6px 8px !important; }
}
/* "لفترة محدودة" as a small pill on the card's top edge, so the card's content stays level
   with its neighbours. */
.pcard.v2 .limited-ribbon {
  position: absolute !important; top: 0 !important; left: 50% !important; right: auto !important;
  transform: translateX(-50%); z-index: 3; width: auto !important; max-width: 60%;
  margin: 0 !important; padding: 3px 12px !important; border-radius: 0 0 10px 10px !important;
  font-size: 11.5px !important; line-height: 1.6 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard.v2 .limited-ribbon::before { width: 7px !important; height: 7px !important; }
@media (max-width: 640px) { .pcard.v2 .limited-ribbon { font-size: 10.5px !important; padding: 2px 8px !important; max-width: 48%; } }
@media (max-width: 640px) {
  /* Narrow cards: the pill sits above the logo row instead of on top of the logo. */
  .pcard.v2:has(> .limited-ribbon) .in { padding-top: 30px !important; }
  .pcard.v2 .limited-ribbon { max-width: 80%; }
  /* Discount on two fixed rows (pill, then the crossed-out price) in every card. */
  .pcard.v2 .sub { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 44px; }
}

/* Save + share sit together under the order button. */
.detail-actions>.detail-minor{grid-column:1/-1;display:flex;gap:8px;flex-wrap:nowrap}
.detail-actions>.detail-minor>.secondary-action{flex:1 1 0;min-width:0;margin:0;justify-content:center;white-space:nowrap;padding-inline:12px}
/* Identity verification, explained quietly in a fold. */
.nafath-card{margin:12px 0;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.nafath-card summary{cursor:pointer;color:var(--text);font-size:.93rem;font-weight:600}
.nafath-card ul{margin:10px 0 2px;padding-inline-start:18px;display:grid;gap:6px}
.nafath-card li{color:var(--text);font-size:.9rem;line-height:1.7}
.nafath-card a{color:inherit;text-decoration:underline}
/* Verified-store card above the order button: our words, the official SBC widget as proof. */
.verified-card{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.verified-copy{display:grid;gap:2px;flex:1 1 180px;min-width:0}
.verified-copy strong{display:flex;align-items:center;gap:6px;color:var(--text);font-size:.98rem}
.verified-copy strong::before{content:"";width:18px;height:18px;flex:none;background:var(--accent,#00E1EC);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Zm-1.2 13.6-3.4-3.4 1.4-1.4 2 2 4.6-4.6 1.4 1.4-6 6Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Zm-1.2 13.6-3.4-3.4 1.4-1.4 2 2 4.6-4.6 1.4 1.4-6 6Z'/%3E%3C/svg%3E") center/contain no-repeat}
.verified-copy span{color:var(--muted,var(--text));font-size:.85rem;line-height:1.6}
.verified-seal{flex:none;display:flex;justify-content:flex-end;min-height:44px;max-width:100%}
.verified-seal iframe{display:block}

/* Trust r1: floating "verified store" button + proof sheet; slim line by the order button. */
.trust-fab{position:fixed;z-index:60;inset-inline-end:auto;left:16px;bottom:calc(var(--trust-lift,0px) + 14px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 14px 8px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent,#00E1EC) 55%,transparent);background:color-mix(in srgb,var(--surface,#0b141b) 88%,transparent);color:var(--text);font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;box-shadow:0 8px 24px #0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .2s,box-shadow .2s,bottom .2s,opacity .2s}
.trust-fab svg{color:var(--accent,#00E1EC);flex:none}
.trust-fab:hover{transform:translateY(-2px);box-shadow:0 12px 28px #0008}
.trust-fab:focus-visible{outline:2px solid var(--accent,#00E1EC);outline-offset:3px}
html[data-theme=light] .trust-fab{background:#ffffffeb;box-shadow:0 8px 22px #0f2a3a26;border-color:#0aa7b3}
html[data-theme=light] .trust-fab svg{color:#0a8f99}
.trust-sheet{border:0;padding:0;margin:auto;width:min(520px,calc(100% - 24px));max-height:min(86vh,760px);border-radius:22px;background:var(--surface,#0b141b);color:var(--text);box-shadow:0 30px 80px #000a;overflow:auto}
.trust-sheet::backdrop{background:#000a;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.trust-sheet-in{padding:20px 20px 18px}
.trust-sheet header{display:flex;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.trust-sheet header>div{flex:1;min-width:0}
.trust-sheet h2{margin:0;font-size:1.2rem;line-height:1.4}
.trust-sheet header p{margin:2px 0 0;color:var(--muted);font-size:.88rem}
.trust-badge{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--accent,#00E1EC) 16%,transparent);color:var(--accent,#00E1EC)}
.trust-badge svg{width:26px;height:26px}
.trust-close{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer}
.trust-list{list-style:none;margin:6px 0 0;padding:0;display:grid}
.trust-list>li{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.trust-list>li:last-child{border-bottom:0}
.trust-list strong{display:block;font-size:.95rem;margin-bottom:2px}
.trust-list p{margin:2px 0 0;color:var(--muted);font-size:.86rem;line-height:1.75}
.trust-list a{color:var(--accent,#00E1EC);text-decoration:underline;text-underline-offset:3px}
html[data-theme=light] .trust-list a{color:#087f88}
.trust-list b{color:var(--text);letter-spacing:.04em}
.trust-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--surface-2);color:var(--accent,#00E1EC)}
.trust-ico svg{width:18px;height:18px}
.trust-never{color:var(--text)!important;font-weight:600}
.trust-seal{margin-top:8px;min-height:0}
.trust-seal:empty{display:none}
.trust-seal{display:flex;flex-direction:column;align-items:center;gap:6px}
.trust-seal>.sbc-verify-seal>img,.trust-seal>.sbc-verify-seal>a>img,.trust-seal .sbc-seal-slot img{max-width:110px!important;max-height:110px!important;height:auto!important}
.trust-seal-hint{margin:0;font-size:.82rem;color:var(--muted)}
.trust-seal-link{min-height:40px;padding:6px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font:inherit;font-size:.86rem;cursor:pointer}
.trust-policy{display:block;margin-top:10px;text-align:center;color:var(--muted);font-size:.86rem;text-decoration:underline;text-underline-offset:3px}
.verified-line{display:flex;align-items:center;gap:9px;width:100%;margin:12px 0;padding:10px 14px;min-height:46px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--text);font:inherit;font-size:.9rem;text-align:start;cursor:pointer}
.verified-line>span:nth-child(2){flex:1;min-width:0}
.verified-line bdi{color:var(--muted);letter-spacing:.03em}
.verified-line-mark{flex:none;width:18px;height:18px;background:var(--accent,#00E1EC);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Zm-1.2 13.6-3.4-3.4 1.4-1.4 2 2 4.6-4.6 1.4 1.4-6 6Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Zm-1.2 13.6-3.4-3.4 1.4-1.4 2 2 4.6-4.6 1.4 1.4-6 6Z'/%3E%3C/svg%3E") center/contain no-repeat}
.verified-line-more{flex:none;color:var(--accent,#00E1EC);font-size:.82rem;font-weight:600}
html[data-theme=light] .verified-line-more{color:#087f88}
html[data-theme=light] .verified-line-mark{background:#087f88}
@media(max-width:640px){
  .trust-fab{left:12px;min-height:40px;padding:7px 12px 7px 10px;font-size:.8rem}
  .trust-sheet{width:100%;max-width:none;margin:auto 0 0;border-radius:22px 22px 0 0;max-height:88vh}
  .trust-sheet-in{padding:18px 16px calc(16px + env(safe-area-inset-bottom,0px))}
}
@media print{.trust-fab{display:none}}

/* A product on the store-wide "no discount codes" list says so instead of showing the code box. */
.product-coupon.is-blocked p{margin:6px 0 0;color:var(--muted,var(--text));font-size:.88rem;line-height:1.7}
.trust-fab.is-tucked,.trust-fab.is-away,.trust-fab.is-typing{opacity:0;pointer-events:none;transform:translateY(8px);visibility:hidden}

/* Verified-store button: shield only while scrolling down the catalog. */
.trust-fab{transition:padding .2s ease,gap .2s ease,opacity .2s ease,transform .2s ease,visibility .2s}
.trust-fab.is-compact{gap:0;padding:10px;min-width:44px;min-height:44px;justify-content:center;border-radius:50%}
.trust-fab.is-compact span{display:none}
@media (prefers-reduced-motion:reduce){.trust-fab{transition:none}}
/* Accessibility: visible focus on the header search, and links inside text are underlined. */
.header-search:focus-within{outline:2px solid var(--accent,#00E1EC);outline-offset:2px;border-radius:14px}
.header-search input:focus-visible{outline:none}
.consent-row a,.form-note a,.policy-text a{text-decoration:underline;text-underline-offset:3px}

/* Track your order: lookup by order number and mobile. */
.track-lookup-form{display:grid;gap:12px;margin:14px 0}
.track-lookup-form label{display:grid;gap:6px;font-weight:700;font-size:.92rem}
.track-lookup-form input{min-height:50px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);padding:0 14px;font:inherit;font-size:1.05rem;text-align:left}
.track-lookup-form input:focus-visible{outline:2px solid var(--accent,#00E1EC);outline-offset:2px}
.track-lookup-form .primary-action{min-height:52px;justify-content:center}
.track-lookup .muted a{text-decoration:underline;text-underline-offset:3px}
/* eSIM guide */
.guide-page .privacy-copy{margin-bottom:14px}
.guide-steps{list-style:none;counter-reset:gs;margin:12px 0;padding:0;display:grid;gap:10px}
.guide-steps li{counter-increment:gs;display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.guide-steps li::before{content:counter(gs);grid-row:1 / span 2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#03140f;background:var(--accent,#00E1EC)}
.guide-steps strong{font-size:1rem}
.guide-steps span{color:var(--muted,var(--text));font-size:.9rem;line-height:1.7}
.guide-list{margin:8px 0 16px;padding-inline-start:22px;display:grid;gap:8px;line-height:1.9}
.guide-list a,.guide-faq a{text-decoration:underline;text-underline-offset:3px}
.guide-faq{border-top:1px solid var(--line);padding:12px 0}
.guide-faq summary{cursor:pointer;font-weight:800;min-height:32px;display:flex;align-items:center}
.guide-faq p{margin:8px 0 0;line-height:1.9}
.guide-cta{margin:18px 0 8px;padding:22px;border-radius:22px;text-align:center;border:1px solid rgba(0,225,236,.35);background:linear-gradient(160deg,rgba(0,225,236,.12),transparent 60%),var(--surface)}
.guide-cta h2{margin:0 0 6px}
.guide-cta p{margin:0 0 14px;color:var(--muted,var(--text))}
.guide-cta-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
/* Search landing pages: company pages, companies hub, data SIM and unlimited hubs */
.landing-page .page-intro{position:relative}
.landing-hero .landing-logo{display:inline-grid;place-items:center;width:112px;height:62px;padding:8px 12px;border-radius:16px;background:#fff;margin-bottom:10px;box-shadow:0 8px 24px #0004}
.landing-hero .landing-logo img{max-width:100%;max-height:100%;object-fit:contain}
.landing-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;padding:0}
.landing-facts li{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-size:.92rem}
.landing-facts b{color:var(--accent,#00E1EC)}
.landing-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.landing-cta a{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
.landing-plans,.landing-group{margin:22px 0}
.landing-plans>h2,.landing-group h2{margin:0 0 12px;font-size:1.3rem}
.landing-group-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
.landing-table-wrap{overflow-x:auto;margin:10px 0;border-radius:14px;border:1px solid var(--line)}
.landing-table{width:100%;border-collapse:collapse;min-width:520px;font-size:.92rem}
.landing-table th,.landing-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
.landing-table thead th{background:var(--surface-2);color:var(--muted,var(--text));font-size:.82rem}
.landing-table tbody th a{text-decoration:underline;text-underline-offset:3px;font-weight:700}
.landing-table del{opacity:.7}
.landing-save{display:inline-block;margin-inline-start:6px;padding:1px 8px;border-radius:999px;background:rgba(34,197,94,.15);color:#4ade80;font-weight:800}
html[data-theme=light] .landing-save{color:#166534}
.landing-more{margin:24px 0}
.landing-more h2{font-size:1.15rem;margin:0 0 10px}
.landing-chips{display:flex;flex-wrap:wrap;gap:8px}
.landing-chips a{min-height:42px;display:inline-flex;align-items:center;padding:6px 16px;border-radius:999px;border:1px solid rgba(0,225,236,.35);background:var(--surface-2);font-weight:700}
.landing-chips a:hover,.landing-chips a:focus-visible{border-color:var(--accent,#00E1EC)}
.landing-operators{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:18px 0}
.landing-op{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;border-radius:18px;border:1px solid var(--line);background:var(--surface-2);text-align:center;transition:border-color .2s,transform .2s}
.landing-op:hover,.landing-op:focus-visible{border-color:var(--accent,#00E1EC);transform:translateY(-2px)}
.landing-op .landing-logo{display:grid;place-items:center;width:100%;height:62px;padding:8px;border-radius:12px;background:#fff}
.landing-op .landing-logo img{max-width:100%;max-height:100%;object-fit:contain}
.landing-op .landing-logo.is-text{background:var(--surface);color:var(--text);font-weight:900;font-size:1.3rem}
.landing-op small{color:var(--muted,var(--text))}
@media (prefers-reduced-motion:reduce){.landing-op{transition:none}.landing-op:hover{transform:none}}

/* Footer: every company page one tap away (and one link away for Google). */
.footer-ops{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.footer-ops>strong{font-weight:500;color:var(--text);margin-inline-end:6px}
.footer-ops a{min-height:36px;display:inline-flex;align-items:center;padding:4px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-size:.875rem}
.footer-ops a:hover,.footer-ops a:focus-visible{border-color:var(--accent,#00E1EC);color:var(--text)}

/* Product pages: the server sends a short summary for search engines and product.js draws the full page over it.
   Holding a screen's height keeps the footer below the fold until then, and flow-root keeps the summary's margins
   inside, so nothing on screen jumps when the page is drawn (Core Web Vitals: layout shift). */
[data-product-shell]{min-height:100vh;display:flow-root}
/* Review link page (/r/<token>): one card, big stars, the plan picked by typing. */
.review-link-page{max-width:560px;margin-inline:auto;padding-block:28px 48px}
.rl-card{padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow, none)}
.rl-card h1{font-size:1.45rem;line-height:1.5;margin:4px 0}
.rl-sub{color:var(--muted);margin:0 0 14px}
.rl-form{display:grid;gap:16px}
.rl-stars{border:0;margin:0;padding:0;text-align:center}
.rl-stars legend{font-weight:800;margin-bottom:6px;width:100%}
.rl-star-row{display:flex;justify-content:center;gap:6px}
.rl-star{width:52px;height:52px;border:0;border-radius:14px;background:transparent;font-size:2.4rem;line-height:1;color:var(--line-strong, #475569);cursor:pointer;transition:transform .12s, color .12s}
.rl-star.is-on{color:#f5b301}
.rl-star:active{transform:scale(.92)}
.rl-star:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rl-star-label{margin:6px 0 0;color:var(--muted);font-weight:700;min-height:1.5em}
.rl-field{display:grid;gap:6px;position:relative}
.rl-field label{font-weight:800}
.rl-field small{color:var(--muted);font-weight:500}
.rl-field input,.rl-field textarea{width:100%;min-height:48px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:16px}
.rl-suggest{list-style:none;margin:4px 0 0;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--surface);max-height:300px;overflow:auto}
.rl-suggest li{display:flex;justify-content:space-between;gap:10px;align-items:center;min-height:46px;padding:8px 12px;border-radius:10px;cursor:pointer}
.rl-suggest li:hover,.rl-suggest li[aria-selected="true"]{background:var(--accent-soft, rgba(34,211,238,.1))}
.rl-suggest li[aria-selected="true"]{outline:2px solid var(--accent);outline-offset:-2px}
.rl-suggest li small{color:var(--muted);white-space:nowrap}
.rl-suggest .rl-none{cursor:default;color:var(--muted)}
.rl-picked{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px;padding:8px 14px;border-radius:14px;border:1px solid var(--accent);background:var(--accent-soft, rgba(34,211,238,.1));font-weight:800}
.rl-change{border:0;background:transparent;color:var(--accent);font:inherit;font-weight:700;cursor:pointer;min-height:40px}
.rl-send{width:100%;min-height:52px;font-size:1.05rem}
.rl-note{margin:0;color:var(--muted);font-size:.9rem;text-align:center}
.rl-done{text-align:center;display:grid;gap:10px;justify-items:center;padding:12px 0}
[data-review-link]{scroll-margin-top:96px}
.rl-big{font-size:3rem;margin:0}
.review-verified{color:#22c55e;font-weight:700;font-size:.85rem}
html[data-theme="light"] .review-verified{color:#15803d}
html[data-theme="light"] .rl-star:not(.is-on){color:#cbd5e1}
/* Review page: the rest of the form opens after the stars; «how did you hear about us» is one-tap chips. */
.rl-card{text-align:start}
.rl-card>h1{text-align:center}
.rl-card>.eyebrow,.rl-card>.rl-sub{text-align:center}
.rl-star-label{font-size:1.05rem}
.rl-rest{display:grid;gap:16px}
.rl-rest.is-in{animation:rl-in .28s ease-out}
@keyframes rl-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rl-rest.is-in{animation:none}}
.rl-heard{border:0;margin:0;padding:0;min-width:0}
.rl-heard legend{font-weight:800;padding:0;margin-bottom:8px}
.rl-heard legend small{color:var(--muted);font-weight:500}
.rl-chips{display:flex;flex-wrap:wrap;gap:8px}
.rl-chip{min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-weight:700;cursor:pointer;transition:border-color .12s,background .12s}
.rl-chip:hover{border-color:var(--accent)}
.rl-chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft, rgba(34,211,238,.1));color:var(--text)}
.rl-chip[aria-pressed="true"]::before{content:"✓ "}
.rl-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.review-link-page .rl-field>label,.review-link-page .rl-heard legend{display:block}
.review-link-page .rl-field small{display:inline;margin-inline-start:4px}
.review-link-page .rl-note{text-wrap:balance}

/* Under the product title: the rating and a compact share button on one line. */
.detail-subline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:-2px 0 10px}
.detail-subline .detail-rating{margin:0}
.detail-share{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font:inherit;font-size:.86rem;font-weight:700;cursor:pointer}
.detail-share svg{width:16px;height:16px;color:var(--accent)}
.detail-share:hover{border-color:var(--accent)}
.share-menu{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);max-width:100%}
.share-menu a,.share-menu button{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font:inherit;font-size:.86rem;font-weight:700;text-decoration:none;cursor:pointer}
.share-menu a:hover,.share-menu button:hover,.share-menu a:focus-visible,.share-menu button:focus-visible{border-color:var(--accent)}
.detail-share:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:640px){.detail-share{min-height:44px}}

/* ——— Home slides: unlimited from each operator, network first ——— */
.ul-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ul-grid .q3-card{padding:10px 12px 12px;gap:4px}
.ul-grid .q3-data strong{font-size:clamp(1.15rem,1.7vw,1.6rem)}
.ul-grid .q3-now b{font-size:clamp(1.05rem,1.4vw,1.35rem)}
.ul-grid .q3-card.op-salam{box-shadow:inset 0 3px 0 #00C389,0 16px 36px rgba(0,0,0,.28)}
.ul-grid .q3-card.op-virgin{box-shadow:inset 0 3px 0 #E10A0A,0 16px 36px rgba(0,0,0,.28)}
.ul-grid .q3-card.op-yaqoot{box-shadow:inset 0 3px 0 #C2185B,0 16px 36px rgba(0,0,0,.28)}
.ul-wait{grid-column:1/-1;margin:0;color:#9DB2B6;font-size:.9rem}
.hero-slide.is-active .ul-grid .q3-card:nth-child(4){animation-delay:.24s}
.hero-slide.is-active .ul-grid .q3-card:nth-child(5){animation-delay:.32s}
.hero-slide.is-active .ul-grid .q3-card:nth-child(6){animation-delay:.4s}
.nw-panel{display:grid;gap:12px;min-width:0}
.nw-tips{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.nw-tips li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(16,28,30,.94),rgba(8,16,18,.96));border:1px solid rgba(255,255,255,.1);color:#F4F8F9}
.nw-tips li>span{font-size:1.35rem;line-height:1.2}
.nw-tips b{display:block;font-size:.98rem;font-weight:800}
.nw-tips small{display:block;color:#9DB2B6;font-size:.82rem;line-height:1.6}
.nw-ops{display:flex;flex-wrap:wrap;gap:8px}
.nw-ops a{display:grid;place-items:center;height:40px;min-width:76px;padding:6px 10px;border-radius:10px;background:#F4F8F9;color:#042422;font-weight:800;font-size:.85rem;text-decoration:none;transition:transform .2s ease}
.nw-ops a:hover{transform:translateY(-2px)}
.nw-ops a:focus-visible{outline:2px solid #7ef6ef;outline-offset:3px}
.hero-slide--network .nw-ops img,.hero-slide--network.is-active .nw-ops img{position:static!important;inset:auto!important;width:auto!important;height:20px!important;max-width:78px!important;object-fit:contain!important;transform:none!important;margin:0!important}
@media(max-width:720px){
  .ul-grid{grid-template-columns:1fr;gap:6px}
  /* Phones show the three cheapest, like the 3-month slide; the full list is one tap away. */
  .ul-grid .q3-card:nth-child(n+4){display:none}
  .hero-slide--network .nw-ops{display:none}
  .ul-grid .q3-card{padding:8px 10px}
  .nw-tips li{padding:8px 10px;gap:8px}
  .nw-tips small{font-size:.76rem;line-height:1.5}
  .nw-ops{gap:6px}
  .nw-ops a{height:34px;min-width:60px;padding:4px 8px}
  .hero-slide--network .nw-ops img{height:16px!important;max-width:60px!important}
}
.coverage-note{display:flex;gap:10px;align-items:flex-start;margin:10px 0;padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--surface-2));color:var(--text);font-size:.86rem;line-height:1.7}
.coverage-note>span:first-child{font-size:1.1rem;line-height:1.5}
.coverage-note strong{font-weight:800}

/* Slider logos sit directly on the dark cards, no white box. The official Salam, Yaqoot and Red Bull marks have
   white lettering, invisible on a white box. */
.q3-logo{background:transparent!important;padding:0!important;min-width:0!important;height:28px!important;justify-content:start}
.hero-slide--quarter .q3-logo img,.hero-slide--quarter.is-active .q3-logo img{height:22px!important;max-width:96px!important}
.nw-ops a{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#F4F8F9}
.nw-ops a:hover{border-color:#7ef6ef}
@media(max-width:720px){.q3-was em{display:none}.q3-logo{height:24px!important}.hero-slide--quarter .q3-logo img{height:18px!important;max-width:80px!important}}

/* «أول مرة تطلب من عندنا؟» link to /trust/, placed by the order button, the payment steps and the trust section. */
.trust-link{margin:10px 0 0;font-size:.92rem;line-height:1.7}
.trust-link a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.trust-page .trust-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.trust-page .trust-jump a{min-height:40px;display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:.9rem}
.trust-page .trust-jump a:hover{border-color:var(--accent)}
.trust-page section[aria-labelledby]{scroll-margin-top:110px}
.trust-page .trust-note{margin-top:12px;padding:10px 14px;border-radius:12px;border:1px dashed var(--line);color:var(--muted)}
.trust-page .trust-facts{margin:12px 0}
.trust-page .trust-contact{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
.trust-page .trust-contact a{font-weight:800}
.trust-page .privacy-copy a:not(.secondary-action){color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* /trust/: four checkable facts at the top, the gold guarantee, real reviews; product page proof chips. */
.trust-page .trust-highlights{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.trust-page .trust-highlights a{display:grid;gap:4px;height:100%;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:var(--surface);color:var(--text)}
.trust-page .trust-highlights a:hover{border-color:var(--accent)}
.trust-page .trust-hl-ico{font-size:1.5rem;line-height:1}
.trust-page .trust-highlights strong{font-size:1rem}
.trust-page .trust-highlights small{color:var(--muted);line-height:1.7}
.trust-page .trust-guarantee{border-color:#e8c872}
.trust-page .trust-guarantee h2{color:#f6d98a}
html[data-theme="light"] .trust-page .trust-guarantee h2{color:var(--gold, #8a6212)}
.trust-page .trust-big{font-size:1.12rem;font-weight:800;line-height:1.8}
.trust-page .trust-review-sum b{font-size:1.4rem;color:#f5b301}
.trust-page .trust-reviews{list-style:none;padding:0;margin:12px 0;display:grid;gap:10px}
.trust-page .trust-reviews li{padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg)}
.trust-page .trust-reviews p{margin:0}
.trust-page .trust-review-stars{color:#f5b301;letter-spacing:2px}
.trust-page .trust-review-text{margin:6px 0 !important;line-height:1.8}
.trust-page .trust-review-by{color:var(--muted);font-size:.88rem}
.trust-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0}
.trust-chips a{display:inline-flex;align-items:center;min-height:36px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-size:.85rem;font-weight:700;color:var(--text)}
.trust-chips a:hover{border-color:var(--accent)}
/* Product page trust box above the order button; product cards keep .pay-soon non-interactive, this box is not. */
.pay-soon-full,.pay-soon-full *{pointer-events:auto}
.trust-box{margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.trust-box .trust-chips{margin:0}
.trust-chips button{display:inline-flex;align-items:center;min-height:36px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font:inherit;font-size:.85rem;font-weight:700;color:var(--text);cursor:pointer}
.trust-chips button:hover{border-color:var(--accent)}
.trust-box-line{margin:10px 0 0;font-size:.9rem;line-height:1.7;color:var(--text)}
.trust-box .trust-link{margin-top:6px}
.detail-fold .pay-soon-kicker{margin:12px 0 6px}
.detail-fold .pay-soon-steps{font-size:.92rem;color:var(--muted)}
.coverage-more{margin:12px 0 0;color:var(--muted);line-height:1.8}
/* «ساعدني أختار» (/pick/) */
.pick-form{display:grid;gap:18px}
.pick-form fieldset{border:0;margin:0;padding:0;min-width:0}
.pick-form legend{font-weight:800;margin-bottom:10px;font-size:1.02rem}
.pick-options{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.pick-row{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.pick-options label{position:relative;cursor:pointer}
.pick-options input{position:absolute;opacity:0;pointer-events:none}
.pick-options span{display:grid;gap:2px;min-height:48px;align-content:center;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg)}
.pick-options small{color:var(--muted);font-size:.82rem}
.pick-options input:checked+span{border-color:var(--accent);background:var(--accent-soft, rgba(34,211,238,.1))}
.pick-options input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.pick-hint{margin:8px 0 0}
.pick-go{width:100%;min-height:52px}
.pick-results{margin-top:18px;scroll-margin-top:100px}
.pick-results h2{outline:0}
.pick-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.pick-card{position:relative;padding:16px;border-radius:18px;border:1px solid var(--line);background:var(--surface);display:grid;gap:6px;align-content:start}
.pick-card.is-best{border-color:var(--accent)}
.pick-card h3{margin:0;font-size:1.05rem}
.pick-card ul{list-style:none;margin:6px 0;padding:0;display:grid;gap:4px;color:var(--muted);font-size:.9rem}
.pick-badge{margin:0;justify-self:start;padding:2px 10px;border-radius:999px;background:var(--accent);color:#03140f;font-weight:800;font-size:.8rem}
.pick-price{margin:0}.pick-price strong{font-size:1.4rem}.pick-price del{color:var(--muted)}
.pick-near{margin:0;color:var(--muted);font-size:.85rem}
.pick-actions .primary-action{width:100%;min-height:46px}
.pick-foot{margin-top:12px}
.pick-cta{margin:14px 0 0;text-align:center}.pick-cta a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--accent);font-weight:800;color:var(--accent)}
.order-callback{margin-top:10px}
.order-callback label{display:grid;gap:6px;font-size:.88rem;font-weight:600;color:var(--text)}
.order-callback span{display:flex;gap:8px}
.order-callback input{flex:1;min-width:0;min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);padding:0 12px;font:inherit;text-align:left}
.order-callback button{min-height:44px;padding:0 18px}
/* ===== GO on the STC network ===== */
.tab-brand-logo{display:inline-grid;place-items:center;width:52px;height:32px;padding:3px 6px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.tab-brand-logo img{width:100%;height:100%;object-fit:contain}
.go-stc-slot{margin:6px 0 14px}
.go-stc{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:18px 20px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(78,47,145,.22),rgba(0,248,248,.08) 60%,transparent),var(--surface-2,var(--surface));position:relative;overflow:hidden}
.go-stc::after{content:"";position:absolute;inset:auto -40px -60px auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(78,47,145,.35),transparent 70%);pointer-events:none}
.go-stc-logos{display:flex;align-items:center;gap:10px}
.go-stc-logo{display:grid;place-items:center;width:96px;height:56px;padding:6px 10px;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.go-stc-logo img{width:100%;height:100%;object-fit:contain}
.go-stc-on{font-size:.8rem;font-weight:700;color:var(--muted);white-space:nowrap}
.go-stc-kicker{margin:0;font-size:.82rem;font-weight:700;color:var(--muted)}
.go-stc h3{margin:2px 0 6px;font-size:clamp(1.35rem,3.2vw,1.9rem);line-height:1.25;color:var(--text)}
.go-stc h3 b{display:inline-block;padding:0 10px;border-radius:10px;background:#4f2d91;color:#fff;letter-spacing:.5px}
.go-stc-lead{margin:0 0 10px;color:var(--text);opacity:.9;line-height:1.7;font-size:.95rem}
.go-stc-points{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.go-stc-points li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--accent-soft);font-size:.84rem;font-weight:700;color:var(--text)}
.go-stc-ribbon{position:absolute;bottom:10px;inset-inline-start:10px;z-index:2;padding:5px 11px;border-radius:999px;background:#4f2d91;color:#fff;font-size:.78rem;font-weight:800;box-shadow:0 6px 16px rgba(0,0,0,.25)}
@media (max-width:640px){.go-stc{grid-template-columns:1fr;gap:12px;padding:16px}.go-stc-logo{width:84px;height:48px}.go-stc-points li{font-size:.8rem;padding:5px 10px}}
.category-tab>span.tab-brand-logo,.category-tab .tab-brand-logo{width:58px;height:38px;padding:4px 6px;border-radius:10px;background:#fff;align-self:center}
html[data-theme=light] .category-tab>span.tab-brand-logo{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.hero-cat .tab-brand-logo{width:54px;height:30px}
.go-logo-chip{display:inline-grid;place-items:center;width:64px;height:34px;padding:3px 6px;border-radius:9px;background:#fff}
.go-logo-chip img{width:100%;height:100%;object-fit:contain}
.go-stc-pill{display:inline-flex;align-self:flex-start;margin:6px 0 2px;padding:4px 11px;border-radius:999px;background:#4f2d91;color:#fff;font-size:.78rem;font-weight:800}
.compact-brand .compact-operator-logo.go-logo-chip,html[data-theme] .compact-brand .go-logo-chip{background:#fff;width:64px;height:34px;padding:3px 6px;border-radius:9px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.esim-discount-note{display:flex;gap:8px;align-items:flex-start;margin:10px 0;padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,#d97706 55%,transparent);background:color-mix(in srgb,#d97706 12%,transparent);color:var(--text);font-size:.9rem;line-height:1.7;font-weight:600}
.esim-discount-note svg{flex:0 0 auto;width:18px;height:18px;margin-top:3px;color:#d97706}
/* ——— Home slide: «الأكثر طلبًا», live prices ——— */
.hero-slide--best .ul-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.hero-slide--best .q3-card{position:relative}
.hero-slide--best .q3-card.is-top{border-color:var(--accent,#00f8f8);box-shadow:0 0 0 1px var(--accent,#00f8f8),0 16px 36px rgba(0,0,0,.28)}
.bs-flag{position:absolute;top:-10px;inset-inline-start:12px;padding:2px 10px;border-radius:999px;background:linear-gradient(90deg,#f5c451,#e3a92a);color:#1b1300;font-size:.7rem;font-weight:800}
.bs-perks{list-style:none;margin:10px 0 14px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.bs-perks li{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center}
.bs-perks li span{grid-row:span 2;font-size:1.05rem}
.bs-perks b{font-size:.84rem}.bs-perks small{font-size:.72rem;color:#9DB2B6}
@media (max-width:1100px){.hero-slide--best .ul-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bs-perks{display:none}}
/* Phones: one row per plan like the other price slides, three plans, no side copy. */
@media (max-width:720px){.hero-slide--best .ul-grid{grid-template-columns:1fr}.hero-slide--best .bs-flag{top:-8px;font-size:.64rem}.hero-slide--best .q3-copy .primary-action{display:none}}
/* Phones: the «متجر موثّق» button is a small shield, so it never covers buttons or text under it. */
@media (max-width:600px){.trust-fab{width:44px;height:44px;padding:0;justify-content:center;gap:0}.trust-fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* ——— Home slide: GO on the STC network (live plan prices) ——— */
.hero-slide--go{color:#eaf6fb}
.go-bg{position:absolute;inset:0;background:radial-gradient(60% 80% at 50% 55%,rgba(35,160,214,.38),transparent 70%),radial-gradient(40% 50% at 85% 10%,rgba(79,45,145,.35),transparent 70%),linear-gradient(135deg,#041826 0%,#07263a 55%,#0a1d33 100%)}
.go-slide{position:relative;z-index:1;height:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.7fr) minmax(0,1fr);align-items:center;gap:18px;padding:28px clamp(56px,6vw,84px) 44px}
.go-copy{display:grid;gap:12px;justify-items:start}
.go-brand{display:flex;align-items:center;gap:10px;margin:0}
.go-chip{display:inline-grid;place-items:center;width:84px;height:44px;padding:5px 9px;border-radius:12px;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.go-chip img{width:100%;height:100%;object-fit:contain}
.go-on{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#4f2d91;color:#fff;font-weight:800;font-size:.86rem}
.go-on b{letter-spacing:.5px}
.go-copy h2{margin:0;font-size:clamp(1.5rem,2.7vw,2.4rem);line-height:1.25;color:#fff}
.go-copy h2 span{color:#7fd8ff}
.go-feats{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.go-feats li{position:relative;padding-inline-start:20px;font-size:.92rem;color:#cfe6ef}
.go-feats li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:10px;height:10px;border-radius:50%;background:#2fb6ec;box-shadow:0 0 0 3px rgba(47,182,236,.2)}
.go-renew{color:#9fc7d6;font-size:.8rem}
.go-visual{position:relative;display:grid;place-items:center;height:100%}
.go-visual::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(47,182,236,.45),transparent 65%);filter:blur(6px)}
.go-visual img{position:relative;width:auto;max-height:min(330px,82%);max-width:100%;border-radius:22px;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 98%);mask-image:linear-gradient(180deg,#000 72%,transparent 98%);filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.go-plans{display:grid;gap:10px}
.go-plan{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"term price" "note price";align-items:center;column-gap:12px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.96);color:#0b2233;text-decoration:none;box-shadow:0 12px 26px rgba(0,0,0,.28);transition:transform .2s ease}
.go-plan:hover{transform:translateY(-2px)}
.go-plan.is-best{outline:2px solid #2fb6ec;outline-offset:2px}
.go-plan-flag{position:absolute;top:-10px;inset-inline-start:14px;padding:2px 10px;border-radius:999px;background:linear-gradient(90deg,#f5c451,#e3a92a);color:#1b1300;font-size:.7rem;font-weight:800}
.go-plan-term{grid-area:term;font-weight:800;font-size:1rem}
.go-plan small{grid-area:note;color:#4f6b78;font-size:.78rem}
.go-plan-price{grid-area:price;display:flex;align-items:baseline;gap:4px}
.go-plan-price em{font-style:normal;font-size:.72rem;color:#4f6b78}
.go-plan-price b{font-size:1.55rem;line-height:1;color:#0b2233}
.go-plan-price i{font-style:normal;font-size:.78rem;color:#4f6b78}
@media (max-width:1100px){.go-slide{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:22px 56px 40px}.go-visual{display:none}}
@media (max-width:720px){.go-slide{grid-template-columns:1fr;align-content:center;gap:12px;padding:16px 14px 30px}.go-copy{gap:8px}.go-copy h2{font-size:1.3rem}.go-feats,.go-copy .primary-action,.go-renew{display:none}.go-chip{width:66px;height:34px}.go-plan{padding:10px 14px}.go-plan-price b{font-size:1.3rem}}
/* The slide-wide picture rule must not touch the GO slide's logo and router. */
.hero-slide--go .go-chip img,.hero-slide--go.is-active .go-chip img{position:static;inset:auto;width:100%;height:100%;object-fit:contain;transform:none;transition:none}
.hero-slide--go .go-visual img,.hero-slide--go.is-active .go-visual img{position:relative;inset:auto;width:auto;height:auto;max-height:min(330px,82%);max-width:100%;object-fit:contain;transform:none;transition:none}
.hero-slide--go .go-chip img,.hero-slide--go .go-visual img{background:transparent!important;object-fit:contain!important;filter:none}
.hero-slide--go .go-visual img{filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
html[data-theme] .hero-slide--go .go-chip img{-webkit-mask-image:none;mask-image:none}
html[data-theme] .hero-slide--go .go-visual img{-webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 45%,#000 74%,transparent 100%)!important;mask-image:radial-gradient(ellipse 62% 60% at 50% 45%,#000 74%,transparent 100%)!important;border-radius:0}

/* ── Logos without white boxes (r85) ─────────────────────────────────────────
   Logos sit straight on the surface. Dark marks (STC, Salam, GO wordmark) turn light on the dark theme; Red Bull's
   white MOBILE line and GO's dark wordmark ship two copies each: .logo-for-light / .logo-for-dark. */
.tab-brand-logo,.category-tab>span.tab-brand-logo,.category-tab .tab-brand-logo,html[data-theme=light] .category-tab>span.tab-brand-logo,
.go-stc-logo,.go-logo-chip,.compact-brand .compact-operator-logo.go-logo-chip,html[data-theme] .compact-brand .go-logo-chip,
.go-chip,.landing-hero .landing-logo,.landing-op .landing-logo{background:transparent!important;box-shadow:none!important}
.go-stc-logo,.go-chip,.landing-hero .landing-logo{padding:0!important}
.tab-brand-logo img,.go-logo-chip img,.go-stc-logo img,.go-chip img{width:100%;height:100%;object-fit:contain}
.landing-op .landing-logo{height:52px;padding:4px 8px!important}
.landing-op .landing-logo img{width:auto!important;height:auto!important;max-width:min(120px,100%)!important;max-height:40px!important}
html[data-theme=light] .logo-for-dark,html:not([data-theme=light]) .logo-for-light{display:none!important}
html:not([data-theme=light]) :is(.landing-logo,.go-stc-logo,.tab-brand-logo,.go-logo-chip) img:is([src*="/stc"],[src*="salam-188"],[src*="salam.png"]){filter:brightness(0) invert(1)}

/* ── Product details section and «which plan suits you» (SEO content, r86) ── */
.product-guide{margin:18px 0 8px;display:grid;gap:12px}
.product-guide h2{margin:6px 0 0;font-size:1.15rem}
.pg-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin:0}
.pg-facts div{border:1px solid var(--line,#28443f);border-radius:12px;padding:10px 12px;background:var(--surface-2,transparent)}
.pg-facts dt{font-size:.82rem;color:var(--muted,#8fa9a3);margin:0 0 4px}
.pg-facts dd{margin:0;font-weight:700;line-height:1.6}
.pg-alts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pg-alts li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;border-bottom:1px dashed var(--line,#28443f);padding:6px 0}
.pg-alts a,.pg-links a,.landing-who a,.landing-note a{font-weight:700}
.pg-alts span{color:var(--muted,#8fa9a3);font-size:.9rem}
.pg-links{margin:0}
.landing-who{margin:6px 0 10px;padding-inline-start:18px;display:grid;gap:6px;line-height:1.7}
.landing-note{margin:12px 0;color:var(--muted,#8fa9a3)}
html[lang=en] .product-guide{display:none}
@media (max-width:640px){.pg-facts{grid-template-columns:1fr}}