/* ============================================================
   ISIWARE — Premium Vedic Astrology CSS System
   Version 3.0 — Ultra Premium Glassmorphic UI
   ============================================================ */

/* ── Dark Theme (Default) ── */
:root,
[data-theme="dark"] {
    --gold-primary: #d4af37;
    --gold-light: #f3e5ab;
    --gold-dark: #aa7c11;
    --gold-gradient: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);

    --bg-dark: #07090f;
    --bg-page: #07090f;
    --bg-card: rgba(12, 16, 28, 0.75);
    --bg-card-hover: rgba(22, 28, 48, 0.88);
    --bg-input: rgba(255, 255, 255, 0.04);

    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --text-heading: #ffffff;

    --border-glass: rgba(255, 255, 255, 0.07);
    --border-gold: rgba(212, 175, 55, 0.25);
    --glow-gold: rgba(212, 175, 55, 0.15);
    --shadow-card: 0 32px 80px rgba(0, 0, 0, 0.6);
    --navbar-bg: rgba(7, 9, 15, 0.55);

    --error: #ff6f6f;
    --success: #51cf66;
    --radius-xl: 24px;
    --radius-lg: 16px;
    --radius-md: 12px;

    /* Canvas-visible bg (for pages without canvas) */
    --body-bg: #07090f;
    --body-bg-gradient: radial-gradient(ellipse 180% 80% at 50% -5%, rgba(50, 20, 120, 0.25) 0%, transparent 65%);
    --canvas-display: block;
}

/* ── Premium Light Theme (Ivory & Gold) ── */
[data-theme="light"] {
    --gold-primary: #a87b00;
    --gold-light: #8a6500;
    --gold-dark: #654a00;
    --gold-gradient: linear-gradient(135deg, #a87b00 0%, #d4af37 25%, #8a6500 50%, #d4af37 75%, #654a00 100%);

    --bg-dark: #fbfaf7;
    --bg-page: #fdfdfa;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-card-hover: rgba(255, 255, 255, 0.98);
    --bg-input: rgba(255, 255, 255, 0.7);

    --text-main: #3d2f24;
    --text-muted: #7b6a58;
    --text-heading: #24160d;

    --border-glass: rgba(212, 175, 55, 0.25);
    --border-gold: rgba(212, 175, 55, 0.45);
    --glow-gold: rgba(212, 175, 55, 0.12);
    --shadow-card: 0 16px 40px rgba(60, 40, 10, 0.06);
    --navbar-bg: rgba(255, 253, 248, 0.88);
    --error: #d93025;
    --success: #188038;

    --body-bg: #fdfdf9;
    --body-bg-gradient: radial-gradient(ellipse 180% 80% at 50% -5%, rgba(212, 175, 55, 0.08) 0%, transparent 65%);
    --canvas-display: block;
    /* The canvas now dynamically swaps to elegant gold stars! */
}


/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ─────────────────────────────────────────────────
   THEME-AWARE BODY (responds to [data-theme])
   ───────────────────────────────────────────────── */
body {
    background-color: var(--body-bg);
    background-image: var(--body-bg-gradient);
    color: var(--text-main);
    transition: background-color 0.4s ease, color 0.35s ease;
}

/* Light theme glass container overrides */
[data-theme="light"] .isiware-glass-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(253, 250, 243, 0.96) 100%);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 20px 60px rgba(40, 25, 5, 0.06), 0 0 40px rgba(212, 175, 55, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
}

