/**
 * WealthFromAI Glassmorphism System
 * Frosted glass effects for cards, modals, and elevated surfaces
 *
 * @package WealthFromAI
 * @version 1.0.0
 */

/* ===========================
   BASE GLASS CARD
   =========================== */

.glass-card {
    background: var(--wfai-glass-bg);
    backdrop-filter: var(--wfai-glass-blur);
    -webkit-backdrop-filter: var(--wfai-glass-blur);
    border: 1px solid var(--wfai-glass-border);
    border-radius: var(--wfai-radius-xl);
    transition: var(--wfai-transition-normal);
}

.glass-card:hover {
    border-color: rgba(0, 212, 170, 0.2);
    box-shadow: var(--wfai-glow-sm);
}

/* Light glass variant */
.glass-card-light {
    background: var(--wfai-glass-bg-light);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--wfai-radius-xl);
}

/* Solid glass (no transparency) - for fallback */
.glass-card-solid {
    background: var(--wfai-card);
    border: 1px solid var(--wfai-border);
    border-radius: var(--wfai-radius-xl);
    transition: var(--wfai-transition-normal);
}

.glass-card-solid:hover {
    border-color: var(--wfai-border-hover);
    transform: translateY(-2px);
    box-shadow: var(--wfai-shadow-lg);
}

/* Dark glass variant */
.glass-card-dark {
    background: var(--wfai-glass-bg-dark);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--wfai-radius-xl);
}

/* ===========================
   GLASS CARD SIZES
   =========================== */

.glass-card-sm {
    padding: var(--wfai-space-4);
    border-radius: var(--wfai-radius-lg);
}

.glass-card-md {
    padding: var(--wfai-space-6);
}

.glass-card-lg {
    padding: var(--wfai-space-8);
}

.glass-card-xl {
    padding: var(--wfai-space-10);
    border-radius: var(--wfai-radius-2xl);
}

/* ===========================
   GLASS WITH GLOW EFFECTS
   =========================== */

/* Mint/Teal glow border */
.glass-glow {
    background: var(--wfai-glass-bg);
    backdrop-filter: var(--wfai-glass-blur);
    -webkit-backdrop-filter: var(--wfai-glass-blur);
    border: 1px solid var(--wfai-border-accent);
    border-radius: var(--wfai-radius-xl);
    box-shadow: var(--wfai-glow-sm);
    transition: var(--wfai-transition-normal);
}

.glass-glow:hover {
    box-shadow: var(--wfai-glow-md);
    border-color: rgba(0, 212, 170, 0.4);
}

/* Gold glow border */
.glass-glow-gold {
    background: var(--wfai-glass-bg);
    backdrop-filter: var(--wfai-glass-blur);
    -webkit-backdrop-filter: var(--wfai-glass-blur);
    border: 1px solid var(--wfai-border-gold);
    border-radius: var(--wfai-radius-xl);
    box-shadow: var(--wfai-glow-gold-sm);
    transition: var(--wfai-transition-normal);
}

.glass-glow-gold:hover {
    box-shadow: var(--wfai-glow-gold-md);
    border-color: rgba(201, 169, 98, 0.5);
}

/* ===========================
   GLASS FEATURE CARD
   =========================== */

.glass-feature-card {
    position: relative;
    background: var(--wfai-glass-bg);
    backdrop-filter: var(--wfai-glass-blur);
    -webkit-backdrop-filter: var(--wfai-glass-blur);
    border: 1px solid var(--wfai-glass-border);
    border-radius: var(--wfai-radius-xl);
    padding: var(--wfai-space-8);
    overflow: hidden;
    transition: var(--wfai-transition-normal);
}

/* Subtle gradient overlay at top */
.glass-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 212, 170, 0.5) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: var(--wfai-transition-normal);
}

.glass-feature-card:hover::before {
    opacity: 1;
}

.glass-feature-card:hover {
    border-color: rgba(0, 212, 170, 0.2);
    transform: translateY(-4px);
    box-shadow: var(--wfai-shadow-xl), var(--wfai-glow-sm);
}

