/* ============================================================ Dolph — site-wide MOBILE styles. EVERY rule lives inside a max-width media query, so the desktop layout is never affected. Loaded LAST in on the public (non-casino) pages so source order wins ties. ============================================================ */ /* ---- Tablet & down: things that overflow below ~768px ---- */ @media (max-width: 767.98px) { /* Home hero image must never push the page wider than the screen. */ .hero-section img { max-width: 100%; height: auto; } /* Country-flag filter row: smaller circles so they fit. */ .countries { --size: 46px !important; } } /* ---- Phones ---- */ @media (max-width: 575.98px) { /* Hero headline a step smaller. */ .hero-section .title { font-size: 1.9rem; } /* Category pills tighter. */ .cat-pill { padding: 4px 10px; font-size: .75rem; } /* Long values that previously forced horizontal scroll. */ .balance-nav-item { white-space: normal; overflow-wrap: anywhere; } /* 16px inputs prevent iOS auto-zoom on focus; roomier tap targets. */ input, select, textarea, .form-control, .form-select, .form-control-dolph { font-size: 16px !important; } /* Page titles scaled down. */ .page-title { font-size: 1.4rem !important; } /* Account tabs wrap instead of overflowing the row. */ .account-tabs { gap: .85rem !important; flex-wrap: wrap; justify-content: center; } /* Payment processors: one comfortable column. */ .paymentProcessors { grid-template-columns: 1fr !important; } .paymentProcessor { min-width: 0 !important; } /* Auth buttons: let long labels wrap rather than clip. */ .auth-buttons-container .btn { white-space: normal; } /* Support: chat bubbles and proof thumbnails sized for phones. */ .conv-bubble { max-width: 90% !important; } .conv-proof-thumb { width: 72px !important; height: 60px !important; } /* Cart: recommended-items strip uses viewport-relative cards. */ .carts-area > .item { min-width: 78vw !important; max-width: 78vw !important; } } /* ============================================================ Orders + Support-history tables: keep the full PC table on mobile but let it scroll sideways (instead of stacked cards), so every column is reachable. ≤768px so tablets get it too. ============================================================ */ @media (max-width: 767.98px) { .orders-table-wrap, #historyList .orders-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .orders-table { min-width: 560px; } .orders-table th, .orders-table td { white-space: nowrap; } .orders-table-wrap::-webkit-scrollbar { height: 8px; } .orders-table-wrap::-webkit-scrollbar-thumb { background: #d4af37; border-radius: 8px; } .orders-table-wrap::-webkit-scrollbar-track { background: rgba(255, 255, 255, .06); } }