/* ============================================================
   GI HOSTINGS — PROFESSIONAL THEME
   Light corporate look — white & purple palette
   ============================================================ */

/* ── Page transition overlay ── */
#gi-page-transition {
    position: fixed; inset: 0; z-index: 9998;
    background: #f9fafb;
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
}
#gi-page-transition.active { opacity: 1; pointer-events: all; }

/* ── Scroll progress bar ── */
#gi-scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: linear-gradient(90deg, #7c3aed, #a855f7, #7c3aed);
    background-size: 200% 100%;
    animation: progressShimmer 2s linear infinite;
    z-index: 9997; transition: width 0.1s linear;
}
@keyframes progressShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Page loader — white to match pro theme ── */
#gi-loader {
    position: fixed; inset: 0; z-index: 9999;
    background: #ffffff;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.4s ease;
}
#gi-loader.hidden { opacity: 0; pointer-events: none; }
.gi-loader-ring {
    width: 48px; height: 48px;
    border: 3px solid rgba(124,58,237,0.15);
    border-top-color: #7c3aed;
    border-radius: 50%;
    animation: loaderSpin 0.8s linear infinite;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }

/* ── CSS Variables ── */
:root {
    --pro-purple: #7c3aed;
    --pro-purple-light: #8b5cf6;
    --pro-purple-dark: #6d28d9;
    --pro-purple-50: #f5f3ff;
    --pro-purple-100: #ede9fe;
    --pro-white: #ffffff;
    --pro-gray-50: #f9fafb;
    --pro-gray-100: #f3f4f6;
    --pro-gray-200: #e5e7eb;
    --pro-gray-300: #d1d5db;
    --pro-gray-400: #9ca3af;
    --pro-gray-500: #6b7280;
    --pro-gray-600: #4b5563;
    --pro-gray-700: #374151;
    --pro-gray-800: #1f2937;
    --pro-gray-900: #111827;
    --pro-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --pro-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
    --pro-shadow-lg: 0 10px 40px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
    --pro-shadow-purple: 0 8px 30px rgba(124,58,237,0.2);
    --pro-radius: 12px;
    --pro-radius-lg: 16px;
    --pro-radius-xl: 20px;
}

/* ── Base ── */
body {
    background: var(--pro-gray-50) !important;
    color: var(--pro-gray-800) !important;
    font-family: 'Inter', sans-serif !important;
}

/* ── Scroll reveal animations ── */
.pro-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s cubic-bezier(.22,1,.36,1), transform 0.55s cubic-bezier(.22,1,.36,1);
}
.pro-reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Navbar ── */
.navbar {
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--pro-gray-200) !important;
    box-shadow: var(--pro-shadow-sm) !important;
}
.navbar.scrolled {
    background: rgba(255,255,255,0.98) !important;
    box-shadow: var(--pro-shadow) !important;
}
.nav-link { color: var(--pro-gray-600) !important; font-weight: 500 !important; border-radius: 8px !important; }
.nav-link:hover { color: var(--pro-purple) !important; background: var(--pro-purple-50) !important; }
.navbar span.text-xl, .navbar .gradient-text, .navbar span[class*="gradient"] {
    background: linear-gradient(135deg, var(--pro-purple), #a855f7) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
}

/* Dropdown */
.dropdown-menu {
    background: var(--pro-white) !important;
    border: 1px solid var(--pro-gray-200) !important;
    box-shadow: var(--pro-shadow-lg) !important;
    border-radius: var(--pro-radius-lg) !important;
}
.dropdown-item { color: var(--pro-gray-600) !important; }
.dropdown-item:hover { color: var(--pro-purple) !important; background: var(--pro-purple-50) !important; }

/* Mobile menu */
#mobile-menu { background: var(--pro-white) !important; border-top: 1px solid var(--pro-gray-200) !important; }
.mobile-nav-link { color: var(--pro-gray-600) !important; }
.mobile-nav-link:hover { color: var(--pro-purple) !important; background: var(--pro-purple-50) !important; }

/* Search */
.search-input {
    background: var(--pro-gray-100) !important;
    border: 1px solid var(--pro-gray-200) !important;
    color: var(--pro-gray-800) !important;
}
.search-input:focus {
    background: var(--pro-white) !important;
    border-color: var(--pro-purple) !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
}
.search-input::placeholder { color: var(--pro-gray-400) !important; }

/* Currency switcher */
#currency-dropdown button {
    background: var(--pro-gray-100) !important;
    border: 1px solid var(--pro-gray-200) !important;
    color: var(--pro-gray-700) !important;
}

