/* =============================================================
   Calorie Counter Plugin — Stylesheet v1.2
   ============================================================= */

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

:root {
    --cc-bg:          #0f1117;
    --cc-surface:     #1a1d27;
    --cc-surface-2:   #22263a;
    --cc-border:      rgba(255,255,255,0.08);
    --cc-primary:     #00e5a0;
    --cc-primary-dim: rgba(0,229,160,0.12);
    --cc-text:        #e8eaf0;
    --cc-muted:       #7a8090;
    --cc-danger:      #ff5c5c;
    --cc-warn:        #f7c65a;
    --cc-font:        'DM Sans', 'Segoe UI', sans-serif;
    --cc-mono:        'JetBrains Mono', 'Fira Code', monospace;
    --cc-radius:      12px;
    --cc-radius-sm:   8px;
    --cc-shadow:      0 8px 40px rgba(0,0,0,0.5);
    --cc-transition:  0.2s ease;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.cc-wrap {
    background:    var(--cc-bg);
    color:         var(--cc-text);
    font-family:   var(--cc-font);
    font-size:     15px;
    line-height:   1.6;
    border-radius: var(--cc-radius);
    box-shadow:    var(--cc-shadow);
    max-width:     780px;
    margin:        2rem auto;
    overflow:      hidden;
    border:        1px solid var(--cc-border);
}

/* ── Header ──────────────────────────────────────────────── */
.cc-header {
    background:    linear-gradient(135deg, #0d1f16 0%, #091521 100%);
    padding:       2.5rem 2rem 2rem;
    text-align:    center;
    border-bottom: 1px solid var(--cc-border);
    position:      relative;
    overflow:      hidden;
}

.cc-header::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse 60% 80% at 50% -20%, rgba(0,229,160,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.cc-header__icon      { font-size: 2.5rem; line-height: 1; margin-bottom: 0.75rem; filter: drop-shadow(0 0 20px rgba(0,229,160,0.6)); }
.cc-header__title     { font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem; color: #fff; letter-spacing: -0.02em; }
.cc-header__sub       { color: var(--cc-muted); font-size: 0.875rem; margin: 0; }

/* ── Steps ───────────────────────────────────────────────── */
.cc-step        { padding: 2rem; }
.cc-step[hidden]{ display: none; }

.cc-step-intro {
    text-align:    center;
    color:         var(--cc-muted);
    font-size:     0.9rem;
    margin-bottom: 1.5rem;
    padding:       1rem 1.5rem;
    background:    var(--cc-surface);
    border-radius: var(--cc-radius-sm);
    border:        1px solid var(--cc-border);
}
.cc-step-intro p { margin: 0; }

/* Step badge */
.cc-step-badge {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    margin-bottom: 1.5rem;
    padding:       0.6rem 1rem;
    background:    var(--cc-primary-dim);
    border:        1px solid rgba(0,229,160,0.2);
    border-radius: var(--cc-radius-sm);
}
.cc-step-badge__name   { flex: 1; font-weight: 600; color: var(--cc-primary); font-size: 0.9rem; }
.cc-step-badge__change { background: transparent; border: none; color: var(--cc-muted); cursor: pointer; font-size: 0.78rem; font-family: var(--cc-font); padding: 0; text-decoration: underline; transition: color var(--cc-transition); }
.cc-step-badge__change:hover { color: var(--cc-text); }

/* ── Form ─────────────────────────────────────────────────── */
.cc-form { display: flex; flex-direction: column; gap: 1.5rem; }

.cc-label {
    display:        block;
    font-size:      0.8rem;
    font-weight:    600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--cc-muted);
    margin-bottom:  0.5rem;
}
.cc-unit-label { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.7; }

.cc-input,
.cc-select {
    width:         100%;
    background:    var(--cc-surface);
    color:         var(--cc-text);
    border:        1.5px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    padding:       0.75rem 1rem;
    font-family:   var(--cc-font);
    font-size:     1rem;
    transition:    border-color var(--cc-transition), box-shadow var(--cc-transition);
    box-sizing:    border-box;
    appearance:    textfield;
    -moz-appearance: textfield;
}
.cc-input::-webkit-inner-spin-button,
.cc-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.cc-input:focus,
.cc-select:focus  { outline: none; border-color: var(--cc-primary); box-shadow: 0 0 0 3px var(--cc-primary-dim); }
.cc-input.cc-error { border-color: var(--cc-danger); }
.cc-select        { cursor: pointer; }
.cc-select option { background: #1a1d27; }

/* ── Toggle buttons ─────────────────────────────────────── */
.cc-toggle {
    display:       flex;
    gap:           4px;
    background:    var(--cc-surface);
    border:        1.5px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    padding:       4px;
}
.cc-toggle__btn {
    flex:          1;
    background:    transparent;
    border:        none;
    border-radius: 6px;
    color:         var(--cc-muted);
    cursor:        pointer;
    font-family:   var(--cc-font);
    font-size:     0.875rem;
    font-weight:   500;
    padding:       0.5rem 1rem;
    transition:    all var(--cc-transition);
}
.cc-toggle__btn--active { background: var(--cc-primary); color: #0a1a0f; font-weight: 700; }

/* ── Grid rows ──────────────────────────────────────────── */
.cc-row      { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.cc-row--2   { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .cc-row  { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .cc-row--2 { grid-template-columns: 1fr; } }

.cc-hint { display: block; font-size: 0.8rem; color: var(--cc-muted); margin-top: 0.375rem; }

/* ── Privacy note ───────────────────────────────────────── */
.cc-privacy-note { font-size: 0.78rem; color: var(--cc-muted); text-align: center; margin: 0; }
.cc-privacy-note::before { content: '🔒 '; font-size: 0.85em; }

/* ── Submit button ──────────────────────────────────────── */
.cc-btn {
    background:     var(--cc-primary);
    border:         none;
    border-radius:  var(--cc-radius-sm);
    color:          #0a1a0f;
    cursor:         pointer;
    font-family:    var(--cc-font);
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: 0.02em;
    padding:        0.875rem 2rem;
    width:          100%;
    transition:     all var(--cc-transition);
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            0.5rem;
}
.cc-btn:hover  { background: #00ffb3; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,229,160,0.35); }
.cc-btn:active { transform: translateY(0); }
.cc-btn--outline { background: transparent; border: 1.5px solid var(--cc-border); color: var(--cc-muted); margin-top: 1rem; }
.cc-btn--outline:hover { border-color: var(--cc-primary); color: var(--cc-primary); background: var(--cc-primary-dim); box-shadow: none; }

.cc-btn__spinner {
    width: 18px; height: 18px;
    border: 2.5px solid rgba(10,26,15,0.3);
    border-top-color: #0a1a0f;
    border-radius: 50%;
    animation: cc-spin 0.7s linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

/* ── Results ─────────────────────────────────────────────── */
.cc-results {
    padding:   2rem;
    border-top: 1px solid var(--cc-border);
    animation: cc-fadein 0.4s ease;
}
@keyframes cc-fadein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.cc-results__header { margin-bottom: 1.75rem; }
.cc-results__title  { font-size: 1.25rem; font-weight: 700; margin: 0; color: #fff; }

/* ── Hero cards ─────────────────────────────────────────── */
.cc-hero-row {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1rem;
    margin-bottom:         2rem;
}
@media (max-width: 560px) { .cc-hero-row { grid-template-columns: 1fr; } }

.cc-hero-card {
    background:    var(--cc-surface);
    border:        1.5px solid var(--cc-border);
    border-radius: var(--cc-radius);
    padding:       1.25rem;
    text-align:    center;
}
.cc-hero-card--primary {
    border-color: var(--cc-primary);
    background:   linear-gradient(135deg, #0d1f16, #091521);
    box-shadow:   0 4px 24px rgba(0,229,160,0.12);
}
.cc-hero-card__value    { font-family: var(--cc-mono); font-size: 1.75rem; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 0.375rem; }
.cc-hero-card--primary .cc-hero-card__value { color: var(--cc-primary); }
.cc-hero-card__label    { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-muted); margin-bottom: 0.375rem; }
.cc-hero-card__sub      { font-size: 0.75rem; color: var(--cc-muted); line-height: 1.5; }

/* BMI colours */
.cc-bmi-cat.bmi-under  { color: #7da8ff; }
.cc-bmi-cat.bmi-normal { color: var(--cc-primary); }
.cc-bmi-cat.bmi-over   { color: var(--cc-warn); }
.cc-bmi-cat.bmi-obese1,
.cc-bmi-cat.bmi-obese2,
.cc-bmi-cat.bmi-obese3 { color: var(--cc-danger); }

/* ── Sections ────────────────────────────────────────────── */
.cc-section        { margin-bottom: 2rem; }
.cc-section__title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cc-muted); margin: 0 0 1rem; }
.cc-section__sub   { font-weight: 400; letter-spacing: 0; text-transform: none; opacity: 0.7; }

/* ── Goal cards (3 cards, full width) ───────────────────── */
.cc-goals-grid { display: flex; flex-direction: column; gap: 0.75rem; }

.cc-goal-card {
    background:     var(--cc-surface);
    border:         1.5px solid var(--cc-border);
    border-radius:  var(--cc-radius-sm);
    padding:        1.1rem 1.25rem;
    display:        flex;
    justify-content: space-between;
    align-items:    center;
    gap:            1rem;
}
.cc-goal-card--maintenance {
    border-color: rgba(0,229,160,0.4);
    background:   linear-gradient(135deg, rgba(0,229,160,0.05), transparent);
}

.cc-goal-card__left  { display: flex; align-items: center; gap: 0.75rem; }
.cc-goal-icon        { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.cc-goal-card__label { font-size: 1rem; font-weight: 600; color: var(--cc-text); }

.cc-goal-card__range { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cc-goal-range-values {
    font-family: var(--cc-mono);
    font-size:   1.1rem;
    font-weight: 700;
    color:       #fff;
    white-space: nowrap;
}
.cc-goal-card--maintenance .cc-goal-range-values { color: var(--cc-primary); }
.cc-goal-range-unit { font-size: 0.72rem; color: var(--cc-muted); }
.cc-goal-range-mid  { font-size: 0.72rem; color: var(--cc-muted); font-style: italic; }

/* ── Macro tabs ─────────────────────────────────────────── */
.cc-macro-tabs { display: flex; gap: 4px; margin-bottom: 1rem; }
.cc-macro-tab {
    background:    var(--cc-surface);
    border:        1.5px solid var(--cc-border);
    border-radius: 6px;
    color:         var(--cc-muted);
    cursor:        pointer;
    font-family:   var(--cc-font);
    font-size:     0.8rem;
    font-weight:   600;
    padding:       0.45rem 1rem;
    transition:    all var(--cc-transition);
}
.cc-macro-tab--active { background: var(--cc-primary-dim); border-color: var(--cc-primary); color: var(--cc-primary); }

/* ── Macro bars ─────────────────────────────────────────── */
.cc-macro-bar-row    { margin-bottom: 0.75rem; }
.cc-macro-bar-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.35rem; }
.cc-macro-bar-label  { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.cc-macro-bar-label--protein { color: #7da8ff; }
.cc-macro-bar-label--carbs   { color: var(--cc-warn); }
.cc-macro-bar-label--fat     { color: #ff9d6e; }
.cc-macro-bar-value  { font-family: var(--cc-mono); font-size: 0.85rem; color: var(--cc-text); }
.cc-bar-track        { background: var(--cc-surface-2); border-radius: 100px; height: 8px; overflow: hidden; }
.cc-bar-fill         { height: 100%; border-radius: 100px; transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }
.cc-bar-fill--protein { background: linear-gradient(90deg, #4d7fff, #7da8ff); }
.cc-bar-fill--carbs   { background: linear-gradient(90deg, #e6a800, #f7c65a); }
.cc-bar-fill--fat     { background: linear-gradient(90deg, #e05a00, #ff9d6e); }

/* ── Disclaimer ─────────────────────────────────────────── */
.cc-formula-info   { background: var(--cc-surface); border-radius: var(--cc-radius-sm); padding: 1.25rem; border: 1px solid var(--cc-border); }
.cc-disclaimer     { font-size: 0.8rem; color: var(--cc-muted); margin: 0; line-height: 1.6; }
.cc-disclaimer strong { color: var(--cc-warn); }

/* ── Error messages ─────────────────────────────────────── */
.cc-error-msg        { background: rgba(255,92,92,0.1); border: 1px solid rgba(255,92,92,0.3); border-radius: var(--cc-radius-sm); color: var(--cc-danger); font-size: 0.875rem; padding: 0.75rem 1rem; display: none; }
.cc-error-msg.cc-visible { display: block; }