/* LEFT - Diamond layout, Orange+Yellow palette, 2026-10-23 */ /* DIAMOND_SUPERCELL_THEME_V2 */ :root { --dv2-purple: #d98328; --dv2-purple-2: #f6ac5c; --dv2-purple-3: #f6c48f; --dv2-purple-soft: #fdf8ea; --dv2-black: #111014; --dv2-black-2: #19171d; --dv2-white: #ffffff; --dv2-bg: #fefcf6; --dv2-surface: #ffffff; --dv2-text: #151217; --dv2-muted: #746f7c; --dv2-border: #f1ebe4; --dv2-radius: 18px; --dv2-radius-lg: 28px; --dv2-shadow: 0 18px 50px rgba(66, 65, 68, .09); --dv2-max: 1280px; } /* ========================= BASE ========================= */ html { scroll-behavior: smooth; } body.diamond-sc-v2 { background: var(--dv2-bg) !important; color: var(--dv2-text) !important; font-family: Inter, Arial, "Segoe UI", Tahoma, sans-serif !important; line-height: 1.6; } body.diamond-sc-v2 *, body.diamond-sc-v2 *::before, body.diamond-sc-v2 *::after { box-sizing: border-box; } body.diamond-sc-v2 h1, body.diamond-sc-v2 h2, body.diamond-sc-v2 h3 { color: var(--dv2-text); font-weight: 900; letter-spacing: -.035em; } body.diamond-sc-v2 h1 { font-size: clamp(34px, 5vw, 70px); line-height: 1.02; } body.diamond-sc-v2 h2, body.diamond-sc-v2 .section-title { font-size: clamp(25px, 3vw, 42px) !important; line-height: 1.1; } body.diamond-sc-v2 p { color: var(--dv2-muted); } /* ========================= MAIN WIDTH ========================= */ body.diamond-sc-v2 main, body.diamond-sc-v2 .container, body.diamond-sc-v2 .main-container, body.diamond-sc-v2 .content-container { max-width: var(--dv2-max); } /* ========================= HEADER / NAV ========================= */ body.diamond-sc-v2 .topbar, body.diamond-sc-v2 .navbar, body.diamond-sc-v2 .site-header, body.diamond-sc-v2 .store-header, body.diamond-sc-v2 header.main-header { background: rgba(17, 16, 20, .97) !important; color: white !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; box-shadow: none !important; backdrop-filter: blur(18px); } body.diamond-sc-v2 .topbar a, body.diamond-sc-v2 .navbar a, body.diamond-sc-v2 .site-header a, body.diamond-sc-v2 .store-header a { color: white; } body.diamond-sc-v2 .logo, body.diamond-sc-v2 .brand, body.diamond-sc-v2 .brand strong { font-weight: 900 !important; letter-spacing: -.03em; } /* ========================= HERO - SUPERCELL INSPIRED ========================= */ body.diamond-page-store .hero, body.diamond-page-store .hero-card, body.diamond-page-store .hero-section { min-height: clamp(300px, 43vw, 590px) !important; display: flex; align-items: center; position: relative; overflow: hidden; border: 0 !important; border-radius: 0 0 32px 32px !important; background-color: var(--dv2-purple) !important; box-shadow: none !important; } body.diamond-page-store .hero-content { position: relative; z-index: 2; max-width: 720px; } body.diamond-page-store .hero-title, body.diamond-page-store .hero h1 { color: white !important; font-size: clamp(38px, 6vw, 78px) !important; line-height: .98 !important; max-width: 750px; } body.diamond-page-store .hero p, body.diamond-page-store .hero-card p { color: rgba(255,255,255,.84) !important; max-width: 620px; font-size: clamp(15px, 1.5vw, 20px); } /* ========================= SECTIONS ========================= */ body.diamond-sc-v2 section { position: relative; } body.diamond-sc-v2 .section-header, body.diamond-sc-v2 .section-head { margin-top: 46px; margin-bottom: 20px; } /* ========================= CARDS ========================= */ body.diamond-sc-v2 :is( .card, .game-card, .product-card, .category-card, .wallet-card, .order-card, .deposit-card, .method-card, .vip-progress-card, .auth-card, .form-card ) { background: var(--dv2-surface) !important; border: 1px solid var(--dv2-border) !important; border-radius: var(--dv2-radius) !important; box-shadow: none !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } @media (hover:hover) { body.diamond-sc-v2 :is( .card, .game-card, .product-card, .category-card, .deposit-card, .method-card ):hover { transform: translateY(-5px); box-shadow: var(--dv2-shadow) !important; border-color: #efdcc8 !important; } } /* ========================= IMAGES ========================= */ body.diamond-sc-v2 :is( .card img, .game-card img, .product-card img, .category-card img ) { object-fit: cover; } /* ========================= BUTTONS ========================= */ body.diamond-sc-v2 button, body.diamond-sc-v2 .btn { font-family: inherit; font-weight: 800; border-radius: 12px; } body.diamond-sc-v2 :is( .primary-btn, .btn-primary, .buy-btn, .purchase-btn, .details-btn, .submit-btn ) { background: var(--dv2-purple) !important; color: white !important; border: 0 !important; box-shadow: none !important; transition: transform .18s ease, background .18s ease; } body.diamond-sc-v2 :is( .primary-btn, .btn-primary, .buy-btn, .purchase-btn, .details-btn, .submit-btn ):hover { background: #b66e21 !important; transform: translateY(-2px); } /* ========================= FILTERS / INPUTS ========================= */ body.diamond-sc-v2 input, body.diamond-sc-v2 select, body.diamond-sc-v2 textarea { background: white !important; color: var(--dv2-text) !important; border: 1px solid var(--dv2-border) !important; border-radius: 12px !important; outline: none !important; transition: border-color .18s ease, box-shadow .18s ease; } body.diamond-sc-v2 input:focus, body.diamond-sc-v2 select:focus, body.diamond-sc-v2 textarea:focus { border-color: var(--dv2-purple-2) !important; box-shadow: 0 0 0 4px rgba(246, 172, 92,.12) !important; } body.diamond-sc-v2 .search-box { background: white !important; border: 1px solid var(--dv2-border) !important; border-radius: 16px !important; box-shadow: none !important; } /* ========================= CATEGORY BUTTONS ========================= */ body.diamond-sc-v2 .category-btn { background: white !important; color: var(--dv2-text) !important; border: 1px solid var(--dv2-border) !important; border-radius: 100px !important; } body.diamond-sc-v2 .category-btn.active { background: var(--dv2-black) !important; color: white !important; border-color: var(--dv2-black) !important; } /* ========================= TABLES ========================= */ body.diamond-sc-v2 .table-wrapper { background: white; border: 1px solid var(--dv2-border); border-radius: var(--dv2-radius); overflow: auto; } body.diamond-sc-v2 table { background: white !important; border-collapse: collapse; } body.diamond-sc-v2 thead { background: #faf4ed !important; } body.diamond-sc-v2 th { color: #4a4056 !important; font-weight: 850; } body.diamond-sc-v2 td, body.diamond-sc-v2 th { border-color: var(--dv2-border) !important; } /* ========================= MODALS ========================= */ body.diamond-sc-v2 .modal-content, body.diamond-sc-v2 .modal-box, body.diamond-sc-v2 .details-modal { background: white !important; border: 1px solid var(--dv2-border) !important; border-radius: 24px !important; box-shadow: 0 30px 90px rgba(29, 28, 31,.23) !important; } /* ========================= AUTH PAGES ========================= */ body.diamond-page-login, body.diamond-page-register, body.diamond-page-otp { background: radial-gradient( circle at 10% 0%, #fceee0 0, var(--dv2-bg) 38%, #fff 100% ) !important; } /* ========================= MOBILE NAV ========================= */ body.diamond-sc-v2 .bottom-nav { background: rgba(17,16,20,.97) !important; border-top: 1px solid rgba(255,255,255,.09) !important; box-shadow: 0 -10px 30px rgba(0,0,0,.16) !important; backdrop-filter: blur(18px); } body.diamond-sc-v2 .bottom-nav .nav-item { color: #aaa4ae !important; } body.diamond-sc-v2 .bottom-nav .nav-item.active { color: #f8d4ae !important; } /* ========================= FOOTER ========================= */ .diamond-global-footer { margin-top: 90px; direction: rtl; background: var(--dv2-black); color: white; } .diamond-global-footer * { box-sizing: border-box; } .diamond-footer-inner { width: min(var(--dv2-max), calc(100% - 40px)); margin: 0 auto; padding: 70px 0 45px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 48px; } .diamond-footer-brand h2 { color: white !important; margin: 0 0 16px; font-size: 34px !important; font-weight: 950; } .diamond-footer-brand p { max-width: 370px; color: #aca7b0 !important; font-size: 14px; line-height: 1.9; } .diamond-footer-column h3 { color: white !important; margin: 0 0 18px; font-size: 15px !important; letter-spacing: 0; } .diamond-footer-column a, .diamond-footer-contact { display: block; width: fit-content; margin: 0 0 11px; color: #aaa4ae; text-decoration: none; font-size: 14px; transition: color .16s ease; } .diamond-footer-column a:hover { color: var(--dv2-purple-3); } .diamond-footer-social { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; } .diamond-footer-social a { margin: 0; padding: 9px 13px; color: white; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; } .diamond-footer-social a:hover { background: var(--dv2-purple); border-color: var(--dv2-purple); color: white; } .diamond-footer-bottom { width: min(var(--dv2-max), calc(100% - 40px)); margin: 0 auto; padding: 22px 0 28px; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #77717d; font-size: 12px; } /* ========================= POLICY PAGE ========================= */ .diamond-policy-hero { background: linear-gradient(135deg, #464548, #d98328); color: white; padding: 100px 24px; text-align: center; } .diamond-policy-hero h1 { color: white !important; margin-bottom: 12px; } .diamond-policy-hero p { color: rgba(255,255,255,.8) !important; } .diamond-policy-wrap { width: min(950px, calc(100% - 32px)); margin: 55px auto; } .diamond-policy-section { background: white; margin-bottom: 18px; padding: 30px; border: 1px solid var(--dv2-border); border-radius: 18px; } .diamond-policy-section h2 { margin-top: 0; font-size: 25px !important; } .diamond-policy-section p, .diamond-policy-section li { color: #625c68; line-height: 1.95; } /* ========================= RESPONSIVE ========================= */ @media (max-width: 900px) { .diamond-footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { body.diamond-sc-v2 h1 { font-size: 35px; } body.diamond-page-store .hero, body.diamond-page-store .hero-card, body.diamond-page-store .hero-section { min-height: 320px !important; border-radius: 0 0 24px 24px !important; } .diamond-footer-inner { width: min(100% - 30px, var(--dv2-max)); padding-top: 48px; grid-template-columns: 1fr; gap: 32px; } .diamond-footer-bottom { width: calc(100% - 30px); padding-bottom: 100px; flex-direction: column; align-items: flex-start; } .diamond-global-footer { margin-top: 60px; } } /* ========================================================= DIAMOND BLACK WHITE V3 Cairo + monochrome + new category icons ========================================================= */ :root { --dv2-purple: #0a0a0a !important; --dv2-purple-2: #000000 !important; --dv2-purple-3: #1b1b1b !important; --dv2-purple-soft: #f2f2f2 !important; --dv2-black: #080808 !important; --dv2-black-2: #131313 !important; --dv2-white: #ffffff !important; --dv2-bg: #ffffff !important; --dv2-surface: #ffffff !important; --dv2-text: #080808 !important; --dv2-muted: #6b6b6b !important; --dv2-border: #dedede !important; --accent: #000000 !important; --primary: #000000 !important; } /* ---------- FONT ---------- */ body.diamond-sc-v2, body.diamond-sc-v2 button, body.diamond-sc-v2 input, body.diamond-sc-v2 select, body.diamond-sc-v2 textarea { font-family: "Cairo", Arial, Tahoma, sans-serif !important; } /* ---------- BODY ---------- */ body.diamond-sc-v2 { background: #ffffff !important; color: #080808 !important; } /* ---------- HEADER ---------- */ body.diamond-sc-v2 .topbar, body.diamond-sc-v2 .navbar, body.diamond-sc-v2 .site-header, body.diamond-sc-v2 .store-header, body.diamond-sc-v2 header.main-header { background: #080808 !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; box-shadow: none !important; } /* ---------- HERO ---------- */ body.diamond-page-store .hero, body.diamond-page-store .hero-card, body.diamond-page-store .hero-section { background: #080808 !important; color: #ffffff !important; } body.diamond-page-store .hero::before, body.diamond-page-store .hero-card::before, body.diamond-page-store .hero-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 115deg, rgba(255,255,255,.07), transparent 32%, transparent 72%, rgba(255,255,255,.04) ); } body.diamond-page-store .hero-title, body.diamond-page-store .hero h1 { color: white !important; } body.diamond-page-store .hero p { color: #c9c9c9 !important; } /* ---------- TITLES ---------- */ body.diamond-sc-v2 h1, body.diamond-sc-v2 h2, body.diamond-sc-v2 h3, body.diamond-sc-v2 .section-title { font-family: "Cairo", Arial, sans-serif !important; font-weight: 900 !important; color: #080808; } /* ---------- GENERAL CARDS ---------- */ body.diamond-sc-v2 :is( .card, .game-card, .product-card, .category-card, .wallet-card, .order-card, .deposit-card, .method-card, .vip-progress-card ) { background: #ffffff !important; border: 1px solid #dfdfdf !important; box-shadow: none !important; } @media (hover:hover) { body.diamond-sc-v2 :is( .game-card, .product-card, .category-card ):hover { border-color: #080808 !important; box-shadow: 0 18px 40px rgba(0,0,0,.10) !important; } } /* ========================================================= CATEGORY DESIGN ========================================================= */ /* category cards */ body.diamond-sc-v2 #categories :is( .card, .category-card ) { background: #fff !important; border: 2px solid #111 !important; border-radius: 0 !important; padding: 18px 12px !important; min-height: 150px; position: relative; overflow: hidden; transition: transform .2s ease, background .2s ease, color .2s ease; } /* small graphic corner */ body.diamond-sc-v2 #categories :is( .card, .category-card )::after { content: ""; position: absolute; width: 42px; height: 42px; left: -22px; bottom: -22px; background: #111; transform: rotate(45deg); } /* new icon shape */ body.diamond-sc-v2 #categories :is( .category-icon, .card-icon, .icon-box, .category-image ) { width: 76px !important; height: 76px !important; margin: 0 auto 15px !important; display: flex !important; align-items: center; justify-content: center; background: #080808 !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; clip-path: polygon( 0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px) ); transition: transform .2s ease, background .2s ease, color .2s ease; } /* icon itself */ body.diamond-sc-v2 #categories :is( .category-icon, .card-icon, .icon-box ) i { color: white !important; font-size: 30px !important; } /* category image if image is used */ body.diamond-sc-v2 #categories .category-image img, body.diamond-sc-v2 #categories .card-icon img { width: 46px !important; height: 46px !important; object-fit: contain !important; filter: grayscale(1) contrast(1.2); } /* category name */ body.diamond-sc-v2 #categories :is( .card-title, .category-title, h3, strong ) { color: #090909 !important; font-family: "Cairo", sans-serif !important; font-size: 14px !important; font-weight: 800 !important; } /* category hover */ @media (hover:hover) { body.diamond-sc-v2 #categories :is( .card, .category-card ):hover { background: #080808 !important; color: #fff !important; transform: translateY(-6px); } body.diamond-sc-v2 #categories :is( .card, .category-card ):hover :is( .card-title, .category-title, h3, strong ) { color: white !important; } body.diamond-sc-v2 #categories :is( .card, .category-card ):hover :is( .category-icon, .card-icon, .icon-box, .category-image ) { background: white !important; color: #080808 !important; transform: scale(1.06) rotate(-2deg); } body.diamond-sc-v2 #categories :is( .card, .category-card ):hover :is( .category-icon, .card-icon, .icon-box ) i { color: #080808 !important; } } /* ---------- BUTTONS ---------- */ body.diamond-sc-v2 :is( .primary-btn, .btn-primary, .buy-btn, .purchase-btn, .details-btn, .submit-btn ) { background: #080808 !important; color: white !important; border: 2px solid #080808 !important; border-radius: 5px !important; } body.diamond-sc-v2 :is( .primary-btn, .btn-primary, .buy-btn, .purchase-btn, .details-btn, .submit-btn ):hover { background: white !important; color: #080808 !important; } /* ---------- CATEGORY PILLS ---------- */ body.diamond-sc-v2 .category-btn { background: #ffffff !important; color: #080808 !important; border: 1px solid #bcbcbc !important; } body.diamond-sc-v2 .category-btn.active, body.diamond-sc-v2 .category-btn:hover { background: #080808 !important; color: #ffffff !important; border-color: #080808 !important; } /* ---------- INPUTS ---------- */ body.diamond-sc-v2 input, body.diamond-sc-v2 select, body.diamond-sc-v2 textarea { background: #fff !important; border: 1px solid #cfcfcf !important; color: #080808 !important; } body.diamond-sc-v2 input:focus, body.diamond-sc-v2 select:focus, body.diamond-sc-v2 textarea:focus { border-color: #080808 !important; box-shadow: 0 0 0 3px rgba(0,0,0,.08) !important; } /* ---------- TABLE ---------- */ body.diamond-sc-v2 thead { background: #080808 !important; } body.diamond-sc-v2 thead th { color: #ffffff !important; } /* ---------- FOOTER ---------- */ .diamond-global-footer { background: #080808 !important; } .diamond-global-footer a:hover { color: #ffffff !important; text-decoration: underline; } .diamond-footer-social a:hover { background: white !important; color: #080808 !important; border-color: white !important; } /* ---------- POLICY ---------- */ .diamond-policy-hero { background: #080808 !important; } /* ---------- MOBILE ---------- */ @media (max-width:620px) { body.diamond-sc-v2 #categories :is( .card, .category-card ) { min-height: 125px; padding: 13px 8px !important; } body.diamond-sc-v2 #categories :is( .category-icon, .card-icon, .icon-box, .category-image ) { width: 60px !important; height: 60px !important; margin-bottom: 10px !important; } body.diamond-sc-v2 #categories :is( .category-icon, .card-icon, .icon-box ) i { font-size: 24px !important; } } /* ===================================================== FORCE CAIRO EVERYWHERE V2 Keep Font Awesome icons untouched ===================================================== */ html, body.diamond-sc-v2 { font-family: "Cairo", Arial, Tahoma, sans-serif !important; } body.diamond-sc-v2 :is( div, span, p, a, button, input, textarea, select, option, label, h1, h2, h3, h4, h5, h6, table, thead, tbody, tr, th, td, small, strong, b, ul, ol, li ) { font-family: "Cairo", Arial, Tahoma, sans-serif !important; } /* Do NOT apply Cairo to Font Awesome icon elements. */ body.diamond-sc-v2 i, body.diamond-sc-v2 .fa, body.diamond-sc-v2 .fas, body.diamond-sc-v2 .far, body.diamond-sc-v2 .fab, body.diamond-sc-v2 .fa-solid, body.diamond-sc-v2 .fa-regular, body.diamond-sc-v2 .fa-brands { font-family: inherit; } /* FORCE CATEGORY TITLE CAIRO V4 */ html body.diamond-sc-v2 #catTitle, html body.diamond-sc-v2 .section-header #catTitle, html body.diamond-sc-v2 .section-title, html body.diamond-sc-v2 #categoriesTitle, html body.diamond-sc-v2 .categories-title, html body.diamond-sc-v2 .categories-title * { font-family: "Cairo", Arial, sans-serif !important; font-style: normal !important; font-weight: 800 !important; letter-spacing: 0 !important; } /* ========================================================= DIAMOND STOREFRONT UI V5 Drawer + hamburger + category cards black / white / Cairo ========================================================= */ /* ========================================================= FIX FONT AWESOME AFTER CAIRO FORCE ========================================================= */ body.diamond-sc-v2 .fas, body.diamond-sc-v2 .fa-solid { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; } body.diamond-sc-v2 .far, body.diamond-sc-v2 .fa-regular { font-family: "Font Awesome 6 Free" !important; font-weight: 400 !important; } body.diamond-sc-v2 .fab, body.diamond-sc-v2 .fa-brands { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; } /* ========================================================= HAMBURGER BUTTON ========================================================= */ body.diamond-page-store .menu-btn { width: 48px !important; height: 48px !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; background: #080808 !important; border: 1px solid #080808 !important; border-radius: 14px !important; box-shadow: none !important; cursor: pointer; transition: background .22s ease, transform .22s ease, border-color .22s ease; } body.diamond-page-store .menu-btn:hover { background: #ffffff !important; border-color: #080808 !important; transform: translateY(-2px); } /* three lines */ body.diamond-page-store .menu-btn span { display: block !important; height: 2px !important; background: #ffffff !important; border-radius: 20px !important; margin: 0 !important; transform-origin: center; transition: transform .25s ease, opacity .2s ease, width .25s ease, background .2s ease; } body.diamond-page-store .menu-btn span:nth-child(1) { width: 22px !important; } body.diamond-page-store .menu-btn span:nth-child(2) { width: 16px !important; } body.diamond-page-store .menu-btn span:nth-child(3) { width: 22px !important; } body.diamond-page-store .menu-btn:hover span { background: #080808 !important; } /* animate hamburger to X */ body.diamond-page-store:has(#drawer.open) .menu-btn span:nth-child(1) { width: 22px !important; transform: translateY(7px) rotate(45deg); } body.diamond-page-store:has(#drawer.open) .menu-btn span:nth-child(2) { opacity: 0; width: 0 !important; } body.diamond-page-store:has(#drawer.open) .menu-btn span:nth-child(3) { width: 22px !important; transform: translateY(-7px) rotate(-45deg); } /* ========================================================= DRAWER OVERLAY ========================================================= */ body.diamond-page-store #overlay { background: rgba(0,0,0,.50) !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; transition: opacity .28s ease !important; } /* ========================================================= DRAWER ========================================================= */ body.diamond-page-store #drawer.drawer { width: 370px !important; max-width: 90vw !important; padding: 18px 16px 28px !important; background: #ffffff !important; color: #080808 !important; border-left: 1px solid #dadada !important; box-shadow: -30px 0 80px rgba(0,0,0,.18) !important; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #111 #eee; transition: transform .33s cubic-bezier(.22,.8,.25,1) !important; } /* top black user section */ body.diamond-page-store #drawer .drawer-user { position: relative; margin: -2px -1px 22px !important; padding: 28px 18px 22px !important; background: #080808 !important; color: #ffffff !important; border: 1px solid #080808 !important; border-radius: 22px !important; text-align: right !important; } /* avatar */ body.diamond-page-store #drawer .drawer-avatar { width: 58px !important; height: 58px !important; margin: 0 0 14px auto !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; color: #080808 !important; border: 0 !important; border-radius: 16px !important; font-size: 22px !important; } body.diamond-page-store #drawer .drawer-avatar i { color: #080808 !important; } /* user name */ body.diamond-page-store #drawer .drawer-user-name { font-family: "Cairo", sans-serif !important; color: #ffffff !important; font-size: 18px !important; font-weight: 800 !important; } body.diamond-page-store #drawer .drawer-user-email { color: #a9a9a9 !important; font-family: "Cairo", sans-serif !important; font-size: 11px !important; } /* ========================================================= VIP CARD INSIDE DRAWER ========================================================= */ body.diamond-page-store #drawer .vip-progress-card { margin-top: 16px !important; padding: 14px !important; background: #161616 !important; border: 1px solid #303030 !important; border-radius: 14px !important; box-shadow: none !important; } body.diamond-page-store #drawer .vip-progress-pill { background: #ffffff !important; color: #080808 !important; border: 0 !important; } body.diamond-page-store #drawer .vip-progress-track { background: #333 !important; } body.diamond-page-store #drawer .vip-progress-fill { background: #ffffff !important; } /* ========================================================= EXCHANGE / CURRENCY BOXES ========================================================= */ body.diamond-page-store #drawer .drawer-exchange-box, body.diamond-page-store #drawer .drawer-currency-switch { min-height: 56px; margin-bottom: 10px !important; padding: 12px 14px !important; background: #f5f5f5 !important; color: #080808 !important; border: 1px solid #e1e1e1 !important; border-radius: 14px !important; box-shadow: none !important; } body.diamond-page-store #drawer .drawer-exchange-box i, body.diamond-page-store #drawer .drawer-currency-switch i { color: #080808 !important; } /* switch */ body.diamond-page-store #drawer .drawer-switch-track { background: #d3d3d3 !important; } body.diamond-page-store #drawer .drawer-switch-dot { background: #080808 !important; } /* ========================================================= DRAWER MENU ITEMS ========================================================= */ body.diamond-page-store #drawer .drawer-menu-item { position: relative; min-height: 52px; margin-bottom: 6px !important; padding: 9px 11px !important; display: flex !important; align-items: center !important; gap: 12px !important; background: transparent !important; color: #111 !important; border: 1px solid transparent !important; border-radius: 13px !important; font-family: "Cairo", sans-serif !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; transition: background .18s ease, color .18s ease, transform .18s ease; } /* icons become square */ body.diamond-page-store #drawer .drawer-menu-item > i { width: 34px !important; height: 34px !important; flex: 0 0 34px; display: flex !important; align-items: center !important; justify-content: center !important; background: #f0f0f0 !important; color: #080808 !important; border-radius: 9px !important; font-size: 14px !important; transition: background .18s ease, color .18s ease; } /* menu hover */ @media (hover:hover) { body.diamond-page-store #drawer .drawer-menu-item:hover { background: #080808 !important; color: #ffffff !important; transform: translateX(-3px); } body.diamond-page-store #drawer .drawer-menu-item:hover > i { background: #ffffff !important; color: #080808 !important; } } /* ========================================================= DRAWER BOTTOM BUTTONS ========================================================= */ body.diamond-page-store #drawer button { font-family: "Cairo", sans-serif !important; } /* logout */ body.diamond-page-store #drawer .logout-btn { width: 100% !important; background: #080808 !important; color: #ffffff !important; border: 1px solid #080808 !important; border-radius: 12px !important; min-height: 46px; } /* ========================================================= CATEGORY SECTION ========================================================= */ body.diamond-page-store #categories.grid { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 18px !important; align-items: stretch; } /* ========================================================= CATEGORY CARD - NEW STYLE ========================================================= */ body.diamond-page-store #categories > .card { position: relative; min-width: 0; min-height: 215px !important; padding: 12px 12px 16px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; overflow: hidden; background: #ffffff !important; border: 1px solid #d8d8d8 !important; border-radius: 20px !important; box-shadow: none !important; cursor: pointer; isolation: isolate; transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease; } /* remove old decorative corner */ body.diamond-page-store #categories > .card::after { content: "↗"; position: absolute; left: 15px; bottom: 14px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: #080808; color: #ffffff; border-radius: 50%; font-family: Arial, sans-serif !important; font-size: 14px; transform: none; transition: background .2s ease, color .2s ease, transform .2s ease; } /* ========================================================= CATEGORY IMAGE ========================================================= */ body.diamond-page-store #categories > .card > img { width: 100% !important; height: 135px !important; margin: 0 0 13px !important; display: block !important; object-fit: cover !important; background: #ececec !important; border-radius: 14px !important; filter: grayscale(1) contrast(1.06) !important; transition: transform .35s ease, filter .35s ease; } /* ========================================================= CATEGORY GENERATED ICON ========================================================= */ body.diamond-page-store #categories > .card > .card-icon { width: 100% !important; height: 135px !important; margin: 0 0 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative; background: #080808 !important; color: #ffffff !important; border: 0 !important; border-radius: 14px !important; clip-path: none !important; overflow: hidden; } /* geometric background */ body.diamond-page-store #categories > .card > .card-icon::before { content: ""; position: absolute; width: 90px; height: 90px; top: -38px; left: -25px; border: 1px solid rgba(255,255,255,.16); transform: rotate(30deg); } body.diamond-page-store #categories > .card > .card-icon::after { content: ""; position: absolute; width: 70px; height: 70px; right: -35px; bottom: -30px; background: rgba(255,255,255,.07); border-radius: 50%; } /* actual icon */ body.diamond-page-store #categories > .card > .card-icon > i { position: relative; z-index: 2; color: #ffffff !important; font-size: 39px !important; transition: transform .25s ease; } /* ========================================================= CATEGORY TITLE ========================================================= */ body.diamond-page-store #categories > .card > .card-title { width: 100%; min-height: 38px; padding-left: 42px; display: flex; align-items: center; color: #080808 !important; font-family: "Cairo", sans-serif !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.45; text-align: right !important; letter-spacing: 0 !important; } /* ========================================================= CATEGORY HOVER ========================================================= */ @media (hover:hover) { body.diamond-page-store #categories > .card:hover { background: #080808 !important; border-color: #080808 !important; transform: translateY(-7px); box-shadow: 0 20px 42px rgba(0,0,0,.14) !important; } body.diamond-page-store #categories > .card:hover > .card-title { color: #ffffff !important; } body.diamond-page-store #categories > .card:hover > img { transform: scale(1.035); filter: grayscale(1) contrast(1.16) brightness(.88) !important; } body.diamond-page-store #categories > .card:hover > .card-icon { background: #ffffff !important; } body.diamond-page-store #categories > .card:hover > .card-icon > i { color: #080808 !important; transform: scale(1.10); } body.diamond-page-store #categories > .card:hover::after { background: #ffffff; color: #080808; transform: rotate(45deg); } } /* ========================================================= CATEGORY SECTION HEADER ========================================================= */ body.diamond-page-store #catTitle { font-family: "Cairo", sans-serif !important; color: #080808 !important; font-size: clamp(23px, 3vw, 36px) !important; font-weight: 900 !important; letter-spacing: 0 !important; } body.diamond-page-store .section-header .view-all { padding: 9px 14px !important; background: #080808 !important; color: #ffffff !important; border: 1px solid #080808 !important; border-radius: 100px !important; font-family: "Cairo", sans-serif !important; font-size: 11px !important; font-weight: 700 !important; text-decoration: none !important; } /* ========================================================= RESPONSIVE CATEGORY CARDS ========================================================= */ @media (max-width: 1000px) { body.diamond-page-store #categories.grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } } @media (max-width: 700px) { body.diamond-page-store #drawer.drawer { width: min(340px, 88vw) !important; padding: 13px 12px 110px !important; } body.diamond-page-store .menu-btn { width: 42px !important; height: 42px !important; border-radius: 12px !important; } body.diamond-page-store #categories.grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; } body.diamond-page-store #categories > .card { min-height: 168px !important; padding: 8px 8px 12px !important; border-radius: 15px !important; } body.diamond-page-store #categories > .card > img, body.diamond-page-store #categories > .card > .card-icon { height: 100px !important; margin-bottom: 9px !important; border-radius: 11px !important; } body.diamond-page-store #categories > .card > .card-icon > i { font-size: 31px !important; } body.diamond-page-store #categories > .card > .card-title { min-height: 34px; padding-left: 34px; font-size: 12px !important; } body.diamond-page-store #categories > .card::after { left: 10px; bottom: 10px; width: 25px; height: 25px; font-size: 11px; } } @media (max-width: 360px) { body.diamond-page-store #categories.grid { gap: 8px !important; } body.diamond-page-store #categories > .card { min-height: 155px !important; } } /* ========================================================= RESTORE CATEGORY IMAGE COLORS V6 Site stays black/white, category artwork stays colored ========================================================= */ body.diamond-page-store #categories > .card > img { filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; } /* colored image on hover too */ @media (hover:hover) { body.diamond-page-store #categories > .card:hover > img { filter: none !important; transform: scale(1.045); opacity: 1 !important; } } /* keep generated fallback icons black/white */ body.diamond-page-store #categories > .card > .card-icon { background: #080808 !important; color: #ffffff !important; } body.diamond-page-store #categories > .card > .card-icon i { color: #ffffff !important; } /* prevent old global rules from grayscaling category images */ body.diamond-sc-v2 #categories .card img, body.diamond-sc-v2 #categories .category-card img, body.diamond-sc-v2 #categories .category-image img { filter: none !important; } /* ========================================================= COLORED CATEGORY CARDS V7 Main website remains black / white ========================================================= */ body.diamond-page-store #categories > .card { --cat: #f1c963; --cat-soft: #fefaef; background: linear-gradient( 145deg, var(--cat-soft) 0%, #ffffff 68% ) !important; border: 1px solid color-mix( in srgb, var(--cat) 32%, #dddddd ) !important; position: relative; box-shadow: 0 7px 22px rgba(0,0,0,.055) !important; } /* colored upper accent */ body.diamond-page-store #categories > .card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 5px; background: var(--cat); z-index: 5; } /* ========================= CATEGORY COLOR MAP ========================= */ body.diamond-page-store #categories > .card[data-cat-tone="games"] { --cat: #fece53; --cat-soft: #fef9ee; } body.diamond-page-store #categories > .card[data-cat-tone="apps"] { --cat: #ffa94d; --cat-soft: #fdf5ec; } body.diamond-page-store #categories > .card[data-cat-tone="balance"] { --cat: #19a974; --cat-soft: #e8f8f2; } body.diamond-page-store #categories > .card[data-cat-tone="coins"] { --cat: #f59e0b; --cat-soft: #fff6df; } body.diamond-page-store #categories > .card[data-cat-tone="social"] { --cat: #d8a900; --cat-soft: #fdf8e5; } body.diamond-page-store #categories > .card[data-cat-tone="cards"] { --cat: #f04464; --cat-soft: #fff0f3; } body.diamond-page-store #categories > .card[data-cat-tone="accounts"] { --cat: #ff6b35; --cat-soft: #fff0ea; } body.diamond-page-store #categories > .card[data-cat-tone="default"] { --cat: #ffd15c; --cat-soft: #fef9ee; } /* ========================= REAL CATEGORY IMAGES KEEP ORIGINAL COLORS ========================= */ body.diamond-page-store #categories > .card > img { filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; background: white !important; border: 0 !important; box-shadow: 0 4px 14px rgba(0,0,0,.08) !important; } /* ========================= FALLBACK ICONS COLORED ========================= */ body.diamond-page-store #categories > .card > .card-icon { background: var(--cat) !important; color: #ffffff !important; box-shadow: 0 8px 20px color-mix( in srgb, var(--cat) 24%, transparent ) !important; } body.diamond-page-store #categories > .card > .card-icon > i { color: #ffffff !important; } /* category title */ body.diamond-page-store #categories > .card > .card-title { color: #111111 !important; } /* arrow uses category color */ body.diamond-page-store #categories > .card::after { background: var(--cat) !important; color: white !important; } /* ========================= OVERRIDE OLD BLACK HOVER ========================= */ @media (hover:hover) { body.diamond-page-store #categories > .card:hover { background: linear-gradient( 145deg, var(--cat-soft) 0%, #ffffff 68% ) !important; border-color: var(--cat) !important; transform: translateY(-7px); box-shadow: 0 20px 40px color-mix( in srgb, var(--cat) 18%, rgba(0,0,0,.08) ) !important; } body.diamond-page-store #categories > .card:hover > .card-title { color: #111111 !important; } body.diamond-page-store #categories > .card:hover > img { filter: none !important; opacity: 1 !important; transform: scale(1.04); } body.diamond-page-store #categories > .card:hover > .card-icon { background: var(--cat) !important; } body.diamond-page-store #categories > .card:hover > .card-icon > i { color: #ffffff !important; transform: scale(1.12); } body.diamond-page-store #categories > .card:hover::after { background: var(--cat) !important; color: #ffffff !important; } } /* ========================================================= CATEGORY VECTOR ICONS V8 ========================================================= */ body.diamond-page-store #categories > .card { padding-top: 12px !important; } /* professional vector badge */ body.diamond-page-store #categories > .card .diamond-category-vector { position: absolute; top: 22px; right: 22px; width: 48px; height: 48px; z-index: 8; display: flex; align-items: center; justify-content: center; background: var(--cat, #111); color: #ffffff; border: 3px solid #ffffff; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.15); pointer-events: none; transition: transform .22s ease, background .22s ease; } body.diamond-page-store #categories > .card .diamond-category-vector svg { width: 25px; height: 25px; display: block; } /* if card has no actual artwork, hide old FA fallback */ body.diamond-page-store #categories > .card:has(.card-icon) > .card-icon { background: #f5f5f5 !important; } body.diamond-page-store #categories > .card:has(.card-icon) > .card-icon > i { display: none !important; } /* vector becomes main visual on fallback categories */ body.diamond-page-store #categories > .card:has(.card-icon) .diamond-category-vector { top: 48px; right: 50%; width: 68px; height: 68px; transform: translateX(50%); border-radius: 18px; border-width: 0; box-shadow: 0 10px 24px color-mix( in srgb, var(--cat) 25%, transparent ); } body.diamond-page-store #categories > .card:has(.card-icon) .diamond-category-vector svg { width: 34px; height: 34px; } /* hover */ @media (hover:hover) { body.diamond-page-store #categories > .card:hover .diamond-category-vector { transform: rotate(-5deg) scale(1.08); } body.diamond-page-store #categories > .card:has(.card-icon):hover .diamond-category-vector { transform: translateX(50%) rotate(-5deg) scale(1.08); } } /* mobile */ @media (max-width:700px) { body.diamond-page-store #categories > .card .diamond-category-vector { top: 15px; right: 15px; width: 40px; height: 40px; border-radius: 11px; border-width: 2px; } body.diamond-page-store #categories > .card .diamond-category-vector svg { width: 21px; height: 21px; } body.diamond-page-store #categories > .card:has(.card-icon) .diamond-category-vector { top: 32px; right: 50%; width: 56px; height: 56px; border: 0; } body.diamond-page-store #categories > .card:has(.card-icon) .diamond-category-vector svg { width: 28px; height: 28px; } } /* ========================================================= DIAMOND BEIGE SYSTEM V9 Replace white with #ebe3ce ========================================================= */ :root { --dv2-white: #ebe3ce !important; --dv2-bg: #ebe3ce !important; --dv2-surface: #ebe3ce !important; --dv2-border: #d3c9ae !important; } /* ========================= GLOBAL BACKGROUND ========================= */ html, body.diamond-sc-v2 { background: #ebe3ce !important; } /* ========================= TEXT THAT USED TO BE WHITE ========================= */ body.diamond-sc-v2 :is( .topbar, .navbar, .site-header, .store-header, header.main-header ) { color: #ebe3ce !important; } body.diamond-sc-v2 :is( .topbar, .navbar, .site-header, .store-header ) a { color: #ebe3ce !important; } /* ========================= HERO ========================= */ body.diamond-page-store .hero-title, body.diamond-page-store .hero h1 { color: #ebe3ce !important; } body.diamond-page-store .hero p, body.diamond-page-store .hero-card p { color: rgba(235,227,206,.78) !important; } /* ========================= CARDS ========================= */ body.diamond-sc-v2 :is( .card, .game-card, .product-card, .category-card, .wallet-card, .order-card, .deposit-card, .method-card, .vip-progress-card, .auth-card, .form-card ) { background: #ebe3ce !important; border-color: #d3c9ae !important; } /* ========================= CATEGORY CARDS ========================= */ body.diamond-page-store #categories > .card { background: linear-gradient( 145deg, var(--cat-soft) 0%, #ebe3ce 68% ) !important; border-color: color-mix( in srgb, var(--cat) 30%, #cfc4a8 ) !important; } /* category image background */ body.diamond-page-store #categories > .card > img { background: #ebe3ce !important; } /* vector border */ body.diamond-page-store #categories > .card .diamond-category-vector { border-color: #ebe3ce !important; } /* fallback icon area */ body.diamond-page-store #categories > .card:has(.card-icon) > .card-icon { background: #e2d9c2 !important; } /* category hover */ @media (hover:hover) { body.diamond-page-store #categories > .card:hover { background: linear-gradient( 145deg, var(--cat-soft) 0%, #ebe3ce 68% ) !important; } } /* ========================= DRAWER ========================= */ body.diamond-page-store #drawer.drawer { background: #ebe3ce !important; color: #080808 !important; border-left-color: #cfc4a8 !important; } /* drawer light blocks */ body.diamond-page-store #drawer .drawer-exchange-box, body.diamond-page-store #drawer .drawer-currency-switch { background: #e2d9c2 !important; border-color: #cfc4a8 !important; } /* drawer menu icon blocks */ body.diamond-page-store #drawer .drawer-menu-item > i { background: #ded4bb !important; } /* menu hover */ @media (hover:hover) { body.diamond-page-store #drawer .drawer-menu-item:hover > i { background: #ebe3ce !important; color: #080808 !important; } } /* ========================= BUTTONS ========================= */ body.diamond-sc-v2 :is( .primary-btn, .btn-primary, .buy-btn, .purchase-btn, .details-btn, .submit-btn ) { color: #ebe3ce !important; } body.diamond-sc-v2 :is( .primary-btn, .btn-primary, .buy-btn, .purchase-btn, .details-btn, .submit-btn ):hover { background: #ebe3ce !important; color: #080808 !important; } /* ========================= INPUTS ========================= */ body.diamond-sc-v2 input, body.diamond-sc-v2 select, body.diamond-sc-v2 textarea { background: #ebe3ce !important; border-color: #cfc4a8 !important; } /* ========================= SEARCH ========================= */ body.diamond-sc-v2 .search-box { background: #ebe3ce !important; border-color: #cfc4a8 !important; } /* ========================= CATEGORY PILLS ========================= */ body.diamond-sc-v2 .category-btn { background: #ebe3ce !important; border-color: #cfc4a8 !important; } body.diamond-sc-v2 .category-btn.active, body.diamond-sc-v2 .category-btn:hover { background: #080808 !important; color: #ebe3ce !important; } /* ========================= TABLES ========================= */ body.diamond-sc-v2 .table-wrapper, body.diamond-sc-v2 table { background: #ebe3ce !important; } body.diamond-sc-v2 thead { background: #080808 !important; } body.diamond-sc-v2 thead th { color: #ebe3ce !important; } body.diamond-sc-v2 td, body.diamond-sc-v2 th { border-color: #d3c9ae !important; } /* ========================= MODALS ========================= */ body.diamond-sc-v2 .modal-content, body.diamond-sc-v2 .modal-box, body.diamond-sc-v2 .details-modal { background: #ebe3ce !important; border-color: #cfc4a8 !important; } /* ========================= AUTH PAGES ========================= */ body.diamond-page-login, body.diamond-page-register, body.diamond-page-otp { background: #ebe3ce !important; } /* ========================= FOOTER ========================= */ .diamond-global-footer { background: #080808 !important; color: #ebe3ce !important; } .diamond-footer-brand h2, .diamond-footer-column h3 { color: #ebe3ce !important; } .diamond-footer-social a { color: #ebe3ce !important; } .diamond-footer-social a:hover { background: #ebe3ce !important; color: #080808 !important; border-color: #ebe3ce !important; } /* ========================= POLICY PAGE ========================= */ .diamond-policy-section { background: #ebe3ce !important; border-color: #cfc4a8 !important; } .diamond-policy-hero h1 { color: #ebe3ce !important; } /* ========================= MOBILE BOTTOM NAV ========================= */ body.diamond-sc-v2 .bottom-nav { background: #080808 !important; } body.diamond-sc-v2 .bottom-nav .nav-item.active { color: #ebe3ce !important; } /* ========================= WHITE SVG / VECTOR AREAS ========================= */ body.diamond-page-store #categories > .card .diamond-category-vector { color: #ebe3ce; } /* hamburger */ body.diamond-page-store .menu-btn span { background: #ebe3ce !important; } body.diamond-page-store .menu-btn:hover { background: #ebe3ce !important; } body.diamond-page-store .menu-btn:hover span { background: #080808 !important; } /* avatar */ body.diamond-page-store #drawer .drawer-avatar { background: #ebe3ce !important; } /* VIP */ body.diamond-page-store #drawer .vip-progress-pill { background: #ebe3ce !important; } body.diamond-page-store #drawer .vip-progress-fill { background: #ebe3ce !important; } /* ========================= HARD WHITE OVERRIDES ========================= */ body.diamond-sc-v2 .bg-white, body.diamond-sc-v2 [style*="background:white"], body.diamond-sc-v2 [style*="background: white"], body.diamond-sc-v2 [style*="background:#fff"], body.diamond-sc-v2 [style*="background: #fff"], body.diamond-sc-v2 [style*="background:#ffffff"], body.diamond-sc-v2 [style*="background: #ffffff"] { background: #ebe3ce !important; } /* ========================================================= DIAMOND BRAND ICON V12 ========================================================= */ :root { --diamond-icon: url("/images/left-logo-mark.png"); } /* ----------------------------------------- REMOVE OLD VECTOR BADGES ----------------------------------------- */ body.diamond-page-store #categories .diamond-category-vector { display: none !important; } /* ----------------------------------------- CATEGORY CARD: REPLACE OLD ARROW WITH DIAMOND ----------------------------------------- */ body.diamond-page-store #categories > .card::after { content: "" !important; position: absolute !important; left: 13px !important; bottom: 12px !important; width: 34px !important; height: 34px !important; display: block !important; background-color: transparent !important; background-image: var(--diamond-icon) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; filter: drop-shadow( 0 4px 7px rgba(0,0,0,.22) ); transition: transform .22s ease, filter .22s ease !important; } /* hover */ @media (hover:hover) { body.diamond-page-store #categories > .card:hover::after { background-image: var(--diamond-icon) !important; background-color: transparent !important; transform: scale(1.13) rotate(-5deg) !important; filter: drop-shadow( 0 6px 10px rgba(0,0,0,.28) ); } } /* ----------------------------------------- CATEGORY WITHOUT IMAGE: USE DIAMOND AS MAIN VISUAL ----------------------------------------- */ body.diamond-page-store #categories > .card > .card-icon { background: transparent !important; background-image: var(--diamond-icon) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 78px 78px !important; box-shadow: none !important; border: 0 !important; } body.diamond-page-store #categories > .card > .card-icon i, body.diamond-page-store #categories > .card > .card-icon svg { display: none !important; } /* ----------------------------------------- HEADER BRAND ICON ----------------------------------------- */ body.diamond-page-store .logo-icon { background: transparent !important; background-image: var(--diamond-icon) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; border: 0 !important; box-shadow: none !important; } body.diamond-page-store .logo-icon > i, body.diamond-page-store .logo-icon > svg { display: none !important; } /* ----------------------------------------- MOBILE ----------------------------------------- */ @media (max-width:700px) { body.diamond-page-store #categories > .card::after { width: 28px !important; height: 28px !important; left: 9px !important; bottom: 9px !important; } body.diamond-page-store #categories > .card > .card-icon { background-size: 62px 62px !important; } } /* ========================================================= DIAMOND GLOBAL BRAND V13 ========================================================= */ :root { --diamond-brand-logo: url("/images/left-logo-mark.png"); } /* Main logo blocks */ body.diamond-sc-v2 .logo-icon { width: 43px !important; height: 43px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 43px; background-color: transparent !important; background-image: var(--diamond-brand-logo) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } /* remove previous store/font-awesome symbol */ body.diamond-sc-v2 .logo-icon > i, body.diamond-sc-v2 .logo-icon > svg, body.diamond-sc-v2 .logo-icon::before, body.diamond-sc-v2 .logo-icon::after { display: none !important; } /* Generic logo images */ body.diamond-sc-v2 img.site-logo, body.diamond-sc-v2 img.brand-logo, body.diamond-sc-v2 img.logo-img { object-fit: contain !important; } /* Drawer brand icon */ body.diamond-page-store #drawer .drawer-avatar.diamond-brand-avatar { background-color: transparent !important; background-image: var(--diamond-brand-logo) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; } /* loading-logo appearance */ body.diamond-sc-v2 .loader-logo { object-fit: contain !important; filter: none !important; border-radius: 0 !important; } /* mobile */ @media (max-width:700px) { body.diamond-sc-v2 .logo-icon { width: 36px !important; height: 36px !important; flex-basis: 36px; } } /* ========================================================= CATEGORY DIAMOND ROLLBACK V14 Restore vectors + arrow Keep diamond as website brand ========================================================= */ /* bring back category vector badges */ body.diamond-page-store #categories .diamond-category-vector { display: flex !important; } /* remove diamond artwork from fallback category area */ body.diamond-page-store #categories > .card > .card-icon { background-image: none !important; } /* V8 uses the custom SVG vector instead of Font Awesome */ body.diamond-page-store #categories > .card:has(.card-icon) > .card-icon { background: #e2d9c2 !important; background-image: none !important; } body.diamond-page-store #categories > .card > .card-icon > i { display: none !important; } /* restore arrow instead of small diamond */ body.diamond-page-store #categories > .card::after { content: "↗" !important; position: absolute !important; left: 13px !important; bottom: 12px !important; width: 34px !important; height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: var(--cat, #080808) !important; background-image: none !important; color: #ffffff !important; border-radius: 50% !important; box-shadow: none !important; filter: none !important; font-family: Arial, sans-serif !important; font-size: 14px !important; transform: none !important; transition: transform .2s ease, background .2s ease !important; } @media (hover:hover) { body.diamond-page-store #categories > .card:hover::after { background: var(--cat, #080808) !important; background-image: none !important; color: #ffffff !important; transform: rotate(45deg) !important; filter: none !important; } } /* mobile arrow */ @media (max-width:700px) { body.diamond-page-store #categories > .card::after { width: 25px !important; height: 25px !important; left: 9px !important; bottom: 9px !important; font-size: 11px !important; } } /* ========================================================= TRANSPARENT HEADER + BOTTOM NAV V15 ========================================================= */ /* ========================= TOP HEADER ========================= */ body.diamond-sc-v2 .topbar, body.diamond-sc-v2 .navbar, body.diamond-sc-v2 .site-header, body.diamond-sc-v2 .store-header, body.diamond-sc-v2 header.main-header { background: rgba(235, 227, 206, .72) !important; color: #080808 !important; border: 0 !important; border-bottom: 1px solid rgba(8,8,8,.08) !important; box-shadow: none !important; backdrop-filter: blur(18px) saturate(1.15) !important; -webkit-backdrop-filter: blur(18px) saturate(1.15) !important; } /* header links + icons */ body.diamond-sc-v2 .topbar a, body.diamond-sc-v2 .navbar a, body.diamond-sc-v2 .site-header a, body.diamond-sc-v2 .store-header a, body.diamond-sc-v2 .topbar i, body.diamond-sc-v2 .navbar i { color: #080808 !important; } /* balance box */ body.diamond-page-store .balance { background: rgba(255,255,255,.24) !important; color: #080808 !important; border: 1px solid rgba(8,8,8,.10) !important; box-shadow: none !important; backdrop-filter: blur(10px); } /* hamburger */ body.diamond-page-store .menu-btn { background: rgba(8,8,8,.92) !important; border: 0 !important; box-shadow: none !important; } /* ========================= BOTTOM NAV ========================= */ body.diamond-sc-v2 .bottom-nav { background: rgba(235, 227, 206, .74) !important; border: 0 !important; border-top: 1px solid rgba(8,8,8,.09) !important; box-shadow: 0 -8px 30px rgba(0,0,0,.06) !important; backdrop-filter: blur(18px) saturate(1.15) !important; -webkit-backdrop-filter: blur(18px) saturate(1.15) !important; } /* bottom links */ body.diamond-sc-v2 .bottom-nav .nav-item { color: rgba(8,8,8,.52) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transition: color .18s ease, transform .18s ease; } /* icons */ body.diamond-sc-v2 .bottom-nav .nav-item i { color: inherit !important; } /* active item */ body.diamond-sc-v2 .bottom-nav .nav-item.active { color: #080808 !important; background: transparent !important; } /* small active dot */ body.diamond-sc-v2 .bottom-nav .nav-item.active::after { content: ""; position: absolute; bottom: -3px; left: 50%; width: 5px; height: 5px; transform: translateX(-50%); background: #080808; border-radius: 50%; } /* make nav item ready for active dot */ body.diamond-sc-v2 .bottom-nav .nav-item { position: relative; } /* remove old purple/white states */ body.diamond-sc-v2 .bottom-nav .nav-item:hover, body.diamond-sc-v2 .bottom-nav .nav-item:active { background: transparent !important; color: #080808 !important; } @media (hover:hover) { body.diamond-sc-v2 .bottom-nav .nav-item:hover { transform: translateY(-2px); } } /* ========================= MOBILE ========================= */ @media (max-width:700px) { body.diamond-sc-v2 .bottom-nav { background: rgba(235,227,206,.78) !important; padding-top: 7px !important; } body.diamond-sc-v2 .topbar { background: rgba(235,227,206,.78) !important; } } /* ========================================================= DIAMOND NEON PURPLE / INDIGO V16 ========================================================= */ :root { --dv2-bg: #131215 !important; --dv2-bg-2: #2a292c !important; --dv2-surface: rgba(43, 42, 45, .88) !important; --dv2-surface-2: rgba(56, 55, 58, .92) !important; --dv2-text: #fefcf6 !important; --dv2-text-soft: #e4d7b7 !important; --dv2-border: rgba(255, 207, 87, .28) !important; --dv2-purple: #f6ac5c !important; --dv2-purple-2: #d98328 !important; --dv2-blue: #ffcd4f !important; --dv2-cyan: #f8ce38 !important; --dv2-glow: 0 0 0 1px rgba(246, 172, 92,.18), 0 14px 34px rgba(248, 206, 56,.14), 0 10px 28px rgba(246, 172, 92,.16) !important; --dv2-glow-strong: 0 0 0 1px rgba(246, 172, 92,.34), 0 0 24px rgba(246, 172, 92,.22), 0 0 38px rgba(255, 205, 79,.16) !important; } html, body, body.diamond-sc-v2 { background: radial-gradient(circle at top right, rgba(255, 205, 79,.16), transparent 24%), radial-gradient(circle at top left, rgba(246, 172, 92,.18), transparent 26%), linear-gradient(180deg, #1a191c 0%, #1c1b1e 45%, #131215 100%) !important; color: var(--dv2-text) !important; } body.diamond-sc-v2 * { font-family: "Cairo", sans-serif !important; } body.diamond-sc-v2 .topbar, body.diamond-sc-v2 .navbar, body.diamond-sc-v2 .site-header, body.diamond-sc-v2 .store-header, body.diamond-sc-v2 header.main-header { background: rgba(31, 30, 33, .72) !important; border-bottom: 1px solid rgba(246, 172, 92,.22) !important; backdrop-filter: blur(18px) saturate(1.2) !important; -webkit-backdrop-filter: blur(18px) saturate(1.2) !important; box-shadow: 0 10px 24px rgba(0,0,0,.22) !important; } body.diamond-sc-v2 .topbar a, body.diamond-sc-v2 .navbar a, body.diamond-sc-v2 .topbar i, body.diamond-sc-v2 .navbar i, body.diamond-sc-v2 .site-header a { color: #fefdf9 !important; } body.diamond-page-store .menu-btn, body.diamond-sc-v2 .menu-btn { background: linear-gradient(135deg, #ed963a, #f6c13b) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: var(--dv2-glow) !important; } body.diamond-sc-v2 .bottom-nav { background: rgba(28, 27, 30, .82) !important; border-top: 1px solid rgba(246, 172, 92,.24) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; box-shadow: 0 -10px 24px rgba(0,0,0,.22) !important; } body.diamond-sc-v2 .bottom-nav .nav-item { color: rgba(253, 247, 232,.58) !important; } body.diamond-sc-v2 .bottom-nav .nav-item.active, body.diamond-sc-v2 .bottom-nav .nav-item:hover { color: #ffffff !important; } body.diamond-sc-v2 .bottom-nav .nav-item.active i, body.diamond-sc-v2 .bottom-nav .nav-item:hover i { filter: drop-shadow(0 0 10px rgba(246, 172, 92,.48)); } body.diamond-sc-v2 .card, body.diamond-sc-v2 .panel, body.diamond-sc-v2 .box, body.diamond-sc-v2 .wallet-card, body.diamond-sc-v2 .game-card, body.diamond-sc-v2 .product-card, body.diamond-sc-v2 .order-card { background: linear-gradient(180deg, rgba(49, 48, 51,.96), rgba(37, 36, 39,.96)) !important; border: 1px solid rgba(246, 172, 92,.16) !important; box-shadow: var(--dv2-glow) !important; color: var(--dv2-text) !important; border-radius: 22px !important; } body.diamond-sc-v2 .btn, body.diamond-sc-v2 button, body.diamond-sc-v2 .primary-btn, body.diamond-sc-v2 .action-btn { background: linear-gradient(135deg, #f6ac5c 0%, #ffcd4f 100%) !important; color: #fff !important; border: 0 !important; border-radius: 16px !important; box-shadow: 0 10px 22px rgba(255, 205, 79,.22), 0 8px 24px rgba(246, 172, 92,.18) !important; } body.diamond-sc-v2 input, body.diamond-sc-v2 select, body.diamond-sc-v2 textarea { background: rgba(44, 43, 46,.92) !important; color: #fff !important; border: 1px solid rgba(246, 172, 92,.20) !important; border-radius: 14px !important; box-shadow: none !important; } body.diamond-sc-v2 input::placeholder, body.diamond-sc-v2 textarea::placeholder { color: #cfc09b !important; } /* ========================================================= CATEGORY CARDS - NEW LOOK ========================================================= */ body.diamond-page-store #categories { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 18px !important; } body.diamond-page-store #categories > .card { position: relative !important; overflow: hidden !important; padding: 14px 14px 16px !important; min-height: 220px !important; border-radius: 24px !important; background: linear-gradient(180deg, rgba(49, 48, 51, .96), rgba(32, 31, 34, .98)) !important; border: 1px solid rgba(255, 207, 87,.22) !important; box-shadow: var(--dv2-glow) !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; } body.diamond-page-store #categories > .card::before { content: "" !important; position: absolute !important; inset: 0 !important; background: radial-gradient(circle at top right, rgba(255, 205, 79,.22), transparent 30%), radial-gradient(circle at bottom left, rgba(246, 172, 92,.20), transparent 30%); pointer-events: none !important; } body.diamond-page-store #categories > .card::after { content: "" !important; position: absolute !important; top: 12px !important; right: 12px !important; width: 54px !important; height: 54px !important; border-radius: 16px !important; background: linear-gradient(135deg, rgba(246, 172, 92,.20), rgba(248, 206, 56,.10)) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: inset 0 0 20px rgba(255,255,255,.02) !important; pointer-events: none !important; } body.diamond-page-store #categories > .card:hover { transform: translateY(-6px) !important; border-color: rgba(255, 205, 79,.38) !important; box-shadow: var(--dv2-glow-strong) !important; } body.diamond-page-store #categories > .card img { width: 100% !important; height: 118px !important; object-fit: cover !important; border-radius: 18px !important; display: block !important; margin-bottom: 14px !important; border: 1px solid rgba(255,255,255,.08) !important; background: rgba(255,255,255,.03) !important; } body.diamond-page-store #categories > .card h3, body.diamond-page-store #categories > .card .title, body.diamond-page-store #categories > .card .category-name { color: #ffffff !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1.5 !important; margin: 0 !important; position: relative !important; z-index: 2 !important; } body.diamond-page-store #categories > .card p, body.diamond-page-store #categories > .card .subtitle, body.diamond-page-store #categories > .card small { color: #dfd1ae !important; } body.diamond-page-store #categories > .card a, body.diamond-page-store #categories > .card .category-link { text-decoration: none !important; } body.diamond-page-store #categories > .card .diamond-arrow, body.diamond-page-store #categories > .card .card-arrow, body.diamond-page-store #categories > .card .go-icon { position: absolute !important; left: 14px !important; bottom: 14px !important; width: 42px !important; height: 42px !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, #f6ac5c, #ffcd4f) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(255, 205, 79,.26) !important; } body.diamond-page-store #categories > .card svg, body.diamond-page-store #categories > .card i { position: relative !important; z-index: 2 !important; } body.diamond-page-store #categories > .card .emoji, body.diamond-page-store #categories > .card .vector-icon, body.diamond-page-store #categories > .card .fallback-icon { display: none !important; } /* fallback if category has no image */ body.diamond-page-store #categories > .card.no-image-card, body.diamond-page-store #categories > .card[data-no-image="1"] { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; min-height: 190px !important; } body.diamond-page-store #categories > .card.no-image-card img, body.diamond-page-store #categories > .card[data-no-image="1"] img { display: none !important; } body.diamond-page-store #categories > .card.no-image-card .diamond-fallback, body.diamond-page-store #categories > .card[data-no-image="1"] .diamond-fallback { width: 64px !important; height: 64px !important; border-radius: 20px !important; margin-bottom: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, rgba(246, 172, 92,.26), rgba(255, 205, 79,.18)) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: var(--dv2-glow) !important; } body.diamond-page-store #categories > .card.no-image-card .diamond-fallback img, body.diamond-page-store #categories > .card[data-no-image="1"] .diamond-fallback img { display: block !important; width: 28px !important; height: 28px !important; object-fit: contain !important; margin: 0 !important; border: 0 !important; background: transparent !important; } /* drawer */ body.diamond-sc-v2 .side-menu, body.diamond-sc-v2 .sidebar, body.diamond-sc-v2 .drawer { background: linear-gradient(180deg, rgba(33, 32, 35,.98), rgba(25, 24, 27,.98)) !important; color: #fff !important; border-left: 1px solid rgba(246, 172, 92,.18) !important; box-shadow: 0 20px 50px rgba(0,0,0,.35) !important; } body.diamond-sc-v2 .side-menu a, body.diamond-sc-v2 .sidebar a, body.diamond-sc-v2 .drawer a { color: #fefcf7 !important; } body.diamond-sc-v2 .side-menu a:hover, body.diamond-sc-v2 .sidebar a:hover, body.diamond-sc-v2 .drawer a:hover { background: rgba(246, 172, 92,.10) !important; color: #fff !important; } /* footer */ body.diamond-sc-v2 footer, body.diamond-sc-v2 .site-footer { background: linear-gradient(180deg, rgba(25, 24, 27,.95), rgba(18, 17, 20,.98)) !important; color: #fcf4de !important; border-top: 1px solid rgba(246, 172, 92,.18) !important; } body.diamond-sc-v2 footer a, body.diamond-sc-v2 .site-footer a { color: #ffffff !important; } /* ========================================================= CATEGORY CARDS REFINEMENT V17 Cleaner neon cards for store categories ========================================================= */ body.diamond-page-store #categories { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 18px !important; align-items: stretch !important; } body.diamond-page-store #categories > * { min-width: 0 !important; } body.diamond-page-store #categories .dv2-cat-card { position: relative !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; min-height: 250px !important; padding: 12px !important; border-radius: 24px !important; overflow: hidden !important; text-decoration: none !important; background: linear-gradient(180deg, rgba(55, 54, 57,.96) 0%, rgba(33, 32, 35,.98) 100%) !important; border: 1px solid rgba(246, 172, 92,.22) !important; box-shadow: 0 10px 30px rgba(0,0,0,.24), 0 0 0 1px rgba(255, 205, 79,.08) inset !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; } body.diamond-page-store #categories .dv2-cat-card:hover { transform: translateY(-5px) !important; border-color: rgba(255, 205, 79,.38) !important; box-shadow: 0 16px 38px rgba(0,0,0,.30), 0 0 20px rgba(246, 172, 92,.16), 0 0 28px rgba(255, 205, 79,.12) !important; } body.diamond-page-store #categories .dv2-cat-card::before { content: "" !important; position: absolute !important; inset: 0 !important; background: radial-gradient(circle at top right, rgba(255, 205, 79,.18), transparent 26%), radial-gradient(circle at bottom left, rgba(246, 172, 92,.16), transparent 28%); pointer-events: none !important; } body.diamond-page-store #categories .dv2-cat-card::after { content: "" !important; position: absolute !important; left: 14px !important; bottom: 14px !important; width: 36px !important; height: 36px !important; border-radius: 12px !important; background: linear-gradient(135deg, #f6ac5c 0%, #ffcd4f 100%) !important; box-shadow: 0 10px 18px rgba(255, 205, 79,.22), 0 8px 16px rgba(246, 172, 92,.18) !important; z-index: 2 !important; } body.diamond-page-store #categories .dv2-cat-card .dv2-cat-arrow-icon { position: absolute !important; left: 23px !important; bottom: 23px !important; width: 18px !important; height: 18px !important; object-fit: contain !important; z-index: 3 !important; pointer-events: none !important; } body.diamond-page-store #categories .dv2-cat-card img.dv2-cat-image { width: 100% !important; height: 132px !important; object-fit: cover !important; display: block !important; border-radius: 18px !important; margin: 0 0 14px 0 !important; border: 1px solid rgba(255,255,255,.08) !important; background: rgba(255,255,255,.03) !important; position: relative !important; z-index: 1 !important; } body.diamond-page-store #categories .dv2-cat-card .dv2-cat-title { display: block !important; color: #ffffff !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1.5 !important; margin: 4px 0 0 0 !important; padding: 0 0 46px 0 !important; position: relative !important; z-index: 2 !important; text-align: right !important; word-break: break-word !important; } body.diamond-page-store #categories .dv2-cat-card .dv2-cat-sub { color: #e4d7b7 !important; font-size: 13px !important; line-height: 1.5 !important; margin-top: 6px !important; position: relative !important; z-index: 2 !important; padding-bottom: 42px !important; } body.diamond-page-store #categories .dv2-cat-card .dv2-cat-fallback { width: 78px !important; height: 78px !important; border-radius: 22px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 12px 0 18px 0 !important; background: linear-gradient(135deg, rgba(246, 172, 92,.22), rgba(255, 205, 79,.18)) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 14px 28px rgba(0,0,0,.16), 0 0 24px rgba(255, 205, 79,.10) !important; position: relative !important; z-index: 2 !important; } body.diamond-page-store #categories .dv2-cat-card .dv2-cat-fallback img { width: 34px !important; height: 34px !important; object-fit: contain !important; margin: 0 !important; border: 0 !important; background: transparent !important; } body.diamond-page-store #categories .dv2-cat-card.dv2-cat-no-image { min-height: 220px !important; justify-content: center !important; } body.diamond-page-store #categories .dv2-cat-card.dv2-cat-no-image .dv2-cat-title { padding-bottom: 46px !important; } body.diamond-page-store #categories .dv2-cat-card .emoji, body.diamond-page-store #categories .dv2-cat-card .vector-icon, body.diamond-page-store #categories .dv2-cat-card .fallback-icon, body.diamond-page-store #categories .dv2-cat-card .go-icon, body.diamond-page-store #categories .dv2-cat-card .card-arrow, body.diamond-page-store #categories .dv2-cat-card [class*="icon-emoji"], body.diamond-page-store #categories .dv2-cat-card i.fas, body.diamond-page-store #categories .dv2-cat-card i.fa { display: none !important; } @media (max-width: 640px) { body.diamond-page-store #categories { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } body.diamond-page-store #categories .dv2-cat-card { min-height: 220px !important; padding: 10px !important; border-radius: 20px !important; } body.diamond-page-store #categories .dv2-cat-card img.dv2-cat-image { height: 110px !important; border-radius: 15px !important; } body.diamond-page-store #categories .dv2-cat-card .dv2-cat-title { font-size: 15px !important; } } /* KEEP CATEGORY HEADING WHITE */ body.diamond-page-store #catTitle { color: #ffffff !important; } /* ========================================================= PREMIUM NEON BANNER + SUBLINE V19 ========================================================= */ /* ----------------------------------------- BANNER WRAPPER ----------------------------------------- */ body.diamond-page-store .slider-container { position: relative !important; width: calc(100% - 28px) !important; max-width: 1180px !important; height: auto !important; aspect-ratio: 3.15 / 1 !important; min-height: 170px !important; margin: 20px auto 13px !important; overflow: hidden !important; border-radius: 22px !important; background: #1c1b1e !important; border: 1px solid rgba(255, 209, 92, .32) !important; box-shadow: 0 20px 55px rgba(0,0,0,.34), 0 0 28px rgba(255, 203, 70,.09), 0 0 38px rgba(255, 194, 38,.06) !important; isolation: isolate !important; } /* premium neon edge */ body.diamond-page-store .slider-container::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 10 !important; pointer-events: none !important; border-radius: inherit !important; border: 1px solid transparent !important; background: linear-gradient( 115deg, rgba(255, 204, 76,.72), rgba(255, 196, 45,.24) 42%, rgba(183, 123, 58,.16) 68%, rgba(246, 172, 92,.52) ) border-box !important; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* soft light inside banner */ body.diamond-page-store .slider-container::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 3 !important; pointer-events: none !important; background: linear-gradient( 180deg, rgba(255,255,255,.025), transparent 38%, rgba(22, 21, 24,.08) ) !important; } /* ----------------------------------------- SLIDER CONTENT ----------------------------------------- */ body.diamond-page-store .slider-container .slider, body.diamond-page-store .slider-container .slides, body.diamond-page-store .slider-container .slider-track { width: 100% !important; height: 100% !important; } body.diamond-page-store .slider-container .slide { height: 100% !important; border-radius: inherit !important; overflow: hidden !important; background: #1c1b1e !important; } body.diamond-page-store .slider-container .slide img, body.diamond-page-store .slider-container img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center !important; border-radius: inherit !important; filter: saturate(1.04) contrast(1.025) !important; transform: scale(1.001); transition: transform .7s ease, filter .4s ease !important; } @media (hover:hover) { body.diamond-page-store .slider-container:hover { border-color: rgba(255, 210, 96,.44) !important; box-shadow: 0 24px 62px rgba(0,0,0,.38), 0 0 34px rgba(255, 204, 75,.12), 0 0 48px rgba(255, 196, 46,.07) !important; } body.diamond-page-store .slider-container:hover .slide img, body.diamond-page-store .slider-container:hover > img { transform: scale(1.012) !important; } } /* ----------------------------------------- SLIDER DOTS ----------------------------------------- */ body.diamond-page-store .slider-container .dots, body.diamond-page-store .slider-container .slider-dots, body.diamond-page-store .slider-container .pagination { position: absolute !important; bottom: 11px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 20 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 5px 8px !important; border-radius: 99px !important; background: rgba(23, 22, 25,.45) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } body.diamond-page-store .slider-container .dot, body.diamond-page-store .slider-container .slider-dot { width: 6px !important; height: 6px !important; border-radius: 99px !important; background: rgba(255,255,255,.40) !important; border: 0 !important; transition: width .22s ease, background .22s ease !important; } body.diamond-page-store .slider-container .dot.active, body.diamond-page-store .slider-container .slider-dot.active { width: 20px !important; background: linear-gradient( 90deg, #ffb05c, #ffcb46 ) !important; } /* ========================================================= TEXT UNDER BANNER ========================================================= */ body.diamond-page-store .ticker { width: 100% !important; max-width: 1180px !important; margin: 0 auto 26px !important; padding: 0 16px !important; overflow: visible !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body.diamond-page-store .ticker .ticker-track { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; animation: none !important; transform: none !important; white-space: normal !important; } body.diamond-page-store .ticker .ticker-content { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: auto !important; max-width: 100% !important; padding: 9px 17px !important; color: #f6eacd !important; font-family: "Cairo", sans-serif !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.7 !important; text-align: center !important; letter-spacing: 0 !important; background: rgba(45, 44, 47,.60) !important; border: 1px solid rgba(190, 163, 93,.20) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } /* remove old star */ body.diamond-page-store .ticker .ticker-content > i { display: none !important; } /* elegant neon mark */ body.diamond-page-store .ticker .ticker-content::before { content: "" !important; width: 7px !important; height: 7px !important; flex: 0 0 7px !important; border-radius: 50% !important; background: linear-gradient( 135deg, #f4b674, #ffcc4c ) !important; box-shadow: 0 0 12px rgba(255, 207, 84,.62) !important; } /* keep section heading white */ body.diamond-page-store #catTitle { color: #ffffff !important; } /* ----------------------------------------- MOBILE ----------------------------------------- */ @media (max-width: 700px) { body.diamond-page-store .slider-container { width: calc(100% - 22px) !important; aspect-ratio: 2.15 / 1 !important; min-height: 135px !important; margin-top: 14px !important; border-radius: 17px !important; } body.diamond-page-store .ticker { margin-bottom: 21px !important; padding: 0 11px !important; } body.diamond-page-store .ticker .ticker-content { width: 100% !important; padding: 8px 12px !important; border-radius: 13px !important; font-size: 10.5px !important; } } /* ========================================================= CATEGORY CLEANUP V20 ========================================================= */ /* اسم الكاتيغوري أبيض */ body.diamond-page-store #categories .card-title, body.diamond-page-store #categories .dv2-cat-title, body.diamond-page-store #categories .category-name { color: #ffffff !important; } /* إذا كلمة "التصنيف" جاية من pseudo element */ body.diamond-page-store #categories .card-title::before, body.diamond-page-store #categories .dv2-cat-title::before, body.diamond-page-store #categories .category-name::before { content: none !important; display: none !important; } /* صور الكاتيغوري مربعة */ body.diamond-page-store #categories > .card > img, body.diamond-page-store #categories > .card img.dv2-cat-image { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; object-position: center !important; border-radius: 16px !important; } /* موبايل نفس الشي */ @media (max-width:700px) { body.diamond-page-store #categories > .card > img, body.diamond-page-store #categories > .card img.dv2-cat-image { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; } } /* ========================================================= HERO + CATEGORY FIX V21 ========================================================= */ /* الجملة تحت العنوان وفوق الصورة */ .diamond-page-store .dv2-hero-subline { display: block !important; width: min(760px, 92%) !important; margin: 14px auto 24px !important; padding: 14px 18px !important; text-align: center !important; direction: rtl !important; color: #ffffff !important; font-size: 18px !important; line-height: 1.9 !important; font-weight: 700 !important; background: linear-gradient(135deg, rgba(237, 150, 58,.18), rgba(235, 179, 37,.18) ) !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 18px !important; box-shadow: 0 10px 30px rgba(246, 193, 59,.14), 0 8px 24px rgba(237, 150, 58,.14) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } /* لو كان عنوان البانر */ .diamond-page-store .dv2-hero-title, .diamond-page-store .hero-title, .diamond-page-store .banner-title, .diamond-page-store .hero h1 { margin-bottom: 10px !important; } /* كروت الكاتيغوري: اسم القسم كبير وواضح */ body.diamond-page-store #categories .card-title, body.diamond-page-store #categories .dv2-cat-title, body.diamond-page-store #categories .category-name, body.diamond-page-store #categories h3, body.diamond-page-store #categories h4 { color: #ffffff !important; font-size: 24px !important; line-height: 1.35 !important; font-weight: 800 !important; letter-spacing: 0 !important; margin-top: 12px !important; margin-bottom: 4px !important; } /* اخفاء أي label صغير قديم */ body.diamond-page-store #categories .dv2-cat-kicker, body.diamond-page-store #categories .category-kicker, body.diamond-page-store #categories .category-label, body.diamond-page-store #categories .card-kicker, body.diamond-page-store #categories .card-subtitle, body.diamond-page-store #categories .category-meta { display: none !important; } /* تحسين spacing داخل الكرت */ body.diamond-page-store #categories > .card { padding-bottom: 18px !important; } @media (max-width: 700px) { .diamond-page-store .dv2-hero-subline { width: calc(100% - 24px) !important; font-size: 15px !important; line-height: 1.8 !important; padding: 12px 14px !important; margin: 10px auto 18px !important; } body.diamond-page-store #categories .card-title, body.diamond-page-store #categories .dv2-cat-title, body.diamond-page-store #categories .category-name, body.diamond-page-store #categories h3, body.diamond-page-store #categories h4 { font-size: 20px !important; } } /* ========================================================= HERO LINE ABOVE BANNER V22 ========================================================= */ /* V21 duplicate is no longer used */ body.diamond-page-store .dv2-hero-subline { display: none !important; } /* ticker becomes hero subtitle */ body.diamond-page-store .ticker.dv2-hero-ticker { width: calc(100% - 28px) !important; max-width: 1180px !important; margin: 10px auto 16px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; } body.diamond-page-store .ticker.dv2-hero-ticker .ticker-track { width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; transform: none !important; animation: none !important; white-space: normal !important; } body.diamond-page-store .ticker.dv2-hero-ticker .ticker-content { width: auto !important; max-width: 900px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 12px 22px !important; direction: rtl !important; text-align: center !important; font-family: "Cairo", sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.8 !important; color: #ffffff !important; background: linear-gradient( 135deg, rgba(196, 158, 61, .34), rgba(190, 146, 35, .27) ) !important; border: 1px solid rgba(244, 210, 123, .42) !important; border-radius: 14px !important; box-shadow: 0 12px 30px rgba(0,0,0,.20), 0 0 22px rgba(255, 203, 72,.12) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } /* don't show the old Font Awesome star */ body.diamond-page-store .ticker.dv2-hero-ticker .ticker-content > i { display: none !important; } /* small premium line */ body.diamond-page-store .ticker.dv2-hero-ticker .ticker-content::before { content: "" !important; width: 28px !important; height: 2px !important; flex: 0 0 28px !important; background: linear-gradient( 90deg, #f4b877, #ffcb47 ) !important; border-radius: 20px !important; box-shadow: 0 0 12px rgba(255, 207, 86,.55) !important; } /* tighten banner gap now that subtitle is above it */ body.diamond-page-store .slider-container { margin-top: 0 !important; } /* mobile */ @media (max-width:700px) { body.diamond-page-store .ticker.dv2-hero-ticker { width: calc(100% - 22px) !important; margin: 8px auto 12px !important; } body.diamond-page-store .ticker.dv2-hero-ticker .ticker-content { width: 100% !important; padding: 10px 13px !important; font-size: 12px !important; line-height: 1.75 !important; border-radius: 12px !important; } body.diamond-page-store .ticker.dv2-hero-ticker .ticker-content::before { width: 18px !important; flex-basis: 18px !important; } } /* TOP BAR BALANCE WHITE */ body.diamond-page-store .balance, body.diamond-page-store #balanceBox, body.diamond-page-store #balanceAmount, body.diamond-page-store .balance i, body.diamond-page-store .balance span { color: #ffffff !important; } /* HEADER BALANCE - WHITE */ body.diamond-page-store #balanceBox, body.diamond-page-store #balanceBox #balanceAmount, body.diamond-page-store #balanceBox span, body.diamond-page-store #balanceBox i, body.diamond-page-store #balanceBox .add-balance { color: #ffffff !important; } /* إذا الرصيد نفسه رابط أو زر */ body.diamond-page-store #balanceBox a, body.diamond-page-store #balanceBox button { color: #ffffff !important; } /* ========================================================= CATEGORY LOAD MOTION V23 ========================================================= */ /* ----------------------------------------- LOADER CENTERED IN VIEWPORT ----------------------------------------- */ body.diamond-page-store #categories > .sphere-loader, body.diamond-page-store #loaderContainer { position: fixed !important; top: 50% !important; left: 50% !important; width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: translate(-50%, -50%) !important; z-index: 999 !important; background: transparent !important; } /* loader itself */ body.diamond-page-store #loaderContainer .loader { width: 48px !important; height: 48px !important; border-radius: 50% !important; background: transparent !important; border: 3px solid rgba(255,255,255,.12) !important; border-top-color: #ffb566 !important; border-right-color: #ffcb47 !important; box-shadow: 0 0 18px rgba(246, 172, 92,.18), 0 0 28px rgba(255, 203, 71,.12) !important; animation: diamondLoaderSpin .75s linear infinite !important; } @keyframes diamondLoaderSpin { to { transform: rotate(360deg); } } /* ----------------------------------------- CATEGORY REVEAL ----------------------------------------- */ body.diamond-page-store #categories > .card { opacity: 0; animation: diamondCategoryReveal .58s cubic-bezier(.22,.8,.24,1) forwards !important; will-change: transform, opacity; } @keyframes diamondCategoryReveal { 0% { opacity: 0; transform: translateY(34px) scale(.985); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* ----------------------------------------- STAGGER - ONE AFTER ANOTHER ----------------------------------------- */ body.diamond-page-store #categories > .card:nth-child(1) { animation-delay: .04s !important; } body.diamond-page-store #categories > .card:nth-child(2) { animation-delay: .10s !important; } body.diamond-page-store #categories > .card:nth-child(3) { animation-delay: .16s !important; } body.diamond-page-store #categories > .card:nth-child(4) { animation-delay: .22s !important; } body.diamond-page-store #categories > .card:nth-child(5) { animation-delay: .28s !important; } body.diamond-page-store #categories > .card:nth-child(6) { animation-delay: .34s !important; } body.diamond-page-store #categories > .card:nth-child(7) { animation-delay: .40s !important; } body.diamond-page-store #categories > .card:nth-child(8) { animation-delay: .46s !important; } body.diamond-page-store #categories > .card:nth-child(9) { animation-delay: .52s !important; } body.diamond-page-store #categories > .card:nth-child(10) { animation-delay: .58s !important; } body.diamond-page-store #categories > .card:nth-child(11) { animation-delay: .64s !important; } body.diamond-page-store #categories > .card:nth-child(12) { animation-delay: .70s !important; } /* if there are more categories */ body.diamond-page-store #categories > .card:nth-child(n+13) { animation-delay: .74s !important; } /* ----------------------------------------- MOBILE - slightly faster ----------------------------------------- */ @media (max-width:700px) { body.diamond-page-store #categories > .card { animation-duration: .48s !important; } } /* ----------------------------------------- ACCESSIBILITY ----------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.diamond-page-store #categories > .card { opacity: 1 !important; animation: none !important; transform: none !important; } body.diamond-page-store #loaderContainer .loader { animation-duration: 1.5s !important; } } /* ========================================================= FIXED CENTER LOADER V24 Simple ring only ========================================================= */ /* الحاوية ثابتة بالنص، بدون أي حركة */ body.diamond-page-store #loaderContainer, body.diamond-page-store #categories > .sphere-loader { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; min-height: 100vh !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; z-index: 9999 !important; pointer-events: none !important; } /* الدويرة فقط */ body.diamond-page-store #loaderContainer .loader, body.diamond-page-store #categories > .sphere-loader .loader { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 42px !important; height: 42px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: transparent !important; background-image: none !important; border: 3px solid rgba(255,255,255,.16) !important; border-top-color: #f6ac5c !important; border-right-color: #ffcd4f !important; box-shadow: none !important; opacity: 1 !important; animation: diamondSimpleSpin .72s linear infinite !important; } /* شيل أي logo / صورة / decoration قديمة */ body.diamond-page-store #loaderContainer .loader img, body.diamond-page-store #loaderContainer .loader svg, body.diamond-page-store #loaderContainer .loader i, body.diamond-page-store #loaderContainer img, body.diamond-page-store #loaderContainer svg, body.diamond-page-store #loaderContainer i { display: none !important; } /* شيل أي pseudo effects قديمة */ body.diamond-page-store #loaderContainer .loader::before, body.diamond-page-store #loaderContainer .loader::after { content: none !important; display: none !important; } /* الدوران فقط، ما في translate ولا scale */ @keyframes diamondSimpleSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= WALLET ALL TEXT WHITE V25 ========================================================= */ body.diamond-page-wallet { --text: #ffffff !important; --muted: #ffffff !important; color: #ffffff !important; } /* كل النصوص الأساسية */ body.diamond-page-wallet, body.diamond-page-wallet p, body.diamond-page-wallet span, body.diamond-page-wallet div, body.diamond-page-wallet h1, body.diamond-page-wallet h2, body.diamond-page-wallet h3, body.diamond-page-wallet h4, body.diamond-page-wallet h5, body.diamond-page-wallet h6, body.diamond-page-wallet label, body.diamond-page-wallet small, body.diamond-page-wallet strong, body.diamond-page-wallet b, body.diamond-page-wallet a { color: #ffffff !important; } /* الرصيد */ body.diamond-page-wallet .balance-label, body.diamond-page-wallet .balance-label span, body.diamond-page-wallet .balance-note, body.diamond-page-wallet .balance-amount, body.diamond-page-wallet #balanceAmount { color: #ffffff !important; } /* الكروت والعناوين */ body.diamond-page-wallet .card, body.diamond-page-wallet .card-header, body.diamond-page-wallet .card-header h3, body.diamond-page-wallet .history-list, body.diamond-page-wallet .history-list * { color: #ffffff !important; } /* زر إضافة رصيد */ body.diamond-page-wallet .action-btn, body.diamond-page-wallet .action-btn span, body.diamond-page-wallet .action-btn i { color: #ffffff !important; } /* الهيدر */ body.diamond-page-wallet .topbar, body.diamond-page-wallet .logo, body.diamond-page-wallet .back-link, body.diamond-page-wallet .back-link span, body.diamond-page-wallet .back-link i { color: #ffffff !important; } /* inputs إذا ظهر أي منها */ body.diamond-page-wallet input, body.diamond-page-wallet textarea, body.diamond-page-wallet select, body.diamond-page-wallet option { color: #ffffff !important; } body.diamond-page-wallet input::placeholder, body.diamond-page-wallet textarea::placeholder { color: rgba(255,255,255,.70) !important; opacity: 1 !important; } /* أي نص muted قديم */ body.diamond-page-wallet .muted, body.diamond-page-wallet .text-muted, body.diamond-page-wallet [class*="muted"] { color: rgba(255,255,255,.78) !important; } /* ========================================================= DEPOSIT METHOD PREMIUM NEON V26 ========================================================= */ body.diamond-page-deposit-method { --dm-bg: #1a191c; --dm-surface: #2c2b2e; --dm-surface-2: #3a393c; --dm-field: #212023; --dm-purple: #f6ac5c; --dm-indigo: #ffcd4f; --dm-text: #ffffff; --dm-muted: #d4c9ae; --dm-border: rgba(244, 209, 121,.20); --dm-border-strong: rgba(244, 209, 121,.42); background: radial-gradient( circle at 90% 4%, rgba(255, 205, 79,.14), transparent 28% ), radial-gradient( circle at 6% 20%, rgba(246, 172, 92,.14), transparent 27% ), #1a191c !important; color: var(--dm-text) !important; min-height: 100vh !important; } /* ----------------------------------------- TOP BAR ----------------------------------------- */ body.diamond-page-deposit-method .topbar { background: rgba(26, 25, 28,.82) !important; border-bottom: 1px solid rgba(246, 172, 92,.18) !important; backdrop-filter: blur(18px) saturate(1.15) !important; -webkit-backdrop-filter: blur(18px) saturate(1.15) !important; box-shadow: 0 8px 30px rgba(0,0,0,.20) !important; } body.diamond-page-deposit-method .logo { color: #ffffff !important; font-weight: 900 !important; letter-spacing: -.4px !important; } body.diamond-page-deposit-method .back-link { color: #ffffff !important; background: rgba(255,255,255,.055) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 12px !important; padding: 8px 13px !important; box-shadow: none !important; } body.diamond-page-deposit-method .back-link i, body.diamond-page-deposit-method .back-link span { color: #ffffff !important; } /* ----------------------------------------- PAGE WIDTH ----------------------------------------- */ body.diamond-page-deposit-method > .container { width: min(720px, calc(100% - 28px)) !important; max-width: 720px !important; margin: 0 auto !important; padding: 28px 0 50px !important; } /* ----------------------------------------- MAIN DEPOSIT CARD ----------------------------------------- */ body.diamond-page-deposit-method > .container > .card { background: linear-gradient( 180deg, rgba(53, 52, 55,.96), rgba(31, 30, 33,.98) ) !important; border: 1px solid var(--dm-border) !important; border-radius: 22px !important; padding: 26px !important; box-shadow: 0 28px 70px rgba(0,0,0,.34), 0 0 34px rgba(255, 202, 67,.06) !important; color: #ffffff !important; } /* ----------------------------------------- PAYMENT METHOD IMAGE ----------------------------------------- */ body.diamond-page-deposit-method .method-image-wrapper { position: relative !important; width: 138px !important; height: 138px !important; margin: 0 auto 18px !important; border-radius: 20px !important; padding: 9px !important; overflow: visible !important; background: linear-gradient( 145deg, rgba(246, 172, 92,.14), rgba(255, 205, 79,.08) ) !important; border: 1px solid rgba(244, 210, 123,.34) !important; box-shadow: 0 14px 32px rgba(0,0,0,.30), 0 0 24px rgba(255, 204, 76,.10) !important; } body.diamond-page-deposit-method .method-image { display: block !important; width: 118px !important; height: 118px !important; max-width: 118px !important; max-height: 118px !important; margin: 0 auto !important; object-fit: contain !important; object-position: center !important; border-radius: 14px !important; background: #ffffff !important; transform: none !important; box-shadow: none !important; } /* trusted badge */ body.diamond-page-deposit-method .method-badge { position: absolute !important; top: auto !important; left: 50% !important; bottom: -11px !important; transform: translateX(-50%) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; white-space: nowrap !important; padding: 5px 10px !important; border-radius: 999px !important; background: #38373a !important; color: #fdf5e1 !important; border: 1px solid rgba(244, 211, 125,.30) !important; font-size: 10px !important; font-weight: 700 !important; box-shadow: 0 8px 20px rgba(0,0,0,.22) !important; } body.diamond-page-deposit-method .method-badge i { color: #72e6bc !important; } /* ----------------------------------------- METHOD TITLE ----------------------------------------- */ body.diamond-page-deposit-method .title { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin: 28px 0 4px !important; color: #ffffff !important; font-size: 25px !important; font-weight: 900 !important; text-align: center !important; } body.diamond-page-deposit-method .title span { color: #ffffff !important; } body.diamond-page-deposit-method .title i { width: 36px !important; height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 11px !important; background: linear-gradient( 135deg, #f6ac5c, #ffcd4f ) !important; color: #ffffff !important; font-size: 16px !important; box-shadow: 0 8px 18px rgba(255, 206, 83,.23) !important; } body.diamond-page-deposit-method .divider { height: 1px !important; margin: 22px 0 !important; background: linear-gradient( 90deg, transparent, rgba(244, 210, 122,.28), transparent ) !important; border: 0 !important; } /* ----------------------------------------- DEPOSIT INFORMATION ----------------------------------------- */ body.diamond-page-deposit-method .deposit-info-box { padding: 17px !important; margin: 0 0 22px !important; border-radius: 16px !important; background: rgba(47, 46, 49,.92) !important; border: 1px solid rgba(244, 207, 115,.22) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important; } body.diamond-page-deposit-method .deposit-info-header { display: flex !important; align-items: center !important; gap: 9px !important; margin-bottom: 14px !important; color: #ffffff !important; font-size: 15px !important; font-weight: 800 !important; } body.diamond-page-deposit-method .deposit-info-header span { color: #ffffff !important; } body.diamond-page-deposit-method .deposit-info-header i { color: #f5d37f !important; } /* individual transfer detail */ body.diamond-page-deposit-method .info-item { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; padding: 13px 14px !important; margin-top: 9px !important; border-radius: 12px !important; background: #232225 !important; border: 1px solid rgba(255,255,255,.07) !important; color: #ffffff !important; } body.diamond-page-deposit-method .info-item-content { min-width: 0 !important; flex: 1 !important; } body.diamond-page-deposit-method .info-item-label { margin-bottom: 3px !important; color: #c9bc9b !important; font-size: 11px !important; font-weight: 600 !important; } body.diamond-page-deposit-method .info-item-value { color: #ffffff !important; font-size: 15px !important; font-weight: 800 !important; overflow-wrap: anywhere !important; } /* copy buttons */ body.diamond-page-deposit-method .copy-btn { flex: 0 0 auto !important; min-width: 70px !important; min-height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 8px 11px !important; border: 1px solid rgba(246, 172, 92,.34) !important; border-radius: 10px !important; background: rgba(246, 172, 92,.13) !important; color: #ffffff !important; box-shadow: none !important; } body.diamond-page-deposit-method .copy-btn i { color: #f6db95 !important; } /* transfer notes */ body.diamond-page-deposit-method .deposit-note, body.diamond-page-deposit-method .note { display: flex !important; align-items: flex-start !important; gap: 9px !important; margin-top: 14px !important; padding: 12px 13px !important; border-radius: 12px !important; background: rgba(255, 205, 79,.08) !important; border: 1px solid rgba(255, 205, 79,.18) !important; color: #f3ebd8 !important; font-size: 12px !important; line-height: 1.75 !important; } body.diamond-page-deposit-method .deposit-note span, body.diamond-page-deposit-method .note span { color: #f3ebd8 !important; } body.diamond-page-deposit-method .deposit-note i, body.diamond-page-deposit-method .note i { color: #f4d27d !important; } /* ----------------------------------------- INPUT GROUPS ----------------------------------------- */ body.diamond-page-deposit-method .input-group { margin-bottom: 19px !important; } body.diamond-page-deposit-method .input-label { display: flex !important; align-items: center !important; gap: 7px !important; margin-bottom: 8px !important; color: #ffffff !important; font-size: 13px !important; font-weight: 700 !important; } body.diamond-page-deposit-method .input-label i { color: #f5d686 !important; } body.diamond-page-deposit-method .input-field { width: 100% !important; min-height: 50px !important; padding: 12px 14px !important; border: 1px solid rgba(210, 195, 157,.15) !important; border-radius: 12px !important; outline: none !important; background: #212023 !important; color: #ffffff !important; font-family: "Cairo", sans-serif !important; font-size: 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.015) !important; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important; } body.diamond-page-deposit-method .input-field:focus { background: #2a292c !important; border-color: rgba(255, 210, 96,.64) !important; box-shadow: 0 0 0 3px rgba(255, 210, 96,.10) !important; } body.diamond-page-deposit-method .input-field::placeholder { color: rgba(221, 211, 184,.50) !important; opacity: 1 !important; } /* ----------------------------------------- SYP -> USD PREVIEW ----------------------------------------- */ body.diamond-page-deposit-method .usd-preview { margin-top: 9px !important; padding: 11px 13px !important; border-radius: 11px !important; background: rgba(255, 205, 79,.095) !important; border: 1px solid rgba(255, 205, 79,.23) !important; color: #fcf4df !important; font-size: 12px !important; } body.diamond-page-deposit-method .usd-preview span, body.diamond-page-deposit-method .usd-preview strong, body.diamond-page-deposit-method .usd-preview i { color: #ffffff !important; } /* ----------------------------------------- COUNTDOWN ----------------------------------------- */ body.diamond-page-deposit-method .countdown-timer { padding: 12px 14px !important; margin-bottom: 18px !important; border-radius: 12px !important; background: rgba(246, 172, 92,.09) !important; border: 1px solid rgba(246, 172, 92,.22) !important; color: #ffffff !important; } /* ----------------------------------------- SYRIATEL FEE NOTICE Preserve functionality, fix palette ----------------------------------------- */ body.diamond-page-deposit-method .syriatel-fee-notice { background: rgba(245,158,11,.07) !important; border: 1px solid rgba(245,158,11,.20) !important; color: #f7e8c4 !important; box-shadow: none !important; border-radius: 13px !important; } body.diamond-page-deposit-method .syriatel-fee-icon { background: rgba(245,158,11,.12) !important; color: #ffc85a !important; } body.diamond-page-deposit-method .syriatel-fee-title, body.diamond-page-deposit-method .syriatel-fee-text { color: #f7e8c4 !important; } body.diamond-page-deposit-method .syriatel-fee-highlight { color: #ffd477 !important; } /* ----------------------------------------- MINIMUM AMOUNT WARNING ----------------------------------------- */ body.diamond-page-deposit-method #minAmountWarning { background: rgba(239,68,68,.08) !important; border: 1px solid rgba(239,68,68,.25) !important; border-right: 3px solid #ef4444 !important; color: #ffc2c2 !important; border-radius: 11px !important; } body.diamond-page-deposit-method #minAmountWarning *, body.diamond-page-deposit-method #minAmountWarningText { color: #ffc2c2 !important; } /* ----------------------------------------- FILE INPUT ----------------------------------------- */ body.diamond-page-deposit-method .file-input { background: #212023 !important; border: 1px dashed rgba(244, 210, 124,.32) !important; color: #f2e7cb !important; } body.diamond-page-deposit-method .file-input::-webkit-file-upload-button { margin-left: 10px !important; padding: 8px 13px !important; border: 0 !important; border-radius: 9px !important; background: linear-gradient( 135deg, #f6ac5c, #ffcd4f ) !important; color: #ffffff !important; } /* ----------------------------------------- PRIMARY ACTION ----------------------------------------- */ body.diamond-page-deposit-method .action-btn { width: 100% !important; min-height: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 13px 18px !important; border: 0 !important; border-radius: 13px !important; background: linear-gradient( 115deg, #f6ac5c 0%, #f4c95b 45%, #ffcd4f 100% ) !important; color: #ffffff !important; font-family: "Cairo", sans-serif !important; font-size: 15px !important; font-weight: 800 !important; box-shadow: 0 14px 30px rgba(255, 205, 78,.24) !important; transition: transform .18s ease, box-shadow .18s ease !important; } body.diamond-page-deposit-method .action-btn span, body.diamond-page-deposit-method .action-btn i { color: #ffffff !important; } @media (hover:hover) { body.diamond-page-deposit-method .action-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 17px 36px rgba(255, 205, 78,.31) !important; } } /* ----------------------------------------- FORCE READABILITY ----------------------------------------- */ body.diamond-page-deposit-method .card, body.diamond-page-deposit-method .card h1, body.diamond-page-deposit-method .card h2, body.diamond-page-deposit-method .card h3, body.diamond-page-deposit-method .card h4, body.diamond-page-deposit-method .card label, body.diamond-page-deposit-method .card strong { color: #ffffff !important; } /* ----------------------------------------- MOBILE ----------------------------------------- */ @media (max-width:600px) { body.diamond-page-deposit-method > .container { width: calc(100% - 20px) !important; padding-top: 16px !important; } body.diamond-page-deposit-method > .container > .card { padding: 18px 15px !important; border-radius: 18px !important; } body.diamond-page-deposit-method .method-image-wrapper { width: 118px !important; height: 118px !important; } body.diamond-page-deposit-method .method-image { width: 98px !important; height: 98px !important; max-width: 98px !important; max-height: 98px !important; } body.diamond-page-deposit-method .title { font-size: 21px !important; } body.diamond-page-deposit-method .info-item { align-items: stretch !important; flex-direction: column !important; } body.diamond-page-deposit-method .copy-btn { align-self: flex-start !important; } } /* ========================================================= STORE FULL PAGE PRELOADER V29 ========================================================= */ /* * Disable the old loader that used to live inside * the categories grid. */ body.diamond-page-store #loaderContainer, body.diamond-page-store #categories > .sphere-loader { display: none !important; } /* full viewport loading screen */ body.diamond-page-store .store-preloader { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100dvh !important; z-index: 1000000 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: radial-gradient( circle at 78% 18%, rgba(255, 204, 74,.14), transparent 32% ), radial-gradient( circle at 18% 82%, rgba(255, 198, 55,.10), transparent 30% ), #1a191c !important; opacity: 1 !important; visibility: visible !important; pointer-events: all !important; transition: opacity .46s cubic-bezier(.22,.8,.25,1), visibility .46s linear !important; } /* transition into the actual store */ body.diamond-page-store .store-preloader.is-leaving { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* ONLY the ring moves */ body.diamond-page-store .store-preloader-ring { position: relative !important; width: 44px !important; height: 44px !important; flex: 0 0 44px !important; margin: 0 !important; border-radius: 50% !important; background: transparent !important; border: 3px solid rgba(255,255,255,.10) !important; border-top-color: #f5bb7e !important; border-right-color: #ffcf55 !important; box-shadow: 0 0 22px rgba(255, 208, 88,.13) !important; transform-origin: 50% 50% !important; animation: storePremiumSpin .72s linear infinite !important; } /* * Nothing else inside the loader. * Prevent old global pseudo-element loader effects. */ body.diamond-page-store .store-preloader-ring::before, body.diamond-page-store .store-preloader-ring::after { content: none !important; display: none !important; } @keyframes storePremiumSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { body.diamond-page-store .store-preloader { transition-duration: .18s !important; } body.diamond-page-store .store-preloader-ring { animation-duration: 1.25s !important; } } /* STORE_CARDS_POLISH_V1 START */ /* ========================================= CATEGORY GRID ========================================= */ body.diamond-page-store #categories { align-items: stretch !important; gap: 14px !important; } /* ========================================= CATEGORY CARD ========================================= */ body.diamond-page-store #categories > .card { box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; height: 100% !important; min-height: 0 !important; gap: 8px !important; padding: 10px 10px 12px !important; border-radius: 18px !important; border: 1px solid rgba(255,255,255,.10) !important; background: linear-gradient( 180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.035) 100% ) !important; box-shadow: 0 8px 24px rgba(0,0,0,.18) !important; overflow: hidden !important; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important; } /* ========================================= CATEGORY IMAGE ========================================= */ body.diamond-page-store #categories > .card > img, body.diamond-page-store #categories > .card img.dv2-cat-image { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; object-position: center !important; margin: 0 !important; border-radius: 13px !important; } /* ========================================= CATEGORY TITLE Equal space for short + long names ========================================= */ body.diamond-page-store #categories .card-title, body.diamond-page-store #categories .dv2-cat-title, body.diamond-page-store #categories .category-name { box-sizing: border-box !important; width: 100% !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 4px !important; text-align: center !important; direction: rtl !important; letter-spacing: 0 !important; overflow: hidden !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; color: #fff !important; } /* ========================================= DESKTOP HOVER ========================================= */ @media (hover:hover) and (min-width:769px) { body.diamond-page-store #categories > .card:hover { transform: translateY(-3px) !important; border-color: rgba(255,255,255,.20) !important; box-shadow: 0 13px 30px rgba(0,0,0,.23) !important; } } /* ========================================= MOBILE ========================================= */ @media (max-width:700px) { body.diamond-page-store #categories { gap: 9px !important; } body.diamond-page-store #categories > .card { gap: 6px !important; padding: 7px 7px 9px !important; border-radius: 14px !important; box-shadow: 0 5px 15px rgba(0,0,0,.15) !important; } body.diamond-page-store #categories > .card > img, body.diamond-page-store #categories > .card img.dv2-cat-image { border-radius: 10px !important; } body.diamond-page-store #categories .card-title, body.diamond-page-store #categories .dv2-cat-title, body.diamond-page-store #categories .category-name { height: 28px !important; min-height: 28px !important; padding: 0 2px !important; } } /* ========================================= DIAMOND LOADER ========================================= */ body.diamond-page-store #loaderContainer.sphere-loader { grid-column: 1 / -1 !important; box-sizing: border-box !important; width: 100% !important; min-height: 250px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 28px 20px !important; position: relative !important; overflow: hidden !important; border-radius: 22px !important; border: 1px solid rgba(255,255,255,.09) !important; background: radial-gradient( circle at 50% 25%, rgba(237, 150, 58,.18), transparent 45% ), linear-gradient( 180deg, rgba(255,255,255,.055), rgba(255,255,255,.02) ) !important; box-shadow: 0 15px 45px rgba(0,0,0,.15) !important; } /* Diamond mark */ body.diamond-page-store #loaderContainer .loader.diamond-loader-mark { box-sizing: border-box !important; position: relative !important; width: 68px !important; height: 68px !important; display: grid !important; place-items: center !important; margin: 0 0 7px !important; padding: 0 !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 21px !important; background: linear-gradient( 145deg, rgba(237, 150, 58,.28), rgba(235, 179, 37,.20) ) !important; box-shadow: 0 12px 32px rgba(255, 204, 74,.22) !important; animation: diamondLoaderFloat 1.8s ease-in-out infinite !important; } body.diamond-page-store #loaderContainer .diamond-loader-mark::before { content: "" !important; position: absolute !important; inset: -7px !important; border: 1px solid rgba(246, 172, 92,.18) !important; border-radius: 27px !important; animation: diamondLoaderPulse 1.8s ease-out infinite !important; } body.diamond-page-store #loaderContainer .diamond-loader-mark img { width: 42px !important; height: 42px !important; object-fit: contain !important; } /* Loader text */ body.diamond-page-store #loaderContainer .diamond-loader-title { font-family: "Cairo", Arial, sans-serif !important; font-size: 14px !important; line-height: 1.4 !important; font-weight: 800 !important; color: #fff !important; } body.diamond-page-store #loaderContainer .diamond-loader-subtitle { font-family: "Cairo", Arial, sans-serif !important; font-size: 10px !important; line-height: 1.5 !important; font-weight: 500 !important; color: rgba(255,255,255,.58) !important; } /* Progress */ body.diamond-page-store #loaderContainer .diamond-loader-progress { width: 145px !important; height: 4px !important; margin-top: 8px !important; position: relative !important; overflow: hidden !important; border-radius: 999px !important; background: rgba(255,255,255,.08) !important; } body.diamond-page-store #loaderContainer .diamond-loader-progress span { position: absolute !important; top: 0 !important; bottom: 0 !important; width: 45% !important; border-radius: inherit !important; background: linear-gradient( 90deg, #f6ac5c, #f6c13b, #f6ac5c ) !important; box-shadow: 0 0 12px rgba(241, 201, 99,.55) !important; animation: diamondLoaderProgress 1.25s ease-in-out infinite !important; } @keyframes diamondLoaderFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes diamondLoaderPulse { 0% { opacity: .75; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.20); } } @keyframes diamondLoaderProgress { 0% { left: -48%; } 100% { left: 103%; } } /* mobile loader */ @media (max-width:700px) { body.diamond-page-store #loaderContainer.sphere-loader { min-height: 210px !important; border-radius: 17px !important; padding: 24px 15px !important; } body.diamond-page-store #loaderContainer .loader.diamond-loader-mark { width: 58px !important; height: 58px !important; border-radius: 18px !important; } body.diamond-page-store #loaderContainer .diamond-loader-mark img { width: 36px !important; height: 36px !important; } body.diamond-page-store #loaderContainer .diamond-loader-title { font-size: 12px !important; } body.diamond-page-store #loaderContainer .diamond-loader-subtitle { font-size: 9px !important; } } /* STORE_CARDS_POLISH_V1 END */ /* DIAMOND_FANCY_LOADER_V1 START */ body.diamond-page-store #loaderContainer.diamond-loader-screen { grid-column: 1 / -1 !important; min-height: 280px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 10px !important; padding: 36px 20px !important; margin: 0 !important; position: relative !important; overflow: hidden !important; border-radius: 24px !important; border: 1px solid rgba(255,255,255,.08) !important; background: radial-gradient(circle at 50% 20%, rgba(246, 172, 92,.18), transparent 35%), radial-gradient(circle at 50% 80%, rgba(246, 193, 59,.10), transparent 35%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important; box-shadow: 0 18px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04) !important; } body.diamond-page-store #loaderContainer.diamond-loader-screen::before { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,.02) 25%, transparent 50%, rgba(255,255,255,.015) 75%, transparent 100%) !important; pointer-events: none !important; } body.diamond-page-store #loaderContainer .diamond-loader-center { width: 120px !important; height: 120px !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 8px !important; } body.diamond-page-store #loaderContainer .diamond-loader-ring { position: absolute !important; inset: 0 !important; border-radius: 50% !important; border: 1px solid rgba(255,255,255,.10) !important; background: conic-gradient( from 0deg, rgba(246, 172, 92,0) 0deg, rgba(246, 172, 92,.95) 70deg, rgba(246, 193, 59,.95) 170deg, rgba(255,255,255,.18) 240deg, rgba(246, 172, 92,0) 360deg ) !important; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); animation: diamondSpin 2.8s linear infinite !important; box-shadow: 0 0 24px rgba(241, 201, 99,.18) !important; } body.diamond-page-store #loaderContainer .diamond-loader-ring-2 { inset: 12px !important; opacity: .55 !important; transform: rotate(18deg) !important; animation: diamondSpinReverse 4.2s linear infinite !important; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); } body.diamond-page-store #loaderContainer .diamond-loader-core { width: 68px !important; height: 68px !important; border-radius: 22px !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; z-index: 2 !important; background: linear-gradient(145deg, rgba(58, 57, 60,.92), rgba(96, 95, 98,.92)) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 10px 30px rgba(0,0,0,.30), 0 0 25px rgba(241, 201, 99,.18), inset 0 1px 0 rgba(255,255,255,.05) !important; } body.diamond-page-store #loaderContainer .diamond-loader-core::after { content: "" !important; position: absolute !important; inset: -10px !important; border-radius: 30px !important; border: 1px solid rgba(246, 172, 92,.16) !important; opacity: .9 !important; animation: diamondPulse 1.8s ease-out infinite !important; } body.diamond-page-store #loaderContainer .diamond-loader-core img { width: 40px !important; height: 40px !important; object-fit: contain !important; filter: drop-shadow(0 0 10px rgba(246, 172, 92,.25)) !important; } body.diamond-page-store #loaderContainer .diamond-loader-text { font-family: "Cairo", Arial, sans-serif !important; font-size: 15px !important; font-weight: 800 !important; line-height: 1.4 !important; color: #ffffff !important; text-align: center !important; } body.diamond-page-store #loaderContainer .diamond-loader-subtext { font-family: "Cairo", Arial, sans-serif !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.6 !important; color: rgba(255,255,255,.62) !important; text-align: center !important; } @keyframes diamondSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes diamondSpinReverse { from { transform: rotate(18deg); } to { transform: rotate(-342deg); } } @keyframes diamondPulse { 0% { transform: scale(.88); opacity: .75; } 100% { transform: scale(1.18); opacity: 0; } } @media (max-width: 700px) { body.diamond-page-store #loaderContainer.diamond-loader-screen { min-height: 220px !important; padding: 28px 14px !important; border-radius: 18px !important; } body.diamond-page-store #loaderContainer .diamond-loader-center { width: 92px !important; height: 92px !important; } body.diamond-page-store #loaderContainer .diamond-loader-core { width: 56px !important; height: 56px !important; border-radius: 18px !important; } body.diamond-page-store #loaderContainer .diamond-loader-core img { width: 32px !important; height: 32px !important; } body.diamond-page-store #loaderContainer .diamond-loader-text { font-size: 13px !important; } body.diamond-page-store #loaderContainer .diamond-loader-subtext { font-size: 10px !important; } } /* DIAMOND_FANCY_LOADER_V1 END */ /* DIAMOND_REAL_PRELOADER_V30 START */ body.diamond-page-store #storePreloader.store-preloader { position: fixed !important; inset: 0 !important; z-index: 999999 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100vw !important; height: 100dvh !important; background: radial-gradient( circle at 50% 48%, rgba(241, 201, 99,.12) 0%, rgba(246, 193, 59,.05) 24%, transparent 52% ), #1a191c !important; overflow: hidden !important; opacity: 1; visibility: visible; transition: opacity .38s ease, visibility .38s ease !important; } /* يحافظ على Controller الحالي */ body.diamond-page-store #storePreloader.store-preloader.is-leaving { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } body.diamond-page-store #storePreloader .diamond-preloader-stage { width: 154px !important; height: 154px !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ===== الحلقة الخارجية ===== */ body.diamond-page-store #storePreloader .diamond-preloader-orbit { position: absolute !important; border-radius: 50% !important; background: conic-gradient( from 0deg, transparent 0deg, transparent 55deg, rgba(246, 172, 92,.18) 75deg, #f6ac5c 120deg, #ffcd4f 185deg, rgba(255,255,255,.88) 215deg, rgba(246, 193, 59,.25) 245deg, transparent 285deg, transparent 360deg ) !important; -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px) ) !important; mask: radial-gradient( farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px) ) !important; filter: drop-shadow(0 0 8px rgba(241, 201, 99,.45)) !important; } body.diamond-page-store #storePreloader .orbit-one { inset: 0 !important; animation: diamondOrbitClockwise 2.3s linear infinite !important; } /* ===== الحلقة الداخلية ===== */ body.diamond-page-store #storePreloader .orbit-two { inset: 15px !important; opacity: .50 !important; background: conic-gradient( from 180deg, transparent 0deg, rgba(255,255,255,.45) 65deg, #ffcd4f 105deg, transparent 175deg, transparent 255deg, #f6ac5c 315deg, transparent 360deg ) !important; animation: diamondOrbitCounter 3.7s linear infinite !important; } /* ===== glow خلف الجوهرة ===== */ body.diamond-page-store #storePreloader .diamond-preloader-halo { position: absolute !important; width: 90px !important; height: 90px !important; border-radius: 50% !important; background: radial-gradient( circle, rgba(246, 202, 92,.30) 0%, rgba(246, 193, 59,.14) 42%, transparent 72% ) !important; filter: blur(7px) !important; animation: diamondHaloPulse 2s ease-in-out infinite !important; } /* ===== الجوهرة ===== */ body.diamond-page-store #storePreloader .diamond-preloader-logo { position: relative !important; z-index: 5 !important; width: 74px !important; height: 74px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 24px !important; background: linear-gradient( 145deg, rgba(70, 69, 72,.96), rgba(40, 39, 42,.96) ) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 16px 36px rgba(0,0,0,.42), 0 0 28px rgba(241, 201, 99,.18), inset 0 1px 0 rgba(255,255,255,.07) !important; } body.diamond-page-store #storePreloader .diamond-preloader-logo img { display: block !important; width: 47px !important; height: 47px !important; object-fit: contain !important; filter: drop-shadow(0 0 8px rgba(246, 172, 92,.34)) !important; animation: diamondLogoBreathe 2s ease-in-out infinite !important; } /* ===== Animations ===== */ @keyframes diamondOrbitClockwise { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes diamondOrbitCounter { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes diamondHaloPulse { 0%, 100% { opacity: .62; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.10); } } @keyframes diamondLogoBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } } /* ===== Mobile ===== */ @media (max-width: 700px) { body.diamond-page-store #storePreloader .diamond-preloader-stage { width: 132px !important; height: 132px !important; } body.diamond-page-store #storePreloader .orbit-two { inset: 14px !important; } body.diamond-page-store #storePreloader .diamond-preloader-logo { width: 64px !important; height: 64px !important; border-radius: 20px !important; } body.diamond-page-store #storePreloader .diamond-preloader-logo img { width: 41px !important; height: 41px !important; } body.diamond-page-store #storePreloader .diamond-preloader-halo { width: 80px !important; height: 80px !important; } } /* DIAMOND_REAL_PRELOADER_V30 END */ /* STORE_NEON_NITRO_V2 START */ /* ========================= PAGE ========================= */ body.diamond-page-store{ background: radial-gradient(circle at 85% 2%, rgba(255, 200, 0,.13), transparent 25%), radial-gradient(circle at 5% 18%, rgba(246, 172, 92,.15), transparent 27%), linear-gradient(165deg,#0f0e11 0%,#1c1b1e 45%,#272629 100%) !important; color:#fefdf9 !important; } /* subtle futuristic grid */ body.diamond-page-store::before{ content:""; position:fixed; inset:0; pointer-events:none; background: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 85%); z-index:0; } /* ========================= TOPBAR ========================= */ body.diamond-page-store .topbar{ position:relative; z-index:20; margin:12px 14px 10px !important; border-radius:20px !important; background: linear-gradient( 145deg, rgba(56, 55, 58,.96), rgba(29, 28, 31,.94) ) !important; border:1px solid rgba(255, 200, 0,.12) !important; box-shadow: 0 14px 38px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.04) !important; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); overflow:hidden; } body.diamond-page-store .topbar::after{ content:""; position:absolute; right:12%; left:12%; top:0; height:1px; background: linear-gradient( 90deg, transparent, #ffc800, #f6ac5c, transparent ); opacity:.55; } body.diamond-page-store .topbar-inner{ position:relative; z-index:2; } /* ========================= BALANCE ========================= */ body.diamond-page-store #balanceBox.balance{ color:#fff !important; background: linear-gradient( 135deg, rgba(255, 200, 0,.12), rgba(246, 172, 92,.10) ) !important; border:1px solid rgba(255, 200, 0,.18) !important; border-radius:999px !important; padding:8px 12px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 7px 20px rgba(255, 200, 0,.06) !important; } body.diamond-page-store #balanceBox.balance i{ color:#ffc800 !important; text-shadow: 0 0 12px rgba(255, 200, 0,.35); } body.diamond-page-store .add-balance{ background: linear-gradient( 135deg, #ffc800, #ffd364 ) !important; color:#1b1a1d !important; border-radius:50% !important; box-shadow: 0 0 14px rgba(255, 200, 0,.23) !important; } /* ========================= HERO SLIDER ========================= */ body.diamond-page-store .hero-slider{ position:relative; z-index:2; margin:12px 14px 18px !important; padding:1px; border-radius:23px !important; background: linear-gradient( 135deg, rgba(255, 200, 0,.38), rgba(246, 172, 92,.22), rgba(255,255,255,.06) ); box-shadow: 0 18px 45px rgba(0,0,0,.34), 0 0 32px rgba(255, 200, 0,.035); } body.diamond-page-store .slider-container{ border-radius:22px !important; overflow:hidden !important; background:#201f22 !important; } body.diamond-page-store .slider-track{ border-radius:inherit; } body.diamond-page-store .slider-track img{ display:block; width:100%; border-radius:21px !important; } /* slider dots */ body.diamond-page-store .slider-dots{ gap:6px !important; } body.diamond-page-store .slider-dots > *{ background:rgba(255,255,255,.25) !important; } body.diamond-page-store .slider-dots .active{ background:#ffc800 !important; box-shadow: 0 0 10px rgba(255, 200, 0,.5) !important; } /* ========================= SECTION HEADER ========================= */ body.diamond-page-store .section-header{ position:relative; z-index:2; margin:18px 14px 12px !important; padding:0 2px !important; } body.diamond-page-store #catTitle.section-title{ color:#fff !important; font-size:18px !important; font-weight:800 !important; letter-spacing:-.25px; text-shadow: 0 0 16px rgba(255, 200, 0,.08); } /* ========================= GRID ========================= */ body.diamond-page-store #categories.grid{ position:relative; z-index:2; padding:0 14px 100px !important; gap:11px !important; } /* ========================= CATEGORY CARDS ========================= */ body.diamond-page-store #categories.grid .card{ position:relative; overflow:hidden; padding:7px 7px 10px !important; border-radius:19px !important; background: linear-gradient( 155deg, rgba(60, 59, 62,.96), rgba(31, 30, 33,.96) ) !important; border:1px solid rgba(255,255,255,.075) !important; box-shadow: 0 12px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.035) !important; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important; } /* neon line */ body.diamond-page-store #categories.grid .card::before{ content:""; position:absolute; top:0; right:15%; left:15%; height:1px; background: linear-gradient( 90deg, transparent, rgba(255, 200, 0,.85), rgba(246, 172, 92,.55), transparent ); opacity:.72; } body.diamond-page-store #categories.grid .card:active{ transform:scale(.975); } /* ========================= CATEGORY IMAGES ========================= */ body.diamond-page-store #categories.grid .card img{ width:100% !important; aspect-ratio:1 / 1 !important; object-fit:cover !important; display:block; border-radius:14px !important; background:#18171a !important; border:1px solid rgba(255,255,255,.055) !important; box-shadow: 0 8px 22px rgba(0,0,0,.28) !important; } /* ========================= CATEGORY TITLES ========================= */ body.diamond-page-store #categories.grid .card-title{ width:100% !important; min-height:31px !important; margin:7px 0 0 !important; padding:0 3px !important; display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; color:#fefcf7 !important; font-family:"Cairo",sans-serif !important; font-size:12px !important; line-height:1.35 !important; font-weight:700 !important; letter-spacing:-.08px; } /* ========================= BOTTOM NAV ========================= */ body.diamond-page-store .bottom-nav{ left:12px !important; right:12px !important; bottom:10px !important; width:auto !important; border-radius:20px !important; background: rgba(31, 30, 33,.94) !important; border:1px solid rgba(255, 200, 0,.10) !important; box-shadow: 0 18px 45px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04) !important; backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); overflow:hidden; } body.diamond-page-store .bottom-nav::before{ content:""; position:absolute; top:0; right:18%; left:18%; height:1px; background: linear-gradient( 90deg, transparent, rgba(255, 200, 0,.7), rgba(246, 172, 92,.45), transparent ); } body.diamond-page-store .nav-items{ padding:5px 3px !important; } body.diamond-page-store .nav-item{ color:#b5a375 !important; border-radius:14px !important; transition:.18s ease; } body.diamond-page-store .nav-item.active{ color:#ffc800 !important; background: linear-gradient( 135deg, rgba(255, 200, 0,.09), rgba(246, 172, 92,.07) ) !important; text-shadow: 0 0 12px rgba(255, 200, 0,.30); } body.diamond-page-store .nav-item.active i{ color:#ffc800 !important; filter: drop-shadow(0 0 6px rgba(255, 200, 0,.38)); } /* ========================= MOBILE ========================= */ @media(max-width:700px){ body.diamond-page-store .topbar{ margin:8px 9px 8px !important; border-radius:17px !important; } body.diamond-page-store .hero-slider{ margin:9px 9px 15px !important; border-radius:19px !important; } body.diamond-page-store .slider-container{ border-radius:18px !important; } body.diamond-page-store .slider-track img{ border-radius:17px !important; } body.diamond-page-store .section-header{ margin:15px 10px 9px !important; } body.diamond-page-store #catTitle.section-title{ font-size:15px !important; } body.diamond-page-store #categories.grid{ padding: 0 9px 96px !important; gap:8px !important; } body.diamond-page-store #categories.grid .card{ padding:5px 5px 8px !important; border-radius:15px !important; } body.diamond-page-store #categories.grid .card img{ border-radius:11px !important; } body.diamond-page-store #categories.grid .card-title{ min-height:28px !important; margin-top:5px !important; font-size:11px !important; line-height:1.35 !important; } body.diamond-page-store #balanceBox.balance{ padding:6px 10px !important; } body.diamond-page-store .bottom-nav{ left:8px !important; right:8px !important; bottom:7px !important; border-radius:17px !important; } } /* STORE_NEON_NITRO_V2 END */ /* CATEGORY_SQUARE_NO_GEM_V1 START */ /* رجّع صور الكاتيغوري */ body.diamond-page-store #categories .card img, body.diamond-page-store #categories > .card > img, body.diamond-page-store #categories > .card img.dv2-cat-image { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; object-position: center !important; border-radius: 16px !important; opacity: 1 !important; visibility: visible !important; } /* اخفي الجوهرة/الأيقونة */ body.diamond-page-store #categories > .card > .card-icon, body.diamond-page-store #categories .card-icon, body.diamond-page-store #categories .diamond-fallback, body.diamond-page-store #categories .fallback-icon { display: none !important; } /* شيل أي line أو effect قديم خاص بنمط text-only */ body.diamond-page-store #categories.grid .card::before { content: none !important; display: none !important; } /* خليه كرت طبيعي مو text-only */ body.diamond-page-store #categories.grid .card, body.diamond-page-store #categories > .card { min-height: auto !important; display: block !important; padding: 12px !important; overflow: hidden !important; } /* اسم القسم */ body.diamond-page-store #categories .card-title, body.diamond-page-store #categories .dv2-cat-title, body.diamond-page-store #categories .category-name, body.diamond-page-store #categories h3, body.diamond-page-store #categories h4 { display: block !important; text-align: center !important; color: #ffffff !important; font-family: "Cairo", sans-serif !important; font-weight: 800 !important; margin-top: 10px !important; margin-bottom: 2px !important; text-shadow: 0 0 8px rgba(255,255,255,.18) !important; } /* موبايل */ @media (max-width:700px) { body.diamond-page-store #categories .card-title, body.diamond-page-store #categories .dv2-cat-title, body.diamond-page-store #categories .category-name, body.diamond-page-store #categories h3, body.diamond-page-store #categories h4 { font-size: 10px !important; line-height: 1.35 !important; } } /* CATEGORY_SQUARE_NO_GEM_V1 END */ /* REMOVE_CATEGORY_EXTRA_GEMS_V1 */ body.diamond-page-store #categories .go-icon, body.diamond-page-store #categories .dv2-cat-arrow-icon{ display:none !important; } /* STORE_CATEGORY_3_COLUMNS_MOBILE */ @media (max-width:700px){ body.diamond-page-store #categories.grid{ display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:8px !important; } body.diamond-page-store #categories.grid .card{ width:100% !important; min-width:0 !important; } } /* DIAMOND_SERVICE_RAIL_V1 START */ body.diamond-page-store .service-rail{ margin:10px 14px 4px !important; padding:0 !important; background:transparent !important; border:none !important; overflow:hidden; } body.diamond-page-store .service-rail .ticker-track{ display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; width:100% !important; transform:none !important; animation:none !important; white-space:nowrap; } /* individual capsule */ body.diamond-page-store .service-chip{ min-height:35px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:7px 11px; flex:0 0 auto; border-radius:999px; color:rgba(253, 249, 236,.78); font-family:"Cairo",sans-serif; font-size:10px; line-height:1; font-weight:700; background: linear-gradient( 145deg, rgba(60, 59, 62,.82), rgba(31, 30, 33,.88) ); border:1px solid rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); } /* main message */ body.diamond-page-store .service-chip-main{ color:#fff; border-color:rgba(255, 200, 0,.14); background: linear-gradient( 135deg, rgba(255, 200, 0,.075), rgba(246, 172, 92,.065) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 0 18px rgba(255, 200, 0,.025); } /* icons */ body.diamond-page-store .service-chip i{ color:#d3c9ae; font-size:9px; } body.diamond-page-store .service-chip:nth-child(2) i{ color:#f9d967; } body.diamond-page-store .service-chip:nth-child(3) i{ color:#f9e7b9; } body.diamond-page-store .service-chip:nth-child(4) i{ color:#86efac; } /* live dot */ body.diamond-page-store .service-live-dot{ width:7px; height:7px; flex:0 0 auto; border-radius:50%; background:#22c55e; box-shadow: 0 0 7px rgba(34,197,94,.70), 0 0 15px rgba(34,197,94,.28); animation:serviceLivePulse 1.8s ease-in-out infinite; } @keyframes serviceLivePulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.65; transform:scale(.82); } } /* mobile */ @media(max-width:700px){ body.diamond-page-store .service-rail{ margin: 8px 0 2px !important; overflow-x:auto !important; scrollbar-width:none; -webkit-overflow-scrolling:touch; } body.diamond-page-store .service-rail::-webkit-scrollbar{ display:none; } body.diamond-page-store .service-rail .ticker-track{ width:max-content !important; min-width:100%; justify-content:flex-start !important; gap:7px !important; padding: 0 9px 3px !important; } body.diamond-page-store .service-chip{ min-height:33px; padding:7px 10px; font-size:9.5px; } } /* DIAMOND_SERVICE_RAIL_V1 END */ /* SERVICE_RAIL_FORCE_V2 */ body.diamond-page-store .ticker.service-rail{ height:auto !important; width:auto !important; margin:8px 0 6px !important; padding:0 9px !important; overflow-x:auto !important; overflow-y:hidden !important; background:transparent !important; border:0 !important; box-shadow:none !important; white-space:normal !important; scrollbar-width:none; } body.diamond-page-store .ticker.service-rail::-webkit-scrollbar{ display:none; } body.diamond-page-store .ticker.service-rail .ticker-track{ position:static !important; display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-start !important; gap:7px !important; width:max-content !important; min-width:max-content !important; height:auto !important; padding:2px 0 4px !important; transform:none !important; animation:none !important; white-space:nowrap !important; } body.diamond-page-store .ticker.service-rail .service-chip{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; flex:0 0 auto !important; min-height:34px !important; padding:7px 11px !important; border-radius:999px !important; font-family:"Cairo",sans-serif !important; font-size:10px !important; font-weight:700 !important; color:#fdf8ec !important; background: linear-gradient( 145deg, rgba(63, 62, 65,.95), rgba(31, 30, 33,.97) ) !important; border:1px solid rgba(255,255,255,.09) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 7px 18px rgba(0,0,0,.18) !important; } body.diamond-page-store .ticker.service-rail .service-chip-main{ color:#fff !important; background: linear-gradient( 135deg, rgba(255, 200, 0,.12), rgba(246, 172, 92,.10) ) !important; border-color:rgba(255, 200, 0,.20) !important; } body.diamond-page-store .service-live-dot{ width:7px !important; height:7px !important; display:block !important; flex:none !important; border-radius:50% !important; background:#22c55e !important; box-shadow: 0 0 7px rgba(34,197,94,.8), 0 0 15px rgba(34,197,94,.35) !important; } body.diamond-page-store .service-chip:nth-child(2) i{ color:#f9d967 !important; } body.diamond-page-store .service-chip:nth-child(3) i{ color:#f9e7b9 !important; } body.diamond-page-store .service-chip:nth-child(4) i{ color:#86efac !important; } /* CATEGORY_VECTOR_SMALL_V1 */ body.diamond-page-store #categories .diamond-category-vector{ width:32px !important; height:32px !important; min-width:32px !important; min-height:32px !important; border-radius:9px !important; padding:6px !important; display:flex !important; align-items:center !important; justify-content:center !important; } body.diamond-page-store #categories .diamond-category-vector svg, body.diamond-page-store #categories .diamond-category-vector img, body.diamond-page-store #categories .diamond-category-vector i{ width:17px !important; height:17px !important; font-size:16px !important; max-width:17px !important; max-height:17px !important; } /* Mobile */ @media(max-width:700px){ body.diamond-page-store #categories .diamond-category-vector{ width:27px !important; height:27px !important; min-width:27px !important; min-height:27px !important; padding:5px !important; border-radius:8px !important; } body.diamond-page-store #categories .diamond-category-vector svg, body.diamond-page-store #categories .diamond-category-vector img, body.diamond-page-store #categories .diamond-category-vector i{ width:14px !important; height:14px !important; max-width:14px !important; max-height:14px !important; font-size:13px !important; } }