/* ==============================================
   GoodMood Design Tokens & Base Reset
   Aligned with Sasico (PikaThemes) production theme
   ============================================== */

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

/* ── Fix Bootstrap 3 root font-size (Sasico sets html to 10px) ── */
html:has(.goodmood-app) {
    font-size: 16px;
}

/* ── GoodMood Design Tokens (Sasico + Elementor production) ── */
/* Colors extracted from goodmoodlms.com Elementor kit (post-10.css) */
.goodmood-app {
    --gm-font-body: 'Inter', sans-serif;
    --gm-font-heading: 'Plus Jakarta Sans', sans-serif;
    --gm-color-primary: #ffa44e;
    --gm-color-primary-dark: #e8933d;
    --gm-color-primary-light: #FFE3C9;
    --gm-color-pink: #E80580;
    --gm-color-dark: #0E0E0E;
    --gm-color-text: #696969;
    --gm-color-white: #ffffff;
    --gm-color-gray: #EEEEEE;
    --gm-color-border: #0E0E0E1A;
    --gm-bg-green: #F1FEE1;
    --gm-bg-warm: #FAF5F0;
    --gm-radius: 15px;
    --gm-radius-pill: 999px;
    --gm-transition: all 0.3s linear;
    --gm-accent: #FFA44E;
    --gm-accent-dark: #e8922a;
    /* Gradients from Elementor production pricing cards */
    --gm-gradient-default: linear-gradient(180deg, #0E0E0E0D 0%, #0E0E0E00 100%);
    --gm-gradient-popular: linear-gradient(180deg, #FFE3C9 0%, #ffffff00 100%);

    font-family: var(--gm-font-body);
    font-size: 16px;
    color: var(--gm-color-dark);
    line-height: 1.6;
    max-width: 1320px;
    margin: 0 auto;
    padding: 16px 0;
}

.goodmood-app *, .goodmood-app *::before, .goodmood-app *::after {
    box-sizing: border-box;
}

/* --- Page Header --- */
.gm-page-header {
    margin-bottom: 2rem;
}

.gm-page-header h2 {
    font-family: var(--gm-font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gm-color-dark);
    margin: 0 0 0.25rem 0;
}

.gm-page-header p {
    font-size: 0.875rem;
    color: var(--gm-color-text);
    margin: 0;
}

/* --- Page Header Row (title + selector) --- */
.gm-page-header-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}