/* ==========================================================================
   قالب سرورمکس برای «سرورمکس» (ServerMax) — راست‌چین فارسی / WHMCS
   پالت و توکن‌ها مطابق BRANDING.md (نسخه مدرن ۱۴۰۵).
   قانون رنگ: ۶۰٪ آبی/سفید، ۳۰٪ خنثی، ۱۰٪ زرد (فقط CTA).
   ========================================================================== */

/* ---------- فونت فارسی وزیرمتن (لوکال‌هاست، چون گوگل‌فونت در ایران کند است) ---------- */
@font-face {
    font-family: "Vazirmatn"; font-weight: 400; font-display: swap;
    src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "Vazirmatn"; font-weight: 500; font-display: swap;
    src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2");
}
@font-face {
    font-family: "Vazirmatn"; font-weight: 700; font-display: swap;
    src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2");
}
@font-face {
    font-family: "Vazirmatn"; font-weight: 900; font-display: swap;
    src: url("../fonts/Vazirmatn-Black.woff2") format("woff2");
}

/* ---------- توکن‌های برند سرورمکس ---------- */
:root {
    --sm-primary:       #2456E6;   /* آبی اصلی — دکمه/لینک */
    --sm-primary-500:   #3B6BF0;   /* هاور */
    --sm-primary-dark:  #14307A;   /* هدر/فوتر/تیتر */
    --sm-primary-light: #E8EFFF;   /* پس‌زمینه باکس/اعلان */
    --sm-primary-50:    #F4F8FF;

    --sm-accent:        #FFC233;   /* زرد CTA */
    --sm-accent-hover:  #F0AE0E;
    --sm-accent-100:    #FFF6DD;

    --sm-ink:    #0F1B33;          /* تیتر */
    --sm-body:   #475569;          /* متن */
    --sm-muted:  #94A3B8;
    --sm-border: #E6EAF0;
    --sm-surface:#FFFFFF;
    --sm-bg:     #F7F9FC;

    --sm-success:#16A34A;
    --sm-warning:#F59E0B;
    --sm-danger: #E11D48;
    --sm-info:   #0EA5E9;

    --sm-radius-card: 16px;
    --sm-radius-btn:  12px;
    --sm-radius-sm:   8px;
    --sm-shadow:      0 4px 24px rgba(20, 48, 122, .08);
    --sm-shadow-cta:  0 6px 18px rgba(255, 194, 51, .35);
    --sm-transition:  .2s ease;

    --grad-hero:   linear-gradient(135deg, #14307A 0%, #2456E6 55%, #3B6BF0 100%);
    --grad-accent: linear-gradient(135deg, #FFC233 0%, #F0AE0E 100%);
    --grad-soft:   linear-gradient(180deg, #F4F8FF 0%, #FFFFFF 100%);
}

/* ---------- پایه راست‌چین ---------- */
html, body {
    direction: rtl;
    text-align: right;
    font-family: "Vazirmatn", "IRANSans", Tahoma, sans-serif !important;
    color: var(--sm-body);
    background: var(--sm-bg);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, .panel-title, .card-title {
    color: var(--sm-ink);
    font-weight: 700;
}

/* جهت‌دهی کمکی‌های بوت‌استرپ */
.text-left  { text-align: right !important; }
.text-right { text-align: left  !important; }
.float-left  { float: right !important; }
.float-right { float: left  !important; }
.dropdown-menu, .list-group { text-align: right; padding-right: 0; }
.btn i.fa, .nav-link i.fa { margin-left: 6px; margin-right: 0; }
.me-auto { margin-right: 0 !important; margin-left: auto !important; }
.ms-auto { margin-left: 0 !important; margin-right: auto !important; }

/* اعداد لاتین در قیمت/پنل برای خوانایی بیشتر */
.amount, .price, .invoice-amount, code, .ltr, .text-ltr {
    direction: ltr; unicode-bidi: embed; text-align: left;
}

/* ---------- لینک‌ها و رنگ برند ---------- */
a { color: var(--sm-primary); text-decoration: none; transition: var(--sm-transition); }
a:hover { color: var(--sm-primary-dark); }
.text-primary { color: var(--sm-primary) !important; }

/* ---------- دکمه‌ها (مطابق جدول دکمه‌های برند) ---------- */
.btn { border-radius: var(--sm-radius-btn); font-weight: 500; transition: var(--sm-transition); }

/* ثانویه: آبی + سفید — «مشاهده پلن‌ها / ورود به پنل» */
.btn-primary {
    background: var(--sm-primary); border-color: var(--sm-primary); color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--sm-primary-500); border-color: var(--sm-primary-500); color: #fff;
}

/* اصلی (CTA خرید): زرد + متن آبی تیره — مهم‌ترین اقدام هر صفحه */
.btn-cta, .btn-order, .order-button, .btn-add-to-cart, #order-standard_cart .btn-success {
    background: var(--sm-accent) !important;
    color: var(--sm-primary-dark) !important;
    border: none !important;
    font-weight: 700;
    border-radius: var(--sm-radius-btn);
    box-shadow: var(--sm-shadow-cta);
    padding: 10px 26px;
}
.btn-cta:hover, .btn-order:hover, .order-button:hover, .btn-add-to-cart:hover {
    background: var(--sm-accent-hover) !important;
}

/* شبح: «مشاوره رایگان» */
.btn-ghost {
    background: transparent; border: 1.5px solid var(--sm-primary); color: var(--sm-primary);
}
.btn-ghost:hover { background: var(--sm-primary); color: #fff; }

/* موفق: «تمدید/پرداخت» */
.btn-success { background: var(--sm-success); border-color: var(--sm-success); }

/* ---------- نوار تماس بالای صفحه (تزریق‌شده در header.tpl) ---------- */
.servermax-topbar {
    background: var(--sm-primary); color: #fff; font-size: .9rem; padding: 7px 0;
}
.servermax-topbar .container { display: flex; justify-content: space-between; align-items: center; }
.servermax-topbar a, .servermax-topbar span { color: #fff; }
.servermax-topbar .phone { font-weight: 700; direction: ltr; display: inline-block; }
.servermax-topbar i { margin-left: 5px; }

/* ---------- هدر (سلکتورهای واقعی six: #header و #main-menu) ---------- */
#header {
    background: #fff !important;
    box-shadow: 0 1px 10px rgba(20, 48, 122, .06);
    padding: 10px 0;
}
#header .logo-text { color: var(--sm-primary-dark); font-weight: 800; font-size: 1.5rem; }
#header .top-nav > li > a { color: var(--sm-body); }
#header .top-nav .primary-action .btn {
    background: var(--sm-accent); color: var(--sm-primary-dark);
    border: none; border-radius: var(--sm-radius-btn); font-weight: 700;
}

/* نوار ناوبری اصلی — آبی تیره برند */
#main-menu .navbar-main {
    background: var(--sm-primary-dark) !important;
    border: none !important; border-radius: 0; margin-bottom: 0;
    box-shadow: 0 2px 16px rgba(20, 48, 122, .2);
}
#main-menu .navbar-main .navbar-nav > li > a {
    color: rgba(255, 255, 255, .9) !important; font-weight: 500;
}
#main-menu .navbar-main .navbar-nav > li > a:hover,
#main-menu .navbar-main .navbar-nav > li.active > a {
    background: rgba(255, 255, 255, .1) !important; color: #fff !important;
}
#main-menu .navbar-main .navbar-toggle { border-color: rgba(255, 255, 255, .5); }
#main-menu .navbar-main .navbar-toggle .icon-bar { background: #fff; }
/* منوی کشویی راست‌چین */
#main-menu .navbar-main .dropdown-menu { text-align: right; right: 0; left: auto; }