[data-theme="light"] .isiware-form input,
[data-theme="light"] .isiware-form select,
[data-theme="light"] .isiware-form textarea {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(212, 175, 55, 0.25);
    color: var(--text-main);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .isiware-form input:focus,
[data-theme="light"] .isiware-form select:focus {
    background: #ffffff;
    border-color: rgba(212, 175, 55, 0.7);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
}

[data-theme="light"] .isiware-form label {
    color: #a87b00;
}

[data-theme="light"] .isiware-form .required {
    color: #c04000;
}

[data-theme="light"] .isiware-premium-wrapper {
    background: radial-gradient(circle at 50% 0%, #fefcf7 0%, #fdf9f0 70%);
}

[data-theme="light"] .planet-card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .planet-card:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(160, 110, 10, 0.25);
}

[data-theme="light"] .isiware-results-premium {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(160, 110, 10, 0.2);
}

[data-theme="light"] .planet-name {
    color: #8a6500;
}

[data-theme="light"] .isiware-title {
    color: #8a6500;
    text-shadow: none;
}

/* ── Light Theme Navbar Overrides ── */
[data-theme="light"] .isiware-nav-links>li>a {
    color: var(--text-heading);
    font-weight: 600;
}

[data-theme="light"] .isiware-nav-links>li>a:hover,
[data-theme="light"] .isiware-nav-links>li>a.active-nav {
    color: #8a6500;
    background: rgba(212, 175, 55, 0.15);
}

[data-theme="light"] .dropdown-content {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(212, 175, 55, 0.15);
}

[data-theme="light"] .dropdown-content a {
    color: var(--text-main);
}

[data-theme="light"] .dropdown-content a:hover {
    background: rgba(212, 175, 55, 0.15);
    color: var(--gold-light);
}

/* ── Light Theme Front Page Dashboard Overrides ── */
[data-theme="light"] .category-header {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(212, 175, 55, 0.3);
    color: #8a6500;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.05);
}

[data-theme="light"] .category-header small {
    color: var(--text-muted);
}

[data-theme="light"] .dashboard-tile {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(212, 175, 55, 0.25);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .dashboard-tile:hover {
    background: #ffffff;
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 16px 40px rgba(60, 40, 10, 0.1), 0 0 0 1px rgba(212, 175, 55, 0.2), inset 0 1px 0 #fff;
}

[data-theme="light"] .tile-content h3 {
    color: var(--text-heading);
}

[data-theme="light"] .dashboard-tile:hover .tile-content h3 {
    color: #8a6500;
}

[data-theme="light"] .tile-content p {
    color: var(--text-muted);
}

[data-theme="light"] .tile-arrow {
    color: rgba(138, 101, 0, 0.3);
}

[data-theme="light"] .dashboard-tile:hover .tile-arrow {
    color: #8a6500;
}

[data-theme="light"] .hero-stats {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(212, 175, 55, 0.3);
}

[data-theme="light"] .stat-label {
    color: var(--text-main);
    font-weight: 500;
}

[data-theme="light"] .stat-num {
    background: linear-gradient(135deg, #a87b00, #d4af37);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

[data-theme="light"] .stat-divider {
    background: rgba(212, 175, 55, 0.3);
}

[data-theme="light"] .premium-tile {
    background: rgba(212, 175, 55, 0.15);
}

[data-theme="light"] .cta-banner {
    background: linear-gradient(135deg, rgba(255, 250, 240, 0.8), rgba(240, 230, 210, 0.9));
    border-color: rgba(212, 175, 55, 0.4);
}

[data-theme="light"] .cta-banner-inner h2 {
    color: #8a6500;
}

[data-theme="light"] .hero-badge {
    color: #8a6500;
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.15);
}

[data-theme="light"] .hero-ghost-btn {
    border-color: rgba(212, 175, 55, 0.4);
    color: #8a6500;
    background: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .hero-ghost-btn:hover {
    color: #654a00;
    background: rgba(212, 175, 55, 0.2);
}

[data-theme="light"] .isiware-subtitle {
    color: var(--text-muted);
}

/* ─────────────────────────────────────────────────
   THEME TOGGLE BUTTON
   ───────────────────────────────────────────────── */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.3);
    background: rgba(212, 175, 55, 0.08);
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
    outline: none;
}

.theme-toggle-btn:hover {
    background: rgba(212, 175, 55, 0.18);
    border-color: rgba(212, 175, 55, 0.5);
    transform: rotate(20deg) scale(1.1);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.3);
}

/* Show/hide moon or sun icon based on theme */
.theme-toggle-btn .icon-moon {
    display: inline;
}

.theme-toggle-btn .icon-sun {
    display: none;
}

[data-theme="light"] .theme-toggle-btn .icon-moon {
    display: none;
}

[data-theme="light"] .theme-toggle-btn .icon-sun {
    display: inline;
}

#cosmoCanvas {
    display: var(--canvas-display, block);
}



/* ============================================================
   STARFIELD CANVAS BACKGROUND
   ============================================================ */
.stars-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 180% 100% at 50% 0%, rgba(20, 10, 60, 0.6) 0%, transparent 70%),
        radial-gradient(1.5px 1.5px at 10% 15%, #fff, transparent),
        radial-gradient(1px 1px at 30% 60%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 55% 25%, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1px 1px at 70% 80%, rgba(212, 175, 55, 0.5), transparent),
        radial-gradient(1.5px 1.5px at 85% 40%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 20% 85%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 95% 10%, rgba(255, 255, 255, 0.9), transparent);
    background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
    background-size: 100% 100%, 350px 350px, 280px 280px, 420px 420px, 320px 320px, 390px 390px, 260px 260px, 310px 310px;
    opacity: 0.65;
    z-index: -1;
    animation: starfield 120s linear infinite;
}

@keyframes starfield {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    }

    100% {
        background-position: 0 0, 350px 350px, -280px 280px, 420px -420px, -320px 320px, 390px -390px, -260px 260px, 310px 310px;
    }
}

