/* ════════════════════════════════════════════════════════════════
   SAS WHMCS THEME V4 — Glass Morphism · Google 2026
   مطابق 100% لثيم WordPress SAS Enterprise
   ════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

/* ── 1. المتغيرات — نفس نظام WordPress SAS ── */
:root {
    --sas-main: #0284c7;
    --sas-main-rgb: 2, 132, 199;
    --sas-sec: #0ea5e9;
    --sas-hover: #0369a1;
    --sas-bg: #F8FAFC;
    --sas-text: #1E293B;
    --sas-gold: #F59E0B;
    --sas-radius: 16px;
    --sas-blur: 16px;
    --sas-font: 'Cairo', sans-serif;
    --glass-bg: rgba(255, 255, 255, 0.90);
    --glass-border: 1px solid rgba(0, 0, 0, 0.06);
    --glass-shadow: 0 8px 32px rgba(2, 132, 199, 0.10);
    --card-bg: rgba(255, 255, 255, 0.85);
    --shadow-soft: 0 20px 40px rgba(0,0,0,0.05);
    --radius-md: 24px;
    --radius-lg: 50px;
}

/* ── 2. إعادة الضبط + RTL ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
    direction: rtl !important;
    text-align: right !important;
    font-family: var(--sas-font) !important;
    background-color: var(--sas-bg);
    color: var(--sas-text);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none !important; color: var(--sas-main); transition: 0.3s; }
a:hover { color: var(--sas-hover); }
h1,h2,h3,h4,h5,h6 { font-family: var(--sas-font) !important; font-weight: 800; color: var(--sas-text); }
::selection { background: var(--sas-main); color: #fff; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--sas-bg); }
::-webkit-scrollbar-thumb { background: var(--sas-main); border-radius: 10px; }

.fas,.far,.fab,.fa,.glyphicon { margin-left: 6px !important; margin-right: 0 !important; display: inline-block; }
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,
.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 { float: right !important; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; width: 100%; }

/* ── 3. الهيدر — Glass Morphism (مطابق للوردبريس) ── */
.sas-main-header {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--sas-blur)) !important;
    -webkit-backdrop-filter: blur(var(--sas-blur)) !important;
    border-bottom: var(--glass-border);
    box-shadow: var(--glass-shadow);
    height: 80px; width: 100%;
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 9999;
    display: flex; align-items: center;
    transition: all 0.3s ease;
}
.sas-main-header.scrolled {
    box-shadow: 0 4px 30px rgba(0,0,0,0.12);
    height: 68px;
}
.sas-container-header {
    max-width: 1240px !important; width: 100% !important;
    margin: 0 auto !important; padding: 0 20px !important;
}
.sas-header-inner {
    display: flex; justify-content: space-between;
    align-items: center; width: 100%; direction: rtl;
}
.sas-logo img { max-height: 48px; width: auto; transition: 0.3s; }
.sas-logo a { color: var(--sas-main) !important; font-size: 22px; font-weight: 900; text-decoration: none !important; display: flex; align-items: center; }

.sas-desktop-nav { flex: 1; display: flex; justify-content: center; }
.sas-desktop-nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sas-desktop-nav a {
    color: var(--sas-text) !important; font-size: 14px; font-weight: 700;
    text-decoration: none !important; padding: 10px 16px; border-radius: var(--sas-radius);
    transition: 0.3s; display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.sas-desktop-nav a:hover { color: var(--sas-main) !important; background: rgba(var(--sas-main-rgb), 0.08); }
.sas-desktop-nav a i { font-size: 13px; color: var(--sas-main); margin-left: 4px !important; width: auto; }

.sas-controls { display: flex; align-items: center; gap: 8px; }
.sas-btn-icon {
    background: rgba(var(--sas-main-rgb), 0.1) !important;
    border: none !important; color: var(--sas-main) !important;
    width: 42px; height: 42px; border-radius: var(--sas-radius);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: 0.3s; font-size: 16px;
}
.sas-btn-icon:hover { background: rgba(var(--sas-main-rgb), 0.18) !important; }
.sas-btn-icon i { margin: 0 !important; }
.sas-btn-fill {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, var(--sas-main), var(--sas-sec)) !important;
    color: #fff !important; padding: 9px 20px; border-radius: var(--radius-lg);
    font-size: 13px; font-weight: 700; font-family: var(--sas-font);
    border: none; transition: 0.3s; white-space: nowrap;
    box-shadow: 0 4px 15px rgba(var(--sas-main-rgb), 0.3);
}
.sas-btn-fill:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(var(--sas-main-rgb), 0.4); color: #fff !important; }
.sas-btn-fill i { margin: 0 !important; }
.sas-btn-soft {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(var(--sas-main-rgb), 0.08) !important;
    color: var(--sas-main) !important; padding: 9px 18px; border-radius: var(--radius-lg);
    font-size: 13px; font-weight: 700; border: none; transition: 0.3s;
}
.sas-btn-soft:hover { background: rgba(var(--sas-main-rgb), 0.15) !important; }
.sas-burger { display: none !important; }

