/**
 * RiseGrowFound - Luxury Wealth & Daily Yield Master Design System
 * 100% Brand-new Luxury Ice-Sky Blue & Vivid Red Branding
 * FULL SCREEN RESPONSIVE ANDROID / MOBILE APP UI - CONTAINERLESS ARCHITECTURE
 * NO CONTAINER BOXES - ULTRA-CRISP HIGH-CONTRAST TYPOGRAPHY
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

:root {
    --rgf-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --rgf-font-display: 'Outfit', sans-serif;

    /* Official RiseGrowFound Palette */
    --rgf-bg-sky: #CDE7FD;
    --rgf-bg-sky-light: #E0F1FE;
    --rgf-bg-sky-deep: #B7DDFC;

    /* RiseGrowFound Vivid Red */
    --rgf-red: #E51A2C;
    --rgf-red-light: #FF3B4E;
    --rgf-red-dark: #C20E1E;
    --rgf-red-grad: linear-gradient(135deg, #FF2E44 0%, #E51A2C 50%, #C20E1E 100%);
    --rgf-red-glow: rgba(229, 26, 44, 0.35);

    /* Emerald Profit / Daily Yield */
    --rgf-emerald: #047857;
    --rgf-emerald-dark: #065F46;
    --rgf-emerald-grad: linear-gradient(135deg, #059669 0%, #047857 100%);

    /* Tech & Gold Accents */
    --rgf-gold: #B45309;
    --rgf-cyan: #0284C7;

    /* Deepest Obsidian Dark Navy for Maximum Readability on Light Sky Blue */
    --rgf-text-heading: #08162B;
    --rgf-text-body: #162842;
    --rgf-text-muted: #3B536E;
    --rgf-text-gold: #B45309;
}

/* ==========================================================================
   GLOBAL RESET & SEAMLESS FULL-SCREEN CANVAS
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    background-color: var(--rgf-bg-sky) !important;
    color: var(--rgf-text-body) !important;
    font-family: var(--rgf-font-sans) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    min-height: 100vh !important;
    background-color: var(--rgf-bg-sky) !important;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.8) 0%, transparent 40%),
        radial-gradient(circle at 90% 15%, rgba(229, 26, 44, 0.05) 0%, transparent 35%),
        radial-gradient(circle at 50% 85%, rgba(255, 255, 255, 0.6) 0%, transparent 45%),
        linear-gradient(180deg, #D7EDFE 0%, #C6E6FB 40%, #B8DCFA 100%) !important;
    background-attachment: fixed !important;
    color: var(--rgf-text-body) !important;
    font-family: var(--rgf-font-sans) !important;
    line-height: 1.5;
    position: relative;
    overflow-x: hidden;
}

/* Mobile First / Android App Shell - Full Screen Responsive */
.landing-shell,
.dash-shell,
.prod-shell,
.sub-shell,
.wd-shell,
.prof-shell,
.auth-container,
.detail-shell,
.bonus-shell {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 12px 16px 110px !important;
    min-height: 100vh !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   CONTAINERLESS ARCHITECTURE (ZERO CONTAINER BOXES)
   ========================================================================== */
.rgf-card,
.card,
.panel,
.stat-card,
.feature,
.service,
.balance,
.today-card,
.product-card,
.package,
.bonus-offer,
.rgf-panel,
.product-luxury-card,
.calc-container,
.calc-results-grid,
.product-metrics-table,
.hero-stat-card,
.wealth-hero-card,
.contract-card,
.bank-card-box,
.auth-glass-box,
.detail-hero-card,
.detail-table-card,
.spec-grid-3,
.contract-specs,
.live-yield-ticker-box,
.dash-ticker {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
}

.rgf-card::before,
.card::before,
.wealth-hero-card::after,
.rgf-card-gold::before,
.rgf-card-red::before {
    display: none !important;
}

/* ==========================================================================
   METRICS TABLES & SPEC ROWS (CLEAN HAIRLINE DIVIDERS, NO BOXES)
   ========================================================================== */
.product-metrics-table,
.spec-grid-3,
.contract-specs,
.calc-results-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    background: transparent !important;
    border-top: 1px solid rgba(18, 52, 92, 0.15) !important;
    border-bottom: 1px solid rgba(18, 52, 92, 0.15) !important;
    border-left: none !important;
    border-right: none !important;
    padding: 14px 0 !important;
    margin: 16px 0 !important;
    text-align: center !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.product-metrics-table small,
.spec-grid-3 small,
.contract-specs small,
.calc-results-grid small {
    display: block !important;
    font-size: 0.72rem !important;
    color: var(--rgf-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 700 !important;
    margin-bottom: 3px !important;
}

.product-metrics-table b,
.spec-grid-3 b,
.contract-specs b,
.calc-results-grid strong {
    display: block !important;
    font-family: var(--rgf-font-display) !important;
    font-size: 1.15rem !important;
    color: var(--rgf-text-heading) !important;
    font-weight: 800 !important;
}

/* Clean Separators for Feed / List Items */
.product-luxury-card,
.contract-card {
    padding: 24px 0 28px !important;
    border-bottom: 1px solid rgba(18, 52, 92, 0.14) !important;
    margin-bottom: 8px !important;
    display: flex !important;
    flex-direction: column !important;
}

.product-luxury-card:last-child,
.contract-card:last-child {
    border-bottom: none !important;
}

/* ==========================================================================
   TYPOGRAPHY (ULTRA CRISP & CONTRASTING DIRECTLY ON SKY BLUE)
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--rgf-font-display) !important;
    color: var(--rgf-text-heading) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
}

p {
    color: var(--rgf-text-body) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
}

.text-gold {
    color: var(--rgf-gold) !important;
    font-weight: 700;
}

.text-red {
    color: var(--rgf-red) !important;
    font-weight: 700;
}

.text-emerald, .text-profit, .text-green {
    color: var(--rgf-emerald) !important;
    font-weight: 800;
}

.text-heading {
    color: var(--rgf-text-heading) !important;
    font-weight: 800;
}

.text-muted {
    color: var(--rgf-text-muted) !important;
    font-weight: 600;
}

/* Tabular figures for ticking numbers */
.num-ticker, .ticking-val, .num-ticking, [data-live-profit-rate] {
    font-family: var(--rgf-font-display) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    font-weight: 800;
}

/* ==========================================================================
   BUTTONS (FULL WIDTH VIBRANT RED TOUCH TARGETS)
   ========================================================================== */
.btn-primary,
.button,
.btn,
.invest-button,
.hero-cta,
.login-submit,
.submit-btn,
.action-btn,
.product-action,
.tea-popup-primary,
.package-action a,
.claim-btn {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: var(--rgf-red-grad) !important;
    color: #FFFFFF !important;
    font-family: var(--rgf-font-sans) !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    padding: 15px 24px !important;
    border-radius: 16px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 6px 22px rgba(229, 26, 44, 0.35) !important;
    transition: all 0.2s ease !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.btn-primary:active,
.hero-cta:active {
    transform: scale(0.98) !important;
}

.btn-secondary,
.btn-outline {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    color: var(--rgf-text-heading) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 13px 22px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(18, 52, 92, 0.15) !important;
    cursor: pointer !important;
    box-shadow: 0 2px 10px rgba(12, 45, 84, 0.04) !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

/* ==========================================================================
   INPUTS & FORMS
   ========================================================================== */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
select,
textarea {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(18, 52, 92, 0.18) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    color: var(--rgf-text-heading) !important;
    font-family: var(--rgf-font-sans) !important;
    font-size: 0.98rem !important;
    font-weight: 600 !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--rgf-red) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(229, 26, 44, 0.2) !important;
}

label {
    display: inline-block;
    color: var(--rgf-text-heading) !important;
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   BADGES & PILLS
   ========================================================================== */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(229, 26, 44, 0.12);
    color: var(--rgf-red);
    font-size: 0.78rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(229, 26, 44, 0.25);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.live-badge-green {
    background: rgba(5, 150, 105, 0.12);
    color: var(--rgf-emerald);
    border-color: rgba(5, 150, 105, 0.25);
}

.live-dot {
    width: 7px;
    height: 7px;
    background-color: var(--rgf-red);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px var(--rgf-red);
    animation: live-pulse 1.8s infinite ease-in-out;
}

@keyframes live-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
}

.yield-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(5, 150, 105, 0.12);
    color: var(--rgf-emerald);
    font-weight: 800;
    font-size: 0.85rem;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(5, 150, 105, 0.25);
}

/* ==========================================================================
   TICKER BANNER (BORDERLESS SEAMLESS SLIDE)
   ========================================================================== */
.rgf-ticker-wrapper,
.ticker-strip {
    width: 100%;
    background: transparent !important;
    border-top: 1px solid rgba(18, 52, 92, 0.12) !important;
    border-bottom: 1px solid rgba(18, 52, 92, 0.12) !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    position: relative;
    padding: 10px 0;
    margin: 14px 0 28px !important;
}

.rgf-ticker-track,
.ticker-inner {
    display: flex;
    white-space: nowrap;
    animation: ticker-slide 32s linear infinite;
    gap: 35px;
}

@keyframes ticker-slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--rgf-text-body);
    font-weight: 600;
}

.ticker-item b {
    color: var(--rgf-text-heading);
    font-weight: 800;
}

.ticker-item b.text-green {
    color: var(--rgf-emerald) !important;
    font-weight: 800;
}

/* ==========================================================================
   DIVIDEND COUNTDOWN (BORDERLESS)
   ========================================================================== */
.dividend-countdown-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: transparent !important;
    border-top: 1px solid rgba(18, 52, 92, 0.12) !important;
    border-bottom: 1px solid rgba(18, 52, 92, 0.12) !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px 0 !important;
    margin: 18px 0 !important;
}

.cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cd-unit strong {
    font-family: var(--rgf-font-display);
    font-size: 2rem;
    font-weight: 900;
    color: var(--rgf-red);
    line-height: 1;
}

.cd-unit small {
    font-size: 0.72rem;
    color: var(--rgf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-top: 4px;
}

.cd-sep {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--rgf-text-muted);
    margin-bottom: 12px;
}

/* ==========================================================================
   LIVE TOAST NOTIFICATION
   ========================================================================== */
.rgf-toast-container {
    position: fixed;
    bottom: 84px;
    left: 14px;
    right: 14px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 480px;
    margin: 0 auto;
}

.rgf-live-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 1);
    border-left: 4px solid var(--rgf-emerald);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 10px 28px rgba(12, 45, 84, 0.12);
    color: var(--rgf-text-heading);
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto;
}

.rgf-live-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}