/* ============================================================
   TOOL PAGES — PREMIUM WRAPPER
   ============================================================ */
.isiware-premium-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 60px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Ambient glow blob behind form */
.isiware-premium-wrapper::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(120, 60, 220, 0.12) 0%, transparent 70%);
    top: -80px;
    right: -100px;
    pointer-events: none;
    animation: blobPulse 8s ease-in-out infinite;
}

.isiware-premium-wrapper::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.07) 0%, transparent 70%);
    bottom: -50px;
    left: -80px;
    pointer-events: none;
    animation: blobPulse 11s ease-in-out infinite reverse;
}

@keyframes blobPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* ============================================================
   GLASS CARD CONTAINER
   ============================================================ */
.isiware-glass-container {
    background: linear-gradient(135deg, rgba(20, 26, 42, 0.85) 0%, rgba(10, 14, 24, 0.9) 100%);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid var(--border-glass);
    border-top-color: rgba(255, 255, 255, 0.12);
    border-left-color: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 60px var(--glow-gold);
    padding: 55px 50px;
    max-width: 1000px;
    width: 100%;
    position: relative;
    animation: slideUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Gold corner accents */
.isiware-glass-container::before,
.isiware-glass-container::after {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    border: 2px solid var(--gold-primary);
    opacity: 0.45;
    border-radius: 4px;
    pointer-events: none;
    transition: all 0.4s ease;
}

.isiware-glass-container::before {
    top: 20px;
    left: 20px;
    border-right: none;
    border-bottom: none;
}

.isiware-glass-container::after {
    bottom: 20px;
    right: 20px;
    border-left: none;
    border-top: none;
}

.isiware-glass-container:hover::before {
    top: 15px;
    left: 15px;
    opacity: 0.85;
}

.isiware-glass-container:hover::after {
    bottom: 15px;
    right: 15px;
    opacity: 0.85;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.isiware-page-header {
    text-align: center;
    margin-bottom: 45px;
    padding-bottom: 35px;
    border-bottom: 1px solid var(--border-glass);
}

.astrology-icon {
    font-size: 52px;
    margin-bottom: 12px;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.5));
    animation: spinSlow 40s linear infinite;
}

@keyframes spinSlow {
    100% {
        transform: rotate(360deg);
    }
}

.isiware-title {
    color: var(--gold-light);
    font-size: 34px;
    font-weight: 700;
    margin: 0 0 12px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
}

.isiware-subtitle {
    color: var(--text-muted);
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.75;
    max-width: 88%;
    margin: 0 auto;
    font-family: 'Outfit', sans-serif;
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.isiware-form .form-row {
    margin-bottom: 26px;
}

.isiware-form .split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.isiware-form .split .form-group {
    flex: 1;
}

.isiware-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--gold-light);
    font-size: 14.5px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.isiware-form .required {
    color: var(--gold-primary);
}

/* Input wrapper for the underline glow effect */
.input-wrapper {
    position: relative;
    border-radius: var(--radius-md);
}

.input-focus-border {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--gold-gradient);
    transition: width 0.4s ease;
    border-radius: 2px;
}

/* ---- All input fields ---- */
.isiware-form input,
.isiware-form select,
.isiware-form textarea {
    width: 100%;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    font-size: 16px;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    transition: all 0.3s ease;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.isiware-form input:hover,
.isiware-form select:hover {
    border-color: rgba(212, 175, 55, 0.2);
    background: rgba(255, 255, 255, 0.06);
}

.isiware-form input:focus,
.isiware-form select:focus,
.isiware-form textarea:focus {
    background: rgba(255, 255, 255, 0.07);
    outline: none;
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1), inset 0 0 20px rgba(212, 175, 55, 0.03);
}

.isiware-form input:focus~.input-focus-border {
    width: 100%;
}

.isiware-form input[type="date"],
.isiware-form input[type="time"] {
    cursor: pointer;
    color-scheme: dark;
}

/* Calendar icon styling */
.isiware-form input[type="date"]::-webkit-calendar-picker-indicator,
.isiware-form input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.75) sepia(0.3) saturate(3) hue-rotate(5deg);
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s;
    width: 22px;
    height: 22px;
}

.isiware-form input[type="date"]::-webkit-calendar-picker-indicator:hover,
.isiware-form input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    filter: invert(0.9) sepia(0.6) saturate(5) hue-rotate(5deg);
}

.isiware-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23d4af37' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
}

.isiware-form select option {
    background: #0c0e18;
}

/* ============================================================
   SUBMIT BUTTON
   ============================================================ */
.submit-group {
    margin-top: 40px;
}

