/* ═══════════════════════════════════════════════
   AI Recipe Generator v3.0 — style.css
   Palette: teal / blue-teal / warm white
   ═══════════════════════════════════════════════ */

/* ── Variables ───────────────────────────────── */
:root {
    --c-primary:     #0e7490;   /* teal-700        */
    --c-primary-dk:  #0c6379;   /* teal-800        */
    --c-primary-lt:  #cffafe;   /* teal-100        */
    --c-accent:      #0891b2;   /* cyan-600        */
    --c-accent-lt:   #e0f2fe;   /* sky-100         */
    --c-text:        #1e293b;   /* slate-800       */
    --c-muted:       #64748b;   /* slate-500       */
    --c-border:      #cbd5e1;   /* slate-300       */
    --c-bg:          #f8fafc;   /* slate-50        */
    --c-card:        #ffffff;
    --c-error-bg:    #fef2f2;
    --c-error:       #b91c1c;
    --c-sw:          #7c3aed;   /* violet for SW   */
    --c-ww:          #1d4ed8;   /* blue for WW     */
    --radius:        12px;
    --radius-sm:     8px;
    --shadow:        0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06);
}

/* ── Wrap ────────────────────────────────────── */
.airg-wrap {
    max-width: 800px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--c-text);
    font-size: 15px;
    line-height: 1.6;
}

/* ── Tabs ────────────────────────────────────── */
.airg-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 2px solid var(--c-border);
    margin-bottom: 28px;
}
.airg-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 600;
    color: var(--c-muted);
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.airg-tab:hover  { color: var(--c-primary); }
.airg-tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }

/* ── Panels ──────────────────────────────────── */
.airg-panel          { display: none; }
.airg-panel.active   { display: block; }

/* ── Form ────────────────────────────────────── */
#airg-form-section h2 {
    margin: 0 0 5px;
    font-size: 22px;
    color: var(--c-primary-dk);
}
.airg-subtitle { color: var(--c-muted); margin: 0 0 22px; font-size: 14px; }

.airg-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 2px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: inherit;
    color: var(--c-text);
    background: var(--c-card);
    resize: vertical;
    transition: border-color .2s, box-shadow .2s;
}
.airg-form textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(14,116,144,.12);
}

/* ── Diet pills ──────────────────────────────── */
.airg-field { margin-bottom: 16px; }
.airg-field > label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--c-muted);
    margin-bottom: 8px;
}
.airg-hint { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; color: #94a3b8; }

.airg-diet-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.airg-diet-pill {
    padding: 7px 14px;
    border: 2px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-card);
    color: var(--c-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
    user-select: none;
}
.airg-diet-pill:hover  { border-color: var(--c-primary); color: var(--c-primary); }
.airg-diet-pill.active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(14,116,144,.3);
}

/* ── Form grid ───────────────────────────────── */
.airg-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin: 18px 0 22px;
}
.airg-field select,
.airg-field input[type=number] {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 2px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    background: var(--c-card);
    color: var(--c-text);
    transition: border-color .2s;
}
.airg-field select:focus,
.airg-field input[type=number]:focus { outline: none; border-color: var(--c-primary); }

/* ── Primary button ──────────────────────────── */
.airg-btn-primary {
    background: var(--c-primary);
    color: #fff;
    border: none;
    padding: 13px 30px;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, transform .1s, box-shadow .2s;
    box-shadow: 0 2px 8px rgba(14,116,144,.35);
}
.airg-btn-primary:hover  { background: var(--c-primary-dk); box-shadow: 0 4px 14px rgba(14,116,144,.4); }
.airg-btn-primary:active { transform: scale(.98); }

/* ── Secondary button ────────────────────────── */
.airg-btn-secondary {
    background: var(--c-card);
    color: var(--c-primary);
    border: 2px solid var(--c-primary);
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.airg-btn-secondary:hover { background: var(--c-accent-lt); }

/* ── Loader ──────────────────────────────────── */
.airg-loader { text-align: center; padding: 70px 20px; }
.airg-spinner {
    width: 50px; height: 50px;
    border: 4px solid var(--c-primary-lt);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: airg-spin .85s linear infinite;
    margin: 0 auto 18px;
}
@keyframes airg-spin { to { transform: rotate(360deg); } }
#airg-loader-msg { color: var(--c-muted); font-size: 15px; }

/* ── Error ───────────────────────────────────── */
.airg-error {
    background: var(--c-error-bg);
    border-left: 4px solid var(--c-error);
    color: var(--c-error);
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    margin: 16px 0;
    font-size: 14px;
}

/* ── Recipe card ─────────────────────────────── */
.airg-recipe-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 32px 36px;
    margin-top: 24px;
    box-shadow: var(--shadow);
}

/* Header */
.airg-recipe-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}
.airg-header-actions { display: flex; gap: 10px; align-items: center; }
.airg-login-hint { font-size: 13px; color: var(--c-muted); }
.airg-login-hint a { color: var(--c-primary); text-decoration: none; }