/* ── 4. شاشة البحث (مطابق للوردبريس) ── */
.sas-search-overlay {
    position: fixed; inset: 0;
    background: var(--glass-bg); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    z-index: 100000; opacity: 0; visibility: hidden; transition: 0.4s;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sas-search-overlay.open { opacity: 1; visibility: visible; }
.sas-search-close {
    position: absolute; top: 24px; left: 24px;
    background: rgba(0,0,0,0.05); border: none; color: var(--sas-text);
    width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 20px; transition: 0.3s;
}
.sas-search-close:hover { background: rgba(239,68,68,0.1); color: #ef4444; }
.sas-search-close i { margin: 0 !important; }
.sas-search-form { width: 85%; max-width: 600px; text-align: center; display: flex; flex-direction: column; gap: 20px; align-items: center; }
.sas-search-input {
    width: 100% !important; border: none !important; background: transparent !important;
    border-bottom: 3px solid var(--sas-main) !important;
    font-size: 28px !important; font-weight: 900 !important; color: var(--sas-text) !important;
    padding: 15px 0 !important; text-align: center !important; outline: none !important;
    border-radius: 0 !important; box-shadow: none !important;
    font-family: var(--sas-font) !important;
}
.sas-search-input::placeholder { color: rgba(0,0,0,0.2); }
.sas-search-btn { padding: 14px 36px !important; font-size: 16px !important; border-radius: var(--radius-lg) !important; }

/* ── 5. الدرور الجانبي (مطابق للوردبريس) ── */
.sas-drawer {
    position: fixed; top: 0; right: -100%; width: 280px; height: 100%;
    background: #fff; z-index: 100001;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0; box-shadow: -5px 0 25px rgba(0,0,0,0.1);
    border-radius: var(--sas-radius) 0 0 var(--sas-radius);
    display: flex; flex-direction: column; overflow-y: auto;
}
.sas-drawer.open { right: 0; }
.sas-overlay-bg {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 100000;
    opacity: 0; visibility: hidden; transition: 0.4s; backdrop-filter: blur(5px);
}
.sas-overlay-bg.open { opacity: 1; visibility: visible; }
.sas-drawer-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 22px; border-bottom: var(--glass-border);
}
.sas-drawer-brand { font-weight: 900; color: var(--sas-main); font-size: 20px; }
.sas-drawer-close {
    background: #f5f5f5; border: none; width: 35px; height: 35px;
    border-radius: 50%; cursor: pointer; font-size: 16px;
    display: flex; align-items: center; justify-content: center; transition: 0.3s;
}
.sas-drawer-close:hover { background: #fee2e2; color: #ef4444; }
.sas-drawer-close i { margin: 0 !important; }
.mobile-menu { flex: 1; padding: 12px; }
.mobile-menu ul { list-style: none; padding: 0; margin: 0; }
.mobile-menu li { margin: 0; }
.mobile-menu li.drawer-sep { height: 1px; background: rgba(0,0,0,0.06); margin: 10px 0; }
.mobile-menu a {
    color: var(--sas-text) !important; text-decoration: none !important;
    font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: var(--sas-radius); transition: 0.3s;
}
.mobile-menu a:hover { background: rgba(var(--sas-main-rgb), 0.06); color: var(--sas-main) !important; }
.mobile-menu a i { color: var(--sas-main); width: 22px; text-align: center; margin: 0 !important; font-size: 15px; }
.drawer-logout { color: #ef4444 !important; }
.drawer-logout i { color: #ef4444 !important; }

/* ── 6. المحتوى الرئيسي ── */
.titan-app-container { padding-top: 100px; min-height: calc(100vh - 200px); padding-bottom: 40px; }
#main-body { padding: 0; }

/* ── 7. الكروت — Glass (مطابق للوردبريس) ── */
.main-content .card, .sidebar .card, .tiles .tile,
.login-container .card, .panel, .well,
.stat-card, .service-card, .glass-effect, .widget {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--sas-blur)) !important;
    -webkit-backdrop-filter: blur(var(--sas-blur)) !important;
    border: var(--glass-border) !important;
    border-radius: var(--sas-radius) !important;
    box-shadow: var(--glass-shadow) !important;
    margin-bottom: 24px !important;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.main-content .card:hover, .panel:hover, .stat-card:hover, .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(var(--sas-main-rgb), 0.15) !important;
}
.card-header, .panel-heading {
    background: rgba(var(--sas-main-rgb), 0.04) !important;
    border-bottom: var(--glass-border) !important;
    padding: 16px 24px !important; font-weight: 800 !important;
    font-family: var(--sas-font) !important; color: var(--sas-text) !important;
}
.card-body, .panel-body { padding: 24px !important; }

/* Sidebar */
.list-group-item {
    background: transparent !important; border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    padding: 12px 20px !important; font-weight: 600; transition: 0.2s;
}
.list-group-item:hover { background: rgba(var(--sas-main-rgb), 0.04) !important; }
.list-group-item.active {
    background: rgba(var(--sas-main-rgb), 0.06) !important;
    color: var(--sas-main) !important; font-weight: 800;
    border-right: 3px solid var(--sas-main) !important;
}
.list-group-item .badge { float: left !important; background: var(--sas-main); border-radius: 10px; }

/* ── 8. الجداول ── */
.table { width: 100% !important; }
.table th {
    text-align: right !important; background: rgba(var(--sas-main-rgb), 0.04);
    color: #64748b; font-weight: 700; font-size: 13px;
    border-top: none !important; border-bottom: 2px solid rgba(var(--sas-main-rgb), 0.1) !important;
    padding: 14px 16px !important;
}
.table td {
    text-align: right !important; border-top: 1px solid rgba(0,0,0,0.04) !important;
    vertical-align: middle !important; padding: 14px 16px !important; font-size: 14px;
}
.table tr:hover td { background: rgba(var(--sas-main-rgb), 0.02); }

/* ── 9. الأزرار (مطابق للوردبريس) ── */
.btn { font-family: var(--sas-font) !important; font-weight: 700 !important; border-radius: var(--radius-lg) !important; transition: 0.3s !important; border: none !important; }
.btn-primary, .btn-add-to-cart, .btn-order-now, button[type="submit"] {
    background: linear-gradient(135deg, var(--sas-main), var(--sas-sec)) !important;
    color: #fff !important; box-shadow: 0 4px 15px rgba(var(--sas-main-rgb), 0.3) !important;
}
.btn-primary:hover, button[type="submit"]:hover {
    box-shadow: 0 8px 25px rgba(var(--sas-main-rgb), 0.4) !important;
    transform: translateY(-2px);
}
.btn-success { background: #10b981 !important; color: #fff !important; }
.btn-danger { background: #ef4444 !important; color: #fff !important; }
.btn-warning { background: var(--sas-gold) !important; color: #fff !important; }
.btn-default { background: rgba(var(--sas-main-rgb), 0.08) !important; color: var(--sas-main) !important; }
.btn-default:hover { background: rgba(var(--sas-main-rgb), 0.15) !important; }

/* ── 10. الفورمز ── */
.form-control, select, textarea {
    font-family: var(--sas-font) !important;
    border: 1px solid rgba(0,0,0,0.1) !important; border-radius: var(--sas-radius) !important;
    padding: 12px 16px !important; font-size: 14px !important;
    background: rgba(255,255,255,0.9) !important; color: var(--sas-text) !important;
    direction: rtl; text-align: right; transition: 0.3s;
}
.form-control:focus, select:focus, textarea:focus {
    border-color: var(--sas-main) !important;
    box-shadow: 0 0 0 4px rgba(var(--sas-main-rgb), 0.1) !important;
    outline: none !important;
}
label { font-weight: 700 !important; font-size: 13px !important; margin-bottom: 6px !important; }

/* ── 11. التنبيهات + الباجات ── */
.alert { border: none !important; border-radius: var(--sas-radius) !important; padding: 14px 20px !important; font-weight: 600 !important; }
.alert-success { background: rgba(16,185,129,0.1) !important; color: #065f46 !important; }
.alert-danger { background: rgba(239,68,68,0.1) !important; color: #991b1b !important; }
.alert-warning { background: rgba(245,158,11,0.1) !important; color: #92400e !important; }
.alert-info { background: rgba(var(--sas-main-rgb),0.08) !important; color: var(--sas-main) !important; }

.label, .badge { font-family: var(--sas-font) !important; font-weight: 700 !important; border-radius: var(--radius-lg) !important; padding: 4px 12px !important; font-size: 11px !important; }
.label-success, .badge-success, .label-active { background: rgba(16,185,129,0.12) !important; color: #065f46 !important; }
.label-danger, .badge-danger, .label-unpaid { background: rgba(239,68,68,0.12) !important; color: #991b1b !important; }
.label-warning, .badge-warning, .label-customer-reply { background: rgba(245,158,11,0.12) !important; color: #92400e !important; }
.label-info, .badge-info, .label-answered { background: rgba(var(--sas-main-rgb),0.1) !important; color: var(--sas-main) !important; }
.label-default, .label-closed { background: rgba(100,116,139,0.1) !important; color: #475569 !important; }
.label-paid { background: rgba(16,185,129,0.12) !important; color: #065f46 !important; }

/* ── 12. بحث الدومين ── */
.domain-lookup-container {
    background: var(--glass-bg) !important; backdrop-filter: blur(10px);
    border: var(--glass-border) !important; border-radius: var(--radius-md) !important;
    box-shadow: var(--glass-shadow) !important; padding: 40px !important; margin-bottom: 30px;
}
.domain-lookup-container .input-group { display: flex; }
.domain-lookup-container .form-control {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0 !important;
    height: 52px !important; border-left: none !important; padding-right: 25px !important;
}
.domain-lookup-container .input-group-btn:last-child > .btn {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg) !important;
    height: 52px !important; padding: 0 30px !important;
}
.spotlight-tlds { text-align: center; margin-top: 20px; }
.spotlight-tld {
    background: rgba(255,255,255,0.7) !important; border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 15px !important; display: inline-block; float: none !important;
    margin: 5px !important; transition: 0.3s;
}
.spotlight-tld:hover, .spotlight-tld.active {
    background: var(--sas-main) !important; color: #fff !important; transform: translateY(-3px);
}

/* ── 13. Pagination ── */
.pagination > li > a, .pagination > li > span {
    border-radius: var(--sas-radius) !important; margin: 0 3px;
    font-weight: 700; color: var(--sas-text); border: var(--glass-border);
}
.pagination > .active > a { background: var(--sas-main) !important; border-color: var(--sas-main) !important; color: #fff !important; }

/* ── 14. Dashboard Tiles ── */
.tiles .tile { transition: 0.3s; border-radius: var(--sas-radius) !important; }
.tiles .tile:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(var(--sas-main-rgb), 0.15) !important; }
.tile-link:hover { text-decoration: none !important; }

/* ── 15. Login ── */
.login-page .titan-app-container { display: flex; align-items: center; justify-content: center; min-height: 80vh; }
.login-container { max-width: 450px; margin: 0 auto; }
.login-container .card { padding: 40px !important; text-align: center; }

/* ══════════════════════════════════════════════
   16. الفوتر — Glass (مطابق 100% لـ titan-footer-v3)
══════════════════════════════════════════════ */
.titan-footer-v3 { padding: 60px 0 30px; position: relative; background: transparent; }
.footer-glass-box {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(var(--sas-blur)) !important;
    -webkit-backdrop-filter: blur(var(--sas-blur)) !important;
    border: var(--glass-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 50px 44px; box-shadow: var(--glass-shadow);
}
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; }
.footer-title {
    color: var(--sas-main); font-weight: 900; font-size: 18px;
    margin-bottom: 22px; position: relative; padding-bottom: 12px;
}
.footer-title::after {
    content: ''; position: absolute; bottom: 0; right: 0;
    width: 35px; height: 3px; background: var(--sas-main); border-radius: 2px;
}
.footer-bio-text { color: var(--sas-text); opacity: 0.75; font-size: 14px; line-height: 1.9; margin-bottom: 20px; }
.sas-social-icons { display: flex; gap: 10px; flex-wrap: wrap; }
.social-glass-btn {
    width: 40px; height: 40px; border-radius: var(--sas-radius);
    background: rgba(var(--sas-main-rgb), 0.08);
    display: flex; align-items: center; justify-content: center;
    color: var(--sas-main) !important; transition: 0.3s; font-size: 16px;
}
.social-glass-btn:hover { background: var(--sas-main); color: #fff !important; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(var(--sas-main-rgb), 0.25); }
.social-glass-btn i { margin: 0 !important; }
.footer-links-list { list-style: none; padding: 0; margin: 0; }
.footer-links-list li { margin-bottom: 10px; }
.footer-links-list a {
    color: var(--sas-text) !important; font-weight: 700; font-size: 14px;
    transition: 0.3s; display: flex; align-items: center; gap: 8px;
}
.footer-links-list a:hover { color: var(--sas-main) !important; padding-right: 5px; }
.footer-links-list a i { font-size: 10px; color: var(--sas-main); margin: 0 !important; }
.footer-contact-cards { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }
.fcc-item { display: flex; align-items: flex-start; gap: 12px; }
.fcc-icon {
    width: 42px; height: 42px; border-radius: var(--sas-radius);
    background: rgba(var(--sas-main-rgb), 0.06);
    display: flex; align-items: center; justify-content: center;
    color: var(--sas-main); font-size: 16px; flex-shrink: 0;
}
.fcc-icon i { margin: 0 !important; }
.fcc-label { font-size: 11px; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 2px; }
.fcc-value { font-size: 14px; font-weight: 700; color: var(--sas-text) !important; transition: 0.3s; }
.fcc-value:hover { color: var(--sas-main) !important; }
.tags-wrapper { display: flex; flex-wrap: wrap; gap: 8px; }
.sas-tag-footer {
    background: rgba(var(--sas-main-rgb), 0.05); color: var(--sas-text);
    padding: 7px 14px; border-radius: 12px; font-size: 12px; font-weight: 700;
    border: 1px solid rgba(0,0,0,0.03); display: inline-flex; align-items: center; gap: 5px;
}
.sas-tag-footer i { margin: 0 !important; color: var(--sas-main); font-size: 11px; }
.sas-tag-footer:hover { background: var(--sas-main); color: #fff; }
.footer-bottom-sas { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.05); }
.centered-credits { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.rights { color: #64748b; font-size: 14px; font-weight: 700; margin: 0; }
.rights span { color: var(--sas-main); }
.designer-box { font-size: 13px; color: #94a3b8; font-weight: 600; }
.designer-box a { color: var(--sas-main) !important; font-weight: 800; }

/* ── 17. أزرار عائمة (مطابق للوردبريس) ── */
.sas-crystal-actions { position: fixed; bottom: 30px; right: 30px; z-index: 9998; display: flex; flex-direction: column; gap: 12px; }
.sas-glass-fab {
    width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff !important; text-decoration: none !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2); font-size: 28px; transition: 0.3s;
}
.sas-glass-fab:hover { transform: scale(1.12); color: #fff !important; }
.sas-glass-fab i { margin: 0 !important; }
.fab-wa { background: #22C55E; }
.fab-cl { background: var(--sas-main); }
.sas-alive-anim { animation: t-pulse 3s infinite; }
@keyframes t-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* ── 18. إخفاء عناصر WHMCS الافتراضية ── */
.navbar, .navbar-fixed-top { display: none !important; }
.footerdivider { display: none !important; }
#copyright, footer.footer { display: none !important; }

/* ── 19. Responsive ── */
@media (max-width: 991px) {
    .sas-desktop-nav { display: none !important; }
    .sas-burger { display: flex !important; align-items: center; justify-content: center; }
    .sas-main-header { height: 68px; }
    .sas-logo img { max-height: 38px; }
    .sas-logo a { font-size: 18px; }
    .titan-app-container { padding-top: 88px; }
    .hide-mobile { display: none !important; }
}
@media (max-width: 768px) {
    .row { display: block; }
    .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,
    .col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 { float: none !important; width: 100% !important; }
    .footer-glass-box { padding: 36px 24px; }
    .footer-grid { text-align: center; }
    .footer-title::after { right: 50%; transform: translateX(50%); }
    .footer-links-list a { justify-content: center; }
    .tags-wrapper { justify-content: center; }
    .sas-social-icons { justify-content: center; }
    .fcc-item { justify-content: center; }
    .domain-lookup-container { padding: 24px !important; }
    .spotlight-tld { width: 45% !important; margin: 2% !important; }
    .sas-glass-fab { width: 52px; height: 52px; font-size: 24px; }
    .sas-crystal-actions { bottom: 20px; right: 20px; }
}

/* ── 20. Breadcrumb + Misc ── */
.breadcrumb { background: transparent !important; padding: 8px 0 !important; font-size: 13px; }
.styled_title h1, .styled_title h2, .styled_title h3 {
    font-size: 22px; font-weight: 800; margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 2px solid rgba(var(--sas-main-rgb), 0.12);
}

@media print {
    .sas-main-header, .titan-footer-v3, .sas-drawer, .sas-overlay-bg,
    .sas-crystal-actions, .sas-search-overlay { display: none !important; }
    .titan-app-container { padding-top: 0 !important; }
}

/* ════════ LIVE REFRESH V5 — live.com.eg sky identity (#0284c7) ════════ */
:root{
  --sas-main:#0284c7; --sas-main-rgb:2,132,199;
  --sas-sec:#0ea5e9; --sas-hover:#0369a1; --sas-deep:#075985;
  --glass-shadow:0 10px 36px rgba(2,132,199,.10);
}
/* soft sky background like the main site */
html,body{ background:
   radial-gradient(1100px 560px at 88% -8%, rgba(14,165,233,.10), transparent 60%),
   radial-gradient(820px 460px at -8% 2%, rgba(2,132,199,.06), transparent 55%),
   var(--sas-bg) !important; background-attachment:fixed; }
/* header accent bar */
.sas-main-header{ box-shadow:0 6px 22px rgba(2,132,199,.09) !important; border-bottom:1px solid rgba(2,132,199,.10) !important; }
.sas-main-header::before{ content:""; position:absolute; top:0; right:0; left:0; height:3px;
  background:linear-gradient(90deg,var(--sas-main),var(--sas-sec),var(--sas-gold)); }
.sas-desktop-nav a.active{ color:var(--sas-main)!important; background:rgba(var(--sas-main-rgb),.10); }
/* headings */
h1,.styled_title h1,.styled_title h2{ color:var(--sas-deep); }
.card-header,.panel-heading{ background:linear-gradient(135deg, rgba(var(--sas-main-rgb),.07), rgba(14,165,233,.03)) !important; color:var(--sas-deep)!important; }
/* buttons */
.btn-primary,.btn-add-to-cart,.btn-order-now,button[type=submit],.sas-btn-fill{
  background:linear-gradient(135deg,var(--sas-main),var(--sas-sec)) !important;
  box-shadow:0 6px 18px rgba(var(--sas-main-rgb),.28) !important; }
.btn-primary:hover,.sas-btn-fill:hover,button[type=submit]:hover{ box-shadow:0 10px 26px rgba(var(--sas-main-rgb),.40)!important; }
/* store + package cards */
#order-standard_cart .product,.product-group .panel,.packages .package,.cartbox,.order-summary,.summary-container .panel{
  border-radius:var(--radius-md)!important; border:var(--glass-border)!important;
  background:var(--glass-bg)!important; box-shadow:var(--glass-shadow)!important; transition:.3s; }
#order-standard_cart .product:hover,.packages .package:hover{ transform:translateY(-6px); box-shadow:0 18px 46px rgba(var(--sas-main-rgb),.16)!important; }
.product .panel-heading,.product h3,.package-name{ color:var(--sas-deep)!important; font-weight:900!important; }
.product .panel-heading{ background:linear-gradient(135deg,rgba(var(--sas-main-rgb),.08),rgba(14,165,233,.04))!important; }
.price,.package-price,.cart-total,.product-pricing .price,.summary .total{ color:var(--sas-main)!important; font-weight:900!important; }
.product-feature-list li i,.package li i,.product ul li i{ color:var(--sas-main)!important; }
/* client area */
.account-overview-panel .number,.stat-value,.clientareahome .number{ color:var(--sas-main)!important; font-weight:900!important; }
.panel-title,.client-home-panels .panel-heading{ color:var(--sas-deep)!important; }
/* invoice html view */
.invoice-container,.invoice{ border-radius:var(--radius-md)!important; box-shadow:var(--glass-shadow)!important; }
.invoice-header,.invoice-title{ color:var(--sas-deep)!important; }
/* footer CTA buttons (real contact) */
.footer-cta-btns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.footer-cta-btns a{ display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:50px; font-weight:800; font-size:13px; transition:.3s; }
.fcb-wa{ background:#22C55E; color:#fff!important; }
.fcb-tel{ background:rgba(var(--sas-main-rgb),.10); color:var(--sas-main)!important; }
.footer-cta-btns a:hover{ transform:translateY(-2px); }

/* ════════ V6 — MOBILE & POLISH FIXES (defect pass) ════════ */
/* 1) selects: kill iOS faded text, force dark + readable */
select,select.form-control,.sidebar select,.panel select,.order-summary select,.cart select,#inputCurrency,#inputBillingCycle{
  color:#1e293b!important;-webkit-text-fill-color:#1e293b!important;opacity:1!important;
  font-weight:700!important;background-color:#fff!important;text-align:right!important;
  border:1px solid rgba(2,132,199,.20)!important;border-radius:14px!important;padding:11px 14px!important;
}
select option{color:#1e293b!important;background:#fff!important;}
/* 2) sidebar items: no clipping, right aligned, tighter */
.sidebar .list-group-item,.sidebar .list-group-item a,.sidebar .panel a,.sidebar a{
  white-space:normal!important;word-break:break-word;text-align:right!important;
}
.sidebar .panel-body{padding:14px!important;}
.sidebar .panel,.sidebar .card{margin-bottom:16px!important;}
/* 3) client-area tiles & panels -> unified sky identity */
.tiles .tile{border-top:3px solid var(--sas-main)!important;border-radius:var(--sas-radius)!important;}
.tile.blue,.tile.green,.tile.red,.tile.orange,.tile.purple,.tile.teal,.tile.dark,.tile.yellow,.tile.info,.tile.navy{border-top-color:var(--sas-main)!important;}
.tiles .tile .tile-icon,.tiles .tile i,.tile .stat-icon,.tile-content i,.home-panels i,.tile a i{color:var(--sas-main)!important;}
.panel-primary,.panel-info,.panel-success,.panel-warning,.panel-danger{border-color:rgba(2,132,199,.12)!important;}
.panel-primary>.panel-heading,.panel-info>.panel-heading{
  background:linear-gradient(135deg,rgba(2,132,199,.08),rgba(14,165,233,.04))!important;color:var(--sas-deep)!important;border-bottom:var(--glass-border)!important;}
img[src=""]{display:none!important;}
/* 4) mobile layout: products/content first, sidebar after */
@media (max-width:768px){
  .titan-app-container > .container > .row{display:flex!important;flex-direction:column;}
  .titan-app-container > .container > .row > .primary-content{order:1;width:100%!important;}
  .titan-app-container > .container > .row > .sidebar{order:2;width:100%!important;margin-top:18px;}
  h1,.styled_title h1,.styled_title h2{font-size:24px!important;line-height:1.45!important;}
  .card-body,.panel-body{padding:18px!important;}
  .footer-glass-box{padding:30px 18px!important;}
  .titan-app-container{padding-top:84px!important;}
  .tiles .tile{margin-bottom:14px!important;}
}

/* ════════ V7 — standard_cart store mobile order + sidebar polish ════════ */
@media (max-width:768px){
  #order-standard_cart > .row{display:flex!important;flex-direction:column;}
  #order-standard_cart > .row > .cart-body{order:1!important;width:100%!important;}
  #order-standard_cart > .row > .cart-sidebar{order:2!important;width:100%!important;margin-top:18px;}
}
.cart-sidebar .list-group-item,.cart-sidebar a,.cart-sidebar .panel-sidebar a{white-space:normal!important;text-align:right!important;word-break:break-word;}
.cart-sidebar .panel-heading,.card-sidebar .card-header,.cart-sidebar .card-header{color:var(--sas-deep)!important;}
.cart-sidebar .panel,.cart-sidebar .card{margin-bottom:16px!important;}
/* ═══════════ DARK LUXE — توحيد WHMCS مع هوية صفحة التسعير ═══════════ */
body {
  background:
    radial-gradient(900px 420px at 88% -5%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(700px 380px at 2% 12%, rgba(217,70,239,.10), transparent 55%),
    #0c0a1d !important;
  color: #e7e9f4 !important;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3 { color: #f4f5fd !important; }
p, li, span, td, th, label, .control-label { color: inherit; }
a { color: #c4b5fd !important; }
a:hover { color: #e9d5ff !important; }

/* الهيدر */
#header, nav.navbar, .navbar-main {
  background: rgba(19,16,43,.92) !important;
  backdrop-filter: blur(10px);
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 8px 30px -18px rgba(0,0,0,.8) !important;
}
#header .navbar-nav > li > a, .navbar-main .nav-link { color: #cfd3ea !important; }
#header .navbar-nav > li > a:hover, .navbar-main .nav-link:hover { color: #fff !important; background: rgba(139,92,246,.15) !important; }
.dropdown-menu { background: #1a1635 !important; border: 1px solid rgba(255,255,255,.1) !important; }
.dropdown-menu > li > a, .dropdown-item { color: #cfd3ea !important; }
.dropdown-menu > li > a:hover, .dropdown-item:hover { background: rgba(139,92,246,.18) !important; color: #fff !important; }

/* البطاقات */
.card, .panel, .tile, .well, .jumbotron, .moduleoutput, .tablebg, .product, .package, .pricing-table, .summary-container {
  background: #15122e !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 40px -24px rgba(0,0,0,.7) !important;
  color: #e7e9f4 !important;
}
.card-header, .panel-heading, .card-footer, .panel-footer {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #f4f5fd !important;
}

/* الأزرار */
.btn-primary, .btn-success, .btn-styled, .btn.checkout, #btnCompleteCheckout, .btn-order-now {
  background: linear-gradient(120deg, #6366f1, #8b5cf6 50%, #d946ef) !important;
  border: 0 !important; color: #fff !important;
  border-radius: 12px !important; font-weight: 800 !important;
  box-shadow: 0 10px 26px -10px rgba(167,70,239,.5) !important;
}
.btn-primary:hover, .btn-success:hover { filter: brightness(1.1); }
.btn-default, .btn-secondary {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #e7e9f4 !important; border-radius: 12px !important;
}
.btn-default:hover, .btn-secondary:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }

/* الحقول */
.form-control, select, textarea, input[type=text], input[type=email], input[type=password], input[type=tel] {
  background: rgba(255,255,255,.05) !important;
  border: 1.5px solid rgba(255,255,255,.14) !important;
  color: #f4f5fd !important; border-radius: 12px !important;
}
.form-control:focus, input:focus, select:focus {
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 4px rgba(139,92,246,.2) !important;
}
.form-control::placeholder { color: rgba(255,255,255,.35) !important; }
select option { background: #15122e; color: #f4f5fd; }
.input-group-addon, .input-group-text { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; color: #cfd3ea !important; }

/* الجداول */
.table, .table td, .table th { color: #e7e9f4 !important; border-color: rgba(255,255,255,.08) !important; }
.table thead th { background: rgba(255,255,255,.04) !important; color: #aab0d0 !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.025) !important; }
.table-hover tbody tr:hover { background: rgba(139,92,246,.10) !important; }

/* القوائم الجانبية */
.list-group-item { background: #15122e !important; border-color: rgba(255,255,255,.07) !important; color: #cfd3ea !important; }
.list-group-item:hover { background: rgba(139,92,246,.12) !important; color: #fff !important; }
.list-group-item.active { background: rgba(139,92,246,.18) !important; color: #e9d5ff !important; border-right: 3px solid #a78bfa !important; }
.panel-sidebar .panel-heading, .sidebar .card-header {
  background: linear-gradient(120deg, #6366f1, #a855f7) !important; color: #fff !important;
}

/* التنبيهات */
.alert-success { background: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.3) !important; color: #6ee7b7 !important; }
.alert-info { background: rgba(99,102,241,.14) !important; border-color: rgba(129,140,248,.3) !important; color: #c7d2fe !important; }
.alert-warning { background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.3) !important; color: #fcd34d !important; }
.alert-danger { background: rgba(244,63,94,.12) !important; border-color: rgba(244,63,94,.3) !important; color: #fda4af !important; }

/* عناصر عامة */
.breadcrumb { background: transparent !important; }
.breadcrumb a, .breadcrumb li { color: #9298bd !important; }
.pagination > li > a, .page-link { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.12) !important; color: #e7e9f4 !important; }
.pagination > .active > a, .page-item.active .page-link { background: linear-gradient(120deg,#6366f1,#d946ef) !important; border: 0 !important; }
.modal-content { background: #15122e !important; color: #e7e9f4 !important; border: 1px solid rgba(255,255,255,.1) !important; }
.modal-header, .modal-footer { border-color: rgba(255,255,255,.08) !important; }
.nav-tabs { border-color: rgba(255,255,255,.1) !important; }
.nav-tabs > li > a, .nav-tabs .nav-link { color: #9298bd !important; }
.nav-tabs > li.active > a, .nav-tabs .nav-link.active { background: transparent !important; color: #e9d5ff !important; border-bottom: 3px solid #a78bfa !important; }
hr { border-color: rgba(255,255,255,.08) !important; }
.text-muted, small { color: #9298bd !important; }
#footer, .footer { background: #0a0818 !important; color: #7177a0 !important; border-top: 1px solid rgba(255,255,255,.06); }
.product header, .package .package-name, .pricing-table .title { background: linear-gradient(120deg,#6366f1,#8b5cf6 50%,#d946ef) !important; color:#fff !important; }
.product .price, .package .price { color: #e9d5ff !important; }
.well, pre, code { background: rgba(255,255,255,.04) !important; color: #e7e9f4 !important; }
/* ═══════════ /DARK LUXE ═══════════ */
/* ═══ STORE CARDS REBUILD — شبكة متوازنة ═══ */
.cart-body .products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px !important;
  align-items: stretch;
}
.cart-body .products .product {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  background: #15122e !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 18px 44px -26px rgba(0,0,0,.8) !important;
  transition: transform .18s ease, border-color .18s ease;
  text-align: center;
}
.cart-body .products .product:hover {
  transform: translateY(-5px);
  border-color: rgba(167,139,250,.55) !important;
  box-shadow: 0 26px 60px -24px rgba(139,92,246,.45) !important;
}
.cart-body .product header {
  background: linear-gradient(120deg,#6366f1,#8b5cf6 55%,#d946ef) !important;
  padding: 20px 16px !important;
  margin: 0 !important;
  border: 0 !important;
}
.cart-body .product header h3, .cart-body .product header span, .cart-body .product header * {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 19px;
}
.cart-body .product .product-desc {
  flex: 1;
  padding: 20px 22px !important;
  color: #cfd3ea !important;
  font-size: 14.5px;
  line-height: 2.1 !important;
  text-align: center !important;
  width: 100% !important;
  float: none !important;
}
.cart-body .product .product-desc * { color: #cfd3ea !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.cart-body .product .product-pricing {
  width: 100% !important;
  float: none !important;
  background: rgba(255,255,255,.04) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding: 18px 16px !important;
  color: #e9d5ff !important;
  font-weight: 800 !important;
  font-size: 24px !important;
}
.cart-body .product .product-pricing .price, .cart-body .product .product-pricing span { color: #e9d5ff !important; }
.cart-body .product .product-pricing .cycle, .cart-body .product .product-pricing small { color: #9298bd !important; font-size: 13px !important; font-weight: 600 !important; }
.cart-body .product a.btn, .cart-body .product .btn {
  display: block !important;
  margin: 0 22px 22px !important;
  padding: 13px !important;
  border-radius: 14px !important;
  background: linear-gradient(120deg,#6366f1,#d946ef) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  border: 0 !important;
  box-shadow: 0 12px 26px -12px rgba(217,70,239,.5);
}
.cart-body .product a.btn:hover { filter: brightness(1.12); }
.cart-body .sub-heading span, .cart-body .group-heading {
  background: transparent !important;
  color: #f4f5fd !important;
  font-weight: 800 !important;
}
/* ═══ /STORE CARDS ═══ */

/* ═══ SAS CLIENT NAV — إصلاح وتجميل الشريط العلوي ═══ */
#sasClientNav,nav.sas-client-nav{background:rgba(13,17,40,.94)!important;backdrop-filter:blur(10px)!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;padding:0!important;box-shadow:0 8px 24px -16px rgba(0,0,0,.5)!important}
#sasClientNav .sas-container-header{max-width:1200px!important;margin:0 auto!important;padding:0 16px!important}
#sasClientNav ul{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:6px!important;list-style:none!important;margin:0!important;padding:9px 0!important}
#sasClientNav ul li{list-style:none!important;margin:0!important;padding:0!important;float:none!important}
#sasClientNav ul li::marker{content:""!important}
#sasClientNav ul li a{display:inline-flex!important;align-items:center!important;gap:7px!important;padding:8px 14px!important;border-radius:11px!important;color:#cfd3ea!important;font-weight:700!important;font-size:.92rem!important;text-decoration:none!important;transition:all .2s!important;background:transparent!important}
#sasClientNav ul li a:hover{background:rgba(139,92,246,.20)!important;color:#fff!important}
#sasClientNav ul li a i,#sasClientNav ul li a svg{color:#a78bfa!important}
@media(max-width:768px){
#sasClientNav ul{flex-wrap:nowrap!important;overflow-x:auto!important;justify-content:flex-start!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important}
#sasClientNav ul::-webkit-scrollbar{display:none!important}
#sasClientNav ul li a{white-space:nowrap!important;font-size:.85rem!important;padding:7px 11px!important}
}

/* ===== client-nav-offset-fix: قائمة منطقة العميل كانت خلف الهيدر الثابت ===== */
body.client-area, body.login-page { padding-top: 80px !important; }
body.client-area .titan-app-container, body.login-page .titan-app-container { padding-top: 18px !important; }
@media (max-width: 768px){
  body.client-area, body.login-page { padding-top: 66px !important; }
  body.client-area .titan-app-container, body.login-page .titan-app-container { padding-top: 14px !important; }
}