.isiware-btn-gold {
    background: var(--gold-gradient);
    color: #000;
    border: none;
    padding: 18px 35px;
    font-size: 18px;
    font-weight: 700;
    border-radius: var(--radius-lg);
    cursor: pointer;
    width: 100%;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: 'Noto Serif Sinhala', serif;
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
}

/* Shimmer sweep */
.isiware-btn-gold::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

.isiware-btn-gold:hover::before {
    left: 130%;
}

.isiware-btn-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(212, 175, 55, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
}

.isiware-btn-gold:active {
    transform: translateY(0);
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.3);
}

.isiware-btn-gold:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.25);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Button loader */
.btn-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    border-top-color: #000;
    animation: spin 0.75s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   MESSAGES
   ============================================================ */
.isiware-message {
    margin-top: 28px;
    padding: 18px 22px;
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    animation: fadeIn 0.5s ease;
    line-height: 1.6;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.isiware-message.error {
    background: rgba(255, 111, 111, 0.08);
    color: var(--error);
    border: 1px solid rgba(255, 111, 111, 0.25);
}

.isiware-message.success {
    background: rgba(81, 207, 102, 0.08);
    color: var(--success);
    border: 1px solid rgba(81, 207, 102, 0.25);
    box-shadow: 0 0 20px rgba(81, 207, 102, 0.1);
}

/* ============================================================
   RESULTS AREA
   ============================================================ */
.isiware-results-premium {
    margin-top: 40px;
    padding: 32px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-gold);
    color: var(--text-main);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* Left glow accent bar */
.isiware-results-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--gold-gradient);
    border-radius: 3px 0 0 3px;
}

.isiware-results-premium h3 {
    color: var(--gold-primary);
    margin-top: 0;
    font-size: 24px;
    border-bottom: 1px solid var(--border-glass);
    padding-bottom: 14px;
    margin-bottom: 22px;
    font-weight: 700;
}

.isiware-results-premium h4 {
    color: var(--gold-light);
    font-size: 19px;
    margin-top: 28px;
    margin-bottom: 18px;
    font-weight: 600;
}

/* ============================================================
   PLANET GRID — INFO CARDS
   ============================================================ */
.planet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.planet-card {
    background: rgba(255, 255, 255, 0.025);
    padding: 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-glass);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}

.planet-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
}

.planet-card:hover {
    background: rgba(212, 175, 55, 0.06);
    border-color: rgba(212, 175, 55, 0.35);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35), 0 0 20px rgba(212, 175, 55, 0.08);
}

.planet-name {
    color: var(--gold-light);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 8px;
}

.planet-detail {
    color: var(--text-muted);
    font-size: 14px;
    font-family: 'Outfit', sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* ============================================================
   PDF REPORT CONTAINER
   ============================================================ */
.pdf-report-container {
    font-family: 'Noto Serif Sinhala', serif;
    color: var(--text-main);
}

/* ============================================================
   CHART VISUAL (Vedic Square)
   ============================================================ */
.isiware-chart-graphic {
    position: relative;
    margin: 25px auto;
    max-width: 320px;
}

/* ============================================================
   BIG GLASS CONTAINER VARIANT (Wider pages like Maha Porondam)
   ============================================================ */
.isiware-glass-container.wide {
    max-width: 820px;
}

/* ============================================================
   SEO ARTICLE & SECTION TYPOGRAPHY (Global)
   ============================================================ */
.isiware-seo-article, .isiware-seo-section {
    margin-top: 50px;
    background: rgba(0, 0, 0, 0.4);
    padding: 40px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-gold);
    text-align: left;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    color: var(--text-main);
    line-height: 1.85; /* This fixes the closely packed text */
}

[data-theme="light"] .isiware-seo-article, [data-theme="light"] .isiware-seo-section {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(212, 175, 55, 0.3);
    color: #3d2f24;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.isiware-seo-article h2, .isiware-seo-section h2 {
    color: var(--gold-primary);
    font-size: 28px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 24px;
    border-bottom: 2px dashed rgba(212, 175, 55, 0.2);
    padding-bottom: 12px;
}

.isiware-seo-article h3, .isiware-seo-section h3 {
    color: var(--gold-light);
    font-size: 22px;
    font-weight: 600;
    margin-top: 35px;
    margin-bottom: 16px;
}

[data-theme="light"] .isiware-seo-article h3, [data-theme="light"] .isiware-seo-section h3 {
    color: #8a6500;
}

.isiware-seo-article p, .isiware-seo-section p {
    margin-bottom: 20px;
    font-size: 16.5px;
}

.isiware-seo-article ul, .isiware-seo-section ul, 
.isiware-seo-article ol, .isiware-seo-section ol {
    margin-bottom: 28px;
    padding-left: 20px;
}

