/* ======================================================
   1. ROOT VARIABLES & BASE SETUP
   ====================================================== */
:root {
    /* Color Palette */
    --slate-900: #0f172a; --slate-800: #1e293b; --slate-700: #334155;
    --slate-600: #475569; --slate-300: #cbd5e1; --white: #f8fafc;
    --sky: #0ea5e9; --sky-dark: #0284c7; --green: #22c55e;
    --amber-light: #fcd34d;
}

/* Base body styling */
body {
    background-color: var(--slate-900); font-family: 'Inter', sans-serif;
    scroll-behavior: smooth; overflow-x: hidden; color: var(--slate-300);
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--slate-800); }
::-webkit-scrollbar-thumb { background: var(--slate-700); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--sky); }

/* ======================================================
   2. HEADER & SHARED ELEMENTS
   ====================================================== */
.main-header {
    background-color: rgba(15, 23, 42, 0.85); backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--slate-800);
}
#logo img { transition: all 0.4s ease; }
#logo:hover img { transform: scale(1.05) rotate(-2deg); filter: drop-shadow(0 0 10px rgba(14, 165, 233, 0.4)); }
#theme-toggle:hover i { transform: scale(1.1) rotate(180deg); color: var(--sky); }

/* ======================================================
   3. ADVANCED PREMIUM PAGE STYLING
   ====================================================== */
.premium-title {
    background: linear-gradient(90deg, var(--sky), var(--white), var(--amber-light));
    background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; animation: gradientShine 5s linear infinite;
}
@keyframes gradientShine { to { background-position: -200% center; } }

/* --- Monthly/Yearly Toggle Switch --- */
.switch { position: relative; display: inline-block; width: 60px; height: 34px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--slate-700); transition: .4s; border-radius: 34px;
}
.slider:before {
    position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px;
    background-color: white; transition: .4s; border-radius: 50%;
}
input:checked + .slider { background-color: var(--sky); }
input:checked + .slider:before { transform: translateX(26px); }

/* --- General Pricing Card --- */
.pricing-card {
    background-color: var(--slate-800); border: 1px solid var(--slate-700);
    border-radius: 0.75rem; padding: 1.5rem; text-align: center;
    transition: all 0.3s ease; display: flex; flex-direction: column;
}
.pricing-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.3); }

.card-header { padding-bottom: 1.5rem; border-bottom: 1px solid var(--slate-700); }
.tier-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.tier-name { font-size: 1.8rem; font-weight: 700; color: white; }
.price-tag { font-size: 2.2rem; font-weight: 800; color: white; margin-top: 0.5rem; }
.billing-cycle { color: var(--slate-400); font-weight: 500; height: 1.5rem; transition: all 0.3s ease; }

.pricing-features {
    list-style: none; padding: 0; margin: 1.5rem 0; text-align: left;
    display: flex; flex-direction: column; gap: 0.75rem;
    flex-grow: 1; /* Pushes button to bottom */
}
.pricing-features li { display: flex; align-items: center; gap: 0.5rem; }
.pricing-features .fa-check-circle { color: var(--green); }

.cta-button {
    width: 100%; border-radius: 0.5rem; font-weight: bold; padding: 0.8rem;
    border: none; cursor: pointer; transition: all 0.3s ease;
}

.included-tools { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--slate-700); }
.tools-title { font-weight: 600; color: var(--sky); margin-bottom: 0.75rem; }
.tools-list { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.tools-list span { background: var(--slate-700); color: var(--slate-300); padding: 0.2rem 0.6rem; border-radius: 5px; font-size: 0.8rem; }

/* --- Tier-Specific Styling --- */
.tier-bronze .tier-icon { color: #CD7F32; }
.tier-bronze .cta-button { background-color: #CD7F32; color: white; }
.tier-bronze .cta-button:hover { background-color: #a46628; }

.tier-gold.popular { border: 2px solid #FFD700; transform: scale(1.05); }
.tier-gold .tier-icon, .gold-badge { color: #FFD700; }
.tier-gold .cta-button { background-color: #FFD700; color: #1e293b; }
.tier-gold .cta-button:hover { background-color: #d4b50d; }
.popular-badge {
    font-size: 0.8rem; font-weight: bold; padding: 0.5rem 3rem; transform: rotate(45deg);
    position: absolute; top: 1.5rem; right: -45px; background-color: #FFD700; color: #1e293b;
}

.tier-diamond .tier-icon, .diamond-badge { color: #b9f2ff; }
.tier-diamond .cta-button { background: linear-gradient(45deg, #79e5ff, #00c3ff); color: white; }
.tier-diamond .cta-button:hover { box-shadow: 0 0 15px #79e5ff; }

.tier-conqueror .tier-icon, .conqueror-badge {
    background: linear-gradient(45deg, #FFD700, #f54242, #b9f2ff);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tier-conqueror .cta-button { background: linear-gradient(45deg, #c9a400, #a02828, #007c9b); color: white; }
.tier-conqueror .cta-button:hover { box-shadow: 0 0 20px #c9a400, 0 0 20px #a02828; }

/* ======================================================
   4. LIGHT MODE THEME
   ====================================================== */
body.light-mode {
    --slate-900: #f1f5f9; --slate-800: #ffffff; --slate-700: #e2e8f0;
    --slate-600: #94a3b8; --slate-300: #475569; --white: #0f172a;
}
body.light-mode .main-header { background-color: rgba(255, 255, 255, 0.85); border-bottom: 1px solid var(--slate-700); }
body.light-mode .nav-link, body.light-mode #theme-toggle, body.light-mode .billing-cycle { color: var(--slate-300); }
body.light-mode .premium-title {
     background: linear-gradient(90deg, #0284c7, #0f172a, #7c2d12);
     background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.light-mode .pricing-card { box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
body.light-mode .pricing-card:hover { box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
body.light-mode .tier-gold.popular { box-shadow: 0 0 25px rgba(255, 215, 0, 0.3); }
body.light-mode .switch .slider { background-color: var(--slate-600); }
body.light-mode input:checked + .slider { background-color: var(--sky); }
body.light-mode .slider:before { background-color: var(--slate-800); }
body.light-mode .tools-list span { background: var(--slate-700); color: var(--white); }