/* Title & intro */
.airg-recipe-card h1 {
    margin: 0 0 12px;
    font-size: 28px;
    color: var(--c-primary-dk);
    line-height: 1.25;
}
.airg-intro { color: var(--c-muted); font-size: 15px; margin: 0 0 24px; }

/* ── Info strip ──────────────────────────────── */
.airg-info-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--c-accent-lt);
    border-radius: var(--radius-sm);
    border: 1px solid #bae6fd;
}
.airg-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 80px;
    flex: 1;
}
.airg-strip-icon  { font-size: 20px; line-height: 1; margin-bottom: 4px; }
.airg-strip-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--c-muted); font-weight: 700; }
.airg-strip-val   { font-size: 13px; font-weight: 700; color: var(--c-primary-dk); margin-top: 2px; }

/* ── Nutrition panel ─────────────────────────── */
.airg-nutrition-panel {
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin-bottom: 24px;
}
.airg-nutrition-panel h4 {
    margin: 0 0 12px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-muted);
    font-weight: 700;
}
.airg-nut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.airg-nut-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--c-border);
}
.airg-nut-label { font-weight: 600; color: var(--c-muted); }
.airg-nut-val   { font-weight: 700; color: var(--c-primary); }

/* ── Special diet panels ─────────────────────── */
.airg-special-panel {
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin-bottom: 20px;
}
.airg-sw-panel {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
}
.airg-sw-panel h4 { color: var(--c-sw); margin: 0 0 10px; font-size: 14px; }
.airg-ww-panel {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}
.airg-ww-panel h4 { color: var(--c-ww); margin: 0 0 10px; font-size: 14px; }
.airg-special-pre {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 14px;
    margin: 0;
    color: var(--c-text);
}

/* ── Section headings ────────────────────────── */
.airg-recipe-card h2 {
    margin: 28px 0 14px;
    font-size: 18px;
    color: var(--c-primary-dk);
    border-bottom: 2px solid var(--c-primary-lt);
    padding-bottom: 6px;
}
.airg-recipe-card h3 {
    margin: 22px 0 10px;
    font-size: 16px;
    color: var(--c-accent);
}

/* ── Ingredients ─────────────────────────────── */
ul.airg-ingredients {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.airg-ingredients li {
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 15px;
}
ul.airg-ingredients li label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    cursor: pointer;
}
ul.airg-ingredients li input[type=checkbox] {
    flex-shrink: 0;
    accent-color: var(--c-primary);
    width: 15px;
    height: 15px;
}
ul.airg-ingredients li.airg-checked span { text-decoration: line-through; color: #94a3b8; }

/* ── Instructions ────────────────────────────── */
ol.airg-instructions {
    padding-left: 22px;
    margin: 0;
}
ol.airg-instructions li {
    padding: 9px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 15px;
    line-height: 1.65;
}
ol.airg-instructions li:last-child { border-bottom: none; }

/* Tips */
.airg-recipe-card #airg-tips-section ul {
    padding-left: 20px;
}
.airg-recipe-card #airg-tips-section ul li {
    padding: 5px 0;
    font-size: 14px;
    color: var(--c-muted);
}

/* ── Result action row ───────────────────────── */
.airg-result-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* ── Saved recipes tab ───────────────────────── */
#airg-saved-loading { color: var(--c-muted); padding: 20px 0; }
#airg-saved-empty   { color: var(--c-muted); padding: 20px 0; }

.airg-saved-card {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}
.airg-saved-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}
.airg-saved-card-header h3 {
    margin: 0;
    font-size: 17px;
    color: var(--c-primary-dk);
    flex: 1;
}
.airg-delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--c-error);
    padding: 2px 6px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background .2s;
}
.airg-delete-btn:hover { background: var(--c-error-bg); }

.airg-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.airg-chip {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    color: var(--c-muted);
}
.airg-chip-diet {
    background: var(--c-primary-lt);
    border-color: #a5f3fc;
    color: var(--c-primary-dk);
}

.airg-saved-date { font-size: 12px; color: #94a3b8; display: block; margin-bottom: 10px; }

.airg-saved-details summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--c-primary);
    font-weight: 600;
    user-select: none;
}
.airg-saved-details h4 { margin: 14px 0 6px; font-size: 14px; color: var(--c-primary-dk); }

/* ══════════════════════════════════════════════
   PRINT STYLES
   Everything on screen is hidden; only
   #airg-print-page is shown when printing.
   ══════════════════════════════════════════════ */

/* Hide print page on screen */
#airg-print-page { display: none; }