.isiware-seo-article li, .isiware-seo-section li {
    margin-bottom: 12px;
    font-size: 16.5px;
}

.isiware-seo-article li strong, .isiware-seo-section li strong {
    color: var(--gold-light);
}

[data-theme="light"] .isiware-seo-article li strong, [data-theme="light"] .isiware-seo-section li strong {
    color: #8a6500;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .isiware-premium-wrapper {
        padding: 90px 15px 50px;
        align-items: flex-start;
    }

    .isiware-glass-container {
        padding: 36px 22px;
        border-radius: 18px;
    }

    .isiware-glass-container::before,
    .isiware-glass-container::after {
        display: none;
    }

    .isiware-title {
        font-size: 26px;
    }

    .isiware-subtitle {
        max-width: 100%;
        font-size: 14px;
    }

    .isiware-form .split {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .planet-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Override inline CSS for results & SEO containers */
    .isiware-results-premium {
        padding: 20px 15px !important;
        margin-top: 25px !important;
    }
    
    .isiware-results-premium h3 {
        font-size: 20px !important;
    }

    .isiware-seo-article, .isiware-seo-section {
        padding: 20px 15px !important;
        margin-top: 30px !important;
    }

    .isiware-seo-article h2, .isiware-seo-section h2 {
        font-size: 22px !important;
    }

    .isiware-seo-article h3, .isiware-seo-section h3 {
        font-size: 17px !important;
    }

    .isiware-seo-article p, .isiware-seo-section p {
        font-size: 14.5px !important;
        padding-left: 10px !important;
    }

    .isiware-page-content {
        padding: 20px 10px !important;
    }

    /* Wrap flex results properly on mobile */
    .isiware-results-premium > div[style*="min-width:200px;"] {
        min-width: 140px !important;
        padding: 15px !important;
    }
}

@media (max-width: 768px) {
    .planet-grid, .dasha-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Remove huge paddings and margins on mobile for interpretation blocks */
    #isiware-result-container div[style*="padding: 20px"],
    #isiware-result-container div[style*="padding: 15px"],
    #isiware-result-container div[style*="padding:20px"],
    .isiware-db-interpretation,
    .isiware-magic-interp {
        padding: 12px 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 6px !important;
        border-left-width: 3px !important;
    }
    
    /* Ensure text has room to breathe */
    #isiware-result-container p,
    #isiware-result-container span {
        font-size: 14.5px !important;
        line-height: 1.5 !important;
        word-wrap: break-word;
    }

    #isiware-result-container .isiware-magic-interp p {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    #isiware-result-container {
        padding: 5px !important;
    }

    /* Prevent flex containers from compressing columns on tiny screens */
    #isiware-result-container div[style*="display: flex"],
    #isiware-result-container div[style*="display:flex"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

/* ============================================================
   OLD-STYLE YOGA TOOL PAGES — .app-card & .results-container
   ============================================================ */

/* Base app-card container */
.isiware-app-container {
    min-height: 80vh;
    padding: 40px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.app-card {
    background: var(--bg-card);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-xl);
    padding: 40px;
    max-width: 760px;
    width: 100%;
    box-shadow: var(--shadow-card);
    color: var(--text-main);
    position: relative;
}

/* Remove bracket pseudo-elements that leak into .app-card */
.app-card::before,
.app-card::after {
    display: none !important;
}

/* Headings inside app-card */
.app-card h2 {
    color: var(--gold-primary);
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 12px;
    text-align: center;
}

.app-card > p:first-of-type {
    color: var(--text-muted);
    text-align: center;
    font-size: 15px;
    margin-bottom: 28px;
    line-height: 1.7;
}

/* Loading spinner */
.app-card .loading-spinner {
    text-align: center;
    padding: 30px;
    color: var(--text-muted);
}

/* ── Result container — always dark for readability ── */
.results-container {
    background: #0f172a !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    border-radius: 14px !important;
    padding: 28px !important;
    margin-top: 24px !important;
    color: #f1f5f9 !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
}

/* Force all text inside results to be light/visible */
.results-container,
.results-container p,
.results-container span,
.results-container div,
.results-container li,
.results-container h3,
.results-container h4 {
    color: #f1f5f9 !important;
}

/* Gold accents inside results */
.results-container h3,
.results-container h4,
.results-container strong {
    color: #f3e5ab !important;
}

/* Explanation block appended by catch-all handler */
.results-container > div[style*="border-left"] {
    color: #e2e8f0 !important;
    background: rgba(212, 175, 55, 0.08) !important;
}

/* Positive / negative result text */
.results-container [style*="color:#51cf66"],
.results-container [style*="color: #51cf66"] {
    color: #51cf66 !important;
}
.results-container [style*="color:#ff6b6b"],
.results-container [style*="color: #ff6b6b"] {
    color: #ff8a8a !important;
}

