/* DBbet Egypt. Brand skin: DBbet dark with the DBbet pink accent. Arabic first (RTL), so spacing uses logical
   properties (inline-start / inline-end) and works the same in the English (LTR) pages. Mobile first. */
:root {
  --bg: #121212; --surface: #1b1b1e; --surface-2: #232328; --line: #303036; --text: #f3f3f5; --muted: #a9a9b3;
  --accent: #ff335c; --accent-hover: #ff4f73; --accent-ink: #ffffff; --link: #ff7a95;
  --ok: #3ccf91; --warn: #ffb547; --ph-bg: #3b2c08; --ph-text: #ffd27a;
  --radius: 12px; --wrap: 1100px;
  --font: "Cairo", "Segoe UI", Tahoma, "Noto Sans Arabic", "Geeza Pro", Arial, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.85; }
body.lang-en { line-height: 1.65; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }
.skip { position: absolute; inset-inline-start: -999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; z-index: 20; }
.skip:focus { inset-inline-start: 8px; }

.preview-bar { background: var(--ph-bg); color: var(--ph-text); font-size: 14px; text-align: center; padding: 8px 16px; line-height: 1.5; }

/* Header */
.site-head { background: #0c0c0d; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.head-row { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding-block: 10px; }
.logo img { display: block; height: 22px; width: auto; }
.main-nav { display: flex; gap: 4px 18px; overflow-x: auto; scrollbar-width: none; order: 3; flex-basis: 100%; }
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; padding-block: 4px; }
.main-nav a:hover { color: var(--accent); }
.head-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.lang-switch { color: var(--muted); font-size: 14px; text-decoration: none; margin-inline-end: 2px; }
/* Phones: the APK and Register buttons move from the header to the sticky bar at the bottom of the screen. */
@media (max-width: 599px) { .head-actions .btn { display: none; } }
/* One header row from 1000px (logo, menu, language, APK, Register). Narrower screens put the menu on its own row
   below, so the two buttons never wrap (the Arabic menu needs about 930px next to them). */
@media (min-width: 1000px) { .main-nav { order: 0; flex-basis: auto; } }

/* Buttons */
.btn { display: inline-block; background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; border-radius: 999px; padding: 12px 26px; line-height: 1.3; border: 2px solid transparent; /* same height as the outlined APK button */ }
.btn:hover { background: var(--accent-hover); color: var(--accent-ink); }
/* Solid buttons with white text use a deeper red: white on #ff335c is 3.6:1, under the 4.5:1 PageSpeed asks for;
   #e6003a is 4.75:1 and #c4002f (hover) more (11 Nov 2026). The brand red stays for borders, glows and outlines. */
