/* **************************************************************************

   ** ATLANTEZS PRIME - Premium Light Theme for WHMCS 9                     **

   ** Color Scheme: 100% Light Mode (Pure White, Soft Clean Gray, Slate)    **

   ************************************************************************** */

/* Google Fonts loaded asynchronously in head.tpl with preconnect */

:root {

    /* Brand Typography */

    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;



    /* Atlantesz Light Mode Palette */

    --atl-blue: #0066cc;

    --atl-blue-light: #1e86ff;

    --atl-blue-dark: #004d99;

    --atl-blue-soft: #eff6ff;

    --atl-blue-border: #dbeafe;

    --atl-blue-glow: rgba(0, 102, 204, 0.15);



    --atl-cyan: #00b4d8;

    --atl-cyan-soft: #e0f2fe;



    /* Light Theme Surfaces & Text */

    --bg-primary: #ffffff;

    --bg-secondary: #f8fafc;

    --bg-tertiary: #f1f5f9;



    --text-heading: #0f172a;

    --text-body: #334155;

    --text-muted: #64748b;

    --text-light: #94a3b8;



    --border-light: #e2e8f0;

    --border-medium: #cbd5e1;

    --border-hover: #94a3b8;



    /* System Accents */

    --primary: var(--atl-blue);

    --secondary: #64748b;

    --success: #10b981;

    --info: #0284c7;

    --warning: #f59e0b;

    --error: #ef4444;



    /* Rounded Curves & Transitions */

    --rounding-sm: 6px;

    --rounding-md: 10px;

    --rounding-lg: 16px;

    --rounding-xl: 24px;

    --rounding-pill: 9999px;



    --transition-smooth: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.03);

    --shadow-md: 0 8px 24px -4px rgba(15, 23, 42, 0.06);

    --shadow-lg: 0 16px 36px -6px rgba(15, 23, 42, 0.08);

    --shadow-card: 0 12px 32px -4px rgba(0, 102, 204, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03);



    /* WHMCS 8/9 Compatibility & Missing Variable Fallbacks */

    --bg: #ffffff;

    --bg-lifted: #ffffff;

    --bg-accented: #f8fafc;

    --bg-muted: #f1f5f9;

    --bg-inverted: #0066cc;

    --text: #0f172a;

    --text-accented: #1e293b;

    --text-inverted: #ffffff;

    --text-lifted: #334155;

    --border: #e2e8f0;

    --border-accented: #cbd5e1;

    --border-lifted: #e2e8f0;

    --border-muted: #f1f5f9;

    --disabled-opacity: 0.6;

    --grayscale: #0052a3;

    --grayscale-accented: #003d7a;

    --grayscale-lifted: #004d99;

    --neutral: #64748b;

    --neutral-accented: #475569;

    --neutral-lifted: #94a3b8;

    --notice: #0284c7;

    --notice-lifted: #38bdf8;

    --letter-spacing: normal;

    --emerald-300: #6ee7b7;

    --teal-300: #5eead4;

    --teal-400: #2dd4bf;

    --pink-400: #f472b6;

    --yellow-200: #fef08a;

    --yellow-300: #fde047;

}



/* ==========================================================================

   GLOBAL RESET & LIGHT THEME DEFAULTS

   ========================================================================== */

html, body {

    font-family: var(--font-body) !important;

    background-color: var(--bg-secondary) !important;

    color: var(--text-body) !important;

    font-size: 15px;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    height: auto !important;

    min-height: 100% !important;

    overflow-x: hidden !important;

    width: 100% !important;

    max-width: 100vw !important;

}



h1, h2, h3, h4, h5, h6 {

    font-family: var(--font-heading) !important;

    color: var(--text-heading) !important;

    font-weight: 700;

}



a {

    color: var(--atl-blue);

    transition: var(--transition-smooth);

    text-decoration: none !important;

}



a:hover {

    color: var(--atl-blue-dark);

}



/* ==========================================================================

   TOP INFOBAR (LIGHT THEME)

   ========================================================================== */

.atl-top-infobar {

    background: #ffffff;

    border-bottom: 1px solid var(--border-light);

    font-size: 0.82rem;

    font-weight: 500;

    color: var(--text-muted);

    padding: 7px 0;

    position: relative;

    z-index: 1030;

}



.atl-top-infobar a {

    color: var(--text-muted);

    display: inline-flex;

    align-items: center;

    gap: 6px;

    transition: var(--transition-smooth);

}



.atl-top-infobar a:hover {

    color: var(--atl-blue);

}



.atl-top-infobar i {

    color: var(--atl-blue);

}



/* Logged in Topbar */

.atl-loggedin-topbar {

    background: #ffffff;

    border-bottom: 1px solid var(--border-light);

    padding: 6px 0;

    font-size: 0.85rem;

}



/* ==========================================================================

   STICKY NAVBAR & MEGA MENU (FIXED SINGLE LINE, NO WRAPPING)

   ========================================================================== */

.atl-header-sticky {

    position: sticky;

    top: 0;

    z-index: 1020;

    background: rgba(255, 255, 255, 0.97) !important;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid var(--border-light);

    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04);

    transition: var(--transition-smooth);

}



.atl-nav-container {

    max-width: 1720px !important;

    width: 100% !important;

    padding-left: 36px !important;

    padding-right: 36px !important;

    margin: 0 auto;

}



.atl-nav-header-row {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    flex-wrap: nowrap !important;

    width: 100% !important;

    gap: 20px;

}



/* Brand Logo (WHMCS System Logo URL Support) */

.atl-brand-logo {

    display: inline-flex !important;

    align-items: center !important;

    text-decoration: none !important;

    padding: 0 !important;

    margin: 0 24px 0 0 !important;

    flex-shrink: 0 !important;

}



.atl-brand-logo .logo-img {

    max-height: 44px !important;

    width: auto !important;

    max-width: 220px !important;

    object-fit: contain !important;

    display: block !important;

}



.atl-brand-logo .logo-text {

    font-family: var(--font-heading);

    font-weight: 800;

    font-size: 1.55rem;

    color: var(--atl-blue);

    letter-spacing: -0.5px;

    white-space: nowrap !important;

}



/* Desktop Navigation Wrapper */

@media (min-width: 1200px) {

    .main-navbar-wrapper {

        display: flex !important;

        align-items: center !important;

        flex-wrap: nowrap !important;

        gap: 6px !important;

        margin: 0 !important;

        padding: 0 !important;

        list-style: none !important;

    }

}

@media (max-width: 1199.98px) {

    .main-navbar-wrapper {

        display: none !important;

    }

}





.nav-mega-item {

    position: static;

    flex-shrink: 0 !important;

    white-space: nowrap !important;

}



/* Nav Link - Single Line Guarantee with Wide Spacing */

.atl-nav-link {

    font-family: var(--font-heading) !important;

    font-size: 0.92rem !important;

    font-weight: 600 !important;

    color: var(--text-heading) !important;

    padding: 18px 14px !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    white-space: nowrap !important;

    word-break: keep-all !important;

    text-decoration: none !important;

    position: relative;

    transition: var(--transition-smooth);

}



.atl-nav-link i.fa-chevron-down {

    font-size: 0.68rem;

    opacity: 0.55;

    transition: transform 0.2s ease, opacity 0.2s ease;

}



.nav-mega-item:hover .atl-nav-link {

    color: var(--atl-blue) !important;

}



.nav-mega-item:hover .atl-nav-link i.fa-chevron-down {

    transform: rotate(180deg);

    opacity: 1;

    color: var(--atl-blue);

}



/* Blue indicator line under active / hovered nav */

.atl-nav-link::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 10px;

    right: 10px;

    height: 3px;

    background: linear-gradient(90deg, var(--atl-blue), var(--atl-cyan));

    border-radius: 3px 3px 0 0;

    transform: scaleX(0);

    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}



.nav-mega-item:hover .atl-nav-link::after,

.nav-mega-item.active .atl-nav-link::after {

    transform: scaleX(1);

}



/* ==========================================================================

   MEGA MENU DROPDOWN PANEL (CLEAN LIGHT THEME)

   ========================================================================== */

.mega-panel {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    width: 100%;

    background: #ffffff !important;

    border-top: 3px solid var(--atl-blue);

    border-bottom: 1px solid var(--border-light);

    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.12);

    border-radius: 0 0 var(--rounding-lg) var(--rounding-lg);

    padding: 30px 0 34px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(8px);

    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;

    z-index: 1000;

}



.nav-mega-item:hover .mega-panel {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.mega-panel .container {

    max-width: 1560px !important;

    width: 100% !important;

}



.mega-col {

    padding: 0 20px;

}



.mega-col:not(:last-child) {

    border-right: none !important;

}



.mega-col-title {

    font-family: var(--font-heading);

    font-size: 0.82rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    color: var(--text-heading);

    margin-bottom: 16px;

    padding-bottom: 4px;

    border-bottom: none !important;

    display: flex;

    align-items: center;

    gap: 8px;

}



.mega-col-title::before {

    content: '';

    width: 4px;

    height: 14px;

    background: var(--atl-blue);

    border-radius: 2px;

}



/* Mega Menu Item Cards */

.mega-card {

    display: flex;

    align-items: flex-start;

    padding: 12px 14px;

    border-radius: var(--rounding-md);

    text-decoration: none !important;

    transition: var(--transition-smooth);

    margin-bottom: 8px;

    background: #ffffff;

    border: 1px solid transparent;

}



.mega-card:last-child {

    margin-bottom: 0;

}



.mega-card:hover {

    background: var(--bg-secondary);

    border-color: var(--border-light);

    transform: translateX(4px);

    box-shadow: 0 6px 18px rgba(0, 102, 204, 0.05);

}



.mega-card-icon {

    width: 40px;

    height: 40px;

    min-width: 40px;

    border-radius: var(--rounding-md);

    background: var(--atl-blue-soft);

    color: var(--atl-blue);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.15rem;

    margin-right: 14px;

    transition: var(--transition-smooth);

    border: 1px solid var(--atl-blue-border);

}



.mega-card:hover .mega-card-icon {

    background: var(--atl-blue);

    color: #ffffff;

    border-color: var(--atl-blue);

    transform: scale(1.08);

}



.mega-card-content {

    flex: 1;

}



.mega-card-title {

    font-family: var(--font-heading);

    font-size: 0.92rem;

    font-weight: 700;

    color: var(--text-heading);

    margin-bottom: 3px;

    transition: color 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.mega-card:hover .mega-card-title {

    color: var(--atl-blue);

}



.mega-card-desc {

    font-size: 0.80rem;

    color: var(--text-muted);

    line-height: 1.35;

    margin: 0;

}



/* Brand Panel Badges in Mega Menu (cPanel & Plesk) */

.badge-brand-panel {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 3px 10px;

    border-radius: 50px;

    line-height: 1;

    transition: all 0.2s ease;

    vertical-align: middle;

    flex-shrink: 0;

}



.badge-brand-panel img {

    height: 12px;

    width: auto;

    max-height: 12px;

    object-fit: contain;

    display: block;

    transition: filter 0.2s ease;

}



.badge-cpanel {

    background: #fff7ed !important;

    border: 1px solid #fed7aa !important;

    box-shadow: 0 1px 3px rgba(234, 88, 12, 0.08);

}



.mega-card:hover .badge-cpanel,

.nav-link:hover .badge-cpanel {

    background: #ea580c !important;

    border-color: #ea580c !important;

    box-shadow: 0 2px 10px rgba(234, 88, 12, 0.35);

}



.mega-card:hover .badge-cpanel img,

.nav-link:hover .badge-cpanel img {

    filter: brightness(0) invert(1);

}



.badge-plesk {

    background: #f0f9ff !important;

    border: 1px solid #bae6fd !important;

    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.08);

}



.mega-card:hover .badge-plesk,

.nav-link:hover .badge-plesk {

    background: #0284c7 !important;

    border-color: #0284c7 !important;

    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35);

}



.mega-card:hover .badge-plesk img,

.nav-link:hover .badge-plesk img {

    filter: brightness(0) invert(1);

}



/* Hesabım & Auth Buttons */

.btn-hesabim {

    font-family: var(--font-heading) !important;

    font-size: 0.88rem !important;

    font-weight: 600 !important;

    color: var(--text-heading) !important;

    background: #ffffff !important;

    border: 1.5px solid var(--border-light) !important;

    border-radius: var(--rounding-pill) !important;

    padding: 8px 18px !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    box-shadow: var(--shadow-sm);

    transition: var(--transition-smooth);

    white-space: nowrap !important;

}



.btn-hesabim:hover {

    border-color: var(--atl-blue) !important;

    color: var(--atl-blue) !important;

    box-shadow: 0 4px 14px var(--atl-blue-glow);

}



.btn-atl-primary {

    background: linear-gradient(135deg, var(--atl-blue) 0%, var(--atl-blue-dark) 100%) !important;

    color: #ffffff !important;

    font-family: var(--font-heading);

    font-weight: 600;

    border-radius: var(--rounding-md);

    border: none;

    padding: 9px 18px;

    box-shadow: 0 4px 14px var(--atl-blue-glow);

    transition: var(--transition-smooth);

}



.btn-atl-primary:hover {

    transform: translateY(-1px);

    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);

    color: #ffffff !important;

}



.btn-atl-outline {

    background: #ffffff !important;

    color: var(--text-heading) !important;

    border: 1px solid var(--border-light) !important;

    font-family: var(--font-heading);

    font-weight: 600;

    border-radius: var(--rounding-md);

    padding: 9px 18px;

    transition: var(--transition-smooth);

}



.btn-atl-outline:hover {

    border-color: var(--atl-blue) !important;

    color: var(--atl-blue) !important;

    background: var(--atl-blue-soft) !important;

}



/* ==========================================================================

   HERO SECTION (ULTRA MODERN SKY HERO AS PER REFERENCE SPEC)

   ========================================================================== */

.hero-sky-section,

.hero-2col-section {

    background: linear-gradient(135deg, #091e4f 0%, #0d3885 25%, #1d4ed8 55%, #0284c7 80%, #06b6d4 100%);

    position: relative;

    padding: 85px 0 160px;

    overflow: hidden;

    color: #ffffff;

}



/* Ambient dynamic glowing orbs */

.hero-sky-section::before,

.hero-2col-section::before {

    content: '';

    position: absolute;

    top: -120px;

    right: -80px;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(6, 182, 212, 0.32) 0%, rgba(56, 189, 248, 0.1) 50%, transparent 70%);

    pointer-events: none;

    z-index: 1;

}



.hero-sky-section::after,

.hero-2col-section::after {

    content: '';

    position: absolute;

    bottom: 20px;

    left: -100px;

    width: 550px;

    height: 550px;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(37, 99, 235, 0.4) 0%, rgba(29, 78, 216, 0.1) 50%, transparent 70%);

    pointer-events: none;

    z-index: 1;

}



.hero-sky-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(255, 255, 255, 0.16);

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.3);

    border-radius: 50px;

    padding: 6px 18px;

    font-family: var(--font-heading);

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.8px;

    backdrop-filter: blur(8px);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

}



.hero-sky-title,

.hero-main-title {

    font-family: var(--font-heading) !important;

    font-size: 3.1rem !important;

    font-weight: 800 !important;

    color: #ffffff !important;

    line-height: 1.18 !important;

    letter-spacing: -0.02em;

    margin-bottom: 20px;

}



.hero-sky-highlight,

.hero-company-highlight {

    background: linear-gradient(135deg, #38bdf8 0%, #67e8f9 50%, #ffffff 100%) !important;

    -webkit-background-clip: text !important;

    -webkit-text-fill-color: transparent !important;

    display: inline-block;

}



.hero-sky-subtitle,

.hero-desc-text {

    font-size: 1.1rem;

    color: rgba(255, 255, 255, 0.88);

    line-height: 1.65;

    max-width: 540px;

    margin-bottom: 32px;

}



/* Pill-Style Domain Search Bar */

.hero-domain-pill,

.hero-domain-bar {

    display: flex;

    align-items: center;

    background: #ffffff;

    border: 2px solid rgba(255, 255, 255, 0.85);

    border-radius: 50px;

    padding: 6px 6px 6px 22px;

    box-shadow: 0 16px 40px -8px rgba(0, 15, 60, 0.35);

    margin-bottom: 24px;

    max-width: 580px;

    transition: var(--transition-smooth);

    position: relative;

    z-index: 5;

}



.hero-domain-pill:focus-within,

.hero-domain-bar:focus-within {

    border-color: #38bdf8;

    box-shadow: 0 20px 45px -5px rgba(0, 15, 60, 0.45), 0 0 0 4px rgba(56, 189, 248, 0.35);

}



.hero-domain-pill input[type="text"],

.hero-domain-bar input[type="text"] {

    flex: 1;

    border: none;

    outline: none;

    background: transparent;

    font-size: 1rem;

    color: #0f172a;

    font-weight: 600;

    min-width: 140px;

}



.hero-domain-pill input::placeholder,

.hero-domain-bar input::placeholder {

    color: #94a3b8;

}



.hero-domain-tlds {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-right: 12px;

}



.hero-tld-chip {

    background: #f0fdfa;

    color: #0284c7;

    font-family: var(--font-heading);

    font-size: 0.78rem;

    font-weight: 700;

    padding: 4px 10px;

    border-radius: 20px;

    border: 1px solid #bae6fd;

    white-space: nowrap;

}



.btn-hero-search,

.btn-hero-sorgula {

    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;

    color: #ffffff !important;

    font-family: var(--font-heading) !important;

    font-weight: 700 !important;

    font-size: 0.95rem !important;

    padding: 12px 28px !important;

    border-radius: 50px !important;

    border: none !important;

    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.4) !important;

    transition: var(--transition-smooth) !important;

    white-space: nowrap !important;

    cursor: pointer;

}



.btn-hero-search:hover,

.btn-hero-sorgula:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(2, 132, 199, 0.55) !important;

    color: #ffffff !important;

}



/* 4 Checklist Items */

.hero-sky-checklist,

.hero-checklist {

    display: flex;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;

    margin-top: 18px;

}



.hero-sky-checklist span,

.hero-check-item {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 0.92rem;

    font-weight: 600;

    color: rgba(255, 255, 255, 0.95);

}



.hero-sky-checklist span i,

.hero-check-item i {

    color: #38bdf8;

    font-size: 1rem;

    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));

}



/* RIGHT COLUMN: 3D Visual & Code Overlays */

.hero-server-wrap {

    position: relative;

    padding: 20px 10px;

    z-index: 2;

}



.hero-visual-wrapper {

    position: relative;

    max-width: 540px;

    margin: 0 auto;

}



.hero-visual-card {

    border-radius: 26px;

    overflow: hidden;

    background: #ffffff;

    box-shadow: 0 25px 60px -15px rgba(0, 10, 45, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.35);

    border: 3px solid rgba(255, 255, 255, 0.45);

    position: relative;

    transition: transform 0.4s ease;

}



.hero-visual-card:hover {

    transform: translateY(-4px);

}



.hero-visual-img {

    width: 100%;

    height: auto;

    display: block;

    object-fit: cover;

}



/* Floating Code Badges (Zero Clipping, Fluid Alignment) */

.hero-code-badge {

    position: absolute;

    z-index: 15;

    background: #ffffff;

    background: rgba(255, 255, 255, 0.98);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    border: 1.5px solid rgba(255, 255, 255, 0.95);

    border-radius: 18px;

    padding: 10px 18px;

    box-shadow: 0 16px 35px -8px rgba(10, 25, 60, 0.22), 0 0 0 1px rgba(0, 102, 204, 0.08);

    display: inline-flex;

    align-items: center;

    gap: 12px;

    white-space: nowrap;

    min-width: max-content;

    width: auto;

    transition: transform 0.3s ease;

    overflow: visible;

}



.badge-pos-top-left {

    top: -8px;

    left: -8px;

    animation: heroFloat1 4.2s ease-in-out infinite alternate;

}



.badge-pos-top-right {

    top: 15px;

    right: -8px;

    animation: heroFloat2 4.8s ease-in-out infinite alternate;

}



.badge-pos-bottom-left {

    bottom: 28px;

    left: -8px;

    animation: heroFloat2 5.2s ease-in-out infinite alternate-reverse;

}



.badge-pos-bottom-right {

    bottom: -8px;

    right: 10px;

    animation: heroFloat1 4.5s ease-in-out infinite alternate-reverse;

}



.hero-code-badge .badge-icon {

    width: 40px;

    height: 40px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.15rem;

    flex-shrink: 0;

}



.bg-cyan-soft { background: #e0f2fe; border: 1px solid #bae6fd; }

.bg-green-soft, .bg-emerald-soft { background: #ecfdf5; border: 1px solid #a7f3d0; }

.bg-blue-soft { background: #eff6ff; border: 1px solid #bfdbfe; }

.bg-amber-soft { background: #fffbeb; border: 1px solid #fde68a; }



.text-cyan { color: #0284c7; }



.hero-code-badge .h-badge-details,

.hero-code-badge .badge-info {

    display: flex !important;

    flex-direction: column !important;

    text-align: left !important;

    background: transparent !important;

    border: none !important;

    padding: 0 !important;

    margin: 0 !important;

    box-shadow: none !important;

    line-height: 1.2 !important;

}



.hero-code-badge .h-badge-label,

.hero-code-badge .badge-label {

    font-size: 0.72rem !important;

    font-weight: 700 !important;

    color: #64748b !important;

    text-transform: uppercase !important;

    letter-spacing: 0.6px !important;

    line-height: 1.2 !important;

    margin-bottom: 2px !important;

    display: block !important;

    background: transparent !important;

    border: none !important;

    padding: 0 !important;

}



.hero-code-badge .h-badge-val,

.hero-code-badge .badge-val {

    font-family: var(--font-heading) !important;

    font-size: 0.95rem !important;

    font-weight: 800 !important;

    color: #0f172a;

    line-height: 1.2 !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    background: transparent !important;

    border: none !important;

    padding: 0 !important;

}



.badge-live-pulse {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #10b981;

    display: inline-block;

    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);

    animation: pulseGreen 2s infinite;

    flex-shrink: 0;

    margin-left: 2px;

    vertical-align: middle;

}



@keyframes pulseGreen {

    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }

    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }

    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }

}



@keyframes heroFloat1 {

    0% { transform: translateY(0); }

    100% { transform: translateY(-10px); }

}



@keyframes heroFloat2 {

    0% { transform: translateY(0); }

    100% { transform: translateY(-8px) scale(1.02); }

}



/* Organic Fluid Bottom Wave Transition & Realistic Oceanic Wave Animation */

.hero-wave-shape {

    position: absolute;

    bottom: -1px;

    left: 0;

    right: 0;

    width: 100%;

    line-height: 0;

    z-index: 2;

    pointer-events: none;

    overflow: hidden;

}



.hero-wave-shape svg {

    display: block;

    width: 100%;

    height: 85px;

}



/* Realistic Multi-Layer Parallax Wave Animation */

.hero-waves-anim {

    position: relative;

    width: 100%;

    height: 85px;

    margin-bottom: -1px;

    min-height: 60px;

}



.wave-parallax > use {

    animation: moveParallaxWave 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;

}



.wave-parallax > use:nth-child(1) {

    animation-delay: -2s;

    animation-duration: 22s;

}



.wave-parallax > use:nth-child(2) {

    animation-delay: -3s;

    animation-duration: 15s;

}



.wave-parallax > use:nth-child(3) {

    animation-delay: -4s;

    animation-duration: 10s;

}



.wave-parallax > use:nth-child(4) {

    animation-delay: -5s;

    animation-duration: 6s;

}



@keyframes moveParallaxWave {

    0% {

        transform: translate3d(-90px, 0, 0);

    }

    100% {

        transform: translate3d(85px, 0, 0);

    }

}



@media (max-width: 768px) {

    .hero-wave-shape svg,

    .hero-waves-anim {

        height: 48px;

        min-height: 48px;

    }

}



/* ==========================================================================

   FLOATING HERO PRODUCT CARDS (3 SERVICES OVERLAPPING HERO)

   ========================================================================== */

.hero-floating-products-section {

    position: relative;

    z-index: 10;

    margin-top: -95px;

    padding-bottom: 25px;

}



.hero-product-card {

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 22px;

    padding: 34px 26px;

    text-align: center;

    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(0, 0, 0, 0.02);

    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.hero-product-card:hover {

    transform: translateY(-8px);

    border-color: #0284c7;

    box-shadow: 0 24px 50px -10px rgba(2, 132, 199, 0.18);

}



.hero-product-card.featured {

    border-color: #0284c7;

    box-shadow: 0 24px 50px -10px rgba(2, 132, 199, 0.22);

}



.h-card-badge {

    position: absolute;

    top: -14px;

    left: 50%;

    transform: translateX(-50%);

    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);

    color: #ffffff;

    font-family: var(--font-heading);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.8px;

    padding: 4px 16px;

    border-radius: 20px;

    box-shadow: 0 6px 14px rgba(2, 132, 199, 0.35);

    text-transform: uppercase;

    white-space: nowrap;

}



.h-card-icon-wrap {

    width: 68px;

    height: 68px;

    border-radius: 50%;

    margin: 0 auto 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.8rem;

    transition: transform 0.3s ease;

}



.icon-speed { background: #e0f2fe; color: #0284c7; border: 2px solid #bae6fd; }

.icon-cloud { background: #dbeafe; color: #2563eb; border: 2px solid #bfdbfe; }

.icon-server { background: #ede9fe; color: #7c3aed; border: 2px solid #ddd6fe; }



.hero-product-card:hover .h-card-icon-wrap {

    transform: scale(1.1) rotate(-6deg);

}



.h-card-title {

    font-family: var(--font-heading);

    font-size: 1.4rem;

    font-weight: 800;

    color: #0f172a;

    margin-bottom: 8px;

}



.h-card-desc {

    font-size: 0.88rem;

    color: #64748b;

    line-height: 1.5;

    margin-bottom: 20px;

    min-height: 42px;

}



.h-card-features {

    background: #f8fafc;

    border-radius: 16px;

    padding: 16px;

    margin-bottom: 22px;

    border: 1px solid #f1f5f9;

    text-align: left;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    font-size: 0.84rem;

    font-weight: 600;

    color: #334155;

}



.h-feat-item {

    display: flex;

    align-items: center;

}



.h-card-pricing {

    margin-bottom: 18px;

}



.h-price-val {

    font-family: var(--font-heading);

    color: #0f172a;

}



.h-currency { font-size: 1.3rem; font-weight: 700; }

.h-amount { font-size: 2.5rem; font-weight: 900; letter-spacing: -1px; }

.h-decimal { font-size: 1.25rem; font-weight: 700; }

.h-cycle { font-size: 0.88rem; color: #64748b; margin-left: 4px; font-weight: 500; }



.btn-h-card {

    background: #f1f5f9;

    color: #0f172a;

    font-family: var(--font-heading);

    font-weight: 700;

    font-size: 0.94rem;

    padding: 12px 24px;

    border-radius: 50px;

    border: 1.5px solid #e2e8f0;

    transition: var(--transition-smooth);

    display: block;

    width: 100%;

    text-decoration: none !important;

}



.btn-h-card:hover {

    background: #0284c7;

    color: #ffffff !important;

    border-color: #0284c7;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.3);

}



.btn-h-card-featured {

    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);

    color: #ffffff !important;

    border: none;

    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.35);

}



.btn-h-card-featured:hover {

    background: linear-gradient(135deg, #0369a1 0%, #1d4ed8 100%);

    box-shadow: 0 10px 25px rgba(2, 132, 199, 0.5);

}



/* ==========================================================================

   WHY CHOOSE SKYHOST / ATLANTEZSNET SECTION

   ========================================================================== */

.why-choose-skyhost-section {

    position: relative;

    overflow: hidden;

}



.why-skyhost-title {

    font-family: var(--font-heading);

    font-size: 2.2rem;

    font-weight: 800;

    color: #0f172a;

    margin-bottom: 8px;

    letter-spacing: -0.02em;

}



.why-skyhost-sub {

    font-size: 1rem;

    color: #64748b;

    max-width: 620px;

    margin: 0 auto;

    line-height: 1.6;

}



.why-item {

    padding: 15px 10px;

    transition: transform 0.3s ease;

}



.why-item:hover {

    transform: translateY(-5px);

}



.why-icon-circle {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: #e0f2fe;

    color: #0284c7;

    font-size: 1.5rem;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 16px;

    border: 1px solid #bae6fd;

    transition: var(--transition-smooth);

}



.why-item:hover .why-icon-circle {

    background: #0284c7;

    color: #ffffff;

    transform: scale(1.1) rotate(6deg);

}



.why-item-title {

    font-family: var(--font-heading);

    font-size: 1.15rem;

    font-weight: 800;

    color: #0f172a;

    margin-bottom: 6px;

}



.why-item-desc {

    font-size: 0.86rem;

    color: #64748b;

    line-height: 1.5;

    margin: 0;

}



.why-bg-worldmap {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 85%;

    height: 75%;

    background-image: url('../img/worldmap.png');

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;

    opacity: 0.08;

    pointer-events: none;

    z-index: 1;

}



/* ==========================================================================

   MOBILE & TABLET RESPONSIVE TWEAKS FOR HERO

   ========================================================================== */

@media (max-width: 991.98px) {

    .hero-sky-section,

    .hero-2col-section {

        padding: 55px 0 120px;

        text-align: center;

    }



    .hero-sky-title,

    .hero-main-title {

        font-size: 2.25rem !important;

    }



    .hero-sky-subtitle,

    .hero-desc-text {

        margin-left: auto;

        margin-right: auto;

    }



    .hero-sky-checklist,

    .hero-checklist {

        justify-content: center;

    }



    .hero-domain-pill,

    .hero-domain-bar {

        max-width: 100%;

    }



    .hero-floating-products-section {

        margin-top: -65px;

    }



    .h-card-features {

        grid-template-columns: 1fr;

    }



    .badge-pos-top-left { top: 5px; left: 5px; }

    .badge-pos-top-right { top: 5px; right: 5px; }

    .badge-pos-bottom-left { bottom: 10px; left: 5px; }

    .badge-pos-bottom-right { bottom: 10px; right: 5px; }

}



@media (max-width: 575.98px) {

    .hero-code-badge {

        padding: 6px 10px;

        font-size: 0.75rem;

    }

    .hero-code-badge .badge-icon {

        width: 28px;

        height: 28px;

        font-size: 0.85rem;

    }

    .hero-code-badge .badge-label {

        font-size: 0.65rem;

    }

    .hero-code-badge .badge-val {

        font-size: 0.78rem;

    }

}



/* ==========================================================================

   HOMEPAGE CONTENT SECTIONS (LIGHT THEME)

   ========================================================================== */

.section-heading-wrap {

    text-align: center;

    max-width: 720px;

    margin: 0 auto 50px;

}



.section-badge {

    display: inline-block;

    background: var(--atl-blue-soft);

    color: var(--atl-blue);

    font-family: var(--font-heading);

    font-size: 0.80rem;

    font-weight: 700;

    padding: 5px 16px;

    border-radius: var(--rounding-pill);

    margin-bottom: 14px;

    border: 1px solid var(--atl-blue-border);

    letter-spacing: 0.8px;

    text-transform: uppercase;

}



.section-title {

    font-size: 2.35rem;

    font-weight: 800;

    color: var(--text-heading);

    margin-bottom: 12px;

    letter-spacing: -0.02em;

    line-height: 1.25;

}



.section-subtitle {

    font-size: 1.05rem;

    color: var(--text-muted);

    line-height: 1.6;

}



/* 1. Stats / Feature Cards (3 Pillars) */

.stats-card {

    background: #ffffff;

    border: 1.5px solid var(--border-light);

    border-radius: var(--rounding-xl);

    padding: 38px 32px;

    height: 100%;

    transition: var(--transition-smooth);

    box-shadow: var(--shadow-sm);

    position: relative;

    overflow: hidden;

}



.stats-card:hover {

    transform: translateY(-6px);

    border-color: var(--atl-blue);

    box-shadow: 0 20px 40px -10px rgba(0, 102, 204, 0.12);

}



.stats-icon {

    width: 60px;

    height: 60px;

    border-radius: var(--rounding-lg);

    background: var(--atl-blue-soft);

    color: var(--atl-blue);

    font-size: 1.6rem;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 24px;

    border: 1px solid var(--atl-blue-border);

    transition: var(--transition-smooth);

}



.stats-card:hover .stats-icon {

    background: var(--atl-blue);

    color: #ffffff;

    transform: scale(1.08) rotate(-4deg);

}



.stats-card h4 {

    font-size: 1.35rem;

    font-weight: 800;

    margin-bottom: 12px;

}



.stats-card p {

    font-size: 0.94rem;

    color: var(--text-muted);

    line-height: 1.6;

    margin: 0;

}



/* 2. Tech Stack / Enterprise Partners Strip */

.tech-stack-section {

    background: #ffffff;

    border-top: 1px solid var(--border-light);

    border-bottom: 1px solid var(--border-light);

    padding: 36px 0;

}



.tech-logo-card {

    background: #ffffff;

    border: 1.5px solid var(--border-light);

    border-radius: var(--rounding-md);

    padding: 12px 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: var(--transition-smooth);

    height: 72px;

    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);

    position: relative;

    overflow: hidden;

}



.tech-logo-card:hover {

    background: #ffffff;

    border-color: #93c5fd;

    transform: translateY(-4px);

    box-shadow: 0 12px 24px -4px rgba(0, 102, 204, 0.12);

}



.tech-logo-card img {

    max-height: 36px;

    max-width: 135px;

    width: auto;

    object-fit: contain;

    transition: var(--transition-smooth);

    display: block;

}



.tech-logo-card:hover img {

    transform: scale(1.05);

}



.tech-logo-card img[alt="LiteSpeed"] {

    max-height: 28px;

    max-width: 140px;

}



.tech-logo-card img[alt="Softaculous"] {

    max-height: 60px;

    max-width: 135px;

    transform: scale(1.28);

}



.tech-logo-card:hover img[alt="Softaculous"] {

    transform: scale(1.36);

}



.tech-logo-card img[alt="WordPress"] {

    max-height: 38px;

}



.tech-logo-card img[alt="cPanel"] {

    max-height: 32px;

}



.tech-logo-card img[alt="CloudLinux"] {

    max-height: 36px;

}



.tech-logo-card img[alt="Imunify360"] {

    max-height: 34px;

}



/* 3. Why Us Cards (4 Columns) */

.why-us-card {

    background: #ffffff;

    border: 1.5px solid var(--border-light);

    border-radius: var(--rounding-lg);

    padding: 32px 24px;

    transition: var(--transition-smooth);

    height: 100%;

    box-shadow: var(--shadow-sm);

    position: relative;

}



.why-us-card:hover {

    transform: translateY(-5px);

    border-color: var(--atl-blue);

    box-shadow: var(--shadow-card);

}



.why-us-icon {

    width: 52px;

    height: 52px;

    border-radius: var(--rounding-md);

    background: var(--atl-blue-soft);

    color: var(--atl-blue);

    font-size: 1.35rem;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

    border: 1px solid var(--atl-blue-border);

    transition: var(--transition-smooth);

}



.why-us-card:hover .why-us-icon {

    background: var(--atl-blue);

    color: #ffffff;

    transform: rotate(6deg);

}



.why-us-card h5 {

    font-size: 1.15rem;

    font-weight: 800;

    margin-bottom: 10px;

}



/* ==================== 4. PRICING & HOSTING PACKAGES ==================== */

.pricing-section {

    position: relative;

    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #ffffff 100%);

    padding: 60px 0;

}



.pricing-tabs-wrapper {

    display: inline-block;

    background: #f1f5f9;

    border: 1px solid #e2e8f0;

    border-radius: 50px;

    padding: 5px;

    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);

}



.pricing-nav-pills {

    border: none;

    gap: 4px;

}



.pricing-nav-pills .nav-link {

    border: none;

    border-radius: 50px;

    font-weight: 600;

    font-size: 0.92rem;

    color: #475569;

    padding: 9px 22px;

    background: transparent;

    transition: all 0.25s ease;

    cursor: pointer;

}



.pricing-nav-pills .nav-link:hover {

    color: var(--atl-blue);

    background: rgba(255, 255, 255, 0.7);

}



.pricing-nav-pills .nav-link.active {

    background: var(--atl-blue);

    color: #ffffff !important;

    font-weight: 700;

    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.35);

}



/* ==========================================================================

   ATLANTEZS PRIME - CONCEPT 1: MIDNIGHT SAAS CONTRAST PRICING CARDS

   High-Contrast Dark Featured Card, Plan Icon Header, Elevated Spec Box

   ========================================================================== */

.pricing-card {

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 26px;

    padding: 36px 24px 24px;

    margin-top: 20px;

    overflow: visible !important;

    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);

    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;

    height: calc(100% - 20px);

    display: flex;

    flex-direction: column;

}



.pricing-card:hover {

    transform: translateY(-8px);

    border-color: #0066cc;

    box-shadow: 0 20px 45px -10px rgba(0, 102, 204, 0.16), 0 8px 16px -4px rgba(0, 102, 204, 0.08);

}



/* Plan Icon Circle at Top */

.pricing-plan-icon-wrap {

    width: 48px;

    height: 48px;

    border-radius: 14px;

    background: #eff6ff;

    color: #0066cc;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.35rem;

    margin-bottom: 16px;

    border: 1px solid #dbeafe;

    transition: all 0.3s ease;

}



.pricing-card:hover .pricing-plan-icon-wrap {

    transform: scale(1.1);

    background: #0066cc;

    color: #ffffff;

    border-color: #0066cc;

}



/* Titles */

.pricing-card-header {

    margin-bottom: 12px;

}



.pricing-plan-title {

    font-size: 1.25rem;

    font-weight: 800;

    color: #0f172a;

    letter-spacing: -0.4px;

    margin-bottom: 4px;

}



.pricing-plan-tagline {

    font-size: 0.84rem;

    color: #64748b;

    line-height: 1.45;

    margin-bottom: 0;

    min-height: 38px;

}



/* Modern Tinted Price Box */

.pricing-price-box {

    margin: 14px 0 16px;

    padding: 14px 16px;

    background: #f8fafc;

    border: 1px solid #f1f5f9;

    border-radius: 18px;

    transition: all 0.3s ease;

}



.pricing-card:hover .pricing-price-box {

    border-color: #e2e8f0;

    background: #f1f5f9;

}



.price-value-wrap {

    display: flex;

    align-items: baseline;

    line-height: 1;

}



.price-currency {

    font-size: 1.35rem;

    font-weight: 800;

    color: #0066cc;

    margin-right: 3px;

    align-self: flex-start;

    margin-top: 3px;

}



.price-amount {

    font-size: 2.8rem;

    font-weight: 800;

    color: #0f172a;

    letter-spacing: -1.5px;

    line-height: 1;

}



.price-decimal {

    font-size: 1.3rem;

    font-weight: 700;

    color: #475569;

}



.price-cycle {

    font-size: 0.86rem;

    color: #64748b;

    font-weight: 600;

    margin-left: 6px;

}



.price-annual-hint {

    background: #ecfdf5;

    border: 1px solid #a7f3d0;

    border-radius: 50px;

    padding: 4px 12px;

    margin-top: 10px;

    font-size: 0.76rem;

    color: #065f46;

    display: inline-flex;

    align-items: center;

    font-weight: 600;

}



/* Action CTA Buttons */

.pricing-action {

    margin: 14px 0 16px;

}



.pricing-action .btn {

    border-radius: 50px;

    padding: 11px 20px;

    font-weight: 800;

    font-size: 0.92rem;

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    letter-spacing: -0.2px;

}



.pricing-action .btn i {

    transition: transform 0.25s ease;

}



.pricing-action .btn:hover i {

    transform: translateX(4px);

}



.pricing-card:not(.featured) .btn-atl-outline {

    background: #f8fafc;

    border: 1.5px solid #cbd5e1;

    color: #0f172a;

}



.pricing-card:not(.featured) .btn-atl-outline:hover {

    background: #0066cc;

    border-color: #0066cc;

    color: #ffffff;

    box-shadow: 0 10px 24px rgba(0, 102, 204, 0.35);

}



/* Features List */

.pricing-features-wrap {

    margin-top: 4px;

    flex-grow: 1;

}



.pricing-features-divider {

    position: relative;

    text-align: center;

    margin: 10px 0 14px;

}



.pricing-features-divider::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    height: 1px;

    background: #e2e8f0;

    z-index: 1;

}



.pricing-features-divider span {

    position: relative;

    z-index: 2;

    background: #ffffff;

    padding: 0 10px;

    font-size: 0.70rem;

    font-weight: 800;

    color: #94a3b8;

    text-transform: uppercase;

    letter-spacing: 0.8px;

}



.pricing-card ul.feature-list,

.pricing-card ul.pricing-feature-list {

    list-style: none !important;

    list-style-type: none !important;

    padding: 0 !important;

    margin: 0 !important;

}



.pricing-card ul.feature-list li,

.pricing-card ul.pricing-feature-list li {

    list-style: none !important;

    list-style-type: none !important;

    font-size: 0.86rem;

    color: #334155;

    padding: 6px 8px;

    display: flex;

    align-items: center;

    border-radius: 8px;

    transition: background 0.2s ease;

}



.pricing-card ul.feature-list li:hover,

.pricing-card ul.pricing-feature-list li:hover {

    background: #f8fafc;

}



.feat-icon {

    width: 20px;

    height: 20px;

    min-width: 20px;

    border-radius: 50%;

    background: #e0f2fe;

    color: #0066cc;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 0.70rem;

    margin-right: 10px;

}



.feat-text {

    flex: 1;

    font-weight: 500;

    line-height: 1.35;

}



.pricing-card-footer-trust {

    margin-top: 14px;

    padding-top: 10px;

    border-top: 1px solid #f1f5f9;

    font-size: 0.76rem;

    color: #64748b;

    text-align: center;

    font-weight: 600;

}



.pricing-badge {

    position: absolute;

    top: -14px !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    background: linear-gradient(135deg, #0066cc 0%, #0284c7 100%);

    color: #ffffff !important;

    font-family: var(--font-heading);

    font-size: 0.72rem !important;

    font-weight: 800 !important;

    padding: 6px 20px !important;

    border-radius: 50px !important;

    letter-spacing: 0.7px;

    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.4) !important;

    white-space: nowrap !important;

    z-index: 20 !important;

    text-transform: uppercase;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    line-height: 1;

}



/* ==========================================================================

   THE MIDNIGHT FEATURED HERO CARD (Vercel & Stripe Style Contrast)

   ========================================================================== */

.pricing-card.featured {

    background: #090d16 !important;

    border: 2px solid #0066cc !important;

    border-radius: 28px !important;

    box-shadow: 0 20px 50px -10px rgba(0, 102, 204, 0.45), 0 0 30px rgba(6, 182, 212, 0.25) !important;

    transform: scale(1.03);

    z-index: 10;

    overflow: visible !important;

}



.pricing-card.featured:hover {

    transform: scale(1.03) translateY(-10px) !important;

    box-shadow: 0 30px 65px -10px rgba(0, 102, 204, 0.6), 0 0 40px rgba(6, 182, 212, 0.4) !important;

    border-color: #38bdf8 !important;

}



.pricing-card.featured .pricing-badge {

    top: -15px !important;

    background: linear-gradient(135deg, #0066cc 0%, #06b6d4 100%) !important;

    color: #ffffff !important;

    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.6), 0 0 15px rgba(6, 182, 212, 0.4) !important;

}



.pricing-card.featured .pricing-plan-icon-wrap {

    background: rgba(0, 102, 204, 0.25) !important;

    border: 1px solid rgba(56, 189, 248, 0.4) !important;

    color: #38bdf8 !important;

    box-shadow: 0 0 15px rgba(56, 189, 248, 0.25);

}



.pricing-card.featured .pricing-plan-title {

    color: #ffffff !important;

}



.pricing-card.featured .pricing-plan-tagline {

    color: #94a3b8 !important;

}



.pricing-card.featured .pricing-price-box {

    background: rgba(15, 23, 42, 0.85) !important;

    border: 1px solid rgba(56, 189, 248, 0.25) !important;

}



.pricing-card.featured .price-currency {

    color: #38bdf8 !important;

}



.pricing-card.featured .price-amount {

    color: #ffffff !important;

}



.pricing-card.featured .price-decimal {

    color: #cbd5e1 !important;

}



.pricing-card.featured .price-cycle {

    color: #94a3b8 !important;

}



.pricing-card.featured .price-annual-hint {

    background: rgba(6, 95, 70, 0.3) !important;

    border-color: rgba(52, 211, 153, 0.4) !important;

    color: #6ee7b7 !important;

}



.pricing-card.featured .btn-atl-primary {

    background: linear-gradient(135deg, #0066cc 0%, #06b6d4 100%) !important;

    border: none !important;

    color: #ffffff !important;

    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.5) !important;

}



.pricing-card.featured .btn-atl-primary:hover {

    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;

    box-shadow: 0 15px 35px rgba(6, 182, 212, 0.6) !important;

    color: #ffffff !important;

}



.pricing-card.featured .pricing-features-divider::before {

    background: #1e293b !important;

}



.pricing-card.featured .pricing-features-divider span {

    background: #090d16 !important;

    color: #38bdf8 !important;

}



.pricing-card.featured ul.feature-list li,

.pricing-card.featured ul.pricing-feature-list li {

    color: #e2e8f0 !important;

}



.pricing-card.featured ul.feature-list li:hover,

.pricing-card.featured ul.pricing-feature-list li:hover {

    background: rgba(255, 255, 255, 0.04) !important;

}



.pricing-card.featured .feat-icon {

    background: rgba(0, 102, 204, 0.3) !important;

    color: #38bdf8 !important;

}



.pricing-card.featured .pricing-card-footer-trust {

    border-top: 1px solid #1e293b !important;

    color: #38bdf8 !important;

}





/* 5. One-Click App Install Section */

.app-install-section {

    background: #ffffff;

    border-top: 1px solid var(--border-light);

    border-bottom: 1px solid var(--border-light);

    padding: 80px 0;

}



.app-badge-pill {

    background: var(--atl-blue-soft);

    border: 1px solid var(--atl-blue-border);

    border-radius: var(--rounding-pill);

    padding: 8px 18px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-weight: 700;

    font-size: 0.92rem;

    color: var(--text-heading);

    transition: var(--transition-smooth);

}



.app-badge-pill:hover {

    background: var(--atl-blue);

    color: #ffffff;

    border-color: var(--atl-blue);

    transform: translateY(-2px);

}



.app-preview-card {

    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);

    border: 1px solid var(--border-light);

    border-radius: var(--rounding-xl);

    padding: 30px;

    box-shadow: var(--shadow-card);

}



/* 6. Global Infrastructure Section */

.infrastructure-section {

    padding: 80px 0;

    position: relative;

    overflow: hidden;

}



.infra-map-wrap {

    position: relative;

    background: #ffffff;

    border: 1px solid var(--border-light);

    border-radius: var(--rounding-xl);

    padding: 24px;

    box-shadow: var(--shadow-md);

}



.map-ping-dot {

    position: absolute;

    width: 14px;

    height: 14px;

    background: var(--atl-blue);

    border: 2px solid #ffffff;

    border-radius: 50%;

    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25);

    animation: pingPulse 2s cubic-bezier(0, 0, 0.2, 1) infinite;

}



@keyframes pingPulse {

    0% { box-shadow: 0 0 0 0 rgba(0, 102, 204, 0.5); }

    70% { box-shadow: 0 0 0 12px rgba(0, 102, 204, 0); }

    100% { box-shadow: 0 0 0 0 rgba(0, 102, 204, 0); }

}



/* 7. Testimonials Section */

.testimonial-card {

    background: #ffffff;

    border: 1.5px solid var(--border-light);

    border-radius: var(--rounding-xl);

    padding: 34px 28px;

    height: 100%;

    box-shadow: var(--shadow-sm);

    transition: var(--transition-smooth);

    display: flex;

    flex-direction: column;

}



.testimonial-card:hover {

    transform: translateY(-6px);

    border-color: var(--atl-blue);

    box-shadow: var(--shadow-card);

}



.star-rating {

    color: #f59e0b;

    font-size: 0.95rem;

    margin-bottom: 16px;

    display: flex;

    gap: 4px;

}



.testimonial-quote {

    font-size: 0.95rem;

    color: var(--text-body);

    line-height: 1.65;

    margin-bottom: 24px;

    flex: 1;

    font-style: italic;

}



.testimonial-user {

    display: flex;

    align-items: center;

    gap: 14px;

    border-top: 1px solid var(--border-light);

    padding-top: 18px;

}



.user-avatar {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid var(--atl-blue-border);

}



.user-info h6 {

    font-size: 0.95rem;

    font-weight: 800;

    margin-bottom: 2px;

}



.user-info span {

    font-size: 0.80rem;

    color: var(--text-muted);

}



/* 8. Newsletter Section */

.newsletter-card {

    background: linear-gradient(135deg, #ffffff 0%, var(--atl-blue-soft) 100%);

    border: 1.5px solid var(--atl-blue-border);

    border-radius: var(--rounding-xl);

    padding: 50px 30px;

    text-align: center;

    box-shadow: var(--shadow-card);

}



/* ==========================================================================

   WHMCS INTERIOR COMPONENTS (CLIENT AREA, TABLES, SIDEBARS)

   ========================================================================== */

.sidebar .card,

.card {

    background: #ffffff !important;

    border: 1px solid var(--border-light) !important;

    border-radius: var(--rounding-lg) !important;

    box-shadow: var(--shadow-sm) !important;

}



.card-header {

    background: #ffffff !important;

    border-bottom: 1px solid var(--border-light) !important;

    font-family: var(--font-heading);

    font-weight: 700;

    color: var(--text-heading);

    padding: 16px 20px;

}



.table {

    color: var(--text-body) !important;

}



.table thead th {

    background: var(--bg-secondary) !important;

    border-bottom: 2px solid var(--border-light) !important;

    color: var(--text-heading) !important;

    font-family: var(--font-heading);

    font-weight: 700;

    font-size: 0.85rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.table td {

    border-top: 1px solid var(--border-light) !important;

    vertical-align: middle;

}



.form-control {

    background-color: #ffffff !important;

    border: 1.5px solid var(--border-light) !important;

    border-radius: var(--rounding-md) !important;

    color: var(--text-heading) !important;

    padding: 10px 14px;

    font-size: 0.92rem;

    transition: var(--transition-smooth);

}



.form-control:focus {

    border-color: var(--atl-blue) !important;

    box-shadow: 0 0 0 3px var(--atl-blue-glow) !important;

}



/* Breadcrumb */

.master-breadcrumb {

    background: transparent;

    padding: 14px 0;

}



.breadcrumb {

    background: transparent;

    padding: 0;

    margin: 0;

    font-size: 0.88rem;

}



.breadcrumb-item a {

    color: var(--text-muted);

}



.breadcrumb-item.active {

    color: var(--atl-blue);

    font-weight: 600;

}



/* ==========================================================================

   FOOTER (CLEAN LIGHT THEME)

   ========================================================================== */

.atl-cyber-footer,

.footer {

    background: #ffffff !important;

    border-top: 1px solid var(--border-light) !important;

    color: var(--text-muted) !important;

    padding: 60px 0 30px !important;

}



.footer-brand-logo {

    display: inline-block;

    margin-bottom: 16px;

    text-decoration: none !important;

}



.footer-brand-logo img {

    max-height: 46px;

    max-width: 220px;

    width: auto;

    object-fit: contain;

    display: block;

}



.atl-cyber-footer .atl-brand-text {

    display: none !important;

}



.atl-cyber-footer h5,

.footer-title {

    font-family: var(--font-heading);

    font-size: 0.95rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    color: var(--text-heading) !important;

    margin-bottom: 18px;

}



.atl-cyber-footer ul,

.footer-links {

    list-style: none;

    padding: 0;

    margin: 0;

}



.atl-cyber-footer ul li,

.footer-links li {

    margin-bottom: 10px;

}



.atl-cyber-footer ul li a,

.footer-links a {

    color: var(--text-muted) !important;

    font-size: 0.90rem;

    transition: var(--transition-smooth);

}



.atl-cyber-footer ul li a:hover,

.footer-links a:hover {

    color: var(--atl-blue) !important;

}



.footer-bottom-bar,

.footer-bottom {

    border-top: 1px solid var(--border-light);

    margin-top: 40px;

    padding-top: 25px;

    font-size: 0.85rem;

    color: var(--text-light);

}



/* ==========================================================================

   RESPONSIVE OPTIMIZATIONS

   ========================================================================== */

@media (max-width: 1250px) {

    .atl-nav-link {

        padding: 18px 8px !important;

        font-size: 0.86rem !important;

    }

}



@media (max-width: 991px) {

    .hero-main-title {

        font-size: 2.2rem !important;

    }

    .badge-floating-security,

    .badge-floating-speed {

        position: static;

        margin-bottom: 12px;

        animation: none;

    }

    .hero-server-wrap {

        margin-top: 30px;

    }

}



/* ==========================================================================

   CATEGORY SHOWCASE & LANDING PAGES (100% LIGHT THEME)

   ========================================================================== */

.cat-hero-section {

    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

    border-bottom: 1px solid var(--border-light);

    padding: 55px 0 35px;

    position: relative;

}



.cat-badge-pill {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: var(--atl-blue-soft);

    border: 1px solid var(--atl-blue-border);

    color: var(--atl-blue);

    font-weight: 700;

    font-size: 0.82rem;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    padding: 6px 16px;

    border-radius: var(--rounding-pill);

    margin-bottom: 18px;

}



.cat-hero-title {

    font-size: 2.7rem;

    font-weight: 900;

    color: var(--text-heading);

    letter-spacing: -0.8px;

    margin-bottom: 16px;

    line-height: 1.2;

}



.cat-hero-desc {

    font-size: 1.12rem;

    color: var(--text-muted);

    max-width: 780px;

    margin: 0 auto 26px;

    line-height: 1.6;

}



.cat-guarantees {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 22px;

    font-size: 0.88rem;

    font-weight: 600;

    color: var(--text-heading);

    margin-bottom: 30px;

}



.cat-guarantee-item {

    display: inline-flex;

    align-items: center;

    gap: 7px;

}



.cat-guarantee-item i {

    color: #10b981;

}



/* Horizontal Category Navigation Bar */

.cat-nav-wrapper {

    background: #ffffff;

    border: 1px solid var(--border-light);

    border-radius: var(--rounding-pill);

    padding: 6px;

    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);

    display: inline-flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 6px;

    margin-top: 10px;

}



.cat-nav-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 18px;

    border-radius: var(--rounding-pill);

    font-size: 0.88rem;

    font-weight: 700;

    color: var(--text-muted);

    text-decoration: none !important;

    transition: all 0.2s ease;

    border: 1px solid transparent;

}



.cat-nav-btn:hover {

    color: var(--atl-blue);

    background: var(--bg-secondary);

}



.cat-nav-btn.active {

    background: var(--atl-blue);

    color: #ffffff !important;

    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.28);

}



/* Category Feature / USP Cards */

.cat-usp-section {

    padding: 65px 0;

    background: #ffffff;

}



.cat-usp-card {

    background: #ffffff;

    border: 1.5px solid var(--border-light);

    border-radius: 18px;

    padding: 28px 24px;

    height: 100%;

    transition: all 0.3s ease;

}



.cat-usp-card:hover {

    transform: translateY(-5px);

    border-color: var(--atl-blue);

    box-shadow: 0 10px 25px rgba(0, 102, 204, 0.08);

}



.cat-usp-icon {

    width: 52px;

    height: 52px;

    border-radius: 14px;

    background: var(--atl-blue-soft);

    color: var(--atl-blue);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.35rem;

    margin-bottom: 18px;

}



.cat-usp-title {

    font-size: 1.08rem;

    font-weight: 800;

    color: var(--text-heading);

    margin-bottom: 10px;

}



.cat-usp-desc {

    font-size: 0.90rem;

    color: var(--text-muted);

    line-height: 1.55;

    margin: 0;

}



/* Technical Specification Table */

.cat-specs-section {

    padding: 60px 0;

    background: var(--bg-secondary);

    border-top: 1px solid var(--border-light);

    border-bottom: 1px solid var(--border-light);

}



.specs-card {

    background: #ffffff;

    border: 1px solid var(--border-light);

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);

}



.specs-table {

    width: 100%;

    margin-bottom: 0;

}



.specs-table th {

    background: #f8fafc;

    padding: 16px 24px;

    font-size: 0.90rem;

    font-weight: 800;

    color: var(--text-heading);

    border-bottom: 1px solid var(--border-light);

}



.specs-table td {

    padding: 14px 24px;

    font-size: 0.90rem;

    color: var(--text-body);

    border-bottom: 1px solid var(--border-light);

    vertical-align: middle;

}



.specs-table tr:last-child td {

    border-bottom: none;

}



.specs-table tr:hover td {

    background-color: #fcfdfe;

}



/* FAQ Accordion */

.cat-faq-section {

    padding: 70px 0;

    background: #ffffff;

}



.faq-card-item {

    background: #ffffff;

    border: 1.5px solid var(--border-light);

    border-radius: 14px;

    margin-bottom: 14px;

    overflow: hidden;

    transition: all 0.2s ease;

}



.faq-card-item:hover {

    border-color: var(--atl-blue-border);

}



.faq-card-header {

    background: #ffffff;

    padding: 18px 24px;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    user-select: none;

}



.faq-card-header h5 {

    font-size: 1.02rem;

    font-weight: 700;

    color: var(--text-heading);

    margin: 0;

}



.faq-card-header .faq-toggle-icon {

    font-size: 0.88rem;

    color: var(--atl-blue);

    transition: transform 0.25s ease;

}



.faq-card-header[aria-expanded="true"] .faq-toggle-icon {

    transform: rotate(180deg);

}



.faq-card-body {

    padding: 0 24px 20px 24px;

    font-size: 0.93rem;

    color: var(--text-muted);

    line-height: 1.65;

}



/* Pre-sale CTA Banner */

.cat-cta-banner {

    background: linear-gradient(135deg, #0066cc 0%, #004d99 100%);

    border-radius: 20px;

    padding: 45px 35px;

    color: #ffffff;

    box-shadow: 0 14px 30px rgba(0, 102, 204, 0.25);

    margin: 50px 0 30px;

}



.cat-cta-banner h3 {

    color: #ffffff;

    font-weight: 800;

    font-size: 1.7rem;

    margin-bottom: 10px;

}



.cat-cta-banner p {

    color: rgba(255, 255, 255, 0.9);

    font-size: 1.05rem;

    margin-bottom: 0;

}



/* ==========================================================================

   ORDER PROCESS & CONFIGURATION SCREEN ENHANCEMENTS

   ========================================================================== */

.order-steps-tracker {

    background: #ffffff;

    border: 1px solid var(--border-light);

    border-radius: 18px;

    padding: 18px 24px;

    margin-bottom: 28px;

    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.04);

}



.steps-list {

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: relative;

    list-style: none;

    padding: 0;

    margin: 0;

}



.steps-list::before {

    content: "";

    position: absolute;

    top: 50%;

    left: 40px;

    right: 40px;

    height: 2px;

    background: #e2e8f0;

    z-index: 1;

    transform: translateY(-50%);

}



.step-item {

    position: relative;

    z-index: 2;

    background: #ffffff;

    padding: 0 14px;

    display: flex;

    align-items: center;

    gap: 10px;

}



.step-num {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: #f1f5f9;

    color: var(--text-muted);

    font-weight: 800;

    font-size: 0.85rem;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 2px solid #e2e8f0;

    transition: all 0.2s ease;

}



.step-item.completed .step-num {

    background: #10b981;

    border-color: #10b981;

    color: #ffffff;

}



.step-item.active .step-num {

    background: var(--atl-blue);

    border-color: var(--atl-blue);

    color: #ffffff;

    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.2);

}



.step-name {

    font-weight: 700;

    font-size: 0.90rem;

    color: var(--text-muted);

}



.step-item.active .step-name {

    color: var(--atl-blue);

}



.step-item.completed .step-name {

    color: var(--text-heading);

}



/* Domain selection card styling in WHMCS */

#frmProductDomain .domain-selection-options {

    background: #ffffff;

    border: 1.5px solid var(--border-light);

    border-radius: 16px;

    padding: 24px;

    margin-bottom: 24px;

    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.03);

}



#frmProductDomain .option {

    border: 1.5px solid var(--border-light);

    border-radius: 12px;

    padding: 16px 20px;

    margin-bottom: 12px;

    transition: all 0.2s ease;

    background: #ffffff;

}



#frmProductDomain .option:hover,

#frmProductDomain .option.active {

    border-color: var(--atl-blue);

    background: #f8fafc;

}



#frmProductDomain .option label {

    font-weight: 700;

    color: var(--text-heading);

    margin: 0;

    cursor: pointer;

    font-size: 0.95rem;

    display: flex;

    align-items: center;

    gap: 10px;

}



#frmProductDomain .domain-input-group {

    margin-top: 18px;

    padding-top: 16px;

    border-top: 1px dashed var(--border-light);

}



@media (max-width: 768px) {

    .cat-hero-title {

        font-size: 2rem;

    }

    .cat-nav-wrapper {

        border-radius: 16px;

        padding: 8px;

    }

    .cat-nav-btn {

        width: 100%;

        justify-content: center;

    }

    .steps-list::before {

        display: none;

    }

    .step-name {

        display: none;

    }

}



/* ==========================================================================

   GLOBAL DIGITAL INFRASTRUCTURE - LIGHT CYBER DATA FLOW NETWORK

   ========================================================================== */

.cyber-network-wrapper {

    position: relative;

    width: 100%;

    height: 440px;

    background: #f0f7ff url('../img/cyber_world_light.webp') no-repeat center center / cover;

    border: 1.5px solid #cbd5e1;

    border-radius: 20px;

    box-shadow: 0 14px 40px rgba(0, 102, 204, 0.08), 0 2px 10px rgba(16, 185, 129, 0.04);

    overflow: hidden;

}



.cyber-network-wrapper::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.05) 75%, rgba(255,255,255,0.75) 100%);

    pointer-events: none;

    z-index: 1;

}



.cyber-header-text {

    position: absolute;

    top: 14px;

    width: 100%;

    text-align: center;

    z-index: 10;

    pointer-events: none;

}



.cyber-header-text .badge-sub {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    font-size: 10px;

    letter-spacing: 1.5px;

    color: #0066cc;

    background: rgba(0, 102, 204, 0.08);

    border: 1px solid rgba(0, 102, 204, 0.2);

    padding: 2px 10px;

    border-radius: 50px;

    font-weight: 700;

    text-transform: uppercase;

    margin-bottom: 4px;

}



.cyber-header-text h2,

.cyber-header-text h3 {

    font-size: 16px;

    letter-spacing: 2px;

    color: #0f172a;

    font-weight: 900;

    text-transform: uppercase;

    margin-bottom: 0;

}



.cyber-header-text p {

    font-size: 10px;

    letter-spacing: 2px;

    color: #0284c7;

    margin-top: 2px;

    font-weight: 700;

}



canvas#cyberCanvas {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 2;

}



.cyber-node-label {

    position: absolute;

    transform: translate(-50%, -50%);

    pointer-events: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    z-index: 15;

    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

    cursor: pointer;

}



.cyber-node-label:hover {

    transform: translate(-50%, -50%) scale(1.08);

    z-index: 20;

}



.cyber-badge {

    background: rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(10px);

    border: 1.5px solid #0066cc;

    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.16), 0 0 0 1px rgba(0, 200, 150, 0.12);

    padding: 5px 12px;

    border-radius: 9999px;

    color: #0f172a;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.5px;

    white-space: nowrap;

    display: flex;

    align-items: center;

    gap: 7px;

}



.cyber-badge .dc-icon {

    font-size: 8px;

    background: linear-gradient(135deg, #0066cc 0%, #0284c7 100%);

    color: #ffffff;

    padding: 2px 6px;

    border-radius: 9999px;

    font-weight: 900;

    letter-spacing: 0.5px;

}



.cyber-badge .ping-status {

    display: inline-flex;

    align-items: center;

    gap: 3px;

    color: #10b981;

    font-size: 9px;

    font-weight: 700;

    background: #ecfdf5;

    padding: 2px 6px;

    border-radius: 9999px;

}



.cyber-pin-line {

    width: 2px;

    height: 12px;

    background: linear-gradient(to bottom, #0066cc, rgba(0, 102, 204, 0));

}



.cyber-bottom-bar {

    position: absolute;

    bottom: 12px;

    left: 20px;

    right: 20px;

    background: rgba(255, 255, 255, 0.92);

    backdrop-filter: blur(10px);

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    padding: 8px 18px;

    display: flex;

    justify-content: space-around;

    align-items: center;

    z-index: 10;

    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);

}



.cyber-metric-item {

    display: flex;

    align-items: center;

    gap: 8px;

}



.cyber-metric-icon {

    width: 28px;

    height: 28px;

    border-radius: 8px;

    background: #e0f2fe;

    color: #0066cc;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.82rem;

}



.cyber-metric-val {

    font-size: 0.85rem;

    font-weight: 800;

    color: #0f172a;

    line-height: 1.15;

}



.cyber-metric-label {

    font-size: 0.68rem;

    color: #64748b;

    font-weight: 600;

}



@media (max-width: 991px) {

    .cyber-network-wrapper {

        height: 360px;

    }

    .cyber-bottom-bar {

        display: none;

    }

}



/* ==================== 6-CARD SPREAD & 8-CARD (4+4) GRID LAYOUTS ==================== */

@media (min-width: 1200px) {

    .pricing-grid-6 .col-xl-2 {

        flex: 0 0 16.666667% !important;

        max-width: 16.666667% !important;

    }

    .pricing-grid-6 .pricing-card {

        padding: 34px 14px 22px !important;

        border-radius: 20px !important;

        margin-top: 18px !important;

        overflow: visible !important;

    }

    .pricing-grid-6 .pricing-plan-title {

        font-size: 1.1rem !important;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }

    .pricing-grid-6 .pricing-plan-tagline {

        font-size: 0.78rem !important;

        min-height: 38px;

        line-height: 1.35;

    }

    .pricing-grid-6 .price-amount {

        font-size: 2.1rem !important;

        letter-spacing: -1px !important;

    }

    .pricing-grid-6 .price-currency {

        font-size: 1.15rem !important;

    }

    .pricing-grid-6 .price-decimal {

        font-size: 1.05rem !important;

    }

    .pricing-grid-6 .price-annual-hint {

        font-size: 0.72rem !important;

        padding: 3px 6px !important;

    }

    .pricing-grid-6 .pricing-action .btn {

        font-size: 0.86rem !important;

        padding: 8px 10px !important;

    }

    .pricing-grid-6 .pricing-feature-list li {

        font-size: 0.8rem !important;

        padding: 7px 0 !important;

        gap: 6px !important;

    }

    .pricing-grid-6 .pricing-feature-list li .feat-icon {

        width: 16px !important;

        height: 16px !important;

        font-size: 8px !important;

        min-width: 16px !important;

    }

    .pricing-grid-6 .pricing-badge {

        font-size: 0.68rem !important;

        padding: 5px 14px !important;

        top: -13px !important;

        border-radius: 50px !important;

        z-index: 25 !important;

        line-height: 1.2 !important;

    }

}



/* 8-Card (4+4) Grid */

@media (min-width: 1200px) {

    .pricing-grid-8 .col-xl-3 {

        flex: 0 0 25% !important;

        max-width: 25% !important;

    }

    .pricing-grid-8 .pricing-card {

        padding: 32px 20px 26px;

    }

}



/* ==================== PRE-SALE CTA BANNER (CUSTOM USER BANNER) ==================== */

.category-cta-banner {

    position: relative;

    background-color: #0054aa;

    background-image: url('../img/user_banner.jpg');

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    border-radius: 22px;

    padding: 38px 175px 38px 145px;

    box-shadow: 0 18px 45px -10px rgba(0, 84, 170, 0.38);

    overflow: hidden;

}



@media (max-width: 1200px) {

    .category-cta-banner {

        padding: 34px 140px 34px 115px;

    }

}



@media (max-width: 991px) {

    .category-cta-banner {

        padding: 32px 24px;

        background-size: cover;

        background-position: center right;

        text-align: center;

    }

}



/* ==========================================================================

   GLOBAL BUTTON STYLES & DEFINITIVE FIX FOR MISSING BUTTONS

   ========================================================================== */

.btn {

    font-family: var(--font-heading);

    font-weight: 600;

    border-radius: 8px;

    transition: var(--transition-smooth);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    vertical-align: middle;

}



/* All Primary Buttons, Login & Submit */

.btn-primary,

button#login,

input[type="submit"].btn-primary,

button[type="submit"].btn-primary,

#btnDomainContinue,

#btnCheckAvailability,

#btnCompleteOrder,

#btnCompleteProductConfig,

#useOwnDomain,

.modal-submit {

    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%) !important;

    background-color: #0066cc !important;

    border: none !important;

    color: #ffffff !important;

    font-family: var(--font-heading) !important;

    font-weight: 700 !important;

    border-radius: 10px !important;

    padding: 10px 24px !important;

    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.24) !important;

    cursor: pointer !important;

    visibility: visible !important;

    opacity: 1 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    text-decoration: none !important;

}



.btn-primary:hover,

button#login:hover,

input[type="submit"].btn-primary:hover,

#btnDomainContinue:hover,

#btnCheckAvailability:hover,

#btnCompleteOrder:hover,

#btnCompleteProductConfig:hover,

#useOwnDomain:hover,

.modal-submit:hover {

    background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%) !important;

    background-color: #0052a3 !important;

    color: #ffffff !important;

    box-shadow: 0 8px 22px rgba(0, 102, 204, 0.38) !important;

    transform: translateY(-2px);

    text-decoration: none !important;

}



/* Success & Cart Action Buttons */

.btn-success,

.btn-order-now,

.btn-add-to-cart {

    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%) !important;

    background-color: #0066cc !important;

    border: none !important;

    color: #ffffff !important;

    font-family: var(--font-heading) !important;

    font-weight: 700 !important;

    border-radius: 10px !important;

    padding: 10px 22px !important;

    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.24) !important;

    cursor: pointer !important;

    visibility: visible !important;

    opacity: 1 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    text-decoration: none !important;

}



.btn-success:hover,

.btn-order-now:hover,

.btn-add-to-cart:hover {

    background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%) !important;

    background-color: #0052a3 !important;

    color: #ffffff !important;

    box-shadow: 0 8px 22px rgba(0, 102, 204, 0.38) !important;

    transform: translateY(-2px);

    text-decoration: none !important;

}



/* Checkout Button (Vibrant Emerald Green) */

.btn-checkout,

#checkout,

#btnCompleteOrder {

    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;

    background-color: #10b981 !important;

    border: none !important;

    color: #ffffff !important;

    font-family: var(--font-heading) !important;

    font-weight: 800 !important;

    font-size: 1.1rem !important;

    border-radius: 12px !important;

    padding: 14px 30px !important;

    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.32) !important;

    cursor: pointer !important;

    visibility: visible !important;

    opacity: 1 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 10px !important;

    text-decoration: none !important;

}



.btn-checkout:hover,

#checkout:hover,

#btnCompleteOrder:hover {

    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;

    background-color: #059669 !important;

    color: #ffffff !important;

    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.45) !important;

    transform: translateY(-2px);

    text-decoration: none !important;

}



/* Default / Secondary Buttons */

.btn-default,

.btn-secondary {

    background: #ffffff !important;

    border: 1.5px solid #e2e8f0 !important;

    color: #475569 !important;

    font-weight: 600 !important;

    border-radius: 8px !important;

    padding: 8px 18px !important;

    transition: var(--transition-smooth) !important;

}



.btn-default:hover,

.btn-secondary:hover {

    background: #f8fafc !important;

    border-color: #cbd5e1 !important;

    color: #0f172a !important;

}



/* ==========================================================================

   LOGIN PAGE MODERN STYLING

   ========================================================================== */

.login-form .card {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 20px;

    box-shadow: 0 18px 45px -8px rgba(15, 23, 42, 0.08);

    overflow: hidden;

}



.login-form .card-body {

    padding: 42px 48px;

}



.login-form .form-control {

    height: 48px;

    border-radius: 10px;

    border: 1.5px solid #e2e8f0;

    font-size: 0.95rem;

    color: #0f172a;

    transition: all 0.2s ease;

}



.login-form .form-control:focus {

    border-color: #0066cc !important;

    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.12) !important;

}



.login-form .input-group-text {

    background: #f8fafc;

    border: 1.5px solid #e2e8f0;

    border-right: none;

    color: #64748b;

    border-radius: 10px 0 0 10px;

}



.login-form .btn-reveal-pw {

    border: 1.5px solid #e2e8f0 !important;

    border-left: none !important;

    border-radius: 0 10px 10px 0 !important;

    background: #f8fafc !important;

    color: #64748b !important;

}



.login-form #login {

    min-width: 140px;

    padding: 12px 32px !important;

    font-size: 1rem !important;

}



/* ==========================================================================

   MODERN CART & ORDER FORM SUITE (STANDARD CART)

   ========================================================================== */

#order-standard_cart {

    font-family: var(--font-body);

    padding: 10px 0 50px 0;

}



/* Modern Segmented Order Steps Tracker */

.order-steps-tracker {

    background: #ffffff !important;

    border: 1.5px solid #e2e8f0 !important;

    border-radius: 16px !important;

    padding: 10px 18px !important;

    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 12px !important;

    margin-bottom: 24px !important;

}



.order-steps-tracker .step-segment {

    flex: 1 !important;

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 8px 16px !important;

    border-radius: 12px !important;

    background: transparent !important;

    border: 1px solid transparent !important;

    transition: all 0.25s ease !important;

}



.order-steps-tracker .step-segment.active {

    background: #eff6ff !important;

    border-color: #bfdbfe !important;

}



.order-steps-tracker .step-segment.completed {

    background: #f0fdf4 !important;

    border-color: #bbf7d0 !important;

}



.order-steps-tracker .step-icon {

    width: 32px !important;

    height: 32px !important;

    border-radius: 50% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-weight: 800 !important;

    font-size: 0.88rem !important;

    background: #f1f5f9 !important;

    color: #64748b !important;

    flex-shrink: 0 !important;

    transition: all 0.25s ease !important;

}



.order-steps-tracker .step-segment.active .step-icon {

    background: #0066cc !important;

    color: #ffffff !important;

    box-shadow: 0 3px 10px rgba(0, 102, 204, 0.3) !important;

}



.order-steps-tracker .step-segment.completed .step-icon {

    background: #10b981 !important;

    color: #ffffff !important;

    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3) !important;

}



.order-steps-tracker .step-text {

    display: flex !important;

    flex-direction: column !important;

    line-height: 1.25 !important;

}



.order-steps-tracker .step-tag {

    font-size: 0.72rem !important;

    font-weight: 700 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.5px !important;

    color: #94a3b8 !important;

}



.order-steps-tracker .step-segment.active .step-tag {

    color: #0066cc !important;

}



.order-steps-tracker .step-segment.completed .step-tag {

    color: #10b981 !important;

}



.order-steps-tracker .step-title {

    font-family: var(--font-heading) !important;

    font-size: 0.92rem !important;

    font-weight: 700 !important;

    color: #475569 !important;

}



.order-steps-tracker .step-segment.active .step-title {

    color: #0f172a !important;

}



.order-steps-tracker .step-segment.completed .step-title {

    color: #0f172a !important;

}



.order-steps-tracker .step-divider {

    color: #cbd5e1 !important;

    font-size: 0.85rem !important;

    display: flex !important;

    align-items: center !important;

}



.order-steps-tracker .step-divider.completed {

    color: #10b981 !important;

}



@media (max-width: 768px) {

    .order-steps-tracker .step-text {

        display: none !important;

    }

    .order-steps-tracker {

        padding: 8px 12px !important;

    }

}



/* Master Layout: Flex Alignment & No Floats */

#order-standard_cart > .row {

    display: flex !important;

    flex-wrap: wrap !important;

    align-items: flex-start !important;

    margin: 0 -15px !important;

}



#order-standard_cart .cart-sidebar {

    flex: 0 0 280px !important;

    max-width: 280px !important;

    width: 280px !important;

    float: none !important;

    position: sticky !important;

    top: 24px !important;

    padding: 0 15px !important;

}



#order-standard_cart .cart-body {

    flex: 1 1 0 !important;

    max-width: calc(100% - 280px) !important;

    width: calc(100% - 280px) !important;

    float: none !important;

    padding: 0 15px 0 24px !important;

}



@media (max-width: 991px) {

    #order-standard_cart .cart-sidebar {

        display: none !important;

    }

    #order-standard_cart .sidebar-collapsed {

        display: block !important;

        margin-bottom: 24px !important;

    }

    #order-standard_cart .cart-body {

        flex: 0 0 100% !important;

        max-width: 100% !important;

        width: 100% !important;

        padding: 0 15px !important;

    }

}



/* Sidebar Categories Card */

#order-standard_cart .card-sidebar,

#order-standard_cart .cart-sidebar .panel {

    background: #ffffff !important;

    border: 1.5px solid #e2e8f0 !important;

    border-radius: 18px !important;

    overflow: hidden !important;

    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;

    margin-bottom: 20px !important;

}



#order-standard_cart .card-sidebar .card-header,

#order-standard_cart .cart-sidebar .panel-heading {

    background: #f8fafc !important;

    border-bottom: 1px solid #e2e8f0 !important;

    padding: 16px 20px !important;

}



#order-standard_cart .card-sidebar .panel-title {

    font-family: var(--font-heading) !important;

    font-weight: 800 !important;

    font-size: 1.02rem !important;

    color: #0f172a !important;

    margin: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

}



#order-standard_cart .card-sidebar .panel-title i.card-minimise {

    display: none !important;

}



#order-standard_cart .card-sidebar .list-group {

    padding: 8px !important;

    margin: 0 !important;

}



#order-standard_cart .card-sidebar .list-group-item {

    border: none !important;

    border-radius: 10px !important;

    padding: 10px 16px !important;

    margin: 2px 0 !important;

    font-weight: 600 !important;

    font-size: 0.92rem !important;

    color: #475569 !important;

    transition: all 0.2s ease !important;

    background: transparent !important;

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

}



#order-standard_cart .card-sidebar .list-group-item:hover {

    background: #eff6ff !important;

    color: #0066cc !important;

    transform: translateX(4px) !important;

}



#order-standard_cart .card-sidebar .list-group-item.active {

    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%) !important;

    color: #ffffff !important;

    font-weight: 700 !important;

    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.28) !important;

    transform: none !important;

}



/* Page Title & Header */

#order-standard_cart .header-lined {

    border-bottom: 2px solid #e2e8f0 !important;

    padding-bottom: 18px !important;

    margin-bottom: 28px !important;

}



#order-standard_cart .header-lined h1 {

    font-family: var(--font-heading) !important;

    font-weight: 800 !important;

    font-size: 2rem !important;

    color: #0f172a !important;

    letter-spacing: -0.5px !important;

    margin: 0 !important;

}



#order-standard_cart .header-lined p {

    font-size: 1rem !important;

    color: #64748b !important;

    margin: 6px 0 0 0 !important;

}



/* Products Layout & Equal-Height Flex Grid */

#order-standard_cart .products {

    margin: 0 !important;

}



#order-standard_cart .products .row {

    display: flex !important;

    flex-wrap: wrap !important;

    margin: 0 -12px !important;

}



#order-standard_cart .products .col-md-6 {

    display: flex !important;

    flex-direction: column !important;

    padding: 0 12px !important;

    margin-bottom: 24px !important;

}



#order-standard_cart .products .product {

    background: #ffffff !important;

    border: 1.5px solid #e2e8f0 !important;

    border-radius: 18px !important;

    padding: 26px !important;

    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;

    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: space-between !important;

    flex: 1 1 100% !important;

    height: 100% !important;

    min-height: auto !important;

    margin: 0 !important;

}



#order-standard_cart .products .product:hover {

    border-color: #93c5fd !important;

    box-shadow: 0 14px 34px rgba(0, 102, 204, 0.12) !important;

    transform: translateY(-3px) !important;

}



#order-standard_cart .products .product header {

    flex: 0 0 auto !important;

    background: transparent !important;

    border: none !important;

    border-bottom: 1px solid #f1f5f9 !important;

    padding: 0 0 14px 0 !important;

    margin: 0 0 16px 0 !important;

}



#order-standard_cart .products .product header span {

    font-family: var(--font-heading) !important;

    font-weight: 800 !important;

    font-size: 1.25rem !important;

    color: #0f172a !important;

    line-height: 1.3 !important;

}



#order-standard_cart .products .product .product-desc {

    flex: 1 1 auto !important;

    float: none !important;

    width: 100% !important;

    padding: 0 !important;

    margin: 0 0 20px 0 !important;

    font-size: 0.92rem !important;

    line-height: 1.65 !important;

    color: #475569 !important;

}



#order-standard_cart .products .product .product-desc p {

    font-size: 0.92rem !important;

    line-height: 1.65 !important;

    color: #475569 !important;

    margin: 0 !important;

}



#order-standard_cart .products .product .product-desc strong {

    display: block !important;

    font-size: 0.95rem !important;

    font-weight: 700 !important;

    color: #0f172a !important;

    margin-bottom: 6px !important;

}



#order-standard_cart .products .product .product-desc ul {

    list-style: none !important;

    padding: 0 !important;

    margin: 0 !important;

}



#order-standard_cart .products .product .product-desc ul li {

    padding: 4px 0 !important;

    font-size: 0.9rem !important;

    color: #475569 !important;

}



#order-standard_cart .products .product footer {

    flex: 0 0 auto !important;

    float: none !important;

    width: 100% !important;

    background: transparent !important;

    border: none !important;

    border-top: 1px solid #f1f5f9 !important;

    padding: 18px 0 0 0 !important;

    margin: auto 0 0 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

}



#order-standard_cart .products .product footer .product-pricing {

    color: #64748b !important;

    font-size: 0.85rem !important;

    line-height: 1.3 !important;

    margin: 0 !important;

}



#order-standard_cart .products .product footer .price {

    display: block !important;

    font-family: var(--font-heading) !important;

    font-size: 1.65rem !important;

    font-weight: 800 !important;

    color: #0066cc !important;

    line-height: 1.1 !important;

    margin-bottom: 2px !important;

}



#order-standard_cart .products .product footer .btn-order-now {

    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%) !important;

    color: #ffffff !important;

    font-family: var(--font-heading) !important;

    font-weight: 700 !important;

    font-size: 0.92rem !important;

    padding: 10px 22px !important;

    border-radius: 10px !important;

    border: none !important;

    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.28) !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    white-space: nowrap !important;

    text-decoration: none !important;

    visibility: visible !important;

    opacity: 1 !important;

}



#order-standard_cart .products .product footer .btn-order-now:hover {

    background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%) !important;

    transform: translateY(-2px) !important;

    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4) !important;

    color: #ffffff !important;

}



/* Domain Configuration Step */

#frmProductDomain .domain-selection-options,

.domain-selection-form {

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 18px;

    padding: 28px;

    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);

    margin-bottom: 28px;

}



#frmProductDomain .option {

    border: 1.5px solid #e2e8f0;

    border-radius: 12px;

    padding: 18px 22px;

    margin-bottom: 14px;

    background: #ffffff;

    transition: all 0.2s ease;

}



#frmProductDomain .option:hover,

#frmProductDomain .option.active {

    border-color: #0066cc;

    background: #f8fafc;

}



#frmProductDomain .option label {

    font-weight: 700;

    font-size: 0.96rem;

    color: #0f172a;

    margin: 0;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 12px;

}



#frmProductDomain textarea#message,

#frmProductDomain input[type="text"] {

    border: 1.5px solid #cbd5e1 !important;

    border-radius: 12px !important;

    padding: 14px 18px !important;

    font-size: 0.95rem !important;

    color: #0f172a !important;

    background: #ffffff !important;

    transition: all 0.2s ease;

}



#frmProductDomain textarea#message:focus,

#frmProductDomain input[type="text"]:focus {

    border-color: #0066cc !important;

    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.12) !important;

    outline: none;

}



#frmProductDomain #btnCheckAvailability,

#frmProductDomain #useOwnDomain,

#frmProductDomain button[type="submit"] {

    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%) !important;

    color: #ffffff !important;

    font-weight: 700 !important;

    font-size: 1rem !important;

    border-radius: 10px !important;

    border: none !important;

    padding: 12px 24px !important;

    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.28) !important;

    min-height: 48px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    visibility: visible !important;

    opacity: 1 !important;

}



/* Domain Pricing Page & Table */

.domain-pricing h4 {

    font-family: var(--font-heading);

    font-weight: 800;

    color: #0f172a;

    font-size: 1.4rem;

    margin-bottom: 16px;

}



.tld-filters {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 24px;

}



.tld-filters .badge {

    background: #ffffff !important;

    color: #475569 !important;

    border: 1.5px solid #e2e8f0 !important;

    padding: 9px 18px !important;

    border-radius: 9999px !important;

    font-size: 0.86rem !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    transition: all 0.2s ease !important;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;

    display: inline-flex !important;

    align-items: center !important;

}



.tld-filters .badge:hover {

    background: #eff6ff !important;

    border-color: #0066cc !important;

    color: #0066cc !important;

}



.tld-filters .badge.badge-success {

    background: #0066cc !important;

    border-color: #0066cc !important;

    color: #ffffff !important;

    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.3) !important;

}



#tableDomainPricing {

    border-collapse: separate !important;

    border-spacing: 0;

    width: 100% !important;

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);

}



#tableDomainPricing thead th {

    background: #f8fafc !important;

    color: #0f172a !important;

    font-family: var(--font-heading) !important;

    font-weight: 700 !important;

    font-size: 0.82rem !important;

    text-transform: uppercase !important;

    letter-spacing: 0.5px !important;

    border-bottom: 2px solid #e2e8f0 !important;

    padding: 14px 16px !important;

    vertical-align: middle !important;

}



#tableDomainPricing tbody td {

    padding: 14px 16px !important;

    vertical-align: middle !important;

    border-bottom: 1px solid #f1f5f9 !important;

    color: #334155 !important;

    font-size: 0.92rem !important;

}



#tableDomainPricing tbody tr:hover {

    background-color: #f8fafc !important;

}



#tableDomainPricing_wrapper .dataTables_filter input {

    border: 1.5px solid #cbd5e1 !important;

    border-radius: 10px !important;

    padding: 8px 16px !important;

    font-size: 0.9rem !important;

    color: #0f172a !important;

}



#tableDomainPricing_wrapper .dataTables_filter input:focus {

    border-color: #0066cc !important;

    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.12) !important;

    outline: none;

}



/* View Cart & Checkout Summary */

#order-standard_cart .view-cart-items {

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 18px;

    padding: 24px;

    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);

    margin-bottom: 24px;

}



/* Order Configuration: Align Right Sidebar (Sipariş Özeti) with Left Product Box */

#order-standard_cart .cart-sub-heading {

    color: #64748b !important;

    font-size: 0.95rem !important;

    margin-bottom: 24px !important;

    margin-top: 5px !important;

    line-height: 1.5 !important;

}



#order-standard_cart .secondary-cart-body {

    flex: 0 0 65% !important;

    max-width: 65% !important;

    width: 65% !important;

    float: none !important;

    padding-right: 15px !important;

    padding-left: 15px !important;

}



#order-standard_cart .secondary-cart-sidebar {

    flex: 0 0 35% !important;

    max-width: 35% !important;

    width: 35% !important;

    float: none !important;

    margin-top: 0 !important;

    padding-right: 15px !important;

    padding-left: 15px !important;

    position: sticky !important;

    top: 24px !important;

    align-self: flex-start !important;

}



@media (max-width: 991px) {

    #order-standard_cart .secondary-cart-body {

        flex: 0 0 100% !important;

        max-width: 100% !important;

        width: 100% !important;

    }

    #order-standard_cart .secondary-cart-sidebar {

        flex: 0 0 100% !important;

        max-width: 100% !important;

        width: 100% !important;

        margin-top: 28px !important;

        position: static !important;

    }

}



/* Unified Order Summary Card */

#order-standard_cart #orderSummary {

    background: #ffffff !important;

    border: 1.5px solid #e2e8f0 !important;

    border-radius: 20px !important;

    padding: 24px !important;

    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05) !important;

    box-sizing: border-box !important;

}



#order-standard_cart .order-summary {

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    padding: 0 !important;

    margin: 0 !important;

    box-shadow: none !important;

}



#order-standard_cart .order-summary h2 {

    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;

    font-size: 1.25rem !important;

    font-weight: 800 !important;

    color: #0f172a !important;

    text-align: center !important;

    margin: 0 0 18px 0 !important;

    padding: 0 0 14px 0 !important;

    border-bottom: 1.5px solid #f1f5f9 !important;

    background: transparent !important;

}



#order-standard_cart .summary-container {

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    padding: 0 !important;

    margin: 0 !important;

    min-height: auto !important;

    font-size: 0.90rem !important;

    color: #334155 !important;

}



#order-standard_cart .summary-container .product-name {

    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;

    font-size: 1.05rem !important;

    font-weight: 700 !important;

    color: #0f172a !important;

    margin-bottom: 2px !important;

    display: block !important;

}



#order-standard_cart .summary-container .product-group {

    font-size: 0.82rem !important;

    color: #64748b !important;

    margin-bottom: 12px !important;

    display: block !important;

}



#order-standard_cart .summary-container .clearfix {

    padding: 5px 0 !important;

    font-size: 0.88rem !important;

    color: #475569 !important;

}



#order-standard_cart .summary-container .summary-totals {

    border-top: 1px solid #e2e8f0 !important;

    border-bottom: 1px solid #e2e8f0 !important;

    margin: 14px 0 !important;

    padding: 10px 0 !important;

}



/* Centered Highlighted Total Due Box */

#order-standard_cart .order-summary .total-due-today,

#order-standard_cart .total-due-today {

    background: #f0f7ff !important;

    border: 1.5px solid #bae6fd !important;

    border-radius: 14px !important;

    padding: 16px 20px !important;

    margin: 18px 0 16px 0 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    box-sizing: border-box !important;

}



#order-standard_cart .order-summary .total-due-today .amt,

#order-standard_cart .total-due-today .amt {

    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;

    font-size: 1.85rem !important;

    font-weight: 800 !important;

    color: #0066cc !important;

    line-height: 1.2 !important;

    display: block !important;

    margin-bottom: 6px !important;

    white-space: nowrap !important;

}



#order-standard_cart .order-summary .total-due-today span:not(.amt),

#order-standard_cart .total-due-today span:not(.amt) {

    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;

    font-size: 0.74rem !important;

    font-weight: 700 !important;

    color: #0284c7 !important;

    letter-spacing: 0.5px !important;

    text-transform: uppercase !important;

    display: block !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;

}



/* Order Complete Button */

#order-standard_cart #btnCompleteProductConfig {

    width: 100% !important;

    margin-top: 0 !important;

    padding: 14px 24px !important;

    border-radius: 12px !important;

    font-size: 1rem !important;

    font-weight: 700 !important;

    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%) !important;

    border: none !important;

    color: #ffffff !important;

    box-shadow: 0 6px 18px rgba(0, 102, 204, 0.28) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    transition: all 0.25s ease !important;

}



#order-standard_cart #btnCompleteProductConfig:hover {

    background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%) !important;

    transform: translateY(-2px) !important;

    box-shadow: 0 10px 24px rgba(0, 102, 204, 0.38) !important;

    color: #ffffff !important;

}



/* Clean Modern Section Sub-headings (No Squished Badges) */

#order-standard_cart .sub-heading {

    height: auto !important;

    min-height: 0 !important;

    position: static !important;

    text-align: left !important;

    margin: 36px 0 16px 0 !important;

    padding: 18px 0 0 0 !important;

    border-top: 1.5px solid #e2e8f0 !important;

    clear: both !important;

    display: block !important;

}



#order-standard_cart .sub-heading span,

#order-standard_cart .sub-heading-borderless span,

#order-standard_cart .sub-heading .primary-bg-color {

    position: static !important;

    display: inline-block !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;

    font-size: 1.12rem !important;

    font-weight: 700 !important;

    color: #0f172a !important;

    letter-spacing: 0 !important;

    top: 0 !important;

}



/* Universal Dropdown / Select Fix (No Clipping, Perfect Height) */

select,

select.form-control,

select.custom-select,

.custom-select,

.form-control.custom-select,

#inputBillingcycle {

    height: 46px !important;

    min-height: 46px !important;

    line-height: 1.5 !important;

    padding: 8px 38px 8px 14px !important;

    font-size: 0.94rem !important;

    border: 1.5px solid #cbd5e1 !important;

    border-radius: 10px !important;

    background-color: #ffffff !important;

    color: #0f172a !important;

    vertical-align: middle !important;

    box-sizing: border-box !important;

    -webkit-appearance: none !important;

    -moz-appearance: none !important;

    appearance: none !important;

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;

    background-repeat: no-repeat !important;

    background-position: right 14px center !important;

    background-size: 12px 12px !important;

}



select:focus,

select.form-control:focus,

select.custom-select:focus,

.custom-select:focus,

#inputBillingcycle:focus {

    border-color: #0066cc !important;

    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15) !important;

    outline: none !important;

}



/* ==========================================================================

   WHMCS CART & CONFIGURE PRODUCT SECTION REFINEMENT (PREVENT OVERLAPPING)

   ========================================================================== */



/* Sub-heading / Section Divider */

#order-standard_cart .sub-heading {

    height: auto !important;

    min-height: 0 !important;

    position: static !important;

    text-align: left !important;

    margin: 36px 0 16px 0 !important;

    padding: 18px 0 0 0 !important;

    border-top: 1.5px solid #e2e8f0 !important;

    clear: both !important;

    display: block !important;

}



#order-standard_cart .sub-heading span,

#order-standard_cart .sub-heading-borderless span,

#order-standard_cart .sub-heading .primary-bg-color {

    position: static !important;

    display: inline-block !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;

    font-size: 1.12rem !important;

    font-weight: 700 !important;

    color: #0f172a !important;

    letter-spacing: 0 !important;

    top: 0 !important;

}



/* Product Info Box */

#order-standard_cart .product-info {

    background: #ffffff !important;

    border: 1.5px solid #e2e8f0 !important;

    border-radius: 14px !important;

    padding: 22px 24px !important;

    margin-bottom: 28px !important;

    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03) !important;

}



#order-standard_cart .product-info .product-title {

    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;

    font-size: 1.25rem !important;

    font-weight: 700 !important;

    color: #0f172a !important;

    margin-bottom: 12px !important;

}



/* Field Container & Billing Cycle */

#order-standard_cart .field-container {

    margin-bottom: 28px !important;

    clear: both !important;

}



#order-standard_cart .field-container .form-group {

    margin-bottom: 0 !important;

}



#order-standard_cart .field-container label,

#order-standard_cart #productConfigurableOptions label,

#order-standard_cart .form-group label {

    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;

    font-size: 0.92rem !important;

    font-weight: 600 !important;

    color: #1e293b !important;

    margin-bottom: 8px !important;

    display: inline-block !important;

}



/* Product Configurable Options Grid */

#order-standard_cart .product-configurable-options,

#order-standard_cart #productConfigurableOptions {

    margin-top: 14px !important;

    margin-bottom: 28px !important;

    clear: both !important;

}



#order-standard_cart .product-configurable-options .form-group,

#order-standard_cart #productConfigurableOptions .form-group {

    margin-bottom: 22px !important;

}



/* Question / Help Alert */

#order-standard_cart .alert-warning.info-text-sm {

    background-color: #fffbeb !important;

    border: 1.5px solid #fde68a !important;

    border-radius: 12px !important;

    color: #92400e !important;

    padding: 14px 20px !important;

    margin-top: 24px !important;

    margin-bottom: 20px !important;

    font-size: 0.92rem !important;

}



/* Complete Product Config Button ("Devam Et") */

#order-standard_cart #btnCompleteProductConfig {

    width: 100% !important;

    background: linear-gradient(135deg, #0066cc 0%, #004c99 100%) !important;

    color: #ffffff !important;

    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif) !important;

    font-weight: 700 !important;

    font-size: 1.05rem !important;

    padding: 14px 24px !important;

    border-radius: 12px !important;

    border: none !important;

    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.3) !important;

    transition: all 0.2s ease !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 10px !important;

    margin-top: 16px !important;

    cursor: pointer !important;

}



#order-standard_cart #btnCompleteProductConfig:hover {

    transform: translateY(-2px) !important;

    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4) !important;

    color: #ffffff !important;

}



/* ==========================================================================

   GLOBAL AUTH MODALS & MULTI-STEP REGISTRATION WIZARD STYLES

   ========================================================================== */



/* Modal Container & Dialog */

.atl-auth-modal .modal-content {

    background: #ffffff !important;

    border-radius: 20px !important;

    border: 1px solid rgba(226, 232, 240, 0.8) !important;

    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25) !important;

    overflow: hidden !important;

}



.atl-auth-modal .modal-header {

    background: #ffffff !important;

}



.atl-auth-modal .modal-header .close {

    font-size: 1.6rem !important;

    font-weight: 300 !important;

    opacity: 0.5 !important;

    transition: opacity 0.2s ease !important;

    padding: 1rem !important;

    margin: -1rem -1rem -1rem auto !important;

}



.atl-auth-modal .modal-header .close:hover {

    opacity: 1 !important;

}



.auth-modal-icon-badge {

    width: 48px;

    height: 48px;

    border-radius: 14px;

    background: rgba(0, 102, 204, 0.08);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.35rem;

    flex-shrink: 0;

}



.auth-modal-icon-reg {

    background: rgba(16, 185, 129, 0.1) !important;

}



.atl-input {

    height: 46px !important;

    min-height: 46px !important;

    border: 1.5px solid #cbd5e1 !important;

    border-radius: 10px !important;

    font-size: 0.94rem !important;

    color: #0f172a !important;

    padding: 8px 14px !important;

    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;

}



.atl-input:focus {

    border-color: #0066cc !important;

    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.12) !important;

    outline: none !important;

}



.input-group .atl-input {

    border-top-left-radius: 0 !important;

    border-bottom-left-radius: 0 !important;

}



.input-group-prepend .input-group-text {

    background-color: #f8fafc !important;

    border: 1.5px solid #cbd5e1 !important;

    border-right: none !important;

    border-top-left-radius: 10px !important;

    border-bottom-left-radius: 10px !important;

    color: #64748b !important;

    padding: 0 14px !important;

}



.atl-pw-toggle {

    background: transparent !important;

    border: 1.5px solid #cbd5e1 !important;

    border-left: none !important;

    border-top-right-radius: 10px !important;

    border-bottom-right-radius: 10px !important;

    color: #64748b !important;

    padding: 0 14px !important;

}



.atl-pw-toggle:hover {

    color: #0f172a !important;

}



/* Modal Stepper (2 Steps) */

.atl-modal-stepper {

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #f8fafc;

    border: 1.5px solid #e2e8f0;

    border-radius: 14px;

    padding: 10px 18px;

    margin-bottom: 8px;

}



.atl-modal-stepper .modal-step-item {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #94a3b8;

    transition: all 0.3s ease;

}



.atl-modal-stepper .modal-step-item .step-num {

    width: 34px;

    height: 34px;

    border-radius: 10px;

    background: #e2e8f0;

    color: #64748b;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.88rem;

    font-weight: 700;

    transition: all 0.3s ease;

}



.atl-modal-stepper .modal-step-item .step-label {

    display: flex;

    flex-direction: column;

}



.atl-modal-stepper .modal-step-item .step-num-text {

    font-size: 0.72rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: #94a3b8;

}



.atl-modal-stepper .modal-step-item .step-title-text {

    font-size: 0.88rem;

    font-weight: 700;

    color: #64748b;

}



.atl-modal-stepper .modal-step-line {

    flex-grow: 1;

    height: 2px;

    background: #e2e8f0;

    margin: 0 16px;

}



.atl-modal-stepper .modal-step-item.active {

    color: #0066cc;

}



.atl-modal-stepper .modal-step-item.active .step-num {

    background: #0066cc;

    color: #ffffff;

    box-shadow: 0 4px 10px rgba(0, 102, 204, 0.3);

}



.atl-modal-stepper .modal-step-item.active .step-num-text {

    color: #0066cc;

}



.atl-modal-stepper .modal-step-item.active .step-title-text {

    color: #0f172a;

}



.atl-modal-stepper .modal-step-item.completed .step-num {

    background: #10b981;

    color: #ffffff;

}



/* Standalone Register Page Stepper (/register.php) */

.atl-register-page-stepper {

    display: flex;

    align-items: center;

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 18px;

    padding: 16px 24px;

    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);

}



.atl-register-page-stepper .step-card {

    display: flex;

    align-items: center;

    gap: 14px;

    color: #94a3b8;

    flex: 1;

    transition: all 0.3s ease;

}



.atl-register-page-stepper .step-badge {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    background: #f1f5f9;

    color: #64748b;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

    font-weight: 700;

    transition: all 0.3s ease;

    flex-shrink: 0;

}



.atl-register-page-stepper .step-content {

    display: flex;

    flex-direction: column;

}



.atl-register-page-stepper .step-subtitle {

    font-size: 0.76rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    color: #94a3b8;

}



.atl-register-page-stepper .step-title {

    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);

    font-size: 1rem;

    font-weight: 700;

    color: #64748b;

}



.atl-register-page-stepper .step-connector {

    width: 60px;

    height: 2px;

    background: #e2e8f0;

    margin: 0 20px;

    transition: background 0.3s ease;

}



.atl-register-page-stepper .step-connector.active {

    background: #10b981;

}



.atl-register-page-stepper .step-card.active .step-badge {

    background: linear-gradient(135deg, #0066cc 0%, #004c99 100%);

    color: #ffffff;

    box-shadow: 0 6px 16px rgba(0, 102, 204, 0.3);

}



.atl-register-page-stepper .step-card.active .step-subtitle {

    color: #0066cc;

}



.atl-register-page-stepper .step-card.active .step-title {

    color: #0f172a;

}



.atl-register-page-stepper .step-card.completed .step-badge {

    background: #10b981;

    color: #ffffff;

}



.atl-register-page-stepper .step-card.completed .step-subtitle {

    color: #10b981;

}



.py-2-5 {

    padding-top: 0.75rem !important;

    padding-bottom: 0.75rem !important;

}



.font-size-14 {

    font-size: 0.88rem !important;

}



.font-size-13 {

    font-size: 0.82rem !important;

}



.text-slate-600 {

    color: #475569 !important;

}



.text-slate-700 {

    color: #334155 !important;

}



.text-slate-800 {

    color: #1e293b !important;

}



.bg-slate-50 {

    background-color: #f8fafc !important;

}



/* ==========================================================================

   WHMCS INTL-TEL-INPUT FIX (SEAMLESS INTEGRATED BADGE, PROPER CLEARANCE)

   ========================================================================== */

.iti,

.intl-tel-input {

    width: 100% !important;

    display: block !important;

    position: relative !important;

    margin-bottom: 0 !important;

}



.iti input[type="tel"],

.intl-tel-input input[type="tel"],

input#modalRegPhone,

input#inputPhone {

    width: 100% !important;

    height: 48px !important;

    min-height: 48px !important;

    border: 1.5px solid #cbd5e1 !important;

    border-radius: 12px !important;

    font-size: 0.94rem !important;

    font-weight: 500 !important;

    color: #0f172a !important;

    padding-left: 102px !important; /* Plenty of clearance for flag + +90 + arrow + gap */

    padding-right: 14px !important;

    box-sizing: border-box !important;

    background-color: #ffffff !important;

    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;

}



.iti:focus-within input[type="tel"],

.iti input[type="tel"]:focus,

.intl-tel-input input[type="tel"]:focus,

input#modalRegPhone:focus,

input#inputPhone:focus {

    border-color: #0066cc !important;

    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.12) !important;

    outline: none !important;

}



.iti__flag-container,

.intl-tel-input .flag-container {

    padding: 0 !important;

    border-top-left-radius: 10px !important;

    border-bottom-left-radius: 10px !important;

    z-index: 4 !important;

    top: 2px !important;

    bottom: 2px !important;

    left: 2px !important;

    height: calc(100% - 4px) !important;

}



.iti__selected-flag,

.intl-tel-input .selected-flag {

    border-top-left-radius: 10px !important;

    border-bottom-left-radius: 10px !important;

    border-top-right-radius: 0 !important;

    border-bottom-right-radius: 0 !important;

    background: #f8fafc !important;

    border-right: 1.5px solid #cbd5e1 !important;

    padding: 0 10px 0 12px !important;

    height: 100% !important;

    display: flex !important;

    align-items: center !important;

    gap: 6px !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    transition: border-color 0.2s ease, background-color 0.2s ease !important;

}



.iti:focus-within .iti__selected-flag {

    border-right-color: #0066cc !important;

    background-color: #f1f5f9 !important;

}



.iti__selected-flag .iti__flag {

    border-radius: 2px !important;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;

    margin-right: 2px !important;

}



.iti__selected-dial-code {

    font-size: 0.90rem !important;

    font-weight: 600 !important;

    color: #334155 !important;

    margin-left: 4px !important;

}



.iti__arrow {

    margin-left: 6px !important;

    border-top: 4px solid #64748b !important;

    border-left: 4px solid transparent !important;

    border-right: 4px solid transparent !important;

    transition: transform 0.2s ease !important;

}



.iti__arrow--up {

    transform: rotate(180deg) !important;

}



.iti__country-list,

.intl-tel-input .country-list {

    border-radius: 12px !important;

    border: 1px solid #cbd5e1 !important;

    box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.18) !important;

    z-index: 99999 !important; /* above bootstrap modals */

    max-height: 250px !important;

    padding: 6px 0 !important;

    background: #ffffff !important;

}



.iti__country-list .iti__country {

    padding: 8px 12px !important;

    font-size: 0.88rem !important;

    color: #1e293b !important;

    transition: background 0.15s ease !important;

}



.iti__country-list .iti__country.iti__highlight,

.iti__country-list .iti__country:hover {

    background-color: #f1f5f9 !important;

}



.iti__country-list .iti__dial-code {

    color: #64748b !important;

    font-weight: 500 !important;

}



/* Hide any stray phone icons sticking out from WHMCS templates */

.iti + .field-icon,

.iti ~ .field-icon,

.field-icon:has(+ .iti) {

    display: none !important;

}



/* ==========================================================================

   15. ATLANTEZS MODERN CLIENT AREA (MÜŞTERİ PANELİ) REDESIGN

   ========================================================================== */



/* --- 15.1 Client Welcome Hero Banner --- */

.client-welcome-card {

    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%) !important;

    border: 1px solid #dbeafe !important;

    border-radius: 18px !important;

    padding: 1.5rem 1.8rem !important;

    box-shadow: 0 4px 20px rgba(0, 102, 204, 0.05) !important;

    margin-bottom: 1.75rem !important;

}



.client-welcome-card .user-avatar-badge {

    width: 48px !important;

    height: 48px !important;

    min-width: 48px !important;

    border-radius: 14px !important;

    background: linear-gradient(135deg, #0066cc 0%, #004d99 100%) !important;

    color: #ffffff !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 1.35rem !important;

    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25) !important;

}



.client-welcome-card .welcome-title {

    font-family: var(--font-heading) !important;

    font-size: 1.35rem !important;

    font-weight: 700 !important;

    color: #0f172a !important;

    margin-bottom: 0.25rem !important;

}



.client-welcome-card .welcome-desc {

    font-size: 0.88rem !important;

    color: #64748b !important;

    line-height: 1.5 !important;

}



.client-welcome-card .btn-primary-gradient {

    background: linear-gradient(135deg, #0066cc 0%, #004d99 100%) !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 10px !important;

    font-weight: 600 !important;

    font-size: 0.88rem !important;

    padding: 9px 18px !important;

    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.22) !important;

    transition: all 0.2s ease !important;

    display: inline-flex !important;

    align-items: center !important;

}



.client-welcome-card .btn-primary-gradient:hover {

    transform: translateY(-2px) !important;

    box-shadow: 0 6px 18px rgba(0, 102, 204, 0.32) !important;

    color: #ffffff !important;

}



.client-welcome-card .btn-saas-outline {

    background: #ffffff !important;

    color: #334155 !important;

    border: 1px solid #cbd5e1 !important;

    border-radius: 10px !important;

    font-weight: 600 !important;

    font-size: 0.88rem !important;

    padding: 9px 18px !important;

    transition: all 0.2s ease !important;

    display: inline-flex !important;

    align-items: center !important;

}



.client-welcome-card .btn-saas-outline:hover {

    background: #f8fafc !important;

    border-color: #94a3b8 !important;

    color: #0f172a !important;

    transform: translateY(-2px) !important;

}



/* --- 15.2 Modern KPI Stat Cards (Top Tiles) --- */

.client-stat-tiles {

    margin-bottom: 1.75rem !important;

}



.modern-stat-card {

    display: flex !important;

    flex-direction: column !important;

    justify-content: space-between !important;

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 14px !important;

    padding: 0.95rem 1.10rem !important;

    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;

    text-decoration: none !important;

    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;

    position: relative !important;

    overflow: hidden !important;

    height: 100% !important;

}



.modern-stat-card:hover {

    transform: translateY(-3px) !important;

    box-shadow: 0 10px 24px rgba(0, 102, 204, 0.08) !important;

    border-color: #cbd5e1 !important;

    text-decoration: none !important;

}



.modern-stat-card .stat-card-header {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    margin-bottom: 0.45rem !important;

}



.modern-stat-card .stat-icon-wrapper {

    width: 36px !important;

    height: 36px !important;

    border-radius: 10px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 1.05rem !important;

    transition: transform 0.2s ease !important;

}



.modern-stat-card:hover .stat-icon-wrapper {

    transform: scale(1.08) !important;

}



/* Stat Themes */

.modern-stat-card.theme-blue .stat-icon-wrapper {

    background: #eff6ff !important;

    color: #0066cc !important;

}

.modern-stat-card.theme-blue:hover {

    border-color: #93c5fd !important;

}



.modern-stat-card.theme-green .stat-icon-wrapper {

    background: #ecfdf5 !important;

    color: #10b981 !important;

}

.modern-stat-card.theme-green:hover {

    border-color: #a7f3d0 !important;

}



.modern-stat-card.theme-purple .stat-icon-wrapper {

    background: #f5f3ff !important;

    color: #8b5cf6 !important;

}

.modern-stat-card.theme-purple:hover {

    border-color: #c4b5fd !important;

}



.modern-stat-card.theme-amber .stat-icon-wrapper {

    background: #fffbeb !important;

    color: #f59e0b !important;

}

.modern-stat-card.theme-amber:hover {

    border-color: #fde68a !important;

}



/* Theme Indigo for Credit */

.modern-stat-card.theme-indigo .stat-icon-wrapper {

    background: #e0e7ff !important;

    color: #4f46e5 !important;

}

.modern-stat-card.theme-indigo:hover {

    border-color: #a5b4fc !important;

}

.modern-stat-card.theme-indigo:hover .stat-arrow {

    color: #4f46e5 !important;

}



/* Theme Cyan for System Status */

.modern-stat-card.theme-cyan .stat-icon-wrapper {

    background: #ecfeff !important;

    color: #06b6d4 !important;

}

.modern-stat-card.theme-cyan:hover {

    border-color: #67e8f9 !important;

}

.modern-stat-card.theme-cyan:hover .stat-arrow {

    color: #06b6d4 !important;

}



.modern-stat-card .stat-arrow {

    color: #cbd5e1 !important;

    font-size: 0.80rem !important;

    transition: transform 0.2s ease, color 0.2s ease !important;

}



.modern-stat-card:hover .stat-arrow {

    transform: translateX(3px) !important;

    color: #0066cc !important;

}



.modern-stat-card .stat-number {

    font-family: var(--font-heading) !important;

    font-size: 1.55rem !important;

    font-weight: 800 !important;

    color: #0f172a !important;

    line-height: 1.15 !important;

    margin-bottom: 0.15rem !important;

}



.modern-stat-card .stat-label {

    font-size: 0.70rem !important;

    font-weight: 700 !important;

    color: #64748b !important;

    text-transform: uppercase !important;

    letter-spacing: 0.5px !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

}



.modern-stat-card .stat-content .small {

    font-size: 0.74rem !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    display: block !important;

}



/* Fallback for native WHMCS .tiles .tile */

.tiles {

    border-radius: 16px !important;

    overflow: hidden !important;

    border: none !important;

    background: transparent !important;

}



.tiles .tile {

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 16px !important;

    margin: 4px !important;

    padding: 1.25rem 1rem !important;

    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;

    transition: all 0.2s ease !important;

}



.tiles .tile:hover {

    transform: translateY(-3px) !important;

    box-shadow: 0 10px 24px rgba(0, 102, 204, 0.08) !important;

    border-color: #cbd5e1 !important;

}



.tiles .tile .highlight {

    display: none !important;

}



.tiles .tile i {

    font-size: 1.5rem !important;

    color: #0066cc !important;

    margin-bottom: 0.5rem !important;

}



.tiles .tile .stat {

    font-family: var(--font-heading) !important;

    font-size: 2rem !important;

    font-weight: 800 !important;

    color: #0f172a !important;

}



.tiles .tile .title {

    font-size: 0.78rem !important;

    font-weight: 700 !important;

    color: #64748b !important;

    text-transform: uppercase !important;

    letter-spacing: 0.5px !important;

}



/* --- 15.3 Modern Client Sidebar --- */

.sidebar .card-sidebar,

.sidebar .card {

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 16px !important;

    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.03) !important;

    margin-bottom: 1.25rem !important;

    overflow: hidden !important;

}



.sidebar .card-header,

.sidebar .card-sidebar > .card-header {

    background: #ffffff !important;

    border-bottom: 1px solid #f1f5f9 !important;

    padding: 14px 18px !important;

}



.sidebar .card-title {

    font-family: var(--font-heading) !important;

    font-size: 0.95rem !important;

    font-weight: 700 !important;

    color: #0f172a !important;

    display: flex !important;

    align-items: center !important;

}



/* Force icons visible in card headers */

.sidebar .card-header .far:first-child,

.sidebar .card-header .fas:first-child,

.sidebar .card-header i:first-child {

    display: inline-block !important;

    font-size: 0.95rem !important;

    margin-right: 8px !important;

}



.sidebar .card-minimise {

    color: #94a3b8 !important;

    font-size: 0.8rem !important;

    cursor: pointer !important;

    margin-left: auto !important;

    transition: transform 0.2s ease !important;

}



.sidebar .card-sidebar .card-body {

    padding: 16px 18px !important;

    color: #334155 !important;

    font-size: 0.9rem !important;

    line-height: 1.6 !important;

}



.sidebar .card-sidebar .card-body strong {

    color: #0f172a !important;

    font-weight: 700 !important;

    display: block !important;

    margin-bottom: 4px !important;

}



/* Sidebar "Güncelle" Button */

.sidebar .card-sidebar .btn-default,

.sidebar .card-sidebar .btn-secondary,

.sidebar .card-sidebar a[href*="clientarea.php?action=details"] {

    background: linear-gradient(135deg, #0066cc 0%, #004d99 100%) !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 50px !important;

    font-weight: 600 !important;

    font-size: 0.84rem !important;

    padding: 8px 18px !important;

    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.22) !important;

    transition: all 0.2s ease !important;

    text-align: center !important;

    margin-top: 10px !important;

    display: inline-block !important;

}



.sidebar .card-sidebar .btn-default:hover,

.sidebar .card-sidebar .btn-secondary:hover,

.sidebar .card-sidebar a[href*="clientarea.php?action=details"]:hover {

    transform: translateY(-2px) !important;

    box-shadow: 0 6px 16px rgba(0, 102, 204, 0.32) !important;

    color: #ffffff !important;

}



/* Sidebar List Group Items (e.g. Hızlı Erişim) */

.sidebar .list-group-flush {

    padding: 6px 0 !important;

}



.sidebar .list-group-item {

    border: none !important;

    padding: 10px 16px !important;

    margin: 3px 8px !important;

    border-radius: 10px !important;

    font-size: 0.88rem !important;

    font-weight: 600 !important;

    color: #334155 !important;

    display: flex !important;

    align-items: center !important;

    transition: all 0.18s ease !important;

    background: transparent !important;

    text-decoration: none !important;

}



.sidebar .list-group-item:hover {

    background: #eff6ff !important;

    color: #0066cc !important;

    transform: translateX(4px) !important;

    text-decoration: none !important;

}



.sidebar .list-group-item.active {

    background: #0066cc !important;

    color: #ffffff !important;

    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.22) !important;

}



.sidebar .list-group-item i {

    width: 22px !important;

    margin-right: 8px !important;

    font-size: 0.95rem !important;

    color: #64748b !important;

    transition: color 0.18s ease !important;

}



.sidebar .list-group-item:hover i {

    color: #0066cc !important;

}



.sidebar .list-group-item.active i {

    color: #ffffff !important;

}



/* --- 15.4 Client Home Panels & Tables --- */

.client-home-cards .card {

    border-radius: 16px !important;

    border: 1px solid #e2e8f0 !important;

    background: #ffffff !important;

    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;

    margin-bottom: 1.5rem !important;

    overflow: hidden !important;

    border-top: none !important;

}



.client-home-cards .card .card-header {

    background: #ffffff !important;

    border-bottom: 1px solid #f1f5f9 !important;

    padding: 1rem 1.25rem !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    flex-wrap: wrap !important;

    gap: 12px !important;

}



.client-home-cards .card .card-title-wrap {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    min-width: 0 !important;

}



.client-home-cards .card .card-title-wrap i {

    color: #0066cc !important;

    font-size: 1.15rem !important;

    line-height: 1 !important;

    flex-shrink: 0 !important;

    margin-right: 0 !important;

}



.client-home-cards .card .card-title {

    font-family: var(--font-heading) !important;

    font-size: 1.02rem !important;

    font-weight: 700 !important;

    color: #0f172a !important;

    margin: 0 !important;

    line-height: 1.3 !important;

    display: inline-block !important;

}



.client-home-cards .card .card-action-wrap {

    margin-left: auto !important;

    flex-shrink: 0 !important;

}



/* Universal Specificity Override for All Client Home Card Header Buttons */

body .primary-content .client-home-cards .card .card-header .btn,

.client-home-cards .card-header .btn {

    border-radius: 50px !important;

    font-weight: 600 !important;

    font-size: 0.8rem !important;

    padding: 6px 16px !important;

    border: 1px solid #e2e8f0 !important;

    background: #f8fafc !important;

    color: #334155 !important;

    transition: all 0.2s ease !important;

    box-shadow: none !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    white-space: nowrap !important;

    text-decoration: none !important;

}



body .primary-content .client-home-cards .card .card-header .btn:hover,

body .primary-content .client-home-cards .card .card-header .btn:focus,

.client-home-cards .card-header .btn:hover,

.client-home-cards .card-header .btn:focus {

    background: #eff6ff !important;

    border-color: #bfdbfe !important;

    color: #0066cc !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.12) !important;

    text-decoration: none !important;

}



/* Overdue & Important Invoices Border */

.card-accent-gold,

.card-accent-orange,

.card-accent-red {

    border-left: 4px solid #f59e0b !important;

}



/* All Green & Accent Action Buttons in Client Home (e.g. "Ürünlerim", "Ödeme Yap", .btn-success, .bg-color-green, etc.) */

body .primary-content .client-home-cards .card .card-header .btn.bg-color-green,

body .primary-content .client-home-cards .card .card-header .btn.bg-color-gold,

body .primary-content .client-home-cards .card .card-header .btn.bg-color-emerald,

body .primary-content .client-home-cards .card .card-header .btn.btn-success,

body .primary-content .client-home-cards .card-accent-green .card-header .btn,

body .primary-content .client-home-cards .card-accent-gold .card-header .btn,

body .primary-content .client-home-cards .card-accent-orange .card-header .btn,

body .primary-content .client-home-cards .card-accent-red .card-header .btn,

.client-home-cards .card-header .btn.bg-color-green,

.client-home-cards .card-header .btn.bg-color-gold,

.client-home-cards .card-header .btn.bg-color-emerald,

.client-home-cards .card-header .btn.btn-success,

.card-accent-green .card-header .btn,

.card-accent-gold .card-header .btn,

.card-accent-orange .card-header .btn,

.card-accent-red .card-header .btn,

.btn-success,

.bg-color-green {

    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;

    background-color: #10b981 !important;

    color: #ffffff !important;

    border: none !important;

    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.28) !important;

}



/* Green Buttons on HOVER - Text MUST Stay Crisp White and Background Darker Emerald */

body .primary-content .client-home-cards .card .card-header .btn.bg-color-green:hover,

body .primary-content .client-home-cards .card .card-header .btn.bg-color-green:focus,

body .primary-content .client-home-cards .card .card-header .btn.bg-color-gold:hover,

body .primary-content .client-home-cards .card .card-header .btn.bg-color-gold:focus,

body .primary-content .client-home-cards .card .card-header .btn.bg-color-emerald:hover,

body .primary-content .client-home-cards .card .card-header .btn.bg-color-emerald:focus,

body .primary-content .client-home-cards .card .card-header .btn.btn-success:hover,

body .primary-content .client-home-cards .card .card-header .btn.btn-success:focus,

body .primary-content .client-home-cards .card-accent-green .card-header .btn:hover,

body .primary-content .client-home-cards .card-accent-green .card-header .btn:focus,

body .primary-content .client-home-cards .card-accent-gold .card-header .btn:hover,

body .primary-content .client-home-cards .card-accent-gold .card-header .btn:focus,

body .primary-content .client-home-cards .card-accent-orange .card-header .btn:hover,

body .primary-content .client-home-cards .card-accent-orange .card-header .btn:focus,

body .primary-content .client-home-cards .card-accent-red .card-header .btn:hover,

body .primary-content .client-home-cards .card-accent-red .card-header .btn:focus,

.client-home-cards .card-header .btn.bg-color-green:hover,

.client-home-cards .card-header .btn.bg-color-green:focus,

.client-home-cards .card-header .btn.bg-color-gold:hover,

.client-home-cards .card-header .btn.bg-color-gold:focus,

.client-home-cards .card-header .btn.bg-color-emerald:hover,

.client-home-cards .card-header .btn.bg-color-emerald:focus,

.client-home-cards .card-header .btn.btn-success:hover,

.client-home-cards .card-header .btn.btn-success:focus,

.card-accent-green .card-header .btn:hover,

.card-accent-green .card-header .btn:focus,

.card-accent-gold .card-header .btn:hover,

.card-accent-gold .card-header .btn:focus,

.card-accent-orange .card-header .btn:hover,

.card-accent-orange .card-header .btn:focus,

.card-accent-red .card-header .btn:hover,

.card-accent-red .card-header .btn:focus,

.btn-success:hover,

.btn-success:focus,

.bg-color-green:hover,

.bg-color-green:focus {

    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;

    background-color: #059669 !important;

    color: #ffffff !important;

    border: none !important;

    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.40) !important;

    transform: translateY(-2px) !important;

    text-decoration: none !important;

}



/* Client Home Card Body & Input Groups (e.g. Domain Search) */

.client-home-cards .card-body {

    padding: 1.25rem 1.4rem !important;

}



.client-home-cards .card-body .input-group {

    display: flex !important;

    align-items: stretch !important;

    width: 100% !important;

    border-radius: 12px !important;

    border: 1px solid #cbd5e1 !important;

    overflow: hidden !important;

    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;

    background: #ffffff !important;

}



.client-home-cards .card-body .input-group .form-control {

    border: none !important;

    border-radius: 0 !important;

    height: 44px !important;

    padding: 10px 16px !important;

    font-size: 0.92rem !important;

    box-shadow: none !important;

    flex: 1 1 auto !important;

    margin: 0 !important;

}



.client-home-cards .card-body .input-group .form-control:focus {

    outline: none !important;

    box-shadow: none !important;

}



.client-home-cards .card-body .input-group-btn,

.client-home-cards .card-body .input-group-append,

.client-home-cards .card-body .input-group > .input-group-append,

.client-home-cards .card-body .input-group > .input-group-btn {

    display: flex !important;

    align-items: stretch !important;

    margin: 0 !important;

    padding: 0 !important;

}



.client-home-cards .card-body .input-group .btn {

    border-radius: 0 !important;

    height: 44px !important;

    padding: 0 20px !important;

    font-size: 0.88rem !important;

    font-weight: 700 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    margin: 0 !important;

    box-shadow: none !important;

    transform: none !important;

    border: none !important;

    border-left: 1px solid #e2e8f0 !important;

    transition: all 0.2s ease !important;

    white-space: nowrap !important;

}



.client-home-cards .card-body .input-group .btn-primary,

.client-home-cards .card-body .input-group input[type="submit"].btn-primary {

    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%) !important;

    background-color: #0066cc !important;

    color: #ffffff !important;

    box-shadow: none !important;

    transform: none !important;

}



.client-home-cards .card-body .input-group .btn-primary:hover,

.client-home-cards .card-body .input-group input[type="submit"].btn-primary:hover {

    background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%) !important;

    color: #ffffff !important;

    transform: none !important;

}



.client-home-cards .card-body .input-group .btn-default,

.client-home-cards .card-body .input-group input[type="submit"].btn-default {

    background: #f8fafc !important;

    color: #334155 !important;

}



.client-home-cards .card-body .input-group .btn-default:hover,

.client-home-cards .card-body .input-group input[type="submit"].btn-default:hover {

    background: #eff6ff !important;

    color: #0066cc !important;

}



/* Hide empty card footers */

.client-home-cards .card-footer:empty {

    display: none !important;

}



/* Tables inside Client Home Cards */

.client-home-cards .table {

    margin-bottom: 0 !important;

    color: #334155 !important;

}



.client-home-cards .table th {

    background: #f8fafc !important;

    border-top: none !important;

    border-bottom: 1px solid #e2e8f0 !important;

    color: #64748b !important;

    font-size: 0.78rem !important;

    text-transform: uppercase !important;

    letter-spacing: 0.5px !important;

    font-weight: 700 !important;

    padding: 12px 16px !important;

}



.client-home-cards .table td {

    border-top: 1px solid #f1f5f9 !important;

    border-bottom: none !important;

    padding: 14px 16px !important;

    vertical-align: middle !important;

    font-size: 0.9rem !important;

}



.client-home-cards .table tbody tr {

    transition: background 0.15s ease !important;

}



.client-home-cards .table tbody tr:hover {

    background: rgba(0, 102, 204, 0.02) !important;

}



/* Status Badges */

.label,

.badge {

    font-weight: 700 !important;

    font-size: 0.76rem !important;

    border-radius: 50px !important;

    padding: 4px 12px !important;

    display: inline-flex !important;

    align-items: center !important;

    letter-spacing: 0.3px !important;

}



.label-success,

.badge-success,

.status-active {

    background: #ecfdf5 !important;

    color: #059669 !important;

    border: 1px solid #a7f3d0 !important;

}



.label-warning,

.badge-warning,

.status-suspended {

    background: #fffbeb !important;

    color: #d97706 !important;

    border: 1px solid #fde68a !important;

}



.label-danger,

.badge-danger,

.status-terminated {

    background: #fef2f2 !important;

    color: #dc2626 !important;

    border: 1px solid #fecaca !important;

}



.label-info,

.badge-info,

.status-pending {

    background: #eff6ff !important;

    color: #0066cc !important;

    border: 1px solid #bfdbfe !important;

}



/* Table Buttons inside Active Services */

.client-home-cards .table a[href*="sitejet"],

.client-home-cards .table .btn-primary {

    background: linear-gradient(135deg, #0066cc 0%, #004d99 100%) !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 8px !important;

    font-weight: 600 !important;

    font-size: 0.8rem !important;

    padding: 7px 14px !important;

    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.2) !important;

    transition: all 0.2s ease !important;

    display: inline-flex !important;

    align-items: center !important;

}



.client-home-cards .table a[href*="sitejet"]:hover,

.client-home-cards .table .btn-primary:hover {

    transform: translateY(-1px) !important;

    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3) !important;

    color: #ffffff !important;

}



.client-home-cards .table a[href*="dosinglesignon"],

.client-home-cards .table .btn-default,

.client-home-cards .table .btn-secondary {

    background: #f8fafc !important;

    color: #1e293b !important;

    border: 1px solid #cbd5e1 !important;

    border-radius: 8px !important;

    font-weight: 600 !important;

    font-size: 0.8rem !important;

    padding: 7px 14px !important;

    transition: all 0.2s ease !important;

    display: inline-flex !important;

    align-items: center !important;

}



.client-home-cards .table a[href*="dosinglesignon"]:hover,

.client-home-cards .table .btn-default:hover,

.client-home-cards .table .btn-secondary:hover {

    background: #eff6ff !important;

    border-color: #93c5fd !important;

    color: #0066cc !important;

}



.client-home-cards .table .btn-manage,

.client-home-cards .table a[href*="clientarea.php?action=productdetails"] {

    background: #f1f5f9 !important;

    color: #475569 !important;

    border: none !important;

    border-radius: 8px !important;

    font-weight: 600 !important;

    font-size: 0.8rem !important;

    padding: 7px 14px !important;

    transition: all 0.2s ease !important;

    display: inline-flex !important;

    align-items: center !important;

}



.client-home-cards .table .btn-manage:hover,

.client-home-cards .table a[href*="clientarea.php?action=productdetails"]:hover {

    background: #e2e8f0 !important;

    color: #0f172a !important;

}



/* Sitejet Builder Card Polish */

div[menuitemname*="Sitejet"] .card-body {

    padding: 1.5rem !important;

}



div[menuitemname*="Sitejet"] img {

    max-height: 44px !important;

    width: auto !important;

    margin-bottom: 0.75rem !important;

}



div[menuitemname*="Sitejet"] select.form-control {

    border-radius: 10px !important;

    border: 1px solid #cbd5e1 !important;

    padding: 9px 14px !important;

    font-weight: 500 !important;

    color: #1e293b !important;

    box-shadow: none !important;

    height: auto !important;

}



div[menuitemname*="Sitejet"] select.form-control:focus {

    border-color: #0066cc !important;

    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12) !important;

}



div[menuitemname*="Sitejet"] .btn-primary {

    border-radius: 10px !important;

    font-weight: 600 !important;

    padding: 9px 22px !important;

    background: linear-gradient(135deg, #0066cc 0%, #004d99 100%) !important;

    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.22) !important;

}



/* Card Footer Link ("Daha Fazlasını Görüntüle") */

.client-home-cards .card-footer {

    background: #ffffff !important;

    border-top: 1px solid #f1f5f9 !important;

    padding: 12px 16px !important;

    text-align: center !important;

}



.client-home-cards .card-footer a {

    color: #0066cc !important;

    font-weight: 600 !important;

    font-size: 0.85rem !important;

    text-decoration: none !important;

    transition: color 0.15s ease !important;

}



.client-home-cards .card-footer a:hover {

    color: #004d99 !important;

    text-decoration: underline !important;

}



/* --- 15.5 Global DataTables & Tables in Client Area Subpages --- */

.table-container {

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 16px !important;

    padding: 1.25rem !important;

    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;

    margin-bottom: 1.5rem !important;

}



.table-container .table {

    border-collapse: separate !important;

    border-spacing: 0 !important;

}



.table-container .table th {

    background: #f8fafc !important;

    border-top: none !important;

    border-bottom: 1px solid #e2e8f0 !important;

    color: #64748b !important;

    font-weight: 700 !important;

    font-size: 0.8rem !important;

    text-transform: uppercase !important;

    letter-spacing: 0.5px !important;

    padding: 12px 16px !important;

}



.table-container .table td {

    padding: 14px 16px !important;

    border-top: 1px solid #f1f5f9 !important;

    vertical-align: middle !important;

}



.dataTables_wrapper .dataTables_filter input {

    border-radius: 10px !important;

    border: 1px solid #cbd5e1 !important;

    padding: 6px 12px !important;

    margin-left: 8px !important;

}



.dataTables_wrapper .dataTables_filter input:focus {

    border-color: #0066cc !important;

    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12) !important;

    outline: none !important;

}



.dataTables_wrapper .dataTables_length select {

    border-radius: 8px !important;

    border: 1px solid #cbd5e1 !important;

    padding: 5px 10px !important;

}



.pagination .page-item .page-link {

    border-radius: 8px !important;

    margin: 0 3px !important;

    border: 1px solid #e2e8f0 !important;

    color: #334155 !important;

    font-weight: 600 !important;

}



.pagination .page-item.active .page-link {

    background: #0066cc !important;

    border-color: #0066cc !important;

    color: #ffffff !important;

    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.25) !important;

}



/* ==================== NAVBAR NOTIFICATIONS & LOGGEDIN CONTROLS ==================== */

.btn-icon-nav {

    width: 40px;

    height: 40px;

    border-radius: 10px;

    border: 1px solid #e2e8f0;

    background: #ffffff;

    color: #475569;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 1.15rem;

    transition: all 0.2s ease;

    padding: 0;

    cursor: pointer;

}



.btn-icon-nav:hover, .btn-icon-nav:focus {

    background: #eff6ff;

    color: #0066cc;

    border-color: #bfdbfe;

    outline: none;

    box-shadow: 0 2px 6px rgba(0, 102, 204, 0.1);

}



.notification-badge-dot {

    position: absolute;

    top: 7px;

    right: 7px;

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #ef4444;

    border: 2px solid #ffffff;

    animation: pulse-badge 2s infinite;

}



@keyframes pulse-badge {

    0% {

        transform: scale(0.95);

        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);

    }

    70% {

        transform: scale(1);

        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);

    }

    100% {

        transform: scale(0.95);

        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);

    }

}



.atl-notifications-menu .dropdown-item:hover {

    background: #f8fafc;

}



.atl-notifications-menu .dropdown-item:active {

    background: #eff6ff;

    color: #0f172a;

}



/* ==================== EXPANDED WIDE CLIENT AREA & DASHBOARD ==================== */

#main-body > .container,

.master-breadcrumb > .container,

.atl-cyber-footer > .container {

    max-width: 1720px !important;

    width: 100% !important;

    padding-left: 36px !important;

    padding-right: 36px !important;

    margin-left: auto !important;

    margin-right: auto !important;

}



@media (max-width: 1200px) {

    #main-body > .container,

    .master-breadcrumb > .container,

    .atl-cyber-footer > .container {

        padding-left: 20px !important;

        padding-right: 20px !important;

    }

}



/* Give sidebar and content optimal spacing in wide layout */

@media (min-width: 1200px) {

    .client-stat-tiles .row > [class*="col-"] {

        padding-left: 10px;

        padding-right: 10px;

    }

    .client-home-cards .row > [class*="col-"] {

        padding-left: 12px;

        padding-right: 12px;

    }

}



/* ==================== 16. ULTRA MODERN SERVICE DETAILS & CLOUD CONSOLE ==================== */

.service-hero-card {

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 16px !important;

    padding: 24px 28px !important;

    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;

}



.service-hero-icon {

    width: 58px;

    height: 58px;

    border-radius: 14px;

    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);

    color: #0066cc;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.65rem;

    border: 1px solid #bfdbfe;

    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.08);

    flex-shrink: 0;

}



.service-title {

    font-family: var(--font-heading) !important;

    font-weight: 800 !important;

    font-size: 1.4rem !important;

    color: #0f172a !important;

    letter-spacing: -0.3px;

}



.service-status-pill {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-weight: 700;

    font-size: 0.78rem;

    border-radius: 50px;

    padding: 4px 12px;

    letter-spacing: 0.3px;

    line-height: 1.2;

}



.service-status-pill.status-active {

    background: #ecfdf5;

    color: #059669;

    border: 1px solid #a7f3d0;

}



.service-status-pill.status-pending {

    background: #eff6ff;

    color: #2563eb;

    border: 1px solid #bfdbfe;

}



.service-status-pill.status-suspended {

    background: #fffbeb;

    color: #d97706;

    border: 1px solid #fde68a;

}



.service-status-pill.status-terminated,

.service-status-pill.status-cancelled {

    background: #fef2f2;

    color: #dc2626;

    border: 1px solid #fecaca;

}



.status-pulse-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: currentColor;

    display: inline-block;

}



.service-status-pill.status-active .status-pulse-dot {

    animation: pulse-green 2s infinite;

}



@keyframes pulse-green {

    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }

    70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }

    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }

}



.service-group-badge {

    background: #f1f5f9;

    color: #475569;

    font-weight: 600;

    font-size: 0.8rem;

    padding: 3px 10px;

    border-radius: 6px;

    display: inline-flex;

    align-items: center;

}



.service-domain-link {

    color: #334155;

    font-weight: 600;

    font-size: 0.88rem;

    text-decoration: none !important;

    display: inline-flex;

    align-items: center;

    transition: color 0.2s ease;

}



.service-domain-link:hover {

    color: #0066cc;

}



/* Service Hero Buttons */



/* Service Hero Outline Action (Light Mode) */

.btn-saas-outline {

    background: #f8fafc !important;

    color: #0066cc !important;

    border: 1px solid #bfdbfe !important;

    border-radius: 10px !important;

    font-weight: 700 !important;

    font-size: 0.85rem !important;

    padding: 9px 18px !important;

    transition: all 0.2s ease !important;

    display: inline-flex !important;

    align-items: center !important;

}



.btn-saas-outline:hover {

    background: #0066cc !important;

    color: #ffffff !important;

    border-color: #0066cc !important;

}



/* Sidebar Badge Separation */

.sidebar .badge,

.panel-sidebar .badge,

.card-sidebar .badge {

    margin-right: 8px !important;

}



/* Table container spacing for floating chat/whatsapp widgets */

.table-container,

.dataTables_wrapper {

    padding-bottom: 30px !important;

}



.btn-saas-upgrade {

    background: linear-gradient(135deg, #0066cc 0%, #004d99 100%) !important;

    color: #ffffff !important;

    border-radius: 10px !important;

    font-weight: 700 !important;

    font-size: 0.85rem !important;

    padding: 9px 20px !important;

    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.22) !important;

    border: none !important;

    transition: all 0.2s ease !important;

    display: inline-flex !important;

    align-items: center !important;

}



.btn-saas-upgrade:hover {

    transform: translateY(-2px) !important;

    box-shadow: 0 6px 18px rgba(0, 102, 204, 0.32) !important;

    color: #ffffff !important;

}



.btn-saas-renew {

    background: #eff6ff !important;

    color: #0066cc !important;

    border: 1px solid #bfdbfe !important;

    border-radius: 10px !important;

    font-weight: 700 !important;

    font-size: 0.85rem !important;

    padding: 9px 18px !important;

    transition: all 0.2s ease !important;

    display: inline-flex !important;

    align-items: center !important;

}



.btn-saas-renew:hover {

    background: #0066cc !important;

    color: #ffffff !important;

    border-color: #0066cc !important;

}



.btn-saas-cancel {

    background: #fff1f2 !important;

    color: #e11d48 !important;

    border: 1px solid #fecdd3 !important;

    border-radius: 10px !important;

    font-weight: 600 !important;

    font-size: 0.85rem !important;

    padding: 9px 16px !important;

    transition: all 0.2s ease !important;

    display: inline-flex !important;

    align-items: center !important;

}



.btn-saas-cancel:hover {

    background: #e11d48 !important;

    color: #ffffff !important;

    border-color: #e11d48 !important;

}



/* Service Metric Cards (3 Overview Tiles) */

.service-metric-card {

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 16px !important;

    padding: 22px 24px !important;

    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.02) !important;

    transition: all 0.2s ease !important;

}



.service-metric-card:hover {

    border-color: #cbd5e1 !important;

    box-shadow: 0 6px 20px rgba(0, 102, 204, 0.05) !important;

}



.metric-card-header .metric-title {

    font-family: var(--font-heading) !important;

    font-weight: 700 !important;

    font-size: 0.95rem !important;

    color: #0f172a !important;

}



.btn-copy-inline {

    width: 26px !important;

    height: 26px !important;

    border-radius: 6px !important;

    border: 1px solid #cbd5e1 !important;

    background: #ffffff !important;

    color: #64748b !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 0.75rem !important;

    padding: 0 !important;

    transition: all 0.15s ease !important;

    cursor: pointer !important;

}



.btn-copy-inline:hover {

    background: #eff6ff !important;

    color: #0066cc !important;

    border-color: #93c5fd !important;

}



.progress-saas {

    height: 9px !important;

    border-radius: 50px !important;

    background: #f1f5f9 !important;

    overflow: hidden !important;

    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06) !important;

}



.progress-saas .progress-bar {

    border-radius: 50px !important;

}



/* Service Module (cPanel/SSO) Panel */

.service-module-panel {

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 16px !important;

    padding: 22px 26px !important;

    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03) !important;

}



.module-clientarea-wrapper .btn,

.module-clientarea-wrapper input[type="submit"],

.module-clientarea-wrapper button {

    background: #f8fafc !important;

    border: 1px solid #e2e8f0 !important;

    color: #334155 !important;

    font-weight: 700 !important;

    font-size: 0.88rem !important;

    border-radius: 10px !important;

    padding: 10px 20px !important;

    margin: 4px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    transition: all 0.2s ease !important;

    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03) !important;

}



.module-clientarea-wrapper .btn:hover,

.module-clientarea-wrapper input[type="submit"]:hover,

.module-clientarea-wrapper button:hover {

    background: #eff6ff !important;

    border-color: #93c5fd !important;

    color: #0066cc !important;

    transform: translateY(-2px) !important;

    box-shadow: 0 6px 16px rgba(0, 102, 204, 0.12) !important;

}



.module-clientarea-wrapper .btn-primary,

.module-clientarea-wrapper input[type="submit"][name*="cpanel"],

.module-clientarea-wrapper a[href*="cpanel"] {

    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%) !important;

    color: #ffffff !important;

    border: none !important;

    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.25) !important;

}



.module-clientarea-wrapper .btn-primary:hover,

.module-clientarea-wrapper input[type="submit"][name*="cpanel"]:hover,

.module-clientarea-wrapper a[href*="cpanel"]:hover {

    background: linear-gradient(135deg, #0052a3 0%, #003d7a 100%) !important;

    color: #ffffff !important;

}



/* Service Nav Pills Tabs */

.service-nav-pills {

    display: flex !important;

    flex-wrap: wrap !important;

    gap: 8px !important;

    border: none !important;

}



.service-nav-pills .nav-link {

    border-radius: 12px !important;

    font-weight: 700 !important;

    font-size: 0.88rem !important;

    color: #475569 !important;

    padding: 10px 20px !important;

    border: 1px solid #e2e8f0 !important;

    background: #ffffff !important;

    transition: all 0.2s ease !important;

    display: inline-flex !important;

    align-items: center !important;

}



.service-nav-pills .nav-link:hover {

    background: #f8fafc !important;

    color: #0066cc !important;

    border-color: #cbd5e1 !important;

}



.service-nav-pills .nav-link.active {

    background: #0066cc !important;

    color: #ffffff !important;

    border-color: #0066cc !important;

    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.25) !important;

}



/* Helper utility classes */

.rounded-16 { border-radius: 16px !important; }

.rounded-12 { border-radius: 12px !important; }

.font-size-11 { font-size: 0.72rem !important; }

.font-size-12 { font-size: 0.78rem !important; }

.font-size-13 { font-size: 0.84rem !important; }

.font-size-14 { font-size: 0.9rem !important; }

.font-size-15 { font-size: 0.95rem !important; }

.font-size-16 { font-size: 1.05rem !important; }

.badge-success-soft {

    background: #ecfdf5 !important;

    color: #059669 !important;

    border: 1px solid #a7f3d0 !important;

}



/* ==================== 17. ATLANTESZNET CUSTOM INVOICE & PRINT SYSTEM ==================== */

body.invoice-view-page {

    background-color: #f1f5f9 !important;

    font-family: 'Plus Jakarta Sans', sans-serif !important;

    min-height: 100vh !important;

    color: #334155 !important;

}



.invoice-toolbar {

    background: #ffffff !important;

    border-bottom: 1px solid #e2e8f0 !important;

    padding: 12px 0 !important;

    position: sticky !important;

    top: 0 !important;

    z-index: 1000 !important;

    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;

}



.btn-toolbar-back {

    background: #f8fafc !important;

    border: 1px solid #e2e8f0 !important;

    color: #475569 !important;

    border-radius: 8px !important;

    font-weight: 600 !important;

    padding: 7px 14px !important;

    transition: all 0.2s ease !important;

}



.btn-toolbar-back:hover {

    background: #eff6ff !important;

    color: #0066cc !important;

    border-color: #bfdbfe !important;

}



.btn-toolbar-action {

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    color: #334155 !important;

    border-radius: 8px !important;

    font-weight: 600 !important;

    padding: 7px 14px !important;

    transition: all 0.2s ease !important;

}



.btn-toolbar-action:hover {

    background: #f8fafc !important;

    border-color: #cbd5e1 !important;

    color: #0f172a !important;

}



.btn-toolbar-pay {

    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 8px !important;

    font-weight: 700 !important;

    padding: 7px 18px !important;

    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;

    transition: all 0.2s ease !important;

}



.btn-toolbar-pay:hover {

    transform: translateY(-1px) !important;

    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;

    color: #ffffff !important;

}



.invoice-paper-wrapper {

    max-width: 900px !important;

    margin: 30px auto 60px auto !important;

    padding: 0 15px !important;

}



.invoice-paper-card {

    background: #ffffff !important;

    border-radius: 18px !important;

    border: 1px solid #e2e8f0 !important;

    padding: 45px 50px !important;

    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06) !important;

    position: relative !important;

}



.invoice-doc-title {

    font-family: var(--font-heading) !important;

    font-weight: 800 !important;

    font-size: 1.85rem !important;

    color: #0f172a !important;

    letter-spacing: 1px !important;

}



.invoice-number-display {

    font-family: var(--font-heading) !important;

    font-size: 1.15rem !important;

    font-weight: 700 !important;

    color: #0066cc !important;

}



.invoice-card-tag {

    font-size: 0.76rem !important;

    font-weight: 700 !important;

    text-transform: uppercase !important;

    letter-spacing: 0.5px !important;

    color: #64748b !important;

    display: block !important;

}



/* Status Stamps */

.stamp-pill {

    display: inline-flex !important;

    align-items: center !important;

    font-weight: 800 !important;

    font-size: 0.85rem !important;

    padding: 6px 16px !important;

    border-radius: 50px !important;

    text-transform: uppercase !important;

    letter-spacing: 0.6px !important;

}



.stamp-pill.stamp-paid {

    background: #ecfdf5 !important;

    color: #059669 !important;

    border: 2px solid #10b981 !important;

}



.stamp-pill.stamp-unpaid {

    background: #fef2f2 !important;

    color: #dc2626 !important;

    border: 2px solid #ef4444 !important;

}



.stamp-pill.stamp-cancelled {

    background: #f1f5f9 !important;

    color: #64748b !important;

    border: 2px solid #cbd5e1 !important;

}



.stamp-pill.stamp-draft {

    background: #eff6ff !important;

    color: #2563eb !important;

    border: 2px solid #93c5fd !important;

}



.stamp-pill.stamp-refunded {

    background: #faf5ff !important;

    color: #9333ea !important;

    border: 2px solid #d8b4fe !important;

}



/* Invoice Table & Totals */

.invoice-table thead th {

    background: #f8fafc !important;

    border-top: none !important;

    border-bottom: 2px solid #e2e8f0 !important;

    color: #475569 !important;

    font-weight: 700 !important;

}



.invoice-table tbody td {

    border-top: 1px solid #f1f5f9 !important;

    vertical-align: middle !important;

}



.invoice-grand-total {

    font-family: var(--font-heading) !important;

    font-size: 1.5rem !important;

    font-weight: 800 !important;

    color: #0066cc !important;

}



.invoice-payment-callout {

    background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%) !important;

    border: 1px solid #bfdbfe !important;

}



.invoice-payment-callout .payment-btn-wrapper input[type="submit"],

.invoice-payment-callout .payment-btn-wrapper .btn {

    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 50px !important;

    font-weight: 800 !important;

    font-size: 1rem !important;

    padding: 12px 36px !important;

    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.28) !important;

    transition: all 0.2s ease !important;

    cursor: pointer !important;

}



.invoice-payment-callout .payment-btn-wrapper input[type="submit"]:hover,

.invoice-payment-callout .payment-btn-wrapper .btn:hover {

    transform: translateY(-2px) !important;

    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.38) !important;

}



/* Print Optimization */

@media print {

    body.invoice-view-page {

        background: #ffffff !important;

        padding: 0 !important;

        margin: 0 !important;

        color: #000000 !important;

    }

    .invoice-toolbar,

    .d-print-none,

    #fullpage-overlay {

        display: none !important;

    }

    .invoice-paper-wrapper {

        max-width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

    }

    .invoice-paper-card {

        border: none !important;

        box-shadow: none !important;

        padding: 15px 20px !important;

        border-radius: 0 !important;

    }

    .invoice-header-row {

        border-bottom: 2px solid #94a3b8 !important;

    }

    .stamp-pill {

        border-width: 2px !important;

        print-color-adjust: exact;

        -webkit-print-color-adjust: exact;

    }

    .invoice-totals-box {

        background: #f8fafc !important;

        border: 1px solid #cbd5e1 !important;

    }

    .invoice-grand-total {

        color: #000000 !important;

    }

}



/* ==========================================================================

   ULTRA PREMIUM USER ACCOUNT DROPDOWN (SAAS GRADE)

   ========================================================================== */

.btn-hesabim-premium {

    display: inline-flex !important;

    align-items: center !important;

    gap: 9px !important;

    padding: 5px 14px 5px 6px !important;

    background: #ffffff !important;

    border: 1.5px solid #e2e8f0 !important;

    border-radius: 50px !important;

    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;

    transition: all 0.25s ease !important;

    color: #0f172a !important;

    cursor: pointer;

}



.btn-hesabim-premium:hover,

.btn-hesabim-premium:focus,

.dropdown.show .btn-hesabim-premium {

    border-color: #0284c7 !important;

    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.18) !important;

    transform: translateY(-1px);

}



.user-trigger-avatar {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);

    color: #ffffff;

    font-family: var(--font-heading);

    font-size: 0.82rem;

    font-weight: 800;

    display: flex;

    align-items: center;

    justify-content: center;

    text-transform: uppercase;

    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);

}



.user-trigger-name {

    font-family: var(--font-heading);

    font-size: 0.9rem;

    font-weight: 700;

    color: #0f172a;

}



.user-trigger-chevron {

    font-size: 0.72rem;

    color: #94a3b8;

    transition: transform 0.25s ease;

}



.dropdown.show .user-trigger-chevron {

    transform: rotate(180deg);

    color: #0284c7;

}



/* Fixed Static Dropdown Alignment - No Jitter / Jump */

.atl-user-dropdown {

    position: relative !important;

}



.atl-user-dropdown .user-dropdown-card,

.user-dropdown-card {

    position: absolute !important;

    top: 100% !important;

    right: 0 !important;

    left: auto !important;

    transform: none !important;

    width: 320px !important;

    border-radius: 20px !important;

    border: 1.5px solid rgba(226, 232, 240, 0.9) !important;

    background: rgba(255, 255, 255, 0.98) !important;

    backdrop-filter: blur(16px) !important;

    -webkit-backdrop-filter: blur(16px) !important;

    box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;

    overflow: hidden !important;

    padding: 0 !important;

    margin-top: 8px !important;

    animation: userDropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



@keyframes userDropdownFadeIn {

    0% {

        opacity: 0;

        margin-top: 16px;

    }

    100% {

        opacity: 1;

        margin-top: 8px;

    }

}



.atl-notifications-menu {

    position: absolute !important;

    top: 100% !important;

    right: 0 !important;

    left: auto !important;

    transform: none !important;

}



/* User Card Header */

.user-card-header {

    padding: 18px 18px 14px;

    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

    border-bottom: 1px solid #f1f5f9;

}



.user-avatar-wrap {

    position: relative;

    margin-right: 14px;

    flex-shrink: 0;

}



.user-avatar-gradient {

    width: 48px;

    height: 48px;

    border-radius: 14px;

    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);

    color: #ffffff;

    font-family: var(--font-heading);

    font-size: 1.15rem;

    font-weight: 800;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);

    text-transform: uppercase;

}



.user-status-online {

    position: absolute;

    bottom: -2px;

    right: -2px;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #10b981;

    border: 2.5px solid #ffffff;

    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);

    animation: pulseGreen 2s infinite;

}



.user-meta-wrap {

    flex: 1;

    min-width: 0;

}



.user-fullname {

    font-family: var(--font-heading);

    font-size: 0.98rem;

    font-weight: 800;

    color: #0f172a;

    line-height: 1.25;

    margin-bottom: 2px;

}



.user-email {

    font-size: 0.78rem;

    color: #64748b;

    margin-bottom: 6px;

}



.user-badges-row {

    display: flex;

    align-items: center;

    gap: 6px;

}



.user-badge-verified {

    font-size: 0.68rem;

    font-weight: 700;

    background: #ecfdf5;

    color: #059669;

    padding: 2px 8px;

    border-radius: 20px;

    border: 1px solid #a7f3d0;

    display: inline-flex;

    align-items: center;

}



.user-badge-id {

    font-size: 0.68rem;

    font-weight: 700;

    background: #f1f5f9;

    color: #475569;

    padding: 2px 7px;

    border-radius: 20px;

}



.btn-switch-account {

    display: flex;

    align-items: center;

    width: 100%;

    padding: 7px 12px;

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 10px;

    font-size: 0.78rem;

    font-weight: 700;

    color: #0284c7;

    text-decoration: none !important;

    transition: all 0.2s ease;

}



.btn-switch-account:hover {

    background: #f0fdfa;

    border-color: #0284c7;

    color: #0284c7 !important;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);

}



/* Mini KPI / Balance Strip */

.user-quick-kpi {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 16px;

    background: #f8fafc;

    border-bottom: 1px solid #f1f5f9;

}



.kpi-mini-item {

    text-align: center;

    flex: 1;

}



.kpi-mini-label {

    font-size: 0.68rem;

    font-weight: 600;

    color: #94a3b8;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    display: block;

    margin-bottom: 2px;

}



.kpi-mini-val {

    font-family: var(--font-heading);

    font-size: 0.86rem;

    font-weight: 800;

    display: block;

}



.kpi-mini-divider {

    width: 1px;

    height: 24px;

    background: #e2e8f0;

}



/* Menu Items List */

.user-card-body {

    padding: 8px;

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.user-menu-item {

    display: flex;

    align-items: center;

    padding: 8px 10px;

    border-radius: 12px;

    text-decoration: none !important;

    transition: all 0.2s ease;

    position: relative;

    color: #0f172a !important;

}



.user-menu-item:hover {

    background: #f8fafc;

    transform: translateX(3px);

    color: #0284c7 !important;

}



.menu-icon-box {

    width: 36px;

    height: 36px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

    margin-right: 12px;

    flex-shrink: 0;

    transition: transform 0.2s ease;

}



.menu-icon-box.bg-blue-soft { background: #eff6ff; color: #2563eb; }

.menu-icon-box.bg-indigo-soft { background: #e0e7ff; color: #4f46e5; }

.menu-icon-box.bg-cyan-soft { background: #e0f2fe; color: #0284c7; }

.menu-icon-box.bg-emerald-soft { background: #ecfdf5; color: #059669; }

.menu-icon-box.bg-purple-soft { background: #f5f3ff; color: #7c3aed; }

.menu-icon-box.bg-slate-soft { background: #f1f5f9; color: #475569; }



.user-menu-item:hover .menu-icon-box {

    transform: scale(1.08);

}



.menu-text-wrap {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

}



.menu-item-title {

    font-family: var(--font-heading);

    font-size: 0.88rem;

    font-weight: 700;

    color: #0f172a;

    line-height: 1.2;

}



.menu-item-sub {

    font-size: 0.72rem;

    color: #94a3b8;

    line-height: 1.2;

    margin-top: 2px;

}



.menu-item-arrow {

    font-size: 0.72rem;

    color: #cbd5e1;

    margin-left: 8px;

    transition: transform 0.2s ease, color 0.2s ease;

}



.user-menu-item:hover .menu-item-arrow {

    transform: translateX(2px);

    color: #0284c7;

}



.menu-item-chip {

    font-size: 0.68rem;

    font-weight: 800;

    padding: 2px 7px;

    border-radius: 20px;

    margin-left: 6px;

}



/* Admin Masquerade Row */

.user-card-admin-row {

    padding: 8px 12px;

    background: #fffbeb;

    border-top: 1px solid #fef3c7;

    border-bottom: 1px solid #fef3c7;

}



.btn-return-admin {

    display: flex;

    align-items: center;

    padding: 8px 12px;

    background: #ffffff;

    border: 1.5px solid #fde68a;

    border-radius: 10px;

    color: #b45309;

    text-decoration: none !important;

    font-weight: 700;

    font-size: 0.82rem;

    transition: all 0.2s ease;

}



.btn-return-admin:hover {

    background: #fef3c7;

    color: #92400e !important;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);

}



.admin-icon-box {

    width: 32px;

    height: 32px;

    border-radius: 8px;

    background: #fef3c7;

    color: #d97706;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.95rem;

    margin-right: 10px;

}



.admin-label {

    font-size: 0.66rem;

    font-weight: 600;

    color: #d97706;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    display: block;

    line-height: 1.1;

}



.admin-action {

    font-size: 0.84rem;

    font-weight: 800;

    color: #92400e;

    display: block;

    line-height: 1.2;

}



/* Footer / Logout Button */

.user-card-footer {

    padding: 10px 14px;

    background: #ffffff;

    border-top: 1px solid #f1f5f9;

}



.btn-user-logout {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    padding: 9px;

    border-radius: 12px;

    background: #fef2f2;

    color: #ef4444 !important;

    font-family: var(--font-heading);

    font-size: 0.86rem;

    font-weight: 700;

    text-decoration: none !important;

    transition: all 0.2s ease;

    border: 1px solid #fee2e2;

}



.btn-user-logout:hover {

    background: #fee2e2;

    color: #dc2626 !important;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);

}





/* ==========================================================================

   1. TOP PROMO ANNOUNCEMENT BAR

   ========================================================================== */

.atl-top-promo-bar {

    background: linear-gradient(90deg, #091e4f 0%, #1d4ed8 45%, #0284c7 80%, #06b6d4 100%);

    color: #ffffff;

    font-size: 0.84rem;

    padding: 7px 0;

    position: relative;

    z-index: 1050;

    border-bottom: 1px solid rgba(255, 255, 255, 0.15);

}



.promo-text-wrap {

    font-weight: 500;

}



.promo-badge {

    background: rgba(255, 255, 255, 0.2);

    color: #ffffff;

    font-size: 0.70rem;

    font-weight: 800;

    letter-spacing: 0.8px;

    padding: 2px 10px;

    border-radius: 20px;

    margin-right: 10px;

    border: 1px solid rgba(255, 255, 255, 0.3);

}



.promo-code-wrap {

    background: rgba(0, 0, 0, 0.25);

    border: 1px dashed rgba(255, 255, 255, 0.4);

    border-radius: 6px;

    padding: 2px 8px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 0.78rem;

}



.promo-code {

    font-family: monospace;

    font-weight: 800;

    color: #fde047;

    letter-spacing: 1px;

}



.btn-copy-promo {

    background: transparent;

    border: none;

    color: #ffffff;

    cursor: pointer;

    font-size: 0.85rem;

    padding: 0;

    display: inline-flex;

    align-items: center;

    transition: transform 0.2s ease;

}



.btn-copy-promo:hover {

    transform: scale(1.15);

    color: #fde047;

}



.promo-cta-link {

    background: #ffffff;

    color: #0284c7 !important;

    font-family: var(--font-heading);

    font-size: 0.76rem;

    font-weight: 800;

    padding: 3px 12px;

    border-radius: 20px;

    text-decoration: none !important;

    transition: all 0.2s ease;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

}



.promo-cta-link:hover {

    background: #f0fdfa;

    color: #0369a1 !important;

    transform: translateY(-1px);

}



.btn-close-promo {

    background: transparent;

    border: none;

    color: rgba(255, 255, 255, 0.7);

    cursor: pointer;

    font-size: 0.9rem;

    padding: 2px 6px;

    transition: color 0.2s ease;

}



.btn-close-promo:hover {

    color: #ffffff;

}



/* ==========================================================================

   2. DOMAIN TLD SHOWCASE SECTION

   ========================================================================== */

.domain-tld-showcase-section {

    background: #ffffff;

}



.tld-card {

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 18px;

    padding: 20px 14px;

    text-align: center;

    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);

    transition: all 0.3s ease;

    position: relative;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.tld-card:hover {

    transform: translateY(-6px);

    border-color: #0284c7;

    box-shadow: 0 16px 30px -8px rgba(2, 132, 199, 0.16);

}



.tld-card.featured {

    border-color: #0284c7;

    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 60%);

}



.tld-card.featured-tr {

    border-color: #fca5a5;

    background: linear-gradient(180deg, #fef2f2 0%, #ffffff 60%);

}



.tld-pill-badge {

    font-size: 0.68rem;

    font-weight: 800;

    padding: 3px 8px;

    border-radius: 12px;

    display: inline-block;

    margin-bottom: 8px;

}



.bg-danger-soft { background: #fee2e2; color: #dc2626; }



.tld-ext {

    font-family: var(--font-heading);

    font-size: 1.55rem;

    font-weight: 800;

    color: #0f172a;

    letter-spacing: -0.5px;

    margin-bottom: 4px;

}



.tld-price {

    font-family: var(--font-heading);

    font-size: 1.1rem;

    font-weight: 800;

    color: #0284c7;

    margin-bottom: 12px;

}



.tld-price small {

    font-size: 0.72rem;

    color: #64748b;

    font-weight: 500;

    margin-left: 2px;

}



.btn-tld-action {

    background: #f1f5f9;

    color: #0f172a;

    font-family: var(--font-heading);

    font-weight: 700;

    font-size: 0.82rem;

    padding: 6px 14px;

    border-radius: 20px;

    border: 1px solid #e2e8f0;

    transition: all 0.2s ease;

    display: block;

    width: 100%;

    text-decoration: none !important;

}



.btn-tld-action:hover,

.tld-card.featured .btn-tld-action {

    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);

    color: #ffffff !important;

    border: none;

    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);

}



/* ==========================================================================

   3. BILLING CYCLE TOGGLE PILL

   ========================================================================== */

.billing-cycle-switch-wrapper {

    margin-bottom: 35px;

}



.billing-toggle-pill {

    background: #f1f5f9;

    border: 1.5px solid #e2e8f0;

    border-radius: 50px;

    padding: 4px;

    display: inline-flex;

    align-items: center;

    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);

}



.btn-billing-opt {

    background: transparent;

    border: none;

    font-family: var(--font-heading);

    font-size: 0.88rem;

    font-weight: 700;

    color: #64748b;

    padding: 8px 20px;

    border-radius: 50px;

    cursor: pointer;

    transition: all 0.25s ease;

    display: inline-flex;

    align-items: center;

    gap: 6px;

}



.btn-billing-opt.active {

    background: #ffffff;

    color: #0f172a;

    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);

}



.btn-billing-opt .save-badge {

    background: #ecfdf5;

    color: #059669;

    font-size: 0.70rem;

    font-weight: 800;

    padding: 2px 8px;

    border-radius: 20px;

    border: 1px solid #a7f3d0;

}



.annual-save-chip {

    background: #ecfdf5;

    color: #059669;

    border: 1px solid #a7f3d0;

    font-size: 0.75rem;

    font-weight: 800;

    padding: 4px 10px;

    border-radius: 20px;

    margin-bottom: 8px;

    display: inline-block;

    animation: fadeInDown 0.3s ease;

}



@keyframes fadeInDown {

    0% { opacity: 0; transform: translateY(-6px); }

    100% { opacity: 1; transform: translateY(0); }

}



/* ==========================================================================

   4. INTERACTIVE VDS CLOUD CONFIGURATOR

   ========================================================================== */

.vds-calculator-section {

    background: #f8fafc;

    border-top: 1px solid #e2e8f0;

    border-bottom: 1px solid #e2e8f0;

}



.vds-calc-box {

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 24px;

    padding: 34px 28px;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);

}



.slider-label {

    font-family: var(--font-heading);

    font-size: 0.95rem;

    font-weight: 800;

    color: #0f172a;

}



.slider-display-val {

    font-family: var(--font-heading);

    font-size: 0.92rem;

    font-weight: 800;

    color: #0284c7;

    background: #e0f2fe;

    padding: 3px 12px;

    border-radius: 20px;

    border: 1px solid #bae6fd;

}



.custom-slider {

    width: 100%;

    height: 8px;

    border-radius: 8px;

    background: #e2e8f0;

    outline: none;

    -webkit-appearance: none;

    margin: 10px 0;

    cursor: pointer;

}



.custom-slider::-webkit-slider-thumb {

    -webkit-appearance: none;

    appearance: none;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.45);

    border: 2px solid #ffffff;

    transition: transform 0.15s ease;

}



.custom-slider::-webkit-slider-thumb:hover {

    transform: scale(1.18);

}



.slider-ticks {

    display: flex;

    justify-content: space-between;

    font-size: 0.74rem;

    font-weight: 600;

    color: #94a3b8;

    margin-top: 4px;

}



.btn-os-pill {

    background: #f8fafc;

    border: 1.5px solid #e2e8f0;

    border-radius: 12px;

    padding: 7px 16px;

    font-family: var(--font-heading);

    font-size: 0.82rem;

    font-weight: 700;

    color: #334155;

    cursor: pointer;

    transition: all 0.2s ease;

}



.btn-os-pill:hover,

.btn-os-pill.active {

    background: #ffffff;

    border-color: #0284c7;

    color: #0284c7;

    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);

}



.vds-summary-card {

    background: linear-gradient(135deg, #091e4f 0%, #0d3885 30%, #1d4ed8 70%, #0284c7 100%);

    border-radius: 24px;

    overflow: hidden;

    position: relative;

    border: 2px solid rgba(255, 255, 255, 0.2);

}



.vds-summary-header {

    padding: 24px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

}



.vds-summary-body {

    padding: 24px;

    background: #ffffff;

    border-radius: 22px 22px 0 0;

}



.vds-spec-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.vds-spec-list li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 0;

    border-bottom: 1px dashed #e2e8f0;

    font-size: 0.88rem;

}



.vds-spec-list li:last-child {

    border-bottom: none;

}



.spec-name {

    color: #64748b;

    font-weight: 600;

}



.spec-value {

    color: #0f172a;

}



.vds-calc-price {

    font-family: var(--font-heading);

    color: #0f172a;

}



.vds-calc-price .cur {

    font-size: 1.4rem;

    font-weight: 700;

}



.vds-calc-price .amt {

    font-size: 2.8rem;

    font-weight: 900;

    letter-spacing: -1px;

    color: #0284c7;

}



.vds-calc-price .dec {

    font-size: 1.3rem;

    font-weight: 700;

    color: #0284c7;

}



.vds-calc-price .cyc {

    font-size: 0.9rem;

    color: #64748b;

    margin-left: 4px;

}



.btn-vds-order {

    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;

    color: #ffffff !important;

    font-family: var(--font-heading);

    font-size: 1rem;

    font-weight: 800;

    padding: 14px;

    border-radius: 50px;

    border: none;

    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.35);

    transition: all 0.3s ease;

    text-decoration: none !important;

}



.btn-vds-order:hover {

    transform: translateY(-2px);

    box-shadow: 0 12px 30px rgba(2, 132, 199, 0.5);

    color: #ffffff !important;

}



/* ==========================================================================
   5. MODERN FAQ ACCORDION (2-COLUMN GRID)
   ========================================================================== */
.faq-accordion-section {
    background: #ffffff;
}

.faq-wrapper,
.faq-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
    align-items: start;
}

@media (max-width: 991px) {
    .faq-wrapper,
    .faq-grid-2col {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.faq-item {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.faq-item:hover {
    border-color: #38bdf8;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.07);
    transform: translateY(-2px);
}

.faq-item.active {
    border-color: #0284c7;
    box-shadow: 0 10px 30px rgba(2, 132, 199, 0.12);
}

.faq-question {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 12px;
}

.faq-q-text {
    display: flex !important;
    align-items: center !important;
    font-family: var(--font-heading) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    flex: 1;
    min-width: 0;
    line-height: 1.45;
}

.faq-q-text span:not(.faq-q-icon-wrap) {
    display: block;
    word-break: break-word;
}

.faq-q-icon-wrap,
.faq-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 12px !important;
    background: #e0f2fe !important;
    color: #0284c7 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    font-size: 1.05rem !important;
    flex-shrink: 0 !important;
    margin-right: 14px !important;
    transition: all 0.25s ease !important;
    padding: 0 !important;
}

.faq-q-icon-wrap i,
.faq-icon i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    vertical-align: middle !important;
    color: #0284c7 !important;
}

.faq-item.active .faq-q-icon-wrap {
    background: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
}

.faq-item.active .faq-q-icon-wrap i {
    color: #ffffff !important;
}

.faq-toggle-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    transition: all 0.25s ease !important;
    margin-left: 8px !important;
    padding: 0 !important;
}

.faq-toggle-icon i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    text-align: center !important;
    line-height: 1 !important;
    transition: transform 0.25s ease;
}

.faq-item.active .faq-toggle-icon {
    background: #0284c7 !important;
    color: #ffffff !important;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease;
    padding: 0 20px;
}

.faq-answer.show {
    max-height: 500px;
    padding: 0 20px 18px 72px;
}

.faq-answer p {
    font-size: 0.93rem;
    color: #64748b;
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 767px) {
    .faq-question {
        padding: 14px 16px;
    }
    .faq-q-icon-wrap {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 0.92rem !important;
        margin-right: 10px !important;
    }
    .faq-q-text {
        font-size: 0.95rem !important;
    }
    .faq-answer.show {
        padding: 0 16px 16px 58px;
    }
    .faq-answer p {
        font-size: 0.88rem;
    }
}

/* ==========================================================================

   6. FLOATING SUPPORT & WHATSAPP HUB WIDGET

   ========================================================================== */

.atl-support-hub {

    position: fixed;

    bottom: 25px;

    right: 25px;

    z-index: 9999;

}



.support-hub-trigger {

    background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);

    color: #ffffff;

    border: none;

    border-radius: 50px;

    padding: 6px 18px 6px 6px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);

    cursor: pointer;

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;

}



.support-hub-trigger:hover {

    transform: translateY(-3px) scale(1.03);

    box-shadow: 0 14px 30px rgba(37, 211, 102, 0.55);

}



.hub-trigger-icon {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: #ffffff;

    color: #25d366;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.55rem;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);

}



.hub-trigger-label {

    font-family: var(--font-heading);

    font-weight: 800;

    font-size: 0.92rem;

    letter-spacing: 0.2px;

}



.hub-pulse-beacon {

    position: absolute;

    top: 2px;

    left: 2px;

    width: 14px;

    height: 14px;

    border-radius: 50%;

    background: #10b981;

    border: 2px solid #ffffff;

    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);

    animation: pulseGreen 2s infinite;

}



/* Hub Popup Card */

.support-hub-card {

    position: absolute;

    bottom: 65px;

    right: 0;

    width: 320px;

    border-radius: 20px;

    background: #ffffff;

    border: 1.5px solid rgba(226, 232, 240, 0.9);

    overflow: hidden;

    display: none;

    opacity: 0;

    transform: translateY(12px) scale(0.96);

    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}



.support-hub-card.active {

    display: block;

    opacity: 1;

    transform: translateY(0) scale(1);

}



.hub-card-header {

    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

    padding: 16px 18px;

}



.hub-agent-avatar {

    width: 36px;

    height: 36px;

    border-radius: 10px;

    background: #25d366;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

}



.hub-online-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #10b981;

    display: inline-block;

}



.btn-close-hub {

    background: transparent;

    border: none;

    color: rgba(255, 255, 255, 0.6);

    cursor: pointer;

    font-size: 0.9rem;

    transition: color 0.2s ease;

}



.btn-close-hub:hover {

    color: #ffffff;

}



.hub-card-body {

    padding: 14px 14px 10px;

}



.hub-intro-text {

    font-size: 0.80rem;

    color: #64748b;

    line-height: 1.45;

    margin-bottom: 12px;

}



.hub-channel-item {

    display: flex;

    align-items: center;

    padding: 10px;

    border-radius: 12px;

    border: 1px solid #f1f5f9;

    margin-bottom: 8px;

    text-decoration: none !important;

    transition: all 0.2s ease;

    background: #ffffff;

}



.hub-channel-item:hover {

    background: #f8fafc;

    border-color: #e2e8f0;

    transform: translateX(3px);

}



.channel-icon-wrap {

    width: 36px;

    height: 36px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.15rem;

    margin-right: 10px;

    flex-shrink: 0;

}



.icon-wa { background: #dcfce7; color: #16a34a; }

.icon-tel { background: #e0f2fe; color: #0284c7; }

.icon-tkt { background: #f3e8ff; color: #9333ea; }



.channel-info-wrap {

    flex: 1;

    min-width: 0;

}



.channel-name {

    font-family: var(--font-heading);

    font-size: 0.84rem;

    font-weight: 700;

    color: #0f172a;

    display: block;

    line-height: 1.2;

}



.channel-desc {

    font-size: 0.72rem;

    color: #64748b;

    display: block;

    line-height: 1.2;

    margin-top: 1px;

}



.channel-arrow {

    font-size: 0.75rem;

    color: #cbd5e1;

}



.hub-card-footer {

    padding: 8px 14px;

    background: #f8fafc;

    border-top: 1px solid #f1f5f9;

    text-align: center;

}



/* ==========================================================================

   ATLANTEZS PRIME - CONTACT PAGE MODERN SAAS STYLING

   ========================================================================== */

.contact-sky-hero {

    position: relative;

    overflow: hidden;

}



.contact-channel-card {

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 18px;

    padding: 24px 20px;

    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    display: flex;

    flex-direction: column;

}



.contact-channel-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 18px 40px rgba(0, 102, 204, 0.12);

    border-color: #0066cc;

}



.channel-icon-circle {

    width: 48px;

    height: 48px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.35rem;

    transition: transform 0.2s ease;

}



.contact-channel-card:hover .channel-icon-circle {

    transform: scale(1.08);

}



.channel-card-title {

    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);

    font-size: 1.05rem;

    font-weight: 700;

    color: #0f172a;

}



.channel-card-desc {

    font-size: 0.85rem;

    color: #64748b;

    line-height: 1.5;

    flex-grow: 1;

}



.channel-card-link {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    font-weight: 700;

    font-size: 0.88rem;

    color: #0066cc;

    padding: 10px 14px;

    background: #f8fafc;

    border-radius: 10px;

    border: 1px solid #e2e8f0;

    transition: all 0.2s ease;

}



.contact-channel-card:hover .channel-card-link {

    background: #0066cc;

    color: #ffffff !important;

    border-color: #0066cc;

}



.contact-info-icon-box {

    width: 46px;

    height: 46px;

    border-radius: 12px;

    background: #eff6ff;

    border: 1.5px solid #bfdbfe;

    color: #0066cc;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

    box-shadow: 0 4px 10px rgba(0, 102, 204, 0.08);

}



.atl-input-wrap {

    position: relative;

    width: 100%;

}



.atl-input-icon {

    position: absolute;

    left: 16px;

    top: 50%;

    transform: translateY(-50%);

    color: #94a3b8;

    font-size: 0.95rem;

    pointer-events: none;

    z-index: 5;

    transition: color 0.2s ease;

}



.atl-input-icon-top {

    top: 18px !important;

    transform: none !important;

}



.atl-form-control {

    width: 100%;

    height: 48px !important;

    min-height: 48px !important;

    padding: 10px 16px 10px 16px !important;

    border: 1.5px solid #e2e8f0 !important;

    border-radius: 12px !important;

    font-size: 0.93rem !important;

    color: #0f172a !important;

    background: #f8fafc !important;

    transition: all 0.2s ease !important;

}



/* If inside .atl-input-wrap, provide safe left padding for the icon */

.atl-input-wrap .atl-form-control,

.atl-input-wrap input.atl-form-control,

.atl-input-wrap input.form-control {

    padding-left: 48px !important;

    padding-right: 16px !important;

}



.atl-input-wrap textarea.atl-form-control,

.atl-input-wrap textarea.form-control {

    height: auto !important;

    min-height: 120px !important;

    padding-left: 48px !important;

    padding-top: 14px !important;

}



/* Standalone & wrapped Modern Dropdowns (atl-select) */

.atl-select,

select.atl-select,

select.atl-form-control {

    width: 100% !important;

    height: 48px !important;

    min-height: 48px !important;

    padding: 10px 40px 10px 16px !important;

    border: 1.5px solid #e2e8f0 !important;

    border-radius: 12px !important;

    font-size: 0.93rem !important;

    font-weight: 500 !important;

    color: #0f172a !important;

    background-color: #f8fafc !important;

    line-height: 1.5 !important;

    box-sizing: border-box !important;

    -webkit-appearance: none !important;

    -moz-appearance: none !important;

    appearance: none !important;

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;

    background-repeat: no-repeat !important;

    background-position: right 16px center !important;

    background-size: 12px 12px !important;

    transition: all 0.2s ease !important;

}



.atl-input-wrap select.atl-select,

.atl-input-wrap select.atl-form-control,

.atl-input-wrap select {

    padding-left: 48px !important;

    padding-right: 40px !important;

}



.atl-form-control:focus,

.atl-select:focus,

select.atl-select:focus,

select.atl-form-control:focus,

.atl-input-wrap .atl-form-control:focus {

    background: #ffffff !important;

    border-color: #0066cc !important;

    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.12) !important;

    outline: none !important;

}



.atl-input-wrap:focus-within .atl-input-icon {

    color: #0066cc !important;

}



.contact-form-card {

    transition: all 0.3s ease;

}



.contact-form-card:hover {

    border-color: #cbd5e1;

    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.08) !important;

}



@media (max-width: 767.98px) {

    .contact-quick-channels {

        margin-top: -30px !important;

    }

}



/* ==========================================================================

   ATLANTEZS PRIME - SUPPORT TICKET DEPARTMENTS STYLING

   ========================================================================== */

.dept-channel-card {

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 20px;

    padding: 26px 22px;

    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    display: flex;

    flex-direction: column;

    height: 100%;

    text-decoration: none !important;

    position: relative;

    overflow: hidden;

}



.dept-channel-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 20px 45px rgba(0, 102, 204, 0.12);

    border-color: #0066cc;

}



.dept-icon-circle {

    width: 52px;

    height: 52px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.4rem;

    transition: transform 0.25s ease;

}



.dept-channel-card:hover .dept-icon-circle {

    transform: scale(1.10) rotate(3deg);

}



.dept-card-title {

    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);

    font-size: 1.15rem;

    font-weight: 700;

    color: #0f172a;

    transition: color 0.2s ease;

}



.dept-channel-card:hover .dept-card-title {

    color: #0066cc;

}



.dept-card-desc {

    font-size: 0.88rem;

    color: #64748b;

    line-height: 1.55;

    flex-grow: 1;

}



.dept-card-btn {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    font-weight: 700;

    font-size: 0.90rem;

    color: #0066cc;

    padding: 11px 16px;

    background: #f8fafc;

    border-radius: 12px;

    border: 1px solid #e2e8f0;

    transition: all 0.2s ease;

    margin-top: 15px;

}



.dept-card-btn i {

    transition: transform 0.2s ease;

}



.dept-channel-card:hover .dept-card-btn {

    background: #0066cc;

    color: #ffffff !important;

    border-color: #0066cc;

    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);

}



.dept-channel-card:hover .dept-card-btn i {

    transform: translateX(4px);

}



@media (max-width: 767.98px) {

    .dept-quick-channels {

        margin-top: -30px !important;

    }

}



.ticket-sidebar-box {

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 18px;

    padding: 24px;

    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);

}











/* ==========================================================================

   ATLANTEZS PRIME - MODERN SAAS PORTAL PAGES STYLING

   Applies to: Details, Tickets, Announcements, KB, Downloads, Server Status

   ========================================================================== */



/* Modern Portal Card Container */

.atl-portal-card {

    background: #ffffff;

    border-radius: 18px;

    border: 1.5px solid #e2e8f0;

    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);

    margin-bottom: 24px;

    overflow: hidden;

    transition: all 0.25s ease;

}



.atl-portal-card-header {

    padding: 22px 26px;

    background: #ffffff;

    border-bottom: 1.5px solid #f1f5f9;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 15px;

}



.atl-portal-card-header .header-left {

    display: flex;

    align-items: center;

    gap: 14px;

}



.atl-header-icon {

    width: 46px;

    height: 46px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    flex-shrink: 0;

}



.atl-header-icon.icon-blue { background: #eff6ff; color: #0066cc; }

.atl-header-icon.icon-indigo { background: #eef2ff; color: #4f46e5; }

.atl-header-icon.icon-cyan { background: #ecfeff; color: #0891b2; }

.atl-header-icon.icon-green { background: #ecfdf5; color: #10b981; }

.atl-header-icon.icon-amber { background: #fffbeb; color: #d97706; }

.atl-header-icon.icon-purple { background: #faf5ff; color: #9333ea; }



.atl-portal-title {

    font-family: var(--font-heading, 'Plus Jakarta Sans', sans-serif);

    font-size: 1.25rem;

    font-weight: 800;

    color: #0f172a;

    letter-spacing: -0.3px;

    margin: 0;

    line-height: 1.2;

}



.atl-portal-subtitle {

    font-size: 0.86rem;

    color: #64748b;

    margin: 3px 0 0;

}



.atl-portal-card-body {

    padding: 26px;

}



/* Form Sections */

.atl-form-section-title {

    font-size: 0.95rem;

    font-weight: 700;

    color: #1e293b;

    margin: 0 0 16px 0;

    padding-bottom: 10px;

    border-bottom: 1.5px solid #f1f5f9;

    display: flex;

    align-items: center;

    gap: 8px;

}



.atl-form-section-title i {

    color: #0066cc;

    font-size: 0.95rem;

}



.atl-input-icon-wrap {

    position: relative;

}



.atl-input-icon-wrap i.field-icon {

    position: absolute;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

    color: #94a3b8;

    font-size: 0.95rem;

    pointer-events: none;

    z-index: 3;

}



.atl-input-icon-wrap .form-control {

    padding-left: 40px !important;

}



.atl-input-icon-wrap .custom-select,

.atl-input-icon-wrap select {

    padding-left: 40px !important;

}



/* Empty States */

.atl-empty-state {

    text-align: center;

    padding: 45px 24px;

    background: #f8fafc;

    border-radius: 16px;

    border: 1.5px dashed #cbd5e1;

    margin: 10px 0;

}



.atl-empty-icon {

    width: 68px;

    height: 68px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 1.7rem;

    margin-bottom: 16px;

}



.atl-empty-title {

    font-size: 1.15rem;

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 6px;

}



.atl-empty-desc {

    font-size: 0.88rem;

    color: #64748b;

    max-width: 460px;

    margin: 0 auto 16px;

    line-height: 1.5;

}



/* Modern KB / Downloads Search Bar */

.atl-search-hero-box {

    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

    border: 1.5px solid #e2e8f0;

    border-radius: 18px;

    padding: 26px;

    margin-bottom: 24px;

}



.atl-search-input-group {

    display: flex;

    background: #ffffff;

    border: 1.5px solid #cbd5e1;

    border-radius: 50px;

    padding: 6px 8px 6px 20px;

    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);

    transition: all 0.2s ease;

    align-items: center;

}



.atl-search-input-group:focus-within {

    border-color: #0066cc;

    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.12);

}



.atl-search-input-group .atl-search-field {

    border: none !important;

    background: transparent !important;

    outline: none !important;

    box-shadow: none !important;

    flex-grow: 1;

    font-size: 0.96rem;

    color: #0f172a;

    padding: 8px 12px;

}



.atl-search-input-group .atl-search-btn {

    border-radius: 50px;

    padding: 10px 24px;

    font-weight: 700;

    font-size: 0.92rem;

    background: #0066cc;

    color: #ffffff;

    border: none;

    transition: all 0.2s ease;

}



.atl-search-input-group .atl-search-btn:hover {

    background: #0052a3;

    color: #ffffff;

    transform: translateY(-1px);

}



/* Category Card */

.atl-category-card {

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 16px;

    padding: 20px 22px;

    text-decoration: none !important;

    display: block;

    height: 100%;

    transition: all 0.25s ease;

}



.atl-category-card:hover {

    transform: translateY(-3px);

    border-color: #0066cc;

    box-shadow: 0 10px 24px rgba(0, 102, 204, 0.08);

}



.atl-category-card .cat-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 8px;

}



.atl-category-card .cat-title {

    font-size: 1.05rem;

    font-weight: 700;

    color: #0f172a;

    display: flex;

    align-items: center;

    gap: 9px;

}



.atl-category-card:hover .cat-title {

    color: #0066cc;

}



.atl-category-card .cat-badge {

    background: #eff6ff;

    color: #0066cc;

    font-weight: 700;

    font-size: 0.74rem;

    padding: 4px 10px;

    border-radius: 50px;

    border: 1px solid #bfdbfe;

}



.atl-category-card .cat-desc {

    font-size: 0.84rem;

    color: #64748b;

    line-height: 1.45;

    margin: 0;

}



/* Announcements Timeline Card */

.atl-announcement-card {

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 16px;

    padding: 24px;

    margin-bottom: 20px;

    transition: all 0.25s ease;

}



.atl-announcement-card:hover {

    border-color: #cbd5e1;

    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);

}



.atl-announcement-date {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font-size: 0.80rem;

    font-weight: 700;

    color: #0066cc;

    background: #eff6ff;

    padding: 4px 12px;

    border-radius: 50px;

    margin-bottom: 12px;

}



.atl-announcement-title {

    font-size: 1.25rem;

    font-weight: 800;

    margin-bottom: 10px;

}



.atl-announcement-title a {

    color: #0f172a;

    text-decoration: none;

    transition: color 0.2s ease;

}



.atl-announcement-title a:hover {

    color: #0066cc;

}



.atl-announcement-content {

    font-size: 0.92rem;

    color: #475569;

    line-height: 1.6;

    margin-bottom: 16px;

}



/* Operational Pulse Badge for Server Status */

.atl-operational-banner {

    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);

    border: 1.5px solid #a7f3d0;

    border-radius: 18px;

    padding: 24px;

    margin-bottom: 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 16px;

    transition: all 0.3s ease;

}



.atl-operational-banner .atl-op-icon {

    width: 48px;

    height: 48px;

    background: #d1fae5;

    color: #059669;

    font-size: 1.3rem;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.atl-operational-banner .atl-op-title {

    color: #0f172a;

    font-size: 1.15rem;

    font-weight: 700;

    margin-bottom: 4px;

    display: flex;

    align-items: center;

}



.atl-operational-banner .atl-op-desc {

    color: #64748b;

    font-size: 0.88rem;

    margin-bottom: 0;

}



.atl-operational-banner .atl-op-badge {

    background: #ffffff;

    color: #059669;

    border: 1.5px solid #a7f3d0;

    font-size: 0.82rem;

    font-weight: 700;

    border-radius: 50rem;

    padding: 8px 16px;

    display: inline-flex;

    align-items: center;

}



.atl-server-thead {

    background: #f8fafc;

}



.atl-server-tr {

    border-bottom: 1px solid #f1f5f9;

}



.atl-server-name {

    color: #0f172a;

}



.atl-issue-target {

    color: #0f172a;

}



.atl-issue-desc {

    color: #334155;

}



.pulse-dot-green {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #10b981;

    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);

    animation: pulse-green 1.8s infinite cubic-bezier(0.66, 0, 0, 1);

    display: inline-block;

}



@keyframes pulse-green {

    to {

        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);

    }

}



/* Ticket List Custom Status Pills */

.table.table-list {

    border-collapse: separate !important;

    border-spacing: 0 6px !important;

}



.table.table-list thead th {

    border: none !important;

    background: #f8fafc;

    color: #475569;

    font-size: 0.78rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.6px;

    padding: 12px 16px;

}



.table.table-list thead th:first-child {

    border-top-left-radius: 10px;

    border-bottom-left-radius: 10px;

}



.table.table-list thead th:last-child {

    border-top-right-radius: 10px;

    border-bottom-right-radius: 10px;

}



.table.table-list tbody tr {

    background: #ffffff;

    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    transition: all 0.2s ease;

    cursor: pointer;

}



.table.table-list tbody tr:hover {

    background: #f8fafc !important;

    border-color: #0066cc;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.08);

}



.table.table-list tbody td {

    border: none !important;

    padding: 14px 16px !important;

    vertical-align: middle;

    font-size: 0.90rem;

}



.table.table-list tbody td:first-child {

    border-top-left-radius: 10px;

    border-bottom-left-radius: 10px;

}



.table.table-list tbody td:last-child {

    border-top-right-radius: 10px;

    border-bottom-right-radius: 10px;

}



.table.table-list .label.status {

    padding: 5px 12px;

    border-radius: 50px;

    font-weight: 700;

    font-size: 0.76rem;

    letter-spacing: 0.3px;

    display: inline-block;

}



.table.table-list .label.status.status-open {

    background: #ecfdf5 !important;

    color: #065f46 !important;

    border: 1px solid #a7f3d0;

}



.table.table-list .label.status.status-answered {

    background: #eff6ff !important;

    color: #1e40af !important;

    border: 1px solid #bfdbfe;

}



.table.table-list .label.status.status-customer-reply {

    background: #fffbeb !important;

    color: #92400e !important;

    border: 1px solid #fde68a;

}



.table.table-list .label.status.status-closed {

    background: #f1f5f9 !important;

    color: #475569 !important;

    border: 1px solid #e2e8f0;

}





/* ==========================================================================

   ATLANTEZS PRIME - HOMEPAGE HERO ARTWORK SLIDER STYLING

   ========================================================================== */

#heroArtworkSlider {

    position: relative;

    border-radius: 26px;

    overflow: hidden;

    background: #091e4f;

}



#heroArtworkSlider .carousel-inner {

    border-radius: 26px;

    position: relative;

}



#heroArtworkSlider .carousel-item {

    position: relative;

    transition: opacity 0.6s ease-in-out;

}



#heroArtworkSlider .hero-visual-img {

    width: 100%;

    aspect-ratio: 4/3;

    object-fit: cover;

    display: block;

}



/* Glassmorphism Slide Caption Overlay */

.hero-slide-caption {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    padding: 24px 24px 18px;

    background: linear-gradient(180deg, rgba(9, 30, 79, 0) 0%, rgba(9, 30, 79, 0.75) 30%, rgba(9, 30, 79, 0.96) 100%);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    color: #ffffff;

    text-align: left;

    z-index: 5;

}



.hero-slide-caption .slide-badge {

    font-size: 0.68rem;

    font-weight: 800;

    letter-spacing: 0.5px;

    padding: 3px 8px;

    border-radius: 4px;

    text-transform: uppercase;

    display: inline-block;

}



.hero-slide-caption .slide-title {

    font-size: 1.15rem;

    font-weight: 800;

    color: #ffffff;

    margin: 5px 0 3px;

    letter-spacing: -0.2px;

    line-height: 1.3;

}



.hero-slide-caption .slide-desc {

    font-size: 0.80rem;

    color: rgba(255, 255, 255, 0.88);

    margin-bottom: 6px;

    line-height: 1.4;

    max-width: 90%;

}



.hero-slide-caption .slide-cta-link {

    display: inline-flex;

    align-items: center;

    font-size: 0.82rem;

    font-weight: 700;

    color: #38bdf8;

    text-decoration: none;

    transition: all 0.2s ease;

}



.hero-slide-caption .slide-cta-link:hover {

    color: #ffffff;

    transform: translateX(3px);

}



/* Indicators */

.hero-slider-indicators {

    bottom: 8px;

    margin-bottom: 0;

    z-index: 6;

}



.hero-slider-indicators li {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background-color: rgba(255, 255, 255, 0.45);

    border: none;

    margin: 0 3px;

    transition: all 0.3s ease;

    cursor: pointer;

}



.hero-slider-indicators li.active {

    width: 20px;

    border-radius: 10px;

    background-color: #38bdf8;

}



/* Nav Controls */

.hero-slider-nav {

    width: 38px;

    height: 38px;

    top: calc(50% - 30px);

    border-radius: 50%;

    opacity: 0;

    transition: all 0.25s ease;

    z-index: 6;

}



.hero-visual-card:hover .hero-slider-nav {

    opacity: 0.95;

}



.hero-slider-nav.carousel-control-prev {

    left: 12px;

}



.hero-slider-nav.carousel-control-next {

    right: 12px;

}



.hero-slider-nav-icon {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: rgba(9, 30, 79, 0.75);

    backdrop-filter: blur(8px);

    border: 1px solid rgba(255, 255, 255, 0.3);

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.84rem;

    transition: all 0.2s ease;

}



.hero-slider-nav:hover .hero-slider-nav-icon {

    background: #0066cc;

    border-color: #0066cc;

    transform: scale(1.08);

}





/* ==========================================================================

   ATLANTEZS PRIME - FULL HERO SECTION SLIDER STYLING

   ========================================================================== */

.hero-full-slider-section {

    position: relative;

    padding: 30px 0 120px;

    background: linear-gradient(135deg, #091e4f 0%, #0d3885 25%, #1d4ed8 55%, #0284c7 80%, #06b6d4 100%);

    color: #ffffff;

    overflow: hidden;

}



#fullHeroCarousel {

    position: relative;

    z-index: 2;

}



#fullHeroCarousel .carousel-item {

    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);

    min-height: 460px;

}



/* Tab Switcher Pills */

.hero-slide-nav-tabs {

    margin-bottom: 25px;

}



.hero-tabs-pill-wrap {

    background: rgba(255, 255, 255, 0.12);

    border: 1.5px solid rgba(255, 255, 255, 0.28);

    border-radius: 50px;

    padding: 4px;

    display: inline-flex;

    gap: 5px;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.10);

    max-width: 100%;

    overflow-x: auto;

}



.hero-tab-pill {

    border: none;

    background: transparent;

    color: rgba(255, 255, 255, 0.88);

    font-weight: 700;

    font-size: 0.84rem;

    padding: 8px 18px;

    border-radius: 50px;

    transition: all 0.25s ease;

    cursor: pointer;

    white-space: nowrap;

    display: inline-flex;

    align-items: center;

}



.hero-tab-pill:hover {

    color: #ffffff;

    background: rgba(255, 255, 255, 0.18);

}



.hero-tab-pill.active {

    background: #ffffff;

    color: #0066cc !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);

}



/* Side Navigation Arrows */

.hero-full-nav-btn {

    width: 46px;

    height: 46px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.16);

    border: 1.5px solid rgba(255, 255, 255, 0.35);

    color: #ffffff !important;

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    display: flex;

    align-items: center;

    justify-content: center;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    opacity: 0.65;

    transition: all 0.25s ease;

    font-size: 1rem;

    text-decoration: none !important;

}



.hero-full-nav-btn:hover {

    background: #ffffff;

    color: #0066cc !important;

    opacity: 1;

    transform: translateY(-50%) scale(1.1);

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20);

}



.hero-full-nav-btn.prev {

    left: 15px;

}



.hero-full-nav-btn.next {

    right: 15px;

}



@media (max-width: 991.98px) {

    .hero-full-nav-btn {

        display: none !important;

    }

}



/* Price Highlight Tag */

.hero-slide-price-tag {

    background: rgba(255, 255, 255, 0.16);

    border: 1.5px solid rgba(255, 255, 255, 0.35);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    border-radius: 50px;

    padding: 7px 18px;

    color: #ffffff;

    font-size: 1.10rem;

    display: inline-flex;

    align-items: baseline;

}



.hero-slide-price-tag strong {

    font-size: 1.65rem;

    font-weight: 800;

    line-height: 1;

    color: #ffffff;

    margin: 0 2px;

}



.hero-slide-price-tag span {

    font-size: 0.76rem;

    opacity: 0.85;

    margin-left: 4px;

}





/* ==========================================================================

   ATLANTEZS PRIME - CINEMATIC 15s INTERACTIVE HERO SLIDER

   No top tabs, 15-second timer, 3D staggered entrance, progress bar

   ========================================================================== */



.hero-full-slider-section {

    position: relative;

    padding: 45px 0 115px;

    background: linear-gradient(135deg, #091e4f 0%, #0d3885 25%, #1d4ed8 55%, #0284c7 80%, #06b6d4 100%);

    color: #ffffff;

    overflow: hidden;

}



/* Top 15-Second Interactive Progress Bar */

.hero-15s-progress-container {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3.5px;

    background: rgba(255, 255, 255, 0.12);

    z-index: 30;

    overflow: hidden;

}



.hero-15s-progress-bar {

    height: 100%;

    width: 0%;

    background: linear-gradient(90deg, #38bdf8 0%, #00f0ff 50%, #10b981 100%);

    box-shadow: 0 0 12px rgba(56, 189, 248, 0.9);

}



/* Cinematic Carousel Fade & 3D Depth */

#fullHeroCarousel {

    position: relative;

    z-index: 2;

}



#fullHeroCarousel.carousel-fade .carousel-item {

    opacity: 0;

    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;

    transform: scale(0.96);

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    display: block !important;

    pointer-events: none;

    z-index: 1;

}



#fullHeroCarousel.carousel-fade .carousel-item.active {

    opacity: 1;

    transform: scale(1);

    position: relative;

    pointer-events: auto;

    z-index: 2;

}



/* Staggered Element Entrances for the active slide */

@keyframes heroTextGlide {

    0% {

        opacity: 0;

        transform: translateY(28px);

        filter: blur(4px);

    }

    100% {

        opacity: 1;

        transform: translateY(0);

        filter: blur(0);

    }

}



@keyframes heroCardEntrance {

    0% {

        opacity: 0;

        transform: perspective(1000px) rotateY(-8deg) translateY(35px) scale(0.92);

        filter: blur(6px);

    }

    100% {

        opacity: 1;

        transform: perspective(1000px) rotateY(0deg) translateY(0) scale(1);

        filter: blur(0);

    }

}



@keyframes heroBadgePop {

    0% {

        opacity: 0;

        transform: scale(0.6) translateY(20px);

    }

    70% {

        transform: scale(1.08) translateY(-3px);

    }

    100% {

        opacity: 1;

        transform: scale(1) translateY(0);

    }

}



#fullHeroCarousel .carousel-item.active .hero-sky-badge {

    animation: heroTextGlide 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;

}



#fullHeroCarousel .carousel-item.active .hero-sky-title {

    animation: heroTextGlide 0.9s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both;

}



#fullHeroCarousel .carousel-item.active .hero-sky-subtitle {

    animation: heroTextGlide 0.9s 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;

}



#fullHeroCarousel .carousel-item.active .hero-domain-pill,

#fullHeroCarousel .carousel-item.active .hero-slide-price-tag,

#fullHeroCarousel .carousel-item.active .btn {

    animation: heroTextGlide 0.9s 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;

}



#fullHeroCarousel .carousel-item.active .hero-sky-checklist {

    animation: heroTextGlide 0.9s 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;

}



#fullHeroCarousel .carousel-item.active .hero-visual-card {

    animation: heroCardEntrance 1.1s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;

}



#fullHeroCarousel .carousel-item.active .hero-code-badge {

    animation: heroBadgePop 0.85s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;

}



/* Bottom Interactive Indicator Dots */

.hero-bottom-indicators {

    position: absolute;

    bottom: 25px;

    left: 0;

    right: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    z-index: 25;

    margin: 0;

    padding: 0;

    list-style: none;

}



@media (max-width: 768px) {

    .hero-bottom-indicators {

        bottom: 15px;

    }

}



.hero-bottom-indicators li {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.35);

    border: 1.5px solid rgba(255, 255, 255, 0.65);

    cursor: pointer;

    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.hero-bottom-indicators li:hover {

    background: rgba(255, 255, 255, 0.7);

}



.hero-bottom-indicators li.active {

    width: 32px;

    border-radius: 20px;

    background: #ffffff;

    box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);

}



/* ==========================================================================

   Google reCAPTCHA Badge Hide (Prevents badge from overlaying hero/slides)

   ========================================================================== */

.grecaptcha-badge,

.hero-slider-container .grecaptcha-badge,

.hero-search-form .grecaptcha-badge {

    visibility: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

    display: none !important;

    width: 0 !important;

    height: 0 !important;

    position: absolute !important;

    left: -9999px !important;

}



/* ==========================================================================

   ATLANTEZS PRIME - CLIENT AREA DASHBOARD ULTRA PREMIUM STYLES

   ========================================================================== */

.font-size-8 { font-size: 8px !important; }

.font-size-10 { font-size: 10px !important; }

.font-size-11 { font-size: 11px !important; }

.font-size-13 { font-size: 13px !important; }

.font-size-14 { font-size: 14px !important; }

.font-size-15 { font-size: 15px !important; }

.font-size-16 { font-size: 16px !important; }

.font-size-18 { font-size: 18px !important; }

.font-size-24 { font-size: 24px !important; }

.font-size-32 { font-size: 32px !important; }

.font-weight-500 { font-weight: 500 !important; }

.font-weight-600 { font-weight: 600 !important; }



.bg-soft-success { background: #dcfce7 !important; color: #15803d !important; }

.bg-soft-warning { background: #fef3c7 !important; color: #b45309 !important; }

.bg-soft-danger { background: #fee2e2 !important; color: #b91c1c !important; }

.bg-soft-primary { background: #dbeafe !important; color: #1d4ed8 !important; }



.text-purple { color: #8b5cf6 !important; }

.text-cyan { color: #06b6d4 !important; }



.theme-indigo {

    background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%) !important;

    border-color: #ddd6fe !important;

}



.theme-amber {

    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%) !important;

    border-color: #fde68a !important;

}



.hover-lift {

    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

.hover-lift:hover {

    transform: translateY(-2.5px) !important;

    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08) !important;

}



.animate-pulse {

    animation: atlPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

}

@keyframes atlPulse {

    0%, 100% { opacity: 1; transform: scale(1); }

    50% { opacity: 0.88; transform: scale(1.02); }

}



.modern-stat-card {

    border-radius: 16px !important;

    border: 1px solid #e2e8f0 !important;

    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;

    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

.modern-stat-card:hover {

    transform: translateY(-3px) !important;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;

}



/* ==========================================================================

   ATLANTEZS PRIME - KNOWLEDGEBASE & QUICK GUIDE CARDS

   ========================================================================== */

.guide-card {

    background: #ffffff !important;

    border: 1.5px solid #e2e8f0 !important;

    border-radius: 16px !important;

    padding: 18px !important;

    position: relative;

    overflow: hidden;

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}

.guide-card:hover {

    border-color: #0284c7 !important;

    transform: translateY(-4px) !important;

    box-shadow: 0 12px 30px rgba(2, 132, 199, 0.12) !important;

}

.guide-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;

}

.guide-icon-badge {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 19px;

    transition: transform 0.25s ease;

}

.guide-card:hover .guide-icon-badge {

    transform: scale(1.08);

}

.badge-cpanel { background: #eff6ff !important; color: #2563eb !important; border: 1px solid #dbeafe; }

.badge-mail { background: #ecfdf5 !important; color: #059669 !important; border: 1px solid #d1fae5; }

.badge-dns { background: #f5f3ff !important; color: #7c3aed !important; border: 1px solid #ede9fe; }

.badge-ssl { background: #fffbeb !important; color: #d97706 !important; border: 1px solid #fef3c7; }



.guide-badge-pill {

    font-size: 11px;

    font-weight: 700;

    color: #64748b;

    background: #f1f5f9;

    padding: 3px 9px;

    border-radius: 20px;

}

.guide-card-title {

    color: #0f172a !important;

    font-size: 14.5px !important;

    font-weight: 800 !important;

    margin-bottom: 5px;

    transition: color 0.2s;

}

.guide-card:hover .guide-card-title {

    color: #0284c7 !important;

}

.guide-card-desc {

    color: #64748b !important;

    font-size: 12px !important;

    line-height: 1.55;

    margin-bottom: 14px;

}

.guide-card-btn {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 7px 12px;

    border-radius: 10px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    color: #0284c7;

    font-size: 12px;

    font-weight: 700;

    transition: all 0.2s ease;

    width: 100%;

}

.guide-card:hover .guide-card-btn {

    background: #0284c7 !important;

    border-color: #0284c7 !important;

    color: #ffffff !important;

}

.guide-card-btn i {

    font-size: 11px;

    transition: transform 0.2s ease;

}

.guide-card:hover .guide-card-btn i {

    transform: translateX(4px);

}





/* ==========================================================================

   ATLANTEZS PRIME - CLIENT DASHBOARD DOMAIN SEARCH & UNPAID ALERT

   ========================================================================== */

.client-dash-unpaid-alert {

    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);

    border: 1.5px solid #f59e0b;

    border-radius: 16px;

    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.08);

}



.alert-unpaid-icon {

    background: #fde68a;

    color: #b45309;

}



.alert-unpaid-title {

    color: #92400e !important;

}



.alert-unpaid-sub {

    color: #b45309 !important;

}



.alert-unpaid-body {

    color: #78350f !important;

}



.btn-outline-unpaid {

    background: #ffffff;

    border: 1.5px solid #cbd5e1;

    color: #0f172a;

    transition: all 0.2s ease;

}



.btn-outline-unpaid:hover {

    background: #0f172a;

    border-color: #0f172a;

    color: #ffffff !important;

}



.client-dash-domain-card {

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 16px;

    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);

}



.atl-dash-domain-search-wrap {

    display: flex;

    align-items: center;

    background: #f8fafc;

    border: 1.5px solid #cbd5e1;

    border-radius: 50px;

    height: 48px;

    padding: 0 16px;

    gap: 12px;

    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

    box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.02);

}



.atl-dash-domain-search-wrap:focus-within {

    border-color: #0284c7;

    background: #ffffff;

    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.02);

}



.atl-dash-domain-search-wrap .search-globe-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: #64748b;

    font-size: 1.05rem;

    flex-shrink: 0;

    transition: color 0.2s ease;

}



.atl-dash-domain-search-wrap:focus-within .search-globe-icon {

    color: #0284c7;

}



.atl-dash-domain-search-wrap .dash-domain-search-input {

    border: none !important;

    outline: none !important;

    background: transparent !important;

    box-shadow: none !important;

    font-size: 0.94rem !important;

    font-weight: 500 !important;

    color: #0f172a !important;

    width: 100% !important;

    height: 100% !important;

    padding: 0 !important;

    margin: 0 !important;

    border-radius: 0 !important;

}



.atl-dash-domain-search-wrap .dash-domain-search-input::placeholder {

    color: #94a3b8 !important;

    font-weight: 400;

}



.domain-quick-divider {

    border-top: 1px solid #f1f5f9;

}



.domain-tld-pill {

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    color: #0f172a;

    font-size: 0.78rem;

    font-weight: 600;

    padding: 4px 10px;

    border-radius: 50px;

}



/* Client Dashboard Semantic Containers (Light Mode) */

.client-dash-verify-box {

    background: #f8fafc;

    border: 1px solid #edf2f7;

    border-radius: 12px;

    font-size: 0.84rem;

}



.avatar-online-dot {

    border: 3px solid #ffffff;

}



.client-dash-main-card,

.client-dash-sub-card {

    border: 1px solid #e2e8f0 !important;

    border-radius: 16px !important;

    overflow: hidden;

}



.client-dash-card-header {

    background: #ffffff;

    border-bottom: 1px solid #edf2f7;

}



.dash-icon-box.blue-box {

    background: #eff6ff;

    color: #1d4ed8;

}



.dash-icon-box.cyan-box {

    background: #e0f2fe;

    color: #0284c7;

}



.client-dash-service-item {

    background: #f8fafc;

    border: 1.5px solid #edf2f7;

    border-radius: 14px;

    transition: all 0.2s ease;

}



.client-dash-service-item:hover {

    border-color: #cbd5e1;

    transform: translateY(-2px);

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);

}



.service-item-footer {

    border-top: 1px solid #edf2f7 !important;

}



.client-dash-empty-promo {

    background: #f8fafc;

    border: 1px solid #edf2f7;

    border-radius: 14px;

}





/* ==========================================================================

   ATLANTEZS PRIME - ACCOUNT TYPE SELECTOR (BIREYSEL & KURUMSAL)

   ========================================================================== */

.account-type-selector {

    margin-bottom: 22px;

}

.account-type-option {

    display: block;

    cursor: pointer;

    margin-bottom: 0;

    user-select: none;

    position: relative;

}

.account-type-card {

    border: 2px solid #e2e8f0;

    border-radius: 14px;

    padding: 12px 14px;

    background: #ffffff;

    display: flex;

    align-items: center;

    gap: 12px;

    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;

}

.account-type-option:hover .account-type-card {

    border-color: #93c5fd;

    background: #f8fafc;

}

.account-type-option.active .account-type-card {

    border-color: #0284c7;

    background: #f0f9ff;

    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.12);

}

.account-type-card .type-icon {

    width: 40px;

    height: 40px;

    border-radius: 11px;

    background: #f1f5f9;

    color: #64748b;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

    transition: all 0.25s ease;

    flex-shrink: 0;

}

.account-type-option.active .account-type-card .type-icon {

    background: linear-gradient(135deg, #1d4ed8 0%, #0284c7 100%);

    color: #ffffff;

    box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);

}

.account-type-card .type-text {

    flex-grow: 1;

    min-width: 0;

}

.account-type-card .type-title {

    display: block;

    font-weight: 800;

    font-size: 14px;

    color: #0f172a;

    line-height: 1.2;

    margin-bottom: 2px;

}

.account-type-card .type-desc {

    display: block;

    font-size: 11px;

    color: #64748b;

    line-height: 1.25;

}

.account-type-card .type-check {

    color: #cbd5e1;

    font-size: 17px;

    transition: all 0.2s ease;

    flex-shrink: 0;

}

.account-type-option.active .account-type-card .type-check {

    color: #0284c7;

}







/* ==========================================================================

   ATLANTEZS PRIME 2.0 - PHASE 1: AKILLI WHATSAPP & SATIS ASISTANI BALONU

   ========================================================================== */

.atl-support-prompt {

    position: absolute;

    bottom: calc(100% + 14px);

    right: 0;

    width: 290px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 18px;

    padding: 14px 16px;

    box-shadow: 0 16px 35px -6px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(0, 102, 204, 0.05);

    cursor: pointer;

    z-index: 1050;

    opacity: 0;

    visibility: hidden;

    transform: translateY(12px) scale(0.95);

    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    pointer-events: none;

}

.atl-support-prompt.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0) scale(1);

    pointer-events: auto;

}

.atl-prompt-close {

    position: absolute;

    top: 8px;

    right: 8px;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    border: none;

    background: #f1f5f9;

    color: #64748b;

    font-size: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.2s;

    line-height: 1;

}

.atl-prompt-close:hover {

    background: #e2e8f0;

    color: #0f172a;

}

.atl-prompt-inner {

    display: flex;

    align-items: center;

    gap: 12px;

}

.atl-prompt-avatar {

    width: 42px;

    height: 42px;

    border-radius: 14px;

    background: linear-gradient(135deg, #10b981 0%, #059669 100%);

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    flex-shrink: 0;

    position: relative;

    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);

}

.prompt-online-dot {

    position: absolute;

    bottom: -2px;

    right: -2px;

    width: 11px;

    height: 11px;

    border-radius: 50%;

    background: #22c55e;

    border: 2px solid #ffffff;

}

.atl-prompt-text {

    flex: 1;

    min-width: 0;

}

.prompt-title {

    display: block;

    font-size: 0.85rem;

    font-weight: 700;

    color: #0f172a;

    line-height: 1.25;

    margin-bottom: 2px;

}

.prompt-desc {

    display: block;

    font-size: 0.74rem;

    color: #64748b;

    line-height: 1.3;

}

.atl-prompt-arrow {

    position: absolute;

    bottom: -8px;

    right: 26px;

    width: 14px;

    height: 14px;

    background: #ffffff;

    border-right: 1px solid #e2e8f0;

    border-bottom: 1px solid #e2e8f0;

    transform: rotate(45deg);

}



/* Quick Department Selector Pills */

.hub-dept-section {

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    padding: 10px 12px;

}

.hub-dept-heading {

    font-size: 0.78rem;

    color: #0f172a;

    margin-bottom: 8px;

}

.hub-dept-buttons {

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.hub-dept-pill {

    display: flex;

    align-items: center;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    padding: 7px 10px;

    text-decoration: none !important;

    transition: all 0.2s ease;

}

.hub-dept-pill:hover {

    background: #f0fdf4;

    border-color: #86efac;

    transform: translateX(3px);

}

.dept-emoji {

    font-size: 15px;

    margin-right: 8px;

}

.dept-label {

    font-size: 0.8rem;

    font-weight: 600;

    color: #0f172a;

}

.hub-divider {

    position: relative;

    text-align: center;

    margin: 12px 0;

}

.hub-divider::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    height: 1px;

    background: #e2e8f0;

}

.hub-divider span {

    position: relative;

    background: #ffffff;

    padding: 0 10px;

    font-size: 0.68rem;

    font-weight: 700;

    color: #94a3b8;

    letter-spacing: 0.5px;

}



/* ==========================================================================

   ATLANTEZS PRIME 2.0 - PHASE 2: HIZMETLERIM GRID KARTLARI & CPANEL SSO

   ========================================================================== */

.atl-view-toggle .btn {

    border-color: #cbd5e1;

    color: #475569;

    font-weight: 600;

    font-size: 0.82rem;

    padding: 5px 12px;

    border-radius: 8px;

    transition: all 0.2s;

}

.atl-view-toggle .btn.active, .atl-view-toggle .btn:hover {

    background: #0066cc;

    border-color: #0066cc;

    color: #ffffff;

}

.atl-service-card {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    overflow: hidden;

    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}

.atl-service-card:hover {

    border-color: #93c5fd;

    transform: translateY(-4px);

    box-shadow: 0 12px 30px -4px rgba(0, 102, 204, 0.12) !important;

}

.service-type-icon {

    width: 38px;

    height: 38px;

    border-radius: 11px;

    background: #eff6ff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

    flex-shrink: 0;

}

.service-card-name {

    font-size: 0.95rem;

    font-family: var(--font-heading, inherit);

}

.service-domain-box {

    transition: background 0.2s;

}

.service-domain-box:hover {

    background: #f1f5f9 !important;

}

.service-domain-text {

    font-size: 0.88rem;

    text-decoration: none !important;

}



/* ==========================================================================

   ATLANTEZS PRIME 2.0 - PHASE 3: SEPET & CHECKOUT MODERNIZASYONU

   ========================================================================== */

.atl-trust-strip {

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    padding: 14px;

    margin-top: 16px;

}

.trust-strip-title {

    font-size: 0.74rem;

    font-weight: 700;

    color: #64748b;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin-bottom: 10px;

    text-align: center;

}

.trust-badges-row {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

}

.trust-badge-pill {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    padding: 5px 10px;

    font-size: 0.74rem;

    font-weight: 600;

    color: #334155;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

}

.trust-badge-pill i {

    font-size: 13px;

}

.trust-badge-troy {

    color: #0082c9;

    font-weight: 800;

}

@media (min-width: 992px) {

    .order-summary-sticky, #orderSummary {

        position: sticky;

        top: 90px;

        z-index: 99;

    }

}



/* ==========================================================================

   ATLANTEZS PRIME 2.0 - PHASE 4: HIZLI DOMAIN SORGULAMA CHIPLERI & FLY TO CART

   ========================================================================== */

.domain-quick-chips {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 12px;

}

.domain-chip-btn {

    background: rgba(255, 255, 255, 0.14);

    border: 1px solid rgba(255, 255, 255, 0.28);

    backdrop-filter: blur(8px);

    color: #ffffff;

    font-size: 0.78rem;

    font-weight: 600;

    padding: 4px 12px;

    border-radius: 20px;

    cursor: pointer;

    transition: all 0.2s;

    display: inline-flex;

    align-items: center;

    gap: 5px;

}

.domain-chip-btn:hover, .domain-chip-btn.active {

    background: #ffffff;

    color: #0066cc;

    border-color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

}

.domain-chip-btn .chip-price {

    font-weight: 800;

    opacity: 0.85;

}



/* ==========================================================================

   ATLANTEZS PRIME 2.0 - PHASE 5: GECE & GUNDUZ MODU (DARK / LIGHT MODE)

   ========================================================================== */

.btn-theme-mode {

    width: 38px;

    height: 38px;

    border-radius: 11px;

    border: 1px solid #e2e8f0;

    background: #ffffff;

    color: #475569;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 15px;

    cursor: pointer;

    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}

.btn-theme-mode:hover {

    background: #f1f5f9;

    color: #0066cc;

    border-color: #cbd5e1;

    transform: scale(1.05);

}



[data-theme="dark"] {

    --bg-main: #090e17;

    --bg-card: #131d33;

    --bg-subtle: #1e293b;

    --border-color: #1e293b;

    --text-primary: #f8fafc;

    --text-secondary: #94a3b8;

    color-scheme: dark;

}



[data-theme="dark"] body {

    background-color: #090e17 !important;

    color: #e2e8f0 !important;

}



/* Header, Navbar & Logo */

[data-theme="dark"] .atl-top-promo-bar {

    background: #060b14 !important;

    border-bottom-color: #1e293b !important;

}



[data-theme="dark"] .atl-header-sticky,

[data-theme="dark"] #header,

[data-theme="dark"] .atl-header-top-bar {

    background-color: #0f172a !important;

    border-bottom-color: #1e293b !important;

}



[data-theme="dark"] .logo-img,

[data-theme="dark"] .atl-brand-logo .logo-img,

[data-theme="dark"] .footer-brand-logo img {

    filter: brightness(0) invert(1) !important;

}



[data-theme="dark"] .logo-text,

[data-theme="dark"] .atl-brand-logo .logo-text {

    color: #ffffff !important;

}



[data-theme="dark"] .atl-nav-link {

    color: #f1f5f9 !important;

}



[data-theme="dark"] .atl-nav-link:hover {

    color: #38bdf8 !important;

}



[data-theme="dark"] .btn-theme-mode {

    background: #1e293b !important;

    border-color: #334155 !important;

    color: #facc15 !important;

}



[data-theme="dark"] .btn-theme-mode:hover {

    background: #24344d !important;

    border-color: #facc15 !important;

}



/* User Account & Action Buttons in Header */

[data-theme="dark"] .btn-hesabim-premium,

[data-theme="dark"] .btn-hesabim {

    background: #1e293b !important;

    border: 1.5px solid #334155 !important;

    color: #ffffff !important;

}



[data-theme="dark"] .btn-hesabim-premium:hover,

[data-theme="dark"] .btn-hesabim:hover {

    background: #24344d !important;

    border-color: #38bdf8 !important;

}



[data-theme="dark"] .user-trigger-name {

    color: #ffffff !important;

}



[data-theme="dark"] .btn-icon-nav {

    background: #1e293b !important;

    border-color: #334155 !important;

    color: #94a3b8 !important;

}



[data-theme="dark"] .btn-icon-nav:hover {

    background: #24344d !important;

    border-color: #38bdf8 !important;

    color: #38bdf8 !important;

}



/* Mega Menu Dropdown Dark Mode */

[data-theme="dark"] .mega-panel {

    background: #0f172a !important;

    border-top-color: #0284c7 !important;

    border-bottom: 1px solid #1e293b !important;

    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.75) !important;

}



[data-theme="dark"] .mega-col-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .mega-card {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

}



[data-theme="dark"] .mega-card:hover {

    background: #1e293b !important;

    border-color: #0284c7 !important;

}



[data-theme="dark"] .mega-card-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .mega-card:hover .mega-card-title {

    color: #38bdf8 !important;

}



[data-theme="dark"] .mega-card-desc {

    color: #94a3b8 !important;

}



[data-theme="dark"] .mega-card-icon {

    background: #1e293b !important;

    color: #38bdf8 !important;

    border-color: #334155 !important;

}



[data-theme="dark"] .mega-card:hover .mega-card-icon {

    background: #0284c7 !important;

    color: #ffffff !important;

    border-color: #0284c7 !important;

}



[data-theme="dark"] .badge-brand-panel {

    background: #1e293b !important;

    border-color: #334155 !important;

}



/* Hero Domain Search Bar & Quick Chips */

[data-theme="dark"] .hero-domain-pill,

[data-theme="dark"] .hero-domain-bar {

    background: #ffffff !important;

    border-color: rgba(255, 255, 255, 0.9) !important;

    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.5) !important;

}



[data-theme="dark"] .hero-domain-pill input[type="text"],

[data-theme="dark"] .hero-domain-bar input[type="text"],

[data-theme="dark"] #frmDomainHomepage input[name="domain"] {

    background: transparent !important;

    border: none !important;

    outline: none !important;

    box-shadow: none !important;

    color: #0f172a !important;

}



[data-theme="dark"] .hero-domain-pill input::placeholder,

[data-theme="dark"] .hero-domain-bar input::placeholder {

    color: #64748b !important;

}



[data-theme="dark"] .hero-tld-chip {

    background: #e0f2fe !important;

    color: #0284c7 !important;

    border: 1px solid #bae6fd !important;

}



[data-theme="dark"] .domain-chip-btn {

    background: rgba(15, 23, 42, 0.6) !important;

    border-color: rgba(255, 255, 255, 0.15) !important;

    color: #f8fafc !important;

}



[data-theme="dark"] .domain-chip-btn:hover,

[data-theme="dark"] .domain-chip-btn.active {

    background: #0284c7 !important;

    border-color: #38bdf8 !important;

    color: #ffffff !important;

}



/* Oceanic Wave SVG Transition */

[data-theme="dark"] .wave-parallax > use:nth-child(1) {

    fill: rgba(30, 41, 59, 0.25) !important;

}



[data-theme="dark"] .wave-parallax > use:nth-child(2) {

    fill: rgba(30, 41, 59, 0.45) !important;

}



[data-theme="dark"] .wave-parallax > use:nth-child(3) {

    fill: rgba(30, 41, 59, 0.70) !important;

}



[data-theme="dark"] .wave-parallax > use:nth-child(4),

[data-theme="dark"] .hero-wave-shape svg use:nth-child(4),

[data-theme="dark"] .hero-waves-anim use:nth-child(4) {

    fill: #090e17 !important;

}



/* Floating Hero Product Cards */

[data-theme="dark"] .hero-floating-products-section {

    background: transparent !important;

}



[data-theme="dark"] .hero-product-card {

    background: #131d33 !important;

    border: 1.5px solid #1e293b !important;

    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.35) !important;

}



[data-theme="dark"] .hero-product-card:hover {

    border-color: #0284c7 !important;

    box-shadow: 0 24px 50px -10px rgba(2, 132, 199, 0.25) !important;

}



[data-theme="dark"] .hero-product-card.featured {

    border-color: #0284c7 !important;

}



[data-theme="dark"] .h-card-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .h-card-desc {

    color: #94a3b8 !important;

}



[data-theme="dark"] .h-card-features {

    background: #0f172a !important;

    border: 1px solid #1e293b !important;

    color: #cbd5e1 !important;

}



[data-theme="dark"] .h-price-val {

    color: #f8fafc !important;

}



[data-theme="dark"] .h-cycle {

    color: #94a3b8 !important;

}



[data-theme="dark"] .btn-h-card {

    background: #1e293b !important;

    border: 1.5px solid #334155 !important;

    color: #f8fafc !important;

}



[data-theme="dark"] .btn-h-card:hover {

    background: #0284c7 !important;

    border-color: #0284c7 !important;

    color: #ffffff !important;

}



/* Why Choose Skyhost / AtlanteszNET Section */

[data-theme="dark"] .why-choose-skyhost-section {

    background: #090e17 !important;

}



[data-theme="dark"] .why-skyhost-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .why-skyhost-sub {

    color: #94a3b8 !important;

}



[data-theme="dark"] .why-item-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .why-item-desc {

    color: #94a3b8 !important;

}



[data-theme="dark"] .why-icon-circle {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .why-item:hover .why-icon-circle {

    background: #0284c7 !important;

    border-color: #0284c7 !important;

    color: #ffffff !important;

}



[data-theme="dark"] .why-bg-worldmap {

    filter: invert(1) brightness(0.6);

    opacity: 0.04 !important;

}



/* Domain TLD Showcase Section */

[data-theme="dark"] .domain-tld-showcase-section {

    background: #090e17 !important;

}



[data-theme="dark"] .tld-card {

    background: #131d33 !important;

    border: 1.5px solid #1e293b !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;

}



[data-theme="dark"] .tld-card:hover {

    border-color: #0284c7 !important;

    box-shadow: 0 16px 30px -8px rgba(2, 132, 199, 0.2) !important;

}



[data-theme="dark"] .tld-card.featured {

    background: linear-gradient(180deg, #162544 0%, #131d33 60%) !important;

    border-color: #0284c7 !important;

}



[data-theme="dark"] .tld-card.featured-tr {

    background: linear-gradient(180deg, #2a1824 0%, #131d33 60%) !important;

    border-color: #f87171 !important;

}



[data-theme="dark"] .tld-ext {

    color: #f8fafc !important;

}



[data-theme="dark"] .tld-price {

    color: #38bdf8 !important;

}



[data-theme="dark"] .tld-price small {

    color: #94a3b8 !important;

}



[data-theme="dark"] .btn-tld-action {

    background: #1e293b !important;

    border: 1px solid #334155 !important;

    color: #f8fafc !important;

}



[data-theme="dark"] .btn-tld-action:hover {

    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;

    color: #ffffff !important;

}



/* Enterprise Tech Stack & Partners */

[data-theme="dark"] .tech-stack-section {

    background: #0f172a !important;

    border-color: #1e293b !important;

}



[data-theme="dark"] .tech-logo-card {

    background: #131d33 !important;

    border: 1.5px solid #1e293b !important;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;

}



[data-theme="dark"] .tech-logo-card:hover {

    background: #162544 !important;

    border-color: #38bdf8 !important;

}



[data-theme="dark"] .tech-logo-card img {

    filter: brightness(1.25) contrast(1.1);

}



/* Hosting Packages (Pricing Section) */

[data-theme="dark"] .pricing-section {

    background: #090e17 !important;

}



[data-theme="dark"] .pricing-tabs-wrapper {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

}



[data-theme="dark"] .pricing-nav-pills .nav-link {

    color: #94a3b8 !important;

}



[data-theme="dark"] .pricing-nav-pills .nav-link:hover {

    color: #ffffff !important;

    background: #1e293b !important;

}



[data-theme="dark"] .pricing-nav-pills .nav-link.active {

    background: #0066cc !important;

    color: #ffffff !important;

}



[data-theme="dark"] .billing-toggle-pill {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

}



[data-theme="dark"] .btn-billing-opt {

    color: #94a3b8 !important;

}



[data-theme="dark"] .btn-billing-opt.active {

    background: #0066cc !important;

    color: #ffffff !important;

}



[data-theme="dark"] .pricing-card {

    background: #131d33 !important;

    border: 1.5px solid #1e293b !important;

    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3) !important;

}



[data-theme="dark"] .pricing-card:hover {

    border-color: #0066cc !important;

    box-shadow: 0 20px 45px -10px rgba(0, 102, 204, 0.25) !important;

}



[data-theme="dark"] .pricing-card.featured {

    border-color: #0284c7 !important;

    box-shadow: 0 24px 50px -10px rgba(2, 132, 199, 0.3) !important;

}



[data-theme="dark"] .pricing-plan-icon-wrap {

    background: #1e293b !important;

    border: 1px solid #334155 !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .pricing-plan-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .pricing-plan-tagline {

    color: #94a3b8 !important;

}



[data-theme="dark"] .pricing-price-box {

    background: #0f172a !important;

    border: 1px solid #1e293b !important;

}



[data-theme="dark"] .price-amount {

    color: #f8fafc !important;

}



[data-theme="dark"] .price-decimal {

    color: #cbd5e1 !important;

}



[data-theme="dark"] .price-cycle {

    color: #94a3b8 !important;

}



[data-theme="dark"] .price-annual-hint {

    background: #052e16 !important;

    border: 1px solid #166534 !important;

    color: #86efac !important;

}



[data-theme="dark"] .pricing-card:not(.featured) .btn-atl-outline {

    background: #1e293b !important;

    border: 1.5px solid #334155 !important;

    color: #f8fafc !important;

}



[data-theme="dark"] .pricing-card:not(.featured) .btn-atl-outline:hover {

    background: #0066cc !important;

    border-color: #0066cc !important;

    color: #ffffff !important;

}



[data-theme="dark"] .pricing-features-divider::before {

    background: #1e293b !important;

}



[data-theme="dark"] .pricing-features-divider span {

    background: #131d33 !important;

    color: #64748b !important;

}



[data-theme="dark"] .pricing-card ul.pricing-feature-list li {

    color: #cbd5e1 !important;

    border-bottom: 1px solid #1e293b !important;

}



[data-theme="dark"] .pricing-card-footer-trust {

    border-top: 1px solid #1e293b !important;

    color: #94a3b8 !important;

}



/* Interactive VDS Cloud Configurator */

[data-theme="dark"] .vds-calculator-section {

    background: #090e17 !important;

    border-color: #1e293b !important;

}



[data-theme="dark"] .vds-calc-box {

    background: #131d33 !important;

    border: 1.5px solid #1e293b !important;

}



[data-theme="dark"] .slider-label {

    color: #f8fafc !important;

}



[data-theme="dark"] .slider-display-val {

    background: #1e293b !important;

    border: 1px solid #334155 !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .custom-slider {

    background: #1e293b !important;

}



[data-theme="dark"] .slider-ticks {

    color: #64748b !important;

}



[data-theme="dark"] .btn-os-pill {

    background: #1e293b !important;

    border: 1.5px solid #334155 !important;

    color: #cbd5e1 !important;

}



[data-theme="dark"] .btn-os-pill:hover,

[data-theme="dark"] .btn-os-pill.active {

    background: #0284c7 !important;

    border-color: #0284c7 !important;

    color: #ffffff !important;

}



[data-theme="dark"] .vds-summary-body {

    background: #131d33 !important;

}



[data-theme="dark"] .vds-spec-list li {

    border-bottom: 1px dashed #1e293b !important;

}



[data-theme="dark"] .spec-name {

    color: #94a3b8 !important;

}



[data-theme="dark"] .spec-value {

    color: #f8fafc !important;

}



[data-theme="dark"] .vds-calc-price {

    color: #f8fafc !important;

}



/* Softaculous / WordPress 1-Click Section */

[data-theme="dark"] .app-install-section {

    background: #090e17 !important;

}



[data-theme="dark"] .app-badge-pill {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

    color: #f8fafc !important;

}



[data-theme="dark"] .app-installer-visual-wrap img {

    border-color: #1e293b !important;

}



/* Global & Domestic Infrastructure Map */

[data-theme="dark"] .infrastructure-section {

    background: #090e17 !important;

}



[data-theme="dark"] .cyber-network-wrapper {

    background: #060b14 url('../img/cyber_world_dark.webp') no-repeat center center / cover !important;

    border-color: #1e293b !important;

}



[data-theme="dark"] .cyber-network-wrapper::before {

    background: linear-gradient(180deg, rgba(6, 11, 20, 0.8) 0%, rgba(6, 11, 20, 0.2) 25%, rgba(6, 11, 20, 0.2) 75%, rgba(6, 11, 20, 0.85) 100%) !important;

}



[data-theme="dark"] .cyber-badge {

    background: rgba(15, 23, 42, 0.94) !important;

    border-color: #0284c7 !important;

    color: #f8fafc !important;

}



[data-theme="dark"] .cyber-bottom-bar {

    background: rgba(15, 23, 42, 0.94) !important;

    border-color: #1e293b !important;

}



[data-theme="dark"] .cyber-metric-val {

    color: #f8fafc !important;

}



[data-theme="dark"] .cyber-metric-label {

    color: #94a3b8 !important;

}



[data-theme="dark"] .cyber-metric-icon {

    background: #1e293b !important;

    color: #38bdf8 !important;

}



/* Testimonials, FAQ & Newsletter */

[data-theme="dark"] .testimonial-card {

    background: #131d33 !important;

    border: 1.5px solid #1e293b !important;

}



[data-theme="dark"] .testimonial-quote {

    color: #cbd5e1 !important;

}



[data-theme="dark"] .testimonial-user {

    border-top-color: #1e293b !important;

}



[data-theme="dark"] .user-info h6 {

    color: #f8fafc !important;

}



[data-theme="dark"] .user-info span {

    color: #94a3b8 !important;

}



[data-theme="dark"] .faq-accordion-section {

    background: #090e17 !important;

}



[data-theme="dark"] .faq-item {

    background: #131d33 !important;

    border: 1.5px solid #1e293b !important;

}



[data-theme="dark"] .faq-item:hover,

[data-theme="dark"] .faq-item.active {

    border-color: #0284c7 !important;

}



[data-theme="dark"] .faq-q-text {

    color: #f8fafc !important;

}



[data-theme="dark"] .faq-answer p {

    color: #94a3b8 !important;

}



[data-theme="dark"] .faq-toggle-icon {

    background: #1e293b !important;

    color: #94a3b8 !important;

}



[data-theme="dark"] .faq-item.active .faq-toggle-icon {

    background: #0284c7 !important;

    color: #ffffff !important;

}



[data-theme="dark"] .newsletter-card {

    background: #131d33 !important;

    border: 1.5px solid #1e293b !important;

}



/* Footer Dark Mode */

[data-theme="dark"] .atl-cyber-footer,

[data-theme="dark"] #footer,

[data-theme="dark"] .atl-footer,

[data-theme="dark"] .footer {

    background: #060b14 !important;

    border-top: 1px solid #1e293b !important;

    color: #94a3b8 !important;

}



[data-theme="dark"] .atl-cyber-footer h5,

[data-theme="dark"] .footer-title,

[data-theme="dark"] .footer-col-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .atl-cyber-footer ul li a,

[data-theme="dark"] .footer-links a,

[data-theme="dark"] .footer-links li a {

    color: #94a3b8 !important;

}



[data-theme="dark"] .atl-cyber-footer ul li a:hover,

[data-theme="dark"] .footer-links a:hover,

[data-theme="dark"] .footer-links li a:hover {

    color: #38bdf8 !important;

}



[data-theme="dark"] .footer-desc {

    color: #94a3b8 !important;

}



[data-theme="dark"] .footer-brand-logo span {

    color: #ffffff !important;

}



[data-theme="dark"] .footer-bottom-bar,

[data-theme="dark"] .footer-bottom {

    background: #04080f !important;

    border-top-color: #1e293b !important;

    color: #64748b !important;

}



[data-theme="dark"] .atinet-payment-logos img {

    filter: brightness(1.2) contrast(1.1);

}



/* Category Showcase & Internal Landing Pages */

[data-theme="dark"] #pricing-plans,

[data-theme="dark"] .showcase-pricing-section {

    background: #090e17 !important;

    border-color: #1e293b !important;

}



[data-theme="dark"] .showcase-heading {

    color: #f8fafc !important;

}



[data-theme="dark"] .showcase-usp-section {

    background: #060b14 !important;

    border-top: 1px solid #1e293b !important;

    border-bottom: 1px solid #1e293b !important;

}



[data-theme="dark"] .showcase-usp-card {

    background: #131d33 !important;

    border-color: #1e293b !important;

}



[data-theme="dark"] .showcase-usp-icon {

    background: #1e293b !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .showcase-card-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .showcase-specs-section {

    background: #090e17 !important;

}



[data-theme="dark"] .showcase-table-card {

    background: #131d33 !important;

    border-color: #1e293b !important;

}



[data-theme="dark"] .showcase-table-card table thead th {

    background-color: #0f172a !important;

    color: #f8fafc !important;

    border-color: #1e293b !important;

}



[data-theme="dark"] .showcase-table-card table tbody td {

    background-color: #131d33 !important;

    border-color: #1e293b !important;

    color: #cbd5e1 !important;

}



[data-theme="dark"] .showcase-table-card table tbody td.font-weight-bold {

    color: #f8fafc !important;

}



[data-theme="dark"] .showcase-faq-section {

    background: #060b14 !important;

    border-top: 1px solid #1e293b !important;

}



[data-theme="dark"] .showcase-faq-card {

    background: #131d33 !important;

    border: 1.5px solid #1e293b !important;

}



[data-theme="dark"] .showcase-faq-header {

    background: #131d33 !important;

    border-bottom: 1px solid #1e293b !important;

}



[data-theme="dark"] .showcase-faq-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .showcase-faq-body {

    background: #0f172a !important;

    border-top: 1px solid #1e293b !important;

    color: #cbd5e1 !important;

}



/* ==========================================================================

   WHMCS CLIENT AREA, PORTAL, KB, TABLES & DASHBOARD (DARK MODE ENGINE)

   ========================================================================== */



/* Main Body & Backgrounds */

[data-theme="dark"] #main-body,

[data-theme="dark"] .client-dash-main-section,

[data-theme="dark"] body.invoice-view-page {

    background: #090e17 !important;

    color: #e2e8f0 !important;

}



/* Base Cards & Containers */

[data-theme="dark"] .atl-portal-card,

[data-theme="dark"] .atl-service-card,

[data-theme="dark"] .atl-dash-card,

[data-theme="dark"] .stat-card-modern,

[data-theme="dark"] .modern-stat-card,

[data-theme="dark"] .atl-invoice-card,

[data-theme="dark"] .support-hub-card,

[data-theme="dark"] .atl-support-prompt,

[data-theme="dark"] .account-type-card,

[data-theme="dark"] .client-dash-profile-card,

[data-theme="dark"] .client-dash-nav-card,

[data-theme="dark"] .client-dash-guides-card,

[data-theme="dark"] .service-hero-card,

[data-theme="dark"] .service-metric-card,

[data-theme="dark"] .service-module-panel,

[data-theme="dark"] .invoice-toolbar,

[data-theme="dark"] .invoice-paper-card,

[data-theme="dark"] .tiles .tile,

[data-theme="dark"] .card,

[data-theme="dark"] .modal-content {

    background: #131d33 !important;

    border-color: #1e293b !important;

    color: #f8fafc !important;

}



[data-theme="dark"] .atl-portal-card-header,

[data-theme="dark"] .service-card-header,

[data-theme="dark"] .service-card-footer,

[data-theme="dark"] .modal-header,

[data-theme="dark"] .modal-footer,

[data-theme="dark"] .card-header,

[data-theme="dark"] .card-footer {

    background: #0f172a !important;

    border-color: #1e293b !important;

    color: #f8fafc !important;

}



/* User Account Dropdown & Header Controls */

[data-theme="dark"] .user-dropdown-card,

[data-theme="dark"] .atl-user-dropdown .user-dropdown-card {

    background: #131d33 !important;

    border: 1.5px solid #1e293b !important;

    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px #1e293b !important;

}



[data-theme="dark"] .user-card-header {

    background: #0f172a !important;

    border-bottom: 1px solid #1e293b !important;

}



[data-theme="dark"] .user-fullname {

    color: #f8fafc !important;

}



[data-theme="dark"] .user-email {

    color: #94a3b8 !important;

}



[data-theme="dark"] .user-badge-verified {

    background: rgba(16, 185, 129, 0.15) !important;

    color: #34d399 !important;

    border: 1px solid rgba(16, 185, 129, 0.3) !important;

}



[data-theme="dark"] .user-badge-id {

    background: #1e293b !important;

    color: #cbd5e1 !important;

}



[data-theme="dark"] .btn-switch-account {

    background: #1e293b !important;

    border: 1.5px solid #334155 !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .btn-switch-account:hover {

    background: #0284c7 !important;

    border-color: #0284c7 !important;

    color: #ffffff !important;

}



[data-theme="dark"] .user-quick-kpi {

    background: #0b1322 !important;

    border-bottom: 1px solid #1e293b !important;

}



[data-theme="dark"] .kpi-mini-label {

    color: #94a3b8 !important;

}



[data-theme="dark"] .kpi-mini-divider {

    background: #1e293b !important;

}



[data-theme="dark"] .user-card-body {

    background: #131d33 !important;

}



[data-theme="dark"] .user-menu-item {

    color: #cbd5e1 !important;

}



[data-theme="dark"] .user-menu-item:hover {

    background: #1e293b !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .menu-item-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .user-menu-item:hover .menu-item-title {

    color: #38bdf8 !important;

}



[data-theme="dark"] .menu-item-sub {

    color: #94a3b8 !important;

}



[data-theme="dark"] .menu-item-arrow {

    color: #64748b !important;

}



[data-theme="dark"] .user-menu-item:hover .menu-item-arrow {

    color: #38bdf8 !important;

}



[data-theme="dark"] .user-card-admin-row {

    background: #1c1917 !important;

    border-top: 1px solid #78350f !important;

    border-bottom: 1px solid #78350f !important;

}



[data-theme="dark"] .btn-return-admin {

    background: #292524 !important;

    border: 1.5px solid #92400e !important;

    color: #f59e0b !important;

}



[data-theme="dark"] .btn-return-admin:hover {

    background: #451a03 !important;

    color: #fbbf24 !important;

}



[data-theme="dark"] .admin-icon-box {

    background: #451a03 !important;

    color: #f59e0b !important;

}



[data-theme="dark"] .admin-label {

    color: #f59e0b !important;

}



[data-theme="dark"] .admin-action {

    color: #fde047 !important;

}



[data-theme="dark"] .user-card-footer {

    background: #0f172a !important;

    border-top: 1px solid #1e293b !important;

}



[data-theme="dark"] .btn-user-logout {

    background: #1e293b !important;

    border: 1px solid #334155 !important;

    color: #f87171 !important;

}



[data-theme="dark"] .btn-user-logout:hover {

    background: #ef4444 !important;

    border-color: #ef4444 !important;

    color: #ffffff !important;

}



/* Notifications Dropdown */

[data-theme="dark"] .atl-notifications-menu {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.75) !important;

}



[data-theme="dark"] .atl-notifications-menu .border-bottom.bg-light {

    background-color: #0f172a !important;

    border-bottom-color: #1e293b !important;

}



[data-theme="dark"] .atl-notifications-menu .dropdown-item {

    background-color: #131d33 !important;

    border-bottom-color: #1e293b !important;

    color: #cbd5e1 !important;

}



[data-theme="dark"] .atl-notifications-menu .dropdown-item:hover {

    background-color: #1e293b !important;

}



/* Standard Dropdowns */

[data-theme="dark"] .dropdown-menu {

    background-color: #131d33 !important;

    border-color: #1e293b !important;

    color: #f8fafc !important;

}



[data-theme="dark"] .dropdown-item {

    color: #cbd5e1 !important;

}



[data-theme="dark"] .dropdown-item:hover,

[data-theme="dark"] .dropdown-item:focus {

    background-color: #1e293b !important;

    color: #38bdf8 !important;

}



/* Sidebar Cards & Panels (Client Area & Knowledgebase) */

[data-theme="dark"] .sidebar .card-sidebar,

[data-theme="dark"] .sidebar .card,

[data-theme="dark"] .sidebar .panel,

[data-theme="dark"] .sidebar .panel-default,

[data-theme="dark"] .panel-sidebar,

[data-theme="dark"] .panel,

[data-theme="dark"] .panel-default,

[data-theme="dark"] #order-standard_cart .card-sidebar,

[data-theme="dark"] #order-standard_cart .cart-sidebar .panel {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;

}



[data-theme="dark"] .sidebar .card-header,

[data-theme="dark"] .sidebar .card-sidebar > .card-header,

[data-theme="dark"] .sidebar .panel-heading,

[data-theme="dark"] .panel-sidebar > .panel-heading,

[data-theme="dark"] .panel-heading,

[data-theme="dark"] #order-standard_cart .card-sidebar .card-header,

[data-theme="dark"] #order-standard_cart .cart-sidebar .panel-heading {

    background: #0f172a !important;

    border-bottom: 1px solid #1e293b !important;

    color: #f8fafc !important;

}



[data-theme="dark"] .sidebar .card-title,

[data-theme="dark"] .sidebar .panel-title,

[data-theme="dark"] .panel-sidebar .panel-title,

[data-theme="dark"] .panel-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .sidebar .card-minimise {

    color: #94a3b8 !important;

}



[data-theme="dark"] .sidebar .card-sidebar .card-body,

[data-theme="dark"] .sidebar .panel-body,

[data-theme="dark"] .panel-sidebar .panel-body,

[data-theme="dark"] .panel-body,

[data-theme="dark"] .collapsable-card-body {

    background: #131d33 !important;

    color: #cbd5e1 !important;

}



[data-theme="dark"] .sidebar .card-sidebar .card-body strong,

[data-theme="dark"] .panel-sidebar strong {

    color: #f8fafc !important;

}



[data-theme="dark"] .sidebar .panel-footer,

[data-theme="dark"] .panel-footer {

    background: #0f172a !important;

    border-color: #1e293b !important;

}



[data-theme="dark"] .sidebar .list-group,

[data-theme="dark"] .sidebar .list-group-flush {

    background: transparent !important;

}



[data-theme="dark"] .sidebar .list-group-item,

[data-theme="dark"] .panel-sidebar .list-group-item,

[data-theme="dark"] .list-group-item {

    background-color: #131d33 !important;

    border-color: #1e293b !important;

    color: #cbd5e1 !important;

}



[data-theme="dark"] .sidebar .list-group-item:hover,

[data-theme="dark"] .panel-sidebar .list-group-item:hover,

[data-theme="dark"] .list-group-item:hover {

    background-color: #1e293b !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .sidebar .list-group-item.active,

[data-theme="dark"] .panel-sidebar .list-group-item.active,

[data-theme="dark"] .list-group-item.active {

    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;

    color: #ffffff !important;

    border-color: #0284c7 !important;

}



[data-theme="dark"] .sidebar .list-group-item i,

[data-theme="dark"] .panel-sidebar .list-group-item i {

    color: #94a3b8 !important;

}



[data-theme="dark"] .sidebar .list-group-item:hover i,

[data-theme="dark"] .panel-sidebar .list-group-item:hover i {

    color: #38bdf8 !important;

}



[data-theme="dark"] .sidebar .list-group-item.active i,

[data-theme="dark"] .panel-sidebar .list-group-item.active i {

    color: #ffffff !important;

}



[data-theme="dark"] .sidebar .badge,

[data-theme="dark"] .panel-sidebar .badge,

[data-theme="dark"] .sidebar-menu-item-badge .badge {

    background: #1e293b !important;

    color: #f8fafc !important;

    border: 1px solid #334155 !important;

}



[data-theme="dark"] .sidebar .sidebar-menu-item-label {

    color: #cbd5e1 !important;

}



[data-theme="dark"] .sidebar .list-group-item:hover .sidebar-menu-item-label {

    color: #38bdf8 !important;

}



[data-theme="dark"] .sidebar .list-group-item.active .sidebar-menu-item-label {

    color: #ffffff !important;

}



[data-theme="dark"] .sidebar .card-sidebar .btn-default,

[data-theme="dark"] .sidebar .card-sidebar .btn-secondary {

    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;

    color: #ffffff !important;

    border: none !important;

}



[data-theme="dark"] .client-home-cards .card {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

}



[data-theme="dark"] .client-home-cards .card .card-header {

    background: #0f172a !important;

    border-bottom: 1px solid #1e293b !important;

    color: #f8fafc !important;

}



[data-theme="dark"] .client-home-cards .card-footer {

    background: #0f172a !important;

    border-top: 1px solid #1e293b !important;

}



/* Client Area Services Table View & DataTables */

[data-theme="dark"] .table-container,

[data-theme="dark"] #productsTableContainer {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;

    color: #cbd5e1 !important;

}



[data-theme="dark"] .table-container .table,

[data-theme="dark"] .table,

[data-theme="dark"] .table.table-list {

    color: #cbd5e1 !important;

}



[data-theme="dark"] .table-container .table th,

[data-theme="dark"] .table thead th,

[data-theme="dark"] .table.table-list thead th {

    background: #0f172a !important;

    border-bottom: 1px solid #1e293b !important;

    border-top: none !important;

    color: #94a3b8 !important;

}



[data-theme="dark"] .table-container .table td,

[data-theme="dark"] .table tbody td,

[data-theme="dark"] .table.table-list tbody td {

    background: #131d33 !important;

    border-top: 1px solid #1e293b !important;

    color: #cbd5e1 !important;

}



[data-theme="dark"] .table-container .table tbody tr:hover td,

[data-theme="dark"] .table tbody tr:hover td,

[data-theme="dark"] .table.table-list tbody tr:hover td {

    background: #17233f !important;

}



[data-theme="dark"] .table.table-list tbody tr {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

}



[data-theme="dark"] .table.table-list tbody tr:hover {

    background: #17233f !important;

    border-color: #0284c7 !important;

}



[data-theme="dark"] .dataTables_wrapper {

    color: #94a3b8 !important;

}



[data-theme="dark"] .dataTables_wrapper .dataTables_info,

[data-theme="dark"] .dataTables_wrapper .dataTables_length,

[data-theme="dark"] .dataTables_wrapper .dataTables_filter {

    color: #94a3b8 !important;

}



[data-theme="dark"] .dataTables_wrapper .dataTables_length label,

[data-theme="dark"] .dataTables_wrapper .dataTables_filter label {

    color: #94a3b8 !important;

}



[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {

    background: #1e293b !important;

    border: 1px solid #334155 !important;

    color: #ffffff !important;

}



[data-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus {

    border-color: #0284c7 !important;

    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25) !important;

}



[data-theme="dark"] .dataTables_wrapper .dataTables_length select {

    background: #1e293b !important;

    border: 1px solid #334155 !important;

    color: #ffffff !important;

}



[data-theme="dark"] .pagination .page-item .page-link,

[data-theme="dark"] .dataTables_paginate .paginate_button {

    background: #1e293b !important;

    border: 1px solid #334155 !important;

    color: #cbd5e1 !important;

}



[data-theme="dark"] .pagination .page-item .page-link:hover,

[data-theme="dark"] .dataTables_paginate .paginate_button:hover {

    background: #24344d !important;

    border-color: #0284c7 !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .pagination .page-item.active .page-link,

[data-theme="dark"] .dataTables_paginate .paginate_button.current {

    background: #0284c7 !important;

    border-color: #0284c7 !important;

    color: #ffffff !important;

}



[data-theme="dark"] .pagination .page-item.disabled .page-link,

[data-theme="dark"] .dataTables_paginate .paginate_button.disabled {

    background: #0f172a !important;

    border-color: #1e293b !important;

    color: #64748b !important;

}



/* Service Status Badges in Dark Mode */

[data-theme="dark"] .service-status-pill.status-active {

    background: rgba(16, 185, 129, 0.15) !important;

    color: #34d399 !important;

    border: 1px solid rgba(16, 185, 129, 0.35) !important;

}



[data-theme="dark"] .service-status-pill.status-pending {

    background: rgba(56, 189, 248, 0.15) !important;

    color: #38bdf8 !important;

    border: 1px solid rgba(56, 189, 248, 0.35) !important;

}



[data-theme="dark"] .service-status-pill.status-suspended {

    background: rgba(245, 158, 11, 0.15) !important;

    color: #fbbf24 !important;

    border: 1px solid rgba(245, 158, 11, 0.35) !important;

}



[data-theme="dark"] .service-status-pill.status-cancelled,

[data-theme="dark"] .service-status-pill.status-terminated {

    background: rgba(239, 68, 68, 0.15) !important;

    color: #f87171 !important;

    border: 1px solid rgba(239, 68, 68, 0.35) !important;

}



/* Knowledgebase, Downloads & Announcements */

[data-theme="dark"] .atl-search-hero-box {

    background: #131d33 !important;

    border: 1.5px solid #1e293b !important;

}



[data-theme="dark"] .atl-search-hero-box .atl-portal-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .atl-search-hero-box .atl-portal-subtitle {

    color: #94a3b8 !important;

}



[data-theme="dark"] .atl-search-input-group {

    background: #0f172a !important;

    border-color: #1e293b !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;

}



[data-theme="dark"] .atl-search-input-group:focus-within {

    border-color: #0284c7 !important;

    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.2) !important;

}



[data-theme="dark"] .atl-search-input-group .atl-search-field {

    color: #f8fafc !important;

}



[data-theme="dark"] .atl-search-input-group .atl-search-field::placeholder {

    color: #64748b !important;

}



[data-theme="dark"] .atl-category-card {

    background: #131d33 !important;

    border: 1.5px solid #1e293b !important;

}



[data-theme="dark"] .atl-category-card:hover {

    background: #17233f !important;

    border-color: #0284c7 !important;

    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;

}



[data-theme="dark"] .atl-category-card .cat-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .atl-category-card:hover .cat-title {

    color: #38bdf8 !important;

}



[data-theme="dark"] .atl-category-card .cat-badge {

    background: #0f172a !important;

    color: #38bdf8 !important;

    border-color: #1e293b !important;

}



[data-theme="dark"] .atl-category-card .cat-desc {

    color: #94a3b8 !important;

}



[data-theme="dark"] .atl-category-card .cat-header span.rounded-circle,

[data-theme="dark"] .cat-title span.rounded-circle {

    background: #1e293b !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .atl-category-card .btn-default {

    background: #1e293b !important;

    color: #cbd5e1 !important;

    border-color: #334155 !important;

}



[data-theme="dark"] .atl-category-card .btn-default:hover {

    background: #334155 !important;

    color: #ffffff !important;

}



[data-theme="dark"] .kb-category {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

}



[data-theme="dark"] .kb-category:hover {

    border-color: #0284c7 !important;

    background: #17233f !important;

}



[data-theme="dark"] .kb-category .h5,

[data-theme="dark"] .kb-category a {

    color: #f8fafc !important;

}



[data-theme="dark"] .kb-search .form-control {

    background: #1e293b !important;

    border-color: #334155 !important;

    color: #ffffff !important;

}



/* Knowledgebase Article Page Specifics */

[data-theme="dark"] .card article,

[data-theme="dark"] article,

[data-theme="dark"] .card-body article {

    color: #cbd5e1 !important;

}



[data-theme="dark"] .card h1,

[data-theme="dark"] h1,

[data-theme="dark"] .card h2,

[data-theme="dark"] h2,

[data-theme="dark"] .card h3,

[data-theme="dark"] h3,

[data-theme="dark"] .card h4,

[data-theme="dark"] h4,

[data-theme="dark"] .card h5,

[data-theme="dark"] h5,

[data-theme="dark"] .card h6,

[data-theme="dark"] h6 {

    color: #f8fafc !important;

}



[data-theme="dark"] article p,

[data-theme="dark"] article li,

[data-theme="dark"] article div {

    color: #cbd5e1 !important;

}



[data-theme="dark"] article strong,

[data-theme="dark"] article b {

    color: #f8fafc !important;

}



[data-theme="dark"] article pre,

[data-theme="dark"] article code {

    background: #0f172a !important;

    color: #38bdf8 !important;

    border: 1px solid #1e293b !important;

}



[data-theme="dark"] .kb-article-item {

    background: #131d33 !important;

    color: #cbd5e1 !important;

    border-color: #1e293b !important;

}



[data-theme="dark"] .kb-article-item:hover {

    background: #1e293b !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .kb-article-item i {

    color: #38bdf8 !important;

}



[data-theme="dark"] .kb-article-item small {

    color: #94a3b8 !important;

}



[data-theme="dark"] .btn-default {

    background: #1e293b !important;

    border-color: #334155 !important;

    color: #cbd5e1 !important;

}



[data-theme="dark"] .btn-default:hover {

    background: #334155 !important;

    border-color: #475569 !important;

    color: #ffffff !important;

}



[data-theme="dark"] .btn-secondary {

    background: #1e293b !important;

    border-color: #334155 !important;

    color: #cbd5e1 !important;

}



[data-theme="dark"] .btn-secondary:hover {

    background: #0284c7 !important;

    border-color: #0284c7 !important;

    color: #ffffff !important;

}



[data-theme="dark"] hr {

    border-color: #1e293b !important;

}



/* Empty States */

[data-theme="dark"] .atl-empty-state {

    background: #131d33 !important;

    border: 1.5px solid #1e293b !important;

}



[data-theme="dark"] .atl-empty-icon {

    background: #1e293b !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .atl-empty-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .atl-empty-desc {

    color: #94a3b8 !important;

}



/* Announcements */

[data-theme="dark"] .atl-announcement-card {

    background: #131d33 !important;

    border: 1.5px solid #1e293b !important;

}



[data-theme="dark"] .atl-announcement-card:hover {

    border-color: #0284c7 !important;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;

}



[data-theme="dark"] .atl-announcement-date {

    background: #0f172a !important;

    color: #38bdf8 !important;

    border: 1px solid #1e293b !important;

}



[data-theme="dark"] .atl-announcement-title a {

    color: #f8fafc !important;

}



[data-theme="dark"] .atl-announcement-title a:hover {

    color: #38bdf8 !important;

}



[data-theme="dark"] .atl-announcement-content {

    color: #94a3b8 !important;

}



/* Quick Guide Cards on Client Dashboard */

[data-theme="dark"] .guide-card {

    background: #131d33 !important;

    border-color: #1e293b !important;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;

}



[data-theme="dark"] .guide-card:hover {

    border-color: #0284c7 !important;

    background: #17233f !important;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;

}



[data-theme="dark"] .guide-card-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .guide-card:hover .guide-card-title {

    color: #38bdf8 !important;

}



[data-theme="dark"] .guide-card-desc {

    color: #94a3b8 !important;

}



[data-theme="dark"] .guide-badge-pill {

    background: #1e293b !important;

    color: #94a3b8 !important;

}



[data-theme="dark"] .guide-card-btn {

    background: #1e293b !important;

    border-color: #334155 !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .guide-card:hover .guide-card-btn {

    background: #0284c7 !important;

    border-color: #0284c7 !important;

    color: #ffffff !important;

}



[data-theme="dark"] .badge-cpanel { background: #1e293b !important; color: #38bdf8 !important; border-color: #334155 !important; }

[data-theme="dark"] .badge-mail { background: #1e293b !important; color: #34d399 !important; border-color: #334155 !important; }

[data-theme="dark"] .badge-dns { background: #1e293b !important; color: #c084fc !important; border-color: #334155 !important; }

[data-theme="dark"] .badge-ssl { background: #1e293b !important; color: #fbbf24 !important; border-color: #334155 !important; }



/* Contact Page Cards & Form Controls */

[data-theme="dark"] .contact-channel-card {

    background: #131d33 !important;

    border-color: #1e293b !important;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;

}



[data-theme="dark"] .contact-channel-card:hover {

    border-color: #0284c7 !important;

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45) !important;

}



[data-theme="dark"] .channel-card-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .channel-card-desc {

    color: #94a3b8 !important;

}



[data-theme="dark"] .channel-card-link {

    background: #1e293b !important;

    border-color: #334155 !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .contact-channel-card:hover .channel-card-link {

    background: #0284c7 !important;

    border-color: #0284c7 !important;

    color: #ffffff !important;

}



/* Order Tracker & Cart Elements */

[data-theme="dark"] .order-steps-tracker {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;

}



[data-theme="dark"] .order-steps-tracker .step-segment .step-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .order-steps-tracker .step-segment .step-tag {

    color: #94a3b8 !important;

}



[data-theme="dark"] .order-steps-tracker .step-divider {

    color: #334155 !important;

}



[data-theme="dark"] #order-standard_cart .products .product,

[data-theme="dark"] #order-standard_cart #orderSummary,

[data-theme="dark"] #order-standard_cart .product-info {

    background: #131d33 !important;

    border-color: #1e293b !important;

    color: #cbd5e1 !important;

}



/* Auth Modals & Country List */

[data-theme="dark"] .atl-auth-modal .modal-content {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.75) !important;

}



[data-theme="dark"] .atl-auth-modal .modal-header {

    background: #0f172a !important;

    border-bottom: 1px solid #1e293b !important;

}



[data-theme="dark"] .iti__country-list,

[data-theme="dark"] .intl-tel-input .country-list {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

    color: #f8fafc !important;

}



[data-theme="dark"] .iti__country-list .iti__country:hover,

[data-theme="dark"] .intl-tel-input .country-list .country:hover {

    background: #1e293b !important;

}



/* Forms & Inputs */

[data-theme="dark"] .form-control,

[data-theme="dark"] select,

[data-theme="dark"] textarea,

[data-theme="dark"] .atl-form-control,

[data-theme="dark"] .atl-select,

[data-theme="dark"] select.atl-select,

[data-theme="dark"] select.atl-form-control,

[data-theme="dark"] input[type="password"],

[data-theme="dark"] input[type="email"],

[data-theme="dark"] input[type="tel"],

[data-theme="dark"] input[type="text"]:not(#frmDomainHomepage input):not(.hero-domain-pill input):not(.hero-domain-bar input) {

    background-color: #1e293b !important;

    border-color: #334155 !important;

    color: #ffffff !important;

}



[data-theme="dark"] .form-control:focus,

[data-theme="dark"] select:focus,

[data-theme="dark"] textarea:focus,

[data-theme="dark"] .atl-form-control:focus,

[data-theme="dark"] .atl-select:focus,

[data-theme="dark"] input:focus {

    border-color: #0284c7 !important;

    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25) !important;

}



/* Text and Badge Overrides */

[data-theme="dark"] .text-dark {

    color: #f8fafc !important;

}



[data-theme="dark"] .text-muted {

    color: #94a3b8 !important;

}



[data-theme="dark"] .text-secondary {

    color: #cbd5e1 !important;

}



[data-theme="dark"] .bg-white {

    background-color: #131d33 !important;

}



[data-theme="dark"] .bg-light {

    background-color: #0f172a !important;

}



[data-theme="dark"] .section-badge {

    background: #1e293b !important;

    border-color: #334155 !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .section-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .section-subtitle {

    color: #94a3b8 !important;

}



/* Alerts */

[data-theme="dark"] .alert-info {

    background-color: rgba(2, 132, 199, 0.15) !important;

    border-color: #0284c7 !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .alert-success {

    background-color: rgba(16, 185, 129, 0.15) !important;

    border-color: #10b981 !important;

    color: #34d399 !important;

}



[data-theme="dark"] .alert-warning {

    background-color: rgba(245, 158, 11, 0.15) !important;

    border-color: #f59e0b !important;

    color: #fbbf24 !important;

}



[data-theme="dark"] .alert-danger {

    background-color: rgba(239, 68, 68, 0.15) !important;

    border-color: #ef4444 !important;

    color: #f87171 !important;

}



/* Nav Tabs & Navigation Pills */

[data-theme="dark"] .nav-tabs {

    border-color: #1e293b !important;

}



[data-theme="dark"] .nav-tabs .nav-link {

    color: #94a3b8 !important;

}



[data-theme="dark"] .nav-tabs .nav-link:hover {

    border-color: #1e293b #1e293b #090e17 !important;

    color: #f8fafc !important;

}



[data-theme="dark"] .nav-tabs .nav-link.active {

    background-color: #131d33 !important;

    border-color: #1e293b #1e293b #131d33 !important;

    color: #38bdf8 !important;

}



/* Client Hub & Service Meta */

[data-theme="dark"] .service-domain-box {

    background: #1e293b !important;

    border-color: #334155 !important;

}



[data-theme="dark"] .meta-item {

    background: #1e293b !important;

}



[data-theme="dark"] .hub-dept-section,

[data-theme="dark"] .hub-dept-pill,

[data-theme="dark"] .hub-channel-item {

    background-color: #1e293b !important;

    border-color: #334155 !important;

}



[data-theme="dark"] .hub-channel-item:hover,

[data-theme="dark"] .hub-dept-pill:hover {

    background-color: #334155 !important;

}



[data-theme="dark"] .atl-prompt-arrow {

    background: #131d33 !important;

    border-right-color: #334155 !important;

    border-bottom-color: #334155 !important;

}



[data-theme="dark"] .prompt-title,

[data-theme="dark"] .channel-name,

[data-theme="dark"] .dept-label {

    color: #f8fafc !important;

}



/* Dark Mode: Client Dashboard Domain Search & Unpaid Alert */

[data-theme="dark"] .client-dash-unpaid-alert {

    background: linear-gradient(135deg, #1c1917 0%, #292524 100%) !important;

    border: 1.5px solid #92400e !important;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;

}



[data-theme="dark"] .alert-unpaid-icon {

    background: #451a03 !important;

    color: #f59e0b !important;

}



[data-theme="dark"] .alert-unpaid-title {

    color: #f59e0b !important;

}



[data-theme="dark"] .alert-unpaid-sub {

    color: #fde68a !important;

}



[data-theme="dark"] .alert-unpaid-body {

    color: #d6d3d1 !important;

}



[data-theme="dark"] .btn-outline-unpaid {

    background: #1e293b !important;

    border-color: #334155 !important;

    color: #f8fafc !important;

}



[data-theme="dark"] .btn-outline-unpaid:hover {

    background: #334155 !important;

    border-color: #475569 !important;

    color: #ffffff !important;

}



[data-theme="dark"] .client-dash-domain-card {

    background: #131d33 !important;

    border-color: #1e293b !important;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;

}



[data-theme="dark"] .atl-dash-domain-search-wrap {

    background: #0f172a !important;

    border-color: #1e293b !important;

    box-shadow: none !important;

}



[data-theme="dark"] .atl-dash-domain-search-wrap:focus-within {

    border-color: #0284c7 !important;

    background: #17233f !important;

    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.25) !important;

}



[data-theme="dark"] .atl-dash-domain-search-wrap .search-globe-icon {

    color: #64748b !important;

}



[data-theme="dark"] .atl-dash-domain-search-wrap:focus-within .search-globe-icon {

    color: #38bdf8 !important;

}



[data-theme="dark"] .atl-dash-domain-search-wrap .dash-domain-search-input {

    color: #f8fafc !important;

}



[data-theme="dark"] .atl-dash-domain-search-wrap .dash-domain-search-input::placeholder {

    color: #64748b !important;

}



[data-theme="dark"] .domain-quick-divider {

    border-top-color: #1e293b !important;

}



[data-theme="dark"] .domain-tld-pill {

    background: #1e293b !important;

    border-color: #334155 !important;

    color: #cbd5e1 !important;

}



/* ==========================================================================

   DARK MODE: ALL BUTTON CONTRAST & OUTLINE BUTTON SUITE

   ========================================================================== */

[data-theme="dark"] .btn-outline-primary {

    color: #38bdf8 !important;

    border: 1.5px solid #0284c7 !important;

    background: rgba(2, 132, 199, 0.12) !important;

}



[data-theme="dark"] .btn-outline-primary:hover,

[data-theme="dark"] .btn-outline-primary:focus,

[data-theme="dark"] .btn-outline-primary:active {

    background: #0284c7 !important;

    border-color: #0284c7 !important;

    color: #ffffff !important;

    box-shadow: 0 0 16px rgba(2, 132, 199, 0.4) !important;

}



[data-theme="dark"] .btn-outline-secondary {

    color: #e2e8f0 !important;

    border: 1.5px solid #475569 !important;

    background: rgba(255, 255, 255, 0.06) !important;

}



[data-theme="dark"] .btn-outline-secondary:hover,

[data-theme="dark"] .btn-outline-secondary:focus,

[data-theme="dark"] .btn-outline-secondary:active {

    background: #334155 !important;

    border-color: #64748b !important;

    color: #ffffff !important;

}



[data-theme="dark"] .btn-outline-light {

    color: #f8fafc !important;

    border: 1.5px solid #475569 !important;

    background: rgba(255, 255, 255, 0.06) !important;

}



[data-theme="dark"] .btn-outline-light:hover {

    background: #334155 !important;

    border-color: #64748b !important;

    color: #ffffff !important;

}



[data-theme="dark"] .btn-outline-success {

    color: #34d399 !important;

    border: 1.5px solid #059669 !important;

    background: rgba(16, 185, 129, 0.12) !important;

}



[data-theme="dark"] .btn-outline-success:hover {

    background: #10b981 !important;

    border-color: #10b981 !important;

    color: #ffffff !important;

    box-shadow: 0 0 16px rgba(16, 185, 129, 0.4) !important;

}



[data-theme="dark"] .btn-outline-danger {

    color: #f87171 !important;

    border: 1.5px solid #dc2626 !important;

    background: rgba(239, 68, 68, 0.12) !important;

}



[data-theme="dark"] .btn-outline-danger:hover {

    background: #ef4444 !important;

    border-color: #ef4444 !important;

    color: #ffffff !important;

    box-shadow: 0 0 16px rgba(239, 68, 68, 0.4) !important;

}



[data-theme="dark"] .btn-outline-warning {

    color: #fbbf24 !important;

    border: 1.5px solid #d97706 !important;

    background: rgba(245, 158, 11, 0.12) !important;

}



[data-theme="dark"] .btn-outline-warning:hover {

    background: #f59e0b !important;

    border-color: #f59e0b !important;

    color: #000000 !important;

    box-shadow: 0 0 16px rgba(245, 158, 11, 0.4) !important;

}



[data-theme="dark"] .btn-outline-info {

    color: #38bdf8 !important;

    border: 1.5px solid #0284c7 !important;

    background: rgba(2, 132, 199, 0.12) !important;

}



[data-theme="dark"] .btn-outline-info:hover {

    background: #0284c7 !important;

    border-color: #0284c7 !important;

    color: #ffffff !important;

}



[data-theme="dark"] .btn-outline-dark {

    color: #e2e8f0 !important;

    border: 1.5px solid #475569 !important;

    background: rgba(255, 255, 255, 0.06) !important;

}



[data-theme="dark"] .btn-outline-dark:hover {

    background: #334155 !important;

    border-color: #64748b !important;

    color: #ffffff !important;

}



[data-theme="dark"] .btn-light {

    background: #1e293b !important;

    border: 1px solid #334155 !important;

    color: #f8fafc !important;

}



[data-theme="dark"] .btn-light:hover {

    background: #334155 !important;

    border-color: #475569 !important;

    color: #ffffff !important;

}



/* ==========================================================================

   DARK MODE: CLIENT DASHBOARD CONTAINERS & CARDS

   ========================================================================== */

[data-theme="dark"] .client-dash-profile-card {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

}



[data-theme="dark"] .avatar-online-dot {

    border: 3px solid #131d33 !important;

}



[data-theme="dark"] .client-dash-verify-box {

    background: #0f172a !important;

    border: 1px solid #1e293b !important;

    color: #cbd5e1 !important;

}



[data-theme="dark"] .client-dash-verify-box span,

[data-theme="dark"] .client-dash-verify-box strong {

    color: #cbd5e1 !important;

}



[data-theme="dark"] .text-slate-700 {

    color: #cbd5e1 !important;

}



/* Fast Navigation Hub */

[data-theme="dark"] .client-dash-nav-card {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

}



[data-theme="dark"] .client-dash-nav-card .card-header {

    background: #0f172a !important;

    border-bottom-color: #1e293b !important;

}



[data-theme="dark"] .client-dash-nav-card .list-group-item {

    background: #131d33 !important;

    border-color: #1e293b !important;

    color: #cbd5e1 !important;

}



[data-theme="dark"] .client-dash-nav-card .list-group-item:hover {

    background: #1e293b !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .client-dash-nav-card .badge.bg-light {

    background-color: #1e293b !important;

    border: 1px solid #334155 !important;

    color: #f8fafc !important;

}



/* Active & Managed Services Card */

[data-theme="dark"] .client-dash-main-card {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

}



[data-theme="dark"] .client-dash-card-header {

    background: #0f172a !important;

    border-bottom-color: #1e293b !important;

}



[data-theme="dark"] .dash-icon-box.blue-box {

    background: #1e293b !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .dash-icon-box.cyan-box {

    background: #1e293b !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .client-dash-service-item {

    background: #0f172a !important;

    border: 1.5px solid #1e293b !important;

}



[data-theme="dark"] .client-dash-service-item:hover {

    background: #111c35 !important;

    border-color: #0284c7 !important;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;

}



[data-theme="dark"] .client-dash-service-item .service-item-footer {

    border-top: 1px solid #1e293b !important;

}



[data-theme="dark"] .client-dash-service-item strong,

[data-theme="dark"] .client-dash-service-item .font-weight-600 {

    color: #f8fafc !important;

}



[data-theme="dark"] .client-dash-service-item .text-muted {

    color: #94a3b8 !important;

}



/* Empty State & Onboarding Packages */

[data-theme="dark"] .client-dash-empty-promo {

    background: #0f172a !important;

    border: 1px solid #1e293b !important;

}



/* Tickets & Invoices Sub Cards */

[data-theme="dark"] .client-dash-sub-card {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

}



[data-theme="dark"] .client-dash-sub-card .card-body {

    background: #131d33 !important;

}



[data-theme="dark"] .client-dash-sub-card .list-group-item {

    background: #131d33 !important;

    border-color: #1e293b !important;

    color: #cbd5e1 !important;

}



[data-theme="dark"] .client-dash-sub-card .list-group-item:hover {

    background: #17233f !important;

}



[data-theme="dark"] .client-dash-sub-card .list-group-item strong,

[data-theme="dark"] .client-dash-sub-card .list-group-item .font-weight-bold {

    color: #f8fafc !important;

}



[data-theme="dark"] .client-dash-sub-card .list-group-item .text-muted {

    color: #94a3b8 !important;

}



/* Quick Guides Card */

[data-theme="dark"] .client-dash-guides-card {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

}



/* ==========================================================================

   UNIVERSAL SOFT-GRAY & WHITE CONTAINER SAFETY NETS FOR DARK MODE

   ========================================================================== */

[data-theme="dark"] [style*="background: #f8fafc"],

[data-theme="dark"] [style*="background:#f8fafc"],

[data-theme="dark"] [style*="background: #F8FAFC"],

[data-theme="dark"] [style*="background:#F8FAFC"],

[data-theme="dark"] [style*="background: #f1f5f9"],

[data-theme="dark"] [style*="background:#f1f5f9"] {

    background-color: #0f172a !important;

    border-color: #1e293b !important;

}



[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],

[data-theme="dark"] [style*="border: 1.5px solid #e2e8f0"],

[data-theme="dark"] [style*="border-top: 1px solid #e2e8f0"],

[data-theme="dark"] [style*="border-bottom: 1px solid #e2e8f0"],

[data-theme="dark"] [style*="border: 1px solid #edf2f7"],

[data-theme="dark"] [style*="border: 1.5px solid #edf2f7"] {

    border-color: #1e293b !important;

}



[data-theme="dark"] section[style*="background: #ffffff"],

[data-theme="dark"] section[style*="background:#ffffff"] {

    background-color: #090e17 !important;

}



[data-theme="dark"] .contact-form-card[style*="background: #ffffff"] {

    background-color: #131d33 !important;

    border-color: #1e293b !important;

}



/* ==========================================================================

   AUDIT FIXES: DASHBOARD STAT NUMBERS, TICKETS, CART & PRODUCT DETAILS

   ========================================================================== */



/* 1. Dashboard Stat Card Numbers */

[data-theme="dark"] .modern-stat-card .stat-number {

    color: #f8fafc !important;

}



[data-theme="dark"] .modern-stat-card .stat-label {

    color: #94a3b8 !important;

}



[data-theme="dark"] .modern-stat-card.theme-blue .stat-icon-wrapper { background: rgba(0, 102, 204, 0.18) !important; color: #38bdf8 !important; }

[data-theme="dark"] .modern-stat-card.theme-green .stat-icon-wrapper { background: rgba(16, 185, 129, 0.18) !important; color: #34d399 !important; }

[data-theme="dark"] .modern-stat-card.theme-purple .stat-icon-wrapper { background: rgba(139, 92, 246, 0.18) !important; color: #c084fc !important; }

[data-theme="dark"] .modern-stat-card.theme-amber .stat-icon-wrapper { background: rgba(245, 158, 11, 0.18) !important; color: #fbbf24 !important; }

[data-theme="dark"] .modern-stat-card.theme-indigo .stat-icon-wrapper { background: rgba(79, 70, 229, 0.18) !important; color: #818cf8 !important; }

[data-theme="dark"] .modern-stat-card.theme-cyan .stat-icon-wrapper { background: rgba(6, 182, 212, 0.18) !important; color: #22d3ee !important; }

[data-theme="dark"] .modern-stat-card .stat-arrow { color: #475569 !important; }

[data-theme="dark"] .modern-stat-card:hover .stat-arrow { color: #38bdf8 !important; }





/* 2. Support Ticket Department Cards & Hero Badges */

[data-theme="dark"] .dept-channel-card {

    background: #131d33 !important;

    border: 1.5px solid #1e293b !important;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;

}



[data-theme="dark"] .dept-channel-card:hover {

    background: #162544 !important;

    border-color: #0284c7 !important;

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45) !important;

}



[data-theme="dark"] .dept-card-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .dept-channel-card:hover .dept-card-title {

    color: #38bdf8 !important;

}



[data-theme="dark"] .dept-card-desc {

    color: #94a3b8 !important;

}



[data-theme="dark"] .dept-card-btn {

    background: #1e293b !important;

    border: 1px solid #334155 !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .dept-channel-card:hover .dept-card-btn {

    background: #0284c7 !important;

    border-color: #0284c7 !important;

    color: #ffffff !important;

}



[data-theme="dark"] .hero-visual-card {

    background: #131d33 !important;

    border: 1px solid #1e293b !important;

}



[data-theme="dark"] .hero-code-badge {

    background: rgba(19, 29, 51, 0.95) !important;

    backdrop-filter: blur(16px) !important;

    -webkit-backdrop-filter: blur(16px) !important;

    border: 1.5px solid rgba(56, 189, 248, 0.25) !important;

    box-shadow: 0 16px 35px -8px rgba(0, 0, 0, 0.6), 0 0 15px rgba(2, 132, 199, 0.15) !important;

}



[data-theme="dark"] .hero-code-badge .h-badge-label,

[data-theme="dark"] .hero-code-badge .badge-label {

    color: #94a3b8 !important;

}



[data-theme="dark"] .hero-code-badge .h-badge-val,

[data-theme="dark"] .hero-code-badge .badge-val {

    color: #f8fafc !important;

}



[data-theme="dark"] .hero-code-badge .h-badge-val.text-success,

[data-theme="dark"] .hero-code-badge .h-badge-val .text-success,

[data-theme="dark"] .hero-code-badge .badge-val.text-success {

    color: #34d399 !important;

}



[data-theme="dark"] .hero-code-badge .h-badge-val.text-primary,

[data-theme="dark"] .hero-code-badge .h-badge-val.text-cyan,

[data-theme="dark"] .hero-code-badge .h-badge-val .text-primary,

[data-theme="dark"] .hero-code-badge .badge-val.text-primary {

    color: #38bdf8 !important;

}



[data-theme="dark"] .hero-code-badge .h-badge-val.text-warning,

[data-theme="dark"] .hero-code-badge .h-badge-val .text-warning,

[data-theme="dark"] .hero-code-badge .badge-val.text-warning {

    color: #fbbf24 !important;

}



[data-theme="dark"] .hero-code-badge .h-badge-val.text-muted,

[data-theme="dark"] .hero-code-badge .badge-val.text-muted {

    color: #94a3b8 !important;

}



/* Badge Icons in Dark Mode */

[data-theme="dark"] .hero-code-badge .badge-icon {

    background: #1e293b !important;

    border: 1px solid #334155 !important;

    color: #f8fafc !important;

}



[data-theme="dark"] .hero-code-badge .badge-icon.bg-cyan-soft {

    background: rgba(2, 132, 199, 0.18) !important;

    border: 1px solid rgba(56, 189, 248, 0.35) !important;

    color: #38bdf8 !important;

}



[data-theme="dark"] .hero-code-badge .badge-icon.bg-green-soft,

[data-theme="dark"] .hero-code-badge .badge-icon.bg-emerald-soft {

    background: rgba(16, 185, 129, 0.18) !important;

    border: 1px solid rgba(52, 211, 153, 0.35) !important;

    color: #34d399 !important;

}



[data-theme="dark"] .hero-code-badge .badge-icon.bg-blue-soft {

    background: rgba(59, 130, 246, 0.18) !important;

    border: 1px solid rgba(96, 165, 250, 0.35) !important;

    color: #60a5fa !important;

}



[data-theme="dark"] .hero-code-badge .badge-icon.bg-amber-soft {

    background: rgba(245, 158, 11, 0.18) !important;

    border: 1px solid rgba(251, 191, 36, 0.35) !important;

    color: #fbbf24 !important;

}



/* 3. Order / Cart Page & Steps Tracker */

[data-theme="dark"] #order-standard_cart .header-lined {

    border-bottom-color: #1e293b !important;

}



[data-theme="dark"] #order-standard_cart .header-lined h1 {

    color: #f8fafc !important;

}



[data-theme="dark"] #order-standard_cart .header-lined p {

    color: #94a3b8 !important;

}



[data-theme="dark"] #order-standard_cart .products .product {

    background: #131d33 !important;

    border-color: #1e293b !important;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;

}



[data-theme="dark"] #order-standard_cart .products .product:hover {

    border-color: #0284c7 !important;

    box-shadow: 0 14px 34px rgba(2, 132, 199, 0.2) !important;

}



[data-theme="dark"] #order-standard_cart .products .product header {

    border-bottom-color: #1e293b !important;

}



[data-theme="dark"] #order-standard_cart .products .product header span {

    color: #f8fafc !important;

}



[data-theme="dark"] #order-standard_cart .products .product .product-desc {

    color: #cbd5e1 !important;

}



[data-theme="dark"] #order-standard_cart .products .product .product-desc li {

    color: #94a3b8 !important;

}



[data-theme="dark"] #order-standard_cart .products .product .product-desc strong {

    color: #f8fafc !important;

}



[data-theme="dark"] #order-standard_cart .products .product footer {

    border-top-color: #1e293b !important;

}



[data-theme="dark"] #order-standard_cart .products .product footer .price {

    color: #38bdf8 !important;

}



[data-theme="dark"] .order-steps-tracker .step-segment.active {

    background: #1e293b !important;

    border: 1.5px solid #0284c7 !important;

    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;

}



[data-theme="dark"] .order-steps-tracker .step-segment.active .step-icon {

    background: #0284c7 !important;

    color: #ffffff !important;

}



[data-theme="dark"] .order-steps-tracker .step-segment.active .step-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .order-steps-tracker .step-segment.active .step-tag {

    color: #38bdf8 !important;

}



/* 4. Product Details Buttons & Domain Links */

[data-theme="dark"] .btn-saas-outline {

    background: #1e293b !important;

    color: #38bdf8 !important;

    border: 1.5px solid #0284c7 !important;

}



[data-theme="dark"] .btn-saas-outline:hover {

    background: #0284c7 !important;

    color: #ffffff !important;

    border-color: #0284c7 !important;

}



[data-theme="dark"] .service-domain-link,

[data-theme="dark"] .service-domain-text {

    color: #38bdf8 !important;

}



/* 5. Password Generator & Reset Buttons */

[data-theme="dark"] .generate-password,

[data-theme="dark"] .btn-default {

    background: #1e293b !important;

    border: 1.5px solid #475569 !important;

    color: #f8fafc !important;

}



[data-theme="dark"] .generate-password:hover,

[data-theme="dark"] .btn-default:hover {

    background: #0284c7 !important;

    border-color: #0284c7 !important;

    color: #ffffff !important;

}



/* 6. Server Status & Operational Banner (Dark Mode) */

[data-theme="dark"] .atl-operational-banner {

    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(6, 78, 59, 0.16) 100%), #131d33 !important;

    border: 1.5px solid rgba(16, 185, 129, 0.3) !important;

    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.35), 0 0 15px rgba(16, 185, 129, 0.08) !important;

}



[data-theme="dark"] .atl-operational-banner .atl-op-icon {

    background: rgba(16, 185, 129, 0.18) !important;

    color: #34d399 !important;

    border: 1px solid rgba(16, 185, 129, 0.35) !important;

}



[data-theme="dark"] .atl-operational-banner .atl-op-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .atl-operational-banner .atl-op-desc {

    color: #94a3b8 !important;

}



[data-theme="dark"] .atl-operational-banner .atl-op-badge {

    background: rgba(16, 185, 129, 0.12) !important;

    color: #34d399 !important;

    border: 1.5px solid rgba(16, 185, 129, 0.3) !important;

}



[data-theme="dark"] .atl-server-thead {

    background: #0d1527 !important;

}



[data-theme="dark"] .atl-server-thead th {

    color: #94a3b8 !important;

}



[data-theme="dark"] .atl-server-tr {

    border-bottom: 1px solid #1e293b !important;

}



[data-theme="dark"] .atl-server-name {

    color: #f8fafc !important;

}



[data-theme="dark"] .atl-issue-target {

    color: #f8fafc !important;

}



[data-theme="dark"] .atl-issue-desc {

    color: #cbd5e1 !important;

}



[data-theme="dark"] .atl-empty-icon.atl-icon-emerald {

    background: rgba(16, 185, 129, 0.15) !important;

    color: #34d399 !important;

}



/* ==========================================================================

   EXPANDED WIDE CLIENT DASHBOARD LAYOUT (1680px - 1720px)

   ========================================================================== */

.client-dash-container {

    width: 100%;

    max-width: 1720px;

    margin-left: auto;

    margin-right: auto;

    padding-left: 28px;

    padding-right: 28px;

}



@media (max-width: 1400px) {

    .client-dash-container {

        max-width: 1380px;

        padding-left: 22px;

        padding-right: 22px;

    }

}



@media (max-width: 991px) {

    .client-dash-container {

        padding-left: 16px;

        padding-right: 16px;

    }

}



/* Widen Inner Portal Pages */

@media (min-width: 1400px) {

    #main-body > .container {

        max-width: 1720px !important;

        padding-left: 28px !important;

        padding-right: 28px !important;

    }

    .hero-portal-page .container {

        max-width: 1720px !important;

        padding-left: 28px !important;

        padding-right: 28px !important;

    }

}



/* Hero Live Cloud Telemetry Card */

.atl-hero-telemetry-card {

    background: rgba(10, 25, 60, 0.45);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border: 1.5px solid rgba(255, 255, 255, 0.22);

    border-radius: 20px;

    padding: 24px;

    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35);

    transition: transform 0.3s ease, border-color 0.3s ease;

}



.atl-hero-telemetry-card:hover {

    transform: translateY(-3px);

    border-color: rgba(56, 189, 248, 0.4);

}



.telemetry-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

}



.telemetry-item {

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: 12px;

    padding: 10px 14px;

}



.telemetry-label {

    font-size: 0.70rem;

    color: rgba(255, 255, 255, 0.75);

    text-transform: uppercase;

    font-weight: 700;

    margin-bottom: 2px;

    display: flex;

    align-items: center;

    gap: 6px;

    letter-spacing: 0.5px;

}



.telemetry-val {

    font-size: 0.92rem;

    font-weight: 800;

    color: #ffffff;

    font-family: var(--font-heading);

}



/* VIP Support & WhatsApp Channel Card */

.client-dash-support-card {

    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

    color: #ffffff;

    border-radius: 18px;

    padding: 22px;

    border: 1px solid #334155;

    position: relative;

    overflow: hidden;

}



[data-theme="dark"] .client-dash-support-card {

    background: linear-gradient(135deg, #111a2e 0%, #172554 100%) !important;

    border: 1px solid #1e3a8a !important;

}



.btn-dash-whatsapp {

    background: #10b981;

    color: #ffffff !important;

    font-weight: 700;

    border-radius: 50rem;

    padding: 10px 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    font-size: 0.88rem;

    border: none;

    transition: all 0.25s ease;

    text-decoration: none !important;

    width: 100%;

}



.btn-dash-whatsapp:hover {

    background: #059669;

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);

}



/* Cloud Quick Tools Hub */

.quick-tool-card {

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 16px;

    padding: 16px 18px;

    display: flex;

    align-items: center;

    gap: 14px;

    transition: all 0.25s ease;

    text-decoration: none !important;

    height: 100%;

}



.quick-tool-card:hover {

    transform: translateY(-3px);

    border-color: #0284c7;

    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.12);

}



.quick-tool-icon {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    flex-shrink: 0;

}



.quick-tool-title {

    font-size: 0.92rem;

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 2px;

}



.quick-tool-desc {

    font-size: 0.78rem;

    color: #64748b;

    margin-bottom: 0;

    line-height: 1.3;

}



[data-theme="dark"] .quick-tool-card {

    background: #131d33 !important;

    border-color: #1e293b !important;

}



[data-theme="dark"] .quick-tool-card:hover {

    border-color: #0284c7 !important;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;

}



[data-theme="dark"] .quick-tool-title {

    color: #f8fafc !important;

}



[data-theme="dark"] .quick-tool-desc {

    color: #94a3b8 !important;

}



/* Dashed Add Service Card */

.dash-service-add-card {

    border: 2px dashed #cbd5e1;

    border-radius: 14px;

    padding: 24px;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 100%;

    min-height: 140px;

    color: #64748b;

    text-decoration: none !important;

    transition: all 0.25s ease;

    background: rgba(248, 250, 252, 0.5);

}



.dash-service-add-card:hover {

    border-color: #0284c7;

    color: #0284c7;

    background: rgba(2, 132, 199, 0.04);

    transform: translateY(-2px);

}



[data-theme="dark"] .dash-service-add-card {

    border-color: #334155 !important;

    background: rgba(19, 29, 51, 0.4) !important;

    color: #94a3b8 !important;

}



[data-theme="dark"] .dash-service-add-card:hover {

    border-color: #38bdf8 !important;

    color: #38bdf8 !important;

    background: rgba(56, 189, 248, 0.06) !important;

}



/* ==========================================================================

   INLINE DOMAIN SEARCH TLD HIGHLIGHT BOXES

   ========================================================================== */

.domain-quick-label {

    font-size: 0.84rem;

    font-weight: 700;

    color: #475569;

    letter-spacing: 0.2px;

}



[data-theme="dark"] .domain-quick-label {

    color: #94a3b8;

}



.dash-tld-box {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: #ffffff;

    border: 1.5px solid #e2e8f0;

    border-radius: 12px;

    padding: 6px 14px;

    font-size: 0.85rem;

    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);

    cursor: pointer;

    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);

    position: relative;

    user-select: none;

    text-decoration: none !important;

}



.dash-tld-box:hover {

    transform: translateY(-2px);

    border-color: #0284c7;

    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.16);

}



.dash-tld-box .dash-tld-ext {

    font-weight: 800;

    font-size: 0.92rem;

    color: #0f172a;

    letter-spacing: -0.2px;

}



.dash-tld-box .dash-tld-price {

    font-weight: 800;

    font-size: 0.82rem;

    color: #0284c7;

    background: rgba(2, 132, 199, 0.08);

    padding: 2px 8px;

    border-radius: 6px;

    letter-spacing: -0.2px;

}



.dash-tld-box.highlight-green {

    border-color: #86efac;

    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);

}



.dash-tld-box.highlight-green:hover {

    border-color: #10b981;

    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.22);

}



.dash-tld-box.highlight-green .dash-tld-price {

    color: #059669;

    background: rgba(16, 185, 129, 0.14);

}



.dash-tld-badge {

    position: absolute;

    top: -8px;

    right: -6px;

    background: #10b981;

    color: #ffffff;

    font-size: 0.60rem;

    font-weight: 800;

    padding: 1px 6px;

    border-radius: 50rem;

    text-transform: uppercase;

    letter-spacing: 0.4px;

    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);

}



/* Dark Mode */

[data-theme="dark"] .dash-tld-box {

    background: #131d33;

    border-color: #24344d;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

}



[data-theme="dark"] .dash-tld-box:hover {

    border-color: #38bdf8;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);

}



[data-theme="dark"] .dash-tld-box .dash-tld-ext {

    color: #f8fafc;

}



[data-theme="dark"] .dash-tld-box .dash-tld-price {

    color: #38bdf8;

    background: rgba(56, 189, 248, 0.12);

}



[data-theme="dark"] .dash-tld-box.highlight-green {

    background: linear-gradient(135deg, #131d33 0%, #064e3b 100%);

    border-color: #065f46;

}



[data-theme="dark"] .dash-tld-box.highlight-green:hover {

    border-color: #34d399;

    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);

}



[data-theme="dark"] .dash-tld-box.highlight-green .dash-tld-price {

    color: #34d399;

    background: rgba(52, 211, 153, 0.15);

}



/* ==========================================================================

   GLOBAL OVERFLOW & VIEWPORT DEFENSE

   Prevents wide navbar/elements from pushing viewport horizontally

   ========================================================================== */

html, body {

    overflow-x: hidden !important;

    max-width: 100vw !important;

}



@media (min-width: 1200px) and (max-width: 1440px) {

    .main-navbar-wrapper {

        gap: 3px !important;

    }

    .atl-nav-link {

        font-size: 0.82rem !important;

        padding: 12px 6px !important;

        gap: 4px !important;

    }

    .atl-nav-header-row {

        gap: 10px !important;

    }

    .atl-brand-logo {

        margin: 0 10px 0 0 !important;

    }

    .atl-brand-logo .logo-img {

        max-height: 38px !important;

    }

}



/* ==========================================================================

   DOMAIN SEARCH RESULTS ENHANCEMENTS (domainregister.tpl)

   ========================================================================== */

#DomainSearchResults a.domain-contact-support,

#primaryLookupResult a.domain-contact-support {

    display: none !important;

}



/* Clean Empty Suggestions Handling */

.suggested-domains .domain-lookup-suggestions-message {

    display: none !important;

}

.suggested-domains .domain-suggestions-warning {

    display: none;

}

#domainSuggestions:not(.w-hidden) ~ .domain-suggestions-warning {

    display: block;

    color: #94a3b8;

    font-size: 0.8rem;

    margin-top: 15px;

}



/* Modern Domain Promo Cards */

.domain-promo-cards-row {

    margin-top: 35px !important;

}

.modern-promo-box {

    background: #ffffff !important;

    border: 1.5px solid #e2e8f0 !important;

    border-radius: 16px !important;

    transition: all 0.3s ease !important;

    box-shadow: 0 4px 16px rgba(0,0,0,0.03) !important;

    overflow: hidden !important;

}

.modern-promo-box:hover {

    transform: translateY(-3px) !important;

    box-shadow: 0 10px 25px rgba(0,0,0,0.07) !important;

    border-color: #cbd5e1 !important;

}

.modern-promo-box .promo-icon-circle {

    width: 60px;

    height: 60px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}

.modern-promo-box .bg-warning-light {

    background: #fef3c7 !important;

    color: #d97706 !important;

}

.modern-promo-box .bg-primary-light {

    background: #eff6ff !important;

    color: #2563eb !important;

}



[data-theme="dark"] .modern-promo-box {

    background: #1e293b !important;

    border-color: #334155 !important;

    box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;

}

[data-theme="dark"] .modern-promo-box:hover {

    border-color: #475569 !important;

    box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;

}

[data-theme="dark"] .modern-promo-box h3,

[data-theme="dark"] .modern-promo-box .text-dark {

    color: #f8fafc !important;

}

[data-theme="dark"] .modern-promo-box .bg-warning-light {

    background: rgba(217, 119, 6, 0.2) !important;

    color: #fbbf24 !important;

}

[data-theme="dark"] .modern-promo-box .bg-primary-light {

    background: rgba(37, 99, 235, 0.2) !important;

    color: #60a5fa !important;

}



/* ==========================================================================

   DOMAIN CONFIGURATION PAGE (configuredomains.tpl)

   ========================================================================== */

.domain-config-card,

.nameservers-config-card {

    background: #ffffff !important;

    border: 1.5px solid #e2e8f0 !important;

    border-radius: 16px !important;

    box-shadow: 0 4px 16px rgba(0,0,0,0.03) !important;

    transition: border-color 0.2s ease !important;

}



.domain-icon-circle,

.ns-icon-circle {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    background: #eff6ff;

    color: #2563eb;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

    flex-shrink: 0;

}



/* Addon Product Cards */

#order-standard_cart .addon-products {

    margin: 20px -8px !important;

}

#order-standard_cart .addon-products > [class*="col-"] {

    padding: 0 8px !important;

    display: flex !important;

}



#order-standard_cart .panel-addon {

    display: flex !important;

    flex-direction: column !important;

    justify-content: space-between !important;

    width: 100% !important;

    background: #ffffff !important;

    border: 1.5px solid #e2e8f0 !important;

    border-radius: 16px !important;

    padding: 22px !important;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;

    transition: all 0.25s ease !important;

    cursor: pointer !important;

    position: relative !important;

    margin-bottom: 20px !important;

    text-align: left !important;

}



#order-standard_cart .panel-addon:hover {

    border-color: #3b82f6 !important;

    transform: translateY(-3px) !important;

    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.12) !important;

}



#order-standard_cart .panel-addon.panel-addon-selected {

    border-color: #2563eb !important;

    background: #f8faff !important;

    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15) !important;

}



#order-standard_cart .panel-addon .panel-body {

    padding: 0 !important;

    background: transparent !important;

    margin-bottom: 16px !important;

    flex-grow: 1 !important;

}



#order-standard_cart .panel-addon .addon-header {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    margin-bottom: 12px !important;

}



#order-standard_cart .panel-addon .addon-header-left {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

}



#order-standard_cart .panel-addon .addon-icon-badge {

    width: 38px !important;

    height: 38px !important;

    border-radius: 10px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    font-size: 1.1rem !important;

    background: #eff6ff !important;

    color: #2563eb !important;

    flex-shrink: 0 !important;

}



#order-standard_cart .panel-addon .panel-body label {

    font-size: 1rem !important;

    font-weight: 700 !important;

    color: #0f172a !important;

    margin: 0 !important;

    cursor: pointer !important;

    line-height: 1.3 !important;

}



#order-standard_cart .panel-addon .panel-body label input[type="checkbox"] {

    width: 18px !important;

    height: 18px !important;

    accent-color: #2563eb !important;

    cursor: pointer !important;

    margin: 0 !important;

}



#order-standard_cart .panel-addon .addon-desc {

    color: #64748b !important;

    font-size: 0.86rem !important;

    line-height: 1.5 !important;

    display: block !important;

    margin-top: 8px !important;

}



#order-standard_cart .panel-addon .panel-footer-box {

    margin-top: auto !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 10px !important;

}



#order-standard_cart .panel-addon .panel-price {

    background: #f1f5f9 !important;

    color: #0f172a !important;

    font-size: 0.88rem !important;

    font-weight: 700 !important;

    padding: 7px 12px !important;

    border-radius: 8px !important;

    text-align: center !important;

    width: 100% !important;

    border: 1px solid #e2e8f0 !important;

}



#order-standard_cart .panel-addon .panel-add {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 6px !important;

    padding: 8px 16px !important;

    background: #2563eb !important;

    color: #ffffff !important;

    font-weight: 600 !important;

    font-size: 0.9rem !important;

    border-radius: 8px !important;

    text-align: center !important;

    transition: all 0.2s ease !important;

    width: 100% !important;

}



#order-standard_cart .panel-addon:hover .panel-add {

    background: #1d4ed8 !important;

}



#order-standard_cart .panel-addon.panel-addon-selected .panel-add {

    background: #ef4444 !important;

    color: #ffffff !important;

}



/* Nameserver Inputs */

.form-control-modern {

    height: 46px !important;

    border-radius: 10px !important;

    border: 1.5px solid #cbd5e1 !important;

    padding: 10px 14px !important;

    font-size: 0.92rem !important;

    transition: all 0.2s ease !important;

}

.form-control-modern:focus {

    border-color: #2563eb !important;

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;

}



/* Dark Mode for Domain Config */

[data-theme="dark"] .domain-config-card,

[data-theme="dark"] .nameservers-config-card {

    background: #1e293b !important;

    border-color: #334155 !important;

    box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;

}

[data-theme="dark"] .domain-icon-circle,

[data-theme="dark"] .ns-icon-circle {

    background: rgba(56, 189, 248, 0.15) !important;

    color: #38bdf8 !important;

}

[data-theme="dark"] .domain-name-title,

[data-theme="dark"] .domain-config-card .text-dark,

[data-theme="dark"] .nameservers-config-card .text-dark {

    color: #f8fafc !important;

}

[data-theme="dark"] #order-standard_cart .panel-addon {

    background: #1e293b !important;

    border-color: #334155 !important;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;

}

[data-theme="dark"] #order-standard_cart .panel-addon:hover {

    border-color: #38bdf8 !important;

    box-shadow: 0 8px 25px rgba(56, 189, 248, 0.15) !important;

}

[data-theme="dark"] #order-standard_cart .panel-addon.panel-addon-selected {

    background: #0f172a !important;

    border-color: #38bdf8 !important;

}

[data-theme="dark"] #order-standard_cart .panel-addon .addon-icon-badge {

    background: rgba(56, 189, 248, 0.15) !important;

    color: #38bdf8 !important;

}

[data-theme="dark"] #order-standard_cart .panel-addon .panel-body label {

    color: #f8fafc !important;

}

[data-theme="dark"] #order-standard_cart .panel-addon .addon-desc {

    color: #94a3b8 !important;

}

[data-theme="dark"] #order-standard_cart .panel-addon .panel-price {

    background: #0f172a !important;

    color: #38bdf8 !important;

    border-color: #334155 !important;

}

[data-theme="dark"] .form-control-modern {

    background: #0f172a !important;

    border-color: #334155 !important;

    color: #f8fafc !important;

}

[data-theme="dark"] .form-control-modern:focus {

    border-color: #38bdf8 !important;

    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;

}



/* ==========================================================================

   WHMCS ADD FUNDS / BAKİYE YÜKLE MODERN FINTECH THEME

   ========================================================================== */

.addfunds-container {

    max-width: 100%;

    margin: 0 auto;

}



/* Balance Card */

.addfunds-balance-card {

    background: #ffffff;

    border: 1px solid #e2e8f0 !important;

    border-radius: 16px !important;

    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.06) !important;

    transition: all 0.25s ease;

}

.wallet-icon-circle {

    width: 56px;

    height: 56px;

    min-width: 56px;

    border-radius: 14px;

    background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(30, 134, 255, 0.18) 100%);

    color: #0066cc;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

}

.wallet-balance-amount {

    font-size: 2.1rem;

    font-weight: 800;

    letter-spacing: -0.5px;

    color: #0066cc;

    line-height: 1.2;

}



/* Status / Restriction Card */

.addfunds-status-card {

    background: #ffffff;

    border: 1px solid #e2e8f0 !important;

    border-radius: 18px !important;

    box-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.06) !important;

}

.status-icon-badge {

    width: 72px;

    height: 72px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

}

.status-icon-badge.info {

    background: rgba(0, 102, 204, 0.1);

    color: #0066cc;

}

.status-icon-badge.warning {

    background: rgba(245, 158, 11, 0.1);

    color: #f59e0b;

}



/* Sub Action Cards in Restriction state */

.sub-action-card {

    background: #f8fafc;

    border: 1px solid #e2e8f0 !important;

    border-radius: 14px !important;

    transition: all 0.25s ease;

}

.sub-action-card:hover {

    border-color: #0066cc !important;

    transform: translateY(-3px);

    box-shadow: 0 12px 24px -4px rgba(0, 102, 204, 0.12) !important;

}

.mini-icon {

    width: 36px;

    height: 36px;

    border-radius: 10px;

    background: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);

}



/* KPI Cards */

.limit-kpi-card {

    background: #ffffff;

    border: 1px solid #e2e8f0 !important;

    border-radius: 14px !important;

    box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04) !important;

    transition: all 0.2s ease;

}

.limit-kpi-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 20px -2px rgba(15, 23, 42, 0.08) !important;

}

.kpi-icon-badge {

    width: 48px;

    height: 48px;

    min-width: 48px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.25rem;

}



/* Add Funds Form Card */

.addfunds-form-card {

    background: #ffffff;

    border: 1px solid #e2e8f0 !important;

    border-radius: 18px !important;

    box-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.06) !important;

}

.btn-quick-amount {

    background: #f1f5f9;

    border: 1px solid #cbd5e1;

    color: #1e293b;

    font-weight: 600;

    padding: 8px 18px;

    border-radius: 10px;

    font-size: 0.92rem;

    transition: all 0.2s ease;

}

.btn-quick-amount:hover {

    background: #0066cc;

    color: #ffffff;

    border-color: #0066cc;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);

}

.input-group-amount .input-group-text {

    background: #f8fafc;

    border: 1.5px solid #cbd5e1;

    border-right: none;

    border-radius: 12px 0 0 12px;

    font-size: 1.35rem;

    font-weight: 700;

    color: #0066cc;

    padding: 0 18px;

}

.form-control-amount {

    border: 1.5px solid #cbd5e1 !important;

    border-left: none !important;

    border-radius: 0 12px 12px 0 !important;

    font-size: 1.45rem !important;

    height: 54px !important;

    padding: 10px 16px !important;

    color: #0f172a !important;

    font-weight: 700 !important;

}

.form-control-amount:focus {

    border-color: #0066cc !important;

    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15) !important;

}

.custom-select-modern {

    border: 1.5px solid #cbd5e1 !important;

    border-radius: 12px !important;

    height: 52px !important;

    font-size: 0.98rem !important;

    color: #0f172a !important;

    font-weight: 500 !important;

    padding: 10px 16px !important;

}

.custom-select-modern:focus {

    border-color: #0066cc !important;

    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15) !important;

}



/* Pulse animation for quick amount selection */

@keyframes amountPulse {

    0% { transform: scale(1); }

    50% { transform: scale(1.02); background-color: #eff6ff; }

    100% { transform: scale(1); }

}

.amount-highlight {

    animation: amountPulse 0.4s ease;

}



/* ==========================================================================

   ADD FUNDS DARK MODE PARITY

   ========================================================================== */

[data-theme="dark"] .addfunds-balance-card,

[data-theme="dark"] .addfunds-status-card,

[data-theme="dark"] .limit-kpi-card,

[data-theme="dark"] .addfunds-form-card {

    background: #1e293b !important;

    border-color: #334155 !important;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;

}

[data-theme="dark"] .wallet-icon-circle {

    background: rgba(56, 189, 248, 0.15) !important;

    color: #38bdf8 !important;

}

[data-theme="dark"] .wallet-balance-amount {

    color: #38bdf8 !important;

}

[data-theme="dark"] .addfunds-status-card h3,

[data-theme="dark"] .addfunds-form-card h4,

[data-theme="dark"] .form-section-title h4,

[data-theme="dark"] .sub-action-card h6,

[data-theme="dark"] .limit-kpi-card h4,

[data-theme="dark"] .form-group label.text-dark {

    color: #f8fafc !important;

}

[data-theme="dark"] .sub-action-card {

    background: #0f172a !important;

    border-color: #334155 !important;

}

[data-theme="dark"] .sub-action-card:hover {

    border-color: #38bdf8 !important;

    box-shadow: 0 12px 24px rgba(56, 189, 248, 0.12) !important;

}

[data-theme="dark"] .mini-icon {

    background: #1e293b !important;

    box-shadow: none !important;

}

[data-theme="dark"] .btn-quick-amount {

    background: #0f172a !important;

    border-color: #334155 !important;

    color: #e2e8f0 !important;

}

[data-theme="dark"] .btn-quick-amount:hover {

    background: #38bdf8 !important;

    color: #0f172a !important;

    border-color: #38bdf8 !important;

}

[data-theme="dark"] .input-group-amount .input-group-text {

    background: #0f172a !important;

    border-color: #334155 !important;

    color: #38bdf8 !important;

}

[data-theme="dark"] .form-control-amount {

    background: #0f172a !important;

    border-color: #334155 !important;

    color: #f8fafc !important;

}

[data-theme="dark"] .form-control-amount:focus {

    border-color: #38bdf8 !important;

    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;

}

}

[data-theme="dark"] .custom-select-modern:focus {

    border-color: #38bdf8 !important;

    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;

}



/* ==========================================================================

   ATLANTEZS ULTIMATE MOBILE RESPONSIVENESS SUITE (iOS & Android)

   ========================================================================== */



/* 1. Global Viewport & Touch Defense */

html, body {

    height: auto !important;

    min-height: 100% !important;

    overflow-x: hidden !important;

    width: 100% !important;

    max-width: 100vw !important;

}



@media (max-width: 1199.98px) {

    .main-navbar-wrapper {

        display: none !important;

    }

    .atl-top-infobar {

        display: none !important;

    }

    .atl-nav-header-row {

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        flex-wrap: nowrap !important;

        width: 100% !important;

        padding: 6px 0 !important;

    }

    .atl-brand-logo {

        margin: 0 !important;

        padding: 0 !important;

        flex-shrink: 0 !important;

    }

    .atl-brand-logo .logo-img {

        max-height: 34px !important;

        max-width: 135px !important;

        object-fit: contain !important;

    }

}



/* 2. Mobile Header Controls & Hamburger Menu */

@media (max-width: 767.98px) {

    .atl-nav-container {

        padding-left: 12px !important;

        padding-right: 12px !important;

    }

    .atl-nav-header-row {

        gap: 6px !important;

    }

    .atl-nav-header-row > .d-flex.align-items-center {

        gap: 5px !important;

        flex-shrink: 0 !important;

    }

    /* Theme Toggle Button */

    .btn-theme-mode {

        width: 34px !important;

        height: 34px !important;

        padding: 0 !important;

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        font-size: 0.85rem !important;

        border-radius: 8px !important;

    }

    /* Notifications Button */

    .btn-icon-nav {

        width: 34px !important;

        height: 34px !important;

        padding: 0 !important;

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        font-size: 0.85rem !important;

        border-radius: 8px !important;

    }

    /* Logged-In User Button: Show ONLY Avatar Circle on Mobile */

    .btn-hesabim-premium {

        padding: 2px !important;

        border-radius: 50% !important;

        background: transparent !important;

        border: 2px solid #0066cc !important;

        box-shadow: none !important;

    }

    .btn-hesabim-premium .user-trigger-name,

    .btn-hesabim-premium .user-trigger-chevron {

        display: none !important;

    }

    .btn-hesabim-premium .user-trigger-avatar {

        width: 30px !important;

        height: 30px !important;

        line-height: 30px !important;

        font-size: 0.75rem !important;

        margin: 0 !important;

    }

    /* Logged-Out Hesabim Button */

    .btn-hesabim {

        padding: 6px 10px !important;

        font-size: 0.82rem !important;

        border-radius: 8px !important;

    }

    .btn-hesabim span {

        display: none !important;

    }

    /* Hamburger Toggle Button */

    button[data-target="#mainMobileNav"] {

        padding: 5px 8px !important;

        margin-left: 2px !important;

        border: 1px solid #e2e8f0 !important;

        border-radius: 8px !important;

        background: #f8fafc !important;

        color: #0f172a !important;

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 36px !important;

        height: 34px !important;

    }

    button[data-target="#mainMobileNav"] i {

        font-size: 1.15rem !important;

    }

    [data-theme="dark"] button[data-target="#mainMobileNav"] {

        background: #1e293b !important;

        border-color: #334155 !important;

        color: #f8fafc !important;

    }

}



/* 3. Mobile Navigation Drawer Enhancements */

#mainMobileNav {

    border-radius: 0 0 16px 16px !important;

    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12) !important;

    max-height: calc(100vh - 70px) !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch !important;

}

#mainMobileNav .nav-link {

    padding: 10px 12px !important;

    font-size: 0.95rem !important;

    border-radius: 8px !important;

    transition: all 0.2s ease !important;

}

#mainMobileNav .nav-link:active,

#mainMobileNav .nav-link:hover {

    background: #f1f5f9 !important;

    color: #0066cc !important;

}

[data-theme="dark"] #mainMobileNav {

    background: #0f172a !important;

    border-color: #1e293b !important;

}

[data-theme="dark"] #mainMobileNav .nav-link:active,

[data-theme="dark"] #mainMobileNav .nav-link:hover {

    background: #1e293b !important;

    color: #38bdf8 !important;

}



/* 4. Hero Section, Glowing Orbs & Waves on Mobile */

@media (max-width: 767.98px) {

    .hero-sky-section {

        padding: 24px 0 54px !important;

        overflow: hidden !important;

        max-width: 100vw !important;

    }

    .hero-sky-section .position-absolute {

        max-width: 100vw !important;

        overflow: hidden !important;

        pointer-events: none !important;

    }

    .hero-sky-title {

        font-size: 1.55rem !important;

        line-height: 1.3 !important;

    }

    .hero-sky-subtitle {

        font-size: 0.9rem !important;

        line-height: 1.5 !important;

        margin-bottom: 18px !important;

    }

    .hero-waves-anim, svg.waves {

        height: 42px !important;

        min-height: 42px !important;

        overflow: hidden !important;

        max-width: 100% !important;

    }

    /* Domain Search Pill */

    .hero-domain-pill {

        flex-direction: column !important;

        background: #ffffff !important;

        border-radius: 14px !important;

        padding: 8px !important;

        gap: 8px !important;

        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;

        border: 1px solid rgba(255, 255, 255, 0.4) !important;

    }

    .hero-domain-pill input[type="text"] {

        width: 100% !important;

        padding: 10px 12px !important;

        text-align: center !important;

        font-size: 0.95rem !important;

        border: none !important;

    }

    .btn-hero-search {

        width: 100% !important;

        border-radius: 10px !important;

        padding: 12px !important;

        justify-content: center !important;

        font-size: 0.95rem !important;

        box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3) !important;

    }

    .domain-quick-chips {

        justify-content: center !important;

        text-align: center !important;

    }

    .domain-chip-btn {

        font-size: 0.72rem !important;

        padding: 4px 8px !important;

        margin: 2px !important;

    }

}



/* 5. Client Area & Portal Pages Mobile */

@media (max-width: 767.98px) {

    .hero-portal-page {

        padding: 20px 0 45px !important;

    }

    .hero-portal-page h1,

    .hero-portal-page .display-4 {

        font-size: 1.45rem !important;

    }

    .hero-portal-page p {

        font-size: 0.88rem !important;

    }

    /* Breadcrumb scrollable on mobile */

    .breadcrumb {

        flex-wrap: nowrap !important;

        overflow-x: auto !important;

        white-space: nowrap !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;

    }

    .breadcrumb::-webkit-scrollbar {

        display: none !important;

    }

    /* Quick Action Grid (2-columns) */

    .user-quick-kpi {

        grid-template-columns: repeat(2, 1fr) !important;

        gap: 8px !important;

    }

    /* Floating widgets scale */

    .whatsapp-float,

    a[href*="wa.me"] {

        transform: scale(0.92) !important;

        transform-origin: bottom right !important;

    }

}



/* 6. Universal Table & Modal Responsive Protection */

@media (max-width: 991.98px) {

    .table-responsive {

        -webkit-overflow-scrolling: touch !important;

        overflow-x: auto !important;

        margin-bottom: 15px !important;

    }

    .modal-dialog {

        margin: 10px auto !important;

        max-width: calc(100vw - 20px) !important;

    }

}

















/* ==========================================================================
   7. DOMAIN MANAGEMENT & CLIENT AREA DOMAINS MOBILE ENHANCEMENTS
   ========================================================================== */

/* Hero Header */
.atl-domain-hero-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(226, 232, 240, 0.8);
    position: relative;
    overflow: hidden;
}
.atl-domain-hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0066cc 0%, #0099ff 100%);
}
.atl-domain-hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(0, 102, 204, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.atl-domain-name {
    font-size: 1.45rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.02em;
    word-break: break-all;
}
.atl-domain-badges-row .badge {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 12px;
}

/* Badge soft styling */
.badge-soft-primary {
    background-color: rgba(0, 102, 204, 0.12) !important;
    color: #0066cc !important;
}
.badge-soft-success {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #059669 !important;
}
.badge-soft-warning {
    background-color: rgba(245, 158, 11, 0.12) !important;
    color: #d97706 !important;
}
.badge-soft-secondary {
    background-color: rgba(100, 116, 139, 0.12) !important;
    color: #475569 !important;
}

/* Horizontal Scrollable Nav Tabs */
.atl-domain-nav-wrapper {
    position: relative;
}
.atl-domain-nav-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 8px;
    scrollbar-width: none;
}
.atl-domain-nav-scroll::-webkit-scrollbar {
    display: none;
}
.atl-dtab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 50px;
    background: #ffffff;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none !important;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.atl-dtab-btn:hover {
    color: #0066cc;
    background: #f8fafc;
    border-color: #cbd5e1;
}
.atl-dtab-btn.active {
    background: #0066cc !important;
    color: #ffffff !important;
    border-color: #0066cc !important;
    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.35) !important;
}
.atl-dtab-btn.active i {
    color: #ffffff !important;
}
.atl-dtab-btn i {
    font-size: 0.95rem;
    color: #64748b;
    transition: color 0.2s;
}

/* Metric Cards Grid */
.atl-domain-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.atl-metric-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.atl-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.metric-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.bg-primary-soft { background: rgba(0, 102, 204, 0.1); }
.bg-warning-soft { background: rgba(245, 158, 11, 0.1); }
.bg-success-soft { background: rgba(16, 185, 129, 0.1); }
.bg-info-soft { background: rgba(14, 165, 233, 0.1); }
.bg-secondary-soft { background: rgba(100, 116, 139, 0.1); }

.metric-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.metric-label {
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 2px;
}
.metric-value {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Quick Action Touch Cards */
.atl-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.atl-action-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.atl-action-card:hover {
    background: #ffffff;
    border-color: #0066cc;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
}
.action-icon {
    font-size: 1.3rem;
    width: 38px;
    text-align: center;
    flex-shrink: 0;
}
.action-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.action-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: #1e293b;
}
.action-desc {
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.action-arrow {
    font-size: 0.82rem;
    color: #cbd5e1;
    transition: transform 0.2s;
}
.atl-action-card:hover .action-arrow {
    transform: translateX(3px);
    color: #0066cc;
}

/* Radio Card Group (Nameserver Default vs Custom) */
.atl-radio-card-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.atl-radio-card {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 0;
}
.atl-radio-card:hover {
    border-color: #94a3b8;
}
.atl-radio-card.active {
    border-color: #0066cc;
    background: rgba(0, 102, 204, 0.03);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);
}
.atl-radio-icon {
    font-size: 1.4rem;
}

/* Addons Cards Grid */
.atl-addons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.atl-addon-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
}
.addon-icon {
    font-size: 2rem;
    margin-bottom: 12px;
}
.addon-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
}
.addon-desc {
    font-size: 0.84rem;
    line-height: 1.5;
    flex: 1;
}

/* Illustration for Reglock & Autorenew */
.atl-status-big-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
}

/* Domain List Action Bar */
.atl-domains-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Empty State Circle */
.atl-empty-icon .icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Specific Optimizations */
@media (max-width: 991.98px) {
    /* Hide WHMCS default sidebar for domain management since top carousel handles it gracefully */
    .sidebar [menuitemname="Domain Details Management"],
    .sidebar [menuitemname="Domain Details Actions"] {
        display: none !important;
    }
    /* Main body becomes full width */
    .col-md-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .atl-domain-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .atl-quick-actions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .atl-addons-grid {
        grid-template-columns: 1fr !important;
    }
    .atl-radio-card-group {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 575.98px) {
    .atl-domain-metrics-grid {
        grid-template-columns: 1fr !important;
    }
    .atl-quick-actions-grid {
        grid-template-columns: 1fr !important;
    }
    .atl-domain-hero-card {
        padding: 16px !important;
    }
    .atl-domain-name {
        font-size: 1.25rem !important;
    }
    .atl-dtab-btn {
        padding: 8px 14px !important;
        font-size: 0.82rem !important;
    }
}


/* ==========================================================================
   WHMCS ORDER FORM & DOMAIN SELECTION - DARK MODE SYSTEM
   Targeting #order-standard_cart, #frmProductDomain, and .order-steps-tracker
   ========================================================================== */

/* 1. ORDER STEPS TRACKER */
[data-theme="dark"] .order-steps-tracker,
html[data-theme="dark"] .order-steps-tracker {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .order-steps-tracker .step-segment.completed,
html[data-theme="dark"] .order-steps-tracker .step-segment.completed {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
}
[data-theme="dark"] .order-steps-tracker .step-segment.completed .step-icon,
html[data-theme="dark"] .order-steps-tracker .step-segment.completed .step-icon {
    background: #10b981 !important;
    color: #ffffff !important;
}
[data-theme="dark"] .order-steps-tracker .step-segment.completed .step-tag,
html[data-theme="dark"] .order-steps-tracker .step-segment.completed .step-tag {
    color: #34d399 !important;
}
[data-theme="dark"] .order-steps-tracker .step-segment.completed .step-title,
html[data-theme="dark"] .order-steps-tracker .step-segment.completed .step-title {
    color: #f8fafc !important;
}

[data-theme="dark"] .order-steps-tracker .step-segment.active,
html[data-theme="dark"] .order-steps-tracker .step-segment.active {
    background: rgba(2, 132, 199, 0.15) !important;
    border: 1.5px solid #0284c7 !important;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.2) !important;
}
[data-theme="dark"] .order-steps-tracker .step-segment.active .step-icon,
html[data-theme="dark"] .order-steps-tracker .step-segment.active .step-icon {
    background: #0284c7 !important;
    color: #ffffff !important;
}
[data-theme="dark"] .order-steps-tracker .step-segment.active .step-tag,
html[data-theme="dark"] .order-steps-tracker .step-segment.active .step-tag {
    color: #38bdf8 !important;
}
[data-theme="dark"] .order-steps-tracker .step-segment.active .step-title,
html[data-theme="dark"] .order-steps-tracker .step-segment.active .step-title {
    color: #ffffff !important;
}

[data-theme="dark"] .order-steps-tracker .step-segment:not(.active):not(.completed),
html[data-theme="dark"] .order-steps-tracker .step-segment:not(.active):not(.completed) {
    background: #090e17 !important;
    border: 1px solid #1e293b !important;
}
[data-theme="dark"] .order-steps-tracker .step-segment:not(.active):not(.completed) .step-icon,
html[data-theme="dark"] .order-steps-tracker .step-segment:not(.active):not(.completed) .step-icon {
    background: #1e293b !important;
    color: #94a3b8 !important;
}
[data-theme="dark"] .order-steps-tracker .step-segment:not(.active):not(.completed) .step-tag,
html[data-theme="dark"] .order-steps-tracker .step-segment:not(.active):not(.completed) .step-tag {
    color: #64748b !important;
}
[data-theme="dark"] .order-steps-tracker .step-segment:not(.active):not(.completed) .step-title,
html[data-theme="dark"] .order-steps-tracker .step-segment:not(.active):not(.completed) .step-title {
    color: #94a3b8 !important;
}

[data-theme="dark"] .order-steps-tracker .step-divider,
html[data-theme="dark"] .order-steps-tracker .step-divider {
    color: #334155 !important;
}
[data-theme="dark"] .order-steps-tracker .step-divider.completed,
html[data-theme="dark"] .order-steps-tracker .step-divider.completed {
    color: #10b981 !important;
}

/* 2. ORDER CART SIDEBAR CATEGORIES */
[data-theme="dark"] #order-standard_cart .cart-sidebar .panel,
[data-theme="dark"] #order-standard_cart .card-sidebar,
html[data-theme="dark"] #order-standard_cart .cart-sidebar .panel,
html[data-theme="dark"] #order-standard_cart .card-sidebar {
    background: #131d33 !important;
    border: 1px solid #1e293b !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    border-radius: 16px !important;
    overflow: hidden;
}

[data-theme="dark"] #order-standard_cart .cart-sidebar .panel-heading,
[data-theme="dark"] #order-standard_cart .card-sidebar .card-header,
html[data-theme="dark"] #order-standard_cart .cart-sidebar .panel-heading,
html[data-theme="dark"] #order-standard_cart .card-sidebar .card-header {
    background: #0f172a !important;
    border-bottom: 1px solid #1e293b !important;
    color: #f8fafc !important;
    padding: 14px 18px !important;
}
[data-theme="dark"] #order-standard_cart .cart-sidebar .panel-title,
html[data-theme="dark"] #order-standard_cart .cart-sidebar .panel-title {
    color: #f8fafc !important;
}

[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group,
html[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group {
    background: #131d33 !important;
}

[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item,
html[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item {
    background-color: transparent !important;
    color: #cbd5e1 !important;
    border-color: #1e293b !important;
    font-weight: 600 !important;
    padding: 12px 18px !important;
    transition: all 0.2s ease !important;
}

[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item:hover,
html[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item:hover {
    background-color: #1e293b !important;
    color: #38bdf8 !important;
    padding-left: 22px !important;
}

[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item.active,
html[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item.active {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.25) 0%, rgba(2, 132, 199, 0.1) 100%) !important;
    color: #38bdf8 !important;
    border-left: 3px solid #0284c7 !important;
    font-weight: 700 !important;
}

[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item .badge,
html[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item .badge {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
}
[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item.active .badge,
html[data-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item.active .badge {
    background-color: #0284c7 !important;
    color: #ffffff !important;
}

/* 3. DOMAIN SELECTION OPTIONS (CONFIGURE PRODUCT DOMAIN) */
[data-theme="dark"] #frmProductDomain .domain-selection-options,
[data-theme="dark"] #order-standard_cart .domain-selection-options,
html[data-theme="dark"] #frmProductDomain .domain-selection-options,
html[data-theme="dark"] #order-standard_cart .domain-selection-options {
    background: #131d33 !important;
    border: 1.5px solid #1e293b !important;
    border-radius: 18px !important;
    padding: 24px !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] #frmProductDomain .option,
[data-theme="dark"] #order-standard_cart .domain-selection-options .option,
html[data-theme="dark"] #frmProductDomain .option,
html[data-theme="dark"] #order-standard_cart .domain-selection-options .option {
    background: #0f172a !important;
    border: 1.5px solid #1e293b !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin-bottom: 12px !important;
    transition: all 0.2s ease !important;
    color: #f8fafc !important;
}

[data-theme="dark"] #frmProductDomain .option:hover,
[data-theme="dark"] #order-standard_cart .domain-selection-options .option:hover,
html[data-theme="dark"] #frmProductDomain .option:hover,
html[data-theme="dark"] #order-standard_cart .domain-selection-options .option:hover {
    background: #162238 !important;
    border-color: #334155 !important;
}

[data-theme="dark"] #frmProductDomain .option.active,
[data-theme="dark"] #frmProductDomain .option.option-selected,
[data-theme="dark"] #order-standard_cart .domain-selection-options .option-selected,
html[data-theme="dark"] #frmProductDomain .option.active,
html[data-theme="dark"] #frmProductDomain .option.option-selected,
html[data-theme="dark"] #order-standard_cart .domain-selection-options .option-selected {
    background: #162444 !important;
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 1px #0284c7, 0 4px 15px rgba(2, 132, 199, 0.15) !important;
}

[data-theme="dark"] #frmProductDomain .option label,
[data-theme="dark"] #order-standard_cart .domain-selection-options .option label,
html[data-theme="dark"] #frmProductDomain .option label,
html[data-theme="dark"] #order-standard_cart .domain-selection-options .option label {
    color: #f8fafc !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    cursor: pointer;
}

[data-theme="dark"] #frmProductDomain .domain-input-group,
[data-theme="dark"] #order-standard_cart .domain-input-group,
html[data-theme="dark"] #frmProductDomain .domain-input-group,
html[data-theme="dark"] #order-standard_cart .domain-input-group {
    border-top: 1px dashed #1e293b !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
}

[data-theme="dark"] #frmProductDomain .input-group-addon,
[data-theme="dark"] #frmProductDomain .input-group-prepend .input-group-text,
[data-theme="dark"] #order-standard_cart .input-group-addon,
[data-theme="dark"] #order-standard_cart .input-group-prepend .input-group-text,
html[data-theme="dark"] #frmProductDomain .input-group-addon,
html[data-theme="dark"] #frmProductDomain .input-group-prepend .input-group-text,
html[data-theme="dark"] #order-standard_cart .input-group-addon,
html[data-theme="dark"] #order-standard_cart .input-group-prepend .input-group-text {
    background: #1e293b !important;
    border: 1.5px solid #334155 !important;
    border-right: none !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

[data-theme="dark"] #frmProductDomain input[type="text"],
[data-theme="dark"] #frmProductDomain #registersld,
[data-theme="dark"] #frmProductDomain #transfersld,
[data-theme="dark"] #frmProductDomain #owndomainsld,
[data-theme="dark"] #order-standard_cart input[type="text"],
html[data-theme="dark"] #frmProductDomain input[type="text"],
html[data-theme="dark"] #frmProductDomain #registersld,
html[data-theme="dark"] #frmProductDomain #transfersld,
html[data-theme="dark"] #frmProductDomain #owndomainsld,
html[data-theme="dark"] #order-standard_cart input[type="text"] {
    background-color: #0b1120 !important;
    color: #f8fafc !important;
    border: 1.5px solid #334155 !important;
}

[data-theme="dark"] #frmProductDomain input[type="text"]:focus,
html[data-theme="dark"] #frmProductDomain input[type="text"]:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25) !important;
}

[data-theme="dark"] #frmProductDomain select,
[data-theme="dark"] #frmProductDomain #registertld,
[data-theme="dark"] #frmProductDomain #transfertld,
[data-theme="dark"] #frmProductDomain #owndomaintld,
[data-theme="dark"] #order-standard_cart select,
html[data-theme="dark"] #frmProductDomain select,
html[data-theme="dark"] #frmProductDomain #registertld,
html[data-theme="dark"] #frmProductDomain #transfertld,
html[data-theme="dark"] #frmProductDomain #owndomaintld,
html[data-theme="dark"] #order-standard_cart select {
    background-color: #0b1120 !important;
    color: #f8fafc !important;
    border: 1.5px solid #334155 !important;
}
[data-theme="dark"] #frmProductDomain select option,
html[data-theme="dark"] #frmProductDomain select option {
    background-color: #0b1120 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] #frmProductDomain #btnCheckAvailability,
[data-theme="dark"] #frmProductDomain button[type="submit"],
html[data-theme="dark"] #frmProductDomain #btnCheckAvailability,
html[data-theme="dark"] #frmProductDomain button[type="submit"] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.3) !important;
    font-weight: 700 !important;
}

[data-theme="dark"] #btnCompleteProductConfig,
[data-theme="dark"] .btn-order-continue,
[data-theme="dark"] #order-standard_cart #btnCompleteProductConfig,
html[data-theme="dark"] #btnCompleteProductConfig,
html[data-theme="dark"] .btn-order-continue,
html[data-theme="dark"] #order-standard_cart #btnCompleteProductConfig {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.35) !important;
}

/* 4. DOMAIN RESULTS & SUGGESTIONS */
[data-theme="dark"] #domainSearchResults,
[data-theme="dark"] .domain-checker-result-headline,
[data-theme="dark"] .domain-lookup-primary-results,
html[data-theme="dark"] #domainSearchResults,
html[data-theme="dark"] .domain-checker-result-headline,
html[data-theme="dark"] .domain-lookup-primary-results {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    border-radius: 14px !important;
    color: #f8fafc !important;
    padding: 18px !important;
}

[data-theme="dark"] .domain-available,
html[data-theme="dark"] .domain-available {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
    color: #34d399 !important;
    border-radius: 12px !important;
}

[data-theme="dark"] .domain-unavailable,
html[data-theme="dark"] .domain-unavailable {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1.5px solid rgba(239, 68, 68, 0.35) !important;
    color: #f87171 !important;
    border-radius: 12px !important;
}

[data-theme="dark"] .domain-suggestion.list-group-item,
[data-theme="dark"] .suggested-domains .list-group-item,
html[data-theme="dark"] .domain-suggestion.list-group-item,
html[data-theme="dark"] .suggested-domains .list-group-item {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    color: #f8fafc !important;
    margin-bottom: 6px !important;
    border-radius: 10px !important;
}

[data-theme="dark"] .domain-suggestion.list-group-item:hover,
html[data-theme="dark"] .domain-suggestion.list-group-item:hover {
    background: #162444 !important;
    border-color: #0284c7 !important;
}

[data-theme="dark"] .domain-price,
html[data-theme="dark"] .domain-price {
    color: #38bdf8 !important;
    font-weight: 800 !important;
}

/* 5. CONFIGURE PRODUCT & SUMMARY */
[data-theme="dark"] #order-standard_cart .product-info,
[data-theme="dark"] #order-standard_cart .field-container,
[data-theme="dark"] #order-standard_cart #productConfigurableOptions,
html[data-theme="dark"] #order-standard_cart .product-info,
html[data-theme="dark"] #order-standard_cart .field-container,
html[data-theme="dark"] #order-standard_cart #productConfigurableOptions {
    background: #131d33 !important;
    border: 1.5px solid #1e293b !important;
    border-radius: 16px !important;
    color: #cbd5e1 !important;
    padding: 24px !important;
}

[data-theme="dark"] #order-standard_cart #orderSummary,
[data-theme="dark"] #order-standard_cart .order-summary,
html[data-theme="dark"] #order-standard_cart #orderSummary,
html[data-theme="dark"] #order-standard_cart .order-summary {
    background: #131d33 !important;
    border: 1.5px solid #1e293b !important;
    border-radius: 16px !important;
    color: #cbd5e1 !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] #order-standard_cart .order-summary h2,
html[data-theme="dark"] #order-standard_cart .order-summary h2 {
    color: #f8fafc !important;
    border-bottom-color: #1e293b !important;
}

[data-theme="dark"] #order-standard_cart .summary-container .product-name,
html[data-theme="dark"] #order-standard_cart .summary-container .product-name {
    color: #f8fafc !important;
}

[data-theme="dark"] #order-standard_cart .summary-container .product-group,
html[data-theme="dark"] #order-standard_cart .summary-container .product-group {
    color: #94a3b8 !important;
}

[data-theme="dark"] #order-standard_cart .order-summary .total-due-today,
[data-theme="dark"] #order-standard_cart .total-due-today,
html[data-theme="dark"] #order-standard_cart .order-summary .total-due-today,
html[data-theme="dark"] #order-standard_cart .total-due-today {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    border-radius: 12px !important;
}

[data-theme="dark"] #order-standard_cart .total-due-today .amt,
html[data-theme="dark"] #order-standard_cart .total-due-today .amt {
    color: #38bdf8 !important;
}

/* 6. VIEW CART & CHECKOUT */
[data-theme="dark"] #order-standard_cart .view-cart-items,
[data-theme="dark"] #order-standard_cart .table-responsive,
html[data-theme="dark"] #order-standard_cart .view-cart-items,
html[data-theme="dark"] #order-standard_cart .table-responsive {
    background: #131d33 !important;
    border: 1.5px solid #1e293b !important;
    border-radius: 16px !important;
}

[data-theme="dark"] #order-standard_cart .table-cart thead th,
html[data-theme="dark"] #order-standard_cart .table-cart thead th {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-bottom: 1px solid #1e293b !important;
}

[data-theme="dark"] #order-standard_cart .table-cart tbody tr,
html[data-theme="dark"] #order-standard_cart .table-cart tbody tr {
    background: #131d33 !important;
    color: #cbd5e1 !important;
    border-bottom: 1px solid #1e293b !important;
}

[data-theme="dark"] #order-standard_cart .promo-code-container,
html[data-theme="dark"] #order-standard_cart .promo-code-container {
    background: #0f172a !important;
    border: 1px solid #1e293b !important;
    border-radius: 12px !important;
}