/* Center-padded single-line result */
.results-container > div[style*="text-align:center"],
.results-container > div[style*="text-align: center"] {
    padding: 20px;
    font-size: 18px !important;
    font-weight: 600;
    color: #f3e5ab !important;
}

/* ── Fix .isiware-glass-container inside .app-card pages ──
   The magic_interpretation.js upgrades .app-card to .isiware-glass-container
   but we need to ensure the corner brackets don't create the visual leak */
.isiware-glass-container.upgraded-card::before,
.isiware-glass-container.upgraded-card::after {
    display: none !important;
}

/* ── Light theme — keep dark result background for contrast ── */
[data-theme="light"] .results-container {
    background: #1a1f35 !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] .app-card {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 20px 50px rgba(40, 25, 5, 0.08) !important;
}

[data-theme="light"] .app-card h2 {
    color: var(--gold-dark);
}

/* ── Error message inside yoga tools ── */
.isiware-message.error {
    background: rgba(255, 80, 80, 0.1);
    border-left: 3px solid #ff6f6f;
    color: #ff6f6f;
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 12px;
    font-size: 15px;
}

/* ── Clean up form label text in app-card ── */
.app-card .form-group label,
.app-card label {
    color: var(--gold-primary);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

/* ============================================================
   COMPREHENSIVE LIGHT THEME READABILITY OVERRIDES
   Fixes all text contrast issues across all page types
   ============================================================ */

/* ── Body & global text ── */
[data-theme="light"] body {
    color: #1e1206;
}

/* ── WordPress Single Post Content ── */
[data-theme="light"] .post-content,
[data-theme="light"] .post-content p,
[data-theme="light"] .post-content li,
[data-theme="light"] .post-content span,
[data-theme="light"] .post-content div,
[data-theme="light"] .entry-content,
[data-theme="light"] .entry-content p,
[data-theme="light"] .entry-content li,
[data-theme="light"] .entry-content span,
[data-theme="light"] .entry-content div {
    color: #1e1206 !important;
}

[data-theme="light"] .post-content h1,
[data-theme="light"] .post-content h2,
[data-theme="light"] .post-content h3,
[data-theme="light"] .post-content h4,
[data-theme="light"] .post-content h5,
[data-theme="light"] .post-content h6,
[data-theme="light"] .entry-content h1,
[data-theme="light"] .entry-content h2,
[data-theme="light"] .entry-content h3,
[data-theme="light"] .entry-content h4,
[data-theme="light"] .entry-content h5,
[data-theme="light"] .entry-content h6 {
    color: #4a2800 !important;
}

[data-theme="light"] .post-content a,
[data-theme="light"] .entry-content a {
    color: #8a6500 !important;
    text-decoration: underline;
}
[data-theme="light"] .post-content a:hover,
[data-theme="light"] .entry-content a:hover {
    color: #5c4300 !important;
}

[data-theme="light"] .post-content strong,
[data-theme="light"] .entry-content strong {
    color: #3d2000 !important;
}

[data-theme="light"] .post-content blockquote,
[data-theme="light"] .entry-content blockquote {
    background: rgba(212, 175, 55, 0.08);
    border-left: 4px solid #a87b00;
    color: #3d2f24 !important;
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
}

[data-theme="light"] .post-content code,
[data-theme="light"] .entry-content code {
    background: rgba(212, 175, 55, 0.12);
    color: #7a4f00 !important;
    padding: 2px 6px;
    border-radius: 4px;
}

/* ── Page subtitle / meta text ── */
[data-theme="light"] .isiware-page-subtitle,
[data-theme="light"] .post-meta {
    color: #6b5840 !important;
}

/* ── Glass container inner text in light ── */
[data-theme="light"] .isiware-glass-container {
    color: #1e1206;
}

[data-theme="light"] .isiware-glass-container p,
[data-theme="light"] .isiware-glass-container span,
[data-theme="light"] .isiware-glass-container li {
    color: #2d1e0e;
}

/* ── Results premium in light ── */
[data-theme="light"] .isiware-results-premium {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(168, 123, 0, 0.2);
    color: #1e1206;
    box-shadow: 0 10px 30px rgba(60, 40, 10, 0.06);
}

[data-theme="light"] .isiware-results-premium p,
[data-theme="light"] .isiware-results-premium li,
[data-theme="light"] .isiware-results-premium span,
[data-theme="light"] .isiware-results-premium div {
    color: #2d1e0e !important;
}

[data-theme="light"] .isiware-results-premium h3 {
    color: #7a4f00 !important;
    border-bottom-color: rgba(168, 123, 0, 0.15) !important;
}

[data-theme="light"] .isiware-results-premium h4 {
    color: #8a6500 !important;
}

[data-theme="light"] .isiware-results-premium strong {
    color: #5c3a00 !important;
}

/* ── Planet cards in light ── */
[data-theme="light"] .planet-detail {
    color: #5c4330 !important;
}

/* ── isiware-seo-article – body paragraphs fully readable ── */
[data-theme="light"] .isiware-seo-article p,
[data-theme="light"] .isiware-seo-section p {
    color: #2a1a0a !important;
}

[data-theme="light"] .isiware-seo-article h2,
[data-theme="light"] .isiware-seo-section h2 {
    color: #7a4f00 !important;
    border-bottom-color: rgba(168, 123, 0, 0.2) !important;
}

[data-theme="light"] .isiware-seo-article li,
[data-theme="light"] .isiware-seo-section li {
    color: #2a1a0a !important;
}

/* ── General page content wrappers ── */
[data-theme="light"] .isiware-page-content p,
[data-theme="light"] .isiware-page-content li,
[data-theme="light"] .isiware-page-content span,
[data-theme="light"] .isiware-page-content div {
    color: #2d1e0e;
}

[data-theme="light"] .isiware-page-content h1,
[data-theme="light"] .isiware-page-content h2,
[data-theme="light"] .isiware-page-content h3,
[data-theme="light"] .isiware-page-content h4 {
    color: #4a2800;
}

/* ── Dashboard cards ── */
[data-theme="light"] .dashboard-tile p,
[data-theme="light"] .dashboard-tile span {
    color: #5c4330 !important;
}

[data-theme="light"] .dashboard-tile h3 {
    color: #24160d !important;
}

/* ── Result containers used in yoga/special tools ── */
[data-theme="light"] #isiware-result-container p,
[data-theme="light"] #isiware-result-container span,
[data-theme="light"] #isiware-result-container div {
    color: #2d1e0e !important;
}