.btn:not(.btn-app) { background: #e6003a; }
.btn:not(.btn-app):hover { background: #c4002f; }
.btn-app:hover { background: #e6003a; }
.btn-sm { padding: 7px 16px; font-size: 14px; }
.btn-app { background: transparent; color: var(--text); border: 2px solid var(--accent); }
.btn-app:hover { background: var(--accent); color: var(--accent-ink); }
.btn.pending { opacity: .75; cursor: not-allowed; }
/* Aviator button (Ray, 11 Nov 2026): the brand red in a deeper gradient with a small plane, so it stands apart from
   Register and APK. The plane is a mask, so it takes the text colour. */
.btn.btn-aviator { background: linear-gradient(135deg, #e6003a 0%, #a8002a 100%); box-shadow: 0 6px 18px rgba(255, 51, 92, .28); }
.btn.btn-aviator:hover { background: linear-gradient(135deg, #cc0034 0%, #93001f 100%); }
.btn-aviator::before { content: ""; display: inline-block; width: 1.15em; height: 1.15em; margin-inline-end: .45em; vertical-align: -.2em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(45 12 12)' d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%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 transform='rotate(45 12 12)' d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Sticky bar on phones (as on the other DBbet sites): APK and Register always at the bottom of the screen.
   Only on pages that show sign-up buttons (body.has-sticky): not on responsible gambling, terms, privacy, cookies. */
.sticky-cta { display: none; }
@media (max-width: 599px) {
  .sticky-cta { display: flex; gap: 10px; position: fixed; inset-inline: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(12, 12, 13, .96); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .sticky-cta .btn { flex: 1 1 0; min-width: 0; text-align: center; padding: 10px 8px; font-size: 15.5px; white-space: nowrap; }
  body.has-sticky { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}
@media print { .sticky-cta { display: none !important; } }
.cta-inline { margin-block: 18px; }

/* Breadcrumbs */
.crumbs ol { list-style: none; margin: 0; padding-block: 12px 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-inline: 6px; color: var(--line); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }

/* Page */
.page { max-width: 820px; margin-inline: auto; padding-block: 18px 48px; }
.page-home { max-width: var(--wrap); }
.page-head h1 { font-size: clamp(26px, 6vw, 38px); line-height: 1.35; margin: 8px 0 12px; font-weight: 800; text-wrap: balance; }
.lead { font-size: 18.5px; color: #e2e2e6; }
.lead p { margin-block: 0 12px; }
.meta { color: var(--muted); font-size: 13.5px; margin: 6px 0 0; }
.page h2 { font-size: clamp(21px, 4.4vw, 27px); line-height: 1.45; margin: 40px 0 12px; font-weight: 700; text-wrap: balance; }
.page h3 { font-size: 19px; margin: 26px 0 8px; font-weight: 700; }
/* Quoted English screen labels in Arabic text («Make a deposit»): one unit, so a label moves to the next line whole
   instead of splitting across two lines in right-to-left text. */
.page bdi.ui { display: inline-block; }
/* Email addresses stay on one line instead of breaking at their hyphen ("info-" / "en@db-bet-team.com"). */
a[href^="mailto:"] { white-space: nowrap; }
/* In-page links (#s4 and so on) stop below the sticky header instead of hiding the heading under it. */
.page section[id] { scroll-margin-top: 110px; }
.page p { margin-block: 0 14px; }
.page ul, .page ol { padding-inline-start: 22px; margin-block: 0 16px; }
.page li { margin-block: 4px; }
.page strong { color: #ffffff; }

/* Home tiles */
.tiles { list-style: none; padding: 0; margin: 24px 0 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tiles a { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; color: var(--text); text-decoration: none; font-weight: 700; }
.tiles a:hover { border-color: var(--accent); }
.tiles img { width: 48px; height: 48px; flex: none; }
/* 5 home tiles (Ray, 11 Nov 2026): 2 + 2 + 1 (full width) on phones, 3 + 2 on tablets, one row of 5 from 1100px. */
@media (max-width: 759px) { .tiles li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* Five in a row: icon above the name, centred, so two-word names stay on one line. */
  .tiles a { flex-direction: column; justify-content: center; text-align: center; gap: 8px; padding: 14px 8px; }
}

/* Slots & Crash game catalog (Ray, 11 Nov 2026: "have all in same size"): every game the same square picture with its
   name under it. 3 a row on phones, 4 from 600px; flex rows so a short last row sits in the middle. */
.games { list-style: none; padding: 0 !important; margin: 16px 0 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; }
.games li { margin: 0; flex: 0 0 calc((100% - 20px) / 3); min-width: 0; }
.games a { display: block; color: var(--text); text-decoration: none; border-radius: var(--radius); }
.games img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--radius); background: var(--surface-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 8px 22px rgba(0, 0, 0, .4); transition: transform .15s ease, box-shadow .15s ease; }
.games a:hover img, .games a:focus-visible img { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--accent), 0 12px 26px rgba(0, 0, 0, .5); }
.game-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 7px; font-size: 13.5px; font-weight: 700; line-height: 1.35; text-align: center; }
.games a:hover .game-name { color: var(--accent-hover); }
@media (min-width: 600px) { .games { gap: 18px 12px; } .games li { flex-basis: calc((100% - 36px) / 4); } .game-name { font-size: 14.5px; } }
@media (prefers-reduced-motion: reduce) { .games img { transition: none; } .games a:hover img, .games a:focus-visible img { transform: none; } }
.games-cta { text-align: center; margin-block: 22px 8px; }

/* Tables */
.table-wrap { overflow-x: auto; margin-block: 0 18px; border: 1px solid var(--line); border-radius: var(--radius); }
.page table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 520px; }
.page th, .page td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.page th { background: var(--surface-2); font-weight: 700; }
.page tr:last-child td { border-bottom: 0; }
/* Two-column tables (label + value) fit a phone screen; tables with 3+ columns keep the 520px minimum and scroll sideways. */
.page table:not(:has(tr > :nth-child(3))) { min-width: 0; }

/* Callouts */
.note, .warn { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-block: 0 18px; }
.warn { border-color: #6b4a12; background: #221a0d; }
.note p:last-child, .warn p:last-child { margin-bottom: 0; }

/* Placeholders for facts Ray will add */
mark.ph { background: var(--ph-bg); color: var(--ph-text); border: 1px dashed #8a6a1e; border-radius: 6px; padding: 0 6px; font-weight: 600; }
code.promo { background: var(--surface-2); border: 1px dashed var(--accent); border-radius: 6px; padding: 2px 8px; font-weight: 700; letter-spacing: .04em; }
.pay-method { display: inline-flex; align-items: center; gap: 12px; }
.pay-method > span { display: grid; gap: 2px; }
/* All payment logos share one tile size (240x96 file, shown at 120x48). */
.pay-logo { width: 120px; height: 48px; object-fit: contain; border-radius: 8px; background: #fff; flex: none; }
.pay-note { color: var(--muted); font-size: 13px; line-height: 1.5; }
/* Phones: the limits table becomes one card per method (logo and name, then minimum and maximum side by side),
   so nothing scrolls sideways. Labels come from the data-label attributes. */
@media (max-width: 599px) {
  .page table.pay-table { min-width: 0; }
  .pay-table thead { display: none; }
  .pay-table tbody { display: block; }
  .pay-table tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
  .pay-table tr:last-child { border-bottom: 0; }
  .page .pay-table td { display: block; padding: 0; border: 0; }
  .pay-table td:first-child { grid-column: 1 / -1; }
  .pay-table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
  .table-wrap .pay-logo { width: 84px; height: 34px; }
}

/* APK install steps (/apk/, /en/apk/): numbered picture cards. Pictures are 184x310 SVG drawings (1-2 KB each). */
.stepshots { list-style: none; padding: 0 !important; margin: 18px 0 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: step; }
.stepshots li { counter-increment: step; position: relative; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 12px 12px; display: grid; gap: 10px; align-content: start; }
.stepshots li::before { content: counter(step); position: absolute; top: 10px; inset-inline-start: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; line-height: 26px; text-align: center; }
.stepshots img { display: block; width: 100%; max-width: 184px; height: auto; margin: 0 auto; }
.stepshots p { margin: 0; font-size: 15px; line-height: 1.65; }
@media (max-width: 899px) { .stepshots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .stepshots li { padding: 12px 10px 10px; } .stepshots p { font-size: 14px; } }
@media (max-width: 340px) { .stepshots { grid-template-columns: 1fr; } }
/* Screenshot guides (APK, deposit, withdrawal): Ray's phone screenshots, background matched to the card colour,
   bottom faded. Wide screens: a grid of cards. Phones: one row per step, picture beside the caption. */
.stepshots.shots img { max-width: 220px; }
/* Balanced rows from 600px up: 3 steps in one row; 4 in one row (2 + 2 on tablets); 5 as 3 + 2 with the second row
   centred (a 6-column grid, each card spanning 2 columns). */
@media (min-width: 600px) {
  .stepshots.shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stepshots.shots:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stepshots.shots:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stepshots.shots:has(> li:nth-child(5):last-child) > li { grid-column: span 2; }
  .stepshots.shots:has(> li:nth-child(5):last-child) > li:nth-child(4) { grid-column: 2 / span 2; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .stepshots.shots:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .stepshots.shots { grid-template-columns: 1fr; gap: 10px; }
  .stepshots.shots li { grid-template-columns: minmax(0, 44%) 1fr; align-items: center; gap: 12px; padding: 10px; }
  .stepshots.shots img { max-width: none; }
  .stepshots.shots p { font-size: 14.5px; }
}
.pay-list { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; }
.pay-list li { display: inline-flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px 6px 6px; margin: 0; min-height: 48px; }
[dir="rtl"] .pay-list li { padding: 6px 6px 6px 12px; }
.pay-list .pay-logo { width: 90px; height: 36px; }

/* FAQ */
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-block: 0 10px; }
.faq summary { cursor: pointer; padding: 14px 16px; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: inline-end; color: var(--accent); font-weight: 800; }
.faq details[open] summary::after { content: "–"; }
.faq-a { padding: 0 16px 6px; color: #e2e2e6; }

/* CTA band */
.cta-band { margin-block: 40px 8px; background: linear-gradient(135deg, #2a0d15, var(--surface)); border: 1px solid #4a1a26; border-radius: 16px; padding: 22px 20px; text-align: center; }
.cta-band p { margin-block: 0 12px; }
.cta-offer { font-size: 20px; font-weight: 800; }
.cta-band .small { color: var(--muted); font-size: 13.5px; margin: 14px 0 0; }

/* Related */
.related { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 8px; }
.related h2 { font-size: 20px; margin-top: 16px; }
.related ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.related a { display: inline-block; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; text-decoration: none; color: var(--text); font-size: 15px; }
.related a:hover { border-color: var(--accent); }

/* Footer */
.site-foot { background: #0c0c0d; border-top: 1px solid var(--line); margin-top: 40px; padding-block: 28px 36px; font-size: 14.5px; }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (min-width: 760px) { .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.foot-col h2 { font-size: 15px; margin: 0 0 8px; color: var(--text); }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col a { color: var(--muted); text-decoration: none; line-height: 2; }
.foot-col a:hover { color: var(--text); }
.foot-legal { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 18px; color: var(--muted); }
.foot-legal p { margin: 0 0 8px; }
.age { display: inline-block; border: 2px solid var(--accent); color: var(--text); border-radius: 50%; width: 44px; height: 44px; line-height: 40px; text-align: center; font-weight: 800; }

/* Hero (home pages). Phones: square crop on top, full width, fading into the page at the bottom.
   900px and up: text beside the full poster; the poster's edges fade into the page and a soft brand-red glow sits behind it. */
.hero { display: grid; gap: 4px 32px; align-items: center; position: relative; isolation: isolate; padding-block: 0 8px; }
.hero::before { content: ""; position: absolute; inset: -24px -16px 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 30%, rgba(255, 51, 92, .16), transparent 70%); }
.hero-media { order: -1; margin-inline: -16px; }
.hero-media picture, .hero-media img { display: block; }
.hero-media img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; object-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); }
.hero-text h1 { font-size: clamp(26px, 6vw, 40px); line-height: 1.35; margin: 0 0 12px; font-weight: 800; text-wrap: balance; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
/* Phones: the buttons come right under the heading so they are on the first screen; the intro follows. */
@media (max-width: 899px) {
  .hero-text { display: flex; flex-direction: column; }
  .hero-text h1 { order: 1; }
  .hero-text .hero-cta { order: 2; margin: 4px 0 16px; }
  .hero-text .lead { order: 3; }
  .hero-text .meta { order: 4; }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); padding-block: 12px 0; }
  .hero::before { inset: -40px 0 -20px; background: radial-gradient(45% 60% at 22% 50%, rgba(255, 51, 92, .18), transparent 70%); }
  [dir="ltr"] .hero::before { background: radial-gradient(45% 60% at 78% 50%, rgba(255, 51, 92, .18), transparent 70%); }
  .hero-media { order: 0; margin-inline: 0; }
  .hero-media img { max-width: 470px; margin-inline: auto; aspect-ratio: 1122 / 1402;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, #000 0, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, #000 0, #000 84%, transparent 100%);
    mask-composite: intersect; }
}

/* Page banner (per-page image from site.config.js images.pages) */
.page-banner { margin: 18px 0 6px; }
.page-banner img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 14px 40px rgba(0, 0, 0, .45); }

/* Site background (only when site.config.js images.bg is set: body gets class "has-bg").
   A fixed layer behind everything, darkened again on top of the already darkened image, and a dark reading panel
   behind the text so it stays readable over the chips and balls. Phones get a small, separate file. */
body.has-bg { background: #0e0e10; }
body.has-bg::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(10, 10, 12, .45), rgba(10, 10, 12, .7)), url("/assets/images/bg/bg-1000.webp") center / cover no-repeat; }
@media (min-width: 1100px) { body.has-bg::before { background-image: linear-gradient(rgba(10, 10, 12, .45), rgba(10, 10, 12, .7)), url("/assets/images/bg/bg-1600.webp"); } }
@media (max-width: 759px) { body.has-bg::before { background: linear-gradient(rgba(10, 10, 12, .6), rgba(10, 10, 12, .82)), url("/assets/images/bg/bg-m-600.webp") left center / cover no-repeat; } }
body.has-bg .page { background: rgba(16, 16, 19, .9); border-radius: 18px; padding-inline: clamp(16px, 3vw, 36px); margin-block: 16px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 20px 60px rgba(0, 0, 0, .5); }
body.has-bg .site-head { background: rgba(12, 12, 13, .92); backdrop-filter: blur(6px); }
body.has-bg .site-foot { background: rgba(12, 12, 13, .95); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }