/*
Theme Name: BingoShop Payments Control v3
Theme URI: https://bingoshop.store/
Author: BingoShop
Description: متجر BingoShop مع لوحة طرق دفع قابلة للإظهار والإخفاء وسجل اختيار طريقة الدفع لكل طلب.
Version: 1.2.0
Text Domain: bingoshop
*/

:root {
  --bingo-ink: #12233d;
  --bingo-muted: #6f7b8f;
  --bingo-blue: #2658e8;
  --bingo-blue-deep: #1639a7;
  --bingo-orange: #ff8a3d;
  --bingo-green: #2dbd86;
  --bingo-paper: #f7f9fc;
  --bingo-line: #e6eaf1;
  --bingo-white: #ffffff;
  --bingo-radius: 18px;
  --bingo-shadow: 0 16px 45px rgba(26, 54, 101, 0.09);
  --bingo-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bingo-paper);
  color: var(--bingo-ink);
  font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.bingo-wrap { width: min(1180px, calc(100% - 36px)); margin-inline: auto; }
.bingo-site { overflow: hidden; }

.bingo-preview-note {
  background: #fff8ef;
  border-bottom: 1px solid #ffe4c9;
  color: #89501e;
  font-size: 12px;
  text-align: center;
  padding: 8px 16px;
}

.bingo-header {
  position: sticky;
  z-index: 20;
  top: 0;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(230,234,241,.9);
  backdrop-filter: blur(16px);
}
.bingo-header-inner {
  width: min(1180px, calc(100% - 36px));
  min-height: 76px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.bingo-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 215px; }
.bingo-brand-text { font-family: Arial, sans-serif; font-weight: 800; letter-spacing: -.7px; font-size: 20px; line-height: 1; }
.bingo-brand-text strong { color: var(--bingo-blue); }
.bingo-brand-text small { display: block; margin-top: 5px; color: #9aa4b3; font-size: 8px; font-weight: 700; letter-spacing: 2px; }
.bingo-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; grid-template-columns: repeat(2, 9px); grid-template-rows: repeat(2, 9px); gap: 3px; place-content: center; position: relative; background: var(--bingo-blue); box-shadow: 4px 5px 0 var(--bingo-orange); }
.bingo-mark i { width: 9px; height: 9px; display: block; border-radius: 3px; background: #fff; }
.bingo-mark i:nth-child(2) { background: #a8c1ff; }
.bingo-mark i:nth-child(3) { background: #ffc29a; }
.bingo-mark i:nth-child(4) { background: #fff; }
.bingo-mark b { position: absolute; color: #fff; right: 4px; bottom: 3px; font: 900 12px Arial, sans-serif; transform: rotate(180deg); }
.bingo-mark.small { transform: scale(.83); transform-origin: right center; box-shadow: 3px 4px 0 var(--bingo-orange); }
.bingo-nav { display: flex; align-items: center; gap: 25px; color: #627086; font-size: 13px; font-weight: 700; }
.bingo-nav a { transition: color .18s ease; }
.bingo-nav a:hover { color: var(--bingo-blue); }
.bingo-header-actions { margin-right: auto; display: flex; align-items: center; gap: 12px; }
.bingo-header-account, .bingo-header-login { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 11px; border-radius: 9px; font-size: 11px; font-weight: 900; white-space: nowrap; }
.bingo-header-account { color: var(--bingo-blue); border: 1px solid #d8e2ff; background: #f4f7ff; }
.bingo-header-login { color: #fff; background: var(--bingo-orange); box-shadow: 0 7px 18px rgba(255,138,61,.18); }
.bingo-header-account:hover, .bingo-header-login:hover { transform: translateY(-1px); }
.bingo-header-cta, .bingo-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: var(--bingo-blue); color: #fff; border-radius: 10px; padding: 11px 17px; font-size: 12px; font-weight: 800; box-shadow: 0 9px 22px rgba(38,88,232,.2); transition: transform .18s var(--bingo-ease), background .18s ease; }
.bingo-header-cta:hover, .bingo-primary:hover { background: var(--bingo-blue-deep); transform: translateY(-2px); }
.bingo-menu-button { display: none; border: 1px solid var(--bingo-line); background: #fff; color: var(--bingo-ink); width: 40px; height: 40px; border-radius: 10px; }

.bingo-hero { background: linear-gradient(135deg, #eef4ff 0%, #f8fbff 58%, #fff4eb 100%); border-bottom: 1px solid #e9eef8; }
.bingo-hero-inner { width: min(1180px, calc(100% - 36px)); margin-inline: auto; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 60px; min-height: 470px; padding: 64px 0 58px; }
.bingo-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--bingo-blue); font-size: 11px; font-weight: 900; letter-spacing: 1.2px; }
.bingo-eyebrow span { width: 7px; height: 7px; display: inline-block; background: var(--bingo-orange); border-radius: 50%; }
.bingo-hero h1 { margin: 15px 0 13px; max-width: 600px; color: var(--bingo-ink); font-size: clamp(36px, 5vw, 61px); letter-spacing: -2.1px; line-height: 1.13; }
.bingo-hero h1 em { color: var(--bingo-blue); font-style: normal; }
.bingo-hero p { max-width: 535px; margin: 0; color: var(--bingo-muted); font-size: 16px; }
.bingo-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.bingo-hero-actions > span { display: inline-flex; align-items: center; gap: 6px; color: #768296; font-size: 11px; font-weight: 700; }
.bingo-proof { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: #516075; font-size: 12px; font-weight: 800; }
.bingo-proof span { display: inline-grid; place-items: center; width: 21px; height: 21px; margin-left: 5px; color: #fff; background: var(--bingo-green); border-radius: 50%; }
.bingo-hero-visual { position: relative; min-height: 330px; }
.bingo-dashboard { position: absolute; inset: 10px 0 auto auto; width: min(470px, 100%); min-height: 288px; padding: 22px; border: 1px solid rgba(255,255,255,.8); border-radius: 24px; background: rgba(255,255,255,.8); box-shadow: 0 24px 70px rgba(34,75,137,.16); transform: rotate(2deg); }
.bingo-dashboard-top { display: flex; align-items: center; justify-content: space-between; color: var(--bingo-muted); font-size: 10px; font-weight: 800; }
.bingo-dashboard-top strong { color: var(--bingo-blue); font: 900 17px Arial, sans-serif; }
.bingo-dashboard h2 { max-width: 260px; margin: 24px 0 20px; font-size: 27px; line-height: 1.2; letter-spacing: -.8px; }
.bingo-dashboard h2 b { color: var(--bingo-orange); }
.bingo-dashboard-row { display: flex; gap: 10px; }
.bingo-mini-card { flex: 1; min-height: 105px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid #e8edf5; }
.bingo-mini-icon { display: grid; place-items: center; width: 29px; height: 29px; margin-bottom: 11px; border-radius: 9px; color: #fff; font: 900 11px Arial, sans-serif; }
.bingo-mini-card:nth-child(1) .bingo-mini-icon { background: #e85667; }
.bingo-mini-card:nth-child(2) .bingo-mini-icon { background: #2bbd84; }
.bingo-mini-card:nth-child(3) .bingo-mini-icon { background: #4c78ed; }
.bingo-mini-card strong { display: block; font-size: 11px; }
.bingo-mini-card small { color: #8994a3; font-size: 9px; }
.bingo-float { position: absolute; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: 13px; color: #4c586c; background: #fff; box-shadow: 0 15px 30px rgba(34,75,137,.14); font-size: 10px; font-weight: 800; }
.bingo-float::before { content: ""; width: 8px; height: 8px; background: var(--bingo-green); border-radius: 50%; }
.bingo-float.one { top: 7px; left: 0; }
.bingo-float.two { right: -6px; bottom: 12px; }

.bingo-benefits { background: #fff; border-bottom: 1px solid var(--bingo-line); }
.bingo-benefits-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.bingo-benefit { display: flex; align-items: center; gap: 11px; min-height: 84px; padding: 16px 20px; border-left: 1px solid var(--bingo-line); }
.bingo-benefit:last-child { border-left: 0; }
.bingo-benefit-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: var(--bingo-blue); background: #edf2ff; border-radius: 10px; font-size: 16px; }
.bingo-benefit strong { display: block; font-size: 12px; }
.bingo-benefit small { display: block; color: #8a95a5; font-size: 10px; }

.bingo-catalog { padding: 76px 0 90px; }
.bingo-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.bingo-section-kicker { display: block; margin-bottom: 5px; color: var(--bingo-orange); font: 900 10px Arial, sans-serif; letter-spacing: 1.5px; }
.bingo-section-head h2 { margin: 0; font-size: 32px; letter-spacing: -1px; }
.bingo-section-head p { max-width: 380px; margin: 0; color: var(--bingo-muted); font-size: 12px; }
.bingo-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 27px; }
.bingo-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.bingo-cat { border: 1px solid var(--bingo-line); color: #738096; background: #fff; border-radius: 9px; padding: 9px 13px; font-size: 11px; font-weight: 800; transition: color .18s ease, background .18s ease, border-color .18s ease; }
.bingo-cat:hover, .bingo-cat.is-active { border-color: var(--bingo-blue); color: #fff; background: var(--bingo-blue); }
.bingo-search { display: flex; align-items: center; gap: 8px; min-width: 230px; padding: 9px 12px; color: #94a0b0; border: 1px solid var(--bingo-line); border-radius: 9px; background: #fff; }
.bingo-search input { width: 100%; border: 0; outline: 0; color: var(--bingo-ink); background: transparent; font-size: 12px; }
.bingo-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bingo-product { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--bingo-line); border-radius: var(--bingo-radius); background: #fff; box-shadow: 0 5px 20px rgba(26,54,101,.03); transition: transform .22s var(--bingo-ease), box-shadow .22s ease, border-color .22s ease; }
.bingo-product:hover { border-color: #cad7f8; box-shadow: var(--bingo-shadow); transform: translateY(-5px); }
.bingo-product-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; min-height: 148px; padding: 18px; color: #fff; }
.bingo-product-head::after { content: ""; position: absolute; inset: auto -20px -45px auto; width: 135px; height: 135px; border: 18px solid rgba(255,255,255,.14); border-radius: 50%; }
.bingo-product[data-tone="coral"] .bingo-product-head { background: linear-gradient(135deg, #eb6374, #b93252); }
.bingo-product[data-tone="blue"] .bingo-product-head { background: linear-gradient(135deg, #4e7af2, #2745b8); }
.bingo-product[data-tone="green"] .bingo-product-head { background: linear-gradient(135deg, #38c48a, #168a74); }
.bingo-product[data-tone="dark"] .bingo-product-head { background: linear-gradient(135deg, #263957, #101a2e); }
.bingo-product[data-tone="purple"] .bingo-product-head { background: linear-gradient(135deg, #8c74ee, #5640b9); }
.bingo-product[data-tone="orange"] .bingo-product-head { background: linear-gradient(135deg, #ffad56, #e46b2e); }
.bingo-product[data-tone="teal"] .bingo-product-head { background: linear-gradient(135deg, #28b6b2, #087f99); }
.bingo-product[data-tone="cyan"] .bingo-product-head { background: linear-gradient(135deg, #48b6e6, #2672c9); }
.bingo-product-label { position: absolute; top: 15px; left: 15px; padding: 4px 7px; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; background: rgba(0,0,0,.13); font-size: 9px; font-weight: 800; }
.bingo-product-image { position: relative; z-index: 1; display: block; width: 78px; height: 78px; padding: 0; border-radius: 19px; object-fit: contain; background: #fff; box-shadow: 0 8px 17px rgba(0,0,0,.12); }
.bingo-product-title { position: relative; z-index: 1; display: block; max-width: 62%; margin: 0; font: 900 17px/1.12 Arial, sans-serif; letter-spacing: .1px; text-wrap: balance; }
.bingo-product-body { display: flex; flex: 1; flex-direction: column; padding: 17px; }
.bingo-product-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #7c8798; font-size: 10px; }
.bingo-product-meta span:first-child { color: var(--bingo-blue); font-weight: 800; }
.bingo-product-body h3 { margin: 11px 0 5px; font-size: 17px; letter-spacing: -.3px; }
.bingo-product-body p { min-height: 47px; margin: 0; color: #7c8798; font-size: 11px; line-height: 1.75; }
.bingo-duration-picker { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; color: #7c8798; font-size: 9px; font-weight: 800; }
.bingo-duration-select { min-width: 0; padding: 7px 8px; border: 1px solid #dce3ef; border-radius: 8px; outline: 0; color: var(--bingo-ink); background: #fff; font-size: 10px; font-weight: 800; }
.bingo-duration-select:focus { border-color: #7e9df4; box-shadow: 0 0 0 3px rgba(38,88,232,.1); }
.bingo-product-bottom { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-top: 16px; padding-top: 13px; border-top: 1px dashed #e3e7ef; }
.bingo-price small { display: block; color: #9ba5b3; font-size: 9px; }
.bingo-price strong { display: block; color: var(--bingo-ink); font: 900 21px Arial, sans-serif; }
.bingo-price strong i { color: var(--bingo-blue); font-size: 10px; font-style: normal; }
.bingo-stock { display: inline-flex; align-items: center; gap: 5px; color: #2a9c71; font-size: 9px; font-weight: 800; text-align: left; }
.bingo-stock::before { content: ""; width: 7px; height: 7px; background: var(--bingo-green); border-radius: 50%; }
.bingo-order-btn { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; color: #fff; background: var(--bingo-blue); font-size: 11px; font-weight: 900; transition: transform .18s var(--bingo-ease), background .18s ease; }
.bingo-order-btn:hover { background: var(--bingo-blue-deep); transform: translateY(-2px); }
.bingo-empty { display: none; padding: 45px; color: var(--bingo-muted); border: 1px dashed #ccd5e4; border-radius: 16px; background: #fff; text-align: center; }

.bingo-process { padding: 82px 0; color: #fff; background: var(--bingo-ink); }
.bingo-process-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 80px; }
.bingo-process h2 { max-width: 440px; margin: 10px 0 14px; font-size: 37px; letter-spacing: -1px; line-height: 1.2; }
.bingo-process p { max-width: 430px; color: #b7c1d1; font-size: 13px; }
.bingo-process .bingo-section-kicker { color: #ffad72; }
.bingo-board { position: relative; min-height: 265px; padding: 24px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: linear-gradient(145deg, #1d3762, #152846); box-shadow: 0 25px 60px rgba(0,0,0,.2); }
.bingo-board::before { content: "BINGO / DIGITAL ORDER"; color: #a8c1ff; font: 900 10px Arial, sans-serif; letter-spacing: 1.8px; }
.bingo-board strong { display: block; margin-top: 28px; font: 900 68px Arial, sans-serif; letter-spacing: -5px; }
.bingo-board strong span { color: var(--bingo-orange); font-size: 20px; letter-spacing: 0; }
.bingo-board-line { width: 100%; height: 1px; margin: 20px 0 17px; background: rgba(255,255,255,.17); }
.bingo-board-steps { display: flex; justify-content: space-between; gap: 10px; color: #fff; font-size: 11px; font-weight: 800; }
.bingo-step-list { display: grid; gap: 17px; margin-top: 26px; }
.bingo-step { display: flex; align-items: flex-start; gap: 14px; }
.bingo-step > b { display: grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; border-radius: 50%; color: var(--bingo-ink); background: var(--bingo-orange); font: 900 12px Arial, sans-serif; }
.bingo-step strong { display: block; font-size: 14px; }
.bingo-step span { display: block; margin-top: 2px; color: #b7c1d1; font-size: 11px; }

.bingo-faq { padding: 78px 0 85px; }
.bingo-faq-grid { display: grid; grid-template-columns: .76fr 1.24fr; gap: 72px; }
.bingo-faq h2 { margin: 8px 0 13px; font-size: 35px; line-height: 1.2; }
.bingo-faq-intro { color: var(--bingo-muted); font-size: 13px; }
.bingo-faq-list { display: grid; gap: 10px; }
.bingo-faq-item { border: 1px solid var(--bingo-line); border-radius: 12px; background: #fff; }
.bingo-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 19px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 900; }
.bingo-faq-item summary::-webkit-details-marker { display: none; }
.bingo-faq-item summary::after { content: "+"; color: var(--bingo-blue); font: 900 20px Arial, sans-serif; }
.bingo-faq-item[open] summary::after { content: "–"; }
.bingo-faq-item p { margin: -3px 19px 17px; color: var(--bingo-muted); font-size: 11px; }

.bingo-footer { padding: 28px 0; color: #9ba8ba; border-top: 1px solid #263a57; background: var(--bingo-ink); }
.bingo-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.bingo-footer-brand { display: inline-flex; align-items: center; gap: 6px; color: #fff; font: 800 16px Arial, sans-serif; }
.bingo-footer p { margin: 0; font-size: 11px; }
.bingo-footer small { color: #657891; font: 900 9px Arial, sans-serif; letter-spacing: 1.4px; }

.bingo-modal { position: fixed; z-index: 100; inset: 0; display: none; align-items: center; justify-content: center; padding: 18px; }
.bingo-modal.is-open { display: flex; }
.bingo-modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(13,28,51,.58); backdrop-filter: blur(4px); }
.bingo-modal-card { position: relative; width: min(490px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 24px; border-radius: 20px; background: #fff; box-shadow: 0 25px 90px rgba(10,29,63,.3); animation: bingo-pop .24s var(--bingo-ease); }
@keyframes bingo-pop { from { opacity: 0; transform: translateY(15px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.bingo-modal-top { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.bingo-modal-top span { color: var(--bingo-orange); font: 900 10px Arial, sans-serif; letter-spacing: 1.4px; }
.bingo-modal-top h2 { margin: 5px 0 0; font-size: 25px; }
.bingo-close { display: grid; place-items: center; width: 33px; height: 33px; border: 0; border-radius: 9px; color: #738096; background: #f1f4f8; font-size: 20px; }
.bingo-selected { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 20px 0; padding: 14px; border-radius: 12px; background: #f3f6ff; }
.bingo-selected-image { flex: 0 0 52px; width: 52px; height: 52px; padding: 0; border-radius: 14px; object-fit: contain; background: #fff; box-shadow: 0 6px 15px rgba(18,35,61,.1); }
.bingo-selected strong { display: block; font-size: 13px; }
.bingo-selected small { display: block; color: #7d8a9f; font-size: 10px; }
.bingo-selected-price { color: var(--bingo-blue); font: 900 18px Arial, sans-serif; white-space: nowrap; }
.bingo-modal-duration { display: grid; gap: 6px; margin-bottom: 14px; color: #536177; font-size: 11px; font-weight: 800; }
.bingo-modal-duration select { width: 100%; padding: 11px 12px; border: 1px solid #dce2ec; border-radius: 9px; color: var(--bingo-ink); background: #fff; font-size: 12px; font-weight: 800; }
.bingo-duration-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; direction: rtl; }
.bingo-duration-option { min-width: 0; padding: 9px 5px; border: 1px solid #dce2ec; border-radius: 9px; color: #5d6b80; background: #fff; font-size: 11px; font-weight: 800; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
.bingo-duration-option:hover { border-color: #8ba6f4; color: var(--bingo-blue); }
.bingo-duration-option.is-active { border-color: var(--bingo-blue); color: #fff; background: var(--bingo-blue); box-shadow: 0 6px 14px rgba(38,88,232,.18); }
.bingo-duration-option:active { transform: scale(.97); }
.bingo-form { display: grid; gap: 13px; }
.bingo-form label { display: grid; gap: 5px; color: #536177; font-size: 11px; font-weight: 800; }
.bingo-contact-field { display: grid; gap: 5px; }
.bingo-field-label { color: #536177; font-size: 11px; font-weight: 800; }
.bingo-payment-field { display: grid; gap: 5px; }
.bingo-payment-help { margin: -4px 0 1px; padding: 9px 11px; border: 1px solid #cddafa; border-radius: 9px; color: #35508c; background: #f3f7ff; font-size: 10px; line-height: 1.7; }
.bingo-contact-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; direction: rtl; }
.bingo-contact-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 68px; padding: 7px 4px; border: 1px solid; border-radius: 9px; font-size: 9px; line-height: 1.25; font-weight: 800; text-align: center; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.bingo-contact-link img { display: block; width: 24px; height: 24px; object-fit: contain; }
.bingo-contact-link.whatsapp { color: #08763a; border-color: #b6ebc8; background: #eafff1; }
.bingo-contact-link.telegram { color: #0878a8; border-color: #b8e3f5; background: #eaf8ff; }
.bingo-contact-link.facebook { color: #1457b8; border-color: #bfd3f8; background: #eef4ff; }
.bingo-contact-link:hover { filter: brightness(.97); box-shadow: 0 5px 12px rgba(20,55,90,.12); }
.bingo-contact-link:active { transform: scale(.98); }
.bingo-form input, .bingo-form select, .bingo-form textarea { width: 100%; padding: 11px 12px; border: 1px solid #dce2ec; outline: 0; border-radius: 9px; color: var(--bingo-ink); background: #fff; font-size: 12px; transition: border-color .18s ease, box-shadow .18s ease; }
.bingo-form input:focus, .bingo-form select:focus, .bingo-form textarea:focus { border-color: #7e9df4; box-shadow: 0 0 0 3px rgba(38,88,232,.1); }
.bingo-form textarea { min-height: 88px; resize: vertical; }
.bingo-form .bingo-primary { width: 100%; margin-top: 4px; }
.bingo-form-note { color: #8792a1; font-size: 10px; text-align: center; }
.bingo-alert { width: min(1180px, calc(100% - 36px)); margin: 16px auto -30px; padding: 11px 15px; color: #146443; border: 1px solid #b9efd6; border-radius: 10px; background: #eafff4; font-size: 12px; font-weight: 800; text-align: center; }

@media (max-width: 1020px) {
  .bingo-products { grid-template-columns: repeat(3, 1fr); }
  .bingo-hero-inner { gap: 32px; }
  .bingo-process-grid { gap: 40px; }
}
@media (max-width: 760px) {
  .bingo-wrap, .bingo-header-inner, .bingo-hero-inner { width: min(100% - 28px, 620px); }
  .bingo-header-inner { min-height: 66px; gap: 12px; }
  .bingo-brand { min-width: 0; }
  .bingo-brand-text { font-size: 18px; }
  .bingo-brand-text small { display: none; }
  .bingo-nav { position: absolute; display: none; top: 65px; right: 14px; left: 14px; padding: 9px; border: 1px solid var(--bingo-line); border-radius: 13px; background: #fff; box-shadow: var(--bingo-shadow); }
  .bingo-nav.is-open { display: grid; }
  .bingo-nav a { display: block; min-height: 0; padding: 7px 11px; line-height: 1.35; }
  .bingo-header-account, .bingo-header-login { min-height: 34px; padding: 0 8px; font-size: 9px; }
  .bingo-header-cta { padding: 9px 11px; font-size: 10px; }
  .bingo-menu-button { display: grid; place-items: center; }
  .bingo-hero-inner { display: block; padding: 48px 0 37px; }
  .bingo-hero h1 { font-size: 42px; letter-spacing: -1.5px; }
  .bingo-hero p { font-size: 14px; }
  .bingo-hero-visual { min-height: 285px; margin-top: 30px; }
  .bingo-dashboard { right: 0; left: 0; width: 100%; transform: rotate(0); }
  .bingo-float.one { left: -4px; }
  .bingo-float.two { right: -4px; }
  .bingo-benefits-inner { grid-template-columns: repeat(2, 1fr); }
  .bingo-benefit:nth-child(2) { border-left: 0; }
  .bingo-benefit:nth-child(-n+2) { border-bottom: 1px solid var(--bingo-line); }
  .bingo-catalog, .bingo-faq { padding: 55px 0 62px; }
  .bingo-section-head, .bingo-controls { display: block; }
  .bingo-section-head h2 { font-size: 28px; }
  .bingo-section-head p { margin-top: 10px; }
  .bingo-search { margin-top: 14px; }
  .bingo-products { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .bingo-product-head { min-height: 128px; padding: 13px; }
  .bingo-product-image { width: 62px; height: 62px; padding: 0; border-radius: 15px; }
  .bingo-product-title { font-size: 15px; }
  .bingo-product-label { top: 11px; left: 11px; font-size: 8px; }
  .bingo-product-body { padding: 13px; }
  .bingo-product-body h3 { font-size: 15px; }
  .bingo-product-body p { min-height: 62px; font-size: 10px; }
  .bingo-product-bottom { display: block; }
  .bingo-stock { margin-top: 7px; }
  .bingo-process { padding: 60px 0; }
  .bingo-process-grid, .bingo-faq-grid { grid-template-columns: 1fr; gap: 35px; }
  .bingo-process h2, .bingo-faq h2 { font-size: 29px; }
  .bingo-footer-inner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 440px) {
  .bingo-header-cta { display: none; }
  .bingo-header-account, .bingo-header-login { min-height: 30px; padding: 0 6px; font-size: 8px; }
  .bingo-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bingo-product { min-height: 0; aspect-ratio: 1 / 1; border-radius: 14px; }
  .bingo-product-head { min-height: 102px; padding: 9px; }
  .bingo-product-image { width: 52px; height: 52px; padding: 0; border-radius: 12px; }
  .bingo-product-label { top: 8px; left: 8px; padding: 3px 5px; font-size: 7px; }
  .bingo-product-title { max-width: 58%; font-size: 12px; }
  .bingo-product-body { min-height: 0; padding: 8px; overflow: hidden; }
  .bingo-product-meta { font-size: 8px; }
  .bingo-product-body h3 { margin: 5px 0 4px; font-size: 12px; line-height: 1.25; }
  .bingo-product-body p { display: none; }
  .bingo-duration-picker { margin-top: 5px; font-size: 7px; }
  .bingo-duration-select { max-width: 88px; padding: 5px 5px; font-size: 8px; }
  .bingo-product-bottom { margin-top: 7px; padding-top: 6px; }
  .bingo-price small { font-size: 7px; }
  .bingo-price strong { font-size: 14px; }
  .bingo-price strong i { font-size: 8px; }
  .bingo-stock { display: none; }
  .bingo-order-btn { margin-top: 7px; padding: 7px 4px; border-radius: 8px; font-size: 8px; }
  .bingo-selected-image { flex: 0 0 42px; width: 42px; height: 42px; padding: 0; }
  .bingo-hero h1 { font-size: 37px; }
}
/* BingoShop mobile hero compression: use the first viewport for the offer, not empty air. */
@media (max-width: 760px) {
  .bingo-hero-inner { min-height: 0; padding: 28px 0 22px; }
  .bingo-hero-copy { text-align: center; }
  .bingo-eyebrow { justify-content: center; font-size: 9px; }
  .bingo-hero h1 { margin: 8px auto 10px; font-size: 35px; }
  .bingo-hero p { max-width: none; font-size: 12px; line-height: 1.7; }
  .bingo-hero-actions { justify-content: center; gap: 10px; margin-top: 16px; }
  .bingo-hero-actions > span { font-size: 9px; }
  .bingo-proof { justify-content: center; gap: 8px 12px; margin-top: 16px; font-size: 10px; }
  .bingo-proof span { width: 18px; height: 18px; }
  .bingo-hero-visual { min-height: 205px; margin-top: 16px; }
  .bingo-dashboard { top: 0; min-height: 0; padding: 16px; border-radius: 18px; }
  .bingo-dashboard h2 { margin: 12px 0 13px; font-size: 24px; }
  .bingo-mini-card { min-height: 78px; padding: 9px; }
  .bingo-mini-icon { width: 24px; height: 24px; margin-bottom: 7px; }
  .bingo-float { padding: 7px 9px; font-size: 8px; }
  .bingo-float.one { top: -6px; left: -4px; }
  .bingo-float.two { right: -4px; bottom: -7px; }
  .bingo-benefit { min-height: 60px; padding: 11px 10px; gap: 7px; }
  .bingo-benefit strong { font-size: 10px; }
  .bingo-benefit small { font-size: 8px; }
}
@media (max-width: 440px) {
  .bingo-hero-inner { padding: 22px 0 16px; }
  .bingo-hero h1 { font-size: 31px; letter-spacing: -1px; }
  .bingo-hero p { font-size: 11px; }
  .bingo-hero-visual { min-height: 172px; margin-top: 12px; }
  .bingo-dashboard { padding: 12px; }
  .bingo-dashboard h2 { margin: 8px 0 9px; font-size: 20px; }
  .bingo-mini-card { min-height: 63px; padding: 7px; }
  .bingo-mini-icon { width: 21px; height: 21px; margin-bottom: 5px; }
  .bingo-mini-card strong { font-size: 9px; }
  .bingo-mini-card small { font-size: 7px; }
  .bingo-float { display: none; }
}
/* BingoShop mobile placeholder: reserve a small clean slot for future content. */
@media (max-width: 760px) {
  .bingo-hero-visual { min-height: 28px; height: 28px; margin-top: 12px; }
  .bingo-dashboard, .bingo-hero-visual .bingo-float { display: none; }
}
@media (max-width: 440px) {
  .bingo-hero-visual { min-height: 20px; height: 20px; margin-top: 8px; }
}
/* BingoShop mobile header fix: keep the opened menu as short as its three links. */
@media (max-width: 760px) {
  .bingo-nav.is-open { display: grid; height: auto !important; min-height: 0 !important; max-height: 132px !important; align-content: start !important; grid-auto-rows: max-content; row-gap: 2px; }
}
/* BingoShop mobile header cleanup: remove only the opened menu block shown in the report. */
@media (max-width: 760px) {
  .bingo-nav, .bingo-nav.is-open, .bingo-menu-button { display: none !important; }
}
/* BingoShop mobile bottom navigation: six quick destinations, phone only, kept on one row with larger touch targets. */
body { padding-bottom: 74px; }
.bingo-catalog { padding: 24px 0 90px; }
.bingo-bottom-nav { position: fixed; z-index: 90; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 8px 4px; border-top: 1px solid rgba(218,225,237,.95); background: rgba(255,255,255,.96); box-shadow: 0 -10px 28px rgba(18,35,61,.1); backdrop-filter: blur(14px); direction: rtl; }
.bingo-bottom-item { display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 2px 1px; border: 0; color: #7b8798; background: transparent; font-size: 9px; font-weight: 800; line-height: 1.2; }
.bingo-bottom-icon { display: grid; place-items: center; width: 32px; height: 32px; padding: 3px; box-sizing: border-box; border-radius: 10px; color: var(--bingo-blue); background: #edf2ff; font: 900 18px/1 Arial, sans-serif; }
.bingo-bottom-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bingo-bottom-item:first-child .bingo-bottom-icon { color: var(--bingo-blue); background: #edf2ff; }
.bingo-bottom-toast { position: fixed; z-index: 140; right: 18px; bottom: 82px; left: 18px; padding: 12px 14px; border-radius: 12px; color: #fff; background: #12233d; box-shadow: 0 14px 30px rgba(18,35,61,.24); font-size: 11px; font-weight: 800; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.bingo-bottom-toast.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 760px), (pointer: coarse) {
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .bingo-bottom-nav { position: fixed; z-index: 90; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(218,225,237,.95); background: rgba(255,255,255,.96); box-shadow: 0 -10px 28px rgba(18,35,61,.1); backdrop-filter: blur(14px); direction: rtl; }
  .bingo-bottom-item { display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 2px 1px; border: 0; color: #7b8798; background: transparent; font-size: 9px; font-weight: 800; line-height: 1.2; }
  .bingo-bottom-icon { display: grid; place-items: center; width: 32px; height: 32px; padding: 3px; box-sizing: border-box; border-radius: 10px; color: var(--bingo-blue); background: #edf2ff; font: 900 18px/1 Arial, sans-serif; }
  .bingo-bottom-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .bingo-bottom-item:first-child .bingo-bottom-icon { color: var(--bingo-blue); background: #edf2ff; }
  .bingo-bottom-item:active .bingo-bottom-icon { transform: scale(.94); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* BingoShop Checkout: a dedicated, calm purchase page replacing the cramped modal. */
.bingo-checkout-page { min-height: calc(100vh - 110px); padding: 28px 0 90px; background: linear-gradient(180deg, #f5f8ff 0%, #fff 42%); }
.bingo-checkout-back { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 16px; color: var(--bingo-blue); font-size: 12px; font-weight: 900; }
.bingo-checkout-shell { width: min(760px, 100%); margin: 0 auto; padding: clamp(20px, 4vw, 38px); border: 1px solid var(--bingo-line); border-radius: 24px; background: rgba(255,255,255,.96); box-shadow: var(--bingo-shadow); }
.bingo-checkout-heading { margin-bottom: 22px; }
.bingo-checkout-kicker { color: var(--bingo-orange); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.bingo-checkout-heading h1 { margin: 6px 0 4px; color: var(--bingo-ink); font-size: clamp(26px, 5vw, 38px); line-height: 1.15; }
.bingo-checkout-heading p, .bingo-checkout-section-title p { margin: 0; color: var(--bingo-muted); font-size: 12px; line-height: 1.8; }
.bingo-checkout-product { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 14px; margin-bottom: 26px; padding: 14px; border-radius: 17px; background: #f2f6ff; }
.bingo-checkout-product-image { display: grid; place-items: center; width: 74px; height: 74px; overflow: hidden; border-radius: 14px; background: #fff; }
.bingo-checkout-product-image img { width: 100%; height: 100%; object-fit: contain; }
.bingo-checkout-product-copy > span { color: var(--bingo-blue); font-size: 10px; font-weight: 900; }
.bingo-checkout-product-copy h2 { margin: 3px 0; color: var(--bingo-ink); font-size: 20px; }
.bingo-checkout-product-copy p { margin: 0; color: var(--bingo-muted); font-size: 11px; }
.bingo-checkout-price { text-align: left; }
.bingo-checkout-price small { display: block; color: var(--bingo-muted); font-size: 10px; }
.bingo-checkout-price strong { display: block; color: var(--bingo-blue); font-size: 21px; white-space: nowrap; }
.bingo-checkout-price i { font-size: 11px; font-style: normal; }
.bingo-checkout-section { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--bingo-line); }
.bingo-checkout-section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bingo-checkout-section-title > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #fff; background: var(--bingo-blue); font-size: 11px; font-weight: 900; }
.bingo-checkout-section-title h2 { margin: 0 0 2px; color: var(--bingo-ink); font-size: 16px; }
.bingo-checkout-duration-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.bingo-checkout-duration { display: grid; gap: 4px; padding: 12px 8px; border: 1px solid #d8e0ef; border-radius: 12px; color: var(--bingo-ink); background: #fff; text-align: center; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.bingo-checkout-duration strong { color: var(--bingo-blue); font-size: 12px; }
.bingo-checkout-duration span { font-size: 11px; font-weight: 900; }
.bingo-checkout-duration.is-active { border-color: var(--bingo-blue); background: #edf3ff; box-shadow: 0 6px 14px rgba(38,88,232,.12); }
.bingo-checkout-duration:active { transform: scale(.98); }
.bingo-checkout-form label { display: grid; gap: 7px; color: var(--bingo-ink); font-size: 12px; font-weight: 900; }
.bingo-checkout-form input { margin-bottom: 12px; }
.bingo-checkout-form .bingo-primary { width: 100%; min-height: 48px; }
.bingo-checkout-empty { padding: 26px; border-radius: 15px; color: var(--bingo-ink); background: #f5f8ff; text-align: center; }
.bingo-checkout-empty p { margin: 7px 0 18px; color: var(--bingo-muted); font-size: 12px; }
.bingo-alert.error { color: #9b3f35; border-color: #ffd0ca; background: #fff1ef; }
@media (max-width: 560px) {
  .bingo-checkout-page { padding-top: 18px; }
  .bingo-checkout-shell { padding: 18px 14px 24px; border-radius: 19px; }
  .bingo-checkout-product { grid-template-columns: 58px 1fr; gap: 10px; }
  .bingo-checkout-product-image { width: 58px; height: 58px; }
  .bingo-checkout-price { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; padding-top: 8px; border-top: 1px solid #dbe4f4; text-align: right; }
  .bingo-checkout-price small { display: inline; margin-left: 7px; }
  .bingo-checkout-duration-grid { gap: 6px; }
  .bingo-checkout-duration { padding: 10px 3px; }
}
/* BingoShop account page: Arabic account access, blue trust surface, orange action, no external dependency. */
.bingo-account-page { min-height: calc(100vh - 120px); padding: 44px 0 86px; background: radial-gradient(circle at 85% 0%, rgba(38,88,232,.08), transparent 34%), var(--bingo-paper); }
.bingo-account-shell { width: min(920px, 100%); margin: 0 auto; padding: clamp(22px, 4vw, 44px); border: 1px solid var(--bingo-line); border-radius: 26px; background: rgba(255,255,255,.94); box-shadow: var(--bingo-shadow); }
.bingo-account-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.bingo-account-mark { display: inline-flex; align-items: center; gap: 9px; color: var(--bingo-ink); font-size: 20px; letter-spacing: -.04em; }
.bingo-account-mark b { color: var(--bingo-blue); }
.bingo-account-mark-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; background: linear-gradient(145deg, var(--bingo-blue), var(--bingo-orange)); font-size: 18px; }
.bingo-account-kicker { display: inline-block; color: var(--bingo-blue); font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.bingo-account-intro { max-width: 680px; margin-bottom: 28px; }
.bingo-account-intro h1, .bingo-account-welcome h1 { margin: 7px 0 8px; color: var(--bingo-ink); font-size: clamp(28px, 5vw, 48px); line-height: 1.15; letter-spacing: -.05em; }
.bingo-account-intro h1 b { color: var(--bingo-blue); }
.bingo-account-intro p, .bingo-account-welcome p { margin: 0; color: var(--bingo-muted); font-size: 14px; }
.bingo-account-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bingo-account-panel { padding: 22px; border: 1px solid var(--bingo-line); border-radius: 18px; background: #fff; }
.bingo-account-panel-title { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.bingo-account-panel-title h2 { margin: 0 0 3px; font-size: 20px; }
.bingo-account-panel-title p { margin: 0; color: var(--bingo-muted); font-size: 11px; }
.bingo-account-panel-icon { display: grid; flex: 0 0 auto; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #fff; background: var(--bingo-blue); font: 900 20px/1 Arial, sans-serif; }
.bingo-account-panel-icon.orange { background: var(--bingo-orange); }
.bingo-account-form { display: grid; gap: 8px; }
.bingo-account-form label { color: var(--bingo-ink); font-size: 11px; font-weight: 800; }
.bingo-account-form input:not([type="checkbox"]) { width: 100%; min-height: 44px; margin-bottom: 5px; padding: 8px 12px; border: 1px solid var(--bingo-line); border-radius: 10px; color: var(--bingo-ink); background: #fbfcff; outline: none; }
.bingo-account-form input:not([type="checkbox"]):focus { border-color: var(--bingo-blue); box-shadow: 0 0 0 3px rgba(38,88,232,.12); }
.bingo-account-form button { width: 100%; min-height: 44px; margin-top: 8px; border: 0; border-radius: 11px; font-weight: 900; }
.bingo-account-check { display: flex; align-items: center; gap: 7px; margin: 3px 0; color: var(--bingo-muted) !important; font-size: 10px !important; font-weight: 700 !important; }
.bingo-account-check input { accent-color: var(--bingo-blue); }
.bingo-account-panels[data-account-mode="login"], .bingo-account-panels[data-account-mode="register"] { grid-template-columns: minmax(0, 560px); justify-content: center; }
.bingo-account-panel[hidden] { display: none; }
.bingo-account-switch { margin: 17px 0 0; color: var(--bingo-muted); font-size: 11px; text-align: center; }
.bingo-account-switch-button { padding: 0; border: 0; color: var(--bingo-blue); background: transparent; font: inherit; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bingo-account-switch-button:hover { color: var(--bingo-orange); }
.bingo-account-message { margin: 0 0 22px; padding: 12px 14px; border-radius: 11px; font-size: 12px; font-weight: 800; }
.bingo-account-message.success { color: #146b4c; background: #eaf9f1; border: 1px solid #bdebd3; }
.bingo-account-message.error { color: #9b3f35; background: #fff1ef; border: 1px solid #ffd0ca; }
.bingo-account-note { margin: 20px 0 0; color: var(--bingo-muted); font-size: 11px; text-align: center; }
.bingo-account-welcome { display: flex; align-items: center; gap: 18px; padding: 24px; border-radius: 18px; background: #f5f8ff; }
.bingo-account-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 58px; height: 58px; border-radius: 18px; color: #fff; background: var(--bingo-blue); font-size: 25px; font-weight: 900; }
.bingo-account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.bingo-account-actions .bingo-primary, .bingo-account-actions .bingo-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 11px; font-size: 12px; font-weight: 900; }
.bingo-account-actions .bingo-secondary { color: var(--bingo-ink); border: 1px solid var(--bingo-line); background: #fff; }
.bingo-account-records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.bingo-account-record-section { min-width: 0; padding: 18px; border: 1px solid var(--bingo-line); border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(18,35,61,.05); }
.bingo-account-order-section { grid-column: 1 / -1; }
.bingo-order-count { background: var(--bingo-orange); }
.bingo-order-record { position: relative; display: grid; gap: 9px; padding: 13px; border: 1px solid #e7edf6; border-radius: 13px; background: #fbfcff; }
.bingo-order-record-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-left: 88px; }
.bingo-order-record-top > .bingo-account-status { position: absolute; top: 13px; left: 13px; }
.bingo-order-record-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bingo-order-ref-label { display: block; color: var(--bingo-muted); font-size: 9px; font-weight: 800; }
.bingo-order-ref { display: block; margin-top: 1px; color: var(--bingo-orange); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; letter-spacing: .02em; }
.bingo-order-record-main { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px dashed #dfe6f2; border-bottom: 1px dashed #dfe6f2; }
.bingo-order-record-main strong { color: var(--bingo-ink); font-size: 13px; }
.bingo-order-record-main span, .bingo-order-record-foot { color: var(--bingo-muted); font-size: 10px; }
.bingo-order-record-foot time { direction: ltr; font-size: 9px; }
.bingo-account-status.status-order-waiting { color: #8a5b00; background: #fff5d8; }
.bingo-account-status.status-order-active { color: #146b4c; background: #e7f8ef; }
.bingo-account-status.status-order-cancelled { color: #8d3d3d; background: #fff0ef; }
.bingo-account-status.status-order-expired { color: #8d3d3d; background: #fff0ef; }
.bingo-account-record-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.bingo-account-record-heading h2 { margin: 4px 0 0; color: var(--bingo-ink); font-size: 19px; }
.bingo-account-record-count { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 99px; color: #fff; background: var(--bingo-blue); font-size: 12px; font-weight: 900; }
.bingo-account-empty { padding: 18px 14px; border: 1px dashed #cdd7e7; border-radius: 13px; color: var(--bingo-muted); background: #fbfcff; }
.bingo-account-empty strong { display: block; color: var(--bingo-ink); font-size: 13px; }
.bingo-account-empty p { margin: 6px 0 0; font-size: 11px; line-height: 1.7; }
.bingo-account-record-grid { display: grid; gap: 10px; }
.bingo-account-record { display: grid; gap: 7px; padding: 13px; border: 1px solid #e7edf6; border-radius: 13px; background: #fbfcff; }
.bingo-account-record-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bingo-account-record-top strong { color: var(--bingo-ink); font-size: 14px; }
.bingo-account-record p { margin: 0; color: var(--bingo-muted); font-size: 11px; }
.bingo-account-status { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border-radius: 99px; font-size: 10px; font-weight: 900; white-space: nowrap; }
.bingo-account-status.status-active { color: #146b4c; background: #e7f8ef; }
.bingo-account-status.status-pending { color: #8a5b00; background: #fff5d8; }
.bingo-account-status.status-used, .bingo-account-status.status-expired { color: #8d3d3d; background: #fff0ef; }
.bingo-account-credentials { display: grid; gap: 5px; padding: 9px; border-radius: 10px; background: #eef4ff; }
.bingo-account-credentials span, .bingo-account-expiry, .bingo-account-record-note { color: var(--bingo-muted); font-size: 10px; }
.bingo-account-credentials code, .bingo-account-code-row code { direction: ltr; color: var(--bingo-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; overflow-wrap: anywhere; }
.bingo-account-code-row { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px dashed #b9c8df; border-radius: 10px; background: #fff; }
.bingo-account-code-row code { flex: 1; font-weight: 900; }
.bingo-copy-code { min-height: 29px; padding: 0 10px; border: 0; border-radius: 8px; color: #fff; background: var(--bingo-orange); font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
.bingo-copy-code.is-copied { background: #16865c; }
.orange-button { background: var(--bingo-orange) !important; }
/* BingoShop Recharge page: phone top-ups, Flexy, cards and data bundles in the same RTL trust/action system. */
.bingo-recharge-page { min-height: calc(100vh - 120px); padding: 44px 0 86px; background: radial-gradient(circle at 85% 0%, rgba(247,145,32,.1), transparent 34%), var(--bingo-paper); }
.bingo-recharge-shell { width: min(920px, 100%); margin: 0 auto; padding: clamp(22px, 4vw, 44px); border: 1px solid var(--bingo-line); border-radius: 26px; background: rgba(255,255,255,.94); box-shadow: var(--bingo-shadow); }
.bingo-recharge-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.bingo-recharge-intro { max-width: 680px; margin-bottom: 24px; }
.bingo-recharge-intro h1 { margin: 7px 0 8px; color: var(--bingo-ink); font-size: clamp(30px, 5vw, 48px); line-height: 1.15; letter-spacing: -.05em; }
.bingo-recharge-intro p { margin: 0; color: var(--bingo-muted); font-size: 14px; }
.bingo-recharge-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bingo-recharge-card { display: grid; justify-items: start; gap: 8px; min-height: 142px; padding: 16px; border: 1px solid var(--bingo-line); border-radius: 16px; color: var(--bingo-ink); background: #fff; text-align: right; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.bingo-recharge-card:hover, .bingo-recharge-card.is-active { border-color: var(--bingo-orange); box-shadow: 0 12px 25px rgba(247,145,32,.14); transform: translateY(-2px); }
.bingo-recharge-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: var(--bingo-orange); font: 900 21px/1 Arial, sans-serif; }
.bingo-recharge-card strong { font-size: 15px; }
.bingo-recharge-card small { color: var(--bingo-muted); font-size: 10px; line-height: 1.5; }
.bingo-recharge-form-shell { max-width: 620px; margin: 22px auto 0; padding: 22px; border: 1px solid var(--bingo-line); border-radius: 18px; background: #fff; }
.bingo-recharge-form { display: grid; gap: 9px; }
.bingo-recharge-form label { display: grid; gap: 6px; color: var(--bingo-ink); font-size: 11px; font-weight: 800; }
.bingo-recharge-form input, .bingo-recharge-form select, .bingo-recharge-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--bingo-line); border-radius: 10px; color: var(--bingo-ink); background: #fbfcff; font: inherit; outline: none; }
.bingo-recharge-form input:focus, .bingo-recharge-form select:focus, .bingo-recharge-form textarea:focus { border-color: var(--bingo-orange); box-shadow: 0 0 0 3px rgba(247,145,32,.12); }
.bingo-recharge-form button { width: 100%; min-height: 44px; margin-top: 6px; border: 0; border-radius: 11px; font-weight: 900; }
@media (max-width: 720px) {
  .bingo-recharge-page { padding: 22px 0 84px; }
  .bingo-recharge-shell { padding: 20px 14px; border-radius: 18px; }
  .bingo-recharge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .bingo-recharge-card { min-height: 126px; padding: 13px; }
  .bingo-recharge-form-shell { padding: 17px; }
}
@media (max-width: 720px) {
  .bingo-account-page { padding: 22px 0 84px; }
  .bingo-account-shell { padding: 20px 14px; border-radius: 18px; }
  .bingo-account-heading { margin-bottom: 20px; }
  .bingo-account-panels { grid-template-columns: 1fr; gap: 12px; }
  .bingo-account-panel { padding: 17px; }
  .bingo-account-intro h1, .bingo-account-welcome h1 { font-size: 30px; }
  .bingo-account-welcome { align-items: flex-start; padding: 17px; }
  .bingo-account-avatar { width: 46px; height: 46px; border-radius: 14px; font-size: 20px; }
	.bingo-account-records { grid-template-columns: 1fr; gap: 12px; margin-top: 17px; }
	.bingo-account-record-section { padding: 15px; border-radius: 15px; }
	.bingo-order-record-main { align-items: flex-start; flex-direction: column; gap: 2px; }
}