[data-theme="light"] #isiware-result-container h3,
[data-theme="light"] #isiware-result-container h4 {
    color: #7a4f00 !important;
}

/* ── Post navigation links ── */
[data-theme="light"] .post-navigation a {
    color: #8a6500 !important;
}
[data-theme="light"] .post-navigation a:hover {
    color: #5c3a00 !important;
}

/* ── Dasha / table result text ── */
[data-theme="light"] .dasha-item,
[data-theme="light"] .dasha-item span,
[data-theme="light"] .dasha-item p {
    color: #2d1e0e !important;
}

[data-theme="light"] table {
    color: #2d1e0e;
}

[data-theme="light"] table th {
    color: #7a4f00;
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(168, 123, 0, 0.2);
}

[data-theme="light"] table td {
    color: #2d1e0e;
    border-color: rgba(168, 123, 0, 0.12);
}

/* ── WP Gutenberg block text fallback ── */
[data-theme="light"] .wp-block-paragraph,
[data-theme="light"] .wp-block-heading,
[data-theme="light"] .wp-block-list,
[data-theme="light"] .wp-block-quote {
    color: #1e1206 !important;
}

/* ── isiware-subtitle always readable ── */
[data-theme="light"] .isiware-subtitle {
    color: #5c4330 !important;
}