/* Feature card icon container */
.glass-feature-card .feature-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wfai-secondary-muted);
    border-radius: var(--wfai-radius-lg);
    margin-bottom: var(--wfai-space-4);
    color: var(--wfai-secondary);
    font-size: 24px;
    transition: var(--wfai-transition-normal);
}

.glass-feature-card:hover .feature-icon {
    background: var(--wfai-secondary);
    color: var(--wfai-bg);
    box-shadow: var(--wfai-glow-md);
}

/* Gold variant */
.glass-feature-card-gold::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(201, 169, 98, 0.5) 50%,
        transparent 100%
    );
}

.glass-feature-card-gold:hover {
    border-color: rgba(201, 169, 98, 0.2);
    box-shadow: var(--wfai-shadow-xl), var(--wfai-glow-gold-sm);
}

.glass-feature-card-gold .feature-icon {
    background: var(--wfai-accent-muted);
    color: var(--wfai-accent);
}

.glass-feature-card-gold:hover .feature-icon {
    background: var(--wfai-accent);
    box-shadow: var(--wfai-glow-gold-md);
}

/* ===========================
   GLASS NEWSLETTER CARD
   =========================== */

.glass-newsletter {
    position: relative;
    background: linear-gradient(
        135deg,
        rgba(13, 33, 55, 0.9) 0%,
        rgba(17, 24, 39, 0.8) 100%
    );
    backdrop-filter: var(--wfai-glass-blur);
    -webkit-backdrop-filter: var(--wfai-glass-blur);
    border: 1px solid var(--wfai-border-accent);
    border-radius: var(--wfai-radius-2xl);
    padding: var(--wfai-space-10);
    overflow: hidden;
}

/* Decorative glow orb - top right */
.glass-newsletter::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(
        circle,
        rgba(0, 212, 170, 0.15) 0%,
        transparent 70%
    );
    pointer-events: none;
}

/* Decorative glow orb - bottom left */
.glass-newsletter::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(
        circle,
        rgba(201, 169, 98, 0.1) 0%,
        transparent 70%
    );
    pointer-events: none;
}

/* ===========================
   GLASS CALLOUT BOX
   =========================== */

.glass-callout {
    background: var(--wfai-glass-bg);
    backdrop-filter: var(--wfai-glass-blur);
    -webkit-backdrop-filter: var(--wfai-glass-blur);
    border-left: 4px solid var(--wfai-secondary);
    border-radius: 0 var(--wfai-radius-lg) var(--wfai-radius-lg) 0;
    padding: var(--wfai-space-6);
    margin: var(--wfai-space-6) 0;
}

.glass-callout-title {
    font-family: var(--wfai-font-heading);
    font-size: var(--wfai-text-lg);
    font-weight: var(--wfai-font-semibold);
    color: var(--wfai-secondary);
    margin-bottom: var(--wfai-space-2);
    display: flex;
    align-items: center;
    gap: var(--wfai-space-2);
}

/* Callout variants */
.glass-callout-gold {
    border-left-color: var(--wfai-accent);
}

.glass-callout-gold .glass-callout-title {
    color: var(--wfai-accent);
}

.glass-callout-warning {
    border-left-color: var(--wfai-warning);
}

.glass-callout-warning .glass-callout-title {
    color: var(--wfai-warning);
}

.glass-callout-info {
    border-left-color: var(--wfai-info);
}

.glass-callout-info .glass-callout-title {
    color: var(--wfai-info);
}

/* ===========================
   GLASS KEY TAKEAWAYS
   =========================== */

.glass-takeaways {
    background: linear-gradient(
        135deg,
        rgba(0, 212, 170, 0.1) 0%,
        rgba(17, 24, 39, 0.8) 100%
    );
    backdrop-filter: var(--wfai-glass-blur);
    -webkit-backdrop-filter: var(--wfai-glass-blur);
    border: 1px solid var(--wfai-border-accent);
    border-radius: var(--wfai-radius-xl);
    padding: var(--wfai-space-6);
    margin: var(--wfai-space-8) 0;
}

.glass-takeaways-title {
    font-family: var(--wfai-font-heading);
    font-size: var(--wfai-text-lg);
    font-weight: var(--wfai-font-semibold);
    color: var(--wfai-secondary);
    margin-bottom: var(--wfai-space-4);
    display: flex;
    align-items: center;
    gap: var(--wfai-space-2);
}