/* ---------- کارت‌ها و پنل‌ها ---------- */
.card, .panel, .home-product-group, .order-summary, .product-box {
    border-radius: var(--sm-radius-card);
    border: 1px solid var(--sm-border);
    box-shadow: var(--sm-shadow);
    background: var(--sm-surface);
}

/* ---------- هیرو صفحه اصلی ---------- */
.servermax-hero {
    background: var(--grad-hero);
    color: #fff;
    border-radius: var(--sm-radius-card);
    padding: 72px 32px;
    margin: 28px 0 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.servermax-hero h1 { color: #fff; font-weight: 900; font-size: 2.6rem; margin-bottom: 14px; }
.servermax-hero p  { font-size: 1.15rem; opacity: .92; margin-bottom: 28px; }
.servermax-hero .btn { margin: 4px 6px; }

/* نشان‌های اعتماد زیر هیرو */
.servermax-trust {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 26px;
    margin-top: 26px; font-size: .95rem;
}
.servermax-trust .item { display: flex; align-items: center; gap: 8px; opacity: .95; }
.servermax-trust .item i { color: var(--sm-accent); }

/* ---------- کارت‌های سرویس / دسترسی سریع ---------- */
.servermax-services { margin: 16px 0 40px; }
.servermax-service-card, .servermax-quick-card {
    display: block; height: 100%; background: #fff;
    border-radius: var(--sm-radius-card); padding: 30px 20px; text-align: center;
    border: 1px solid var(--sm-border); color: var(--sm-ink);
    transition: var(--sm-transition);
}
.servermax-service-card:hover, .servermax-quick-card:hover {
    transform: translateY(-4px); box-shadow: var(--sm-shadow);
    border-color: var(--sm-primary); color: var(--sm-ink); text-decoration: none;
}
.servermax-service-card i, .servermax-quick-card i {
    font-size: 2.1rem; color: var(--sm-primary); margin-bottom: 14px; display: block;
}
.servermax-service-card .title, .servermax-quick-card .title { font-weight: 700; display: block; margin-bottom: 6px; }
.servermax-service-card .desc { color: var(--sm-body); font-size: .92rem; }

/* ---------- برچسب «محبوب‌ترین» روی پلن ---------- */
.featured-plan { border: 2px solid var(--sm-accent) !important; position: relative; }
.featured-plan .badge, .badge-featured {
    background: var(--sm-accent); color: var(--sm-primary-dark); font-weight: 700;
    position: absolute; top: -12px; right: 50%; transform: translateX(50%);
    padding: 4px 14px; border-radius: 20px;
}

/* ---------- نوار اعلان ---------- */
.announcement-bar, .alert-info {
    background: var(--sm-primary-light); border: none; color: var(--sm-primary-dark);
    border-radius: var(--sm-radius-sm);
}

/* ---------- وضعیت‌ها (رنگ‌های Semantic) ---------- */
.label-active, .badge-active, .status-active   { background: var(--sm-success) !important; color: #fff; }
.label-pending, .badge-pending, .status-pending { background: var(--sm-warning) !important; color: #fff; }
.label-expired, .badge-expired, .status-cancelled { background: var(--sm-danger) !important; color: #fff; }

/* ---------- جداول ---------- */
.table thead th { text-align: right; border-bottom: 2px solid var(--sm-border); color: var(--sm-ink); }
.table td, .table th { text-align: right; vertical-align: middle; }

/* ---------- فرم‌ها ---------- */
.form-control { border-radius: var(--sm-radius-sm); text-align: right; border-color: var(--sm-border); }
.form-control:focus { border-color: var(--sm-primary); box-shadow: 0 0 0 .2rem rgba(36, 86, 230, .15); }
label { font-weight: 500; color: var(--sm-ink); }

/* ---------- فوتر برند (بلوک تزریق‌شده #servermax-footer) ---------- */
#servermax-footer { background: var(--sm-primary-dark); color: #c4cdda; padding: 52px 0 32px; margin-top: 64px; }
#servermax-footer h4, #servermax-footer h5 { color: #fff; margin-bottom: 16px; font-weight: 700; }
#servermax-footer a { color: #c4cdda; }
#servermax-footer a:hover { color: #fff; }
#servermax-footer .footer-brand img { max-height: 48px; margin-bottom: 14px; }
#servermax-footer ul li { margin-bottom: 8px; }
#servermax-footer .contact-list i { margin-left: 6px; color: var(--sm-accent); }
#servermax-footer .badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
#servermax-footer .badges img { height: 56px; background: #fff; border-radius: 8px; padding: 4px; }

/* نوار کپی‌رایت پایین (#footer اصلی six) */
#footer { background: #0b1730 !important; color: #8595af; padding: 16px 0; margin-top: 0; }
#footer p { color: #8595af; margin: 0; }
#footer .back-to-top { background: var(--sm-accent); color: var(--sm-primary-dark); }

/* ---------- موبایل ---------- */
@media (max-width: 767px) {
    .servermax-hero { padding: 48px 18px; }
    .servermax-hero h1 { font-size: 1.8rem; }
    .servermax-trust { gap: 14px; font-size: .85rem; }
}