/* ── Page wrapper subtle bg gradient ── */
[data-theme="light"] .isiware-premium-wrapper {
    background: radial-gradient(circle at 50% 0%, #fefcf4 0%, #fdf9ee 100%);
}

/* ── Card text overrides for tool pages ── */
[data-theme="light"] .isiware-glass-container h1,
[data-theme="light"] .isiware-glass-container h2,
[data-theme="light"] .isiware-glass-container h3,
[data-theme="light"] .isiware-glass-container h4 {
    color: #4a2800;
}

/* ── Date / time inputs ── */
[data-theme="light"] .isiware-form input[type="date"],
[data-theme="light"] .isiware-form input[type="time"] {
    color-scheme: light;
    color: #1e1206;
}

/* ── Stars background hidden in light (cosmetic only) ── */
[data-theme="light"] .stars-bg {
    opacity: 0.04;
}

/* ── Form helper text ── */
[data-theme="light"] .form-hint,
[data-theme="light"] .form-note {
    color: #7b6a58 !important;
}

/* ── Special: any inline-styled divs that use light text ── */
[data-theme="light"] .isiware-glass-container div[style*="color: #f1f5f9"],
[data-theme="light"] .isiware-glass-container div[style*="color:#f1f5f9"],
[data-theme="light"] .isiware-glass-container div[style*="color: #94a3b8"],
[data-theme="light"] .isiware-glass-container div[style*="color:#94a3b8"],
[data-theme="light"] .isiware-glass-container span[style*="color: #f1f5f9"],
[data-theme="light"] .isiware-glass-container span[style*="color:#f1f5f9"],
[data-theme="light"] .isiware-glass-container span[style*="color: #94a3b8"],
[data-theme="light"] .isiware-glass-container span[style*="color:#94a3b8"] {
    color: #2d1e0e !important;
}

[data-theme="light"] .isiware-glass-container div[style*="color: white"],
[data-theme="light"] .isiware-glass-container div[style*="color:white"],
[data-theme="light"] .isiware-glass-container span[style*="color: white"],
[data-theme="light"] .isiware-glass-container span[style*="color:white"],
[data-theme="light"] .isiware-glass-container p[style*="color: white"],
[data-theme="light"] .isiware-glass-container p[style*="color:white"] {
    color: #2d1e0e !important;
}

/* ── Any element with style="color: #fff" inside results ── */
[data-theme="light"] .isiware-results-premium div[style*="color: #fff"],
[data-theme="light"] .isiware-results-premium div[style*="color:#fff"],
[data-theme="light"] .isiware-results-premium span[style*="color: #fff"],
[data-theme="light"] .isiware-results-premium span[style*="color:#fff"] {
    color: #2d1e0e !important;
}

/* ============================================================
   LIGHT THEME — HOMEPAGE & HERO TARGETED FIXES
   Confirmed issues from visual browser audit
   ============================================================ */

/* ── Hero title: remove dark text-shadow that's invisible on light bg ── */
[data-theme="light"] .hero-title {
    text-shadow: 0 2px 12px rgba(100, 70, 0, 0.12);
    color: #1e0f00;
}

/* ── Gold text span: darken gradient so it's visible on cream background ── */
[data-theme="light"] .gold-text {
    background: linear-gradient(135deg, #7a4f00 0%, #a87b00 30%, #5c3a00 60%, #8a6500 85%, #4a2800 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 2px rgba(100, 70, 0, 0.15));
}

/* ── Hero badge: darken text for readability on ivory ── */
[data-theme="light"] .hero-badge {
    color: #7a4f00;
    border-color: rgba(168, 123, 0, 0.35);
    background: rgba(212, 175, 55, 0.1);
}

/* ── Hero subtitle: ensure visible ── */
[data-theme="light"] .hero-subtitle {
    color: #5c4330;
}

/* ── Hero ghost buttons: increase contrast ── */
[data-theme="light"] .hero-ghost-btn {
    border-color: rgba(120, 80, 0, 0.45) !important;
    color: #6b4400 !important;
    background: rgba(255, 255, 255, 0.7) !important;
}

[data-theme="light"] .hero-ghost-btn:hover {
    background: rgba(212, 175, 55, 0.18) !important;
    color: #4a2800 !important;
    border-color: rgba(120, 80, 0, 0.65) !important;
}

/* ── Dashboard tile arrow: more visible in light mode ── */
[data-theme="light"] .tile-arrow {
    color: rgba(100, 65, 0, 0.55) !important;
}

[data-theme="light"] .dashboard-tile:hover .tile-arrow {
    color: #7a4f00 !important;
}

/* ── Category header small text ── */
[data-theme="light"] .category-header small {
    color: #8a7060 !important;
}

/* ── SEO article / info boxes on tool pages: fix dark bg ──
   The base CSS uses rgba(0,0,0,0.4) background which shows as dark gray.
   Override with clean white/cream card in light mode. */
[data-theme="light"] .isiware-seo-article,
[data-theme="light"] .isiware-seo-section {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(168, 123, 0, 0.2) !important;
    color: #1e1206 !important;
    box-shadow: 0 8px 24px rgba(60, 40, 10, 0.05) !important;
}

/* ── CTA Banner in light mode ── */
[data-theme="light"] .cta-banner-inner p {
    color: #5c4330;
}

/* ── Hero stats section labels/numbers ── */
[data-theme="light"] .stat-label {
    color: #5c4330 !important;
}

/* ── Fix: pricing page subtitle ── */
[data-theme="light"] .isiware-subtitle,
[data-theme="light"] .hero-subtitle,
[data-theme="light"] .pricing-subtitle {
    color: #5c4330 !important;
}

/* ── Make Basic/Pro plan buy links look like buttons ── */
[data-theme="light"] .pricing-plan-link,
[data-theme="light"] .plan-buy-link {
    display: inline-block;
    padding: 12px 28px;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(168, 123, 0, 0.35);
    border-radius: 50px;
    color: #7a4f00 !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

[data-theme="light"] .pricing-plan-link:hover,
[data-theme="light"] .plan-buy-link:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: rgba(120, 80, 0, 0.5);
    color: #4a2800 !important;
}