.glass-takeaways ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.glass-takeaways li {
    position: relative;
    padding-left: var(--wfai-space-6);
    margin-bottom: var(--wfai-space-3);
    color: var(--wfai-text-secondary);
}

.glass-takeaways li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--wfai-secondary);
    font-weight: var(--wfai-font-bold);
}

/* ===========================
   GLASS STAT CARD
   =========================== */

.glass-stat {
    background: var(--wfai-glass-bg);
    backdrop-filter: var(--wfai-glass-blur);
    -webkit-backdrop-filter: var(--wfai-glass-blur);
    border: 1px solid var(--wfai-glass-border);
    border-radius: var(--wfai-radius-xl);
    padding: var(--wfai-space-6);
    text-align: center;
    transition: var(--wfai-transition-normal);
}

.glass-stat:hover {
    border-color: var(--wfai-border-accent);
    transform: translateY(-2px);
}

.glass-stat-value {
    font-family: var(--wfai-font-data);
    font-size: var(--wfai-text-4xl);
    font-weight: var(--wfai-font-bold);
    color: var(--wfai-secondary);
    line-height: var(--wfai-leading-none);
}

.glass-stat-value-gold {
    color: var(--wfai-accent);
}

.glass-stat-label {
    font-size: var(--wfai-text-sm);
    color: var(--wfai-text-muted);
    margin-top: var(--wfai-space-2);
}

/* ===========================
   GLASS MODAL/POPUP
   =========================== */

.glass-modal {
    background: var(--wfai-glass-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--wfai-glass-border);
    border-radius: var(--wfai-radius-2xl);
    box-shadow: var(--wfai-shadow-2xl);
    padding: var(--wfai-space-8);
    max-width: 500px;
    width: 90%;
}

.glass-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 20, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: var(--wfai-z-modal-backdrop);
}

/* ===========================
   GLASS HEADER
   =========================== */

.glass-header {
    background: rgba(10, 15, 20, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-header.scrolled {
    background: rgba(10, 15, 20, 0.95);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* ===========================
   GLASS INPUT
   =========================== */

.glass-input {
    background: var(--wfai-glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--wfai-glass-border);
    border-radius: var(--wfai-radius-lg);
    padding: var(--wfai-space-3) var(--wfai-space-4);
    color: var(--wfai-text);
    transition: var(--wfai-transition-fast);
}

.glass-input:focus {
    outline: none;
    border-color: var(--wfai-secondary);
    box-shadow: var(--wfai-glow-sm);
}

.glass-input::placeholder {
    color: var(--wfai-text-subtle);
}

/* ===========================
   GRADIENT BORDERS
   =========================== */

.glass-gradient-border {
    position: relative;
    background: var(--wfai-glass-bg);
    backdrop-filter: var(--wfai-glass-blur);
    -webkit-backdrop-filter: var(--wfai-glass-blur);
    border-radius: var(--wfai-radius-xl);
    padding: var(--wfai-space-6);
}

.glass-gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--wfai-radius-xl);
    padding: 1px;
    background: linear-gradient(135deg, var(--wfai-secondary), var(--wfai-accent));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* ===========================
   FALLBACK FOR NO BACKDROP-FILTER
   =========================== */

@supports not (backdrop-filter: blur(16px)) {
    .glass-card,
    .glass-card-light,
    .glass-card-dark,
    .glass-feature-card,
    .glass-feature-card-gold,
    .glass-newsletter,
    .glass-callout,
    .glass-callout-gold,
    .glass-callout-warning,
    .glass-takeaways,
    .glass-stat,
    .glass-modal,
    .glass-glow,
    .glass-glow-gold,
    .glass-header,
    .glass-input,
    .glass-gradient-border {
        background: var(--wfai-card);
    }
}

/* ===========================
   RESPONSIVE ADJUSTMENTS
   =========================== */

@media (max-width: 767px) {
    .glass-feature-card {
        padding: var(--wfai-space-6);
    }

    .glass-newsletter {
        padding: var(--wfai-space-6);
    }

    .glass-card-xl {
        padding: var(--wfai-space-6);
    }
}