/* Cart */
.navbar .fa-shopping-cart { color: var(--pro-gray-500) !important; }
.navbar a:hover .fa-shopping-cart { color: var(--pro-purple) !important; }

/* User avatar */
.navbar [style*="linear-gradient(135deg,#7c3aed"] {
    background: linear-gradient(135deg, var(--pro-purple), #a855f7) !important;
}

/* ── Buttons ── */
.btn-primary {
    background: linear-gradient(135deg, var(--pro-purple), var(--pro-purple-light)) !important;
    color: #fff !important;
    box-shadow: var(--pro-shadow-purple) !important;
    border: none !important;
    font-weight: 600 !important;
}
.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 35px rgba(124,58,237,0.35) !important;
    color: #fff !important;
}
.btn-ghost {
    background: var(--pro-white) !important;
    color: var(--pro-gray-700) !important;
    border: 1px solid var(--pro-gray-300) !important;
}
.btn-ghost:hover { color: var(--pro-purple) !important; border-color: var(--pro-purple) !important; background: var(--pro-purple-50) !important; }
.btn-outline {
    background: transparent !important;
    color: var(--pro-purple) !important;
    border: 1.5px solid var(--pro-purple) !important;
}
.btn-outline:hover { background: var(--pro-purple) !important; color: #fff !important; }

/* ── Cards ── */
.card {
    background: var(--pro-white) !important;
    border: 1px solid var(--pro-gray-200) !important;
    border-radius: var(--pro-radius-xl) !important;
    box-shadow: var(--pro-shadow-sm) !important;
}
.card:hover {
    border-color: rgba(124,58,237,0.25) !important;
    box-shadow: 0 20px 60px rgba(124,58,237,0.12), 0 4px 16px rgba(0,0,0,0.06) !important;
    transform: translateY(-4px) !important;
}
.card-glass {
    background: rgba(255,255,255,0.85) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid var(--pro-gray-200) !important;
}

/* Pricing cards */
.pricing-card {
    background: var(--pro-white) !important;
    border: 1px solid var(--pro-gray-200) !important;
    box-shadow: var(--pro-shadow) !important;
}
.pricing-card:hover {
    border-color: var(--pro-purple) !important;
    box-shadow: var(--pro-shadow-lg), var(--pro-shadow-purple) !important;
    transform: translateY(-6px) !important;
}
.pricing-card.featured {
    background: linear-gradient(135deg, var(--pro-purple-50), #faf5ff) !important;
    border-color: var(--pro-purple) !important;
    box-shadow: var(--pro-shadow-purple) !important;
}

/* Stat cards */
.stat-card, .dash-stat {
    background: var(--pro-white) !important;
    border: 1px solid var(--pro-gray-200) !important;
    box-shadow: var(--pro-shadow-sm) !important;
}
.stat-card:hover, .dash-stat:hover {
    border-color: rgba(124,58,237,0.3) !important;
    box-shadow: var(--pro-shadow) !important;
    transform: translateY(-2px) !important;
}

/* ── Hero ── */
.hero-gradient {
    background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 30%, #ede9fe 60%, #fff 100%) !important;
}
.hero-glow { background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 70%) !important; }

/* ── Section headers ── */
.section-tag {
    background: var(--pro-purple-50) !important;
    border: 1px solid rgba(124,58,237,0.2) !important;
    color: var(--pro-purple) !important;
}
.section-title { color: var(--pro-gray-900) !important; }
.section-subtitle { color: var(--pro-gray-500) !important; }

/* ── Gradient text ── */
.gradient-text {
    background: linear-gradient(135deg, var(--pro-purple), #a855f7) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ── Badges ── */
.badge-violet { background: var(--pro-purple-100) !important; color: var(--pro-purple-dark) !important; border-color: rgba(124,58,237,0.25) !important; }
.badge-cyan { background: #ecfeff !important; color: #0891b2 !important; border-color: rgba(8,145,178,0.25) !important; }
.badge-green { background: #f0fdf4 !important; color: #16a34a !important; border-color: rgba(22,163,74,0.25) !important; }
.badge-red { background: #fef2f2 !important; color: #dc2626 !important; border-color: rgba(220,38,38,0.25) !important; }
.badge-yellow { background: #fffbeb !important; color: #d97706 !important; border-color: rgba(217,119,6,0.25) !important; }

/* ── Forms ── */
.form-input {
    background: var(--pro-white) !important;
    border: 1.5px solid var(--pro-gray-300) !important;
    color: var(--pro-gray-800) !important;
}
.form-input:focus {
    background: var(--pro-white) !important;
    border-color: var(--pro-purple) !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
}
.form-input::placeholder { color: var(--pro-gray-400) !important; }
.form-label { color: var(--pro-gray-600) !important; font-weight: 500 !important; }

/* ── Messages ── */
.message-toast {
    background: var(--pro-white) !important;
    border: 1px solid var(--pro-gray-200) !important;
    box-shadow: var(--pro-shadow-lg) !important;
    color: var(--pro-gray-700) !important;
}
.message-toast p { color: var(--pro-gray-700) !important; }

/* ── Tables ── */
.data-table th {
    color: var(--pro-gray-500) !important;
    border-bottom: 1px solid var(--pro-gray-200) !important;
    background: var(--pro-gray-50) !important;
}
.data-table td { color: var(--pro-gray-600) !important; border-bottom: 1px solid var(--pro-gray-100) !important; }
.data-table tr:hover td { background: var(--pro-purple-50) !important; }

/* ── Footer ── */
footer {
    background: linear-gradient(180deg, var(--pro-gray-900) 0%, #0a0a0a 100%) !important;
    border-top: 1px solid var(--pro-gray-800) !important;
}
footer h3 { color: var(--pro-white) !important; }
footer p, footer .text-gray-400 { color: var(--pro-gray-400) !important; }
footer a.text-gray-400:hover { color: var(--pro-white) !important; }
.footer-link { color: var(--pro-gray-400) !important; }
.footer-link:hover { color: var(--pro-white) !important; }

/* Social icons */
.social-icon-modern {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: var(--pro-gray-400) !important;
}
.social-icon-modern:hover {
    background: linear-gradient(135deg, var(--pro-purple), #a855f7) !important;
    border-color: var(--pro-purple) !important;
    color: #fff !important;
    box-shadow: var(--pro-shadow-purple) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--pro-gray-100); }
::-webkit-scrollbar-thumb { background: var(--pro-gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--pro-purple); }

/* ── Divider ── */
.divider { background: linear-gradient(90deg, transparent, var(--pro-gray-200), transparent) !important; }

/* ── Intro animation override — white/purple theme ── */
#gi-intro {
    background: #f5f3ff !important;
}
#gi-intro #gi-tag { color: #7c3aed !important; }
#gi-intro #gi-g, #gi-intro #gi-i {
    background: linear-gradient(135deg,#7c3aed,#a855f7) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
#gi-intro #gi-h, #gi-intro #gi-o, #gi-intro #gi-s, #gi-intro #gi-t,
#gi-intro #gi-i2, #gi-intro #gi-n, #gi-intro #gi-g2, #gi-intro #gi-s2 {
    color: #1f2937 !important;
    -webkit-text-fill-color: #1f2937 !important;
}

/* ── Verify banner ── */
#verify-banner {
    background: linear-gradient(90deg, rgba(124,58,237,0.06), rgba(124,58,237,0.03)) !important;
    border-bottom: 1px solid rgba(124,58,237,0.15) !important;
}

/* ── Feature checks ── */
.feature-check { color: var(--pro-gray-600) !important; }
.feature-check i { color: #16a34a !important; }

/* ── Trust badges ── */
.trust-badge {
    background: var(--pro-white) !important;
    border: 1px solid var(--pro-gray-200) !important;
    box-shadow: var(--pro-shadow-sm) !important;
}
.trust-badge:hover { border-color: rgba(124,58,237,0.25) !important; box-shadow: var(--pro-shadow) !important; }
.trust-title { color: var(--pro-gray-800) !important; }
.trust-desc { color: var(--pro-gray-500) !important; }

/* ── Inline dark backgrounds → white (exclude #gi-intro) ── */
:not(#gi-intro):not(#gi-intro *)[style*="background:#030712"],
:not(#gi-intro):not(#gi-intro *)[style*="background: #030712"],
:not(#gi-intro):not(#gi-intro *)[style*="background:#0f172a"],
:not(#gi-intro):not(#gi-intro *)[style*="background: #0f172a"],
:not(#gi-intro):not(#gi-intro *)[style*="background:#111827"],
:not(#gi-intro):not(#gi-intro *)[style*="background: #111827"],
:not(#gi-intro):not(#gi-intro *)[style*="background:#0a0f1e"],
:not(#gi-intro):not(#gi-intro *)[style*="background: #0a0f1e"] {
    background: var(--pro-white) !important;
    color: var(--pro-gray-800) !important;
}
:not(#gi-intro):not(#gi-intro *)[style*="background:rgba(15,23,42"],
:not(#gi-intro):not(#gi-intro *)[style*="background: rgba(15,23,42"],
:not(#gi-intro):not(#gi-intro *)[style*="background:rgba(3,7,18"],
:not(#gi-intro):not(#gi-intro *)[style*="background: rgba(3,7,18"],
:not(#gi-intro):not(#gi-intro *)[style*="background:rgba(10,15,30"],
:not(#gi-intro):not(#gi-intro *)[style*="background: rgba(10,15,30"] {
    background: var(--pro-white) !important;
}

/* ── Pricing card non-popular Get Started button — keep proper purple ── */
.pricing-card a.btn-primary[style*="background:rgba(124,58,237,0.15)"],
.pricing-card a.btn-primary[style*="background:rgba(124,58,237,0.12)"] {
    background: linear-gradient(135deg, var(--pro-purple), var(--pro-purple-light)) !important;
    border: none !important;
    box-shadow: var(--pro-shadow-purple) !important;
    color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
}

/* ── Inline text colors ── */
[style*="color:#fff"]:not(button):not(a):not(.btn-primary):not(.btn-primary *):not(footer *):not(#gi-intro *) {
    color: var(--pro-gray-800) !important;
}
[style*="color:#94a3b8"], [style*="color: #94a3b8"],
[style*="color:#64748b"], [style*="color: #64748b"],
[style*="color:#475569"], [style*="color: #475569"] {
    color: var(--pro-gray-500) !important;
}
[style*="color:#e2e8f0"], [style*="color: #e2e8f0"] { color: var(--pro-gray-700) !important; }
[style*="color:#a78bfa"], [style*="color: #a78bfa"] { color: var(--pro-purple) !important; }

/* ── Section backgrounds ── */
section { background: transparent !important; }
section[style*="background:rgba(15,23,42"],
section[style*="background: rgba(15,23,42"],
section[style*="background:rgba(3,7,18"] {
    background: var(--pro-gray-50) !important;
}

/* ── GI Panel server card inner elements ── */
.server-card [style*="background:rgba(255,255,255,0.04)"],
.server-card [style*="background:rgba(255,255,255,0.03)"] {
    background: var(--pro-gray-50) !important;
    border: 1px solid var(--pro-gray-200) !important;
}

/* ── Checkout / order pages ── */
.card[style*="padding:24px"] {
    background: var(--pro-white) !important;
    border: 1px solid var(--pro-gray-200) !important;
    box-shadow: var(--pro-shadow-sm) !important;
}

/* ── Domain payment page ── */
[style*="background:#0f172a;border:1px solid rgba(255,255,255,0.07)"] {
    background: var(--pro-white) !important;
    border: 1px solid var(--pro-gray-200) !important;
    box-shadow: var(--pro-shadow-sm) !important;
}

/* ── Smooth transitions on all interactive elements ── */
a, button, .card, .pricing-card, .stat-card, .nav-item, .gp-nav-item {
    transition: all 0.2s cubic-bezier(.22,1,.36,1) !important;
}

/* ── Featured badge pulse ── */
@keyframes proPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0.3); }
    50% { box-shadow: 0 0 0 8px rgba(124,58,237,0); }
}
.pricing-card.featured .badge-violet { animation: proPulse 2s ease-in-out infinite; }

/* ── Stagger reveal delays ── */
.pro-reveal:nth-child(1) { transition-delay: 0s; }
.pro-reveal:nth-child(2) { transition-delay: 0.08s; }
.pro-reveal:nth-child(3) { transition-delay: 0.16s; }
.pro-reveal:nth-child(4) { transition-delay: 0.24s; }
.pro-reveal:nth-child(5) { transition-delay: 0.32s; }
.pro-reveal:nth-child(6) { transition-delay: 0.40s; }

/* ── Back to top ── */
.back-to-top {
    background: linear-gradient(135deg, var(--pro-purple), #a855f7) !important;
    box-shadow: var(--pro-shadow-purple) !important;
}