/* * ╔══════════════════════════════════════════════════════════════════╗ * ║ WIDERZ — style.css v2.0 | Rose Violet + Soft Purple White ║ * ╠══════════════════════════════════════════════════════════════════╣ * ║ Bootstrap 4 + jQuery loaded separately — this is brand layer ║ * ║ ║ * ║ DARK-MODE CONVENTION (unchanged): ║ * ║ body (no class) = DARK theme (default) ║ * ║ body.dark = LIGHT theme ║ * ║ ║ * ║ TABLE OF CONTENTS ║ * ║ 01 CSS Custom Properties ║ * ║ 02 Base & Font ║ * ║ 03 Scrollbar ║ * ║ 04 Sidebar ║ * ║ 05 Header / Topbar ║ * ║ 06 Content Area ║ * ║ 07 Cards ║ * ║ 08 Forms & Inputs ║ * ║ 09 Select2 ║ * ║ 10 Buttons ║ * ║ 11 Tables ║ * ║ 12 Alerts ║ * ║ 13 Modals ║ * ║ 14 Pagination ║ * ║ 15 Order Status Badges ║ * ║ 16 Notification Badges ║ * ║ 17 Nav Tabs ║ * ║ 18 Dropdowns ║ * ║ 19 App Search ║ * ║ 20 Dark-mode Toggle ║ * ║ 21 Public Header ║ * ║ 22 Mobile Bottom Nav ║ * ║ 23 Homepage / Hero ★ CINEMATIC 3D ║ * ║ 24 Sign-in Page ║ * ║ 25 New Order Page ║ * ║ 26 Favourite Star Button ║ * ║ 27 Services Page ★ VIRTUAL TABLE ║ * ║ 28 Add Funds / Payments ║ * ║ 29 Dashboard Stats ║ * ║ 30 News / Updates Timeline ║ * ║ 31 Tickets ║ * ║ 32 Affiliates ║ * ║ 33 Footer ║ * ║ 34 Utility Helpers ║ * ║ 35 Animations & Keyframes ║ * ║ 36 LIGHT THEME (body.dark rules) ║ * ║ 37 Responsive ║ * ╚══════════════════════════════════════════════════════════════════╝ */ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"); /* ───────────────────────────────────────────────────────────── 01 CSS Custom Properties ───────────────────────────────────────────────────────────── */ :root { /* Brand — keep orange users already know */ --brand: #fd4710; --brand-deep: #c73400; --brand-border: #a02800; --gold: #F7941D; --accent: #f43f5e; /* rose-red highlight */ --accent-deep: #be123c; /* Dark Theme (default) — Rich Violet */ --bg: #0d0120; --bg-sidebar: #120230; --bg-card: #1a0540; --bg-well: #0f0228; --bg-input: #08010f; --text: #f0eaff; --text-muted: #a090c8; --border-color: #2a1050; /* Glass overlay for cinematic effects */ --glass: rgba(26, 5, 64, 0.7); --glass-border: rgba(244, 63, 94, 0.15); /* Layout */ --sidebar-w: 240px; --sidebar-w-sm: 80px; --header-h: 70px; --radius: 14px; --radius-sm: 8px; --t: 0.22s ease; --t-slow: 0.45s cubic-bezier(.4,0,.2,1); } /* ───────────────────────────────────────────────────────────── 02 Base & Font ───────────────────────────────────────────────────────────── */ html, body { font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; } body { background: var(--bg); color: var(--text); } body.dashboard-body{ background: var(--bg); } body.dashboard-body .container-fluid { padding: 0 15px; } *:focus { box-shadow: none !important; outline: none; } a { color: var(--text); text-decoration: none; transition: color var(--t); } a:hover { color: var(--gold); text-decoration: none; } h1,.h1 { color: var(--text); } .main-color { color: var(--gold) !important; } .hidden { display: none !important; } .nowrap { white-space: nowrap; } .clearfix::after { display: block; clear: both; content: ""; } ::placeholder { color: var(--text-muted); opacity: 1; } ::-ms-input-placeholder { color: var(--text-muted); } /* ───────────────────────────────────────────────────────────── 03 Scrollbar ───────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; opacity: .5; } ::-webkit-scrollbar-track { background: transparent; } /* ───────────────────────────────────────────────────────────── 04 Sidebar ───────────────────────────────────────────────────────────── */ .app-container { position: relative; } .app-sidebar { width: var(--sidebar-w); background: var(--bg-sidebar); height: 100vh; position: fixed; left: 0; top: 0; display: flex; flex-direction: column; z-index: 1020; transition: var(--t); border-right: 1px solid var(--border-color); } /* aurora glow on sidebar */ .app-sidebar::before { content: ""; position: absolute; top: -60px; left: -60px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(244,63,94,.18) 0%, transparent 70%); pointer-events: none; z-index: 0; } .sidebar-header { overflow: hidden; position: relative; padding-top: 28px; text-align: center; z-index: 1; } .sidebar-header .sh-bg { position: absolute; left: 0; top: 0; width: 100%; height: 120px; background: var(--bg-sidebar); border-radius: 0 0 40px 40px; z-index: 0; } .sidebar-header > * { position: relative; z-index: 2; } .sidebar-header .logo-lg { display: inline-block; height: 46px; } .sidebar-header .logo-sm { display: none; height: 48px; } .sidebar-header .app-logo { width: 100%; text-align: center; } /* User block */ .app-user { position: relative; padding: 5px 20px; background: var(--bg-sidebar); margin-top: 16px; z-index: 1; } .app-user-box { display: flex; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); gap: 8px; } .app-user-name { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1; margin-bottom: 4px; } .app-user-blnce { font-size: 13px; font-weight: 600; color: var(--gold); line-height: 1; } /* Quick-action icon row */ .list-inline { display: flex; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-color); } .list-inline .list-inline-item { flex: 1; text-align: center; padding: 10px 0; font-size: 17px; } .list-inline .list-inline-item a { color: var(--text-muted); transition: color .15s; } .list-inline .list-inline-item a:hover { color: var(--text); } .list-inline .fa-power-off { color: var(--accent) !important; } /* Sidebar scroll */ .sidebar-content { flex: 1; overflow-y: auto; padding-bottom: 40px; position: relative; z-index: 1; } .sidebar-content::-webkit-scrollbar { width: 0; } /* Menu items */ .sidebar-menu { margin: 16px 0; padding: 0; list-style: none; } .sidebar-menu > li { position: relative; } .sidebar-menu > li > a { display: flex; align-items: center; gap: 8px; padding: 0 10px; margin: 0 8px 0 0; border-radius: 0 12px 12px 0; border-left: 3px solid transparent; color: var(--text-muted); font-size: 13px; height: 38px; font-weight: 500; text-decoration: none; transition: var(--t); } .sidebar-menu > li > a:hover { background: rgba(244,63,94,.1); color: var(--text); } .sidebar-menu > li.active > a { background: linear-gradient(90deg, rgba(253,71,16,.25), rgba(244,63,94,.15)); border-left-color: var(--brand); color: #fff; } .sidebar-menu > li > a .m-icon, .sidebar-menu > li > a .navbar-icon { width: 30px; text-align: center; color: var(--text-muted); flex-shrink: 0; font-size: 15px; transition: var(--t); } .sidebar-menu > li > a:hover .m-icon, .sidebar-menu > li > a:hover .navbar-icon { color: var(--brand); } .sidebar-menu > li.active > a .m-icon, .sidebar-menu > li.active > a .navbar-icon { color: var(--brand); } .menu-text { transition: var(--t); white-space: nowrap; overflow: hidden; } .close-sidebar-btn { position: absolute; top: 20px; right: -48px; width: 48px; height: 48px; background: var(--bg-card); color: var(--text); line-height: 48px; text-align: center; border-radius: 0 22px 22px 0; border: 1px solid var(--border-color); border-left: none; cursor: pointer; display: none; z-index: 1021; } /* ───────────────────────────────────────────────────────────── 05 Header / Topbar ───────────────────────────────────────────────────────────── */ .app-header { background: var(--bg-sidebar); position: fixed; left: var(--sidebar-w); right: 0; top: 0; height: var(--header-h); z-index: 1000; transition: var(--t); border-bottom: 1px solid var(--border-color); backdrop-filter: blur(12px); } .app-header .row-100 { height: var(--header-h); align-items: center; } .app-header .col-100 { max-height: 0 !important; } .app-header .dash-menu-btn { font-size: 22px; color: var(--text-muted); cursor: pointer; transition: color var(--t); } .app-header .dash-menu-btn:hover { color: var(--brand); } .header-btn { display: inline-flex; align-items: center; color: var(--text-muted); font-size: 14px; height: var(--header-h); text-decoration: none; gap: 6px; transition: color var(--t); } .header-btn .icon { height: 32px; width: 32px; font-size: 17px; line-height: 32px; text-align: center; border-radius: 8px; color: var(--text-muted); transition: .14s ease; } .header-btn:hover { color: var(--text); } .header-btn:hover .icon { background: var(--brand); color: #fff; } .user_infos { color: var(--text); font-size: 13px; margin: 0; font-weight: 500; } .user_infos strong { color: var(--gold); } .currency_converter, .flag_lang { list-style: none; display: inline-block; color: var(--text); background: transparent; border: none; font-size: 19px; margin: 0; padding: 0; position: relative; vertical-align: middle; } .currency_converter .dropdown-toggle::after, .flag_lang .dropdown-toggle::after { display: none; } #currencies-list { min-width: 80px; } #currencies-list li a { padding: 7px 12px; display: block; border-bottom: 1px solid var(--border-color); color: var(--text); font-weight: 600; font-size: 13px; text-decoration: none; } #currencies-list li a:hover { background: var(--brand); color: #fff; } .telegram_icon_top i { color: #27B5C4; font-size: 21px; display: inline-block; transition: .14s ease; vertical-align: middle; } .telegram_icon_top:hover i { opacity: .8; } /* ───────────────────────────────────────────────────────────── 06 Content Area ───────────────────────────────────────────────────────────── */ .app-content { padding-left: var(--sidebar-w); padding-top: calc(var(--header-h) + 24px); padding-bottom: 120px; transition: var(--t); } /* ───────────────────────────────────────────────────────────── 07 Cards ───────────────────────────────────────────────────────────── */ .d-card { border-radius: var(--radius); background: var(--bg-card); color: var(--text); border: 1px solid var(--border-color); position: relative; overflow: hidden; } /* subtle top glow line */ .d-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(244,63,94,.4), transparent); pointer-events: none; } .d-card-head { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--border-color); } .d-card-head .dch-body { background: transparent; border: none; font-weight: 600; font-size: 16px; color: var(--text); padding: 14px 18px; display: flex; align-items: center; gap: 12px; } .d-card-head .dch-body .icon { width: 42px; height: 42px; background: linear-gradient(135deg, var(--brand), var(--accent)); display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 16px; color: #fff; flex-shrink: 0; box-shadow: 0 4px 16px rgba(253,71,16,.3); } .d-card-body { padding: 22px 18px 30px; } .d-card.d-pad { padding: 30px 24px; } .d-card.d-pad-2 { padding: 18px 24px; } /* Dashboard stat card */ .d-card.dc-dash { background-image: url(https://storage.perfectcdn.com/rhsskt/3wz23jig2bn9ha0p.png); background-repeat: no-repeat; background-position: top right; background-size: auto 100%; position: relative; margin-bottom: 22px; } .d-card.dc-dash::after { content: ""; position: absolute; left: 0; top: 16px; height: 55%; width: 3px; background: linear-gradient(180deg, var(--accent), var(--brand)); border-radius: 0 2px 2px 0; } .d-card.dc-dash .dch-title { font-size: 17px; font-weight: 700; } .d-card.dc-dash .dch-text { font-size: 13px; font-weight: 400; padding: 8px 0; color: var(--text-muted); } .d-card.d-card-icon { background: linear-gradient(135deg, #1a3a8f, #185bdc); } /* 2FA card */ .twof-card { border-radius: var(--radius); background: var(--bg-card); color: var(--text); padding: 22px 18px 30px; margin-top: 9rem; margin-bottom: 3rem; border: 1px solid var(--border-color); } /* Bootstrap .card override */ .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 11px; margin-bottom: 10px; color: var(--text); } .card .card-header { background: var(--bg-card); border: none; padding: 14px 24px; color: var(--text); } .card .card-header h4 { font-size: 14px; color: var(--text); margin: 0; } .card .card-header code { font-family: "Montserrat", sans-serif; color: var(--accent) !important; font-size: 11px; } .card .card-header span { font-size: 11px; color: var(--text-muted); } .card .card-header a { font-size: 11px; color: var(--accent); } .card .card-header .fa-copy { color: var(--accent); } .api h4 { color: var(--text); font-weight: bolder; font-size: 1rem; } /* ───────────────────────────────────────────────────────────── 08 Forms & Inputs ───────────────────────────────────────────────────────────── */ .form-group label, .control-label, .fla { color: var(--text); font-weight: 500; font-size: 13px; margin-bottom: 7px; display: block; line-height: 1.4; } .form-group .form-control, .form-control { display: block; width: 100%; min-height: 46px; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; transition: border-color .18s, box-shadow .18s; } .form-control:focus { background: var(--bg-input); color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(244,63,94,.15) !important; } .form-control::placeholder { color: var(--text-muted); opacity: 1; } .form-control[readonly] { background: var(--bg-well); color: var(--text-muted); opacity: 1; cursor: default; } /* Input group */ .input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; } .input-group-icon { background: linear-gradient(135deg, var(--brand), var(--accent)); border: 1px solid var(--brand-border); border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); width: 44px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; flex-shrink: 0; } .input-group > .form-control:not(:first-child) { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .input-group .input-group-prepend .input-group-text { background: var(--brand-deep) !important; color: #fff; border: none; border-radius: 0; width: 52px; text-align: center; display: flex; align-items: center; justify-content: center; } .input-group-btn:last-child > .btn { margin-left: -1px; z-index: 2; } .input-group .form-control:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Field group (sign-in) */ .fg { display: flex; align-items: center; min-height: 62px; border-radius: 12px; padding: 8px; background: var(--bg-well); border: 1px solid var(--border-color); width: 100%; gap: 0; transition: border-color .18s; } .fg:focus-within { border-color: var(--accent); } .fg.fg-light { background: rgba(244,63,94,.05); } .fg.fg-dark { background: var(--bg-input); } .fg .fg-icon { border-radius: 8px; background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; display: flex; align-items: center; justify-content: center; height: 46px; width: 46px; flex-shrink: 0; font-size: 17px; box-shadow: 0 4px 12px rgba(253,71,16,.3); } .fg .fg-control { flex: 1; background: transparent; border: none; outline: none; color: var(--text); padding: 10px 16px; font-weight: 500; font-size: 14px; font-family: inherit; } .fg .fg-control::placeholder { color: var(--text-muted); } .fg-info { font-weight: 700; padding-left: 6px; margin-top: 6px; font-size: 12px; color: var(--text-muted); } /* Well */ .well { min-height: 20px; padding: 18px; margin-bottom: 20px; background: var(--bg-well); color: var(--text); border: 1px solid var(--border-color); border-radius: var(--radius-sm); } .panel-body { background: var(--bg); color: var(--text); font-size: 1rem; padding: 10px; width: 100%; border-radius: var(--radius-sm); overflow: hidden; } /* Checkbox */ .fcheck input { display: none; visibility: hidden; } .fcheck input[type="checkbox"]:checked + label::before { background: var(--accent); color: #fff; } .fcheck label { position: relative; display: flex; align-items: center; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text); gap: 8px; } .fcheck label::before { content: ""; font-family: "Font Awesome 5 Pro"; font-size: 14px; font-weight: 900; height: 20px; width: 20px; min-width: 20px; border: 2px solid var(--accent); color: transparent; border-radius: 5px; display: flex; align-items: center; justify-content: center; transition: .14s ease; } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--accent) !important; border-color: var(--accent); } .custom-control-input { position: absolute; z-index: -1; opacity: 0; } .custom-control-label { width: 148px; height: 130px; padding: 15px; border: 1px solid var(--border-color); color: var(--text); font-size: 14px; display: flex; text-align: center; align-items: center; justify-content: center; flex-direction: column; font-weight: 400; margin-bottom: 0; white-space: break-spaces; cursor: pointer; transition: all .3s ease; border-radius: var(--radius-sm); } .custom-control-label img { width: 58px; margin-bottom: 10px; } .thePaymentRequest .custom-control-label { width: 200px; word-break: break-word; flex-direction: row; } .therequest .custom-control-label, .thePaymentRequest .custom-control-label { height: 58px; position: relative; display: flex; align-items: center; justify-content: space-between; } .ticket-options-container .custom-control-label span { color: var(--text); } .files-label { color: var(--text); } .files-wrapper { display: flex; flex-direction: column; line-height: 29px; } .files-item { margin-bottom: 8px; display: flex; align-items: center; line-height: 29px; } /* ───────────────────────────────────────────────────────────── 09 Select2 Overrides ───────────────────────────────────────────────────────────── */ .select2-results__options { list-style: none; margin: 0; padding: 0; background: var(--bg-well); border: none; } .select2-container--default .select2-results > .select2-results__options { max-height: 320px; overflow-y: auto; } .select2-dropdown { display: block !important; position: absolute; left: -100000px; width: 100%; z-index: 5; background: var(--bg-well) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-sm); } .select2-container .dropdown-menu > li > a { color: var(--text); background: var(--bg-well); white-space: inherit; } .select2-search--dropdown { display: block !important; padding: 10px; position: relative; } .select2-search__field { padding-left: 28px; } .select2-search__field-icon { position: absolute; height: 100%; min-height: 100%; padding-left: 8px; display: flex; align-items: center; width: 20px; } input#select2-search__field { padding: 0 0 0 30px; height: 46px; font-size: 15px; width: 100%; box-sizing: border-box; z-index: 100; } #select2-orderform-category-results { max-height: 320px; overflow-y: auto; } /* ───────────────────────────────────────────────────────────── 10 Buttons ───────────────────────────────────────────────────────────── */ .btn { display: inline-block; border-radius: var(--radius-sm); font-weight: 600; font-size: 15px; padding: 10px 36px; transition: .2s ease; text-align: center; cursor: pointer; color: #fff !important; border: none; position: relative; overflow: hidden; } /* shimmer on hover */ .btn::after { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); transform: skewX(-20deg); transition: left .4s ease; pointer-events: none; } .btn:hover::after { left: 150%; } .btn-primary, .btn.btn-primary { background: linear-gradient(135deg, var(--brand), var(--accent)); border: none; box-shadow: 0 4px 20px rgba(253,71,16,.35); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: linear-gradient(135deg, var(--brand-deep), var(--accent-deep)) !important; box-shadow: 0 6px 24px rgba(253,71,16,.5) !important; color: #fff !important; } .btn-secondary, .btn.btn-secondary { background: var(--bg-well); border: 1px solid var(--border-color); color: var(--text) !important; } .btn-secondary:hover, .btn-secondary:focus { background: var(--bg-card); color: var(--text) !important; } .btn.btn-outline { background: transparent; border: 2px solid rgba(255,255,255,.5); padding: 15px 36px; } .btn.btn-outline:hover { background: #fff; color: var(--bg) !important; } .btn.btn-dark { background: var(--bg-well); border: 1px solid var(--border-color); } .btn-danger, .btn.btn-danger { background: linear-gradient(135deg, var(--brand), var(--accent)) !important; border: none !important; padding: 5px 10px !important; font-size: 12px !important; height: auto !important; border-radius: var(--radius-sm) !important; } .btn.btn-lg { padding: 15px 36px; font-size: 16px; } .btn.btn-xs, .btn-xs { padding: 4px 10px; font-size: 12px; } .desc-btn { background: linear-gradient(135deg, var(--brand), var(--accent)); padding: 4px 14px; border-radius: 12px; font-size: 11px; color: #fff; display: inline-block; font-weight: 600; transition: var(--t); box-shadow: 0 2px 8px rgba(253,71,16,.3); } .desc-btn:hover { opacity: .9; color: #fff; } .app-order .btn.btn-refill { font-size: 9px !important; padding: 1px 5px !important; height: auto !important; font-weight: 400; } /* ───────────────────────────────────────────────────────────── 11 Tables ───────────────────────────────────────────────────────────── */ .table td, .table th { padding: .7rem .5rem; vertical-align: middle; } .table td { border-top: none; border-bottom: 1px solid var(--border-color) !important; color: var(--text); font-size: 13px; } .table th, .table thead th, .catetitle td { border: none; } .table thead { font-size: 13px; color: var(--accent); font-weight: 700; } .table thead.white { color: #fff; background: linear-gradient(90deg, var(--brand), var(--accent)) !important; } .table-bordered td, .table-bordered th { border: 1px solid var(--border-color) !important; } /* Mobile card table */ .app-mtable { display: block; } .app-mtable .app-block:nth-child(odd) { background: rgba(255,255,255,.02) !important; } .app-mtable .app-block { padding: 5px 0; display: block; background: var(--bg-well); margin-bottom: 10px; border-radius: var(--radius-sm); border-bottom: 2px solid var(--accent); word-break: break-all; } .app-mtable .app-block .app-col { display: flex; align-items: center; font-size: 11px; padding: 4px 14px; margin-bottom: 4px; } .app-mtable .app-block .app-col::before { content: attr(data-title); min-width: 100px; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 2px; line-height: 1.2; } .app-mtable .thead-tr { display: none; } .thead-tr, .thead-tr th { background: var(--bg-well); font-weight: 500; font-size: 12px; color: var(--text); padding: 7px; } .catetitle td strong { background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 8px; display: block; padding: 10px 14px; margin: 0 -10px; text-align: center; font-size: 14px; color: #fff; font-weight: 600; } .table-mobile-cards thead { display: none; } .table-mobile-cards tr.table-mobile-card { display: block; border-radius: var(--radius-sm); border: 1px solid var(--border-color); padding: 14px 20px; margin-bottom: 20px; } .table-mobile-cards tr.table-mobile-card td { display: block; border: none; padding: 0; } .table-mobile-cards tr.table-mobile-card td + td { margin-top: 10px; } .table-mobile-cards tr.table-mobile-card td::before { content: attr(data-title); font-size: 11px; color: var(--text-muted); font-weight: 600; display: block; } .showTicket { min-height: 20px; padding: 18px; margin-bottom: 20px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); } /* ───────────────────────────────────────────────────────────── 12 Alerts ───────────────────────────────────────────────────────────── */ .alert { border-radius: 10px; border: 0 !important; padding: 12px 18px; font-weight: 600; font-size: 12px !important; } .alert-success { background: linear-gradient(135deg, #1a7a3c, #0f5132); color: #c3f0d0; border: none !important; } .alert-danger { background: linear-gradient(135deg, #7a1a2e, #510f1e); color: #f8c0cc; } .alert-info { background: linear-gradient(135deg, #0e4f6a, #073347); color: #b0dff0; } /* ───────────────────────────────────────────────────────────── 13 Modals ───────────────────────────────────────────────────────────── */ .modal-content { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); outline: 0; } .modal-header { background: linear-gradient(135deg, var(--brand), var(--accent)); border: none; padding: 14px 18px; } .modal-title { font-size: 14px; color: #fff; margin: 0; font-weight: 700; } .modal-body { color: var(--text); font-size: 13px; font-weight: 500; } .modal-body p { font-size: 14px; color: var(--text); font-weight: 500; } .modal-footer { border-color: var(--border-color); padding: 8px; } .fade:not(.show) { opacity: 1; } /* ───────────────────────────────────────────────────────────── 14 Pagination ───────────────────────────────────────────────────────────── */ .pagination { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; } .pagination li a { display: inline-block; padding: 6px 13px; color: var(--text-muted); background: var(--bg-card); border-radius: var(--radius-sm); transition: .2s; text-decoration: none; font-size: 13px; font-weight: 500; border: 1px solid var(--border-color); } .pagination li a.active, .pagination li a:hover:not(.active) { background: linear-gradient(135deg, var(--brand), var(--accent)); border-color: transparent; color: #fff; } /* ───────────────────────────────────────────────────────────── 15 Order Status Badges ───────────────────────────────────────────────────────────── */ .order-status { font-size: 10px; line-height: 18px; padding: 3px 8px; border-radius: 12px; text-align: center; border: 1px solid; display: inline-block; white-space: nowrap; font-weight: 600; } .order-status { color: #4ade80; border-color: #4ade80; } .order-status.os-cancel { color: var(--accent); border-color: var(--accent); } .order-status.os-partial { color: #60a5fa; border-color: #60a5fa; } .order-status.os-iprogress { color: #fb923c; border-color: #fb923c; } .order-status.os-processing { color: var(--brand); border-color: var(--brand); } .order-status.os-pending { color: #fbbf24; border-color: #fbbf24; } /* ───────────────────────────────────────────────────────────── 16 Notification Badges ───────────────────────────────────────────────────────────── */ .bg { padding: 1px 14px; color: #fff; white-space: nowrap; display: inline-block; font-weight: 700; text-transform: capitalize; text-align: center; vertical-align: middle; border-radius: 5px; font-size: 11px; } .bg-attention { background: linear-gradient(-145deg, #aa076b, #61045f); } .bg-important { background: linear-gradient(-145deg, #c10404, #33001b); } .bg-awareness { background: linear-gradient(-145deg, #09a741, #15293a); } .bg-announce { background: linear-gradient(-145deg, #2b8edf, #2b1b38); } .bg-updates { background: linear-gradient(-145deg, #0f57f9, #1c0040); } .bg-super { background: linear-gradient(-145deg, #ffc500, #c21500); } .bg-new { background: linear-gradient(-145deg, #44a08d, #093637); } .bg-disabledd { background: linear-gradient(-145deg, #ff0000, #860a0a); } /* ───────────────────────────────────────────────────────────── 17 Nav Tabs ───────────────────────────────────────────────────────────── */ .ticketTabs.nav-pills .nav-link { color: var(--text); opacity: 1; padding: .5rem 1rem; } .ticketTabs.nav-pills .nav-link.active { background: transparent !important; color: var(--text); } .ticketTabs.nav-pills .nav-link i, .ticketTabs.nav-pills .nav-link.active i { width: 46px; height: 46px; background: linear-gradient(135deg, var(--brand), var(--accent)); display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 17px; color: #fff; flex-shrink: 0; } .app-ord-nav { padding: 0; margin: 0; list-style: none; } .app-ord-nav li a { background: var(--bg-card); color: var(--text-muted); padding: 10px 12px; font-size: 11px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; min-height: 40px; display: block; width: 100%; text-decoration: none; transition: .15s ease; margin-bottom: 4px; font-family: inherit; } .app-ord-nav li a.active, .app-ord-nav li a:hover { background: linear-gradient(135deg, var(--brand), var(--accent)); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 4px 16px rgba(253,71,16,.3); } .app-ord-nav li:last-child { margin-left: auto; } .app-ord-search { background: var(--bg-card); color: var(--text-muted); font-size: 11px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; min-height: 40px; position: relative; overflow: hidden; transition: .15s ease; } .app-ord-search .app-ord-input { width: calc(100% - 40px); background: transparent; border: none; outline: none; height: 40px; color: var(--text); padding: 0 14px; min-width: 200px; font-family: inherit; } .app-ord-search .app-ord-submit { position: absolute; right: 0; top: 0; width: 40px; height: 40px; line-height: 40px; text-align: center; border: none; background: var(--brand); color: #fff; } /* ───────────────────────────────────────────────────────────── 18 Dropdowns ───────────────────────────────────────────────────────────── */ .dropdown-menu { padding: 0; width: 100%; max-height: 58vh; overflow-y: auto; border: 1px solid var(--border-color) !important; border-radius: var(--radius-sm); background: var(--bg-well) !important; } .dropdown button { background: transparent !important; border: none !important; padding: 0; } .dropdown button:hover, .dropdown button:focus { outline: none; box-shadow: none; } #order-sItem, #order-cItem { white-space: normal; padding: 11px 14px; font-weight: 400; font-size: 13px; background: var(--bg-well); border-bottom: 1px solid var(--border-color); color: var(--text); text-align: left; width: 100%; display: block; cursor: pointer; transition: background .15s; font-family: inherit; border: none; } #order-sItem:hover, #order-cItem:hover { background: var(--bg-card); color: var(--brand); } #order-category, #order-services { white-space: nowrap; text-overflow: ellipsis; width: 85%; overflow-x: hidden; position: absolute; line-height: 15px; height: 24px; font-size: 14px; } /* Social platform icon colors in dropdowns */ .dropdown .fab.fa-instagram { background: linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-size:16px; margin-right:8px; } .dropdown .fab.fa-facebook-square { color: #207eff; font-size:16px; margin-right:8px; } .dropdown .fab.fa-youtube { color: #ff0042; font-size:16px; margin-right:8px; } .dropdown .fab.fa-twitter { color: #1da1f2; font-size:16px; margin-right:8px; } .dropdown .fab.fa-tiktok { color: #f8004d; font-size:16px; margin-right:8px; } .dropdown .fab.fa-telegram-plane { color: #2b9fd2; font-size:16px; margin-right:8px; } .dropdown .fab.fa-spotify { color: #62ffa2; font-size:16px; margin-right:8px; } .dropdown .fab.fa-twitch { color: #e600ff; font-size:16px; margin-right:8px; } .dropdown .fab.fa-discord { color: #738ADB; font-size:16px; margin-right:8px; } .dropdown .fab.fa-google { color: #FF3E30; font-size:16px; margin-right:8px; } .dropdown .fab.fa-snapchat-ghost { color: #FFFC00; font-size:16px; margin-right:8px; } .dropdown .fab.fa-behance { color: #053eff; font-size:16px; margin-right:8px; } .dropdown .fas.fa-globe { color: #32cdff; font-size:16px; margin-right:8px; } .dropdown .fas.fa-star { color: var(--gold); font-size:16px; margin-right:8px; } .dropdown .fas.fa-plane { color: #00AF87; font-size:16px; margin-right:8px; } .dropdown .fas.fa-arrow-right{ color: var(--brand); font-size:16px; margin-right:8px; } /* ───────────────────────────────────────────────────────────── 19 App Search Bar ───────────────────────────────────────────────────────────── */ .app-search { position: relative; } .app-search input { height: 42px; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border-color); font-size: 14px; width: 100%; color: var(--text); padding: 0 42px 0 32px; font-family: inherit; transition: border-color .18s; } .app-search input:focus { outline: 0; border-color: var(--accent); } .app-search i { color: var(--text-muted); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); } .app-search .app-ord-submit { position: absolute; right: 0; top: 0; height: 42px; padding: 0 14px; border: none; background: linear-gradient(135deg, var(--brand), var(--accent)); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: #fff; cursor: pointer; } .app-input { height: 42px; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border-color); font-size: 14px; width: 100%; color: var(--text); padding: 0 14px; font-family: inherit; } .app-input:focus { outline: 0; box-shadow: none; border-color: var(--accent); } .help-block.min-max { font-size: 10px; padding: 4px; color: var(--accent); } /* ───────────────────────────────────────────────────────────── 20 Dark-mode Toggle ───────────────────────────────────────────────────────────── */ .darkmode { background: transparent; border: none; outline: 0; padding: 0; cursor: pointer; vertical-align: middle; } .darkmode:focus { outline: 0; box-shadow: none; } .darkmode i { font-size: 20px; display: inline-block; transition: .14s ease; } .darkmode i.fa-moon { color: #a78bfa; } .darkmode i.fa-sun { color: var(--gold); } body .fa-sun { display: block; } body .fa-moon { display: none; } body.dark .fa-sun { display: none; } body.dark .fa-moon { display: block; } .frgpass { font-size: 14px; color: var(--text-muted); transition: color var(--t); } .frgpass:hover{ color: var(--accent); } /* ───────────────────────────────────────────────────────────── 21 Public Header (non-dashboard pages) ───────────────────────────────────────────────────────────── */ .header { height: 90px; position: absolute; left: 0; top: 0; width: 100%; z-index: 1000; margin-top: 10px; } .header .site-name img { height: 46px; } .header .header-menu ul { margin: 0; padding: 0; list-style: none; } .header .header-menu ul li { display: inline-block; padding: 0 22px; } .header .header-menu ul li a { color: rgba(255,255,255,.8); text-decoration: none; font-size: 14px; display: block; font-weight: 500; height: 90px; line-height: 90px; position: relative; transition: color var(--t); } .header .header-menu ul li a::after { content: ""; position: absolute; bottom: 18px; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .25s ease; border-radius: 2px; } .header .header-menu ul li a:hover { color: #fff; } .header .header-menu ul li a:hover::after { transform: scaleX(1); } .head-menu { display: block; } .head-menu.active { display: block; } .home-menu-btn { display: none; } .home-menu-btn i { font-size: 22px; } /* ───────────────────────────────────────────────────────────── 22 Mobile Bottom Nav ───────────────────────────────────────────────────────────── */ .app-navbar { display: none; height: 64px; position: fixed; bottom: 0; left: 0; width: 100%; background: var(--bg-sidebar); z-index: 1000; padding: 0 24px; border-top: 1px solid var(--border-color); } .app-navbar > .row { height: 64px; align-items: center; } .app-navbar .navbar-mid-icon { margin-top: -36px; } .mob-nav { width: 100%; position: fixed; bottom: 0; left: 0; background: var(--bg-sidebar); z-index: 9999; display: none; box-shadow: 0 -4px 24px rgba(0,0,0,.4); border-top: 1px solid var(--border-color); } .mob-nav-link { width: 100%; list-style: none; padding: 0; margin: 0; display: flex; align-items: center; } .mob-nav-link li { flex: 1; padding: 10px 4px; border-right: 1px solid var(--border-color); } .mob-nav-link li:last-child { border-right: none; } .mob-nav-link li a { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: var(--text-muted); text-decoration: none; gap: 4px; transition: color var(--t); } .mob-nav-link li a i { font-size: 17px; } .mob-nav-link li.active a, .mob-nav-link li.active a i { color: var(--brand); } /* ───────────────────────────────────────────────────────────── 23 Homepage / Hero ★ CINEMATIC 3D ───────────────────────────────────────────────────────────── */ .main-top { width: 100%; overflow: hidden; position: relative; padding: 120px 0; /* Deep violet aurora background */ background: radial-gradient(ellipse 80% 60% at 20% 40%, rgba(244,63,94,.18) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 20%, rgba(253,71,16,.12) 0%, transparent 55%), radial-gradient(ellipse 70% 70% at 50% 80%, rgba(139,92,246,.1) 0%, transparent 60%), var(--bg); } .main-top .main-top-bg { background-size: cover; background-position: top center; position: absolute; inset: 0; z-index: 0; opacity: .35; } /* Floating orbs */ .main-top::before { content: ""; position: absolute; top: -100px; right: 10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(244,63,94,.25) 0%, transparent 65%); border-radius: 50%; animation: floatOrb 8s ease-in-out infinite; pointer-events: none; } .main-top::after { content: ""; position: absolute; bottom: -80px; left: 5%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(253,71,16,.2) 0%, transparent 65%); border-radius: 50%; animation: floatOrb 10s ease-in-out infinite reverse; pointer-events: none; } .main-top .main-top-content { position: relative; z-index: 33; padding: 100px 0 0; } .main-top .main-top-real-content { position: relative; z-index: 38; } /* Hero text */ .head-text h1 { font-size: 44px; font-weight: 800; line-height: 1.2; color: var(--text); } .head-text h1 span { font-weight: 900; color: var(--accent); } .head-text p { font-size: 16px; line-height: 1.8; color: rgba(240,234,255,.75); } /* Desktop stats bar */ .main-stats { padding: 70px 0 0; } .main-stats .home-stat.br { border-right: 1px solid rgba(255,255,255,.1); } .main-stats .hstat-text { font-size: 28px; font-weight: 800; color: var(--text); } .main-stats .hstat-title { font-size: 15px; font-weight: 400; color: var(--text-muted); margin-top: 2px; } .main-stats .home-stat i { font-size: 32px; background: linear-gradient(135deg, var(--brand), var(--accent)); width: 58px; height: 58px; text-align: center; line-height: 58px; color: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(253,71,16,.35); } .main-stats-mob { display: none; } /* ★ Feature / HB boxes — 3D cinematic cards */ .hb-box { background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 32px 20px; text-align: center; margin-bottom: 24px; border-radius: 18px; cursor: pointer; transition: transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s ease, border-color .3s; transform-style: preserve-3d; perspective: 800px; position: relative; overflow: hidden; } .hb-box::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(244,63,94,.08) 0%, transparent 60%); border-radius: inherit; opacity: 0; transition: opacity .4s; pointer-events: none; } .hb-box:hover { transform: translateY(-10px) rotateX(4deg) rotateY(-2deg); box-shadow: 0 24px 60px rgba(244,63,94,.25), 0 8px 24px rgba(0,0,0,.4); border-color: rgba(244,63,94,.35); } .hb-box:hover::before { opacity: 1; } .hb-box:hover .hb-box-icon { transform: scale(1.1) rotateZ(-5deg); } .hb-box:hover .hb-box-icon i { transform: scale(1.15); } .hb-box-icon { width: 100px; height: 100px; background: linear-gradient(135deg, var(--brand), var(--accent)); line-height: 100px; border-radius: 50%; margin: 0 auto 28px; text-align: center; box-shadow: 0 8px 28px rgba(253,71,16,.4); transition: transform .4s cubic-bezier(.2,.8,.3,1); } .hb-box-icon i { font-size: 36px; color: #fff; line-height: 100px; transition: transform .3s; } .hb-box-text h2 { color: var(--text); font-size: 17px; font-weight: 700; margin-bottom: 14px; } .hb-box-text p { color: var(--text-muted); font-size: 13px; line-height: 1.7; } /* Platform icon colors inside hb-box */ .hb-box .fa-facebook { color: #1877f2 !important; } .hb-box .fa-instagram { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hb-box .fa-tiktok { color: #ee1d52 !important; } .hb-box .fa-snapchat { color: #fffc00 !important; text-shadow: 0 0 8px rgba(0,0,0,.4); } .hb-box .fa-telegram { color: #2b9fd2 !important; } .hb-box .fa-twitter { color: #1da1f2 !important; } .hb-box .fa-discord { color: #738adb !important; } .hb-box .fa-globe { color: #32cdff !important; } /* When hb-box has platform icon override icon container */ .hb-box .hb-box-icon.platform-icon { background: var(--bg-well); border: 2px solid var(--border-color); box-shadow: 0 8px 28px rgba(0,0,0,.3); } .hb-box .hb-box-icon.platform-icon i { font-size: 40px; line-height: 96px; } .home-bottom, .home-box-2 { padding: 70px 0; } .home-box-3 { margin: 70px 0; } .home-box-3 .footer-top { background: var(--bg-card); border: 1px solid var(--border-color); padding: 48px 36px; border-radius: 18px; position: relative; overflow: hidden; } .home-box-3 .footer-top::before { content: ""; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(253,71,16,.2), transparent 65%); border-radius: 50%; } .home-box-3 .footer-top h1 { font-size: 26px; font-weight: 700; color: var(--brand); position: relative; } /* Login card */ .login-card { background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: 18px; } .login-card .lc-body { padding: 32px 36px; } .login-card .lc-title { font-weight: 800; font-size: 24px; line-height: 1.2; color: var(--text); } .login-card .lc-title h4 { font-weight: 800; font-size: 22px; color: var(--text); margin: 0; } .login-card .lc-title small { font-weight: 400; font-size: 13px; color: var(--text-muted); } /* Section titles */ .section_title_wrap .small_title { color: var(--gold); font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; } .section_title_wrap .sec_title { color: var(--text); font-weight: 800; font-size: 32px; margin: 8px 0 12px; line-height: 1.2; } .section_title_wrap .sec_des { color: var(--text-muted); font-size: 15px; line-height: 1.7; margin-bottom: 15px; } /* Why Choose — detail boxes */ .home-phone { position: relative; } .home-phone .iphone.floating { animation: floatPhone 5s ease-in-out infinite; } .detail-box { margin-bottom: 22px; align-items: flex-start; } .dt-icon { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, rgba(253,71,16,.2), rgba(244,63,94,.2)); border: 1px solid rgba(244,63,94,.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .dt-icon i { font-size: 18px; color: var(--accent); } .dt-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .dt-text { font-size: 13px; color: var(--text-muted); line-height: 1.6; } /* Best section */ #best_sec { padding: 5rem 0; } .best_content h2 { font-size: 36px; color: var(--text); font-weight: 800; margin-bottom: 18px; line-height: 1.2; } .best_content p { color: var(--text-muted); font-size: 14px !important; line-height: 1.8; } .best_content h2 .same-color { color: var(--text); } .best_content .main-color { color: var(--gold) !important; } #testimonials { padding: 5rem 0; } .testimoials_item { background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); padding: 28px; border-radius: 18px; min-height: 360px; text-align: center; width: 95%; margin: 0 auto; transition: transform .3s ease, box-shadow .3s; } .testimoials_item:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(244,63,94,.2); } .testimoials_item .images img { width: 90px; margin: 0 auto; border-radius: 50%; border: 3px solid var(--accent); } .testimoials_item .testi_user_info { margin-bottom: 28px; } .testimoials_item .testi_user_info .username { font-size: 20px; font-weight: 700; color: var(--text); } .testimoials_item .testi_user_info .rating { color: var(--gold); font-size: 16px; } .testimoials_item .content p { font-size: 14px; color: var(--text-muted); line-height: 1.7; } button.slick-arrow { display: none !important; } /* Payment method boxes */ .futures-version-2 .hb-box { padding: 24px 16px; } .futures-version-2 .hb-box .hb-box-icon { width: 72px; height: 72px; line-height: 72px; margin-bottom: 16px; } .futures-version-2 .hb-box .hb-box-icon i { font-size: 26px; line-height: 72px; } .futures-version-2 .hb-box h2 { font-size: 14px; font-weight: 700; margin: 0; } /* ───────────────────────────────────────────────────────────── 24 Sign-in Page ───────────────────────────────────────────────────────────── */ .head-text.sign_pg_title h1 { line-height: 1; margin-bottom: 14px; } .head-text.sign_pg_title h1 .make_smaller { font-size: 28px; } .banner-title-inline-images { display: inline; width: 26px; } .f-14 { font-size: 14px !important; line-height: 1.2; } .statistics_card .icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--gold), var(--brand)); border-radius: 12px; text-align: center; line-height: 64px; font-size: 22px; color: #fff; box-shadow: 0 6px 20px rgba(247,148,29,.3); } .cursor_help { cursor: help; } .status_card { padding: 10px; background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border-color); } .status_head { background: var(--bg-well); padding: 10px; border-radius: 12px; display: flex; } .text_status { width: 70%; } .amount_status { text-align: center; width: 28%; background: linear-gradient(135deg, var(--gold), var(--brand)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #fff; } .status_body ul { list-style: none; margin-left: 10px !important; } .text_status .text_big { font-weight: 900; font-size: 24px; color: var(--text); } .text_status .text_info { font-size: 11px; font-weight: 400; margin-bottom: 0; color: var(--text-muted); } .acStatusModal { max-width: 85%; } /* ───────────────────────────────────────────────────────────── 25 New Order Page ───────────────────────────────────────────────────────────── */ #showOnlyMob { display: none; } .def_box_sta { background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; margin-bottom: 10px; border-radius: 10px; padding: 10px; font-size: 14px; text-align: center; font-weight: 600; } .smmiconss ul { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin: .5rem 0; list-style: none; padding: 0; gap: 4px; } p, .smmiconss a { margin-top: 0 !important; margin-bottom: 0 !important; color: var(--text-muted) !important; padding: 6px !important; font-size: 1.4rem !important; } .smmiconss a { display: inline-flex; align-items: center; justify-content: center; } .fa-facebook:hover,.fa-twitter:hover,.fa-youtube:hover,.fa-instagram:hover, .fa-tiktok:hover,.fa-telegram:hover,.fa-snapchat:hover,.fa-discord:hover, .fa-twitch:hover,.fa-globe:hover,.fa-linkedin:hover,.fa-spotify:hover, .fa-gitter:hover,.fa-behance:hover,.fa-pinterest:hover { transition: .25s; cursor: pointer; transform: scale(1.15); } .fa-facebook:hover { color: #1877f2 !important; } .fa-twitter:hover { color: #1da1f2 !important; } .fa-youtube:hover { color: #df2426 !important; } .fa-instagram:hover { color: #bd22a2 !important; } .fa-telegram:hover { color: #0088CC !important; } .fa-google:hover { color: #FF3E30 !important; } .fa-snapchat:hover { color: #FFFC00 !important; } .fa-discord:hover { color: #738ADB !important; } .fa-twitch:hover { color: #9147fe !important; } .fa-globe:hover { color: #FBBC05 !important; } .fa-linkedin:hover { color: #0E76A8 !important; } .fa-tiktok:hover { color: #EE1D52 !important; } .fa-spotify:hover { color: #1ED761 !important; } .filter_item { cursor: pointer; opacity: .7; transition: opacity .15s, transform .15s; } .filter_item:hover, .filter_item.active { opacity: 1; transform: scale(1.1); } .filter_item.active { color: var(--gold) !important; } .search-dropdown { position: relative; } .input-wrapper { position: relative; } /* ───────────────────────────────────────────────────────────── 26 Favourite Star Button ───────────────────────────────────────────────────────────── */ [data-favorite-service-id] { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; transition: background .15s; border: none; background: transparent; padding: 0; } [data-favorite-service-id]:hover { background: rgba(247,148,29,.15); } [data-favorite-service-id] [data-favorite-icon] { font-size: 15px; color: var(--text-muted); transition: color .15s, transform .2s; } .favorite-active [data-favorite-icon] { color: var(--gold) !important; } .service-fav-row { display: flex; align-items: stretch; gap: 8px; } .service-fav-row > select { flex: 1; min-width: 0; } #order-fav-btn { flex-shrink: 0; width: 44px; min-height: 46px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-well); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-muted); transition: all .2s ease; outline: none; padding: 0; } #order-fav-btn:hover { background: rgba(247,148,29,.15); border-color: rgba(247,148,29,.5); color: var(--gold); } #order-fav-btn.fav-active { color: var(--gold); border-color: rgba(247,148,29,.6); background: rgba(247,148,29,.1); } #order-fav-btn.fav-hidden { opacity: 0; pointer-events: none; } #fav-toast { position: fixed; bottom: 28px; right: 28px; z-index: 99999; background: var(--bg-card); color: var(--text); border: 1px solid rgba(247,148,29,.4); border-radius: 14px; padding: 12px 20px; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.5); transform: translateY(90px); opacity: 0; transition: all .3s cubic-bezier(.34,1.56,.64,1); pointer-events: none; max-width: 290px; } #fav-toast.fav-toast-show { transform: translateY(0); opacity: 1; } #fav-toast .fav-toast-icon { font-size: 20px; } /* ───────────────────────────────────────────────────────────── 27 Services Page ★ VIRTUAL TABLE + MOBILE CARDS ───────────────────────────────────────────────────────────── */ .app-content.services-page { padding-left: 0; } .filter { margin: 6px 0 !important; } .filter_wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .filter_fixer { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; } /* Platform filter buttons */ .btn_filter { font-family: "Montserrat", sans-serif; padding: 7px 14px; font-weight: 600; font-size: 12px; color: #fff; border-radius: 8px; cursor: pointer; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.07); display: inline-flex; align-items: center; gap: 5px; transition: .2s ease; white-space: nowrap; } .btn_filter:hover { opacity: .9; background: rgba(255,255,255,.12); } .btn_filter.active { outline: 2px solid #4ff9a1; outline-offset: 1px; box-shadow: 0 0 12px rgba(79,249,161,.2); } /* Speed / Price / Refill filter pills */ #speedFilter .btn_filter, #priceFilter .btn_filter, #refillFilter .btn_filter { color: var(--text-muted); border: 1px solid var(--border-color); background: var(--bg-card); font-size: 11px; padding: 6px 12px; } #speedFilter .btn_filter.active, #priceFilter .btn_filter.active, #refillFilter .btn_filter.active { color: #fff; background: linear-gradient(135deg, var(--brand), var(--accent)); border-color: transparent; outline: none; box-shadow: 0 4px 12px rgba(253,71,16,.3); } /* Platform colours */ .btn_all { background: var(--gold) !important; border-color: transparent !important; } .btn_fb { background: #3b5998 !important; border-color: transparent !important; } .btn_tw { background: #1da1f2 !important; border-color: transparent !important; } .btn_ig { background: linear-gradient(135deg,#5f1db9,#bb2c96 50%,#f0c33b) !important; border-color: transparent !important; } .btn_yt { background: #ff0000 !important; border-color: transparent !important; } .btn_tik { background: #000 !important; border-color: rgba(255,255,255,.25) !important; } .btn_telegram { background: linear-gradient(135deg,#0088cc,#00aaff) !important; border-color: transparent !important; } .btn_spotify { background: #1db954 !important; border-color: transparent !important; } .btn_discord { background: linear-gradient(135deg,#7289da,#5865f2) !important; border-color: transparent !important; } .btn_snapchat { background: linear-gradient(135deg,#fffc00,#ffcc00) !important; border-color: transparent !important; color: #000 !important; } .btn_twitch { background: linear-gradient(135deg,#6441a5,#9933cc) !important; border-color: transparent !important; } .btn_google { background: linear-gradient(135deg,#4285f4,#34a853 50%,#fbbc05) !important; border-color: transparent !important; } /* Services search */ .ser_search_box { flex: 1 1 280px; max-width: 520px; } .service-description__td { white-space: normal; word-break: break-word; line-height: 1.5; font-size: 12px; } .service-description__th { font-size: 12px; font-weight: 600; } /* ★ Virtual list container */ #srv-virtual-container { width: 100%; overflow-y: auto; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-card); position: relative; } #srv-virtual-inner { position: relative; width: 100%; } #srv-virtual-rows { position: absolute; top: 0; left: 0; width: 100%; } /* Virtual table header */ .srv-thead { display: flex; align-items: center; background: linear-gradient(90deg, rgba(253,71,16,.15), rgba(244,63,94,.1)); border-bottom: 1px solid var(--border-color); padding: 10px 14px; position: sticky; top: 0; z-index: 10; font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; } .srv-thead-cell { flex: 1; padding: 0 6px; } .srv-thead-cell.srv-id { flex: 0 0 60px; } .srv-thead-cell.srv-name { flex: 3; } .srv-thead-cell.srv-rate { flex: 0 0 80px; text-align: right; } .srv-thead-cell.srv-min { flex: 0 0 70px; text-align: right; } .srv-thead-cell.srv-max { flex: 0 0 80px; text-align: right; } .srv-thead-cell.srv-time { flex: 0 0 90px; } .srv-thead-cell.srv-buy { flex: 0 0 70px; text-align: center; } .srv-thead-cell.srv-fav { flex: 0 0 36px; } /* Category separator row */ .srv-cat-row { padding: 8px 14px; font-size: 13px; font-weight: 700; background: linear-gradient(90deg, var(--brand), var(--accent)); color: #fff; display: flex; align-items: center; gap: 8px; } /* Virtual service row */ .srv-row { display: flex; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border-color); font-size: 12px; transition: background .15s; min-height: 44px; } .srv-row:hover { background: rgba(244,63,94,.06); } .srv-row:last-child { border-bottom: none; } .srv-cell { flex: 1; padding: 0 6px; color: var(--text); word-break: break-word; line-height: 1.4; } .srv-cell.srv-id { flex: 0 0 60px; color: var(--text-muted); font-size: 11px; } .srv-cell.srv-name { flex: 3; font-weight: 500; } .srv-cell.srv-rate { flex: 0 0 80px; text-align: right; font-weight: 700; color: var(--gold); white-space: nowrap; } .srv-cell.srv-min { flex: 0 0 70px; text-align: right; color: var(--accent); } .srv-cell.srv-max { flex: 0 0 80px; text-align: right; color: #4ade80; } .srv-cell.srv-time { flex: 0 0 90px; color: var(--text-muted); font-size: 11px; } .srv-cell.srv-buy { flex: 0 0 70px; text-align: center; } .srv-cell.srv-fav { flex: 0 0 36px; } /* ★ MOBILE SERVICE CARDS (< 768px) */ .srv-mobile-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 10px; border-left: 3px solid var(--brand); transition: border-color .2s, box-shadow .2s; } .srv-mobile-card:hover { border-left-color: var(--accent); box-shadow: 0 4px 20px rgba(244,63,94,.15); } .srv-mc-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .srv-mc-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; line-height: 1.4; } .srv-mc-id { font-size: 10px; color: var(--text-muted); flex-shrink: 0; } .srv-mc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; } .srv-mc-stat { background: var(--bg-well); border-radius: 6px; padding: 6px 10px; } .srv-mc-stat .srv-mc-label { font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: .5px; margin-bottom: 2px; } .srv-mc-stat .srv-mc-value { font-size: 13px; font-weight: 700; } .srv-mc-stat .srv-mc-value.rate { color: var(--gold); } .srv-mc-stat .srv-mc-value.minv { color: var(--accent); } .srv-mc-stat .srv-mc-value.maxv { color: #4ade80; } .srv-mc-stat .srv-mc-value.time { color: var(--text-muted); font-size: 11px; } .srv-mc-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .srv-mc-desc { font-size: 11px; color: var(--text-muted); line-height: 1.5; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Loading spinner */ .srv-loading { text-align: center; padding: 40px; color: var(--text-muted); font-size: 14px; } .srv-loading i { font-size: 28px; color: var(--accent); display: block; margin-bottom: 12px; animation: spin .8s linear infinite; } .srv-empty { text-align: center; padding: 40px; color: var(--text-muted); font-size: 14px; } .srv-empty i { font-size: 36px; color: var(--border-color); display: block; margin-bottom: 12px; } .srv-count-badge { font-size: 12px; color: var(--text-muted); padding: 4px 0 8px; } .srv-count-badge strong { color: var(--accent); } /* Hidden source table */ #srv-data-source { display: none !important; visibility: hidden; position: absolute; pointer-events: none; } /* Category grid filter */ .cat_filter_wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: .4rem; } .cat_filter_wrap .filter_item { text-decoration: none; background: var(--bg-card); padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text); font-size: 13px; transition: .2s; display: block; border: 1px solid var(--border-color); } .cat_filter_wrap .filter_item:hover { background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; border-color: transparent; } .filter_card_body { padding: 12px 10px !important; } .drop_dwon_menu { position: relative; } .all_btn_cat_wrap { position: absolute; display: none; width: 150%; height: 350px; overflow: auto; background: var(--bg-card); z-index: 999; border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,.4); border: 1px solid var(--border-color); } .all_btn_cat_wrap button { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--border-color); text-align: left; padding: 8px 14px; color: var(--text); background: transparent; cursor: pointer; font-family: inherit; font-size: 13px; } .all_btn_cat_wrap button:hover { background: var(--bg-well); color: var(--brand); } .show_catgory { display: block !important; } .cat_btn_filter { background: linear-gradient(135deg, var(--gold), var(--brand)); color: #fff; border-radius: 10px; padding: 7px 24px !important; font-weight: 600; } .cat_btn_filter:hover { opacity: .9; color: #fff; } /* ───────────────────────────────────────────────────────────── 28 Add Funds / Payments ───────────────────────────────────────────────────────────── */ /* The .addFunds element is an EMPTY decorative
— don't render it as a box (that was the stray rounded box above "Method"). */ .addFunds { background: transparent; border: none; padding: 0 !important; } .addFunds:empty { display: none !important; } #mynewamount { display: none; min-height: 46px; border-radius: var(--radius-sm); padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text); width: 100%; font-family: inherit; } #mynewamountl { display: none; } #stripepay { display: none; } #applepaymethode { display: none; } #upipay { display: none; } pre.code { background: var(--bg-well); color: var(--accent); border-radius: var(--radius-sm); padding: 14px; border: 1px solid var(--border-color); } /* ───────────────────────────────────────────────────────────── 29 Dashboard Stats ───────────────────────────────────────────────────────────── */ .dashcards-row { display: flex; margin: 0 -15px; flex-wrap: wrap; } .dash-sss .sss-tab { position: relative; cursor: pointer; background: var(--bg-card); color: var(--text); padding: 18px 18px 10px; transition: var(--t); margin-bottom: 12px; border-radius: var(--radius); border: 1px solid var(--border-color); } .dash-sss .sss-tab.active { background: var(--bg-well); border-color: var(--accent); } .dash-sss .sss-tab .sss-htab { font-size: 15px; font-weight: 600; color: var(--text); } .dash-sss .sss-tab .sss-htab .right-p { color: var(--accent); font-size: 22px; height: 30px; line-height: 20px; } .dash-sss .sss-tab .ss-tab-content { display: none; padding: 10px 0 6px; color: var(--text-muted); font-size: 12px; line-height: 1.7; } /* ───────────────────────────────────────────────────────────── 30 News / Updates Timeline ───────────────────────────────────────────────────────────── */ .timeline { list-style: none; padding: 0; margin: 0; position: relative; } .timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 16px; width: 2px; background: linear-gradient(180deg, var(--brand), var(--accent), transparent); border-radius: 2px; } .timeline-item { position: relative; padding-left: 48px; margin-bottom: 28px; } .timeline-info { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; font-weight: 600; } .timeline-marker { position: absolute; left: 10px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--accent)); border: 2px solid var(--bg-card); box-shadow: 0 0 0 3px rgba(244,63,94,.2); } .timeline-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .timeline-content p { font-size: 13px; color: var(--text-muted); line-height: 1.7; } .dh-noti { max-height: 480px; overflow-y: auto; padding-right: 4px; } /* ───────────────────────────────────────────────────────────── 31 Tickets ───────────────────────────────────────────────────────────── */ .ticket-status { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; } .ticket-status.open { background: rgba(74,222,128,.15); color: #4ade80; border: 1px solid #4ade80; } .ticket-status.closed { background: rgba(244,63,94,.15); color: var(--accent); border: 1px solid var(--accent); } .ticket-status.pending { background: rgba(251,191,36,.15); color: #fbbf24; border: 1px solid #fbbf24; } /* ───────────────────────────────────────────────────────────── 32 Affiliates ───────────────────────────────────────────────────────────── */ .ref-item { background: var(--bg-well); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; } .ref-item .ref-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--brand), var(--accent)); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; color: #fff; } .referral-link-box { display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 10px 14px; } #referralText { flex: 1; color: var(--text-muted); font-size: 13px; word-break: break-all; } /* ───────────────────────────────────────────────────────────── 33 Footer ───────────────────────────────────────────────────────────── */ .site-footer { background: var(--bg-sidebar); border-top: 1px solid var(--border-color); padding: 28px 0; text-align: center; } .site-footer p { color: var(--text-muted); font-size: 12px; margin: 0; } .site-footer a { color: var(--text-muted); transition: color var(--t); } .site-footer a:hover { color: var(--brand); } /* Blog */ .blog_wraper { display: grid; grid-template-columns: repeat(auto-fit, minmax(47%,1fr)); gap: 1.5rem; padding: 2.5rem 0; } .blog_details { padding: .4rem .8rem; background: rgba(253,71,16,.18); border-radius: 30px; display: inline-block; color: var(--brand); margin-bottom: 16px; font-size: 12px; font-weight: 600; } .blog_txt { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* Terms */ .terms_item h2::before { content: "➤"; margin-right: 10px; color: var(--accent); } .terms_item h2 { font-size: 22px; font-weight: 800; color: var(--accent); } /* ───────────────────────────────────────────────────────────── 34 Utility ───────────────────────────────────────────────────────────── */ .text-danger { color: var(--accent) !important; } .text-success { color: #4ade80 !important; } .text-muted { color: var(--text-muted) !important; } .text-warning { color: var(--gold) !important; } .bg-brand { background: linear-gradient(135deg, var(--brand), var(--accent)); } /* ───────────────────────────────────────────────────────────── 35 Animations & Keyframes ───────────────────────────────────────────────────────────── */ @keyframes floatOrb { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-30px) scale(1.05); } } @keyframes floatPhone { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes favPop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 70% { transform: scale(0.88); } 100% { transform: scale(1); } } #order-fav-btn.popping i { animation: favPop .3s ease forwards; } /* Skeleton loader */ .skeleton { background: linear-gradient(90deg, var(--bg-well) 25%, var(--bg-card) 50%, var(--bg-well) 75%); background-size: 400px 100%; animation: shimmer 1.4s infinite; border-radius: 4px; } /* ───────────────────────────────────────────────────────────── 36 LIGHT THEME (body.dark = light mode — original convention) ───────────────────────────────────────────────────────────── */ body.dark { --bg: #f0effe; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-well: #ebe8fe; --bg-input: #f5f3ff; --text: #1a0540; --text-muted: #7c6a9a; --border-color: #ddd8f8; --glass: rgba(255,255,255,0.85); --glass-border: rgba(253,71,16,.15); } body.dark { background: var(--bg); color: var(--text); } body.dark .app-sidebar::before { background: radial-gradient(circle, rgba(244,63,94,.06) 0%, transparent 70%); } body.dark .d-card::before { background: linear-gradient(90deg, transparent, rgba(253,71,16,.15), transparent); } body.dark .main-top { background: radial-gradient(ellipse 80% 60% at 20% 40%, rgba(244,63,94,.08) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 20%, rgba(253,71,16,.06) 0%, transparent 55%), var(--bg); } body.dark .main-top::before { background: radial-gradient(circle, rgba(244,63,94,.1) 0%, transparent 65%); } body.dark .main-top::after { background: radial-gradient(circle, rgba(253,71,16,.08) 0%, transparent 65%); } body.dark .hb-box { background: rgba(255,255,255,.7); border-color: rgba(253,71,16,.12); } body.dark .hb-box:hover { box-shadow: 0 24px 60px rgba(253,71,16,.15); } body.dark .hb-box-text h2 { color: var(--text); } body.dark .hb-box-text p { color: var(--text-muted); } body.dark .login-card { background: rgba(255,255,255,.85); } body.dark .head-text h1 { color: var(--text); } body.dark .head-text p { color: var(--text-muted); } body.dark .hstat-title { color: var(--text-muted); } body.dark #currencies-list li a { color: var(--text); background: var(--bg-card); border-bottom-color: var(--border-color); } body.dark .alert-success { background: #d1fae5; color: #065f46; } body.dark .alert-danger { background: #fee2e2; color: #991b1b; } body.dark .alert-info { background: #dbeafe; color: #1e40af; } body.dark .modal-body { color: var(--text); } body.dark .modal-body p { color: var(--text); } body.dark .all_btn_cat_wrap { background: var(--bg-card); } body.dark .srv-mobile-card { background: var(--bg-card); } body.dark .timeline::before { background: linear-gradient(180deg, var(--brand), var(--accent), transparent); } body.dark .status_card, body.dark .status_head { background: var(--bg-card) !important; } body.dark .text_big, body.dark .text_info { color: var(--text) !important; } body.dark .status_body ul li { color: var(--text) !important; } /* ───────────────────────────────────────────────────────────── 37 Responsive Overrides ───────────────────────────────────────────────────────────── */ /* Sidebar collapse on medium screens */ @media (max-width: 1100px) { .app-container.sidebar-action .app-sidebar { transform: translateX(0); } .app-container.sidebar-action .app-header { left: var(--sidebar-w); } .app-container.sidebar-action .app-content { padding-left: var(--sidebar-w); } .app-sidebar { transform: translateX(-100%); } .app-header { left: 0 !important; } .app-content { padding-left: 0; } .close-sidebar-btn { display: block; } } @media (max-width: 992px) { .head-text h1 { font-size: 32px; } .main-top { padding: 80px 0; } .home-menu-btn { display: block; } .head-menu { display: none; } .head-menu.active { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-sidebar); z-index: 9999; padding: 80px 24px 24px; overflow-y: auto; } .head-menu.active ul { display: flex; flex-direction: column; gap: 4px; } .head-menu.active ul li { display: block; padding: 0; border-bottom: 1px solid var(--border-color); } .head-menu.active ul li a { height: auto; line-height: 1; padding: 14px 0; font-size: 16px; } .main-stats { display: none; } .main-stats-mob { display: block; padding: 30px 0 0; } .app-navbar { display: flex; } .mob-nav { display: flex; } .app-content { padding-bottom: 80px; } } @media (max-width: 768px) { .head-text h1 { font-size: 26px; } .section_title_wrap .sec_title { font-size: 24px; } .best_content h2 { font-size: 26px; } .hb-box { padding: 22px 16px; } .hb-box-icon { width: 70px; height: 70px; line-height: 70px; margin-bottom: 18px; } .hb-box-icon i { font-size: 26px; line-height: 70px; } /* Services page: hide virtual table header on mobile */ .srv-thead { display: none; } #srv-virtual-container { border: none; background: transparent; } .srv-row { display: none; } /* desktop rows hidden, mobile cards shown */ #srv-mobile-cards { display: block; } /* Filter layout */ .filter_fixer { flex-direction: column; align-items: stretch; gap: 10px; margin: 6px 0 !important; } .ser_search_box { width: 100% !important; max-width: none !important; display: flex; } .ser_search_box .app-input { flex: 1 1 auto; width: 100% !important; } .blog_wraper { grid-template-columns: 1fr; } .login-card .lc-body { padding: 22px 20px; } } @media (min-width: 769px) { #srv-mobile-cards { display: none !important; } .srv-row { display: flex; } } /* ═══════════════════════════════════════════════════════════ PATCH v2.1 — fixes from live review ═══════════════════════════════════════════════════════════ */ /* ── 1. HEADER: prevent overflow, tighten info row ── */ :root { --header-h: 80px; } .app-header .d-flex.justify-content-between { flex-wrap: nowrap; overflow: hidden; gap: 6px; align-items: center; } .app-header .user_infos { font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; margin: 0; } .app-header .user_infos strong { color: var(--gold); font-size: 11px; } .app-header [data-toggle="modal"] { overflow: hidden; max-width: 180px; flex-shrink: 1; } /* ── 2. HB-BOX: hide bottom image, fix empty space ── */ .hb-box-img { display: none !important; } .hb-box { min-height: auto !important; height: auto !important; } .hb-box-text { flex: 1; } /* ── 3. PLATFORM CARDS (Facebook/Instagram etc): compact ── */ .futures-version-2 .hb-box { padding: 28px 18px !important; min-height: 200px !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .futures-version-2 .hb-box-text h1, .futures-version-2 .hb-box-text h2 { font-size: 16px !important; font-weight: 700; margin-bottom: 10px; color: var(--text); } .futures-version-2 .hb-box-text p { font-size: 13px !important; color: var(--text-muted) !important; line-height: 1.6; margin: 0; } /* ── 4. HOW IT WORKS cards: fix height ── */ .home-bottom .hb-box { min-height: auto !important; padding: 30px 22px !important; } .home-bottom .hb-box-icon { width: 90px !important; height: 90px !important; line-height: 90px !important; margin-bottom: 20px !important; } .home-bottom .hb-box-icon i { line-height: 90px !important; font-size: 32px !important; } .home-bottom .wpo-features-text h2 { font-size: 16px !important; margin-bottom: 10px; } .home-bottom .wpo-features-text p { font-size: 13px !important; margin: 0; } /* ── 5. WHY CHOOSE section: detail box fix ── */ .detail-box { margin-bottom: 20px; } .dt-icon { margin-top: 0 !important; } /* ── 6. HOME-BOX-2 phone section ── */ .home-phone img { max-width: 100%; height: auto; } .home-phone .iphone { position: relative; margin-top: -20px; } /* ── 7. SIGN-IN page: keep it clean ── */ .main-top .login-card { margin-top: 0; } /* ── 8. Mobile header: logo sizing ── */ .col-3.app-logo img { height: 32px !important; width: auto; } /* ── 9. Sidebar active item: ensure visibility ── */ .sidebar-menu > li.active > a { background: linear-gradient(90deg, rgba(253,71,16,.3), rgba(244,63,94,.18)) !important; border-left-color: var(--brand) !important; color: #fff !important; } /* ═══════════════════════════════════════════════════════════ PATCH v2.2 — header buttons, stats, images, footer ═══════════════════════════════════════════════════════════ */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PUBLIC HEADER — language / currency / darkmode alignment ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .header .col > .d-flex { align-items: center !important; gap: 6px !important; flex-wrap: nowrap; } /* list-items used as inline controls */ .header .flag_lang, .header .currency_converter { list-style: none !important; display: inline-flex !important; align-items: center; } /* darkmode button in public header */ .header .darkmode { display: inline-flex; align-items: center; vertical-align: middle; } /* head-menu sits in same row as controls */ .header .head-menu { display: flex; align-items: center; } .header .header-menu ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .header .header-menu ul li { display: inline-flex; align-items: center; padding: 0 14px; } .header .header-menu ul li a { color: rgba(255,255,255,.85); font-size: 14px; font-weight: 500; height: 90px; line-height: 90px; display: block; white-space: nowrap; transition: color .2s; } .header .header-menu ul li a:hover { color: #fff; } /* Sign-up / Register button in nav */ .header .header-menu ul li a.menu-btn, .header .header-menu ul li a[href*="signup"], .header .header-menu ul li a[href*="register"] { background: linear-gradient(135deg, var(--brand), var(--accent)) !important; color: #fff !important; padding: 8px 20px !important; border-radius: 8px !important; height: auto !important; line-height: 1 !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; margin-left: 8px; box-shadow: 0 4px 16px rgba(253,71,16,.35); } .header .header-menu ul li a[href*="signup"]::after, .header .header-menu ul li a[href*="register"]::after { display: none; } /* Mobile hamburger */ .home-menu-btn { background: transparent; border: none; cursor: pointer; color: var(--text); display: none; padding: 0; margin-left: 8px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ STATS — Total Orders & Active Services ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .main-stats, .main-stats-mob { padding: 60px 0 0; } .main-stats .row, .main-stats-mob .row { align-items: stretch; } .home-stat { background: rgba(26,5,64,.5); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 14px; padding: 22px 24px; display: flex; align-items: center; gap: 18px; height: 100%; transition: transform .3s ease, box-shadow .3s; } .home-stat:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(253,71,16,.2); } .home-stat.br { border-right: none !important; } /* remove old border-right, card does the job */ .home-stat i { font-size: 28px !important; background: linear-gradient(135deg, var(--brand), var(--accent)) !important; width: 56px !important; height: 56px !important; text-align: center !important; line-height: 56px !important; color: #fff !important; border-radius: 12px !important; box-shadow: 0 6px 20px rgba(253,71,16,.4) !important; flex-shrink: 0; } .hstat-text { font-size: 28px !important; font-weight: 800 !important; color: var(--text) !important; line-height: 1 !important; margin-bottom: 4px; } .hstat-title { font-size: 13px !important; font-weight: 500 !important; color: var(--text-muted) !important; line-height: 1.3; } .full-width-mobile { width: 100%; } /* show mobile stats on mobile, desktop on desktop */ .main-stats { display: block; } .main-stats-mob { display: none; } @media(max-width:992px) { .main-stats { display: none; } .main-stats-mob { display: block; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ "MOST ADVANCED FEATURES" — phone image section ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .home-box-2 { padding: 60px 0; } .home-box-2 .row { align-items: center; } .home-phone { position: relative; text-align: center; padding: 20px 0; } .home-phone img { max-width: 100%; height: auto; display: block; margin: 0 auto; } /* First image: background/scene */ .home-phone img:first-child { width: 100%; max-width: 480px; border-radius: 16px; } /* Second image: floating phone mockup */ .home-phone img.iphone { position: absolute; bottom: -20px; right: 0; width: 45% !important; max-width: 200px; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: floatPhone 5s ease-in-out infinite; } @media(max-width:768px) { .home-phone img.iphone { position: relative; bottom: auto; right: auto; width: 60% !important; margin-top: -40px; } } /* Detail boxes next to image */ .detail-box { background: rgba(26,5,64,.4); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px !important; align-items: flex-start; transition: border-color .2s, background .2s; } .detail-box:hover { border-color: rgba(244,63,94,.35); background: rgba(244,63,94,.05); } .dt-icon { width: 44px !important; height: 44px !important; border-radius: 10px !important; background: linear-gradient(135deg, rgba(253,71,16,.2), rgba(244,63,94,.2)) !important; border: 1px solid rgba(244,63,94,.35) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin-top: 0 !important; } .dt-icon i { font-size: 17px !important; color: var(--accent) !important; } .dt-title { font-size: 15px !important; font-weight: 700; color: var(--text); margin-bottom: 4px; } .dt-text { font-size: 13px !important; color: var(--text-muted); line-height: 1.6; margin: 0; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BEST SECTION — GIF image after features ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ #best_sec { padding: 60px 0; } #best_sec .row { align-items: center; } .best_img { text-align: center; padding: 20px; } .best_img img { max-width: 100%; height: auto; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.4); } .best_content { padding: 20px 0; } .best_content h3 { font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; } .best_content h2 { font-size: 34px; font-weight: 800; line-height: 1.2; margin-bottom: 16px; color: var(--text); } .best_content p { font-size: 14px !important; color: var(--text-muted); line-height: 1.8; margin-bottom: 12px; } .best_content .btn_wrapers { margin-top: 24px; } .best_content .same-color { color: var(--text); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FOOTER — ft-content-bot ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ft-content-bot { border-top: 1px solid var(--border-color); padding: 40px 0 24px; } .ft-content-bot-text { color: var(--text-muted); } .ft-content-bot-text p { font-size: 13px; margin-bottom: 6px; color: var(--text-muted); } .ft-content-bot-text strong { color: var(--text); } .ft-content-bot-text a { color: var(--text-muted); transition: color .2s; } .ft-content-bot-text a:hover { color: var(--brand); } /* Footer top row: logo left, links right */ .ft-content-bot .row { align-items: center; margin-bottom: 20px; } .fct-name { display: flex; align-items: center; } .fct-name img { height: 38px !important; width: auto; } .footer-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .footer-links ul li a { color: var(--text-muted); font-size: 13px; font-weight: 500; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border-color); transition: .2s; display: block; } .footer-links ul li a:hover { border-color: var(--brand); color: var(--brand); background: rgba(253,71,16,.08); } /* Google Partner badge */ .ft-content-bot-text img[alt="Google Partner"] { height: 50px !important; width: auto !important; margin-top: 10px; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HOME-BOX-3 — CTA banner at bottom of homepage ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .home-box-3 .footer-top { background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; padding: 48px 40px !important; border-radius: 18px !important; position: relative; overflow: hidden; } .home-box-3 .footer-top::before { content: ""; position: absolute; top: -60px; right: -60px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(253,71,16,.2), transparent 65%); border-radius: 50%; pointer-events: none; } .home-box-3 .footer-top::after { content: ""; position: absolute; bottom: -40px; left: -40px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(244,63,94,.15), transparent 65%); border-radius: 50%; pointer-events: none; } .home-box-3 .footer-top h1 { font-size: 28px !important; font-weight: 800 !important; color: var(--brand) !important; position: relative; z-index: 1; margin-bottom: 16px; } .home-box-3 .footer-top p { position: relative; z-index: 1; color: var(--text-muted); } .home-box-3 .footer-top .btn { position: relative; z-index: 1; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LIGHT MODE patches ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ body.dark .home-stat { background: rgba(255,255,255,.7); border-color: rgba(253,71,16,.12); } body.dark .detail-box { background: rgba(255,255,255,.6); border-color: #e8e4fc; } body.dark .detail-box:hover { background: rgba(253,71,16,.05); } body.dark .home-box-3 .footer-top { background: #fff !important; } body.dark .ft-content-bot { border-color: #e8e4fc; } body.dark .footer-links ul li a { border-color: #e8e4fc; color: #7c6a9a; } body.dark .header .header-menu ul li a { color: rgba(26,5,64,.8); } body.dark .header .header-menu ul li a:hover { color: var(--brand); } /* ═══════════════════════════════════════════════════════════ PATCH v2.3 — header clip, mobile icons, phone image ═══════════════════════════════════════════════════════════ */ /* ── 1. DASHBOARD HEADER — works with ORIGINAL layout markup ── IMPORTANT: original CSS sets .col-100{max-height:0} and relies on overflow being VISIBLE. We must NOT clip the header, or the account info collapses to nothing. Undo the max-height:0 instead. */ .app-header { height: var(--header-h); } /* no overflow:hidden */ .app-container .app-header .col-100 { max-height: none !important; } /* undo the collapse */ .app-header .row-100 { height: var(--header-h); align-items: center; flex-wrap: nowrap; } /* Desktop info strip: single line, comfortable */ .app-header .col.col-100 .d-flex { flex-wrap: nowrap; align-items: center; gap: 10px; } .app-header .user_infos { font-size: 11px; white-space: nowrap; margin: 0; line-height: 1.3; color: var(--text-muted); } .app-header .user_infos strong { color: var(--gold); font-size: 11px; } /* Right controls never shrink */ .app-header .col-auto.align-self-center { flex-shrink: 0; } /* ── 2. PUBLIC HEADER: fix stacked icon list on mobile ── */ /* The ul wrapper with darkmode + currency + lang */ .header .col-auto > .row .col-auto ul, .header ul[style*="inline-block"] { display: flex !important; align-items: center !important; gap: 6px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; flex-wrap: wrap !important; } .header .col-auto > .row .col-auto ul li, .header ul[style*="inline-block"] li { display: inline-flex !important; align-items: center !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } /* Remove bullet dots from any remaining list items in header */ .header li { list-style: none !important; } /* Hamburger: only show on mobile */ .home-menu-btn { display: none !important; background: transparent; border: none; color: var(--text); cursor: pointer; padding: 4px; font-size: 22px; margin-left: 8px; } @media(max-width: 992px) { .home-menu-btn { display: inline-flex !important; align-items: center; } } /* ── 3. PHONE IMAGE: constrain the large background image ── */ .home-box-2 .col-lg-6:first-child { overflow: hidden; } .home-phone { position: relative; max-height: 420px !important; overflow: hidden !important; border-radius: 18px; } .home-phone img:first-child { width: 100% !important; max-width: 100% !important; max-height: 420px !important; object-fit: cover !important; object-position: center top !important; border-radius: 18px; display: block; } .home-phone img.iphone.floating { position: absolute !important; bottom: 0 !important; right: 10% !important; width: 38% !important; max-width: 160px !important; max-height: 280px !important; object-fit: contain !important; border-radius: 10px; box-shadow: 0 16px 48px rgba(0,0,0,.5); } @media(max-width: 991px) { .home-phone { max-height: 320px !important; margin-bottom: 30px; } .home-phone img:first-child { max-height: 320px !important; } .home-phone img.iphone.floating { width: 32% !important; max-height: 200px !important; right: 5% !important; } } /* ── 4. WHY CHOOSE — detail boxes: ensure they show ── */ .home-box-2 .col-lg-6:last-child { padding-left: 30px; } @media(max-width: 991px) { .home-box-2 .col-lg-6:last-child { padding-left: 15px; } } /* ── 5. Mobile public header: tighter layout ── */ @media(max-width: 992px) { .header { margin-top: 0 !important; } .header .row[style*="99px"], .header .row[style*="90px"] { height: 70px !important; } .header .header-menu { display: none; } .header .header-menu.active { display: block !important; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-sidebar); z-index: 9999; padding: 80px 24px 24px; overflow-y: auto; } .header .header-menu.active ul { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; } .header .header-menu.active ul li { width: 100%; padding: 0 !important; } .header .header-menu.active ul li a { height: auto !important; line-height: 1 !important; padding: 16px 0 !important; display: block; border-bottom: 1px solid var(--border-color); font-size: 16px !important; } } /* ── 6. Section title fix: small_title vs sec_title ── */ .section_title_wrap .small_title { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--gold) !important; display: block; margin-bottom: 8px; } .section_title_wrap h2.small_title { font-size: 12px !important; } .section_title_wrap .sec_title { font-size: 30px !important; font-weight: 800 !important; color: var(--text) !important; margin-bottom: 12px; line-height: 1.2; } .section_title_wrap h5.sec_title { font-size: 30px !important; font-weight: 800 !important; } /* ── 7. Light mode fixes ── */ body.dark .header li { list-style: none !important; } body.dark .home-phone img:first-child { border-radius: 18px; } /* ═══════════════════════════════════════════════════════════ PATCH v2.4 — header final fix, mobile nav, SEO layout ═══════════════════════════════════════════════════════════ */ /* HEADER: use p tags now (changed from h4) */ .app-header p.user_infos { font-size: 11px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0 !important; line-height: 1.3 !important; color: var(--text-muted); } .app-header p.user_infos strong { color: var(--gold); font-size: 11px; } /* Desktop header col: keep height, but allow dropdowns to escape (overflow:hidden here was clipping the currency/language menus) */ .app-header .col.d-none.d-md-flex { height: var(--header-h) !important; overflow: visible !important; max-width: calc(100% - 60px) !important; } /* Public header: mobile hamburger only on mobile */ @media(max-width:992px) { .head-menu { display: none !important; } .head-menu.active { display: block !important; position: fixed; top:0; left:0; right:0; bottom:0; background: var(--bg-sidebar); z-index:9999; padding: 80px 24px 24px; overflow-y: auto; } .head-menu.active ul { flex-direction: column !important; align-items: flex-start !important; } .head-menu.active ul li { width:100%; padding: 0 !important; } .head-menu.active ul li a { height: auto !important; line-height:1 !important; padding: 14px 0 !important; border-bottom: 1px solid var(--border-color); font-size: 16px !important; } .home-menu-btn { display: inline-block !important; } } @media(min-width:993px) { .head-menu { display: block !important; } .home-menu-btn { display: none !important; } } /* Mobile bottom nav: HIDE on public pages (non-auth) where not needed */ body:not(.dashboard-body) .mob-nav { display: none; } /* Show only when JS adds .show class or on dashboard */ .dashboard-body .mob-nav { display: flex; } /* Accessibility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Image dimensions fix (CLS prevention) */ .home-phone img:first-child { width: 100%; height: auto; } .home-phone img.iphone.floating { width: 38%; height: auto; } .site-footer img, .ft-content-bot img { height: auto; } /* ═══════════════════════════════════════════════════════════ PATCH v2.5 — dashboard completeness (no gaps) ═══════════════════════════════════════════════════════════ */ /* Dashboard head wrapper + responsive helpers (from original) */ .dashboard-head { position: relative; } .dashboard-head .dhead-content .row-s2 > div { font-size: 12px; color: var(--text-muted); } .dashboard-head .dhead-content .col-title { border-right: none; } .dashboard-head .dhead-content .col-title h1, .dashboard-head .dhead-content .col-title h2 { color: var(--text); } @media (max-width: 991px) { .dashboard-head .dhead-content .col-title img { display: none; } .dashboard-head .dhead-content .col-lg.col-12 { display: none; } } /* dc-home cards — themed gradient (replaces old flat blue) */ .dc-home, .dc-home-1 { background: linear-gradient(135deg, #6d28d9, #4c1d95); color: #fff; border-radius: var(--radius); position: relative; overflow: hidden; } .dc-home-1 { background: linear-gradient(135deg, var(--brand), var(--accent)); } .dc-home::before, .dc-home-1::before { content: ""; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 65%); pointer-events: none; } .dc-home .dch-title, .dc-home-1 .dch-title { color: #fff; font-weight: 700; } .dc-home .dch-text, .dc-home-1 .dch-text { color: rgba(255,255,255,.8); } /* Dashboard stat cards row spacing safety */ .dashcards-row > [class*="col-"] { margin-bottom: 15px; } /* Ensure dashboard d-card icons use theme gradient (already in 07, reinforced) */ .dashboard-body .d-card-head .dch-body .icon { background: linear-gradient(135deg, var(--brand), var(--accent)); box-shadow: 0 4px 16px rgba(253,71,16,.3); } /* Light-mode dashboard */ body.dark .dashboard-head .dhead-content .col-title h1, body.dark .dashboard-head .dhead-content .col-title h2 { color: var(--text); } body.dark .dc-home { background: linear-gradient(135deg, #7c3aed, #6d28d9); } /* ═══════════════════════════════════════════════════════════ PATCH v2.6 — header: hide wrong block per screen size (works with the ORIGINAL layout markup) Original desktop info col = .col.col-100.d-md-inline-block Original mobile block = .col.d-inline-block.d-md-none ═══════════════════════════════════════════════════════════ */ /* DESKTOP (>=768px): show desktop info, HIDE mobile block */ @media (min-width: 768px) { .app-header .col.d-md-none, .app-header .col.d-inline-block.d-md-none { display: none !important; } .app-header .col.col-100, .app-header .col.d-md-inline-block { display: inline-block !important; } /* Force the info strip onto a single horizontal row, full width */ .app-header .col-100 > .d-flex { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; width: 100%; gap: 14px; } .app-header .col-100 .user_infos { font-size: 11px !important; white-space: nowrap !important; margin: 0 !important; line-height: 1.25 !important; } } /* MOBILE (<768px): show mobile block, HIDE desktop info col */ @media (max-width: 767.98px) { .app-header .col.col-100.d-md-inline-block, .app-header .col.d-none.d-md-inline-block { display: none !important; } .app-header .col.d-inline-block.d-md-none { display: inline-block !important; } } /* Hide the duplicate logo that appears in the header on desktop (the small mobile logo inside the header, NOT the sidebar logo) */ @media (min-width: 768px) { .app-header .app-logo, .app-header .col-3.app-logo { display: none !important; } } /* PATCH v2.7 removed — mobile status now uses neworder's existing #showOnlyMob block (styled in patch v2.8), no duplicate bar. */ /* ═══════════════════════════════════════════════════════════ PATCH v2.8 — New Order mobile status (#showOnlyMob) UX: turn 4 full-width stacked bars into a compact 2×2 grid. Cuts ~280px of scroll down to ~110px. Balance highlighted. Pure CSS — does NOT touch the multilingual neworder content. ═══════════════════════════════════════════════════════════ */ /* Shown only on mobile (original behaviour kept) */ #showOnlyMob { display: none; } @media (max-width: 767.98px) { #showOnlyMob { display: block; margin-bottom: 14px; } /* The 4 boxes live inside ONE column — make THAT column the 2-col grid */ #showOnlyMob > .row { display: block !important; margin: 0 !important; } #showOnlyMob > .row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; margin: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } /* Compact stat card (was a big full-width orange bar) */ #showOnlyMob .def_box_sta { margin: 0 !important; padding: 11px 12px !important; border-radius: 12px !important; font-size: 12px !important; text-align: left !important; background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; color: var(--text) !important; min-height: 58px; display: flex; flex-direction: column; justify-content: center; line-height: 1.35; } #showOnlyMob .def_box_sta .user_infos, #showOnlyMob .def_box_sta h4 { margin: 0 !important; font-size: 11px !important; color: var(--text-muted) !important; font-weight: 600 !important; line-height: 1.3 !important; } #showOnlyMob .def_box_sta strong { color: var(--text) !important; font-size: 13px !important; font-weight: 800 !important; display: block; margin-top: 2px; } #showOnlyMob .def_box_sta br { display: none; } /* Highlight the Balance box (3rd of the 4) — most important for ordering */ #showOnlyMob .def_box_sta:nth-child(3) { background: linear-gradient(135deg, var(--brand), var(--accent)) !important; border: none !important; } #showOnlyMob .def_box_sta:nth-child(3), #showOnlyMob .def_box_sta:nth-child(3) strong { color: #fff !important; } #showOnlyMob .def_box_sta:nth-child(3) .user_infos { color: rgba(255,255,255,.85) !important; } /* The first box is a modal trigger — show a subtle tap hint */ #showOnlyMob .def_box_sta[data-toggle="modal"] { cursor: pointer; position: relative; } #showOnlyMob .def_box_sta[data-toggle="modal"]::after { content: "\f05a"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 8px; right: 10px; font-size: 11px; color: var(--accent); opacity: .7; } } /* ═══════════════════════════════════════════════════════════ PATCH v2.9 — New Order "All category / READ before you order" tabs (.ticketTabs nav-pills) — fix circle+text alignment ═══════════════════════════════════════════════════════════ */ .neworder .ticketTabs.nav-pills, .ticketTabs.nav-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; } .ticketTabs.nav-pills .nav-item { display: flex; } .ticketTabs.nav-pills .nav-link { display: flex !important; align-items: center; gap: 10px; padding: 8px 14px 8px 8px !important; background: var(--bg-well) !important; border: 1px solid var(--border-color); border-radius: 14px !important; color: var(--text) !important; font-size: 13px; font-weight: 600; width: 100%; text-align: left; transition: border-color .2s, background .2s; } .ticketTabs.nav-pills .nav-link:hover, .ticketTabs.nav-pills .nav-link.active { border-color: var(--accent); background: var(--bg-card) !important; } /* The circle icon */ .ticketTabs.nav-pills .nav-link i, .ticketTabs.nav-pills .nav-link.active i { width: 40px; height: 40px; min-width: 40px; margin: 0 !important; background: linear-gradient(135deg, var(--brand), var(--accent)); display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 16px; color: #fff; flex-shrink: 0; } /* The text label */ .ticketTabs.nav-pills .nav-link span { margin: 0 !important; line-height: 1.25; } @media (max-width: 767.98px) { .ticketTabs.nav-pills .nav-link { font-size: 12px; padding: 7px 12px 7px 7px !important; } .ticketTabs.nav-pills .nav-link i { width: 36px; height: 36px; min-width: 36px; font-size: 14px; } } /* ═══════════════════════════════════════════════════════════ PATCH v3.0 — Cross-page completeness (all templates) Fixes invisible black text + themes shared helpers so EVERY page (tickets, affiliates, api, refunds, subs, child panel, drip-feed, orders, confirm-email, updates, signin/up) looks right. ═══════════════════════════════════════════════════════════ */ /* Shared dark "well" variant */ .well-float { background: var(--bg-well) !important; color: var(--text); border-radius: var(--radius-sm); border: 1px solid var(--border-color); } /* ⚠ Original set these to black (#000) → invisible on dark. Fix to theme text. */ .breadcrumbs { color: var(--text-muted) !important; } .breadcrumbs a { color: var(--text) !important; } .breadcrumbs a:hover { color: var(--brand) !important; } .create-ticket-wrap .control-label { color: var(--text) !important; text-align: center; display: block; margin-bottom: 20px; font-size: 18px; } /* Legacy Bootstrap-3 float helper */ .pull-right { float: right; } .pull-left { float: left; } /* Confirm-email page */ .confirm-email__description, .confirm-email__description .text-center { color: var(--text) !important; } .confirm-email__action { margin-top: 20px; } .error-summary { color: var(--accent); } /* API page helpers */ .center-big-content-block { text-align: center; padding: 20px 0; color: var(--text); } .width-40 { width: 40px; } /* Tickets: option cards (opt-icon / opt-text / message-title / inner-wrap) */ .inner-wrap { color: var(--text); } .message-title { color: var(--text); font-weight: 700; font-size: 15px; } .opt-icon { color: var(--accent); } .opt-text { color: var(--text); } /* Sign-in / Sign-up helpers */ .head-links { display: none; } .login-form { width: 100%; } /* Google sign-in button container — keep it visible/centered */ .g_id_signin { margin: 10px 0; display: flex; justify-content: center; } .terms-accept-checkbox, .acceptcheck { color: var(--text); } /* Generic safety: any leftover hard-coded black text inside cards → readable. (Scoped to our themed containers so we never touch 3rd-party widgets.) */ .d-card [style*="color: #000"], .d-card [style*="color:#000"], .well [style*="color: #000"], .well [style*="color:#000"] { color: var(--text) !important; } /* Subscriptions / orders rounded pills */ .rounded-pill { border-radius: 50rem !important; } /* Light-mode: these are fine since vars flip, but ensure well-float */ body.dark .well-float { background: var(--bg-well) !important; border-color: var(--border-color); } /* "Add Funds" CTA injected after the Balance box in the mobile status grid */ .wz-addfunds-cta { grid-column: 1 / -1; /* full width across the 2-col grid */ display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; padding: 11px 14px; border-radius: 12px; background: #fff; color: #c73400 !important; font-weight: 800; font-size: 13px; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.2); transition: transform .15s, box-shadow .15s; } .wz-addfunds-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.3); color: #c73400 !important; } .wz-addfunds-cta i { font-size: 14px; } body.dark .wz-addfunds-cta { background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff !important; } /* PATCH v3.2 removed — it broke the category/service dropdown search. The platform's select component handles its own search; we leave it alone. */ /* ═══════════════════════════════════════════════════════════ PATCH v3.3 — Header currency & language dropdowns Fix: opened BEHIND content (z-index) + black/invisible text. NOTE: do NOT override position/left/right — Bootstrap's Popper sets those inline; overriding them puts the menu in the wrong place. ═══════════════════════════════════════════════════════════ */ /* Float above content + theme bg. Let Popper handle positioning. */ .app-header .dropdown-menu, .header .dropdown-menu, .currency_converter .dropdown-menu, .flag_lang .dropdown-menu { z-index: 3000 !important; width: auto !important; /* override the global width:100% */ min-width: 150px; max-height: 60vh; overflow-y: auto; background: var(--bg-card) !important; border: 1px solid var(--border-color) !important; border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,.5); padding: 4px 0; } /* Dropdown items — theme text (was black/invisible) */ .app-header .dropdown-menu li a, .app-header .dropdown-menu .dropdown-item, .header .dropdown-menu li a, .header .dropdown-menu .dropdown-item, .flag_lang .dropdown-menu li a, .flag_lang .dropdown-menu .dropdown-item { color: var(--text) !important; background: transparent !important; padding: 8px 14px !important; font-size: 13px; font-weight: 600; display: block; white-space: nowrap; border-bottom: 1px solid var(--border-color); } .app-header .dropdown-menu li:last-child a, .flag_lang .dropdown-menu li:last-child a { border-bottom: none; } .app-header .dropdown-menu li a:hover, .app-header .dropdown-menu .dropdown-item:hover, .header .dropdown-menu li a:hover, .flag_lang .dropdown-menu li a:hover, .flag_lang .dropdown-menu .dropdown-item:hover { background: var(--brand) !important; color: #fff !important; } /* Make sure the header itself can show overflowing dropdowns */ .app-header { overflow: visible !important; } .app-header .row-100 { overflow: visible !important; } .header { overflow: visible !important; } /* Light theme readability */ body.dark .app-header .dropdown-menu, body.dark .header .dropdown-menu { background: #fff !important; } body.dark .app-header .dropdown-menu li a, body.dark .header .dropdown-menu li a, body.dark .flag_lang .dropdown-menu .dropdown-item { color: #1a0540 !important; } /* ═══════════════════════════════════════════════════════════ PATCH v3.4 — Bigger header control buttons (easier tapping) The whatsapp / theme / currency / language icons were tiny and close together → misclicks. Give each a 40px tap target + gap. ═══════════════════════════════════════════════════════════ */ /* Each control = comfortable 40×40 tap target */ .app-header .telegram_icon_top, .app-header .darkmode, .app-header .currency_converter, .app-header .flag_lang, .header .telegram_icon_top, .header .darkmode, .header .currency_converter, .header .flag_lang { width: 40px; height: 40px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; transition: background .15s; flex-shrink: 0; } .app-header .telegram_icon_top:hover, .app-header .darkmode:hover, .app-header .currency_converter:hover, .app-header .flag_lang:hover, .header .telegram_icon_top:hover, .header .darkmode:hover, .header .currency_converter:hover, .header .flag_lang:hover { background: rgba(244,63,94,.12); } /* Bigger icons inside */ .app-header .telegram_icon_top i, .app-header .darkmode i, .app-header .currency_converter > a i, .app-header .flag_lang > a i, .header .telegram_icon_top i, .header .darkmode i, .header .currency_converter > a i, .header .flag_lang > a i { font-size: 20px !important; } /* Space the control group out so taps don't overlap */ .app-header .col-auto.align-self-center .d-flex, .app-header .d-flex.align-items-center { gap: 6px !important; } /* The dropdown toggles need full clickable area */ .currency_converter .dropdown-toggle, .flag_lang .dropdown-toggle { width: 100%; height: 100%; display: flex !important; align-items: center; justify-content: center; } /* Mobile: same comfortable targets */ @media (max-width: 767.98px) { .app-header .telegram_icon_top, .app-header .darkmode, .app-header .currency_converter, .app-header .flag_lang, .header .telegram_icon_top, .header .darkmode, .header .currency_converter, .header .flag_lang { width: 42px; height: 42px; } .app-header .telegram_icon_top i, .app-header .darkmode i, .header .currency_converter > a i, .header .flag_lang > a i { font-size: 21px !important; } } /* ═══════════════════════════════════════════════════════════ PATCH v3.5 — Add Funds page text contrast Method dropdown + instruction text were too dim → readable. ═══════════════════════════════════════════════════════════ */ /* Method select + amount select: clear, readable text + no clipping */ #method, #amount, #mynewamount, .addFunds + .container #method, [name="AddFoundsForm[type]"], [name="AddFoundsForm[amount]"] { color: var(--text) !important; font-weight: 600; background: var(--bg-input) !important; height: auto !important; min-height: 50px !important; font-size: 14px !important; line-height: 1.5 !important; padding: 12px 38px 12px 14px !important; /* right room for the arrow */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Long method names clip the text vertically on small screens — shrink to fit */ @media (max-width: 767.98px) { #method, [name="AddFoundsForm[type]"] { font-size: 12.5px !important; min-height: 52px !important; line-height: 1.6 !important; } } #method option, #amount option, #mynewamount option { color: var(--text); background: var(--bg-card); } /* Instruction box — was very dim. Make it clearly readable. */ #khalil .panel-body, #khalil .well, .addfunds-instruction, .payment-instruction, #khalil .form-group .panel-body { color: var(--text) !important; background: var(--bg-well) !important; border: 1px solid var(--border-color) !important; } /* Any low-contrast text inside the add-funds form */ #khalil p, #khalil .control-label, #khalil label { color: var(--text) !important; } #khalil .form-control { color: var(--text) !important; } /* The bordered instruction container that shows the long text */ .border-solid.border-rounded, #khalil [class*="border"] { color: var(--text) !important; } /* ═══════════════════════════════════════════════════════════ PATCH v3.6 — Tap anywhere in dropdown search to activate it The magnifier icon sat ON TOP of the input and absorbed taps. Make ONLY the icon click-through so the whole bar focuses the input. (Single, minimal rule — nothing else touched.) ═══════════════════════════════════════════════════════════ */ .select2-search__field-icon { pointer-events: none !important; } /* ═══════════════════════════════════════════════════════════ PATCH v3.7 — LIQUID GLASS effect (global) Ported from Aalaf LiquidButton → pure CSS, widerz colors. Glass cues: bright top inset rim + dark bottom rim + outer glow + drop shadow + top sheen in the background layer (sheen is in BACKGROUND so it never washes out the text). ═══════════════════════════════════════════════════════════ */ /* ── Reusable liquid look on primary buttons ── */ .btn-primary, .btn.btn-primary, .app-ord-nav li a.active, .app-ord-nav li a:hover, .desc-btn, .wz-reorder, .wz-invoice, .s-buy, .cat_btn_filter, .pagination li a.active, #srv-load-more, .wz-addfunds-cta, .wz-st-btn { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.06) 42%, rgba(0,0,0,.06) 100%), linear-gradient(135deg, var(--brand), var(--accent)) !important; border: none !important; box-shadow: 0 0 20px rgba(253,71,16,.30), 0 8px 26px rgba(0,0,0,.45), 0 3px 8px rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.70), inset 0 -2px 0 rgba(0,0,0,.32), inset 2px 0 5px rgba(255,255,255,.07), inset -2px 0 5px rgba(0,0,0,.10) !important; transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, opacity .2s !important; } .btn-primary:hover, .btn.btn-primary:hover, .desc-btn:hover, .wz-reorder:hover, .wz-invoice:hover, .s-buy:hover, .cat_btn_filter:hover, #srv-load-more:hover, .wz-addfunds-cta:hover, .wz-st-btn:hover { transform: translateY(-3px) scale(1.025); box-shadow: 0 0 38px rgba(253,71,16,.55), 0 0 70px rgba(244,63,94,.22), 0 14px 38px rgba(0,0,0,.55), inset 0 3px 0 rgba(255,255,255,.80), inset 0 -3px 0 rgba(0,0,0,.42) !important; } .btn-primary:active, .btn.btn-primary:active, .desc-btn:active, .wz-reorder:active { transform: translateY(1px) scale(.97); } /* ── Liquid status pills / badges (gradient already set; add glass) ── */ .order-status, .bg-success, .bg-danger, .bg-warning, .bg-secondary, .bg, .badge.rounded-pill, .btn_filter.active, #speedFilter .btn_filter.active, #priceFilter .btn_filter.active, #refillFilter .btn_filter.active { box-shadow: 0 4px 14px rgba(0,0,0,.30), inset 0 1.5px 0 rgba(255,255,255,.45), inset 0 -1.5px 0 rgba(0,0,0,.28) !important; position: relative; } /* ── Platform filter pills (services) get the glass on hover/active ── */ .btn_filter { transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, opacity .2s; } .btn_filter:hover { transform: translateY(-2px); } .btn_filter.active, .btn_filter:hover { box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1.5px 0 rgba(255,255,255,.40), inset 0 -1.5px 0 rgba(0,0,0,.25); } /* ── Sidebar active menu item — subtle liquid ── */ .sidebar-menu > li.active > a { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 14px rgba(253,71,16,.18); } /* Light theme: soften the glow */ body.dark .btn-primary, body.dark .btn.btn-primary { box-shadow: 0 0 16px rgba(253,71,16,.22), 0 8px 22px rgba(244,63,94,.20), inset 0 2px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(0,0,0,.18) !important; } /* ═══════════════════════════════════════════════════════════ PATCH v3.8 — Light-theme public menu + date-picker box ═══════════════════════════════════════════════════════════ */ /* Public header menu unreadable (white on light) in LIGHT theme → dark text */ body.dark .header .header-menu ul li a, body.dark .head-menu ul li a, body.dark .header .header-menu ul li a:link { color: #1a0540 !important; } body.dark .header .header-menu ul li a:hover { color: var(--brand) !important; } /* header icons (theme/currency/lang) in light mode */ body.dark .header .darkmode i, body.dark .header .currency_converter > a i, body.dark .header .flag_lang > a i { color: #4a3d6b !important; } body.dark .header .darkmode i.fa-moon { color: #7c6aa8 !important; } /* ── Date-picker widget (Expiry on subscriptions/drip-feed) — was white ── */ .bootstrap-datetimepicker-widget, .datepicker, .datepicker-dropdown, .datepicker table, .datepicker td, .datepicker th, input[type="date"], input[type="datetime-local"], input[type="time"] { background: var(--bg-input) !important; color: var(--text) !important; border-color: var(--border-color) !important; } .bootstrap-datetimepicker-widget { border: 1px solid var(--border-color) !important; border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,.45); } .datepicker td.day:hover, .datepicker td.active, .bootstrap-datetimepicker-widget td.day:hover, .bootstrap-datetimepicker-widget td.active, .bootstrap-datetimepicker-widget .btn { background: var(--brand) !important; color: #fff !important; } .bootstrap-datetimepicker-widget td, .bootstrap-datetimepicker-widget th, .bootstrap-datetimepicker-widget span { color: var(--text) !important; } /* date input icons */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(.7); } /* ═══════════════════════════════════════════════════════════ PATCH v3.9 — clear-datetime button + liquid hover shine (CSS-only, shine fires on HOVER only → zero idle cost/no JS) ═══════════════════════════════════════════════════════════ */ /* The white "clear date" button next to Expiry → themed */ .clear-datetime, .btn-big-secondary, .btn.btn-default.clear-datetime { background: var(--bg-well) !important; border: 1px solid var(--border-color) !important; color: var(--text-muted) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; min-height: 46px; } .clear-datetime:hover, .btn-big-secondary:hover { background: var(--accent) !important; color: #fff !important; border-color: transparent !important; } /* Make expiry input-group align nicely */ .input-group-btn .clear-datetime { height: 100%; } /* ── Premium liquid SHINE sweep (hover only) ── */ .btn-primary, .btn.btn-primary, .desc-btn, .wz-reorder, .wz-invoice, .s-buy, #srv-load-more, .wz-addfunds-cta { overflow: hidden; } .btn-primary::after, .btn.btn-primary::after, .desc-btn::after, .wz-reorder::after, .wz-invoice::after, #srv-load-more::after, .wz-addfunds-cta::after { content: ""; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-18deg); transition: left .55s cubic-bezier(.4,0,.2,1); pointer-events: none; z-index: 1; } .btn-primary:hover::after, .btn.btn-primary:hover::after, .desc-btn:hover::after, .wz-reorder:hover::after, .wz-invoice:hover::after, #srv-load-more:hover::after, .wz-addfunds-cta:hover::after { left: 130%; } /* ═══════════════════════════════════════════════════════════ PATCH v4.0 — Expiry / datetime input-group layout Keep input + clear button INLINE (was wrapping below), and make the clear button a compact square next to the field. ═══════════════════════════════════════════════════════════ */ .input-group { flex-wrap: nowrap !important; } .input-group > .form-control { flex: 1 1 auto; width: 1%; min-width: 0; } .input-group > .input-group-btn { display: flex; flex-shrink: 0; } /* The date input keeps left radius, square right edge where the btn joins */ .input-group > .form-control.datetime, .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Compact clear button — square, joined to the input's right side */ .input-group .input-group-btn > .clear-datetime, .input-group .input-group-btn > .btn-big-secondary, .input-group .input-group-btn > .btn { min-height: 46px !important; height: 46px !important; width: 48px !important; min-width: 48px !important; flex: 0 0 48px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 0 8px 8px 0 !important; border: 1px solid var(--border-color) !important; border-left: none !important; background: var(--bg-well) !important; /* never red/white */ color: var(--text-muted) !important; box-shadow: none !important; } .input-group .input-group-btn > .clear-datetime:hover, .input-group .input-group-btn > .btn-big-secondary:hover { background: var(--accent) !important; color: #fff !important; } .input-group .input-group-btn > .clear-datetime i, .input-group .input-group-btn > .btn-big-secondary i { font-size: 15px; } /* the input must square its right edge and not overflow */ .input-group > .form-control.datetime { border-radius: 8px 0 0 8px !important; } /* ═══════════════════════════════════════════════════════════ PATCH v4.1 — Native