@media print {

    /* Hide the whole app */
    .airg-wrap { display: none !important; }

    /* Show only the print page */
    #airg-print-page {
        display: block !important;
        font-family: Georgia, 'Times New Roman', serif;
        color: #1a1a1a;
        font-size: 11pt;
        line-height: 1.55;
        padding: 0;
        margin: 0;
    }

    /* ── Print header ─────────────────────────── */
    .airg-print-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2.5pt solid #0e7490;
        padding-bottom: 8pt;
        margin-bottom: 14pt;
    }
    .airg-print-logo {
        font-size: 14pt;
        font-weight: bold;
        color: #0e7490;
        font-family: -apple-system, sans-serif;
    }
    .airg-print-site {
        font-size: 9pt;
        color: #64748b;
        font-family: -apple-system, sans-serif;
    }

    /* ── Recipe title ─────────────────────────── */
    #airg-print-title {
        font-size: 22pt;
        margin: 0 0 8pt;
        color: #0c6379;
        font-family: Georgia, serif;
        line-height: 1.2;
        page-break-after: avoid;
    }
    .airg-print-intro {
        font-size: 10.5pt;
        color: #475569;
        margin: 0 0 14pt;
        font-style: italic;
    }

    /* ── Info strip ───────────────────────────── */
    .airg-print-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 6pt;
        padding: 10pt 12pt;
        background: #e0f2fe;
        border-radius: 6pt;
        margin-bottom: 18pt;
        border: 1pt solid #bae6fd;
        page-break-inside: avoid;
    }
    .airg-print-strip-item {
        display: flex;
        align-items: center;
        gap: 5pt;
        min-width: 100pt;
        flex: 1;
    }
    .airg-print-strip-icon  { font-size: 14pt; line-height: 1; }
    .airg-print-strip-text  { font-family: -apple-system, sans-serif; font-size: 9pt; color: #1e293b; }
    .airg-print-strip-text strong { display: block; font-size: 8pt; text-transform: uppercase; color: #64748b; letter-spacing: .4pt; }

    /* ── Two-column body ──────────────────────── */
    .airg-print-columns {
        display: flex;
        gap: 28pt;
        margin-top: 4pt;
    }
    .airg-print-col-left {
        width: 36%;
        flex-shrink: 0;
    }
    .airg-print-col-right {
        flex: 1;
    }

    /* Section headings */
    #airg-print-page h2 {
        font-size: 13pt;
        color: #0e7490;
        border-bottom: 1.5pt solid #cffafe;
        padding-bottom: 4pt;
        margin: 0 0 10pt;
        font-family: -apple-system, sans-serif;
        page-break-after: avoid;
    }
    #airg-print-page h3 {
        font-size: 11pt;
        color: #0891b2;
        margin: 12pt 0 6pt;
        font-family: -apple-system, sans-serif;
        page-break-after: avoid;
    }

    /* Ingredients — plain list for print */
    #airg-print-ingredients {
        list-style: disc;
        padding-left: 14pt;
        margin: 0 0 14pt;
    }
    #airg-print-ingredients li {
        padding: 3pt 0;
        border-bottom: .5pt solid #e2e8f0;
        font-size: 10pt;
        line-height: 1.4;
        page-break-inside: avoid;
    }

    /* Instructions */
    #airg-print-instructions {
        padding-left: 16pt;
        margin: 0 0 14pt;
    }
    #airg-print-instructions li {
        padding: 4pt 0;
        border-bottom: .5pt solid #e2e8f0;
        font-size: 10.5pt;
        line-height: 1.5;
        page-break-inside: avoid;
    }

    /* Tips */
    #airg-print-tips {
        padding-left: 14pt;
        list-style: disc;
        margin: 0;
    }
    #airg-print-tips li { font-size: 9.5pt; color: #475569; padding: 3pt 0; page-break-inside: avoid; }

    /* Nutrition in left column */
    #airg-print-nut-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    #airg-print-nut-list .airg-nut-item {
        display: flex;
        justify-content: space-between;
        font-size: 9.5pt;
        padding: 3pt 0;
        border-bottom: .5pt solid #e2e8f0;
    }
    #airg-print-nut-list .airg-nut-label { font-weight: bold; color: #475569; }
    #airg-print-nut-list .airg-nut-val   { color: #0e7490; font-weight: bold; }

    /* Special panels */
    .airg-special-panel {
        padding: 8pt 10pt;
        border-radius: 4pt;
        margin-top: 10pt;
        page-break-inside: avoid;
    }
    .airg-sw-panel { background: #f5f3ff; border: 1pt solid #ddd6fe; }
    .airg-sw-panel h4 { color: #7c3aed; font-size: 10pt; margin: 0 0 4pt; }
    .airg-ww-panel { background: #eff6ff; border: 1pt solid #bfdbfe; }
    .airg-ww-panel h4 { color: #1d4ed8; font-size: 10pt; margin: 0 0 4pt; }
    .airg-special-pre { font-size: 9.5pt; white-space: pre-wrap; margin: 0; }

    /* Footer */
    .airg-print-footer {
        margin-top: 20pt;
        padding-top: 8pt;
        border-top: 1pt solid #cbd5e1;
        font-size: 8pt;
        color: #94a3b8;
        font-family: -apple-system, sans-serif;
        text-align: center;
    }

    /* Page settings */
    @page { margin: 1.5cm 1.8cm; }
}

/* ── Responsive tweaks ───────────────────────── */
@media (max-width: 540px) {
    .airg-recipe-card { padding: 20px; }
    .airg-info-strip  { gap: 8px; }
    .airg-strip-item  { min-width: 70px; }
    .airg-form-grid   { grid-template-columns: 1fr 1fr; }
}