/*
 * adaptive-ui.css
 * Age-group responsive CSS variables system for Mawanella Hub
 * Applied via body class: age-youth | age-adult | age-senior
 */

/* ─── Base design tokens (default = adult/standard) ─── */
:root {
    --font-size-sm:   0.875rem;
    --font-size-base: 1rem;
    --font-size-lg:   1.125rem;
    --font-size-xl:   1.5rem;
    --font-size-h1:   2.25rem;
    --font-size-h2:   1.75rem;

    --radius-card:    0.75rem;
    --spacing-card:   1.25rem;

    --nav-height:     64px;
    --icon-size:      1.25rem;

    --transition-speed: 0.25s;

    /* Default palette — adult/professional */
    --bg-primary:     #f8f9fa;
    --bg-card:        #ffffff;
    --text-primary:   #212529;
    --text-secondary: #6c757d;
    --accent:         #e67e22;
    --accent-light:   #fef3e8;
    --border-color:   #dee2e6;
    --nav-bg:         #1a1a2e;
    --nav-text:       #ffffff;
    --btn-primary:    #e67e22;
    --btn-text:       #ffffff;
    --hero-overlay:   rgba(0,0,0,0.45);

    --shadow-card:    0 2px 12px rgba(0,0,0,0.08);
    --shadow-hover:   0 8px 24px rgba(0,0,0,0.14);
}

/* ─── YOUTH mode (under 35) — Dark, vibrant, fast ─── */
body.age-youth {
    --bg-primary:        #0d0d1a;
    --bg-card:           rgba(255,255,255,0.05);
    --text-primary:      #f0f0ff;
    --text-secondary:    #a0a0c0;
    --accent:            #7c3aed;
    --accent-light:      rgba(124,58,237,0.15);
    --border-color:      rgba(255,255,255,0.12);
    --nav-bg:            rgba(13,13,26,0.92);
    --nav-text:          #e0e0ff;
    --btn-primary:       linear-gradient(135deg, #7c3aed, #ec4899);
    --hero-overlay:      rgba(5,5,15,0.6);
    --shadow-card:       0 4px 20px rgba(124,58,237,0.2);
    --shadow-hover:      0 12px 32px rgba(124,58,237,0.35);
    --transition-speed:  0.15s;

    --font-size-base: 0.95rem;
    --font-size-h1:   2.5rem;
    --radius-card:    1rem;

    background-color: var(--bg-primary);
    color: var(--text-primary);
}

body.age-youth * {
    transition: all var(--transition-speed) ease;
}

/* Glassmorphism cards for youth */
body.age-youth .card,
body.age-youth .listing-card,
body.age-youth .business-card {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: var(--shadow-card);
}

body.age-youth .btn-primary {
    background: linear-gradient(135deg, #7c3aed, #ec4899);
    border: none;
    font-weight: 600;
    letter-spacing: 0.02em;
}

body.age-youth nav {
    background: var(--nav-bg) !important;
    backdrop-filter: blur(20px);
}

/* ─── SENIOR mode (over 55) — High contrast, large fonts, simple ─── */
body.age-senior {
    --bg-primary:        #fffef7;
    --bg-card:           #ffffff;
    --text-primary:      #1a1a1a;
    --text-secondary:    #333333;
    --accent:            #c0392b;
    --accent-light:      #fef0ee;
    --border-color:      #999999;
    --nav-bg:            #1a1a1a;
    --nav-text:          #ffffff;
    --btn-primary:       #c0392b;
    --hero-overlay:      rgba(0,0,0,0.55);
    --shadow-card:       0 4px 16px rgba(0,0,0,0.18);
    --shadow-hover:      0 8px 24px rgba(0,0,0,0.25);

    --font-size-sm:   1rem;
    --font-size-base: 1.2rem;
    --font-size-lg:   1.4rem;
    --font-size-xl:   1.8rem;
    --font-size-h1:   2.8rem;
    --font-size-h2:   2.2rem;
    --icon-size:      2rem;
    --nav-height:     80px;
    --radius-card:    0.5rem;
    --spacing-card:   1.75rem;

    font-size: var(--font-size-base) !important;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

body.age-senior a,
body.age-senior button,
body.age-senior .nav-link {
    font-size: var(--font-size-lg) !important;
    font-weight: 600 !important;
}

body.age-senior input,
body.age-senior select,
body.age-senior textarea {
    font-size: var(--font-size-lg) !important;
    padding: 0.75rem 1rem !important;
    border: 2px solid var(--border-color) !important;
}

body.age-senior .btn {
    padding: 0.85rem 2rem !important;
    font-size: var(--font-size-lg) !important;
    border-radius: 8px !important;
}

/* Prominent icon labels for seniors */
body.age-senior .nav-icon-label { display: inline !important; }
body.age-youth .nav-icon-label,
body.age-adult .nav-icon-label { display: none; }

/* ─── Shared component styles using tokens ─── */
body { font-size: var(--font-size-base); background: var(--bg-primary); color: var(--text-primary); }
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }

.card, .listing-card, .business-card {
    background: var(--bg-card);
    border-radius: var(--radius-card);
    padding: var(--spacing-card);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.card:hover, .listing-card:hover, .business-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}

.btn-primary {
    background: var(--btn-primary);
    color: var(--btn-text);
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.badge-verified {
    background: #27ae60;
    color: #fff;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.badge-pending {
    background: #f39c12;
    color: #fff;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ─── Language / age switcher bar ─── */
.switcher-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lang-btn {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.lang-btn:hover, .lang-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.age-pill {
    padding: 0.25rem 0.8rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.age-pill:hover, .age-pill.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ─── Star rating widget ─── */
.star-rating { display: flex; flex-direction: row-reverse; gap: 0.2rem; }
.star-rating input { display: none; }
.star-rating label {
    font-size: 2rem;
    color: #ddd;
    cursor: pointer;
    transition: color 0.15s;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #f39c12;
}

/* ─── Trust badge on seller profiles ─── */
.trust-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.trust-stat {
    text-align: center;
}
.trust-stat .value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}
.trust-stat .label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ─── Responsive tweaks for Mobile & Tablets ─── */
@media (max-width: 991px) {
    :root {
        --font-size-h1: 2.2rem;
        --font-size-h2: 1.6rem;
        --spacing-card: 1rem;
    }
}

@media (max-width: 768px) {
    :root { 
        --font-size-h1: 1.85rem; 
        --font-size-h2: 1.45rem; 
        --font-size-base: 0.95rem;
        --radius-card: 0.85rem;
    }
    body.age-senior { 
        --font-size-h1: 2rem; 
        --font-size-h2: 1.6rem;
        --font-size-base: 1.1rem; 
    }
    
    .card, .listing-card, .business-card, .glass-card {
        padding: 1.1rem !important;
    }

    .trust-stat .value { font-size: 1.6rem; }
}

@media (max-width: 576px) {
    :root {
        --font-size-h1: 1.6rem;
        --font-size-h2: 1.3rem;
        --spacing-card: 0.9rem;
    }

    .switcher-bar {
        justify-content: center;
        gap: 0.3rem;
    }
    
    .lang-btn, .age-pill {
        font-size: 0.75rem;
        padding: 0.2rem 0.6rem;
    }

    body.age-senior .lang-btn, 
    body.age-senior .age-pill {
        font-size: 0.95rem;
        padding: 0.35rem 0.8rem;
    }

    .container, .container-fluid, .container-xl {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}