/* ============================================================ GLOBAL CSS — Kingexch365 Next.js Project ============================================================ Bootstrap is loaded via in layout.tsx (CDN). DO NOT @import bootstrap here — it causes double-loading and specificity issues where Bootstrap overrides your responsive.css rules in the wrong cascade order. Actual site styling comes from (in layout.tsx ): 1. Bootstrap CDN → utilities (d-none, d-lg-block …) 2. /public/css/all.css → Font Awesome icons 3. /public/css/style.css → site design & layout 4. /public/css/responsive.css → media queries (last = wins) ============================================================ */ /* ────────────────────────────────────────────────────────── SKELETON LOADERS (Not in style.css — safe to define here) ────────────────────────────────────────────────────────── */ @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } @keyframes site-news-ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .skeleton-row, .skeleton-banner, .skeleton-card { background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%); background-size: 1000px 100%; animation: shimmer 2s infinite; border-radius: 4px; } .skeleton-banner { width: 100%; height: 200px; margin-bottom: 16px; } .skeleton-row { display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 8px; height: 48px; } .skeleton-name { flex: 1; height: 16px; border-radius: 4px; background: #ddd; } .skeleton-odds-group { display: flex; gap: 8px; } .skeleton-odds { width: 52px; height: 32px; border-radius: 4px; background: #ddd; } .skeleton-card { width: 200px; height: 160px; border-radius: 8px; } /* ────────────────────────────────────────────────────────── MINIMAL BODY RESET Do NOT redefine .main-wrapper, .content-wrapper, or any layout classes — style.css owns those completely. ────────────────────────────────────────────────────────── */ html { /* Keeps scrollbar gutter reserved so toggling overflow (modals, etc.) does not shift layout */ scrollbar-gutter: stable; } html, body { margin: 0; padding: 0; } /* Lock page scroll when any custom offcanvas is open (CSS-only). */ html:has(.custom-offcanvas.show), body:has(.custom-offcanvas.show) { overflow: hidden; touch-action: none; overscroll-behavior: none; } /* Lock page scroll when CommonModal is open (class toggled in Modal.tsx). */ html.modal-open, body.modal-open { overflow: hidden; touch-action: none; overscroll-behavior: none; } .btn-main-menu-link, .btn-secondary-menu-link, .btn-submenu-link, .btn-sports-menu, .btn-setting-link, .market-pin-block button, .btn-back-lay, .btn-account, .btn-refresh, .btn-search { background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; } /* Banner container: fixed height so layout does NOT jump */ .banner-carousel { position: relative; width: 100%; overflow: hidden; } /* slides */ .banner-slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity .6s ease; } .banner-slide.active { position: relative; opacity: 1; } /* images behave exactly like HTML */ .banner-carousel img { width: 100%; height: 192.41px !important; display: block; } @media screen and (max-width: 600px) { .banner-carousel img { height: 94px !important; } } /* Container takes full height/width of its parent */ .no-data-container { display: flex; align-items: center; justify-content: center; padding: 40px; width: 100%; min-height: 300px; } .no-data-content { text-align: center; max-width: 400px; } .image-wrapper img { width: 100%; max-width: 250px; height: auto; margin-bottom: 24px; /* Soft float animation for eye-appeal */ animation: float 3s ease-in-out infinite; } .no-data-title { font-size: 1.5rem; font-weight: 600; color: #2d3748; margin-bottom: 8px; } .no-data-text { font-size: 1rem; color: #718096; margin-bottom: 24px; line-height: 1.5; } .retry-button { background-color: #4a90e2; color: white; border: none; padding: 10px 24px; border-radius: 8px; font-weight: 500; cursor: pointer; transition: background 0.2s; } .retry-button:hover { background-color: #357abd; } /* Subtle floating animation */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .casino-game-wrapper { width: 100%; height: calc(87dvh); position: relative; } .casino-game-iframe { width: 100%; height: 100%; /* match your HTML height */ border: none; display: block; } .bet-offcanvas { height: 100vh; } .bet-offcanvas .offcanvas-body { height: 100%; overflow-y: auto; } .bet-offcanvas .right-side { display: block !important; } .bet-offcanvas { width: 320px; } @media (max-width:991.98px) { .bet-offcanvas { width: 100vw !important; max-width: 100vw; } } .header-actions { display: flex; align-items: center; gap: 6px; } .search-dropdown-list { text-decoration: none; color: inherit; display: block; } /* Modal Header Styling */ .custom-modal .modal-header { /* background: linear-gradient(-180deg, #2e4b5e 0%, #243a48 82%); */ background: var(--left-menu-header); color: #fff; padding: 8px 15px; border-top-left-radius: 4px; border-top-right-radius: 4px; } .custom-modal .modal-title { font-size: 14px; font-weight: 700; } .custom-modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Modal Body/Labels */ .custom-modal .form-label { font-size: 13px; color: #444; } /* Buttons */ .btn-confirm { background-color: #6c757d !important; border: none; min-width: 80px; } .btn-no { background-color: #ced4da !important; color: #333 !important; border: none; min-width: 50px; } /* Eye Icon Position */ .input-group-append .btn { position: absolute; right: 0; top: 0; height: 100%; /* color: #999; */ } .change-password-modal-wrap .modal-content { background: #fff; border: 0; box-shadow: 5px 5px 5px #666; } .change-password-modal-wrap .modal-header { background: var(--left-menu-header); color: #fff; padding: 8px 15px; border-top-left-radius: 4px; border-top-right-radius: 4px; } .change-password-modal-wrap .modal-title { font-size: 14px; font-weight: 700; } .change-password-modal-wrap .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .change-password-modal-wrap .form-label { font-size: 13px; color: #444; } .change-password-modal-wrap .modal-body { padding: 0 !important; } .change-password-modal .modal-body { padding: 12px 15px !important; } .cashout-details { display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: row !important; gap: 8px !important; } .cashout-details-active { background-color: #ccc; padding: 4px 8px; border-radius: 4px; cursor: pointer; } .theme-disabled { position: relative; } .theme-disabled .settings-block-row { filter: blur(3px); pointer-events: none; } .coming-soon-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.8); color: #fff; padding: 8px 16px; font-size: 14px; border-radius: 4px; z-index: 10; font-weight: 600; } .exposure-modal .dt-column-order, .fancy-book-modal .dt-column-order { display: none !important; } .exposure-modal th, .fancy-book-modal th { cursor: default !important; } .betslip-scroll { max-height: calc(100vh - 320px); overflow-y: auto; overflow-x: hidden; /* Hide scrollbar */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE / Edge */ } .betslip-scroll::-webkit-scrollbar { display: none; /* Chrome / Safari */ } .scorecard-btn-wrapper { position: absolute; right: 10px; bottom: 5px; } .btn-statistics { background: rgba(0, 0, 0, 0.5); /* dark glass effect */ border: none; padding: 6px; border-radius: 50%; cursor: pointer; backdrop-filter: blur(2px); } .btn-statistics img { width: 18px; height: 18px; filter: brightness(0) invert(1); /* makes icon white */ } .btn-statistics img { width: 20px; height: 20px; } .btn-statistics:hover { background: rgba(0, 0, 0, 0.7); transform: scale(1.1); transition: 0.2s ease; } /* Search input */ .btn-search-events::placeholder, .form-control::placeholder { color: #000000; opacity: 1; } /* Make validation error text white in login modal */ .login-form-field .text-danger { color: #f8f9fa !important; } /* iOS Safari: keep login modal input text visible (typing + autofill) */ .login-form-field-box input:-webkit-autofill, .login-form-field-box input:-webkit-autofill:hover, .login-form-field-box input:-webkit-autofill:focus { -webkit-text-fill-color: #000 !important; -webkit-box-shadow: 0 0 0 1000px #fff inset !important; box-shadow: 0 0 0 1000px #fff inset !important; } .blurred-content { filter: blur(4px); pointer-events: none; user-select: none; } .permission-overlay { position: fixed; top: 80px; left: 0; width: 100%; height: calc(100% - 80px); background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 9999; } .permission-box { background: #fff; padding: 25px 35px; border-radius: 12px; text-align: center; max-width: 350px; } .permission-box h5 { margin-bottom: 10px; font-weight: 600; } .permission-box p { margin: 0; font-size: 14px; } .permission-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .permission-box { position: relative; background: #fff; padding: 25px 35px; border-radius: 12px; text-align: center; max-width: 350px; } .permission-close { position: absolute; top: 10px; right: 12px; border: none; background: transparent; font-size: 18px; cursor: pointer; } .header { position: relative; z-index: 100; } .form-control.is-invalid.no-icon { background-image: none !important; padding-right: 0.75rem !important; } .table-block table.display tbody tr.row-back { background-color: rgba(161, 224, 255, 1) !important; } .table-block table.display tbody tr.row-lay { background-color: rgba(254, 179, 198, 1) !important; } .table-block table.display tbody tr.row-back td { background: inherit !important; } .table-block table.display tbody tr.row-lay td { background: inherit !important; } /* Keep tips details footer at page bottom on short content. */ .tips-review-main-content { min-height: calc(100vh - 100px); display: flex; flex-direction: column; } .tips-review-main-content .tips-review-page { flex: 1; } @media (max-width: 991.98px) { .tips-review-main-content { min-height: calc(100vh - 54px); } } /* new for detail (drashti)*/ .exposure-modal-table, .fancy-book-modal-scroll { max-height: 400px; overflow-y: auto; } .exposure-modal-table table, .fancy-book-modal-scroll table { width: 100%; border-collapse: collapse; text-align: center; font-weight: 600; } .exposure-modal-table th { background: #e5e5e5; padding: 8px; border: 1px solid #adb5bd; text-transform: capitalize; } .exposure-modal-table td { padding: 6px; border: 1px solid #adb5bd; } .fancy-book-modal-scroll th, .fancy-book-modal-table th { background: #e5e5e5; padding: 8px; border: 1px solid #999; text-transform: capitalize; } .fancy-book-modal-scroll td, .fancy-book-modal-table td { padding: 6px; border: 1px solid #999; } /* LOSS (RED BLOCK) */ .row-loss { background-color: #f5a3ad; color: #000; } /* PROFIT (BLUE BLOCK) */ .row-profit { background-color: #7db7dc; color: #000; } /* Optional: make modal compact like screenshot */ .exposure-modal-content, .fancy-book-modal-content { padding: 0; } /* react-toastify: mobile / tablet — top-right, compact width (reference login toast) */ @media (max-width: 991.98px) { :root { --toastify-toast-top: calc(55px + 12px); --toastify-toast-right: 10px; --toastify-toast-min-height: 0px; --toastify-toast-padding: 6px 10px; } .Toastify__toast-container { padding: 8px; width: auto !important; } .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right { top: calc(55px + 12px) !important; transform: none !important; } /* Override library full-width mobile rule — keep toast on the right */ .Toastify__toast-container--top-right { right: 10px !important; left: auto !important; width: auto !important; max-width: calc(100vw - 20px); margin: 0; } .Toastify__toast { display: flex; align-items: center; flex-wrap: nowrap; min-height: 0 !important; margin-bottom: 6px; margin-left: auto; padding: 6px 8px 6px 10px; font-size: 12px; line-height: 1.25; border-radius: 6px; width: min(280px, calc(100vw - 24px)); max-width: min(280px, calc(100vw - 24px)); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } .Toastify__toast-body { flex: 1 1 auto; min-width: 0; padding: 0; margin: 0 !important; font-size: 12px; line-height: 1.25; white-space: normal; word-break: break-word; } .Toastify__toast-icon { width: 16px; min-width: 16px; margin-inline-end: 8px; } .Toastify__toast-icon svg { width: 14px; height: 14px; } /* Always visible on touch — library hides until hover; pin to right edge */ .Toastify__close-button { position: static !important; flex-shrink: 0; display: flex !important; align-items: center; justify-content: center; align-self: center; order: 3; margin-left: auto !important; margin-right: 0; padding: 0; min-width: 16px; min-height: 16px; font-size: 16px; font-weight: 700; color: #fff !important; opacity: 1 !important; background: transparent; border: none; line-height: 1; } .Toastify__close-button > svg { width: 14px; height: 14px; fill: currentColor; } .Toastify__progress-bar { height: 2px; } .Toastify__toast--error { background: #e74c3c; color: #fff; } } /* Beat react-toastify @media (max-width: 480px) { top: env(safe-area-inset-top) } */ @media only screen and (max-width: 480px) { .Toastify__toast-container { width: auto !important; left: auto !important; margin: 0 !important; } .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right { top: calc(55px + 12px) !important; transform: none !important; } .Toastify__toast-container--top-right { right: 10px !important; left: auto !important; } .Toastify__toast { --toastify-toast-width: min(280px, calc(100vw - 24px)); width: min(280px, calc(100vw - 24px)) !important; max-width: min(280px, calc(100vw - 24px)) !important; border-radius: 6px !important; margin-bottom: 6px !important; } } .exposure-modal-body { padding: 0; } /* DEMO RESTRICTED */ .demo-restricted-container { padding: 20px; } .demo-card { background: #f8f9fa; border-radius: 8px; padding: 20px 24px; border: 1px solid #ddd; max-width: 700px; } /* Title */ .demo-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; } /* Warning */ .demo-warning { color: #dc3545; font-size: 18px; font-weight: 600; line-height: 1.5; margin-bottom: 12px; } /* Disclaimer */ .demo-disclaimer { color: #d39e00; font-size: 14px; margin-bottom: 20px; } /* Button wrapper */ .demo-action { margin-top: 10px; } /* Button */ .demo-btn { padding: 10px 18px; font-size: 14px; border-radius: 6px; } /* RESPONSIVE */ @media (max-width: 768px) { .demo-card { padding: 16px; } .demo-warning { font-size: 16px; } .demo-title { font-size: 14px; } } @media (max-width: 480px) { .demo-warning { font-size: 15px; } .demo-btn { width: 100%; } }/* DEMO RESTRICTED */ .demo-restricted-container { padding: 20px; } .demo-card { background: #f8f9fa; border-radius: 8px; padding: 20px 24px; border: 1px solid #ddd; max-width: 700px; } /* Title */ .demo-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; } /* Warning */ .demo-warning { color: #dc3545; font-size: 18px; font-weight: 600; line-height: 1.5; margin-bottom: 12px; } /* Disclaimer */ .demo-disclaimer { color: #d39e00; font-size: 14px; margin-bottom: 20px; } /* Button wrapper */ .demo-action { margin-top: 10px; } /* Button */ .demo-btn { padding: 10px 18px; font-size: 14px; border-radius: 6px; } /* RESPONSIVE */ @media (max-width: 768px) { .demo-card { padding: 16px; } .demo-warning { font-size: 16px; } .demo-title { font-size: 14px; } } @media (max-width: 480px) { .demo-warning { font-size: 15px; } .demo-btn { width: 100%; } } /* DEMO LOGIN BUTTON */ .btn-demo-login { background: #ffc107; color: #000; border: none; padding: 2px 8px; border-radius: 4px; font-weight: 600; transition: all 0.2s ease; } .btn-demo-login:hover { background: #e0a800; color: #000; } /* PROVIDER BLOCK */ .provider-block-container { width: 100%; padding: 10px 16px 24px; box-sizing: border-box; } .provider-block-card { width: 100%; max-width: 100%; margin: 0 auto; background: #ffffff; border: 1px solid #dcdcdc; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); box-sizing: border-box; } .provider-block-top-border { width: 100%; height: 5px; background: linear-gradient( 90deg, #14805e 0%, #1b9b73 50%, #0f6b4f 100% ); } .provider-block-content { padding: 40px 32px; text-align: center; box-sizing: border-box; } .provider-block-icon { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 16px; background: linear-gradient( 135deg, #14805e, #0f6b4f ); display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 30px; font-weight: 700; } .provider-block-label { display: block; margin-bottom: 14px; color: #14805e; font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; } .provider-block-title { margin: 0; color: #1f1f1f; font-size: 52px; font-weight: 700; line-height: 1.2; word-break: break-word; } .provider-block-title-hindi { font-size: 54px; line-height: 1.3; word-break: break-word; } .provider-block-text-wrap { width: 100%; max-width: 650px; margin: 22px auto 0; } .provider-block-message { margin: 0 0 14px; color: #555555; font-size: 18px; line-height: 1.7; word-break: break-word; } .provider-block-subtext { margin: 0; color: #777777; font-size: 16px; line-height: 1.7; word-break: break-word; } .provider-block-divider { display: flex; align-items: center; gap: 14px; margin: 42px 0; color: #9b9b9b; } .provider-block-divider::before, .provider-block-divider::after { content: ""; flex: 1; height: 1px; background: #dddddd; } .provider-block-button { margin-top: 40px; min-width: 240px; padding: 14px 34px; border: none; border-radius: 999px; background: linear-gradient( 90deg, #14805e 0%, #1b9b73 50%, #0f6b4f 100% ); color: #ffffff; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .provider-block-button:hover { opacity: 0.95; transform: translateY(-1px); } /* RESPONSIVE */ @media (max-width: 1400px) { .provider-block-title { font-size: 44px; } .provider-block-title-hindi { font-size: 46px; } } @media (max-width: 1200px) { .provider-block-content { padding: 34px 26px; } .provider-block-title { font-size: 38px; } .provider-block-title-hindi { font-size: 40px; } .provider-block-message { font-size: 16px; } } @media (max-width: 992px) { .provider-block-container { padding: 10px 12px 20px; } .provider-block-content { padding: 30px 22px; } .provider-block-title { font-size: 32px; } .provider-block-title-hindi { font-size: 34px; } .provider-block-message { font-size: 15px; } .provider-block-subtext { font-size: 14px; } .provider-block-button { width: 100%; min-width: auto; } } @media (max-width: 576px) { .provider-block-container { padding: 10px 10px 16px; } .provider-block-content { padding: 24px 16px; } .provider-block-icon { width: 56px; height: 56px; font-size: 24px; } .provider-block-label { font-size: 11px; letter-spacing: 2px; } .provider-block-title { font-size: 24px; } .provider-block-title-hindi { font-size: 26px; } .provider-block-message { font-size: 14px; line-height: 1.6; } .provider-block-subtext { font-size: 13px; line-height: 1.6; } .provider-block-divider { margin: 28px 0; } .provider-block-button { margin-top: 28px; padding: 13px 20px; font-size: 14px; } } .provider-block-divider { display: flex; align-items: center; gap: 14px; margin: 40px 0; color: #14805e; } .provider-block-divider::before, .provider-block-divider::after { content: ""; flex: 1; height: 1px; background: rgba(20, 128, 94, 0.25); } .game-loader-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 80vh; } .loader-game { --d: 22px; width: 4px; height: 4px; border-radius: 50%; color: #25b09b; box-shadow: calc(1 * var(--d)) calc(0 * var(--d)) 0 0px, calc(0.707 * var(--d)) calc(0.707 * var(--d)) 0 1px, calc(0 * var(--d)) calc(1 * var(--d)) 0 2px, calc(-0.707 * var(--d)) calc(0.707 * var(--d)) 0 3px, calc(-1 * var(--d)) calc(0 * var(--d)) 0 4px, calc(-0.707 * var(--d)) calc(-0.707 * var(--d)) 0 5px, calc(0 * var(--d)) calc(-1 * var(--d)) 0 6px; animation: l27 1s infinite steps(8); } @keyframes l27 { 100% { transform: rotate(1turn); } }