/* ============================================================ آسمان آتش — Atash New WHMCS Theme نسخه‌ای پاکیزه که فقط رنگ‌بندی و ظاهر را عوض می‌کند ساختار Bootstrap دست‌نخورده می‌ماند ============================================================ */ /* Font files are intentionally not bundled in atashnew. The theme uses installed IRANSans/Vazirmatn/Shabnam or system fallbacks. */ /* ============================================================ PALETTES (9 themes) ============================================================ */ :root, [data-palette="ember"] { --bg: #08060f; --bg-deep: #050309; --bg-elev: #14101f; --bg-card: rgba(20, 14, 32, 0.85); --bg-glass: rgba(255, 255, 255, 0.04); --bg-input: rgba(255, 255, 255, 0.05); --border: rgba(255, 122, 58, 0.18); --border-strong: rgba(255, 122, 58, 0.4); --text: #f3eee4; --text-mute: #a59989; --text-faint: #6b6155; --accent: #ff7a3a; --accent-2: #ff2d92; --accent-3: #ffba2a; --grad: linear-gradient(135deg, #ff2d92 0%, #ff6a2a 50%, #ffba2a 100%); --grad-soft: linear-gradient(135deg, rgba(255,45,146,0.18), rgba(255,186,42,0.12)); --aurora-1: #ff2d92; --aurora-2: #ff6a2a; --aurora-3: #7c3aed; } [data-palette="onyx"] { --bg: #0a0a0a; --bg-deep: #000000; --bg-elev: #141414; --bg-card: rgba(22,22,22,0.88); --bg-glass: rgba(255,255,255,0.03); --bg-input: rgba(255,255,255,0.05); --border: rgba(255,107,0,0.18); --border-strong: rgba(255,107,0,0.42); --text: #ffffff; --text-mute: #999999; --text-faint: #555555; --accent: #ff6b00; --accent-2: #ff9a3c; --accent-3: #ffcc33; --grad: linear-gradient(135deg, #ff6b00 0%, #ff9a3c 100%); --grad-soft: linear-gradient(135deg, rgba(255,107,0,0.2), rgba(255,154,60,0.12)); --aurora-1: #ff6b00; --aurora-2: #ff9a3c; --aurora-3: #1a1a1a; } [data-palette="cocoa"] { --bg: #fff8ee; --bg-deep: #fdf3e3; --bg-elev: #ffffff; --bg-card: rgba(255,255,255,0.92); --bg-glass: rgba(94,56,32,0.04); --bg-input: rgba(94,56,32,0.06); --border: rgba(94,56,32,0.15); --border-strong: rgba(94,56,32,0.3); --text: #3a2418; --text-mute: #7a5942; --text-faint: #a88a72; --accent: #8b4a26; --accent-2: #d97757; --accent-3: #4ade80; --grad: linear-gradient(135deg, #8b4a26 0%, #d97757 50%, #4ade80 100%); --grad-soft: linear-gradient(135deg, rgba(139,74,38,0.1), rgba(74,222,128,0.08)); --aurora-1: #d97757; --aurora-2: #4ade80; --aurora-3: #f4a261; } [data-palette="neon"] { --bg: #f5f7f5; --bg-deep: #ffffff; --bg-elev: #ffffff; --bg-card: rgba(255,255,255,0.95); --bg-glass: rgba(0,200,100,0.04); --bg-input: rgba(0,0,0,0.04); --border: rgba(0,100,50,0.12); --border-strong: rgba(0,200,100,0.4); --text: #0a1a0f; --text-mute: #4a6b54; --text-faint: #7a9c84; --accent: #00d27a; --accent-2: #00b8d4; --accent-3: #b6f500; --grad: linear-gradient(135deg, #00d27a 0%, #b6f500 100%); --grad-soft: linear-gradient(135deg, rgba(0,210,122,0.12), rgba(182,245,0,0.08)); --aurora-1: #00d27a; --aurora-2: #b6f500; --aurora-3: #00b8d4; } [data-palette="midnight"] { --bg: #050a18; --bg-deep: #020510; --bg-elev: #0c1530; --bg-card: rgba(15,25,50,0.85); --bg-glass: rgba(255,255,255,0.04); --bg-input: rgba(255,255,255,0.05); --border: rgba(100,200,255,0.18); --border-strong: rgba(100,200,255,0.4); --text: #e6f0ff; --text-mute: #8a9bb8; --text-faint: #5a6b88; --accent: #4dd6ff; --accent-2: #7c3aed; --accent-3: #00ffd1; --grad: linear-gradient(135deg, #4dd6ff 0%, #7c3aed 100%); --grad-soft: linear-gradient(135deg, rgba(77,214,255,0.18), rgba(124,58,237,0.15)); --aurora-1: #4dd6ff; --aurora-2: #7c3aed; --aurora-3: #00ffd1; } [data-palette="royal"] { --bg: #0d0820; --bg-deep: #080418; --bg-elev: #1a1138; --bg-card: rgba(30,20,60,0.85); --bg-glass: rgba(255,255,255,0.04); --bg-input: rgba(255,255,255,0.05); --border: rgba(180,120,255,0.18); --border-strong: rgba(180,120,255,0.45); --text: #f0e8ff; --text-mute: #a896c8; --text-faint: #6f5b8b; --accent: #b478ff; --accent-2: #ff4d9d; --accent-3: #ffd700; --grad: linear-gradient(135deg, #b478ff 0%, #ff4d9d 50%, #ffd700 100%); --grad-soft: linear-gradient(135deg, rgba(180,120,255,0.2), rgba(255,77,157,0.12)); --aurora-1: #b478ff; --aurora-2: #ff4d9d; --aurora-3: #ffd700; } [data-palette="sunset"] { --bg: #1a0a12; --bg-deep: #100509; --bg-elev: #28121e; --bg-card: rgba(50,22,36,0.85); --bg-glass: rgba(255,255,255,0.04); --bg-input: rgba(255,255,255,0.05); --border: rgba(255,130,90,0.18); --border-strong: rgba(255,130,90,0.45); --text: #fff5ee; --text-mute: #d4a89a; --text-faint: #8a6657; --accent: #ff5e7e; --accent-2: #ff9a3c; --accent-3: #ffcc66; --grad: linear-gradient(135deg, #ff5e7e 0%, #ff9a3c 50%, #ffcc66 100%); --grad-soft: linear-gradient(135deg, rgba(255,94,126,0.2), rgba(255,154,60,0.12)); --aurora-1: #ff5e7e; --aurora-2: #ff9a3c; --aurora-3: #c64b8e; } [data-palette="forest"] { --bg: #0a1810; --bg-deep: #050d08; --bg-elev: #14271a; --bg-card: rgba(20,40,28,0.85); --bg-glass: rgba(255,255,255,0.04); --bg-input: rgba(255,255,255,0.05); --border: rgba(80,200,140,0.18); --border-strong: rgba(80,200,140,0.45); --text: #eafff0; --text-mute: #95c2a5; --text-faint: #5e8870; --accent: #2ed573; --accent-2: #00d2c6; --accent-3: #fbc531; --grad: linear-gradient(135deg, #2ed573 0%, #00d2c6 100%); --grad-soft: linear-gradient(135deg, rgba(46,213,115,0.2), rgba(0,210,198,0.12)); --aurora-1: #2ed573; --aurora-2: #00d2c6; --aurora-3: #fbc531; } [data-palette="cyber"] { --bg: #050510; --bg-deep: #00000a; --bg-elev: #100a22; --bg-card: rgba(20,14,38,0.88); --bg-glass: rgba(255,255,255,0.04); --bg-input: rgba(255,255,255,0.05); --border: rgba(0,255,220,0.18); --border-strong: rgba(0,255,220,0.45); --text: #e8fbff; --text-mute: #8aa8b3; --text-faint: #506670; --accent: #00fff0; --accent-2: #ff2e9e; --accent-3: #fbff00; --grad: linear-gradient(135deg, #00fff0 0%, #ff2e9e 100%); --grad-soft: linear-gradient(135deg, rgba(0,255,240,0.2), rgba(255,46,158,0.12)); --aurora-1: #00fff0; --aurora-2: #ff2e9e; --aurora-3: #fbff00; } /* ============================================================ BODY & GLOBALS — override base ============================================================ */ html, body { font-family: 'IRANSans', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif !important; } body { background: var(--bg) !important; background-color: var(--bg) !important; color: var(--text) !important; font-size: 14.5px !important; line-height: 1.75 !important; min-height: 100vh; position: relative; direction: rtl; } [dir="ltr"] body { direction: ltr; } /* Aurora background */ .bg-canvas { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .bg-canvas::before, .bg-canvas::after, .bg-canvas .orb { content: ''; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; animation: drift 30s ease-in-out infinite; } .bg-canvas::before { width: 50vw; height: 50vw; top: -10%; right: -10%; background: radial-gradient(circle, var(--aurora-1), transparent 70%); } .bg-canvas::after { width: 45vw; height: 45vw; bottom: -10%; left: -10%; background: radial-gradient(circle, var(--aurora-2), transparent 70%); animation-delay: -10s; } .bg-canvas .orb { width: 40vw; height: 40vw; top: 30%; left: 30%; background: radial-gradient(circle, var(--aurora-3), transparent 70%); animation-delay: -20s; opacity: 0.2; } [data-palette="cocoa"] .bg-canvas::before, [data-palette="cocoa"] .bg-canvas::after, [data-palette="cocoa"] .bg-canvas .orb, [data-palette="neon"] .bg-canvas::before, [data-palette="neon"] .bg-canvas::after, [data-palette="neon"] .bg-canvas .orb { opacity: 0.18; } @keyframes drift { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(40px,-30px) scale(1.1); } 66% { transform: translate(-30px,40px) scale(0.9); } } .bg-grid { position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); opacity: 0.4; pointer-events: none; } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-deep); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-radius: 10px; border: 2px solid var(--bg-deep); } ::selection { background: var(--accent); color: #fff; } /* Text & links */ body, body p, body span, body td, body th, body li, body div, body label, body small, body strong, body em { color: inherit; } body { color: var(--text) !important; } body a { color: var(--accent) !important; text-decoration: none; transition: color .2s ease; } body a:hover { color: var(--accent-2) !important; text-decoration: none; } body h1, body h2, body h3, body h4, body h5, body h6, body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 { font-family: 'IRANSans', sans-serif !important; font-weight: 800 !important; color: var(--text) !important; } /* ============================================================ HEADER ============================================================ */ body .primary-bg-color, body #header.header { background: transparent !important; } body .topbar { background: var(--bg-elev) !important; border-bottom: 1px solid var(--border) !important; padding: 8px 0 !important; } body .topbar .btn { color: var(--text-mute) !important; font-size: 13px; background: var(--bg-glass) !important; border: 1px solid var(--border) !important; border-radius: 9px !important; } body .topbar .btn:hover { color: var(--accent) !important; border-color: var(--accent) !important; background: var(--bg-glass) !important; } body .topbar .input-group-text { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text-mute) !important; font-size: 12px; } body .topbar .btn-active-client, body .topbar .active-client .btn { background: var(--bg-glass) !important; border: 1px solid var(--border) !important; color: var(--text) !important; font-weight: 700; } body .topbar .btn-active-client:hover { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; } body .topbar .badge-info { background: var(--accent) !important; color: #fff !important; } /* Navbar */ body .navbar { background: transparent !important; padding: 16px 0 !important; } body .navbar-brand img, body .navbar-brand .logo { height: 46px !important; width: auto !important; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); } body .main-navbar-wrapper, body .main-navbar { background: transparent !important; border-bottom: 1px solid var(--border) !important; } body .navbar-nav .nav-link { color: var(--text-mute) !important; font-weight: 600 !important; font-size: 14px !important; padding: 9px 16px !important; border-radius: 11px !important; transition: all .2s ease; } body .navbar-nav .nav-link:hover, body .navbar-nav .nav-link:focus { color: var(--text) !important; background: var(--bg-glass) !important; } body .navbar-nav .nav-item.active > .nav-link, body .navbar-nav .nav-link.active { color: var(--text) !important; background: var(--grad-soft) !important; } /* Search input */ body .navbar .input-group .form-control { background: var(--bg-glass) !important; border: 1px solid var(--border) !important; color: var(--text) !important; } body .navbar .input-group .btn { background: var(--bg-glass) !important; border: 1px solid var(--border) !important; color: var(--text-mute) !important; } /* Cart button */ body .navbar-nav .cart-btn, body a.cart-btn { background: var(--grad) !important; color: #fff !important; padding: 0 !important; width: 42px !important; height: 42px !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 12px !important; box-shadow: 0 8px 20px -6px var(--accent) !important; } body .cart-btn:hover { transform: translateY(-2px); } body .cart-btn .badge { position: absolute; top: -4px; right: -4px; background: var(--accent-3) !important; color: var(--bg-deep) !important; font-size: 10px; padding: 2px 6px; border-radius: 999px; font-weight: 800; } /* Dropdown menu */ body .dropdown-menu { background: var(--bg-elev) !important; border: 1px solid var(--border-strong) !important; border-radius: 14px !important; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5) !important; padding: 8px !important; } body .dropdown-item { color: var(--text) !important; font-size: 13.5px !important; padding: 10px 14px !important; border-radius: 10px !important; } body .dropdown-item:hover, body .dropdown-item:focus { background: var(--grad-soft) !important; color: var(--accent) !important; } body .dropdown-divider { border-color: var(--border) !important; } /* ============================================================ BREADCRUMB ============================================================ */ body .master-breadcrumb, body nav.master-breadcrumb { padding: 18px 0 !important; background: transparent !important; border-bottom: 1px solid var(--border) !important; margin-bottom: 24px; } body .breadcrumb { background: transparent !important; margin: 0 !important; padding: 0 !important; font-size: 13px; } body .breadcrumb-item a { color: var(--text-mute) !important; } body .breadcrumb-item a:hover { color: var(--accent) !important; } body .breadcrumb-item.active { color: var(--text) !important; font-weight: 700; } body .breadcrumb-item + .breadcrumb-item::before { color: var(--text-faint) !important; } /* ============================================================ CARDS ============================================================ */ body .card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 18px !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 14px 40px -14px rgba(0,0,0,0.3) !important; margin-bottom: 20px; color: var(--text) !important; transition: all .3s ease; } body .card:hover { border-color: var(--border-strong) !important; } body .card-header { background: rgba(0,0,0,0.1) !important; border-bottom: 1px solid var(--border) !important; padding: 16px 22px !important; color: var(--text) !important; } body .card-title { color: var(--text) !important; font-weight: 800 !important; margin: 0; font-size: 1.05rem; } body .card-title i, body .card-header i { color: var(--accent) !important; margin-left: 6px; } body .card-body { padding: 24px !important; color: var(--text) !important; background: transparent !important; } body .card-footer { background: rgba(0,0,0,0.1) !important; border-top: 1px solid var(--border) !important; padding: 14px 22px !important; color: var(--text-mute) !important; } /* card-accent strips */ body [class*="card-accent-"] { position: relative; overflow: hidden; } body [class*="card-accent-"]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); } body .card-accent-blue::before { background: linear-gradient(90deg, #4dd6ff, #3b82f6); } body .card-accent-green::before { background: linear-gradient(90deg, #2ed573, #00d2c6); } body .card-accent-red::before { background: linear-gradient(90deg, #ff4757, #ff7a3a); } body .card-accent-gold::before { background: linear-gradient(90deg, #ffba2a, #ff9a3c); } body .card-accent-teal::before { background: linear-gradient(90deg, #00d2c6, #4dd6ff); } body .card-accent-pomegranate::before { background: linear-gradient(90deg, #ff2d92, #ff4757); } body .card-accent-sun-flower::before { background: linear-gradient(90deg, #ffba2a, #ffd700); } body .card-accent-asbestos::before { background: linear-gradient(90deg, #7a8a99, #a0aab5); } body .card-accent-midnight-blue::before { background: linear-gradient(90deg, #4dd6ff, #7c3aed); } /* ============================================================ BUTTONS — keep Bootstrap layout, only change colors ============================================================ */ body .btn { border-radius: 12px !important; font-weight: 700 !important; font-size: 13.5px; font-family: 'IRANSans', sans-serif !important; transition: all .25s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } body .btn:focus, body .btn.focus { box-shadow: none !important; outline: 0; } body .btn-primary, body .btn-success { background: var(--grad) !important; background-color: var(--accent) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 10px 24px -8px var(--accent) !important; } body .btn-primary:hover, body .btn-success:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px var(--accent) !important; color: #fff !important; } body .btn-default, body .btn-secondary { background: var(--bg-glass) !important; background-color: var(--bg-glass) !important; border-color: var(--border-strong) !important; color: var(--text) !important; } body .btn-default:hover, body .btn-secondary:hover { background: var(--bg-elev) !important; border-color: var(--accent) !important; color: var(--accent) !important; } body .btn-outline-primary { background: transparent !important; border-color: var(--border-strong) !important; color: var(--text) !important; } body .btn-outline-primary:hover { background: var(--grad) !important; border-color: transparent !important; color: #fff !important; } body .btn-info { background: linear-gradient(135deg, #4dd6ff, #06b6d4) !important; border-color: transparent !important; color: #fff !important; } body .btn-danger { background: linear-gradient(135deg, #ff4757, #ff2d92) !important; border-color: transparent !important; color: #fff !important; } body .btn-warning { background: linear-gradient(135deg, #ffba2a, #ff9a3c) !important; border-color: transparent !important; color: #fff !important; } /* ============================================================ FORMS ============================================================ */ body .form-control, body input.form-control, body select.form-control, body textarea.form-control, body .field { background: var(--bg-input) !important; background-color: var(--bg-input) !important; border: 1.5px solid var(--border) !important; border-radius: 11px !important; color: var(--text) !important; font-family: 'IRANSans', sans-serif !important; padding: 11px 16px !important; font-size: 14px !important; height: auto !important; } body .form-control:focus, body input.form-control:focus, body .field:focus { background: var(--bg-elev) !important; border-color: var(--accent) !important; color: var(--text) !important; box-shadow: 0 0 0 4px var(--grad-soft) !important; } body .form-control::placeholder, body .field::placeholder { color: var(--text-faint) !important; } body .form-control-label, body label, body .col-form-label { color: var(--text) !important; font-weight: 700 !important; font-size: 13.5px; margin-bottom: 6px; } body .custom-select { background-color: var(--bg-input) !important; color: var(--text) !important; border-color: var(--border) !important; border-radius: 11px !important; } body .input-group-text { background: var(--bg-glass) !important; border: 1.5px solid var(--border) !important; color: var(--accent) !important; font-weight: 700; } /* ============================================================ prepend-icon — ساختار جدید آسمان آتش استفاده در: clientregister.tpl, login.tpl ساختار HTML مورد انتظار:
============================================================ */ body .prepend-icon { position: relative !important; margin-bottom: 18px !important; } body .prepend-icon > .aa-label, body .aa-label { display: block !important; text-align: right !important; font-size: 13px !important; font-weight: 700 !important; color: var(--text) !important; margin: 0 0 8px 0 !important; padding: 0 !important; position: static !important; width: auto !important; } [dir="ltr"] body .prepend-icon > .aa-label, [dir="ltr"] body .aa-label { text-align: left !important; } /* اطمینان از اینکه label و input کنار هم نمی‌چپن */ body .prepend-icon > .aa-label + .field-icon { /* محل آیکن وقتی label هست */ } body .prepend-icon > .field-icon, body .prepend-icon > label.field-icon, body .prepend-icon span.field-icon { position: absolute !important; top: auto !important; bottom: 0 !important; right: 14px !important; left: auto !important; width: 22px !important; height: 46px !important; line-height: 46px !important; margin: 0 !important; padding: 0 !important; color: var(--accent) !important; z-index: 5 !important; pointer-events: none !important; font-size: 14px !important; font-weight: normal !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: 0 !important; } body .prepend-icon > .field-icon i, body .prepend-icon span.field-icon i { display: block !important; line-height: 1 !important; font-size: 15px !important; color: var(--accent) !important; } [dir="ltr"] body .prepend-icon > .field-icon, [dir="ltr"] body .prepend-icon > label.field-icon, [dir="ltr"] body .prepend-icon span.field-icon { right: auto !important; left: 14px !important; } /* اگه label نیست، آیکن باید vertically centered باشه */ body .prepend-icon:not(:has(> .aa-label)) > .field-icon, body .prepend-icon:not(:has(> .aa-label)) > span.field-icon { top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; } /* ورودی‌ها در prepend-icon */ body .prepend-icon > .field, body .prepend-icon > input.form-control, body .prepend-icon > input, body .prepend-icon > select, body .prepend-icon > select.field, body .prepend-icon > textarea { padding-right: 42px !important; padding-left: 16px !important; width: 100% !important; height: 46px !important; display: block !important; text-align: right !important; background: var(--bg-input) !important; border: 1.5px solid var(--border) !important; border-radius: 11px !important; color: var(--text) !important; font-family: 'IRANSans', sans-serif !important; font-size: 14px !important; transition: all .2s ease; } body .prepend-icon > textarea { height: auto !important; min-height: 100px !important; padding-top: 12px !important; padding-bottom: 12px !important; } body .prepend-icon > .field:focus, body .prepend-icon > input.form-control:focus, body .prepend-icon > input:focus, body .prepend-icon > select:focus, body .prepend-icon > textarea:focus { background: var(--bg-elev) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--grad-soft) !important; outline: 0 !important; } [dir="ltr"] body .prepend-icon > .field, [dir="ltr"] body .prepend-icon > input.form-control, [dir="ltr"] body .prepend-icon > input, [dir="ltr"] body .prepend-icon > select, [dir="ltr"] body .prepend-icon > textarea { padding-right: 16px !important; padding-left: 42px !important; text-align: left !important; } body .prepend-icon > .field[dir="ltr"], body .prepend-icon > input.form-control[dir="ltr"], body .prepend-icon > input[dir="ltr"] { text-align: right !important; /* مقدارش LTR ولی alignment راست برای فیلد ایمیل/تلفن */ } /* placeholder در prepend-icon */ body .prepend-icon > input::placeholder, body .prepend-icon > .field::placeholder, body .prepend-icon > textarea::placeholder { color: var(--text-faint) !important; opacity: 1; } /* دکمه‌ی نمایش رمز */ body .prepend-icon .aa-reveal, body .aa-password-group .aa-reveal { position: absolute !important; top: auto !important; bottom: 0 !important; left: 8px !important; right: auto !important; width: 32px !important; height: 46px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: 0 !important; color: var(--text-mute) !important; cursor: pointer !important; padding: 0 !important; margin: 0 !important; z-index: 5; transition: color .2s ease; } body .prepend-icon .aa-reveal:hover { color: var(--accent) !important; } body .prepend-icon .aa-reveal i { font-size: 14px; } [dir="ltr"] body .prepend-icon .aa-reveal { left: auto !important; right: 8px !important; } /* وقتی reveal button هست، باید padding چپ بیشتر باشه */ body .prepend-icon.aa-password-group > input, body .prepend-icon:has(.aa-reveal) > input { padding-left: 44px !important; } [dir="ltr"] body .prepend-icon.aa-password-group > input, [dir="ltr"] body .prepend-icon:has(.aa-reveal) > input { padding-left: 16px !important; padding-right: 44px !important; } /* لینک کوچک کنار label (مثل "فراموش کرده‌اید؟") */ body .aa-small-link { font-size: 12px !important; color: var(--text-mute) !important; font-weight: 600 !important; text-decoration: none; transition: color .2s ease; } body .aa-small-link:hover { color: var(--accent) !important; } body .aa-small-link i { font-size: 11px; margin-left: 3px; } /* ============================================================ چک‌باکس‌های سفارشی ============================================================ */ body .aa-checkbox-label { display: inline-flex !important; align-items: center !important; gap: 10px; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--text); user-select: none; margin: 0 !important; } body .aa-checkbox { appearance: none; -webkit-appearance: none; width: 20px !important; height: 20px !important; margin: 0 !important; border: 2px solid var(--border-strong); border-radius: 6px; background: var(--bg-glass); cursor: pointer; position: relative; transition: all .2s ease; flex: 0 0 20px; } body .aa-checkbox:hover { border-color: var(--accent); } body .aa-checkbox:checked { background: var(--grad); border-color: transparent; } body .aa-checkbox:checked::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; } body .aa-checkbox-text { line-height: 20px; } /* ============================================================ عنوان بخش‌ها در فرم register ============================================================ */ body .aa-section-title { font-size: 1.05rem !important; font-weight: 800 !important; color: var(--text) !important; margin: 0 0 22px 0 !important; padding-bottom: 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } body .aa-section-title i { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--grad-soft); color: var(--accent) !important; font-size: 16px; margin: 0 !important; } /* ============================================================ دکمه‌ی Submit زیبا ============================================================ */ body .aa-submit-btn { padding: 13px 24px !important; font-size: 15px !important; font-weight: 800 !important; background: var(--grad) !important; border: 0 !important; color: #fff !important; border-radius: 13px !important; box-shadow: 0 14px 30px -10px var(--accent) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px; transition: all .25s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } body .aa-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -10px var(--accent) !important; color: #fff !important; } body .aa-submit-btn.btn-block { width: 100% !important; } body .aa-submit-btn i { font-size: 14px; color: #fff !important; } /* ============================================================ کپچا — سازگار با ساختار اصلی WHMCS (verifyimage.php) ساختار: .text-center.row > .col-md-8 > #default-captcha-domainchecker > .col-6.captchaimage (img) + .col-6 (input) ============================================================ */ body .aa-captcha-container { margin: 18px 0 22px; } /* اطمینان از قابل دیده شدن همه‌چیز */ body #default-captcha-domainchecker, body .captchaimage, body #inputCaptchaImage, body #inputCaptcha { display: revert; visibility: visible !important; opacity: 1 !important; } /* container کپچا */ body #default-captcha-domainchecker { background: var(--bg-glass) !important; border: 1.5px dashed var(--border-strong) !important; border-radius: 14px !important; padding: 16px !important; margin: 0 auto !important; } /* لیبل بالای کپچا */ body #default-captcha-domainchecker > p, body #default-captcha-domainchecker p { width: 100% !important; margin: 0 0 12px 0 !important; text-align: center !important; font-size: 13px !important; font-weight: 600 !important; color: var(--text-mute) !important; } /* عکس کپچا */ body #default-captcha-domainchecker .captchaimage, body .captchaimage { text-align: center !important; padding: 4px !important; } body #inputCaptchaImage, body img#inputCaptchaImage, body .captchaimage img { display: inline-block !important; max-height: 60px !important; height: auto !important; background: #fff !important; border: 1px solid var(--border-strong) !important; border-radius: 8px !important; padding: 6px !important; margin: 0 auto !important; vertical-align: middle !important; visibility: visible !important; } /* input کپچا */ body #inputCaptcha, body input#inputCaptcha { display: block !important; width: 100% !important; height: 48px !important; background: var(--bg-input) !important; border: 1.5px solid var(--border) !important; border-radius: 11px !important; color: var(--text) !important; text-align: center !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: 4px !important; padding: 8px 14px !important; font-family: 'Segoe UI', Tahoma, sans-serif !important; } body #inputCaptcha:focus { background: var(--bg-elev) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 4px var(--grad-soft) !important; outline: 0 !important; } body #inputCaptcha::placeholder { letter-spacing: normal; color: var(--text-faint); } /* reCAPTCHA container */ body #google-recaptcha-domainchecker, body .recaptcha-container, body .g-recaptcha, body .h-captcha { display: inline-block !important; margin: 0 auto !important; } /* تنظیم ستون‌ها در کپچای WHMCS (col-6 captchaimage + col-6 input) */ body #default-captcha-domainchecker.row > [class*="col-"] { display: flex !important; align-items: center !important; justify-content: center !important; padding: 8px !important; } /* مخصوص صفحه‌ی homepage که یک wrapper اضافه هست */ body .domainchecker-homepage-captcha { margin: 16px auto !important; max-width: 460px; } /* اگه قبلاً aa-captcha-wrap هم بود، ساپورتش کن (backward compat) */ body .aa-captcha-wrap { background: var(--bg-glass); border: 1.5px dashed var(--border-strong); border-radius: 14px; padding: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } body .aa-captcha-wrap img { border-radius: 8px; border: 1px solid var(--border); background: #fff; padding: 4px; max-height: 50px; display: inline-block !important; } body .aa-captcha-wrap input[type="text"] { flex: 1; min-width: 160px; max-width: 240px; margin: 0 !important; text-align: center !important; font-weight: 700; letter-spacing: 2px; font-size: 15px !important; } /* ============================================================ فرم Register — کارت‌های section ============================================================ */ body .aa-register .card { border-radius: 18px !important; } body .aa-register .card-body { padding: 24px !important; } @media (min-width: 768px) { body .aa-register .card-body { padding: 32px !important; } } /* استایل ssl دکمه ساخت رمز */ body .generate-password { padding: 10px 16px !important; border-radius: 11px !important; } body .generate-password i { color: var(--accent) !important; margin-left: 4px; } /* ============================================================ helper text زیر فیلدها ============================================================ */ body .aa-form-help, body .field-help-text { font-size: 12px !important; color: var(--text-faint) !important; margin-top: 6px !important; display: block; line-height: 1.5; } /* ============================================================ input-group RTL fixes (used in login form) در RTL باید prepend سمت راست input بیاد ============================================================ */ [dir="rtl"] body .input-group { direction: rtl !important; flex-wrap: wrap; } [dir="rtl"] body .input-group > .input-group-prepend { margin-left: -1.5px; margin-right: 0; } [dir="rtl"] body .input-group > .input-group-append { margin-right: -1.5px; margin-left: 0; } /* Border-radius corrections for RTL input-groups */ [dir="rtl"] body .input-group > .input-group-prepend > .input-group-text, [dir="rtl"] body .input-group > .input-group-prepend > .btn { border-top-right-radius: 11px !important; border-bottom-right-radius: 11px !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } [dir="rtl"] body .input-group > .form-control:not(:first-child):not(:last-child), [dir="rtl"] body .input-group-merge > .form-control:not(:first-child) { border-radius: 0 !important; } [dir="rtl"] body .input-group > .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-top-left-radius: 11px !important; border-bottom-left-radius: 11px !important; } [dir="rtl"] body .input-group > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: 11px !important; border-bottom-right-radius: 11px !important; } [dir="rtl"] body .input-group > .input-group-append > .input-group-text, [dir="rtl"] body .input-group > .input-group-append > .btn { border-top-left-radius: 11px !important; border-bottom-left-radius: 11px !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* وقتی هم prepend و هم append دارن */ [dir="rtl"] body .input-group-merge > .form-control { border-radius: 0 !important; } /* placeholder در input‌ها هم RTL باشه */ body input[type="email"], body input[type="tel"], body input[type="url"], body input[type="text"], body input[type="password"] { text-align: right; direction: rtl; } body input[type="email"]::placeholder, body input[type="url"]::placeholder { direction: ltr; text-align: right; } body input[dir="ltr"], body input.text-ltr { direction: ltr; text-align: left; } /* Phone input (intl-tel-input) باید LTR باشه چون شماره است */ body input[type="tel"], body input[name="phonenumber"], body input[name="phone"] { direction: ltr; text-align: right; } /* Reveal password button */ body .btn-reveal-pw { background: var(--bg-glass) !important; color: var(--text-mute) !important; border: 1.5px solid var(--border) !important; } body .btn-reveal-pw:hover { color: var(--accent) !important; } body .btn-reveal-pw i { color: inherit !important; } /* Alerts */ body .alert { border: 1px solid !important; border-radius: 14px !important; padding: 14px 18px !important; font-size: 14px; } body .alert-success { background: rgba(46, 213, 115, 0.1) !important; border-color: rgba(46, 213, 115, 0.3) !important; color: #2ed573 !important; } body .alert-danger, body .alert-error { background: rgba(255, 71, 87, 0.1) !important; border-color: rgba(255, 71, 87, 0.3) !important; color: #ff4757 !important; } body .alert-warning { background: rgba(255, 186, 42, 0.1) !important; border-color: rgba(255, 186, 42, 0.3) !important; color: var(--accent-3) !important; } body .alert-info { background: rgba(77, 214, 255, 0.1) !important; border-color: rgba(77, 214, 255, 0.3) !important; color: #4dd6ff !important; } /* ============================================================ TILES (homepage dashboard stats) ============================================================ */ body .tiles { margin: 0 -8px 24px !important; } body .tiles .row { margin: 0 !important; } body .tiles [class*="col-"] { padding: 8px !important; } body .tile { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 18px !important; padding: 24px !important; text-align: center !important; color: var(--text) !important; text-decoration: none !important; position: relative; overflow: hidden; min-height: 160px !important; transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } body .tile:hover { transform: translateY(-6px); border-color: var(--border-strong) !important; box-shadow: 0 24px 60px -14px rgba(0,0,0,0.4); color: var(--text) !important; text-decoration: none !important; } body .tile > i { font-size: 28px !important; color: var(--accent) !important; margin-bottom: 12px !important; display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 16px; background: var(--grad-soft) !important; transition: all .3s ease; } body .tile:hover > i { background: var(--grad) !important; color: #fff !important; transform: scale(1.1); } body .tile .stat { font-size: 2.2rem !important; font-weight: 900 !important; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; line-height: 1; margin-bottom: 6px; font-family: 'Segoe UI', Tahoma, sans-serif; } body .tile .title { font-size: 0.92rem !important; color: var(--text-mute) !important; font-weight: 700; } body .tile .highlight { display: none !important; } /* ============================================================ ACTION ICON BUTTONS (homepage quick links) ============================================================ */ body .action-icon-btns a { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 28px 18px !important; background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 18px !important; color: var(--text) !important; font-weight: 700 !important; font-size: 0.92rem !important; text-decoration: none !important; height: 100% !important; position: relative; transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } body .action-icon-btns a:hover { transform: translateY(-6px); border-color: var(--border-strong) !important; color: var(--text) !important; text-decoration: none !important; } body .action-icon-btns .ico-container, body .action-icon-btns figure { width: 64px !important; height: 64px !important; margin: 0 auto 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 18px !important; background: var(--grad) !important; color: #fff !important; font-size: 26px; box-shadow: 0 12px 30px -8px var(--accent); transition: transform .3s ease; } body .action-icon-btns a:hover .ico-container, body .action-icon-btns a:hover figure { transform: scale(1.1) rotate(-5deg); } body .action-icon-btns figure i, body .action-icon-btns .ico-container i { color: #fff !important; } /* card-columns for homepage productGroups */ body .card-columns.home { column-count: 3; column-gap: 20px; } @media (max-width: 992px) { body .card-columns.home { column-count: 2; } } @media (max-width: 576px) { body .card-columns.home { column-count: 1; } } body .card-columns.home .card { display: inline-block; width: 100%; } body .card-columns.home .pricing-card-title { font-size: 1.2rem; margin-bottom: 8px; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; } /* ============================================================ CLIENT HOME LIST GROUP ============================================================ */ body .list-group { background: transparent !important; } body .list-group-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; color: var(--text) !important; padding: 12px 22px !important; font-size: 13.5px; } body .list-group-item:last-child { border-bottom: 0 !important; } body .list-group-item-action:hover { background: var(--bg-glass) !important; color: var(--accent) !important; } body .list-group-item.active { background: var(--grad-soft) !important; color: var(--accent) !important; border-color: var(--border-strong) !important; } body .list-group-item > i, body .list-group-item .sidebar-menu-item-icon { color: var(--accent) !important; } /* Sidebar */ body .card-sidebar { margin-bottom: 16px !important; } body .card-sidebar .card-header { padding: 14px 18px !important; cursor: pointer; } body .card-sidebar .card-title { font-size: 0.95rem !important; } body .card-minimise { color: var(--text-mute) !important; font-size: 12px; margin-top: 4px; cursor: pointer; } body .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; } body .sidebar-menu-item-icon-wrapper { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--grad-soft) !important; color: var(--accent) !important; flex-shrink: 0; } body .list-group-item.active .sidebar-menu-item-icon-wrapper { background: var(--grad) !important; color: #fff !important; } body .sidebar-menu-item-label { flex: 1; font-weight: 600; } body .sidebar-menu-item-badge .badge { background: var(--accent) !important; color: #fff !important; border-radius: 999px; font-weight: 700; padding: 3px 8px; } /* ============================================================ TABLES ============================================================ */ body .table { color: var(--text) !important; background: transparent !important; margin-bottom: 0 !important; } body .table thead th { background: rgba(0,0,0,0.15) !important; color: var(--text) !important; border-color: var(--border) !important; font-weight: 800 !important; font-size: 12.5px; padding: 12px 14px !important; } body .table tbody tr { transition: background .15s ease; } body .table tbody tr:nth-of-type(odd) { background: transparent !important; } body .table tbody tr:hover { background: var(--bg-glass) !important; color: var(--text) !important; } body .table tbody td { border-color: var(--border) !important; padding: 14px !important; font-size: 13.5px; vertical-align: middle; color: var(--text) !important; } body .table-container { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 16px; padding: 8px; } /* DataTables */ body .dataTables_wrapper { padding: 16px; color: var(--text) !important; } body .dataTables_wrapper input, body .dataTables_wrapper select { background: var(--bg-input) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 9px !important; padding: 6px 12px !important; } body .dataTables_filter label, body .dataTables_length label, body .dataTables_info { color: var(--text-mute) !important; } body .dataTables_paginate .paginate_button { padding: 6px 12px !important; margin: 0 2px !important; border-radius: 8px !important; background: transparent !important; border: 1px solid var(--border) !important; color: var(--text) !important; } body .dataTables_paginate .paginate_button.current, body .dataTables_paginate .paginate_button.current:hover { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; } body .dataTables_paginate .paginate_button:hover { background: var(--bg-glass) !important; color: var(--accent) !important; } /* Status labels (active, paid, etc) */ body .label.status, body span.status, body .label-success { display: inline-block; padding: 4px 12px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.02em; } body .status-active, body .status-paid, body .label-success { background: rgba(46, 213, 115, 0.15) !important; color: #2ed573 !important; border: 1px solid rgba(46, 213, 115, 0.3) !important; } body .status-pending, body .status-unpaid, body .label-warning { background: rgba(255, 186, 42, 0.15) !important; color: var(--accent-3) !important; border: 1px solid rgba(255, 186, 42, 0.3) !important; } body .status-suspended, body .status-overdue, body .status-cancelled, body .status-terminated, body .label-danger { background: rgba(255, 71, 87, 0.15) !important; color: #ff4757 !important; border: 1px solid rgba(255, 71, 87, 0.3) !important; } body .status-completed, body .status-closed, body .label-default { background: rgba(124, 58, 237, 0.15) !important; color: #b478ff !important; border: 1px solid rgba(124, 58, 237, 0.3) !important; } body .status-open, body .status-answered, body .status-customer-reply, body .label-info { background: rgba(77, 214, 255, 0.15) !important; color: #4dd6ff !important; border: 1px solid rgba(77, 214, 255, 0.3) !important; } /* Badges */ body .badge { font-weight: 700 !important; padding: 4px 10px !important; border-radius: 8px !important; font-size: 11px !important; } body .badge-info { background: var(--accent) !important; color: #fff !important; } body .badge-success { background: #2ed573 !important; color: #fff !important; } body .badge-danger { background: #ff4757 !important; color: #fff !important; } body .badge-warning { background: var(--accent-3) !important; color: var(--bg-deep) !important; } /* ============================================================ FOOTER ============================================================ */ body #footer.footer, body footer#footer { background: var(--bg-elev) !important; border-top: 1px solid var(--border) !important; padding: 40px 0 20px !important; color: var(--text-mute) !important; margin-top: 40px; } body #footer a, body footer a { color: var(--text-mute) !important; } body #footer a:hover, body footer a:hover { color: var(--accent) !important; } body #footer .nav-link, body footer .nav-link { padding: 6px 14px !important; color: var(--text-mute) !important; } body #footer .copyright, body footer .copyright { text-align: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-faint) !important; } body #footer .list-inline-item .btn, body footer .list-inline-item .btn { background: var(--bg-glass) !important; border: 1px solid var(--border) !important; color: var(--text-mute) !important; } /* ============================================================ MODALS ============================================================ */ body .modal-content { background: var(--bg-elev) !important; border: 1px solid var(--border-strong) !important; border-radius: 18px !important; color: var(--text) !important; } body .modal-header, body .modal-footer { border-color: var(--border) !important; } body .modal-title { color: var(--text) !important; font-weight: 800 !important; } body .close { color: var(--text) !important; opacity: 0.7; text-shadow: none; } body .close:hover { opacity: 1; color: var(--accent) !important; } /* ============================================================ LOGIN / REGISTER FORMS ============================================================ */ body .mw-540 { max-width: 540px; margin: 0 auto; } body .login-form .card, body form#frmCheckout > .card, body .password-reset-container .card { border-radius: 22px !important; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5) !important; } body .login-form .h3 { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; } /* ============================================================ ANNOUNCEMENTS / KB ============================================================ */ body .announcement { padding: 24px; border-bottom: 1px solid var(--border) !important; } body .announcement:last-child { border-bottom: 0 !important; } body .announcement h1, body .announcement h2 { font-size: 1.3rem; margin-bottom: 12px; } body .announcement h1 a, body .announcement h2 a { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; } body .kb-search .form-control { padding: 16px 22px !important; font-size: 16px !important; } body .kb-category .card-body { padding: 22px !important; } body .kb-category .badge-info { background: var(--grad) !important; border-radius: 999px; padding: 4px 12px; } body .kb-article-item { padding: 14px 22px !important; font-size: 14px; color: var(--text) !important; } body .kb-article-item:hover { background: var(--bg-glass) !important; } /* Tickets */ body .ticket-number { display: inline-block; background: var(--grad-soft); color: var(--accent) !important; padding: 2px 10px; border-radius: 8px; font-weight: 800; font-size: 12px; margin-left: 6px; } body .ticket-subject.unread { font-weight: 800 !important; } /* ============================================================ PRODUCT DETAILS ============================================================ */ body .product-status { background: var(--bg-glass) !important; border: 1px solid var(--border) !important; border-radius: 16px; padding: 28px 20px; text-align: center; } body .product-status h3 { font-size: 1.15rem; margin: 8px 0 4px; color: var(--text) !important; } body .product-status h4 { font-size: 0.85rem; color: var(--text-mute) !important; font-weight: 600; } body .product-status-text { display: inline-block; padding: 6px 18px; background: var(--grad) !important; color: #fff !important; border-radius: 999px; font-size: 12px; font-weight: 800; margin-top: 12px; } /* fa-stack */ body .fa-stack-2x { color: var(--accent) !important; opacity: 0.15; } body .fa-stack-1x { color: var(--accent) !important; } /* ============================================================ PROGRESS BAR ============================================================ */ body .progress { background: var(--bg-glass) !important; border-radius: 999px; height: 8px; } body .progress-bar { background: var(--grad) !important; border-radius: 999px; } /* ============================================================ PALETTE PICKER ============================================================ */ .aa-palette-picker { position: fixed; top: 50%; left: 0; transform: translateY(-50%); z-index: 1000; } .aa-palette-toggle { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--bg-elev); border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 14px 14px 0; color: var(--accent); box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5); cursor: pointer; transition: all .2s ease; } .aa-palette-toggle:hover { background: var(--grad); color: #fff; } .aa-palette-toggle svg { width: 20px; height: 20px; animation: spin 8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .aa-palette-panel { position: absolute; top: 50%; left: 54px; transform: translateY(-50%) translateX(-20px); width: 260px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 18px; padding: 18px; box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1); max-height: 80vh; overflow-y: auto; } .aa-palette-panel.is-open { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); } .aa-palette-panel h4 { font-size: 13px !important; margin-bottom: 14px !important; color: var(--text-mute) !important; font-weight: 700 !important; } .aa-palette-list { display: grid; gap: 10px; } .aa-palette-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: all .2s ease; background: transparent; width: 100%; text-align: right; } .aa-palette-item:hover { background: var(--bg-glass); } .aa-palette-item.is-active { border-color: var(--accent); background: var(--grad-soft); } .aa-palette-swatch { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 36px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); } .aa-palette-info { flex: 1; min-width: 0; text-align: right; } .aa-palette-info strong { display: block; font-size: 13px; font-weight: 800; color: var(--text); } .aa-palette-info small { font-size: 11px; color: var(--text-mute); } [dir="ltr"] .aa-palette-toggle { border-radius: 14px 0 0 14px; border-left: 1px solid var(--border-strong); border-right: 0; } [dir="ltr"] .aa-palette-info { text-align: left; } /* ============================================================ HOMEPAGE HERO (logged-out) ============================================================ */ .aa-hero { padding: 60px 0 40px; position: relative; } .aa-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 50px; align-items: center; } @media (max-width: 992px) { .aa-hero-grid { grid-template-columns: 1fr; gap: 30px; } } .aa-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem) !important; line-height: 1.18 !important; font-weight: 900 !important; margin-bottom: 18px !important; color: var(--text) !important; } .aa-hero .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; } .aa-hero p.lead { font-size: 1.05rem; color: var(--text-mute) !important; line-height: 1.85; margin-bottom: 28px; max-width: 540px; } .aa-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px; background: var(--grad-soft); border: 1px solid var(--border-strong); color: var(--accent) !important; font-size: 12px; font-weight: 800; margin-bottom: 18px; } .aa-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: aapulse 2s ease-in-out infinite; } @keyframes aapulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } } /* Dashboard mockup */ .aa-dash { position: relative; width: 100%; max-width: 460px; margin: 0 auto; background: linear-gradient(180deg, var(--bg-elev), var(--bg-deep)); border: 1px solid var(--border-strong); border-radius: 22px; padding: 22px 24px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5); animation: dashfloat 6s ease-in-out infinite; } @keyframes dashfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .aa-dash-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 18px; } .aa-dash-title { font-size: 13px; font-weight: 800; color: var(--text); } .aa-dash-title small { display: block; font-size: 11px; color: var(--text-mute); font-weight: 500; margin-top: 2px; } .aa-dash-dots { display: flex; gap: 6px; } .aa-dash-dots span { width: 10px; height: 10px; border-radius: 50%; background: #2ed573; } .aa-dash-dots span:nth-child(1) { background: #ff4757; } .aa-dash-dots span:nth-child(2) { background: #ffa502; } .aa-dash-rows { display: flex; flex-direction: column; gap: 14px; } .aa-dash-row { display: grid; grid-template-columns: 44px 1fr 80px; gap: 12px; align-items: center; } .aa-dash-percent { font-size: 12px; font-weight: 800; color: var(--text); font-family: 'Segoe UI', Tahoma, sans-serif; text-align: center; } .aa-dash-bar { height: 7px; background: var(--bg-glass); border-radius: 999px; overflow: hidden; position: relative; } .aa-dash-bar-fill { position: absolute; inset: 0; border-radius: 999px; width: 0; animation: aabarfill 2s ease-out forwards; } @keyframes aabarfill { to { width: var(--w, 50%); } } .aa-dash-row:nth-child(1) .aa-dash-bar-fill { background: linear-gradient(90deg, #ff6a2a, #ffba2a); --w: 24%; } .aa-dash-row:nth-child(2) .aa-dash-bar-fill { background: linear-gradient(90deg, #3b82f6, #06b6d4); --w: 41%; } .aa-dash-row:nth-child(3) .aa-dash-bar-fill { background: linear-gradient(90deg, #a855f7, #ec4899); --w: 18%; } .aa-dash-row:nth-child(4) .aa-dash-bar-fill { background: linear-gradient(90deg, #10b981, #3b82f6); --w: 57%; } .aa-dash-label { font-size: 11.5px; font-weight: 700; color: var(--text-mute); font-family: 'Segoe UI', Tahoma, sans-serif; } .aa-dash-status { margin-top: 16px; padding: 10px 14px; background: rgba(46, 213, 115, 0.08); border: 1px solid rgba(46, 213, 115, 0.25); border-radius: 11px; display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: var(--text-mute); } .aa-dash-status .dot { width: 7px; height: 7px; background: #2ed573; border-radius: 50%; box-shadow: 0 0 12px #2ed573; animation: aapulse 2s ease-in-out infinite; } .aa-dash-status strong { color: #2ed573; margin: 0 4px; } /* Domain checker */ body .domain-checker, .domain-checker { background: var(--bg-card) !important; border: 1px solid var(--border-strong) !important; border-radius: 20px !important; padding: 22px !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); margin-bottom: 30px; } /* ============================================================ ICONS ============================================================ */ body .text-primary { color: var(--accent) !important; } body .text-muted { color: var(--text-mute) !important; } body .text-success { color: #2ed573 !important; } body .text-danger { color: #ff4757 !important; } body .text-warning { color: var(--accent-3) !important; } body .text-info { color: #4dd6ff !important; } body .bg-light { background: var(--bg-glass) !important; } /* Item-selector for language modal */ body .item-selector .item { display: block; padding: 12px; text-align: center; background: var(--bg-glass) !important; border: 1px solid var(--border) !important; border-radius: 10px; color: var(--text) !important; margin-bottom: 8px; text-decoration: none !important; } body .item-selector .item.active { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; } /* Checkbox & radio accent */ body input[type="checkbox"], body input[type="radio"] { accent-color: var(--accent); } /* card-minimise collapse */ body .card-sidebar.collapsed .collapsable-card-body { display: none !important; } body .card-sidebar.collapsed .card-minimise { transform: rotate(180deg); } /* extra-padding utility */ body .extra-padding { padding: 24px !important; } @media (min-width: 768px) { body .extra-padding { padding: 40px !important; } } /* ============================================================ RTL/LTR FIXES ============================================================ */ [dir="rtl"] body .float-md-right, [dir="rtl"] body .float-right { float: left !important; } [dir="rtl"] body .float-md-left, [dir="rtl"] body .float-left { float: right !important; } [dir="rtl"] body .ml-auto { margin-right: auto !important; margin-left: 0 !important; } [dir="rtl"] body .mr-auto { margin-left: auto !important; margin-right: 0 !important; } [dir="rtl"] body .text-right { text-align: left !important; } [dir="rtl"] body .text-left { text-align: right !important; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { body .navbar-brand img { height: 36px !important; } .aa-palette-picker { top: auto; bottom: 80px; } .aa-palette-panel { top: auto; bottom: 0; } body .tiles [class*="col-"] { padding: 6px !important; } body .tile { padding: 18px !important; min-height: 130px !important; } body .tile > i { font-size: 22px !important; width: 48px; height: 48px; } body .tile .stat { font-size: 1.6rem !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ END ============================================================ */ /* ============================================================ FEATURES GRID (homepage) ============================================================ */ .aa-features { padding: 60px 0; position: relative; } .aa-section-head { text-align: center; margin-bottom: 40px; } .aa-section-head h2 { font-size: clamp(1.5rem, 3vw, 2.2rem) !important; margin-bottom: 12px !important; color: var(--text) !important; } .aa-section-head h2 .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; } .aa-section-head p { color: var(--text-mute) !important; font-size: 1.02rem; max-width: 620px; margin: 0 auto; } .aa-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .aa-feature { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 24px; transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .aa-feature:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 24px 50px -20px rgba(0,0,0,0.4); } .aa-feature .aa-feature-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--grad-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--accent); font-size: 22px; } .aa-feature h4 { font-size: 1.05rem !important; margin: 0 0 8px !important; color: var(--text) !important; font-weight: 800 !important; } .aa-feature p { font-size: 13.5px; color: var(--text-mute); line-height: 1.75; margin: 0; } /* ============================================================ DATACENTERS SECTION (homepage) ============================================================ */ .aa-datacenters { padding: 60px 0; position: relative; } .aa-dc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .aa-dc-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 24px; text-align: center; transition: all .3s ease; position: relative; overflow: hidden; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .aa-dc-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); opacity: 0.7; } .aa-dc-card:hover { transform: translateY(-4px); border-color: var(--border-strong); } .aa-dc-flag { font-size: 40px; line-height: 1; margin-bottom: 10px; } .aa-dc-card h5 { font-size: 1.02rem !important; margin: 0 0 8px !important; color: var(--text) !important; font-weight: 800 !important; } .aa-dc-ping { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--grad-soft); color: var(--accent); font-size: 11.5px; font-weight: 800; margin-bottom: 8px; } .aa-dc-card small { display: block; color: var(--text-mute); font-size: 12px; line-height: 1.6; } /* ============================================================ CTA BANNER (homepage) ============================================================ */ .aa-cta { padding: 60px 0; } .aa-cta-banner { background: var(--grad); border-radius: 24px; padding: 50px 30px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 30px 80px -20px var(--accent); } .aa-cta-banner::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.15), transparent 50%), radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1), transparent 50%); pointer-events: none; } .aa-cta-banner h2 { color: #fff !important; font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important; font-weight: 900 !important; margin-bottom: 14px !important; position: relative; z-index: 1; } .aa-cta-banner p { color: rgba(255,255,255,0.95) !important; font-size: 1.05rem; max-width: 580px; margin: 0 auto 24px; position: relative; z-index: 1; } .aa-cta-banner .btn { position: relative; z-index: 1; background: #fff !important; color: var(--bg-deep) !important; font-weight: 800 !important; padding: 12px 32px !important; border-radius: 14px !important; font-size: 15px !important; box-shadow: 0 14px 40px rgba(0,0,0,0.25) !important; } .aa-cta-banner .btn:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(0,0,0,0.35) !important; color: var(--bg-deep) !important; } /* ============================================================ STATS BAR (homepage logged out) ============================================================ */ .aa-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 50px 0 30px; } @media (max-width: 768px) { .aa-stats { grid-template-columns: repeat(2, 1fr); } } .aa-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 22px 14px; text-align: center; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .aa-stat strong { display: block; font-size: 1.8rem; font-weight: 900; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; font-family: 'Segoe UI', Tahoma, sans-serif; margin-bottom: 4px; line-height: 1; } .aa-stat small { font-size: 12.5px; color: var(--text-mute); font-weight: 600; } /* ============================================================ FAQ / Helper text below forms ============================================================ */ body .aa-form-help { font-size: 12.5px; color: var(--text-faint); margin-top: 6px; } /* ============================================================ CAPTCHA improvements ============================================================ */ body .captcha-wrapper, body #inputCaptcha, body .captcha-wrapper img { display: inline-block !important; vertical-align: middle !important; } body .captcha-wrapper img { border-radius: 10px; border: 1px solid var(--border); background: #fff; padding: 4px; max-height: 50px; } body .form-group .captcha-wrapper { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap; } body .form-group .captcha-wrapper input[type="text"] { flex: 1; min-width: 150px; max-width: 240px; } /* For h-captcha / re-captcha frame */ body .g-recaptcha, body .h-captcha { display: inline-block; margin: 8px 0; } /* ============================================================ DOMAIN SEARCH ON HOMEPAGE — better spacing ============================================================ */ body .domain-checker h3 { font-size: 1.3rem !important; margin-bottom: 18px !important; color: var(--text) !important; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-align: center; } body .domain-checker h3 i { -webkit-text-fill-color: var(--accent); color: var(--accent); margin-left: 8px; } body .domain-checker .form-control-lg { padding: 14px 20px !important; font-size: 15px !important; border-radius: 12px !important; } body .domain-checker .btn-lg { padding: 14px 22px !important; font-size: 15px !important; } body .domain-checker .row.no-gutters { gap: 8px; } body .domain-checker .row.no-gutters > [class*="col-"] { padding: 0 4px; } /* ============================================================ "Already registered?" sidebar card in register page ============================================================ */ body #registration .card-sidebar .list-group-item { padding: 16px 22px !important; } body #registration .card-sidebar a.list-group-item { font-weight: 700; } /* ============================================================ Topbar — "Logged in as" widget ============================================================ */ body .topbar .active-client { border-radius: 11px; overflow: hidden; } body .topbar .input-group { border-radius: 11px; } /* Notifications popover button */ body #accountNotifications { border-radius: 9px; font-weight: 700; } body #accountNotifications i { margin-left: 6px; } /* ============================================================ Better focus states ============================================================ */ body *:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; } body input:focus-visible, body button:focus-visible, body select:focus-visible, body textarea:focus-visible, body a:focus-visible { outline-offset: 0 !important; } /* ============================================================ Phone number prefix display (for IR) ============================================================ */ body .iti__flag-container, body .iti-flag { z-index: 6; } body .intl-tel-input .selected-flag { background: var(--bg-glass) !important; border-right: 1px solid var(--border) !important; } /* ============================================================ Pagination ============================================================ */ body .pagination .page-item .page-link { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 8px !important; margin: 0 2px; } body .pagination .page-item.active .page-link { background: var(--grad) !important; border-color: transparent !important; color: #fff !important; } body .pagination .page-item .page-link:hover { background: var(--bg-glass) !important; color: var(--accent) !important; } /* ============================================================ NAVBAR RTL تصحیحات نهایی ============================================================ */ [dir="rtl"] body .navbar { direction: rtl !important; } [dir="rtl"] body .navbar-brand { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] body .navbar-nav.mr-auto { margin-left: auto !important; margin-right: 0 !important; } [dir="rtl"] body .navbar-nav.ml-auto { margin-right: auto !important; margin-left: 0 !important; } [dir="rtl"] body .navbar .toolbar { direction: rtl; } [dir="rtl"] body .dropdown-menu { text-align: right !important; } [dir="rtl"] body .dropdown-menu-right { left: 0 !important; right: auto !important; } /* Dropdown arrow position */ [dir="rtl"] body .navbar-nav .dropdown-toggle::after { margin-right: 0.4em !important; margin-left: 0 !important; } /* ============================================================ BREADCRUMB RTL separator ============================================================ */ [dir="rtl"] body .breadcrumb-item + .breadcrumb-item { padding-right: 0.5rem !important; padding-left: 0 !important; } [dir="rtl"] body .breadcrumb-item + .breadcrumb-item::before { padding-right: 0 !important; padding-left: 0.5rem !important; content: '\\' !important; float: right !important; color: var(--text-faint) !important; } /* ============================================================ TOPBAR RTL — "Logged in as" widget ============================================================ */ [dir="rtl"] body .topbar .d-flex { flex-direction: row !important; } [dir="rtl"] body .topbar .ml-auto { margin-right: auto !important; margin-left: 0 !important; } [dir="rtl"] body .topbar .mr-auto { margin-left: auto !important; margin-right: 0 !important; } body .topbar .btn-active-client i { margin-left: 6px !important; margin-right: 0 !important; } /* ============================================================ CARD HEADER RTL ============================================================ */ [dir="rtl"] body .card-title i, [dir="rtl"] body .card-header i { margin-left: 8px !important; margin-right: 0 !important; } [dir="rtl"] body .card-minimise { float: left !important; } /* ============================================================ FORMS RTL — Label icons spacing ============================================================ */ [dir="rtl"] body label i, [dir="rtl"] body .form-control-label i { margin-left: 6px !important; margin-right: 0 !important; } [dir="rtl"] body .btn i { margin-left: 6px !important; margin-right: 0 !important; } [dir="rtl"] body .btn i:only-child { margin: 0 !important; } [dir="rtl"] body .btn i:last-child:not(:first-child) { margin-right: 6px !important; margin-left: 0 !important; } /* ============================================================ SIDEBAR RTL ============================================================ */ [dir="rtl"] body .sidebar-menu-item-icon-wrapper { margin-left: 10px !important; margin-right: 0 !important; } [dir="rtl"] body .sidebar-menu-item-badge { margin-right: auto !important; } /* ============================================================ ALERT RTL ============================================================ */ [dir="rtl"] body .alert .close { left: 14px !important; right: auto !important; margin: 0 !important; } [dir="rtl"] body .alert i { margin-left: 8px !important; margin-right: 0 !important; } /* ============================================================ MODAL RTL ============================================================ */ [dir="rtl"] body .modal-header .close { margin-right: auto !important; margin-left: 0 !important; } /* ============================================================ TABLE RTL — اعداد و آیکن‌ها ============================================================ */ [dir="rtl"] body .table { text-align: right; } [dir="rtl"] body .table th, [dir="rtl"] body .table td { text-align: right; } [dir="rtl"] body .table .text-center { text-align: center !important; } [dir="rtl"] body .table td .btn i, [dir="rtl"] body .table th i { margin-left: 4px !important; margin-right: 0 !important; } /* ============================================================ FOOTER RTL ============================================================ */ [dir="rtl"] body #footer .float-lg-right { float: left !important; } [dir="rtl"] body #footer .nav-link i { margin-left: 6px !important; margin-right: 0 !important; } /* ============================================================ DOMAIN SEARCH — RTL تصحیح ============================================================ */ [dir="rtl"] body .domain-checker .row.no-gutters { direction: rtl; } body .domain-checker input[type="text"] { direction: ltr; text-align: left; padding: 14px 18px !important; font-size: 15px !important; } body .domain-checker input[type="text"]::placeholder { text-align: right; font-family: 'IRANSans', sans-serif; direction: rtl; } /* ============================================================ CART BUTTON Position fix ============================================================ */ [dir="rtl"] body .navbar-nav.toolbar { margin-right: auto !important; margin-left: 0 !important; } [dir="rtl"] body .toolbar .nav-item.ml-3 { margin-right: 0.75rem !important; margin-left: 0 !important; } /* ============================================================ TICKETS / FAQ — RTL آیکن‌ها ============================================================ */ [dir="rtl"] body .ticket-number { margin-right: 0 !important; margin-left: 6px !important; } /* ============================================================ ACCOUNT NOTIFICATIONS ============================================================ */ body #accountNotifications { white-space: nowrap; } body #accountNotifications .badge { margin: 0 4px !important; vertical-align: middle; } /* ============================================================ PRODUCT STATUS CARD RTL ============================================================ */ [dir="rtl"] body .product-status .fa-stack i { margin: 0 !important; } [dir="rtl"] body .product-actions-wrapper .btn i { margin-left: 6px !important; margin-right: 0 !important; } /* ============================================================ PRODUCT GROUP CARDS — همیشه پایین دکمه باشه ============================================================ */ body .card-columns.home .card { display: flex !important; flex-direction: column !important; } body .card-columns.home .card .card-body { display: flex !important; flex-direction: column !important; flex: 1; } body .card-columns.home .card .card-body .btn { margin-top: auto; } /* ============================================================ اعداد فارسی - فونت بهتر برای اعداد ============================================================ */ body .aa-stat strong, body .tile .stat, body .aa-dash-percent { font-family: 'IRANSans', sans-serif !important; font-feature-settings: 'tnum'; } /* ============================================================ مودال انتخاب زبان - RTL ============================================================ */ [dir="rtl"] body .modal-localisation .close { left: 18px !important; right: auto !important; top: 14px !important; position: absolute !important; } body .modal-localisation .item-selector .item { padding: 14px 12px !important; font-weight: 600; } /* ============================================================ PALETTE LOCK INDICATOR — وقتی ادمین قفل کرده ============================================================ */ body .aa-palette-lock-info { position: fixed; bottom: 20px; left: 20px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 12px; padding: 8px 14px; font-size: 11px; color: var(--text-faint); z-index: 999; opacity: 0; pointer-events: none; transition: opacity .3s; } body .aa-palette-lock-info.show { opacity: 1; } /* ============================================================ اطمینان از اینکه h2 ها در aa-section-head وسط بمونن ============================================================ */ body .aa-section-head h2 { display: block; width: 100%; } /* ============================================================ لمس کاربری بهتر برای موبایل ============================================================ */ @media (max-width: 540px) { body .aa-section-title { font-size: 0.95rem !important; } body .aa-section-title i { width: 30px; height: 30px; font-size: 13px; } body .aa-register .card-body { padding: 18px !important; } body .prepend-icon { margin-bottom: 14px !important; } } /* ============================================================ پایان CSS آسمان آتش ============================================================ */ /* ============================================================ DOMAIN SEARCH SECTION — جدید ============================================================ */ body .aa-domain-section { padding-top: 30px !important; } body .domain-checker { background: var(--bg-card) !important; border: 1px solid var(--border-strong) !important; border-radius: 20px !important; padding: 28px 24px !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); margin-bottom: 30px; box-shadow: 0 20px 60px -20px rgba(0,0,0,0.3); position: relative; overflow: hidden; } body .domain-checker::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); } body .domain-checker h3 { font-size: 1.4rem !important; font-weight: 800 !important; margin-bottom: 8px !important; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-align: center; } body .domain-checker h3 i { -webkit-text-fill-color: var(--accent); color: var(--accent); margin-left: 8px; font-size: 1.2rem; } body .aa-domain-form { display: flex; gap: 10px; align-items: stretch; } @media (max-width: 640px) { body .aa-domain-form { flex-direction: column; } } body .aa-domain-input-wrap { flex: 1; position: relative; display: flex; } body .aa-domain-input-wrap input { flex: 1; padding: 14px 18px !important; padding-right: 44px !important; background: var(--bg-input) !important; border: 1.5px solid var(--border) !important; border-radius: 13px !important; color: var(--text) !important; font-size: 15px !important; font-weight: 500; width: 100%; height: 52px !important; transition: all .2s ease; } body .aa-domain-input-wrap input:focus { border-color: var(--accent) !important; background: var(--bg-elev) !important; box-shadow: 0 0 0 4px var(--grad-soft) !important; outline: 0 !important; } body .aa-domain-input-wrap input::placeholder { color: var(--text-faint) !important; font-family: 'IRANSans', sans-serif; } body .aa-domain-search-icon { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); color: var(--accent); font-size: 16px; z-index: 2; pointer-events: none; } [dir="ltr"] body .aa-domain-search-icon { right: auto; left: 16px; } [dir="ltr"] body .aa-domain-input-wrap input { padding-right: 18px !important; padding-left: 44px !important; } body .aa-domain-buttons { display: flex; gap: 8px; } body .aa-domain-buttons .btn { padding: 14px 22px !important; font-size: 14.5px !important; font-weight: 800 !important; border-radius: 13px !important; height: 52px !important; min-width: 100px; white-space: nowrap; } @media (max-width: 640px) { body .aa-domain-buttons { width: 100%; } body .aa-domain-buttons .btn { flex: 1; } } /* TLD pills */ body .aa-domain-tlds { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding-top: 6px; } body .aa-tld-pill { display: inline-block; padding: 4px 12px; background: var(--bg-glass); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--text-mute); font-weight: 700; font-family: 'Segoe UI', monospace; } body .aa-tld-more { margin-right: 6px; font-size: 12px; color: var(--accent) !important; font-weight: 700; text-decoration: none; } body .aa-tld-more:hover { color: var(--accent-2) !important; } body .aa-tld-more i { font-size: 10px; margin-right: 4px; } /* ============================================================ PRODUCT GROUP CARDS — بازطراحی برای WHMCS shop ============================================================ */ body .card-columns.home { column-count: 3; column-gap: 22px; margin-top: 30px; } @media (max-width: 992px) { body .card-columns.home { column-count: 2; } } @media (max-width: 576px) { body .card-columns.home { column-count: 1; } } body .card-columns.home .card { display: inline-block !important; width: 100%; margin-bottom: 22px; border-radius: 18px !important; overflow: hidden; position: relative; transition: all .35s cubic-bezier(0.34, 1.56, 0.64, 1); } body .card-columns.home .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad); z-index: 2; } body .card-columns.home .card:hover { transform: translateY(-6px); border-color: var(--border-strong) !important; box-shadow: 0 26px 60px -20px rgba(0,0,0,0.45) !important; } body .card-columns.home .card .card-body { padding: 32px 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } body .card-columns.home .pricing-card-title { font-size: 1.3rem !important; font-weight: 900 !important; margin-bottom: 12px !important; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; line-height: 1.3; } body .card-columns.home .card .text-muted { font-size: 13.5px !important; margin-bottom: 22px !important; color: var(--text-mute) !important; line-height: 1.7; flex-grow: 1; } body .card-columns.home .card .btn { margin-top: auto; width: 100% !important; padding: 12px 18px !important; font-weight: 800 !important; border-radius: 12px !important; } /* ============================================================ CART / ORDER PAGE — بهبود ظاهر ============================================================ */ body #order-standard_cart, body .cart-body, body #order-cart { font-family: 'IRANSans', sans-serif !important; } /* عنوان صفحه‌ی کارت "مرور و پرداخت نهایی" */ body #order-cart h1, body #order-cart .header-lined, body .cart-body h1, body .cart-body > h1, body .checkout-page h1 { font-size: 1.5rem !important; font-weight: 900 !important; margin: 0 0 24px 0 !important; padding-bottom: 18px !important; border-bottom: 1px solid var(--border) !important; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; position: relative; } body #order-cart h1::before { content: ''; position: absolute; bottom: -1px; right: 0; width: 60px; height: 3px; background: var(--grad); border-radius: 3px; } [dir="ltr"] body #order-cart h1::before { right: auto; left: 0; } /* جدول محصولات در کارت */ body .cart-body .table { border-radius: 14px; overflow: hidden; } body .cart-body .table thead { background: rgba(0,0,0,0.2); } body .cart-body .table thead th { font-weight: 800 !important; padding: 14px !important; border-bottom: 2px solid var(--border-strong) !important; } body .cart-body .empty-cart-msg, body .cart-empty { text-align: center; padding: 36px 16px !important; color: var(--text-mute); font-size: 14px; } /* "کارت خرید شما خالی است" — markup */ body .table tr td[colspan] { text-align: center; padding: 30px 14px !important; color: var(--text-mute); font-style: normal; font-size: 14px; } /* خلاصه سفارش */ body #orderSummary, body .order-summary, body .order-summary-card { background: var(--bg-card) !important; border: 1px solid var(--border-strong) !important; border-radius: 18px !important; padding: 22px !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: relative; overflow: hidden; } body #orderSummary::before, body .order-summary::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); } body #orderSummary h3, body .order-summary h3, body #orderSummary .panel-title { font-size: 1.1rem !important; font-weight: 800 !important; margin: 0 0 18px 0 !important; padding-bottom: 14px; border-bottom: 1px solid var(--border); color: var(--text) !important; } /* جمع کل خلاصه سفارش */ body #orderSummary .summary-total, body .order-summary .total, body #orderSummary .total-due-today { font-size: 1.4rem !important; font-weight: 900 !important; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; font-family: 'Segoe UI', Tahoma, sans-serif; } /* دکمه‌ی پرداخت نهایی */ body button[name="checkout"], body #btnCompleteOrder, body .checkout-btn, body a[href*="checkout"].btn-primary { background: var(--grad) !important; color: #fff !important; font-weight: 800 !important; padding: 12px 22px !important; border-radius: 12px !important; width: 100% !important; box-shadow: 0 14px 30px -10px var(--accent) !important; } /* لینک ادامه خرید */ body .cart-body a[href*="cart.php"], body .order-summary a { color: var(--accent) !important; font-weight: 700; } /* اعمال کوپن تخفیف box */ body .promotion-code-box, body .coupon-box, body #frmPromotion { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; padding: 18px !important; margin-top: 18px; } body .promotion-code-box .input-group input, body #frmPromotion input, body input[name="promocode"] { background: var(--bg-input) !important; border: 1.5px solid var(--border) !important; color: var(--text) !important; height: 46px; border-radius: 11px !important; } body #frmPromotion .btn, body .promotion-code-box .btn { height: 46px; padding: 0 22px !important; } /* عنوان "اعمال کوپن تخفیف" */ body .coupon-title, body #frmPromotion h4, body #frmPromotion .form-control-label { font-size: 0.95rem !important; font-weight: 800 !important; color: var(--text) !important; margin-bottom: 12px !important; display: block; } /* جدول گزینه‌های پرداخت در checkout */ body .payment-options, body .paymentmethods, body .payment-method { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 14px; padding: 16px; margin-bottom: 8px; transition: all .2s ease; } body .payment-options:hover, body .payment-method:hover { border-color: var(--border-strong) !important; } body .payment-options.active, body .payment-method.active { border-color: var(--accent) !important; background: var(--grad-soft) !important; } /* sidebar در صفحه‌ی cart (سمت راست با لینک‌های ثبت دامنه و انتقال و مشاهده کارت) */ body .cart-sidebar, body .order-sidebar { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 18px !important; overflow: hidden; } body .cart-sidebar .list-group-item.active, body .order-sidebar .list-group-item.active { background: var(--grad-soft) !important; border-right: 3px solid var(--accent) !important; color: var(--accent) !important; font-weight: 800; } /* ============================================================ PRODUCTS PAGE — لیست پلن‌ها در shop ============================================================ */ body .product-card, body .product-box, body .package-product, body .product-list .product { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 18px !important; padding: 26px 22px !important; margin-bottom: 22px; transition: all .35s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; } body .product-card::before, body .product-box::before, body .package-product::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); } body .product-card:hover, body .product-box:hover, body .package-product:hover { transform: translateY(-5px); border-color: var(--border-strong) !important; box-shadow: 0 24px 50px -20px rgba(0,0,0,0.4) !important; } body .product-card h3, body .product-box h3, body .package-product h3, body .product-list .product h3 { font-size: 1.2rem !important; font-weight: 900 !important; margin: 0 0 14px 0 !important; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; } body .product-price, body .product-card .price, body .price-display, body .pricing-box .price { font-size: 2.2rem !important; font-weight: 900 !important; color: var(--text) !important; margin: 16px 0 !important; line-height: 1.1; font-family: 'Segoe UI', Tahoma, sans-serif; } body .product-price .currency, body .product-price small { font-size: 1rem !important; color: var(--text-mute) !important; font-weight: 600; } body .product-price .billing-cycle, body .pricing-cycle { font-size: 0.85rem !important; color: var(--text-faint) !important; display: block; margin-top: 4px; } /* لیست ویژگی‌ها در محصول */ body .product-card ul, body .product-features, body .product-box ul, body .package-product ul { list-style: none; padding: 0; margin: 18px 0; text-align: right; } [dir="ltr"] body .product-card ul, [dir="ltr"] body .product-features { text-align: left; } body .product-card ul li, body .product-features li, body .product-box ul li, body .package-product ul li { padding: 8px 0; font-size: 13.5px; color: var(--text-mute); border-bottom: 1px dashed var(--border); position: relative; padding-right: 24px; } [dir="ltr"] body .product-card ul li, [dir="ltr"] body .product-features li { padding-right: 0; padding-left: 24px; } body .product-card ul li:last-child, body .product-features li:last-child { border-bottom: 0; } body .product-card ul li::before, body .product-features li::before { content: '✓'; position: absolute; right: 0; top: 8px; width: 18px; height: 18px; background: var(--grad); color: #fff; border-radius: 50%; font-size: 11px; display: flex; align-items: center; justify-content: center; font-weight: 800; } [dir="ltr"] body .product-card ul li::before, [dir="ltr"] body .product-features li::before { right: auto; left: 0; } /* دکمه‌ی سفارش پلن */ body .product-card .btn, body .product-box .btn, body .package-product .btn, body .pricing-box .btn { width: 100% !important; padding: 13px 18px !important; font-weight: 800 !important; border-radius: 12px !important; font-size: 14px !important; margin-top: 12px; } /* popular plan highlight */ body .product-card.popular, body .product-card.featured, body .package-product.featured { border-width: 2px !important; border-color: var(--accent) !important; box-shadow: 0 30px 60px -20px var(--accent) !important; transform: scale(1.02); } body .product-card.popular::after, body .product-card.featured::after { content: '★ پیشنهاد ویژه'; position: absolute; top: 14px; left: 14px; background: var(--grad); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; } [dir="rtl"] body .product-card.popular::after, [dir="rtl"] body .product-card.featured::after { left: auto; right: 14px; } /* ============================================================ PRODUCT GROUP TITLE/HEADER (در صفحه shop) ============================================================ */ body .product-group-header, body .group-header, body .product-group-title { text-align: center; margin: 30px 0; padding: 24px; background: var(--bg-glass); border-radius: 16px; border: 1px solid var(--border); } body .product-group-header h1, body .product-group-header h2 { font-size: 1.7rem !important; font-weight: 900 !important; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; margin: 0 0 8px 0 !important; } /* ============================================================ راست‌چینی Deep — اطمینان از اعمال در همه جا ============================================================ */ /* فونت یک‌دست روی همه‌چیز شامل اعداد */ body, body *, body .price, body .amount, body .total, body .currency, body strong, body b, body code:not(pre code), body input, body select, body textarea, body button, body h1, body h2, body h3, body h4, body h5, body h6, body .h1, body .h2, body .h3, body .h4, body .h5, body .h6, body table, body td, body th, body .navbar-nav .nav-link, body .dropdown-item, body .breadcrumb-item, body .badge { font-family: 'IRANSans', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif !important; } /* اعداد با figure number (tabular) */ body .price, body .amount, body .total, body [class*="price"], body [class*="amount"], body [class*="total"], body .stat, body .aa-stat strong, body .aa-dash-percent, body .invoice-amount, body td.amount, body .product-price, body .pricing-card-title { font-feature-settings: 'tnum' on, 'lnum' on !important; } /* اطمینان از راست‌چینی متن‌ها */ html[dir="rtl"] body { direction: rtl !important; text-align: right; } html[dir="rtl"] body h1, html[dir="rtl"] body h2, html[dir="rtl"] body h3, html[dir="rtl"] body h4, html[dir="rtl"] body p, html[dir="rtl"] body span:not(.grad-text):not([class*="badge"]):not([class*="status"]) { text-align: inherit; } /* عناوین مرکزی (h2 وسط) ولی متن خودش راست‌چین */ html[dir="rtl"] body .text-center h1, html[dir="rtl"] body .text-center h2, html[dir="rtl"] body .text-center h3 { text-align: center !important; } /* جدول‌ها همه راست‌چین */ html[dir="rtl"] body .table th, html[dir="rtl"] body .table td { text-align: right; } html[dir="rtl"] body .table th.text-center, html[dir="rtl"] body .table td.text-center { text-align: center !important; } html[dir="rtl"] body .table th.text-left, html[dir="rtl"] body .table td.text-left { text-align: left !important; } /* DataTables RTL تنظیمات نهایی */ html[dir="rtl"] body .dataTables_filter, html[dir="rtl"] body .dataTables_length { float: right !important; } html[dir="rtl"] body .dataTables_info, html[dir="rtl"] body .dataTables_paginate { float: left !important; } html[dir="rtl"] body .dataTables_wrapper .dataTables_filter input { margin-right: 0.5em !important; margin-left: 0 !important; } /* navbar مطمئن کن همه چی راست به چپه */ html[dir="rtl"] body .navbar { direction: rtl !important; } html[dir="rtl"] body .navbar-collapse { flex-direction: row !important; } html[dir="rtl"] body .navbar .navbar-nav.mr-auto, html[dir="rtl"] body .main-navbar-wrapper #nav.mr-auto { margin-right: 0 !important; margin-left: auto !important; order: 1; } html[dir="rtl"] body .navbar .navbar-nav.ml-auto, html[dir="rtl"] body .main-navbar-wrapper .navbar-nav.ml-auto { margin-left: 0 !important; margin-right: auto !important; order: 2; } /* ترتیب در topbar: notifications سمت چپ، user info سمت راست */ html[dir="rtl"] body .topbar > .container > .d-flex { flex-direction: row !important; direction: rtl; } /* logo سمت راست، cart کنارش، search در وسط */ html[dir="rtl"] body .navbar > .container { direction: rtl; } html[dir="rtl"] body .navbar-brand { order: 0; margin-right: 0 !important; margin-left: 1.5rem !important; } html[dir="rtl"] body .navbar form.form-inline { order: 1; } html[dir="rtl"] body .navbar .toolbar { order: 2; margin-right: auto !important; } /* dropdown‌های منو راست‌چین */ html[dir="rtl"] body .dropdown-menu { text-align: right !important; right: auto !important; } html[dir="rtl"] body .dropdown-menu-right { left: 0 !important; right: auto !important; } /* پیکان dropdown */ html[dir="rtl"] body .navbar-nav .dropdown-toggle::after, html[dir="rtl"] body .dropdown-toggle::after { margin-right: 0.4em !important; margin-left: 0 !important; } /* placeholder‌ها در input‌های فارسی */ html[dir="rtl"] body input::placeholder, html[dir="rtl"] body textarea::placeholder { text-align: right; direction: rtl; font-family: 'IRANSans', sans-serif !important; } html[dir="rtl"] body input[type="email"]::placeholder, html[dir="rtl"] body input[type="url"]::placeholder, html[dir="rtl"] body input[type="password"]::placeholder { direction: rtl; text-align: right; } /* فیلد جستجو در navbar - متن LTR ولی placeholder RTL */ html[dir="rtl"] body .navbar input[type="text"][name="search"], html[dir="rtl"] body .navbar input[type="search"] { text-align: right !important; direction: rtl !important; } /* breadcrumb RTL */ html[dir="rtl"] body .breadcrumb { flex-direction: row !important; direction: rtl !important; } /* alert‌ها راست‌چین */ html[dir="rtl"] body .alert { text-align: right !important; direction: rtl !important; } html[dir="rtl"] body .alert .close { margin: 0 !important; position: absolute; left: 14px; right: auto; top: 50%; transform: translateY(-50%); } html[dir="rtl"] body .alert { position: relative; padding-left: 40px !important; } /* card-title — راست‌چین */ html[dir="rtl"] body .card-title, html[dir="rtl"] body .card-header { text-align: right !important; direction: rtl !important; } /* card-minimise (آیکون collapse) */ html[dir="rtl"] body .card-minimise { float: left !important; margin-right: 0 !important; } /* فاصله بعد از آیکن در RTL */ html[dir="rtl"] body .card-title i, html[dir="rtl"] body .card-header i, html[dir="rtl"] body label i, html[dir="rtl"] body .nav-link i, html[dir="rtl"] body .dropdown-item i, html[dir="rtl"] body .alert i { margin-left: 8px !important; margin-right: 0 !important; } html[dir="rtl"] body .btn i:first-child:not(:only-child) { margin-left: 6px !important; margin-right: 0 !important; } html[dir="rtl"] body .btn i:last-child:not(:only-child):not(:first-child) { margin-right: 6px !important; margin-left: 0 !important; } /* پشتیبانی از متن انگلیسی داخل صفحه فارسی */ html[dir="rtl"] body code, html[dir="rtl"] body pre, html[dir="rtl"] body .latin-text, html[dir="rtl"] body [lang="en"] { direction: ltr; unicode-bidi: embed; } /* اطمینان از فونت IRANSans روی فیلدهای فارسی */ body input.form-control, body select.form-control, body textarea.form-control, body .field, body button.btn { font-family: 'IRANSans', sans-serif !important; } /* پنل نوتیفیکیشن (notification popover) - راست‌چین */ html[dir="rtl"] body .client-alerts li { text-align: right !important; } html[dir="rtl"] body .popover { text-align: right; direction: rtl; } /* جدول products در صفحه‌ی Order Form - راست‌چین */ html[dir="rtl"] body .package-list, html[dir="rtl"] body .package-product, html[dir="rtl"] body .product-pricing-cycle, html[dir="rtl"] body .product-features { direction: rtl !important; text-align: right !important; } /* tabs (sub-navigation) — راست‌چین */ html[dir="rtl"] body .nav-tabs { flex-direction: row !important; } /* صفحه‌ی فاکتورها — رنگ status pill بهتر */ body .status-paid, body .label.paid { background: rgba(46, 213, 115, 0.18) !important; color: #2ed573 !important; border-color: rgba(46, 213, 115, 0.4) !important; } body .status-unpaid, body .label.unpaid { background: rgba(255, 186, 42, 0.18) !important; color: var(--accent-3) !important; border-color: rgba(255, 186, 42, 0.4) !important; } /* استایل دکمه "خالی کردن کارت" در order summary */ body button.empty-cart-btn, body a[href*="emptyCart"], body button[onclick*="emptyCart"] { background: transparent !important; border: 1.5px solid #ff4757 !important; color: #ff4757 !important; } body button.empty-cart-btn:hover { background: #ff4757 !important; color: #fff !important; } /* ============================================================ نوار خرید بالا — اطمینان از layout صحیح در RTL ترتیب: لوگو(راست) | جستجو(وسط) | سبد و منو(چپ) ============================================================ */ /* لوگو همیشه راست */ html[dir="rtl"] body .navbar > .container, html[dir="rtl"] body .navbar > .container-fluid { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; } /* سبد خرید کنار منو سمت چپ */ html[dir="rtl"] body .navbar .toolbar { order: 99; margin-right: 0 !important; margin-left: 0 !important; } /* وقتی لاگین نیست — auth-btns سمت چپ (یا راست بسته به design) */ html[dir="rtl"] body .navbar .auth-btns { margin-right: auto !important; margin-left: 0 !important; } /* "ناحیه کاربری" (User dropdown) سمت چپ — منوی secondary navbar */ html[dir="rtl"] body .main-navbar-wrapper .navbar-nav.ml-auto { margin-left: 0 !important; margin-right: auto !important; } /* "اسلام، علی" (welcome text) — راست‌چین */ html[dir="rtl"] body .topbar .btn-active-client { text-align: right !important; direction: rtl !important; } html[dir="rtl"] body .topbar .btn-active-client i { margin-left: 6px !important; margin-right: 0 !important; } /* "وارد شده به عنوان" — کنار اسم */ html[dir="rtl"] body .topbar .input-group-text { border-top-right-radius: 11px !important; border-bottom-right-radius: 11px !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } html[dir="rtl"] body .topbar .btn-active-client { border-top-left-radius: 11px !important; border-bottom-left-radius: 11px !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* ============================================================ اصلاح Cart Button و Logo positioning ============================================================ */ body .navbar-brand { display: inline-flex !important; align-items: center; } body .cart-btn { position: relative; } /* ============================================================ صفحه لیست فاکتورها (clientareainvoices) ============================================================ */ body .invoice-list-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 18px !important; padding: 18px !important; backdrop-filter: blur(20px); } /* جدول فاکتورها */ body #tableInvoicesList, body #tableQuotesList, body #tableTickets, body #tableServicesList, body #tableDomainsList { background: transparent !important; border-collapse: separate !important; border-spacing: 0 6px !important; } body #tableInvoicesList tbody tr, body #tableServicesList tbody tr, body #tableDomainsList tbody tr, body #tableTickets tbody tr { background: var(--bg-glass) !important; border-radius: 12px; transition: all .2s ease; } body #tableInvoicesList tbody tr:hover, body #tableServicesList tbody tr:hover, body #tableDomainsList tbody tr:hover, body #tableTickets tbody tr:hover { background: var(--grad-soft) !important; transform: translateX(-3px); } [dir="rtl"] body #tableInvoicesList tbody tr:hover, [dir="rtl"] body #tableServicesList tbody tr:hover, [dir="rtl"] body #tableDomainsList tbody tr:hover, [dir="rtl"] body #tableTickets tbody tr:hover { transform: translateX(3px); } body #tableInvoicesList tbody td, body #tableServicesList tbody td, body #tableDomainsList tbody td, body #tableTickets tbody td { border-color: var(--border) !important; vertical-align: middle !important; padding: 16px 14px !important; } /* "پرداخت همه" دکمه در sidebar */ body a[href*="masspay"] { background: linear-gradient(135deg, #2ed573, #00d2c6) !important; color: #fff !important; font-weight: 800 !important; padding: 12px 18px !important; border-radius: 12px !important; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 12px 25px -8px #2ed573; transition: all .25s ease; } body a[href*="masspay"]:hover { transform: translateY(-2px); color: #fff !important; box-shadow: 0 16px 35px -8px #2ed573 !important; } /* "افزودن وجه" دکمه */ body a[href*="addfunds"], body a[href*="action=addfunds"] { background: var(--bg-glass) !important; border: 1.5px solid var(--border-strong) !important; color: var(--text) !important; padding: 12px 18px !important; border-radius: 12px !important; font-weight: 700 !important; display: inline-flex; align-items: center; gap: 8px; } body a[href*="addfunds"]:hover { background: var(--grad) !important; border-color: transparent !important; color: #fff !important; } /* ============================================================ صفحه ارسال تیکت ============================================================ */ body .ticket-form .form-group { margin-bottom: 18px; } body .ticket-form label, body .submitticket-form label { font-weight: 700; font-size: 13.5px; color: var(--text) !important; margin-bottom: 8px !important; } body #frmSubmitTicket .form-control, body .submitticket-form .form-control { background: var(--bg-input) !important; border: 1.5px solid var(--border) !important; color: var(--text) !important; border-radius: 11px !important; padding: 12px 16px !important; } body #frmSubmitTicket textarea, body .submitticket-form textarea { min-height: 160px !important; } /* ============================================================ صفحه تیکت ارسال (انتخاب دپارتمان) ============================================================ */ body .department-card, body .deparment-list .card { background: var(--bg-card) !important; border: 1.5px solid var(--border) !important; border-radius: 16px !important; padding: 24px 18px !important; text-align: center !important; margin-bottom: 18px; transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; } body .department-card:hover, body .deparment-list .card:hover { transform: translateY(-5px); border-color: var(--accent) !important; box-shadow: 0 20px 40px -15px var(--accent) !important; } body .department-card .fa-stack i, body .deparment-list .card .fa-stack i { color: var(--accent) !important; } /* ============================================================ صفحه‌ی مشاهده تیکت (viewticket) ============================================================ */ body .ticket-reply, body .ticket-message, body .ticket-staff-reply { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 16px !important; padding: 22px !important; margin-bottom: 18px; } body .ticket-staff-reply, body .ticket-reply.staff { border-right: 4px solid var(--accent) !important; background: var(--grad-soft) !important; } [dir="ltr"] body .ticket-staff-reply, [dir="ltr"] body .ticket-reply.staff { border-right: 0 !important; border-left: 4px solid var(--accent) !important; } body .reply-author { font-weight: 800; font-size: 14px; color: var(--text); margin-bottom: 6px; } body .reply-date { font-size: 11.5px; color: var(--text-mute); font-weight: 600; } /* ============================================================ صفحه knowledgebase article ============================================================ */ body .kb-article { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 18px !important; padding: 30px !important; line-height: 2; } body .kb-article h1, body .kb-article h2 { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; margin-bottom: 18px !important; } body .kb-article p { margin-bottom: 14px; color: var(--text); line-height: 1.9; } /* ============================================================ صفحات config محصول و dropdown ها ============================================================ */ body select.form-control, body .custom-select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff7a3a'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: left 12px center !important; background-size: 14px !important; padding-left: 36px !important; cursor: pointer; } [dir="ltr"] body select.form-control { background-position: right 12px center !important; padding-right: 36px !important; padding-left: 16px !important; } /* ============================================================ اطمینان نهایی - فونت IRANSans روی همه چی ============================================================ */ body button, body input, body select, body textarea, body .btn, body .form-control, body .field, body td, body th, body small, body code:not(pre code) { font-family: 'IRANSans', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif !important; } /* قیمت‌ها و اعداد یک‌دست */ body .price, body .amount, body .currency, body .total-amount, body .stat, body .aa-inv-amount, body .aa-inv-total, body .product-price, body .pricing-card-title, body td.amount, body td.numeric { font-family: 'IRANSans', sans-serif !important; font-feature-settings: 'tnum' on, 'lnum' on !important; direction: ltr; unicode-bidi: plaintext; display: inline-block; } /* ============================================================ 🚨 FORCE FontAwesome Solid - رفع مشکل آیکن‌های Pro در نسخه Free نسخه FA Free فقط solid (fas) و brand (fab) رو داره far (regular) و fad (duotone) فقط در Pro هست پس همه‌ی آیکن‌ها رو force می‌کنیم به solid ============================================================ */ /* تبدیل far و fad به fas - با حفظ آیکن خود */ i.far, i.fad, i.fa-regular, i.fa-duotone { font-family: 'Font Awesome 5 Free', 'FontAwesome' !important; font-weight: 900 !important; /* solid weight */ } /* اطمینان از solid برای fas */ i.fas, i.fa, i.fa-solid { font-family: 'Font Awesome 5 Free', 'FontAwesome' !important; font-weight: 900 !important; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; display: inline-block; text-rendering: auto; } /* برای fab (brands) */ i.fab, i.fa-brands { font-family: 'Font Awesome 5 Brands', 'FontAwesome' !important; font-weight: 400 !important; } /* جلوگیری از نمایش کاراکتر عجیب اگر FA لود نشه */ i[class*="fa-"]:empty { width: 1em; height: 1em; display: inline-block; vertical-align: middle; } /* ============================================================ 🚨 رفع مشکلات نسخه ۱.۰.۶ - پس‌زمینه سفید جدول‌ها در تم تیره - جابجایی Sidebar به سمت راست (مثل سایت‌های ایرانی) - یکدست‌سازی استایل status pills - انیمیشن‌های روان‌تر ============================================================ */ /* ============================================================ 1️⃣ رفع پس‌زمینه سفید جدول‌ها (table-container, table-wrapper) ============================================================ */ body .table-container, body .table-list-container, body div.dataTables_wrapper, body .table-responsive, body div[class*="table-wrapper"], body .clientarea-tables { background: var(--bg-card) !important; background-color: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 18px !important; padding: 0 !important; overflow: hidden; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--text) !important; } /* جدول‌های DataTables - پس‌زمینه شفاف */ body table.dataTable, body table.table, body #tableInvoicesList, body #tableQuotesList, body #tableServicesList, body #tableDomainsList, body #tableTickets, body #tableEmails, body #tableContacts, body table[id^="table"] { background: transparent !important; background-color: transparent !important; border: 0 !important; margin: 0 !important; color: var(--text) !important; width: 100% !important; } /* thead با گرادیان نرم */ body table.dataTable thead, body table.table thead, body #tableInvoicesList thead, body #tableServicesList thead, body #tableDomainsList thead, body #tableTickets thead, body table[id^="table"] thead { background: rgba(0, 0, 0, 0.25) !important; } body table.dataTable thead th, body table.table thead th, body #tableInvoicesList thead th, body #tableServicesList thead th, body #tableDomainsList thead th, body #tableTickets thead th, body table[id^="table"] thead th { background: transparent !important; color: var(--text) !important; border: 0 !important; border-bottom: 2px solid var(--border-strong) !important; padding: 16px 14px !important; font-weight: 800 !important; font-size: 13px !important; text-align: right !important; font-family: 'IRANSans', sans-serif !important; letter-spacing: 0; } [dir="ltr"] body table.dataTable thead th, [dir="ltr"] body table.table thead th { text-align: left !important; } body table.dataTable thead th.text-center, body table.table thead th.text-center { text-align: center !important; } /* tbody - سطرها با hover */ body table.dataTable tbody, body table.table tbody, body table[id^="table"] tbody { background: transparent !important; } body table.dataTable tbody tr, body table.table tbody tr, body #tableInvoicesList tbody tr, body #tableServicesList tbody tr, body #tableDomainsList tbody tr, body #tableTickets tbody tr, body table[id^="table"] tbody tr { background: transparent !important; background-color: transparent !important; transition: all 0.25s ease; } body table.dataTable tbody tr:hover, body table.table tbody tr:hover, body #tableInvoicesList tbody tr:hover, body #tableServicesList tbody tr:hover, body #tableDomainsList tbody tr:hover, body #tableTickets tbody tr:hover, body table[id^="table"] tbody tr:hover { background: var(--bg-glass) !important; background-color: var(--bg-glass) !important; } /* حذف striping (zebra) که در bg سفید مشکل ایجاد می‌کرد */ body table.dataTable.stripe tbody tr.odd, body table.dataTable.display tbody tr.odd, body table.table-striped tbody tr:nth-of-type(odd) { background: transparent !important; background-color: transparent !important; } body table.dataTable tbody td, body table.table tbody td, body #tableInvoicesList tbody td, body #tableServicesList tbody td, body #tableDomainsList tbody td, body #tableTickets tbody td, body table[id^="table"] tbody td { background: transparent !important; background-color: transparent !important; color: var(--text) !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; padding: 16px 14px !important; font-size: 13.5px !important; vertical-align: middle !important; font-family: 'IRANSans', sans-serif !important; } body table.dataTable tbody tr:last-child td, body table.table tbody tr:last-child td { border-bottom: 0 !important; } /* "نمایش X تا Y از مجموع Z مقدار" و سایر متن‌های DataTables */ body .dataTables_info, body .dataTables_length, body .dataTables_filter, body .dataTables_length label, body .dataTables_filter label { color: var(--text-mute) !important; font-size: 13px; } body .dataTables_filter input, body .dataTables_length select { background: var(--bg-input) !important; border: 1.5px solid var(--border) !important; color: var(--text) !important; border-radius: 9px !important; padding: 6px 12px !important; } /* pagination */ body .dataTables_paginate .paginate_button { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 8px !important; margin: 0 2px !important; padding: 6px 14px !important; } body .dataTables_paginate .paginate_button:hover { background: var(--bg-glass) !important; border-color: var(--accent) !important; color: var(--accent) !important; } body .dataTables_paginate .paginate_button.current, body .dataTables_paginate .paginate_button.current:hover { background: var(--grad) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 6px 16px -6px var(--accent); } /* search input بالای جدول */ body input[type="search"] { background: var(--bg-input) !important; border: 1.5px solid var(--border) !important; color: var(--text) !important; border-radius: 11px !important; padding: 9px 14px !important; } /* ============================================================ 2️⃣ Sidebar — همیشه سمت راست در RTL (مثل سایت ایرانی) ============================================================ */ /* در WHMCS، sidebar معمولاً .col-md-3 / .col-lg-3 با کلاس sidebar هست */ html[dir="rtl"] body .row > .col-md-3.sidebar, html[dir="rtl"] body .row > .col-lg-3.sidebar, html[dir="rtl"] body .row > div.sidebar, html[dir="rtl"] body .row > aside.sidebar, html[dir="rtl"] body #main-body .row > .col-md-3:has(.card-sidebar), html[dir="rtl"] body #main-body .row > .col-md-3:first-child { order: -1 !important; } /* جایگزین جامع: استفاده از flex-direction در ردیف اصلی */ html[dir="rtl"] body #main-body > .container > .row, html[dir="rtl"] body section#main-body > .container > .row { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; } /* اول sidebar بیاد (که در DOM بعد از main-content قرار داره) */ html[dir="rtl"] body #main-body .row > .col-md-3, html[dir="rtl"] body #main-body .row > .col-lg-3 { order: -1 !important; } /* فقط برای صفحه کلاینت‌اریا (نه orderform) */ html[dir="rtl"] body.clientarea #main-body .row, html[dir="rtl"] body[class*="invoices"] #main-body .row, html[dir="rtl"] body[class*="services"] #main-body .row, html[dir="rtl"] body[class*="domains"] #main-body .row, html[dir="rtl"] body[class*="tickets"] #main-body .row { flex-direction: row !important; } /* sidebar در صفحه‌ی فرم سفارش (atashnew_cart) هم */ html[dir="rtl"] body .cart-sidebar, html[dir="rtl"] body #sidebar-categories { order: -1; } /* ============================================================ 3️⃣ بهبود Status Pills (فعال، معلق، لغو شده، ...) ============================================================ */ body .label, body span.label, body td span[class*="status"], body td .label-success, body td .label-warning, body td .label-danger, body td .label-default { display: inline-block !important; padding: 5px 14px !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 800 !important; font-family: 'IRANSans', sans-serif !important; border: 1px solid !important; letter-spacing: 0; } /* فعال */ body .label-success, body .status-active, body span.status.active, body td .label.label-success { background: rgba(46, 213, 115, 0.18) !important; color: #2ed573 !important; border-color: rgba(46, 213, 115, 0.4) !important; } /* معلق / در انتظار / پرداخت نشده */ body .label-warning, body .label-info, body .status-pending, body .status-unpaid, body .status-suspended, body span.status.pending, body span.status.unpaid { background: rgba(255, 186, 42, 0.18) !important; color: #ffba2a !important; border-color: rgba(255, 186, 42, 0.4) !important; } /* لغو شده / ناموفق / خطا */ body .label-danger, body .status-cancelled, body .status-terminated, body .status-failed, body .status-fraud, body span.status.cancelled, body span.status.failed { background: rgba(255, 71, 87, 0.18) !important; color: #ff4757 !important; border-color: rgba(255, 71, 87, 0.4) !important; } /* پایان یافته / غیرفعال */ body .label-default, body .status-expired, body .status-completed, body span.status.expired { background: rgba(150, 150, 150, 0.18) !important; color: #999999 !important; border-color: rgba(150, 150, 150, 0.35) !important; } /* ============================================================ 4️⃣ Sidebar Cards - یکدست در همه تم‌ها ============================================================ */ body .card-sidebar, body .panel-sidebar, body aside.card, body .sidebar-panel { background: var(--bg-card) !important; background-color: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 18px !important; margin-bottom: 18px !important; overflow: hidden; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } body .card-sidebar .card-header, body .panel-sidebar .panel-heading, body aside.card .card-header { background: rgba(0, 0, 0, 0.15) !important; border-bottom: 1px solid var(--border) !important; padding: 14px 18px !important; cursor: pointer; user-select: none; display: flex !important; align-items: center !important; justify-content: space-between !important; } body .card-sidebar .card-title, body .panel-sidebar .panel-title { color: var(--text) !important; font-size: 0.95rem !important; font-weight: 800 !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: 8px; } body .card-sidebar .card-title i, body .panel-sidebar .panel-title i { color: var(--accent) !important; font-size: 14px; } body .card-sidebar .card-body, body .card-sidebar .panel-body, body .card-sidebar > div:not(.card-header) { background: transparent !important; color: var(--text) !important; padding: 0 !important; } body .card-sidebar .list-group { background: transparent !important; border: 0 !important; margin: 0 !important; } body .card-sidebar .list-group-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; color: var(--text) !important; padding: 12px 18px !important; font-size: 13.5px; display: flex !important; align-items: center !important; justify-content: space-between !important; transition: all 0.2s ease; } body .card-sidebar .list-group-item:last-child { border-bottom: 0 !important; } body .card-sidebar .list-group-item:hover { background: var(--bg-glass) !important; color: var(--accent) !important; padding-right: 22px !important; } [dir="ltr"] body .card-sidebar .list-group-item:hover { padding-right: 18px !important; padding-left: 22px !important; } body .card-sidebar .list-group-item.active { background: var(--grad-soft) !important; color: var(--accent) !important; font-weight: 700; border-right: 3px solid var(--accent) !important; } [dir="ltr"] body .card-sidebar .list-group-item.active { border-right: 0 !important; border-left: 3px solid var(--accent) !important; } body .card-sidebar .list-group-item i { color: var(--accent) !important; width: 18px; text-align: center; margin-left: 8px; } [dir="ltr"] body .card-sidebar .list-group-item i { margin-left: 0; margin-right: 8px; } body .card-sidebar .list-group-item .badge { background: var(--grad-soft) !important; color: var(--accent) !important; font-weight: 800 !important; font-size: 11px !important; padding: 3px 9px !important; border-radius: 999px !important; } body .card-sidebar .list-group-item.active .badge { background: var(--grad) !important; color: #fff !important; } /* "سررسید صورت‌حساب‌ها" card با گرادیان آماری */ body .card-sidebar:has(.btn-success), body .card-sidebar.stats, body .card-sidebar.due-invoices { position: relative; overflow: hidden; } body .card-sidebar:has(.btn-success)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); z-index: 1; } /* دکمه پرداخت همه (داخل sidebar) */ body .card-sidebar .btn-success, body .card-sidebar a[href*="masspay"] { background: linear-gradient(135deg, #2ed573, #00b894) !important; border: 0 !important; color: #fff !important; font-weight: 800 !important; padding: 11px 18px !important; border-radius: 11px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px; margin-top: 10px; box-shadow: 0 10px 24px -8px #2ed573; transition: all 0.25s ease; } body .card-sidebar .btn-success:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px #2ed573; color: #fff !important; } /* دکمه افزودن وجه */ body .card-sidebar .btn-default, body .card-sidebar a[href*="addfunds"] { background: var(--bg-glass) !important; border: 1.5px solid var(--border-strong) !important; color: var(--text) !important; font-weight: 700 !important; padding: 10px 18px !important; border-radius: 11px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px; margin-top: 8px; } body .card-sidebar .btn-default:hover { background: var(--bg-elev) !important; border-color: var(--accent) !important; color: var(--accent) !important; } /* محتوای داخلی sidebar (مثل اطلاعات شما) */ body .card-sidebar .panel-body, body .card-sidebar > .card-body { padding: 16px 18px !important; color: var(--text); font-size: 13px; line-height: 1.85; } body .card-sidebar address { color: var(--text) !important; font-style: normal; margin: 0; font-size: 13px; line-height: 1.9; } body .card-sidebar address strong { color: var(--text); } /* ============================================================ 5️⃣ Card-area (محتوای اصلی) - تم‌رنگ‌بندی یکنواخت ============================================================ */ body .main-content, body .clientarea-content, body section#main-body, body #main-body > .container { background: transparent !important; } body .panel, body .panel-default, body .panel-body, body .panel-info, body .panel-warning { background: var(--bg-card) !important; background-color: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 16px !important; color: var(--text) !important; } body .panel-heading { background: rgba(0, 0, 0, 0.15) !important; border-bottom: 1px solid var(--border) !important; color: var(--text) !important; padding: 14px 20px !important; font-weight: 800; } body .panel-body { background: transparent !important; color: var(--text) !important; } /* اطلاعات شما - "ali emami" "arizona" و ... */ body .card-sidebar .client-info, body .card-sidebar address, body .panel-body address { color: var(--text) !important; } body .card-sidebar .client-info strong, body .card-sidebar .client-info b { color: var(--text) !important; font-weight: 800; } body .card-sidebar .client-info small, body .card-sidebar .client-info .text-muted { color: var(--text-mute) !important; font-style: italic; display: block; margin-top: 2px; margin-bottom: 4px; } /* ============================================================ 6️⃣ بهبود کلی - لینک‌ها در جدول‌ها ============================================================ */ body table.dataTable tbody td a, body table.table tbody td a, body table[id^="table"] tbody td a { color: var(--accent) !important; font-weight: 700; text-decoration: none !important; transition: color 0.2s ease; } body table.dataTable tbody td a:hover, body table.table tbody td a:hover { color: var(--accent-2) !important; text-decoration: none !important; } /* نام محصول/سرویس در ستون اول */ body td:first-child strong, body td.product-name strong, body .product-name { color: var(--text) !important; font-weight: 800; } /* قیمت در جدول‌ها */ body td:has(.price), body td.amount, body td.price { font-family: 'IRANSans', sans-serif !important; font-weight: 700; color: var(--text) !important; font-feature-settings: 'tnum'; } /* IP زیر نام سرویس */ body .domain-name, body .service-domain, body td small { color: var(--text-mute) !important; font-size: 12px; display: block; margin-top: 4px; font-family: 'IRANSans', sans-serif !important; direction: ltr; unicode-bidi: plaintext; } /* ============================================================ 7️⃣ آیکن قفل/خطر در سمت چپ نام سرویس ============================================================ */ body td .fa-lock, body td .fa-exclamation-circle, body td .fa-check-circle, body td .fa-times-circle { font-size: 20px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--bg-glass); border: 1px solid var(--border); } body td .fa-lock { color: var(--text-mute); } body td .fa-times-circle { color: #ff4757; background: rgba(255, 71, 87, 0.1); border-color: rgba(255, 71, 87, 0.3); } body td .fa-check-circle { color: #2ed573; background: rgba(46, 213, 115, 0.1); border-color: rgba(46, 213, 115, 0.3); } /* ============================================================ 8️⃣ "نمایش X تا Y از مجموع Z مقدار" - بالای جدول ============================================================ */ body .dataTables_info, body div.dataTables_info { padding: 14px 16px !important; color: var(--text-mute) !important; font-size: 13px; font-weight: 600; } /* search box راست بالای جدول */ body .dataTables_filter { padding: 14px 16px !important; } /* ============================================================ 9️⃣ یکدست‌سازی پس‌زمینه body در همه پالت‌ها ============================================================ */ body, html { background: var(--bg) !important; background-color: var(--bg) !important; color: var(--text) !important; } /* اطمینان از اینکه هیچ بخش whiteرنگی باقی نمونده */ body > div, body > section, body section.section, body main, body .clientarea, body .clientarea-content, body > .container, body > .container-fluid { background: transparent !important; } /* در صورتی که Bootstrap از pre-defined .bg-white استفاده کرده */ body .bg-white, body .bg-light { background: var(--bg-card) !important; background-color: var(--bg-card) !important; color: var(--text) !important; } /* ============================================================ 🔟 انیمیشن‌های بهبود (fade-in برای جدول‌ها و کارت‌ها) ============================================================ */ @keyframes aaFadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } body .table-container, body .card, body .card-sidebar, body .panel, body table.dataTable { animation: aaFadeUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; } body .card:nth-child(2), body .card-sidebar:nth-child(2) { animation-delay: 0.05s; } body .card:nth-child(3), body .card-sidebar:nth-child(3) { animation-delay: 0.1s; } @keyframes aaShimmerRow { from { background-position: -100% 0; } to { background-position: 100% 0; } } body table.dataTable tbody tr:hover { background-image: linear-gradient(90deg, transparent 0%, var(--grad-soft) 50%, transparent 100%) !important; background-size: 200% 100% !important; animation: aaShimmerRow 1.5s ease-in-out; } /* ============================================================ 1️⃣1️⃣ اطمینان از فونت IRANSans بر روی محتوای داخلی ============================================================ */ body .clientarea-content, body .clientarea-content *, body table, body table *, body .card, body .card * { font-family: 'IRANSans', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif !important; } /* اعداد همچنان tnum برای ترازبندی */ body .price, body .amount, body .currency, body td.numeric, body td.amount, body .stat strong, body .aa-stat strong, body .aa-inv-amount { font-family: 'IRANSans', sans-serif !important; font-feature-settings: 'tnum' on, 'lnum' on !important; } /* ============================================================ 1️⃣2️⃣ اعداد قیمت و تاریخ - LTR در سلول راست‌چین ============================================================ */ body td .price, body td .amount, body td.amount, body td .date, body td.date, body td .ip-address { direction: ltr; unicode-bidi: plaintext; display: inline-block; } /* "تومان ۱۸۰,۰۰۰" - فاصله مناسب */ body td .price strong + small, body td .amount strong + small { margin-right: 4px; font-weight: 600; color: var(--text-mute); } /* ============================================================ 1️⃣3️⃣ Mobile - sidebar بالای محتوا در موبایل ============================================================ */ @media (max-width: 768px) { html[dir="rtl"] body #main-body .row > .col-md-3 { order: 0 !important; margin-bottom: 16px; } body table.dataTable thead th, body table.dataTable tbody td { padding: 10px 8px !important; font-size: 12px !important; } body .card-sidebar { margin-bottom: 14px !important; } } /* ============================================================ 1️⃣4️⃣ پایان CSS — نسخه 1.0.6 ============================================================ */ /* ============================================================ 🚨 RTL FIXES — نسخه ۱.۰.۷ راست‌چینی قوی برای همه‌ی sidebar ها و layoutها مشکل: حتی با order: -1 هنوز sidebar چپ افتاده راه حل: استفاده از flex-direction: row-reverse برای RTL ============================================================ */ /* sidebar در همه‌ی صفحات clientarea به سمت راست */ html[dir="rtl"] body #main-body > .container > .row, html[dir="rtl"] body #main-body > .container-fluid > .row, html[dir="rtl"] body section#main-body > .container > .row { flex-direction: row-reverse !important; } /* در صفحات orderform هم همینطور */ html[dir="rtl"] body #order-standard_cart > .row, html[dir="rtl"] body #order-standard_cart > .container > .row, html[dir="rtl"] body .cart-body > .row, html[dir="rtl"] body .checkout > .row { flex-direction: row-reverse !important; } /* در صفحات اصلی WHMCS که از col-md-3 و col-md-9 استفاده می‌کنن */ html[dir="rtl"] body .row { --default-direction: rtl; } /* قفل کردن sidebar در سمت راست با specific selectors */ html[dir="rtl"] body div.col-md-3:has(.card-sidebar), html[dir="rtl"] body div.col-lg-3:has(.card-sidebar) { order: -1 !important; } /* در WHMCS، sidebar معمولاً کلاس‌های مختلف داره */ html[dir="rtl"] body aside.card-sidebar, html[dir="rtl"] body .col-md-3 > .card-sidebar:first-child, html[dir="rtl"] body .sidebar-container, html[dir="rtl"] body .col-md-3.sidebar-col { order: -1; } /* محتوای اصلی همیشه چپ */ html[dir="rtl"] body .col-md-9:has(+ .col-md-3), html[dir="rtl"] body .col-md-9.main-content { order: 0; } /* ============ Bootstrap 4 RTL row reverse ============ */ html[dir="rtl"] body .row > [class*="col-"]:first-child { /* اول در DOM = راست در RTL */ } /* اگه main content اولاً در DOM هست و sidebar دوم، با row-reverse برعکس کن */ html[dir="rtl"] body .row.has-sidebar, html[dir="rtl"] body section#main-body .row { flex-direction: row-reverse !important; } /* در موبایل دوباره طبیعی شه */ @media (max-width: 768px) { html[dir="rtl"] body #main-body > .container > .row, html[dir="rtl"] body section#main-body > .container > .row { flex-direction: column !important; } } /* ============ Header منوها در RTL ============ */ html[dir="rtl"] body .main-navbar, html[dir="rtl"] body .main-navbar-wrapper, html[dir="rtl"] body .navbar.main-navbar { direction: rtl !important; } /* منوی اصلی (سرویس‌ها، دامنه‌ها، مالی، پشتیبانی) سمت راست */ html[dir="rtl"] body .main-navbar .navbar-nav:not(.ml-auto):not(.toolbar) { margin-right: 0 !important; margin-left: auto !important; } /* "ناحیه کاربری" در سمت چپ (آخر منو در RTL) */ html[dir="rtl"] body .main-navbar .navbar-nav.ml-auto, html[dir="rtl"] body .main-navbar .navbar-nav.user-menu { margin-left: 0 !important; margin-right: auto !important; } /* لوگو همیشه سمت راست */ html[dir="rtl"] body .navbar-brand { order: -10; margin-right: 0 !important; margin-left: 1rem !important; } /* سبد خرید + اعلانات سمت چپ */ html[dir="rtl"] body .navbar .toolbar, html[dir="rtl"] body .navbar-nav.toolbar { order: 10; margin-right: auto !important; margin-left: 0 !important; } /* جستجو در وسط */ html[dir="rtl"] body .navbar form.form-inline, html[dir="rtl"] body .navbar .search-form { margin-right: auto; margin-left: auto; } /* ============ پس‌زمینه‌ی کاملاً تیره برای جدول‌ها ============ */ html[dir="rtl"] body .table-container, html[dir="rtl"] body .table-list-container, html[dir="rtl"] body div.dataTables_wrapper { background: var(--bg-card) !important; border-radius: 18px !important; padding: 6px 0 !important; } /* اصلاح طول حروف table-responsive */ html[dir="rtl"] body .table-responsive { background: var(--bg-card) !important; border-radius: 18px; overflow: hidden; } /* ============ تثبیت رنگ‌بندی در همه‌ی پالت‌ها ============ */ /* اطمینان از اینکه هیچ پس‌زمینه سفید پنهان نمونده */ body div:not([class*="badge"]):not([class*="alert"]):not(.bg-canvas):not(.bg-grid), body section, body main { /* پیش‌فرض transparent */ } /* جدول‌های DataTables: حتماً پس‌زمینه از تم بگیرن */ body .dataTables_wrapper > div, body .table-responsive > table, body .table > tbody > tr, body .table > thead > tr { background-color: transparent !important; } /* اگه inline style سفیدی باقی بود، override کن */ body [style*="background: white"], body [style*="background:#fff"], body [style*="background-color: white"], body [style*="background-color:#fff"] { background: var(--bg-card) !important; background-color: var(--bg-card) !important; } /* در تم‌های روشن (cocoa, neon)، رنگ متن جدول‌ها رو تنظیم کن */ [data-palette="cocoa"] body table tbody td, [data-palette="neon"] body table tbody td { color: var(--text) !important; } /* ============ فاصله بهتر برای آیکن‌ها در RTL ============ */ html[dir="rtl"] body i[class*="fa-"]:not(:only-child):first-child { margin-left: 6px !important; margin-right: 0 !important; } html[dir="rtl"] body i[class*="fa-"]:not(:only-child):last-child { margin-right: 6px !important; margin-left: 0 !important; } /* ============================================================ 🎯 v1.0.9 - تضمین RTL حتی اگه dir attribute ست نشده باشه ============================================================ */ /* اگه dir تنظیم نشده، بر اساس lang فارسی فعال کن */ html[lang="fa"], html[lang^="fa-"], html[lang="persian"], html[lang="farsi"], html[lang="ar"], html[lang^="ar-"] { direction: rtl; } html[lang="fa"] body, html[lang^="fa-"] body, html[lang="persian"] body, html[lang="farsi"] body { direction: rtl; text-align: right; } /* همان قواعد RTL ولی با lang به جای dir */ html[lang^="fa"] body #main-body > .container > .row, html[lang^="fa"] body #main-body > .container-fluid > .row, html[lang^="fa"] body section#main-body > .container > .row { flex-direction: row-reverse !important; } html[lang^="fa"] body #order-standard_cart > .row, html[lang^="fa"] body #order-standard_cart > .container > .row, html[lang^="fa"] body .cart-body > .row, html[lang^="fa"] body .checkout > .row { flex-direction: row-reverse !important; } /* در موبایل دوباره طبیعی شه */ @media (max-width: 768px) { html[lang^="fa"] body #main-body > .container > .row, html[lang^="fa"] body section#main-body > .container > .row { flex-direction: column !important; } } /* === متن‌ها در همه جا راست‌چین === */ html[lang^="fa"] body, html[lang^="fa"] body p, html[lang^="fa"] body h1, html[lang^="fa"] body h2, html[lang^="fa"] body h3, html[lang^="fa"] body h4, html[lang^="fa"] body h5, html[lang^="fa"] body h6, html[lang^="fa"] body div, html[lang^="fa"] body span, html[lang^="fa"] body label, html[lang^="fa"] body td, html[lang^="fa"] body th { text-align: right; } html[lang^="fa"] body input[type="email"], html[lang^="fa"] body input[type="tel"], html[lang^="fa"] body input[type="url"], html[lang^="fa"] body input[type="number"], html[lang^="fa"] body input[dir="ltr"] { text-align: right; direction: ltr; } /* === رفع چپ‌چینی text در WHMCS default === */ html[lang^="fa"] body .text-left { text-align: right !important; } html[lang^="fa"] body .text-right { text-align: left !important; } html[lang^="fa"] body .float-left { float: right !important; } html[lang^="fa"] body .float-right { float: left !important; } html[lang^="fa"] body .pull-left { float: right !important; } html[lang^="fa"] body .pull-right { float: left !important; } html[lang^="fa"] body .ml-auto, html[lang^="fa"] body .mr-auto-fa-rev { margin-right: auto !important; margin-left: 0 !important; } html[lang^="fa"] body .mr-auto, html[lang^="fa"] body .ml-auto-fa-rev { margin-left: auto !important; margin-right: 0 !important; } /* breadcrumb راست‌چین */ html[lang^="fa"] body .breadcrumb { direction: rtl; text-align: right; } html[lang^="fa"] body .breadcrumb-item + .breadcrumb-item::before { content: "/"; padding: 0 8px; } /* dropdown ها سمت راست باز شن */ html[lang^="fa"] body .dropdown-menu { right: 0; left: auto; text-align: right; } /* navbar links — سمت راست */ html[lang^="fa"] body .navbar-nav.mr-auto { margin-right: 0 !important; margin-left: auto !important; } html[lang^="fa"] body .navbar-nav.ml-auto { margin-left: 0 !important; margin-right: auto !important; } /* ============================================================ 🎯 v1.0.9 — هدر RTL ساده و قطعی ============================================================ */ /* تنها مشکلی که هست: ml-auto و mr-auto در RTL باید معکوس بشن چون Bootstrap از flexbox استفاده می‌کنه که جهت رو نمی‌فهمه */ /* در navbar اصلی: - navbar-brand (لوگو) → سمت راست در RTL - form.form-inline.ml-auto (سرچ) → باید margin-right: auto بگیره - ul.navbar-nav.toolbar (سبد + همبرگر) → سمت چپ */ html[dir="rtl"] body .navbar.navbar-light, html[lang^="fa"] body .navbar.navbar-light { flex-direction: row !important; } html[dir="rtl"] body .navbar.navbar-light > .container, html[lang^="fa"] body .navbar.navbar-light > .container { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: wrap; } /* navbar-brand اول و راست */ html[dir="rtl"] body .navbar.navbar-light .navbar-brand, html[lang^="fa"] body .navbar.navbar-light .navbar-brand { margin-right: 0 !important; margin-left: 1rem !important; order: 1 !important; } /* form.ml-auto یعنی margin-left:auto که در LTR فرم رو سمت راست می‌بره در RTL باید برعکس بشه: margin-right:auto که فرم رو سمت چپ ببره ولی ما می‌خواهیم فرم وسط/بعد از لوگو باشه، پس margin-right: auto */ html[dir="rtl"] body .navbar.navbar-light form.form-inline.ml-auto, html[lang^="fa"] body .navbar.navbar-light form.form-inline.ml-auto { margin-left: 0 !important; margin-right: 1rem !important; order: 2 !important; flex: 1 1 auto; max-width: 520px; } /* toolbar (سبد) سمت چپ */ html[dir="rtl"] body .navbar.navbar-light .navbar-nav.toolbar, html[lang^="fa"] body .navbar.navbar-light .navbar-nav.toolbar { order: 3 !important; margin-right: auto !important; margin-left: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; } /* در main-navbar-wrapper: - ul.navbar-nav.mr-auto → primary nav (سرویس‌ها، دامنه‌ها...) → سمت راست - ul.navbar-nav.ml-auto → secondary nav (ناحیه کاربری، حساب) → سمت چپ */ html[dir="rtl"] body .main-navbar-wrapper .navbar-collapse, html[lang^="fa"] body .main-navbar-wrapper .navbar-collapse { display: flex !important; flex-direction: row !important; flex-wrap: wrap; } /* primary nav سمت راست */ html[dir="rtl"] body .main-navbar-wrapper ul.navbar-nav.mr-auto, html[lang^="fa"] body .main-navbar-wrapper ul.navbar-nav.mr-auto { margin-right: 0 !important; margin-left: auto !important; order: 1 !important; flex-direction: row !important; } /* secondary nav سمت چپ */ html[dir="rtl"] body .main-navbar-wrapper ul.navbar-nav.ml-auto, html[lang^="fa"] body .main-navbar-wrapper ul.navbar-nav.ml-auto { margin-left: 0 !important; margin-right: auto !important; order: 2 !important; flex-direction: row !important; } /* === رفع navbar items داخل لیست‌ها === */ html[dir="rtl"] body .navbar-nav, html[lang^="fa"] body .navbar-nav { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: wrap; } html[dir="rtl"] body .navbar-nav .nav-item, html[lang^="fa"] body .navbar-nav .nav-item { list-style: none; } html[dir="rtl"] body .navbar-nav .nav-link, html[lang^="fa"] body .navbar-nav .nav-link { padding: 12px 16px !important; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; } /* dropdown arrow در RTL */ html[dir="rtl"] body .dropdown-toggle::after, html[lang^="fa"] body .dropdown-toggle::after { margin-right: 6px !important; margin-left: 0 !important; } /* === topbar در RTL === topbar داره: - div.mr-auto → اعلانات (بایستی سمت راست بمونه) - div.ml-auto → کاربر فعال ساختار:
mr-auto و ml-auto در LTR: mr-auto سمت چپ، ml-auto سمت راست ولی این topbar در عکس قبلی درست بود (اعلانات راست، کاربر چپ) چون mr-auto در flexbox یعنی margin-right: auto که المنت رو سمت چپ هل می‌ده پس در RTL باید برعکس: ml-auto سمت چپ، mr-auto سمت راست ولی topbar در آخرین عکس‌ها مشکل نداشت، پس تغییری اعمال نمی‌کنیم */ /* === ریسپانسیو موبایل: لوگو در ابتدا، toolbar بعد، menu collapse === */ @media (max-width: 1199px) { html[dir="rtl"] body .main-navbar-wrapper .navbar-collapse, html[lang^="fa"] body .main-navbar-wrapper .navbar-collapse { flex-direction: column !important; width: 100%; } html[dir="rtl"] body .main-navbar-wrapper ul.navbar-nav.mr-auto, html[lang^="fa"] body .main-navbar-wrapper ul.navbar-nav.mr-auto, html[dir="rtl"] body .main-navbar-wrapper ul.navbar-nav.ml-auto, html[lang^="fa"] body .main-navbar-wrapper ul.navbar-nav.ml-auto { flex-direction: column !important; width: 100%; margin: 0 !important; } } /* === تنظیم نهایی متن "اعضا" که چپ افتاده === */ html[lang^="fa"] body .master-breadcrumb, html[lang^="fa"] body nav.master-breadcrumb { text-align: right !important; direction: rtl !important; } html[lang^="fa"] body .master-breadcrumb .container { text-align: right !important; } /* ============================================================ 🎨 v1.0.9b — هدر زیبا با اطلاعات کاربر + موجودی ============================================================ */ body .aa-header-v2 { position: relative; z-index: 100; background: transparent; margin-bottom: 0; } /* === topbar v2 === */ body .aa-topbar-v2 { background: rgba(0, 0, 0, 0.25); border-bottom: 1px solid var(--border); padding: 8px 0; font-size: 12.5px; } body .aa-topbar-row { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap; gap: 10px; direction: rtl; } body .aa-topbar-right, body .aa-topbar-left { display: flex; align-items: center; gap: 6px; } body .aa-tb-btn { background: var(--bg-glass); border: 1px solid var(--border); color: var(--text-mute) !important; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: all 0.2s; position: relative; } body .aa-tb-btn:hover { background: var(--grad-soft); border-color: var(--accent); color: var(--accent) !important; } body .aa-tb-btn i { font-size: 12px; } body .aa-tb-badge { background: linear-gradient(135deg, #ff4757, #ff6b81); color: #fff; font-size: 10px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; } body .aa-tb-warning { background: rgba(245, 158, 11, 0.12) !important; border-color: rgba(245, 158, 11, 0.35) !important; color: #fbbf24 !important; } body .aa-tb-warning:hover { background: rgba(245, 158, 11, 0.25) !important; color: #fbbf24 !important; } body .aa-tb-danger { background: rgba(255, 71, 87, 0.12) !important; border-color: rgba(255, 71, 87, 0.35) !important; color: #ff6b81 !important; } body .aa-tb-danger:hover { background: rgba(255, 71, 87, 0.25) !important; color: #ff6b81 !important; } /* === mainbar v2 === */ body .aa-mainbar-v2 { background: var(--bg); border-bottom: 1px solid var(--border); padding: 14px 0; } body .aa-mainbar-row { display: flex !important; align-items: center !important; gap: 16px; flex-wrap: wrap; direction: rtl; } /* لوگو */ body .aa-logo-v2 { display: flex; align-items: center; text-decoration: none !important; flex-shrink: 0; } body .aa-logo-v2 img { max-height: 56px; width: auto; display: block; transition: transform 0.3s ease; } body .aa-logo-v2:hover img { transform: scale(1.05); } /* کارت کاربر */ body .aa-user-card-v2 { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--bg-card), var(--bg-elev)); border: 1px solid var(--border-strong); border-radius: 16px; padding: 10px 16px; flex: 1 1 auto; max-width: 340px; min-width: 0; position: relative; overflow: hidden; } body .aa-user-card-v2::before { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 80px; background: radial-gradient(circle, var(--grad-soft), transparent 65%); transform: translate(30%, -30%); pointer-events: none; } body .aa-user-avatar { width: 44px; height: 44px; background: var(--grad); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; flex-shrink: 0; box-shadow: 0 8px 20px -6px var(--accent); position: relative; z-index: 1; } body .aa-user-info { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; } body .aa-user-name { font-weight: 900; color: var(--text); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body .aa-user-email { font-size: 11px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-feature-settings: 'tnum'; margin-top: 2px; } /* کارت موجودی */ body .aa-balance-card-v2 { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, rgba(46, 213, 115, 0.12), rgba(255, 122, 58, 0.08)); border: 1.5px solid rgba(46, 213, 115, 0.3); border-radius: 16px; padding: 10px 16px; position: relative; overflow: hidden; } body .aa-balance-card-v2::before { content: ''; position: absolute; top: 0; left: 0; width: 80px; height: 80px; background: radial-gradient(circle, rgba(46, 213, 115, 0.2), transparent 65%); transform: translate(-30%, -30%); pointer-events: none; } body .aa-balance-label { font-size: 11px; color: var(--text-mute); font-weight: 700; display: flex; align-items: center; gap: 5px; position: relative; z-index: 1; white-space: nowrap; } body .aa-balance-label i { color: #2ed573; font-size: 13px; } body .aa-balance-value { font-weight: 900; font-size: 14px; color: #2ed573; font-family: 'IRANSans', sans-serif; font-feature-settings: 'tnum'; white-space: nowrap; position: relative; z-index: 1; } body .aa-balance-add { background: linear-gradient(135deg, #2ed573, #1dc463); color: #fff !important; width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none !important; flex-shrink: 0; font-size: 12px; box-shadow: 0 6px 16px -4px rgba(46, 213, 115, 0.5); transition: all 0.2s; position: relative; z-index: 1; } body .aa-balance-add:hover { transform: scale(1.1) rotate(90deg); color: #fff !important; } /* مهمان (نه لاگین) */ body .aa-guest-actions { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; } body .aa-guest-btn { background: var(--bg-glass); border: 1.5px solid var(--border-strong); color: var(--text) !important; padding: 10px 20px; border-radius: 12px; font-weight: 800; font-size: 13px; text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; } body .aa-guest-btn:hover { background: var(--bg-elev); border-color: var(--accent); color: var(--accent) !important; } body .aa-guest-btn-primary { background: var(--grad) !important; border: 0 !important; color: #fff !important; box-shadow: 0 10px 24px -8px var(--accent); } body .aa-guest-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px var(--accent); color: #fff !important; } /* اکشن‌ها (سبد + همبرگر) */ body .aa-actions-v2 { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } body .aa-cart-v2 { background: var(--grad); color: #fff !important; width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none !important; font-size: 18px; box-shadow: 0 12px 28px -10px var(--accent); position: relative; transition: all 0.25s; } body .aa-cart-v2:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -8px var(--accent); color: #fff !important; } body .aa-cart-badge { position: absolute; top: -6px; left: -6px; background: #ff4757; color: #fff; font-size: 11px; font-weight: 800; min-width: 22px; height: 22px; border-radius: 50%; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--bg); box-shadow: 0 4px 10px -2px rgba(255, 71, 87, 0.5); } body .aa-burger-v2 { background: var(--bg-card); border: 1.5px solid var(--border-strong); color: var(--text); width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; transition: all 0.2s; } body .aa-burger-v2:hover { background: var(--grad-soft); border-color: var(--accent); color: var(--accent); } /* === نوار منوی ناوبری === */ body .aa-navbar-v2 { background: var(--bg-elev); border-bottom: 1px solid var(--border); padding: 0; position: relative; z-index: 50; } body .aa-navbar-collapse-v2 { display: flex !important; flex-direction: row !important; align-items: stretch !important; flex-wrap: wrap; width: 100%; direction: rtl; } body .aa-nav-primary-v2, body .aa-nav-secondary-v2 { display: flex !important; flex-direction: row !important; align-items: center !important; margin: 0 !important; padding: 0 !important; list-style: none; flex-wrap: wrap; gap: 2px; } body .aa-nav-primary-v2 { margin-right: 0 !important; margin-left: auto !important; } body .aa-nav-secondary-v2 { margin-left: 0 !important; margin-right: auto !important; } body .aa-navbar-collapse-v2 .nav-item { list-style: none; } body .aa-navbar-collapse-v2 .nav-link { color: var(--text) !important; padding: 14px 16px !important; font-weight: 700 !important; font-size: 13.5px !important; background: transparent !important; position: relative; transition: color 0.2s ease; display: inline-flex !important; align-items: center !important; gap: 5px; text-decoration: none !important; } body .aa-navbar-collapse-v2 .nav-link::after { content: ''; position: absolute; bottom: 0; right: 50%; width: 0; height: 3px; background: var(--grad); border-radius: 3px 3px 0 0; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); transform: translateX(50%); } body .aa-navbar-collapse-v2 .nav-link:hover { color: var(--accent) !important; } body .aa-navbar-collapse-v2 .nav-link:hover::after, body .aa-navbar-collapse-v2 .nav-link.active::after { width: calc(100% - 28px); } body .aa-navbar-collapse-v2 .dropdown-toggle::after { margin-right: 6px !important; margin-left: 0 !important; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; vertical-align: 2px; opacity: 0.6; } /* === ریسپانسیو === */ @media (max-width: 1199px) { body .aa-user-card-v2, body .aa-balance-card-v2 { flex: 1 1 100%; max-width: none; order: 10; margin-top: 8px; } body .aa-balance-card-v2 { flex: 0 1 auto; max-width: 280px; } body .aa-navbar-collapse-v2 { flex-direction: column !important; } body .aa-nav-primary-v2, body .aa-nav-secondary-v2 { flex-direction: column !important; align-items: stretch !important; width: 100%; margin: 0 !important; } body .aa-nav-primary-v2 .nav-link, body .aa-nav-secondary-v2 .nav-link { width: 100%; border-bottom: 1px solid var(--border); } } @media (max-width: 768px) { body .aa-user-card-v2 { padding: 8px 12px; gap: 8px; } body .aa-user-avatar { width: 36px; height: 36px; font-size: 14px; } body .aa-user-name { font-size: 13px; } body .aa-user-email { font-size: 10px; } body .aa-balance-card-v2 { padding: 8px 12px; gap: 8px; } body .aa-balance-value { font-size: 13px; } body .aa-cart-v2, body .aa-burger-v2 { width: 44px; height: 44px; font-size: 16px; } body .aa-logo-v2 img { max-height: 42px; } body .aa-topbar-right span, body .aa-topbar-left span { display: none !important; } } @media (max-width: 540px) { body .aa-balance-card-v2 { flex-wrap: wrap; } body .aa-balance-label { font-size: 10px; } } /* ============================================================ 📌 clientarea — کارت‌های "فاکتورهای سررسیده" و "تیکت‌های اخیر" باید زیر tiles بیان و در RTL درست چیده شن ============================================================ */ /* در داشبورد client area، بخش پایین tiles دارای کارت‌های متعدده که با row > col-md-6 یا col-lg-6 ساخته شدن باید در RTL سمت راست بمونن (نه چپ) */ html[dir="rtl"] body #main-body .client-home-cards, html[lang^="fa"] body #main-body .client-home-cards { direction: rtl !important; } html[dir="rtl"] body .client-home-cards > .row, html[lang^="fa"] body .client-home-cards > .row { flex-direction: row-reverse !important; } /* row کارت‌ها زیر tiles */ html[dir="rtl"] body #main-body section .row, html[lang^="fa"] body #main-body section .row { flex-direction: row-reverse !important; } /* === تنظیم نهایی sidebar در سمت راست به طور قاطع === */ html[dir="rtl"] body #main-body > .container > .row, html[lang^="fa"] body #main-body > .container > .row { display: flex !important; flex-direction: row-reverse !important; flex-wrap: wrap !important; } /* === حذف باکس سفید در صفحه تمدید دامنه === */ body .table-renewable, body .table.renewable, body table.renewable-domains, body .renewals-table, body div[class*="renew"] > table, body div[class*="renew"] > div { background: var(--bg-card) !important; background-color: var(--bg-card) !important; } body .table-renewable tr, body table.renewable-domains tr, body div[class*="renew"] tr, body .table.table-renewable tbody tr { background: var(--bg-card) !important; background-color: var(--bg-card) !important; color: var(--text) !important; } body .table-renewable td, body table.renewable-domains td, body div[class*="renew"] td, body .table.table-renewable tbody td { background: transparent !important; background-color: transparent !important; color: var(--text) !important; border-color: var(--border) !important; padding: 14px 16px !important; } /* اگر row های دامنه به صورت div هست (نه table) */ body .domain-renewal-row, body .renewal-item-row { background: var(--bg-card) !important; background-color: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; padding: 16px 20px !important; margin-bottom: 10px !important; color: var(--text) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap; gap: 12px; } /* "دوره قابل تمدید گذشته" badge — رنگی */ body .badge-warning, body .label-warning, body span.expired, body .table-renewable .badge, body div[class*="renew"] .badge { background: rgba(245, 158, 11, 0.18) !important; background-color: rgba(245, 158, 11, 0.18) !important; color: #fbbf24 !important; border: 1px solid rgba(245, 158, 11, 0.4) !important; padding: 6px 14px !important; border-radius: 999px !important; font-weight: 800 !important; } /* === صفحه انتقال دامنه — رفع کپچا === */ body form#submitFrm .row, body form[action*="cart"] .row, body form[action*="domain"] .captcha-row, body .domain-transfer-form .captcha { direction: rtl; } body form .form-group:has(#inputCaptcha), body .captcha-container, body div.captcha-input { display: flex !important; flex-direction: column !important; align-items: center !important; background: var(--bg-glass) !important; border: 1.5px dashed var(--border-strong) !important; border-radius: 16px !important; padding: 20px !important; margin: 20px 0 !important; max-width: 480px; margin-left: auto !important; margin-right: auto !important; } body .captcha-container > p, body div.captcha-input > p { font-size: 13px; color: var(--text-mute) !important; text-align: center !important; margin-bottom: 12px; width: 100%; } /* === رفع متن "Create new Support Request" انگلیسی === */ /* این مربوط به language file هست، در template نمی‌شه فیکس کرد */ /* فقط استایل بهتری بدیم */ body h1.support-title, body h1:contains("Support"), body .submit-ticket-title { background: var(--grad) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; font-weight: 900 !important; margin-bottom: 16px !important; } /* ============================================================ 🎨 v1.0.9c — هدر منظم + رفع آیکن‌های گم + دکمه scroll-to-pay فقط بهبود — بدون آسیب به بقیه چیزها ============================================================ */ /* === HEADER بازچینی نهایی === ساختار: [لوگو] [کارت کاربر] [کارت موجودی] [فلش/سبد] چینش: justify-content space-between با gap منظم */ body .aa-mainbar-v2 .aa-mainbar-row { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 14px; flex-wrap: nowrap; direction: rtl; } @media (max-width: 1199px) { body .aa-mainbar-v2 .aa-mainbar-row { flex-wrap: wrap !important; } } /* لوگو - ثابت سمت راست */ body .aa-logo-v2 { flex: 0 0 auto; order: 1; } /* کارت کاربر - flexible */ body .aa-user-card-v2 { flex: 1 1 auto !important; max-width: 320px !important; min-width: 0; order: 2; cursor: pointer; text-decoration: none !important; transition: all 0.25s ease; } body .aa-user-card-v2:hover { border-color: var(--accent) !important; transform: translateY(-1px); box-shadow: 0 10px 25px -8px var(--accent); } body .aa-user-card-v2 .aa-user-avatar img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; display: block; } body .aa-user-card-v2 .aa-user-name { color: var(--text) !important; } body .aa-user-card-v2 .aa-user-email { color: var(--text-mute) !important; } /* کارت موجودی - بازچینی */ body .aa-balance-card-v2 { flex: 0 0 auto !important; display: flex !important; flex-direction: row-reverse !important; align-items: center !important; gap: 10px !important; padding: 8px 14px !important; background: linear-gradient(135deg, rgba(46, 213, 115, 0.1), rgba(255, 122, 58, 0.06)) !important; border: 1.5px solid rgba(46, 213, 115, 0.3) !important; border-radius: 14px !important; order: 3; text-decoration: none !important; transition: all 0.25s ease; min-width: 0; } body .aa-balance-card-v2:hover { border-color: rgba(46, 213, 115, 0.6) !important; transform: translateY(-1px); box-shadow: 0 10px 25px -8px rgba(46, 213, 115, 0.4); } body .aa-balance-card-v2 .aa-balance-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #2ed573, #1dc463); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff !important; font-size: 15px; flex-shrink: 0; box-shadow: 0 6px 16px -4px rgba(46, 213, 115, 0.5); } body .aa-balance-card-v2 .aa-balance-info { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; } body .aa-balance-card-v2 .aa-balance-label { font-size: 10.5px !important; color: var(--text-mute) !important; font-weight: 700; white-space: nowrap; line-height: 1.2; display: block !important; } body .aa-balance-card-v2 .aa-balance-label i { display: none !important; /* پاک می‌کنیم چون icon در aa-balance-icon هست */ } body .aa-balance-card-v2 .aa-balance-value { font-size: 13.5px !important; font-weight: 900 !important; color: #2ed573 !important; white-space: nowrap; line-height: 1.4; font-family: 'IRANSans', sans-serif !important; font-feature-settings: 'tnum'; margin-top: 2px; } body .aa-balance-card-v2 .aa-balance-add { width: 28px; height: 28px; background: rgba(46, 213, 115, 0.2); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #2ed573 !important; flex-shrink: 0; font-size: 11px; transition: all 0.25s ease; border: 1px solid rgba(46, 213, 115, 0.3); } body .aa-balance-card-v2:hover .aa-balance-add { background: #2ed573; color: #fff !important; transform: rotate(90deg); } /* سبد و همبرگر */ body .aa-actions-v2 { flex: 0 0 auto; order: 4; display: flex; align-items: center; gap: 8px; } /* === جلوگیری از stretching در صفحه‌های کوچیک‌تر === */ @media (max-width: 991px) { body .aa-mainbar-v2 .aa-mainbar-row { flex-wrap: wrap !important; gap: 10px; } body .aa-logo-v2 { flex: 0 0 auto; order: 1; } body .aa-actions-v2 { order: 2; margin-right: auto; } body .aa-user-card-v2 { flex: 1 1 100% !important; max-width: none !important; order: 3; } body .aa-balance-card-v2 { flex: 1 1 100% !important; order: 4; justify-content: space-between; } } /* ============================================================ 🎯 رفع آیکن‌های F0 11 و F1 11 در badges این آیکن‌ها از کلاس‌های قدیمی FA 4 استفاده می‌کنن: (بدون fas/far) اینها رو همگی به FA 5 Solid mapping می‌کنیم ============================================================ */ /* Force ALL tags with any fa class to FA 5 Solid */ body i.fa:not(.fab):not(.fas):not(.far):not(.fal):not(.fad), body span.fa:not(.fab):not(.fas):not(.far):not(.fal):not(.fad), body i[class^="fa-"]:not(.fab):not(.fas):not(.far):not(.fal):not(.fad), body i[class*=" fa-"]:not(.fab):not(.fas):not(.far):not(.fal):not(.fad) { font-family: "Font Awesome 5 Free", "FontAwesome" !important; font-weight: 900 !important; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; } /* FA 4 → FA 5 unicode mapping برای آیکن‌های پرکاربردی که در نسخه ۴ و ۵ متفاوتن */ body i.fa-circle-o::before, body i.fa.fa-circle-o::before { content: "\f111" !important; font-weight: 400 !important; } body i.fa-check-circle-o::before, body i.fa.fa-check-circle-o::before { content: "\f058" !important; } body i.fa-times-circle-o::before, body i.fa.fa-times-circle-o::before { content: "\f057" !important; } body i.fa-arrow-circle-o-right::before { content: "\f0a9" !important; } body i.fa-arrow-circle-o-left::before { content: "\f0a8" !important; } body i.fa-info-circle::before, body i.fa.fa-info-circle::before { content: "\f05a" !important; } body i.fa-square-o::before { content: "\f0c8" !important; font-weight: 400 !important; } body i.fa-star-o::before { content: "\f005" !important; font-weight: 400 !important; } body i.fa-heart-o::before { content: "\f004" !important; font-weight: 400 !important; } body i.fa-pencil::before, body i.fa.fa-pencil::before { content: "\f303" !important; } body i.fa-trash-o::before, body i.fa.fa-trash-o::before { content: "\f2ed" !important; } body i.fa-cog::before, body i.fa.fa-cog::before { content: "\f013" !important; } body i.fa-gear::before { content: "\f013" !important; } body i.fa-list::before, body i.fa.fa-list::before { content: "\f03a" !important; } body i.fa-tachometer::before { content: "\f3fd" !important; } body i.fa-life-saver::before, body i.fa-support::before { content: "\f1cd" !important; } body i.fa-power-off::before { content: "\f011" !important; } body i.fa-sign-out::before { content: "\f2f5" !important; } body i.fa-sign-in::before { content: "\f2f6" !important; } /* ============================================================ 🎯 منوها — انیمیشن زیبا و حرفه‌ای ============================================================ */ body .aa-nav-primary-v2, body .aa-nav-secondary-v2 { gap: 0 !important; } body .aa-navbar-collapse-v2 .nav-item { margin: 0; position: relative; } body .aa-navbar-collapse-v2 .nav-item > .nav-link { padding: 16px 18px !important; font-weight: 700 !important; position: relative; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; background: transparent !important; border-radius: 0 !important; color: var(--text) !important; } /* underline animation - تمیز و قشنگ */ body .aa-navbar-collapse-v2 .nav-link::after { content: '' !important; position: absolute !important; bottom: 0 !important; right: 50% !important; width: 0 !important; height: 3px !important; background: var(--grad) !important; border-radius: 3px 3px 0 0 !important; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; transform: translateX(50%) !important; box-shadow: 0 0 12px var(--accent); } body .aa-navbar-collapse-v2 .nav-link:hover::after, body .aa-navbar-collapse-v2 .nav-link.active::after, body .aa-navbar-collapse-v2 .nav-link[aria-expanded="true"]::after { width: calc(100% - 32px) !important; } body .aa-navbar-collapse-v2 .nav-link:hover { color: var(--accent) !important; } /* آیکن دار شدن منو (اگر در link آیکن هست) */ body .aa-navbar-collapse-v2 .nav-link i.fa, body .aa-navbar-collapse-v2 .nav-link i.fas, body .aa-navbar-collapse-v2 .nav-link i.far { margin-left: 6px !important; margin-right: 0 !important; font-size: 13px; opacity: 0.9; transition: transform 0.3s ease; } body .aa-navbar-collapse-v2 .nav-link:hover i { transform: scale(1.15); } /* dropdown caret rtl */ html[dir="rtl"] body .aa-navbar-collapse-v2 .dropdown-toggle::after, html[lang^="fa"] body .aa-navbar-collapse-v2 .dropdown-toggle::after { margin-right: 6px !important; margin-left: 0 !important; vertical-align: 2px; opacity: 0.5; transition: transform 0.25s ease; } body .aa-navbar-collapse-v2 .dropdown.show .dropdown-toggle::after { transform: rotate(180deg); } /* dropdown menu پنل زیبا */ body .aa-navbar-collapse-v2 .dropdown-menu { background: var(--bg-card) !important; border: 1.5px solid var(--border-strong) !important; border-radius: 14px !important; box-shadow: 0 24px 60px -10px rgba(0,0,0,0.5) !important; padding: 8px !important; margin-top: 10px !important; min-width: 220px !important; animation: aaDropIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: top center; } @keyframes aaDropIn { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } body .aa-navbar-collapse-v2 .dropdown-menu .dropdown-item { color: var(--text) !important; padding: 10px 14px !important; border-radius: 10px !important; font-weight: 600 !important; font-size: 13px !important; transition: all 0.2s ease; background: transparent !important; display: flex !important; align-items: center !important; gap: 8px; text-align: right !important; } body .aa-navbar-collapse-v2 .dropdown-menu .dropdown-item:hover { background: var(--grad-soft) !important; color: var(--accent) !important; padding-right: 18px !important; } body .aa-navbar-collapse-v2 .dropdown-menu .dropdown-item i { font-size: 13px; width: 18px; text-align: center; opacity: 0.75; } body .aa-navbar-collapse-v2 .dropdown-menu .dropdown-item:hover i { opacity: 1; color: var(--accent); } /* ============================================================ 🎯 v1.0.9d — هدر کوچیک‌تر، خلوت‌تر، حرفه‌ای‌تر ============================================================ */ /* SVG icons base */ body .aa-svg, body .aa-mainbar-v2 svg, body .aa-topbar-v2 svg { display: inline-block; vertical-align: middle; flex-shrink: 0; } /* === topbar کوچیک‌تر === */ body .aa-topbar-v2 { padding: 6px 0 !important; } body .aa-tb-btn { padding: 5px 10px !important; font-size: 11.5px !important; border-radius: 8px !important; gap: 5px !important; } body .aa-tb-btn svg { width: 13px; height: 13px; opacity: 0.85; } body .aa-tb-badge { min-width: 16px !important; height: 16px !important; font-size: 9.5px !important; padding: 0 4px !important; } /* === mainbar - اندازه‌های کوچک‌تر === */ body .aa-mainbar-v2 { padding: 10px 0 !important; } body .aa-mainbar-v2 .aa-mainbar-row { gap: 10px !important; } /* لوگو کوچیک‌تر */ body .aa-logo-v2 img { max-height: 44px !important; } /* کارت کاربر - کوچیک‌تر و فشرده */ body .aa-user-card-v2 { padding: 6px 12px !important; gap: 8px !important; max-width: 280px !important; border-radius: 12px !important; } body .aa-user-card-v2 .aa-user-avatar { width: 36px !important; height: 36px !important; border-radius: 10px !important; font-size: 16px !important; } body .aa-user-card-v2 .aa-user-avatar svg { width: 18px; height: 18px; } body .aa-user-card-v2 .aa-user-name { font-size: 12.5px !important; font-weight: 800 !important; } body .aa-user-card-v2 .aa-user-email { font-size: 10.5px !important; } /* کارت موجودی - کوچیک‌تر */ body .aa-balance-card-v2 { padding: 6px 12px !important; gap: 8px !important; border-radius: 12px !important; } body .aa-balance-card-v2 .aa-balance-icon { width: 30px !important; height: 30px !important; border-radius: 8px !important; } body .aa-balance-card-v2 .aa-balance-icon svg { width: 13px; height: 13px; } body .aa-balance-card-v2 .aa-balance-label { font-size: 9.5px !important; } body .aa-balance-card-v2 .aa-balance-value { font-size: 12.5px !important; } body .aa-balance-card-v2 .aa-balance-add { width: 24px !important; height: 24px !important; border-radius: 6px !important; font-size: 10px !important; } body .aa-balance-card-v2 .aa-balance-add svg { width: 11px; height: 11px; } /* سبد - کوچیک‌تر */ body .aa-cart-v2 { width: 44px !important; height: 44px !important; border-radius: 12px !important; font-size: 16px !important; } body .aa-cart-v2 svg { width: 18px; height: 18px; } body .aa-cart-badge { width: 18px !important; height: 18px !important; min-width: 18px !important; font-size: 9.5px !important; top: -5px !important; left: -5px !important; } body .aa-burger-v2 { width: 44px !important; height: 44px !important; border-radius: 12px !important; } body .aa-burger-v2 svg { width: 18px; height: 18px; } /* === guest buttons - کوچیک‌تر === */ body .aa-guest-btn { padding: 8px 16px !important; font-size: 12px !important; border-radius: 10px !important; gap: 5px !important; } body .aa-guest-btn svg { width: 13px; height: 13px; } /* === ریسپانسیو === */ @media (max-width: 991px) { body .aa-mainbar-v2 .aa-mainbar-row { flex-wrap: wrap !important; gap: 8px !important; } body .aa-logo-v2 { order: 1; flex: 0 0 auto; } body .aa-actions-v2 { order: 2; margin-right: auto; flex: 0 0 auto; } body .aa-user-card-v2 { order: 3; flex: 1 1 100% !important; max-width: none !important; } body .aa-balance-card-v2 { order: 4; flex: 1 1 100% !important; justify-content: flex-start; } } @media (max-width: 540px) { body .aa-logo-v2 img { max-height: 36px !important; } body .aa-user-card-v2 { padding: 5px 10px !important; } body .aa-user-card-v2 .aa-user-avatar { width: 30px !important; height: 30px !important; } body .aa-user-card-v2 .aa-user-name { font-size: 11.5px !important; } body .aa-user-card-v2 .aa-user-email { font-size: 10px !important; } body .aa-cart-v2, body .aa-burger-v2 { width: 38px !important; height: 38px !important; } } /* ============================================================ 🎯 v1.0.9e — تنظیم نهایی چیدمان هدر: لوگو راست، سبد چپ ============================================================ */ /* mainbar: لوگو راست، سپس spacer (auto margin)، سپس کاربر+موجودی+سبد */ body .aa-mainbar-v2 .aa-mainbar-row { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; direction: rtl !important; gap: 10px !important; } /* لوگو - راست‌ترین */ body .aa-mainbar-v2 .aa-logo-v2 { order: 1 !important; flex: 0 0 auto !important; margin-left: 0 !important; margin-right: 0 !important; } /* کارت کاربر - از لوگو با margin-right: auto جدا میشه (در RTL یعنی به چپ هل می‌شه) */ body .aa-mainbar-v2 .aa-user-card-v2 { order: 2 !important; flex: 0 1 auto !important; margin-right: auto !important; margin-left: 0 !important; } /* کارت موجودی - بعد از کارت کاربر */ body .aa-mainbar-v2 .aa-balance-card-v2 { order: 3 !important; flex: 0 0 auto !important; margin: 0 !important; } /* سبد - چپ‌ترین */ body .aa-mainbar-v2 .aa-actions-v2 { order: 4 !important; flex: 0 0 auto !important; margin-right: 0 !important; margin-left: 0 !important; } /* در صورت guest (نه لاگین) */ body .aa-mainbar-v2 .aa-guest-actions { order: 2 !important; margin-right: auto !important; margin-left: 0 !important; } /* topbar هم بازچیدن: تغییر حساب/خروج چپ، اعلانات راست */ body .aa-topbar-v2 .aa-topbar-row { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; direction: rtl !important; gap: 8px !important; } body .aa-topbar-v2 .aa-topbar-right { order: 1 !important; margin-left: auto !important; margin-right: 0 !important; } body .aa-topbar-v2 .aa-topbar-left { order: 2 !important; margin-right: auto !important; margin-left: 0 !important; } /* === ریسپانسیو === */ @media (max-width: 991px) { body .aa-mainbar-v2 .aa-mainbar-row { flex-wrap: wrap !important; } body .aa-mainbar-v2 .aa-logo-v2 { flex: 0 0 auto !important; order: 1 !important; } body .aa-mainbar-v2 .aa-actions-v2 { order: 2 !important; margin-right: auto !important; margin-left: 0 !important; } body .aa-mainbar-v2 .aa-user-card-v2 { order: 3 !important; flex: 1 1 100% !important; margin: 6px 0 0 0 !important; max-width: none !important; } body .aa-mainbar-v2 .aa-balance-card-v2 { order: 4 !important; flex: 1 1 100% !important; margin: 0 !important; justify-content: flex-start; } } /* ============================================================ 🎯 v1.0.9f — SVG icons fallback (JS-replaced) styling وقتی FA لود نشده، JS، رو با SVG پر می‌کنه ============================================================ */ body i[data-aa-replaced] { display: inline-flex !important; align-items: center; justify-content: center; width: 1em; height: 1em; vertical-align: -0.125em; line-height: 1; } body i[data-aa-replaced] svg { width: 1em; height: 1em; fill: currentColor; display: block; } /* اطمینان از size آیکن در badge ها و دکمه‌ها */ body .badge i[data-aa-replaced], body .btn i[data-aa-replaced], body .label i[data-aa-replaced] { font-size: inherit; } body i[data-aa-replaced].fa-lg { font-size: 1.33em; } body i[data-aa-replaced].fa-2x { font-size: 2em; } body i[data-aa-replaced].fa-3x { font-size: 3em; } body i[data-aa-replaced].fa-fw { width: 1.25em; } /* وقتی html.aa-no-fa class اضافه می‌شه (یعنی FA لود نشده) */ /* فقط آیکن‌هایی که SVG جایگزین شده رو پنهان کن (نه همه FA icons) */ html.aa-no-fa body i[data-aa-replaced]::before, html.aa-no-fa body span[data-aa-replaced]::before { content: '' !important; display: none !important; } /* ============================================================ 🎨 v1.0.9f — هدر کاملاً بازنویسی: لوگو راست، اطلاعات وسط، سبد چپ با margin-auto برای جایگیری دقیق ============================================================ */ /* تنظیم نهایی mainbar */ body .aa-header-v2 { background: transparent; position: relative; z-index: 100; } body .aa-mainbar-v2 { background: var(--bg); border-bottom: 1px solid var(--border); padding: 12px 0; } body .aa-mainbar-v2 > .container { position: relative; } body .aa-mainbar-v2 .aa-mainbar-row { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; direction: rtl !important; gap: 14px !important; margin: 0 !important; } /* === چیدمان دقیق: لوگو ─ [اطلاعات وسط با margin auto] ─ سبد === */ /* لوگو راست‌ترین */ body .aa-mainbar-v2 .aa-logo-v2 { order: 1 !important; flex: 0 0 auto !important; margin: 0 !important; } body .aa-mainbar-v2 .aa-logo-v2 img { max-height: 50px !important; width: auto !important; display: block !important; } /* اطلاعات کاربر — margin-right: auto یعنی فاصله از لوگو auto = وسط چین */ body .aa-mainbar-v2 .aa-user-card-v2 { order: 2 !important; flex: 0 1 auto !important; margin-right: auto !important; margin-left: 0 !important; padding: 8px 14px !important; gap: 10px !important; max-width: 280px !important; background: linear-gradient(135deg, var(--bg-card), var(--bg-elev)) !important; border: 1.5px solid var(--border-strong) !important; border-radius: 14px !important; display: flex !important; align-items: center !important; text-decoration: none !important; transition: all 0.25s ease !important; position: relative; overflow: hidden; } body .aa-mainbar-v2 .aa-user-card-v2:hover { border-color: var(--accent) !important; transform: translateY(-1px); box-shadow: 0 10px 25px -8px var(--accent); } body .aa-mainbar-v2 .aa-user-card-v2 .aa-user-avatar { width: 38px !important; height: 38px !important; background: var(--grad) !important; border-radius: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; flex-shrink: 0; box-shadow: 0 6px 16px -4px var(--accent); } body .aa-mainbar-v2 .aa-user-card-v2 .aa-user-avatar svg, body .aa-mainbar-v2 .aa-user-card-v2 .aa-user-avatar i { width: 18px; height: 18px; font-size: 16px; color: #fff !important; } body .aa-mainbar-v2 .aa-user-card-v2 .aa-user-info { flex: 1 1 auto; min-width: 0; } body .aa-mainbar-v2 .aa-user-card-v2 .aa-user-name { font-weight: 800 !important; font-size: 13px !important; color: var(--text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } body .aa-mainbar-v2 .aa-user-card-v2 .aa-user-email { font-size: 11px !important; color: var(--text-mute) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-feature-settings: 'tnum'; margin-top: 2px; } /* کارت موجودی — کنار کاربر */ body .aa-mainbar-v2 .aa-balance-card-v2 { order: 3 !important; flex: 0 0 auto !important; margin: 0 !important; display: flex !important; flex-direction: row-reverse !important; align-items: center !important; gap: 10px !important; padding: 8px 14px !important; background: linear-gradient(135deg, rgba(46, 213, 115, 0.1), rgba(255, 122, 58, 0.05)) !important; border: 1.5px solid rgba(46, 213, 115, 0.3) !important; border-radius: 14px !important; text-decoration: none !important; transition: all 0.25s ease !important; position: relative; } body .aa-mainbar-v2 .aa-balance-card-v2:hover { border-color: rgba(46, 213, 115, 0.6) !important; transform: translateY(-1px); box-shadow: 0 10px 25px -8px rgba(46, 213, 115, 0.4); } body .aa-mainbar-v2 .aa-balance-card-v2 .aa-balance-icon { width: 32px !important; height: 32px !important; background: linear-gradient(135deg, #2ed573, #1dc463) !important; border-radius: 9px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; flex-shrink: 0; box-shadow: 0 6px 16px -4px rgba(46, 213, 115, 0.5); } body .aa-mainbar-v2 .aa-balance-card-v2 .aa-balance-icon svg, body .aa-mainbar-v2 .aa-balance-card-v2 .aa-balance-icon i { width: 15px; height: 15px; font-size: 13px; color: #fff !important; } body .aa-mainbar-v2 .aa-balance-card-v2 .aa-balance-info { display: flex; flex-direction: column; align-items: flex-end; } body .aa-mainbar-v2 .aa-balance-card-v2 .aa-balance-label { font-size: 10px !important; color: var(--text-mute) !important; font-weight: 700; line-height: 1.2; white-space: nowrap; } body .aa-mainbar-v2 .aa-balance-card-v2 .aa-balance-value { font-size: 13px !important; font-weight: 900 !important; color: #2ed573 !important; white-space: nowrap; font-family: 'IRANSans', sans-serif !important; font-feature-settings: 'tnum'; margin-top: 2px; } body .aa-mainbar-v2 .aa-balance-card-v2 .aa-balance-add { width: 26px !important; height: 26px !important; background: rgba(46, 213, 115, 0.18) !important; border: 1px solid rgba(46, 213, 115, 0.3) !important; border-radius: 7px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #2ed573 !important; flex-shrink: 0; transition: all 0.25s ease; } body .aa-mainbar-v2 .aa-balance-card-v2 .aa-balance-add svg, body .aa-mainbar-v2 .aa-balance-card-v2 .aa-balance-add i { width: 12px; height: 12px; font-size: 10px; } body .aa-mainbar-v2 .aa-balance-card-v2:hover .aa-balance-add { background: #2ed573 !important; color: #fff !important; transform: rotate(90deg); } /* اکشن‌ها (سبد + همبرگر) چپ‌ترین */ body .aa-mainbar-v2 .aa-actions-v2 { order: 4 !important; flex: 0 0 auto !important; margin: 0 !important; display: flex; align-items: center; gap: 8px; } body .aa-mainbar-v2 .aa-cart-v2 { width: 46px !important; height: 46px !important; background: var(--grad) !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #fff !important; text-decoration: none !important; box-shadow: 0 10px 24px -8px var(--accent); position: relative; transition: all 0.25s ease; } body .aa-mainbar-v2 .aa-cart-v2 svg, body .aa-mainbar-v2 .aa-cart-v2 i { width: 19px; height: 19px; font-size: 17px; color: #fff !important; } body .aa-mainbar-v2 .aa-cart-v2:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -8px var(--accent); color: #fff !important; } body .aa-mainbar-v2 .aa-cart-badge { position: absolute; top: -5px; left: -5px; background: #ff4757; color: #fff; font-size: 10px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 50%; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--bg); box-shadow: 0 4px 10px -2px rgba(255, 71, 87, 0.5); } body .aa-mainbar-v2 .aa-burger-v2 { width: 46px !important; height: 46px !important; background: var(--bg-card) !important; border: 1.5px solid var(--border-strong) !important; color: var(--text) !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; transition: all 0.25s ease; } body .aa-mainbar-v2 .aa-burger-v2 svg, body .aa-mainbar-v2 .aa-burger-v2 i { width: 19px; height: 19px; font-size: 17px; } body .aa-mainbar-v2 .aa-burger-v2:hover { background: var(--grad-soft) !important; border-color: var(--accent) !important; color: var(--accent) !important; } /* === ریسپانسیو === */ @media (max-width: 991px) { body .aa-mainbar-v2 .aa-mainbar-row { flex-wrap: wrap !important; gap: 10px !important; } body .aa-mainbar-v2 .aa-logo-v2 { order: 1 !important; flex: 0 0 auto !important; } body .aa-mainbar-v2 .aa-actions-v2 { order: 2 !important; margin-right: auto !important; } body .aa-mainbar-v2 .aa-user-card-v2 { order: 3 !important; flex: 1 1 100% !important; margin: 6px 0 0 !important; max-width: none !important; } body .aa-mainbar-v2 .aa-balance-card-v2 { order: 4 !important; flex: 1 1 100% !important; margin: 0 !important; justify-content: flex-start; } } @media (max-width: 540px) { body .aa-mainbar-v2 .aa-logo-v2 img { max-height: 38px !important; } body .aa-mainbar-v2 .aa-user-card-v2 .aa-user-avatar { width: 32px !important; height: 32px !important; } body .aa-mainbar-v2 .aa-cart-v2, body .aa-mainbar-v2 .aa-burger-v2 { width: 40px !important; height: 40px !important; } } /* ============================================================ 🎬 اسلایدر زیبا برای صفحه clientarea ============================================================ */ .aa-slider { position: relative; width: 100%; border-radius: 24px; overflow: hidden; margin-bottom: 28px; background: var(--bg-card); border: 1.5px solid var(--border); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.4); animation: aaSliderIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes aaSliderIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } .aa-slider-track { position: relative; width: 100%; height: 240px; overflow: hidden; } .aa-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.7s ease, visibility 0.7s ease; display: flex; align-items: center; padding: 32px 40px; direction: rtl; } .aa-slide.active { opacity: 1; visibility: visible; } .aa-slide-content { flex: 1 1 50%; z-index: 2; color: #fff; position: relative; } .aa-slide-visual { flex: 1 1 50%; z-index: 1; position: relative; height: 100%; display: flex; align-items: center; justify-content: center; } .aa-slide-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff !important; margin-bottom: 12px; } .aa-slide-title { font-size: 28px; font-weight: 900; color: #fff !important; margin: 0 0 10px; line-height: 1.3; text-shadow: 0 2px 12px rgba(0,0,0,0.3); } .aa-slide-desc { font-size: 14px; color: rgba(255, 255, 255, 0.95) !important; margin: 0 0 18px; line-height: 1.8; text-shadow: 0 1px 8px rgba(0,0,0,0.3); max-width: 460px; } .aa-slide-btn { display: inline-flex !important; align-items: center; gap: 8px; padding: 11px 24px; background: #fff !important; color: #222 !important; border-radius: 12px; font-weight: 800; font-size: 13px; text-decoration: none !important; transition: all 0.25s ease; box-shadow: 0 12px 28px -8px rgba(0,0,0,0.3); } .aa-slide-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(0,0,0,0.4); color: #222 !important; } /* اسلاید‌های مختلف با gradient متفاوت */ .aa-slide-1 { background: linear-gradient(135deg, #ff5e7e 0%, #ff7a3a 50%, #ffba2a 100%); } .aa-slide-2 { background: linear-gradient(135deg, #6366f1 0%, #818cf8 50%, #a855f7 100%); } .aa-slide-3 { background: linear-gradient(135deg, #06b6d4 0%, #14b8a6 50%, #10b981 100%); } .aa-slide-4 { background: linear-gradient(135deg, #f43f5e 0%, #ec4899 50%, #d946ef 100%); } /* پترن background روی اسلایدها */ .aa-slide::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.15) 0%, transparent 50%), radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%); pointer-events: none; } /* SVG illustration در سمت چپ هر اسلاید */ .aa-slide-svg { width: 220px; height: 220px; opacity: 0.9; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.2)); } .aa-slide-svg svg { width: 100%; height: 100%; } /* ناوبری نقاط */ .aa-slider-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; } .aa-slider-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: all 0.25s ease; border: 0; padding: 0; } .aa-slider-dot.active { background: #fff; width: 28px; border-radius: 999px; } .aa-slider-dot:hover:not(.active) { background: rgba(255, 255, 255, 0.7); } /* فلش‌های ناوبری */ .aa-slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.25s ease; color: #fff; } .aa-slider-arrow:hover { background: rgba(255, 255, 255, 0.35); } .aa-slider-prev { right: 16px; } .aa-slider-next { left: 16px; } @media (max-width: 768px) { .aa-slider-track { height: 320px; } .aa-slide { flex-direction: column; padding: 24px 22px; text-align: center; } .aa-slide-content, .aa-slide-visual { flex: 1 1 100%; } .aa-slide-visual { max-height: 100px; } .aa-slide-svg { width: 120px; height: 120px; } .aa-slide-title { font-size: 20px; } .aa-slide-desc { font-size: 12.5px; } .aa-slider-arrow { width: 32px; height: 32px; } } /* ============================================================ 🎯 v1.0.9g — اسلایدر تمام عرض + دکمه‌های زیباتر + همبرگر + انیمیشن یکنواخت منو ============================================================ */ /* === اسلایدر تمام عرض (شامل sidebar) === */ body #main-body > .container > .aa-slider, body #main-body > .container-fluid > .aa-slider { width: 100%; margin-bottom: 22px; margin-top: 8px; } /* === دکمه‌های اسلایدر زیباتر === */ .aa-slider-arrow { width: 48px !important; height: 48px !important; background: rgba(255, 255, 255, 0.2) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border: 1.5px solid rgba(255, 255, 255, 0.45) !important; border-radius: 50% !important; color: #fff !important; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.4) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .aa-slider-arrow svg { width: 20px !important; height: 20px !important; transition: transform 0.25s ease; } .aa-slider-arrow:hover { background: #fff !important; color: #222 !important; transform: translateY(-50%) scale(1.15) !important; box-shadow: 0 14px 36px -8px rgba(0, 0, 0, 0.5) !important; border-color: #fff !important; } .aa-slider-arrow.aa-slider-prev:hover svg { transform: translateX(-3px); } .aa-slider-arrow.aa-slider-next:hover svg { transform: translateX(3px); } .aa-slider-prev { right: 18px !important; left: auto !important; } .aa-slider-next { left: 18px !important; right: auto !important; } /* === نقاط ناوبری زیباتر === */ .aa-slider-dots { bottom: 18px !important; gap: 10px !important; padding: 8px 14px; background: rgba(0, 0, 0, 0.15); border-radius: 999px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .aa-slider-dot { width: 9px !important; height: 9px !important; background: rgba(255, 255, 255, 0.5) !important; border-radius: 50% !important; border: 0 !important; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; padding: 0 !important; } .aa-slider-dot:hover { background: rgba(255, 255, 255, 0.85) !important; transform: scale(1.2); } .aa-slider-dot.active { background: #fff !important; width: 30px !important; border-radius: 999px !important; } /* === همبرگر / Toggle Button فیکس === */ body .aa-mainbar-v2 .aa-burger-v2 { position: relative; cursor: pointer; user-select: none; } /* فعال کردن انیمیشن کلیک */ body .aa-mainbar-v2 .aa-burger-v2:active { transform: scale(0.92); } body .aa-mainbar-v2 .aa-burger-v2[aria-expanded="true"] { background: var(--grad) !important; color: #fff !important; border-color: transparent !important; } body .aa-mainbar-v2 .aa-burger-v2[aria-expanded="true"] svg, body .aa-mainbar-v2 .aa-burger-v2[aria-expanded="true"] i { color: #fff !important; } /* mobile menu drawer - وقتی همبرگر کلیک شد */ @media (max-width: 1199px) { body .aa-navbar-v2 { overflow: hidden; } body .aa-navbar-collapse-v2 { flex-direction: column !important; align-items: stretch !important; width: 100% !important; padding: 10px 0 !important; } body .aa-navbar-collapse-v2 .navbar-nav, body .aa-nav-primary-v2, body .aa-nav-secondary-v2 { flex-direction: column !important; width: 100% !important; margin: 0 !important; align-items: stretch !important; } body .aa-navbar-collapse-v2 .nav-item { width: 100% !important; } body .aa-navbar-collapse-v2 .nav-link { width: 100% !important; padding: 12px 18px !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; justify-content: flex-start !important; } /* underline ها در موبایل غیرفعال */ body .aa-navbar-collapse-v2 .nav-link::after { display: none !important; } /* وقتی hover یا active، رنگ بک‌گراند تغییر کنه */ body .aa-navbar-collapse-v2 .nav-link:hover { background: var(--grad-soft) !important; color: var(--accent) !important; padding-right: 24px !important; } } /* ============================================================ 🎬 منوها — انیمیشن یکنواخت برای همه dropdownها ============================================================ */ /* اطمینان از این که همه dropdownها از پایین parent باز شن (نه از بالا) */ body .aa-navbar-collapse-v2 .dropdown-menu, body .navbar .dropdown-menu { top: 100% !important; bottom: auto !important; margin-top: 8px !important; margin-bottom: 0 !important; transform-origin: top center !important; animation: aaDropDown 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important; position: absolute !important; } @keyframes aaDropDown { 0% { opacity: 0; transform: translateY(-12px) scale(0.94); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* جلوگیری از فلیپ Bootstrap که گاهی dropdown رو از بالا باز می‌کنه */ body .aa-navbar-collapse-v2 .dropdown-menu.show { top: 100% !important; bottom: auto !important; inset: auto !important; transform: none !important; } /* dropdown items - انیمیشن stagger زیبا */ body .aa-navbar-collapse-v2 .dropdown-menu .dropdown-item { opacity: 0; transform: translateX(10px); animation: aaItemSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes aaItemSlide { to { opacity: 1; transform: translateX(0); } } body .aa-navbar-collapse-v2 .dropdown-menu .dropdown-item:nth-child(1) { animation-delay: 0.04s; } body .aa-navbar-collapse-v2 .dropdown-menu .dropdown-item:nth-child(2) { animation-delay: 0.08s; } body .aa-navbar-collapse-v2 .dropdown-menu .dropdown-item:nth-child(3) { animation-delay: 0.12s; } body .aa-navbar-collapse-v2 .dropdown-menu .dropdown-item:nth-child(4) { animation-delay: 0.16s; } body .aa-navbar-collapse-v2 .dropdown-menu .dropdown-item:nth-child(5) { animation-delay: 0.20s; } body .aa-navbar-collapse-v2 .dropdown-menu .dropdown-item:nth-child(6) { animation-delay: 0.24s; } body .aa-navbar-collapse-v2 .dropdown-menu .dropdown-item:nth-child(7) { animation-delay: 0.28s; } body .aa-navbar-collapse-v2 .dropdown-menu .dropdown-item:nth-child(n+8) { animation-delay: 0.32s; } /* فلش dropdown (caret) - rotate نرم */ body .aa-navbar-collapse-v2 .dropdown-toggle::after { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } body .aa-navbar-collapse-v2 .dropdown.show .dropdown-toggle::after, body .aa-navbar-collapse-v2 .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg) !important; } /* در موبایل، dropdown به جای position absolute به صورت inline زیر parent باز شه */ @media (max-width: 1199px) { body .aa-navbar-collapse-v2 .dropdown-menu { position: static !important; width: 100% !important; margin: 0 !important; border-radius: 0 !important; border: 0 !important; background: var(--bg-elev) !important; box-shadow: none !important; animation: none !important; padding: 0 !important; } body .aa-navbar-collapse-v2 .dropdown-menu .dropdown-item { animation: none !important; opacity: 1 !important; transform: none !important; padding: 11px 28px !important; border-bottom: 1px solid var(--border) !important; font-size: 12.5px !important; } body .aa-navbar-collapse-v2 .dropdown-menu .dropdown-item:hover { padding-right: 36px !important; } } /* ============================================================ 🎨 v1.0.10 — هدر مدرن ایرانی نسخه ۳ طراحی شکیل، سازگار با تم تیره و روشن، با ریزه‌کاری ایرانی ============================================================ */ /* === پاک کردن styling های قبلی برای هدر === */ body .aa-hdr-v3 { position: relative; z-index: 100; background: transparent; margin-bottom: 0; } /* === Topbar v3 === */ body .aa-hdr-top { background: linear-gradient(180deg, rgba(255, 122, 58, 0.06) 0%, rgba(255, 122, 58, 0.02) 100%); border-bottom: 1px solid var(--border); padding: 7px 0; font-size: 12px; position: relative; } body .aa-hdr-top::before { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%); opacity: 0.3; } body .aa-hdr-top-inner { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap; gap: 8px; direction: rtl; } body .aa-hdr-top-r { order: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } body .aa-hdr-top-l { order: 2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* قرص‌های topbar (pill) */ body .aa-tb-pill { display: inline-flex !important; align-items: center !important; gap: 5px; padding: 5px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; color: var(--text) !important; font-size: 11.5px !important; font-weight: 700 !important; text-decoration: none !important; cursor: pointer; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; white-space: nowrap; } body .aa-tb-pill:hover { background: var(--grad-soft); border-color: var(--accent); color: var(--accent) !important; transform: translateY(-1px); box-shadow: 0 6px 16px -6px var(--accent); } body .aa-tb-pill-ico { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--accent); } body .aa-tb-pill:hover .aa-tb-pill-ico { color: inherit; } body .aa-tb-pill-text { line-height: 1; } body .aa-tb-pill-dot { position: absolute; top: -4px; left: -4px; background: linear-gradient(135deg, #ff4757, #ff6b81); color: #fff; min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px -2px rgba(255, 71, 87, 0.5); border: 2px solid var(--bg); } body .aa-tb-info { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.3); color: #818cf8 !important; } body .aa-tb-info .aa-tb-pill-ico { color: #818cf8; } body .aa-tb-info:hover { background: rgba(99, 102, 241, 0.2); border-color: #818cf8; color: #a5b4fc !important; } body .aa-tb-warn { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); color: #fbbf24 !important; } body .aa-tb-warn .aa-tb-pill-ico { color: #fbbf24; } body .aa-tb-warn:hover { background: rgba(245, 158, 11, 0.2); border-color: #fbbf24; } body .aa-tb-danger { background: rgba(255, 71, 87, 0.1); border-color: rgba(255, 71, 87, 0.3); color: #ff6b81 !important; } body .aa-tb-danger .aa-tb-pill-ico { color: #ff6b81; } body .aa-tb-danger:hover { background: rgba(255, 71, 87, 0.2); border-color: #ff6b81; color: #ff8fa3 !important; } /* جداکننده */ body .aa-tb-sep { width: 1px; height: 18px; background: var(--border); display: inline-block; } /* لینک‌های ساده topbar */ body .aa-tb-link { display: inline-flex; align-items: center; gap: 4px; color: var(--text-mute) !important; font-size: 11.5px; font-weight: 600; text-decoration: none !important; padding: 5px 8px; border-radius: 6px; transition: all 0.2s; } body .aa-tb-link:hover { color: var(--accent) !important; background: var(--grad-soft); } body .aa-tb-link svg { opacity: 0.7; } body .aa-tb-link:hover svg { opacity: 1; } /* === نوار اصلی — حالت کاملاً تازه === */ body .aa-hdr-main { background: var(--bg); padding: 14px 0; position: relative; border-bottom: 1px solid var(--border); } /* نوار درخشش زیر هدر */ body .aa-hdr-main::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--grad-soft) 30%, var(--grad-soft) 70%, transparent 100%); pointer-events: none; } body .aa-hdr-main-inner { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 14px !important; direction: rtl; } /* لوگو */ body .aa-hdr-brand { order: 1; flex: 0 0 auto; display: flex; align-items: center; text-decoration: none !important; transition: transform 0.3s ease; } body .aa-hdr-brand:hover { transform: scale(1.03); } body .aa-hdr-brand img { max-height: 50px; width: auto; display: block; } /* جعبه پروفایل کاربر و موجودی — یک کارت یکپارچه شیشه‌ای */ body .aa-hdr-profile-box { order: 2; flex: 0 1 auto; margin-right: auto; margin-left: 0; display: flex !important; align-items: stretch !important; background: linear-gradient(135deg, rgba(255, 122, 58, 0.04), var(--bg-card)); border: 1.5px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; position: relative; max-width: 460px; } body .aa-hdr-profile-box:hover { border-color: var(--border-strong); box-shadow: 0 10px 30px -10px var(--accent); } body .aa-hdr-profile-box::before { content: ''; position: absolute; top: 0; right: 0; width: 100px; height: 100px; background: radial-gradient(circle, var(--grad-soft) 0%, transparent 60%); transform: translate(40%, -40%); pointer-events: none; opacity: 0.6; } /* بخش کاربر */ body .aa-hdr-user { display: flex !important; align-items: center; gap: 10px; padding: 8px 14px; text-decoration: none !important; position: relative; z-index: 1; transition: background 0.25s ease; } body .aa-hdr-user:hover { background: var(--grad-soft); } body .aa-hdr-user-avatar { width: 38px; height: 38px; background: var(--grad); border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #fff !important; flex-shrink: 0; box-shadow: 0 6px 16px -4px var(--accent); position: relative; } body .aa-hdr-user-avatar::after { content: ''; position: absolute; bottom: -2px; right: -2px; width: 10px; height: 10px; background: #2ed573; border: 2px solid var(--bg); border-radius: 50%; box-shadow: 0 0 0 2px rgba(46, 213, 115, 0.3); } body .aa-hdr-user-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } body .aa-hdr-user-hi { font-size: 10.5px; color: var(--text-mute); font-weight: 600; margin-bottom: 2px; } body .aa-hdr-user-name { font-size: 13.5px; color: var(--text); font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* جداکننده وسط */ body .aa-hdr-divider { width: 1px; background: var(--border); align-self: stretch; margin: 8px 0; } /* بخش موجودی */ body .aa-hdr-balance { display: flex !important; align-items: center; gap: 10px; padding: 8px 14px; text-decoration: none !important; position: relative; z-index: 1; transition: background 0.25s ease; } body .aa-hdr-balance:hover { background: rgba(46, 213, 115, 0.08); } body .aa-hdr-balance-ico { width: 34px; height: 34px; background: linear-gradient(135deg, rgba(46, 213, 115, 0.15), rgba(46, 213, 115, 0.05)); border: 1px solid rgba(46, 213, 115, 0.3); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #2ed573 !important; flex-shrink: 0; } body .aa-hdr-balance-text { display: flex; flex-direction: column; line-height: 1.2; } body .aa-hdr-balance-label { font-size: 10.5px; color: var(--text-mute); font-weight: 600; margin-bottom: 2px; white-space: nowrap; } body .aa-hdr-balance-val { font-size: 13.5px; color: #2ed573; font-weight: 900; white-space: nowrap; font-family: 'IRANSans', sans-serif; font-feature-settings: 'tnum'; } body .aa-hdr-balance-plus { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: rgba(46, 213, 115, 0.15); border: 1px solid rgba(46, 213, 115, 0.3); border-radius: 7px; color: #2ed573; margin-right: 2px; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } body .aa-hdr-balance:hover .aa-hdr-balance-plus { background: #2ed573; color: #fff; transform: rotate(90deg) scale(1.1); } /* حالت مهمان (لاگین نشده) */ body .aa-hdr-guest { order: 2; flex: 0 1 auto; margin-right: auto; margin-left: 0; display: flex; align-items: center; gap: 8px; } body .aa-hdr-guest-btn { display: inline-flex !important; align-items: center; gap: 6px; padding: 9px 18px; background: var(--bg-card); border: 1.5px solid var(--border-strong); border-radius: 11px; color: var(--text) !important; font-weight: 800; font-size: 13px; text-decoration: none !important; transition: all 0.25s ease; } body .aa-hdr-guest-btn:hover { border-color: var(--accent); color: var(--accent) !important; transform: translateY(-2px); } body .aa-hdr-guest-primary { background: var(--grad) !important; border: 0 !important; color: #fff !important; box-shadow: 0 10px 24px -8px var(--accent); } body .aa-hdr-guest-primary:hover { color: #fff !important; box-shadow: 0 14px 30px -8px var(--accent); } /* اکشن‌ها (سبد + همبرگر) */ body .aa-hdr-actions { order: 3; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } body .aa-hdr-cart { width: 46px; height: 46px; background: var(--grad); border-radius: 13px; display: inline-flex !important; align-items: center; justify-content: center; color: #fff !important; text-decoration: none !important; position: relative; box-shadow: 0 10px 24px -8px var(--accent); transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } body .aa-hdr-cart:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 14px 30px -8px var(--accent); color: #fff !important; } body .aa-hdr-cart-dot { position: absolute; top: -6px; left: -6px; background: linear-gradient(135deg, #ff4757, #ff6b81); color: #fff; min-width: 20px; height: 20px; border-radius: 50%; padding: 0 5px; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--bg); box-shadow: 0 4px 10px -2px rgba(255, 71, 87, 0.5); } /* همبرگر — انیمیشن X */ body .aa-hdr-burger { width: 46px; height: 46px; background: var(--bg-card); border: 1.5px solid var(--border-strong); border-radius: 13px; display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 0; transition: all 0.25s ease; } body .aa-hdr-burger:hover { border-color: var(--accent); background: var(--grad-soft); } body .aa-hdr-burger .aa-burger-bar { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 999px; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); transform-origin: center; } body .aa-hdr-burger:hover .aa-burger-bar { background: var(--accent); } /* وقتی منو باز هست: همبرگر تبدیل به X */ body .aa-hdr-burger[aria-expanded="true"], body .aa-hdr-burger.aa-open { background: var(--grad); border-color: transparent; } body .aa-hdr-burger[aria-expanded="true"] .aa-burger-bar, body .aa-hdr-burger.aa-open .aa-burger-bar { background: #fff; } body .aa-hdr-burger[aria-expanded="true"] .aa-burger-bar:nth-child(1), body .aa-hdr-burger.aa-open .aa-burger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } body .aa-hdr-burger[aria-expanded="true"] .aa-burger-bar:nth-child(2), body .aa-hdr-burger.aa-open .aa-burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); } body .aa-hdr-burger[aria-expanded="true"] .aa-burger-bar:nth-child(3), body .aa-hdr-burger.aa-open .aa-burger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ====== نوار منوها ====== */ body .aa-hdr-nav { background: var(--bg-elev); border-bottom: 1px solid var(--border); position: relative; } body .aa-hdr-nav-inner { display: flex !important; flex-direction: row !important; align-items: center; flex-wrap: wrap; direction: rtl; width: 100%; } body .aa-hdr-nav .aa-nav-primary, body .aa-hdr-nav .aa-nav-secondary { display: flex !important; flex-direction: row !important; align-items: center !important; margin: 0 !important; padding: 0 !important; list-style: none !important; flex-wrap: wrap; gap: 0; } body .aa-hdr-nav .aa-nav-primary { margin-right: 0 !important; margin-left: auto !important; } body .aa-hdr-nav .aa-nav-secondary { margin-left: 0 !important; margin-right: auto !important; } body .aa-hdr-nav .nav-item { list-style: none; position: relative; } body .aa-hdr-nav .nav-link { color: var(--text) !important; padding: 15px 18px !important; font-weight: 700 !important; font-size: 13.5px !important; text-decoration: none !important; background: transparent !important; position: relative; display: inline-flex !important; align-items: center !important; gap: 6px; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; border-radius: 0; } body .aa-hdr-nav .nav-link i, body .aa-hdr-nav .nav-link svg { font-size: 13px; opacity: 0.7; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } body .aa-hdr-nav .nav-link:hover i, body .aa-hdr-nav .nav-link:hover svg { opacity: 1; transform: scale(1.15) rotate(-5deg); } body .aa-hdr-nav .nav-link::before { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 100%; background: linear-gradient(180deg, var(--grad-soft), transparent); transform: translateX(-50%); transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: -1; pointer-events: none; border-radius: 0; } body .aa-hdr-nav .nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 3px; background: var(--grad); border-radius: 3px 3px 0 0; box-shadow: 0 0 16px var(--accent); transform: translateX(-50%); transition: width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } body .aa-hdr-nav .nav-link:hover, body .aa-hdr-nav .nav-link.active, body .aa-hdr-nav .nav-link[aria-expanded="true"] { color: var(--accent) !important; } body .aa-hdr-nav .nav-link:hover::before, body .aa-hdr-nav .nav-link.active::before, body .aa-hdr-nav .nav-link[aria-expanded="true"]::before { width: 100%; } body .aa-hdr-nav .nav-link:hover::after, body .aa-hdr-nav .nav-link.active::after, body .aa-hdr-nav .nav-link[aria-expanded="true"]::after { width: 80%; } /* فلش dropdown */ body .aa-hdr-nav .dropdown-toggle::after { margin-right: 6px !important; margin-left: 0 !important; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; border-bottom: 0; vertical-align: 2px; opacity: 0.6; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } body .aa-hdr-nav .dropdown.show .dropdown-toggle::after, body .aa-hdr-nav .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); opacity: 1; } /* === dropdown menus — انیمیشن مدرن === */ body .aa-hdr-nav .dropdown-menu { background: var(--bg-card) !important; border: 1.5px solid var(--border-strong) !important; border-radius: 16px !important; box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 122, 58, 0.1) !important; padding: 8px !important; margin-top: 10px !important; min-width: 220px !important; top: 100% !important; bottom: auto !important; inset: auto !important; right: 0 !important; left: auto !important; transform-origin: top right !important; animation: aaDdIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important; position: absolute !important; text-align: right !important; } @keyframes aaDdIn { 0% { opacity: 0; transform: translateY(-14px) scale(0.92); } 100% { opacity: 1; transform: translateY(0) scale(1); } } body .aa-hdr-nav .dropdown-menu::before { content: ''; position: absolute; top: -8px; right: 24px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--bg-card); filter: drop-shadow(0 -1px 0 var(--border-strong)); } body .aa-hdr-nav .dropdown-menu .dropdown-item { color: var(--text) !important; padding: 10px 14px !important; border-radius: 11px !important; font-weight: 600 !important; font-size: 13px !important; background: transparent !important; display: flex !important; align-items: center !important; gap: 9px; text-align: right !important; text-decoration: none !important; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important; position: relative; opacity: 0; transform: translateX(8px); animation: aaDdItem 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes aaDdItem { to { opacity: 1; transform: translateX(0); } } body .aa-hdr-nav .dropdown-menu .dropdown-item:nth-child(1) { animation-delay: 0.05s; } body .aa-hdr-nav .dropdown-menu .dropdown-item:nth-child(2) { animation-delay: 0.09s; } body .aa-hdr-nav .dropdown-menu .dropdown-item:nth-child(3) { animation-delay: 0.13s; } body .aa-hdr-nav .dropdown-menu .dropdown-item:nth-child(4) { animation-delay: 0.17s; } body .aa-hdr-nav .dropdown-menu .dropdown-item:nth-child(5) { animation-delay: 0.21s; } body .aa-hdr-nav .dropdown-menu .dropdown-item:nth-child(6) { animation-delay: 0.25s; } body .aa-hdr-nav .dropdown-menu .dropdown-item:nth-child(n+7) { animation-delay: 0.29s; } body .aa-hdr-nav .dropdown-menu .dropdown-item i, body .aa-hdr-nav .dropdown-menu .dropdown-item svg { width: 18px; font-size: 13px; text-align: center; opacity: 0.7; color: var(--text-mute); transition: all 0.25s ease; flex-shrink: 0; } body .aa-hdr-nav .dropdown-menu .dropdown-item:hover { background: var(--grad-soft) !important; color: var(--accent) !important; padding-right: 18px !important; } body .aa-hdr-nav .dropdown-menu .dropdown-item:hover i, body .aa-hdr-nav .dropdown-menu .dropdown-item:hover svg { opacity: 1; color: var(--accent); transform: scale(1.1); } body .aa-hdr-nav .dropdown-menu .dropdown-divider { border-color: var(--border) !important; margin: 6px 4px !important; } /* === ریسپانسیو هدر === */ @media (max-width: 1199px) { body .aa-hdr-main-inner { flex-wrap: wrap !important; } body .aa-hdr-brand { order: 1; } body .aa-hdr-actions { order: 2; margin-right: auto; margin-left: 0; } body .aa-hdr-profile-box, body .aa-hdr-guest { order: 3; flex: 1 1 100% !important; margin: 8px 0 0 !important; max-width: none !important; } /* منو موبایل */ body .aa-hdr-nav-inner { flex-direction: column !important; align-items: stretch !important; width: 100%; padding: 8px 0 !important; } body .aa-hdr-nav .aa-nav-primary, body .aa-hdr-nav .aa-nav-secondary { flex-direction: column !important; width: 100% !important; margin: 0 !important; align-items: stretch !important; } body .aa-hdr-nav .nav-link { width: 100% !important; padding: 13px 18px !important; border-bottom: 1px solid var(--border) !important; justify-content: flex-start !important; } body .aa-hdr-nav .nav-link::after, body .aa-hdr-nav .nav-link::before { display: none !important; } body .aa-hdr-nav .nav-link:hover { background: var(--grad-soft) !important; padding-right: 26px !important; } body .aa-hdr-nav .dropdown-menu { position: static !important; width: 100% !important; margin: 0 !important; border-radius: 0 !important; border: 0 !important; background: rgba(0, 0, 0, 0.15) !important; box-shadow: none !important; animation: none !important; padding: 0 !important; } body .aa-hdr-nav .dropdown-menu::before { display: none; } body .aa-hdr-nav .dropdown-menu .dropdown-item { animation: none !important; opacity: 1 !important; transform: none !important; padding: 12px 30px !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; font-size: 12.5px !important; } body .aa-hdr-nav .dropdown-menu .dropdown-item:hover { padding-right: 36px !important; } } @media (max-width: 768px) { body .aa-hdr-brand img { max-height: 40px; } body .aa-hdr-cart, body .aa-hdr-burger { width: 42px; height: 42px; } body .aa-hdr-user { padding: 6px 10px; } body .aa-hdr-user-avatar { width: 32px; height: 32px; } body .aa-hdr-balance { padding: 6px 10px; } body .aa-hdr-balance-ico { width: 30px; height: 30px; } body .aa-tb-pill-text { display: none !important; } } /* ============================================================ 🎨 v1.0.10b — منوی شیک‌تر با فاصله و pill background ============================================================ */ body .aa-hdr-nav { padding: 2px 0; } body .aa-hdr-nav .aa-nav-primary, body .aa-hdr-nav .aa-nav-secondary { gap: 4px !important; } body .aa-hdr-nav .nav-item { margin: 0 2px; } body .aa-hdr-nav .nav-link { padding: 14px 20px !important; border-radius: 12px 12px 0 0 !important; position: relative; font-size: 14px !important; letter-spacing: 0.2px; margin: 4px 0 0 0; } /* hover: pill background دلچسب بالای nav-link */ body .aa-hdr-nav .nav-link:hover::before, body .aa-hdr-nav .nav-link.active::before, body .aa-hdr-nav .nav-link[aria-expanded="true"]::before { width: 100%; border-radius: 12px 12px 0 0; } body .aa-hdr-nav .nav-link:hover::after, body .aa-hdr-nav .nav-link.active::after, body .aa-hdr-nav .nav-link[aria-expanded="true"]::after { width: 70%; } /* فاصله بین آیکن و متن منو */ body .aa-hdr-nav .nav-link { gap: 8px !important; } body .aa-hdr-nav .nav-link i, body .aa-hdr-nav .nav-link svg { font-size: 14px; margin-left: 2px; } /* === ریز spacer بین آیتم‌های منو === */ body .aa-hdr-nav .nav-item + .nav-item::before { content: ''; position: absolute; right: -3px; top: 50%; width: 1px; height: 14px; background: var(--border); transform: translateY(-50%); opacity: 0.4; pointer-events: none; } body .aa-hdr-nav .aa-nav-primary > .nav-item:first-child::before { display: none; } @media (max-width: 1199px) { body .aa-hdr-nav .nav-item + .nav-item::before { display: none !important; } body .aa-hdr-nav .nav-link { border-radius: 0 !important; margin: 0 !important; } } /* ============================================================ 🎫 صفحه supporttickets — دکمه "ثبت درخواست جدید" زیبا ============================================================ */ /* یک دکمه floating برای ثبت درخواست */ body .aa-new-ticket-btn-wrap { display: flex; justify-content: flex-start; align-items: center; gap: 12px; margin: 0 0 22px 0; flex-wrap: wrap; } body .aa-new-ticket-btn { display: inline-flex !important; align-items: center !important; gap: 10px; padding: 14px 28px !important; background: var(--grad) !important; color: #fff !important; border: 0 !important; border-radius: 14px !important; font-weight: 900 !important; font-size: 14.5px !important; text-decoration: none !important; box-shadow: 0 14px 32px -10px var(--accent); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; position: relative; overflow: hidden; } body .aa-new-ticket-btn::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%); animation: aaTktShine 3s ease-in-out infinite; pointer-events: none; } @keyframes aaTktShine { 0% { transform: translateX(-100%) translateY(-100%); } 50%, 100% { transform: translateX(100%) translateY(100%); } } body .aa-new-ticket-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -10px var(--accent) !important; color: #fff !important; } body .aa-new-ticket-btn svg, body .aa-new-ticket-btn i { font-size: 16px; position: relative; z-index: 1; } body .aa-new-ticket-btn span { position: relative; z-index: 1; } /* دکمه ثانویه */ body .aa-tkt-btn-secondary { display: inline-flex !important; align-items: center !important; gap: 8px; padding: 13px 22px !important; background: var(--bg-card) !important; color: var(--text) !important; border: 1.5px solid var(--border-strong) !important; border-radius: 13px !important; font-weight: 800 !important; font-size: 13.5px !important; text-decoration: none !important; transition: all 0.25s ease !important; } body .aa-tkt-btn-secondary:hover { background: var(--bg-elev) !important; border-color: var(--accent) !important; color: var(--accent) !important; transform: translateY(-2px); } /* وضعیت‌های تیکت — کارت‌های آماری زیبا */ body .ticketstatus-row, body .aa-tkt-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; } body .ticketstatus-card, body .aa-tkt-stat-card { flex: 1 1 calc(20% - 12px); min-width: 140px; padding: 18px; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 16px; text-align: center; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; } body .ticketstatus-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 32px -10px var(--accent); } /* ============================================================ 🎯 v1.0.10c — فیکس قطعی dropdown position + همبرگر فقط موبایل ============================================================ */ /* ====== فیکس قطعی موقعیت dropdown ====== Bootstrap با Popper.js یک transform: translate3d() inline به dropdown اضافه می‌کنه که در RTL با direction: rtl باعث پرتاب dropdown به جای اشتباه می‌شه. ما با inset قطعی و transform: none این رو override می‌کنیم. */ body .aa-hdr-nav .dropdown { position: relative !important; } body .aa-hdr-nav .dropdown-menu { /* Reset همه چیز */ position: absolute !important; top: 100% !important; bottom: auto !important; inset-inline-start: auto !important; inset-inline-end: 0 !important; /* جلوی Popper transform رو بگیر */ transform: none !important; will-change: auto !important; /* margin از parent */ margin: 10px 0 0 0 !important; /* همه‌ی properties Popper inline رو override کن */ inset: auto !important; } /* در RTL، dropdown از سمت راست parent align می‌شه */ html[dir="rtl"] body .aa-hdr-nav .dropdown-menu, html[lang^="fa"] body .aa-hdr-nav .dropdown-menu { right: 0 !important; left: auto !important; transform: none !important; } /* در LTR، dropdown از سمت چپ parent align می‌شه */ html[dir="ltr"] body .aa-hdr-nav .dropdown-menu { left: 0 !important; right: auto !important; transform: none !important; } /* When Popper adds inline styles (Bootstrap 4.x), force override */ body .aa-hdr-nav .dropdown-menu[style*="transform"] { transform: none !important; } body .aa-hdr-nav .dropdown-menu[style*="position"] { position: absolute !important; } body .aa-hdr-nav .dropdown-menu[x-placement] { transform: none !important; } /* ====== فیکس قطعی خط سبز زیر منو ====== اطمینان از این که خط دقیقاً وسط همون nav-link قرار می‌گیره */ body .aa-hdr-nav .nav-link::before, body .aa-hdr-nav .nav-link::after { right: auto !important; left: 50% !important; transform: translateX(-50%) !important; } /* وقتی width تنظیم می‌شه، transform دوباره وسط می‌چینه */ body .aa-hdr-nav .nav-link:hover::after, body .aa-hdr-nav .nav-link.active::after, body .aa-hdr-nav .nav-link[aria-expanded="true"]::after { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: 70% !important; } body .aa-hdr-nav .nav-link:hover::before, body .aa-hdr-nav .nav-link.active::before, body .aa-hdr-nav .nav-link[aria-expanded="true"]::before { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: 100% !important; } /* ====== arrow کوچک بالای dropdown — جای درستش ====== */ body .aa-hdr-nav .dropdown-menu::before { content: ''; position: absolute; top: -8px; right: 24px; left: auto; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--bg-card); filter: drop-shadow(0 -1px 0 var(--border-strong)); } html[dir="ltr"] body .aa-hdr-nav .dropdown-menu::before { right: auto; left: 24px; } /* ====== همبرگر فقط در موبایل (< 992px) ====== */ body .aa-hdr-burger.d-xl-none { display: none !important; } @media (max-width: 991.98px) { body .aa-hdr-burger { display: inline-flex !important; } } /* در صفحات بزرگ‌تر از 992px همبرگر مخفی باشه */ @media (min-width: 992px) { body .aa-hdr-burger { display: none !important; } /* همچنین navbar collapse همیشه باز باشه در دسکتاپ */ body .aa-hdr-nav .collapse:not(.show) { display: flex !important; } body .aa-hdr-nav-inner { display: flex !important; } } /* ============================================================ 🎨 v1.0.10c — فوتر شیک‌تر و زیباتر ============================================================ */ body footer.footer, body .footer-wrap, body #footer { background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg) 100%); border-top: 1.5px solid var(--border); margin-top: 60px; padding: 50px 0 0; position: relative; color: var(--text); } body footer.footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.4; } body .aa-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; } body .aa-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; margin-bottom: 0; } @media (max-width: 991px) { body .aa-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 540px) { body .aa-footer-grid { grid-template-columns: 1fr; gap: 24px; } } body .aa-footer-col h4, body .aa-footer-col h5 { color: var(--text); font-size: 14.5px; font-weight: 900; margin-bottom: 14px; position: relative; padding-bottom: 10px; } body .aa-footer-col h4::after, body .aa-footer-col h5::after { content: ''; position: absolute; bottom: 0; right: 0; width: 32px; height: 3px; background: var(--grad); border-radius: 3px; } body .aa-footer-col ul { list-style: none; padding: 0; margin: 0; } body .aa-footer-col li { margin: 0 0 8px; } body .aa-footer-col li a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-mute) !important; font-size: 12.5px; font-weight: 600; text-decoration: none !important; transition: all 0.2s ease; padding: 4px 0; } body .aa-footer-col li a::before { content: '◂'; font-size: 10px; color: var(--accent); opacity: 0; transform: translateX(8px); transition: all 0.25s ease; } body .aa-footer-col li a:hover { color: var(--accent) !important; padding-right: 4px; } body .aa-footer-col li a:hover::before { opacity: 1; transform: translateX(0); } body .aa-footer-col li a svg, body .aa-footer-col li a i { font-size: 12px; opacity: 0.7; width: 14px; text-align: center; } body .aa-footer-col li a:hover svg, body .aa-footer-col li a:hover i { opacity: 1; } body .aa-footer-brand-col p { color: var(--text-mute); font-size: 12.5px; line-height: 2; margin: 12px 0 16px; } body .aa-footer-logo { max-height: 48px; width: auto; margin-bottom: 14px; } body .aa-footer-social { display: flex; gap: 8px; margin-top: 12px; } body .aa-footer-social a { width: 36px; height: 36px; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-mute) !important; text-decoration: none !important; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } body .aa-footer-social a svg { width: 16px; height: 16px; } body .aa-footer-social a:hover { background: var(--grad); border-color: transparent; color: #fff !important; transform: translateY(-3px); box-shadow: 0 10px 20px -6px var(--accent); } body .aa-footer-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; color: var(--text-mute); font-size: 12.5px; line-height: 1.7; } body .aa-footer-contact-item .aa-fc-ico { width: 32px; height: 32px; background: var(--grad-soft); border: 1px solid var(--border-strong); border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; } body .aa-footer-contact-item .aa-fc-ico svg { width: 14px; height: 14px; } body .aa-footer-bottom { border-top: 1px solid var(--border); padding: 18px 0; margin-top: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } body .aa-footer-copyright { color: var(--text-mute); font-size: 12px; font-weight: 600; } body .aa-footer-copyright .aa-fc-heart { color: #ff4757; margin: 0 4px; animation: aaHeart 1.5s ease-in-out infinite; display: inline-block; } @keyframes aaHeart { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } body .aa-footer-bottom-links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } body .aa-footer-bottom-links a { color: var(--text-mute) !important; font-size: 12px; font-weight: 600; text-decoration: none !important; transition: color 0.2s; } body .aa-footer-bottom-links a:hover { color: var(--accent) !important; } body .aa-footer-payment-icons { display: flex; gap: 8px; align-items: center; } body .aa-footer-payment-icons .aa-pay-ico { width: 36px; height: 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--text-mute); letter-spacing: -0.5px; }