... Works inside #modalDesc via JS (no URL hash changes). ========================================================== */ #modalDesc [id$="-desc"]{ /* IMPORTANT: These variables MUST follow the active template (html[data-theme]). Previously this block hard-coded a light "paper" style, which caused white panels/buttons inside product descriptions even in dark themes. */ /* Make the product description controls match the main modal buttons (more purple + subtle gradient shimmer). */ --crom-accent: var(--p2); --crom-accent-1: var(--p1); --crom-accent-2: var(--p2); --crom-accent-3: var(--p3); --crom-ink: var(--text); --crom-paper1: var(--surface); --crom-paper2: var(--surface2); --crom-border: var(--line); --crom-shadow: var(--shadow2); width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; box-sizing: border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif; } #modalDesc [id$="-desc"] *{ box-sizing: border-box; } /* Top pill ("ПРОПИСЫВАЕТСЯ НА 30 ДНЕЙ") */ #modalDesc a[id$="-pill30"]{ display: block; width: min(600px, 100%); text-align: center; text-decoration: none; background: linear-gradient(90deg, var(--crom-accent-1), var(--crom-accent-2), var(--crom-accent-3), var(--crom-accent-2)); background-size: 220% 220%; animation: cromDescShimmer 8s ease-in-out infinite; color: #fff !important; font-weight: 900; font-size: 13px; letter-spacing: .6px; padding: 10px 16px; border-radius: 999px; box-shadow: 0 10px 24px rgba(var(--p2-rgb), .22); text-transform: uppercase; } /* Tabs */ #modalDesc [id$="-nav"]{ width: min(600px, 100%); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } #modalDesc [id$="-nav"] a{ display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border-radius: 999px; font-weight: 900; font-size: 12px; letter-spacing: .55px; text-transform: uppercase; background: var(--surface); color: var(--crom-accent) !important; border: 2px solid var(--crom-accent); box-shadow: 0 4px 10px rgba(0,0,0,.06); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; } #modalDesc [id$="-nav"] a:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--p2-rgb), .14); } /* Active tab (added by JS) */ #modalDesc [id$="-nav"] a.crom-tab-active{ background: linear-gradient(90deg, var(--crom-accent-1), var(--crom-accent-2), var(--crom-accent-3), var(--crom-accent-2)); background-size: 220% 220%; animation: cromDescShimmer 8s ease-in-out infinite; color: #fff !important; } /* Panels wrapper */ #modalDesc [id$="-panels"]{ width: min(600px, 100%); } /* Panel card */ #modalDesc [id$="-panels"] > div[data-title]{ position: relative; margin-top: 6px; padding: 44px 18px 18px; /* top padding so label doesn't overlap first title */ border-radius: 14px; background: linear-gradient(180deg, var(--crom-paper1), var(--crom-paper2)); border: 1px solid var(--crom-border); box-shadow: var(--crom-shadow); color: var(--crom-ink); font-weight: 700; text-align: left; overflow: hidden; } /* Left accent stripe */ #modalDesc [id$="-panels"] > div[data-title]::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 6px; background: linear-gradient(180deg, var(--crom-accent-1), var(--crom-accent-2), var(--crom-accent-3)); border-radius: 4px; } /* Panel title badge */ #modalDesc [id$="-panels"] > div[data-title]::after{ content: attr(data-title); position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 6px 16px; font-weight: 900; font-size: 12px; letter-spacing: .5px; background: linear-gradient(90deg, var(--crom-accent-1), var(--crom-accent-2), var(--crom-accent-3), var(--crom-accent-2)); background-size: 220% 220%; animation: cromDescShimmer 8s ease-in-out infinite; color: #fff; border-radius: 9px; text-transform: uppercase; box-shadow: 0 3px 10px rgba(0,0,0,.15); } @keyframes cromDescShimmer{ 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } } @media (prefers-reduced-motion: reduce){ #modalDesc a[id$="-pill30"], #modalDesc [id$="-nav"] a.crom-tab-active, #modalDesc [id$="-panels"] > div[data-title]::after{ animation: none !important; } } /* ========================================================== Legacy inline-styled descriptions (old HTML stored in DB) Some product descriptions contain hard-coded light colors like background:#f8f8ff / #fff and text color:#20124D. On dark templates this keeps the inner "tiles" white. We override the most common legacy inline colors ONLY inside the product modal description container. ========================================================== */ /* Main white/near-white cards (apply ONLY on dark templates) */ html[data-theme^="dark"] #modalDesc [style*="background: #f8f8ff"], html[data-theme^="dark"] #modalDesc [style*="background:#f8f8ff"], html[data-theme^="dark"] #modalDesc [style*="background:rgb(248,248,255"], html[data-theme^="dark"] #modalDesc [style*="background: rgb(248, 248, 255"], html[data-theme^="dark"] #modalDesc [style*="background: #fff"], html[data-theme^="dark"] #modalDesc [style*="background:#fff"], html[data-theme^="dark"] #modalDesc [style*="background: #ffffff"], html[data-theme^="dark"] #modalDesc [style*="background:#ffffff"]{ background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line) !important; box-shadow: var(--shadow2) !important; } /* Light chips/badges often used inside privilege lists (dark templates only) */ html[data-theme^="dark"] #modalDesc [style*="background: #E8DBFA"], html[data-theme^="dark"] #modalDesc [style*="background:#E8DBFA"], html[data-theme^="dark"] #modalDesc [style*="background: rgb(232, 219, 250"], html[data-theme^="dark"] #modalDesc [style*="background:rgb(232,219,250"]{ background: var(--surface2) !important; color: var(--text) !important; border: 1px solid var(--line) !important; } /* Very dark text used in light templates (dark templates only) */ html[data-theme^="dark"] #modalDesc [style*="color: #20124D"], html[data-theme^="dark"] #modalDesc [style*="color:#20124D"], html[data-theme^="dark"] #modalDesc [style*="color: rgb(32, 18, 77"], html[data-theme^="dark"] #modalDesc [style*="color:rgb(32,18,77"]{ color: var(--text) !important; } /* Purple dashed separators in legacy descriptions (dark templates only) */ html[data-theme^="dark"] #modalDesc hr[style*="dashed" i][style*="#A344E5" i]{ border-top-color: var(--p1) !important; } /* Theme-normalize legacy description HTML. Old products often contain hardcoded inline light-theme styles. Broad rules below (paired with JS normalizer) ensure any theme applies. */ /* Any explicit background inside description becomes themed surface (keep bg images) (dark templates only) */ html[data-theme^="dark"] #modalDesc [style*="background" i]:not([style*="url(" i]){ background: var(--surface) !important; background-color: var(--surface) !important; } /* Any explicit text color becomes theme text, except explicit accent (dark templates only) */ html[data-theme^="dark"] #modalDesc [style*="color" i]:not([style*="#a344e5" i]):not([style*="#7a3ec2" i]):not([style*="var(--p1)" i]){ color: var(--text) !important; } /* Any explicit borders align to theme line (dark templates only) */ html[data-theme^="dark"] #modalDesc [style*="border" i]{ border-color: var(--line) !important; } /* Any explicit shadow becomes themed shadow (dark templates only) */ html[data-theme^="dark"] #modalDesc [style*="box-shadow" i]{ box-shadow: var(--shadow2) !important; } /* Inner helpers */ #modalDesc .crom-body{ font-size: 13.5px; line-height: 1.55; } #modalDesc .crom-sep{ border: none; border-top: 2px dotted var(--crom-accent); opacity: .45; margin: 12px 0; } #modalDesc .crom-link{ text-decoration: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 999px; font-weight: 900; font-size: 13px; letter-spacing: .3px; background: var(--surface); color: var(--crom-accent) !important; border: 2px solid var(--crom-accent); box-shadow: 0 4px 10px rgba(0,0,0,.06); } @media (max-width: 520px){ #modalDesc [id$="-nav"] a{ padding: 8px 12px; font-size: 11px; } #modalDesc [id$="-panels"] > div[data-title]{ padding: 44px 14px 14px; } } @media (max-width: 720px){ .modal-body{grid-template-columns: 1fr;} .modal-img{height: 220px;} } .modal-actions{ display:flex; align-items:center; justify-content:space-between; padding: 12px 16px 16px; gap: 12px; flex-wrap: wrap; } .modal-btns{ display:flex; align-items:center; gap: 10px; } .modal-btns .btn{ min-width: 140px; justify-content:center; } @media (max-width: 460px){ .modal-btns{ width: 100%; } .modal-btns .btn{ flex: 1; min-width: 0; } } .qty{ display:flex; gap: 6px; align-items:center; background: rgba(var(--p1-rgb),.10); border: 1px solid rgba(var(--p1-rgb),.18); border-radius: 14px; padding: 6px 8px; } .qty button{ width: 32px; height:32px; border:0; cursor:pointer; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-weight: 900; } .qty span{min-width: 26px; text-align:center; font-weight: 900; color: var(--p4)} /* Cart drawer */ .drawer-backdrop{ position:fixed; inset:0; background: rgba(20,18,35,.55); display:none; z-index: 40; } .drawer{ position:fixed; right: 16px; top: 16px; width: min(420px, calc(100% - 32px)); height: calc(100% - 32px); background: var(--panel3); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 90px rgba(0,0,0,.25); z-index: 41; display:none; flex-direction:column; overflow:hidden; } .drawer .head{ padding: 14px 16px; border-bottom: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; } .drawer .head h3{margin:0; font-weight: 900; color: var(--p4)} .drawer .items{ padding: 12px 12px; overflow:auto; display:flex; flex-direction:column; gap: 10px; } .cart-item{ border: 1px solid var(--line); border-radius: 18px; padding: 10px; display:grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items:center; } .cart-thumb{ width:56px; height:56px; border-radius: 16px; overflow:hidden; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(var(--p3-rgb),.55), rgba(var(--p1-rgb),.30)); display:grid; place-items:center; } .cart-thumb img{width:100%; height:100%; object-fit:cover} .cart-name{font-weight: 900; color: var(--p4); font-size: 13px} .cart-sub{color: var(--muted); font-weight: 700; font-size: 12px; margin-top:2px} .cart-controls{ display:flex; flex-direction:column; gap: 6px; align-items:flex-end; } .cart-controls .row{display:flex; gap:6px; align-items:center} .cart-controls button{ width: 30px; height:30px; border:0; cursor:pointer; border-radius: 12px; background: rgba(var(--p1-rgb),.10); border: 1px solid rgba(var(--p1-rgb),.18); font-weight: 900; color: var(--p4); } .drawer .foot{ margin-top:auto; padding: 12px 16px 16px; border-top: 1px solid var(--line); display:flex; flex-direction:column; gap: 10px; } .total-row{ display:flex; justify-content:space-between; align-items:center; font-weight: 900; color: var(--p4); } .notice{ color: var(--muted); font-weight: 700; font-size: 12px; } /* Snow effect */ .snowflake{ position:fixed; top:-10px; color: var(--panel2); user-select:none; z-index: 20; pointer-events:none; text-shadow: 0 8px 20px rgba(0,0,0,.15); } /* Responsive */ @media (max-width: 1180px){ .main-grid{grid-template-columns: 1fr 300px;} .product-grid{grid-template-columns: repeat(4, minmax(0, 1fr));} } @media (max-width: 980px){ .main-grid{grid-template-columns: 1fr;} .sidebar{position:static} .product-grid{grid-template-columns: repeat(3, minmax(0, 1fr));} .banner-right{display:none} } @media (max-width: 720px){ .product-grid{grid-template-columns: repeat(2, minmax(0, 1fr));} } @media (max-width: 420px){ /* Keep 2 columns on phones (square tiles), reduce gaps and sizes */ .container{padding: 14px;} .product-grid{grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;} .product-card{border-radius: 22px; padding: 12px 12px 14px; min-height: 210px;} .product-sticker{height: 120px;} .product-img,.product-img-fallback{width: 120px; height: 120px;} .product-name{font-size: 13px; min-height: 32px;} .product-price-pill{padding: 6px 7px;} } @media (max-width: 360px){ .product-grid{grid-template-columns: 1fr;} } /* Layout hardening (prevents product grid drifting into sidebar) */ .content{min-width:0; grid-column:1;} .sidebar{min-width:0; grid-column:2;} @media (max-width: 980px){ .sidebar{grid-column:1;} } /* Hide legacy filter/toolbars if any old markup is cached */ .toolbar,.filters,.pillbar{display:none!important;} /* Auth modal (small) */ .modal.modal-small{ max-width: 440px; } .modal-body-simple{ display:block; padding: 16px 16px 18px; } .auth-note{ margin: 0 0 14px; color: var(--p4); font-weight: 700; line-height: 1.35; } /* Topup modal helpers */ .field-row{ display:flex; gap:10px; align-items:center; margin-top:10px; } .currency-pill{ padding:10px 14px; border:1px solid rgba(79, 76, 108, 0.2); border-radius:14px; background:#fff; font-weight:700; color:#111827; min-width:56px; text-align:center; } /* --- Profile-style topup modal (used on main too) --- */ .pmodal{ position: fixed; inset: 0; z-index: 9999; } .pmodal__backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(2px); } .pmodal__card{ position: relative; max-width: 520px; margin: 10vh auto 0; background: rgba(255,255,255,0.92); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 18px; } @media (max-width: 520px){ .pmodal__card{ margin: 12vh 12px 0; } } .pmodal__title{ font-weight: 900; color: var(--p4); margin-bottom: 12px; } .pmodal__label{ font-weight: 800; color: rgba(var(--p4-rgb),0.75); margin-bottom: 8px; } .pmodal__row{ display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; } .pmodal__currency{ border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.85); padding: 10px 12px; font-weight: 900; text-align: center; color: var(--p4); } .pmodal__input{ border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.85); padding: 10px 12px; font-weight: 900; outline: none; } .pmodal__actions{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; flex-wrap: wrap; } /* --- Tablet / small desktop navbar (<=1024px): allow wrapping, put ADMIN on second row --- */ @media (max-width: 1024px){ .navbar{ flex-wrap: wrap; gap: 10px; } .navbar .nav-left{ flex: 1 1 100%; min-width: 0; } .navbar .nav-right{ flex: 1 1 100%; min-width: 0; flex-wrap: wrap; justify-content: flex-end; } /* Force a line break right before #adminBtn without stretching the button */ .navbar .nav-right::after{ content: ""; flex-basis: 100%; order: 999; } .navbar #adminBtn{ order: 1000; } } /* --- Mobile navbar (<=576px): wrap controls into 2+ rows, no overflow --- */ @media (max-width: 576px){ .navbar{ flex-wrap: wrap; padding: 12px; gap: 10px; } .navbar .nav-left{ width: 100%; min-width: 0; justify-content: space-between; gap: 10px; } .navbar .brand{ font-size: 14px; line-height: 1.15; } .navbar .nav-link{ padding: 8px 10px; font-size: 13px; } .navbar .nav-right{ width: 100%; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; } .navbar .nav-right > *{ min-width: 0; } /* Topup button: full width (first row) */ .navbar .topup-header{ grid-column: 1 / -1; width: 100%; padding: 12px 12px; border-radius: 16px; box-shadow: 0 10px 22px rgba(var(--p1-rgb),.18); } /* Balance tile */ .navbar .balance{ display:flex; align-items:center; justify-content:center; padding: 10px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); box-shadow: none; font-size: 13px; white-space: normal; text-align: center; } /* Profile tile */ .navbar .user-pill{ width: 100%; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); } .navbar .user-pill .btn.secondary{ padding: 10px 10px; border-radius: 14px; white-space: nowrap; max-width: 100%; } /* Admin button: full width (third row) */ .navbar #adminBtn{ grid-column: 1 / -1; width: 100%; border-radius: 16px; padding: 10px 12px; } } /* ========================= Theme enforcement Makes templates recolor UI even where legacy styles used hardcoded whites. ========================= */ html[data-theme^="dark"]{ color-scheme: dark; } /* Native