/* Diagnosis Flow Pages CSS */
:root { --green: #2c5f2d; --gl: #4CAF50; --gold: #D4AF37; --cream: #F5F1E8; }

/* ── Hero Header ── */
.dh, .diag-hero, .q-hero, .c-hero, .co-hero, .r-hero {
    background: linear-gradient(135deg, #2c5f2d, #4CAF50);
    color: #fff;
    padding: 44px 20px 30px;
    text-align: center;
}
.dh h1, .diag-hero h1, .c-hero h1, .co-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    margin-bottom: 8px;
}
.dh p, .diag-hero p, .q-hero p, .c-hero p, .co-hero p { opacity: .85; font-size: 14px; }
.q-hero h2 { font-family: 'Playfair Display', serif; font-size: 1.4rem; margin-bottom: 4px; }
.r-hero h1 { font-family: 'Playfair Display', serif; font-size: 1.8rem; margin-bottom: 6px; }
.r-hero p { opacity: .85; font-size: 14px; }

/* ── Steps Bar ── */
.diag-steps, .steps-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    padding: 20px 0 0;
    flex-wrap: wrap;
}
.ds, .step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,.55);
}
.ds.done, .step.done { color: rgba(255,255,255,.85); }
.ds.active, .step.active { color: #fff; font-weight: 700; }
.ds-num, .step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.ds.done .ds-num, .step.done .step-num { background: rgba(255,255,255,.45); }
.ds.active .ds-num, .step.active .step-num { background: #D4AF37; color: #2c3e2f; }
.ds-arrow, .step-arrow { color: rgba(255,255,255,.3); margin: 0 6px; font-size: 16px; }

/* ── Body Wrappers ── */
.db, .diag-body, .q-wrap, .c-body, .co-body, .r-body, .h-body {
    max-width: 860px;
    margin: 40px auto;
    padding: 0 20px 60px;
}
.q-wrap, .c-body { max-width: 680px; }
.co-body, .r-body { max-width: 800px; }
.h-body { max-width: 960px; }

/* ── Category Grid ── */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}
.cat-card {
    background: #fff;
    border: 2px solid #e8f5e9;
    border-radius: 12px;
    padding: 24px 20px;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    text-align: center;
}
.cat-card:hover, .cat-card.sel, .cat-card.selected {
    border-color: var(--gl);
    box-shadow: 0 4px 20px rgba(76,175,80,.2);
    transform: translateY(-2px);
}
.cat-card.sel::after, .cat-card.selected::after {
    content: '✓';
    position: absolute; top: 10px; right: 12px;
    background: var(--gl); color: #fff;
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.cat-icon { font-size: 2.2rem; margin-bottom: 10px; }
.cat-card h3 { font-size: .95rem; color: var(--green); margin-bottom: 6px; }
.cat-count {
    display: inline-block;
    background: #e8f5e9; color: var(--green);
    padding: 2px 10px; border-radius: 10px;
    font-size: 11px; font-weight: 600;
}

/* ── Cards ── */
.dc, .c-card, .co-card, .sc, .disease-card, .order-section {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    padding: 36px 32px;
    margin-bottom: 20px;
}
.dc h3, .c-card h3, .co-card h3, .sc h3 {
    font-family: 'Playfair Display', serif;
    color: var(--green);
    font-size: 1.05rem;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e8f5e9;
}
.disease-card { border-top: 5px solid var(--gl); }
.disease-card h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem; color: var(--green); margin-bottom: 8px;
}
.disease-card .desc { color: #555; font-size: 14px; line-height: 1.7; margin-bottom: 20px; }
.order-section { border-top: 5px solid var(--gold); }
.order-section h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem; color: #856404;
    border-bottom: 2px solid #fff3cd;
    padding-bottom: 10px; margin-bottom: 20px;
}

/* ── Form Fields ── */
.fg { margin-bottom: 18px; }
.fg label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 6px; }
.fg input, .fg select, .fg textarea {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid #ddd; border-radius: 8px;
    font-size: 14px; font-family: inherit;
    box-sizing: border-box; transition: border-color .2s;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--gl); outline: none; }
.fg textarea { resize: vertical; min-height: 90px; }
.fr, .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.req { color: #ef5350; }

/* ── Buttons ── */
.btn, .btn-next, .btn-start {
    background: linear-gradient(135deg, #2c5f2d, #4CAF50);
    color: #fff; border: none;
    padding: 15px; border-radius: 10px;
    font-size: 16px; font-weight: 600;
    cursor: pointer; width: 100%;
    font-family: inherit; transition: opacity .2s;
}
.btn:hover, .btn-next:hover, .btn-start:hover { opacity: .9; }
.btn:disabled, .btn-next:disabled, .btn-start:disabled { opacity: .45; cursor: not-allowed; }
.btn-pay {
    background: linear-gradient(135deg, #D4AF37, #B8941F);
    color: #fff; border: none;
    padding: 16px 48px; border-radius: 10px;
    font-size: 16px; font-weight: 700;
    cursor: pointer; width: 100%;
    font-family: inherit; transition: opacity .2s;
}
.btn-pay:hover { opacity: .9; }
.btn-order {
    background: linear-gradient(135deg, #D4AF37, #B8941F);
    color: #fff; border: none;
    padding: 15px 48px; border-radius: 10px;
    font-size: 16px; font-weight: 700;
    cursor: pointer; width: 100%;
    font-family: inherit; transition: opacity .2s;
}
.btn-order:hover { opacity: .9; }
.back, .btn-back {
    display: inline-block; color: #888;
    font-size: 14px; text-decoration: none; margin-bottom: 20px;
}
.back:hover, .btn-back:hover { color: var(--green); }
.btn-skip { display: block; text-align: center; margin-top: 12px; color: #aaa; font-size: 13px; text-decoration: none; }
.btn-skip:hover { color: #666; }

/* ── Progress Bar ── */
.prog-wrap, .progress-wrap { margin-bottom: 22px; }
.prog-label, .progress-label {
    display: flex; justify-content: space-between;
    font-size: 13px; color: #666; margin-bottom: 6px;
}
.prog-bg, .progress-bar { height: 8px; background: #e0e0e0; border-radius: 8px; overflow: hidden; }
.prog-fill, .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2c5f2d, #4CAF50);
    border-radius: 8px; transition: width .4s;
}

/* ── Question Card ── */
.qcard, .q-card {
    background: #fff; border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    padding: 36px 32px;
}
.qlabel, .q-label {
    font-size: 11px; font-weight: 700; color: var(--gl);
    text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px;
}
.qtext, .q-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem; color: #222; line-height: 1.5; margin-bottom: 28px;
}
.opts, .options { display: flex; flex-direction: column; gap: 12px; }
.opt, .opt-btn {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px; border: 2px solid #e8e8e8;
    border-radius: 10px; background: #fff;
    cursor: pointer; font-size: 15px; color: #333;
    text-align: left; transition: all .15s;
    width: 100%; font-family: inherit;
}
.opt:hover, .opt-btn:hover { border-color: var(--gl); background: #f1f8f1; transform: translateX(5px); }
.dot, .opt-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.opt-y .dot, .opt-yes .opt-dot { background: #4CAF50; }
.opt-n .dot, .opt-no .opt-dot { background: #ef5350; }
.opt-s .dot, .opt-some .opt-dot { background: #FF9800; }
.opt:hover .dot, .opt-btn:hover .opt-dot { transform: scale(1.3); transition: transform .15s; }
.skip-row { text-align: center; margin-top: 14px; }
.skip-btn {
    background: none; border: none; color: #bbb;
    font-size: 13px; cursor: pointer; font-family: inherit; padding: 6px 12px;
}
.skip-btn:hover { color: #888; }
.foot, .footer-row {
    display: flex; justify-content: space-between;
    align-items: center; margin-top: 26px; flex-wrap: wrap; gap: 10px;
}
.btn-restart {
    background: #f5f5f5; color: #666;
    border: 1.5px solid #ddd; padding: 10px 20px;
    border-radius: 8px; font-size: 13px;
    cursor: pointer; font-family: inherit;
    text-decoration: none; display: inline-block;
}
.btn-restart:hover { background: #ffebee; border-color: #ef9a9a; color: #c62828; }
.btn-result {
    background: var(--gold); color: #fff; border: none;
    padding: 10px 22px; border-radius: 8px;
    font-size: 13px; cursor: pointer; font-family: inherit;
    font-weight: 600; text-decoration: none; display: inline-block;
}
.answered-note {
    background: #e8f5e9; border-radius: 8px;
    padding: 11px 16px; margin-bottom: 16px;
    font-size: 13px; color: var(--green);
}

/* ── Confidence Bar ── */
.conf-label { display: flex; justify-content: space-between; font-size: 13px; color: #666; margin-bottom: 6px; }
.conf-label strong { color: var(--green); font-size: 15px; }
.conf-bar-bg { background: #e0e0e0; border-radius: 8px; height: 12px; overflow: hidden; }
.conf-bar { height: 100%; border-radius: 8px; background: linear-gradient(90deg, #2c5f2d, #4CAF50); transition: width 1s ease; }
.info-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pill { background: #e8f5e9; color: var(--green); padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; }

/* ── Symptoms ── */
.sym-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sym-tag { background: #fff8e1; border: 1px solid #ffe082; color: #5a4a00; padding: 5px 14px; border-radius: 20px; font-size: 13px; }

/* ── Medicines ── */
.med-row {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px; background: #f9fbe7;
    border-radius: 10px; margin-bottom: 12px;
    border-left: 4px solid var(--gold);
}
.med-check { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; flex-shrink: 0; }
.med-info { flex: 1; }
.med-info h4 { color: var(--green); margin-bottom: 4px; font-size: 15px; }
.med-info p { color: #666; font-size: 13px; margin-bottom: 4px; }
.med-dosage { display: inline-block; background: #e8f5e9; color: var(--green); padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.med-price { font-size: 15px; font-weight: 700; color: var(--green); white-space: nowrap; }
.qty-input { width: 60px; padding: 6px 8px; border: 1.5px solid #ddd; border-radius: 6px; font-size: 14px; text-align: center; }
.qty-input:focus { border-color: var(--gl); outline: none; }

/* ── Remedies ── */
.remedy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.remedy-card { background: #e8f5e9; padding: 14px; border-radius: 10px; border-left: 3px solid var(--gl); }
.remedy-type { display: inline-block; background: var(--green); color: #fff; padding: 2px 10px; border-radius: 10px; font-size: 11px; margin-bottom: 6px; }
.remedy-card p { font-size: 13px; color: #333; margin: 0; }

/* ── Diet ── */
.diet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.diet-list { list-style: none; padding: 0; margin: 0; }
.diet-list li { padding: 9px 12px; margin-bottom: 6px; border-radius: 7px; font-size: 13px; }
.diet-list li.eat { background: #e8f5e9; border-left: 4px solid #4CAF50; }
.diet-list li.avoid { background: #ffebee; border-left: 4px solid #ef5350; }

/* ── Alternatives ── */
.alt-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #f9f9f9; border-radius: 8px; margin-bottom: 8px; border: 1px solid #eee; }
.alt-name { flex: 1; font-size: 14px; color: #333; font-weight: 500; }
.alt-bar-bg { flex: 2; background: #e0e0e0; border-radius: 6px; height: 8px; overflow: hidden; }
.alt-bar { height: 100%; background: #90CAF9; border-radius: 6px; }
.alt-conf { font-size: 13px; color: #888; min-width: 38px; text-align: right; }

/* ── Order / Checkout ── */
.item-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.item-row:last-child { border-bottom: none; }
.item-name { font-size: 14px; color: #333; font-weight: 500; }
.item-qty { font-size: 13px; color: #888; }
.item-price { font-size: 15px; font-weight: 700; color: var(--green); }
.total-row {
    background: #e8f5e9; padding: 14px 18px; border-radius: 8px;
    display: flex; justify-content: space-between;
    font-weight: 700; color: var(--green); font-size: 16px; margin-top: 12px;
}
.pay-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.pay-opt { border: 2px solid #e0e0e0; border-radius: 10px; padding: 18px; cursor: pointer; transition: all .2s; text-align: center; }
.pay-opt:has(input:checked) { border-color: var(--gl); background: #f1f8f1; }
.pay-opt input { display: none; }
.pay-opt .icon { font-size: 2rem; margin-bottom: 8px; }
.pay-opt h4 { font-size: 14px; color: #333; margin-bottom: 4px; }
.pay-opt p { font-size: 12px; color: #888; margin: 0; }
.info-box { background: #e3f2fd; border-left: 4px solid #2196F3; padding: 12px 16px; border-radius: 8px; font-size: 13px; color: #1565C0; margin-bottom: 20px; }

/* ── Success Page ── */
.success-wrap { max-width: 680px; margin: 60px auto; padding: 0 20px 60px; text-align: center; }
.success-icon {
    width: 90px; height: 90px;
    background: linear-gradient(135deg, #2c5f2d, #4CAF50);
    border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 44px; margin: 0 auto 24px;
}
.success-wrap h1 { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--green); margin-bottom: 10px; }
.success-wrap p { color: #666; font-size: 15px; margin-bottom: 30px; }
.order-card { background: #fff; border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.08); padding: 28px; margin-bottom: 24px; text-align: left; }
.order-card h3 { font-family: 'Playfair Display', serif; color: var(--green); font-size: 1.05rem; border-bottom: 2px solid #e8f5e9; padding-bottom: 10px; margin-bottom: 16px; }
.order-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.meta-item strong { display: block; font-size: 11px; color: #888; text-transform: uppercase; margin-bottom: 3px; }
.meta-item span { font-size: 14px; color: #333; font-weight: 600; }
.status-badge { display: inline-block; background: #fff3cd; color: #856404; padding: 4px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.btn-primary { background: linear-gradient(135deg, #2c5f2d, #4CAF50); color: #fff; padding: 13px 28px; border-radius: 10px; text-decoration: none; font-size: 15px; font-weight: 600; }
.btn-secondary { background: #f5f5f5; color: #555; padding: 13px 28px; border-radius: 10px; text-decoration: none; font-size: 15px; border: 1.5px solid #ddd; }

/* ── History Page ── */
.h-hero { background: linear-gradient(135deg, #2c5f2d, #4CAF50); color: #fff; padding: 40px 20px; text-align: center; }
.h-hero h1 { font-family: 'Playfair Display', serif; font-size: 1.8rem; margin-bottom: 6px; }
.tabs { display: flex; gap: 0; border-bottom: 2px solid #e0e0e0; margin-bottom: 24px; }
.tab { padding: 12px 24px; font-size: 14px; font-weight: 600; color: #888; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; text-decoration: none; }
.tab.active { color: var(--green); border-bottom-color: var(--gl); }
.diag-row, .row { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid #f0f0f0; }
.diag-row:last-child, .row:last-child { border-bottom: none; }
.diag-icon, .row-icon { width: 44px; height: 44px; background: #e8f5e9; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.diag-info, .row-info { flex: 1; }
.diag-info h4, .row-info h4 { color: var(--green); margin-bottom: 4px; font-size: 15px; }
.diag-info p, .row-info p { color: #888; font-size: 13px; margin: 0; }
.conf-badge, .badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.conf-high { background: #e8f5e9; color: var(--green); }
.conf-mid { background: #fff3cd; color: #856404; }
.conf-low { background: #ffebee; color: #c62828; }
.status-badge { display: inline-block; background: #e3f2fd; color: #1565C0; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-left: 8px; }
.med-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.med-tag { background: #f9fbe7; border: 1px solid #ffe082; color: #5a4a00; padding: 3px 10px; border-radius: 12px; font-size: 12px; }
.empty-state { text-align: center; padding: 60px 20px; color: #aaa; }
.empty-state .icon { font-size: 3rem; margin-bottom: 16px; }
.btn-start { display: inline-block; background: linear-gradient(135deg, #2c5f2d, #4CAF50); color: #fff; padding: 13px 28px; border-radius: 10px; text-decoration: none; font-size: 15px; font-weight: 600; margin-top: 16px; }
.patient-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); padding: 24px; margin-bottom: 24px; border-left: 5px solid var(--gl); }
.patient-card h3 { font-family: 'Playfair Display', serif; color: var(--green); margin-bottom: 14px; }
.patient-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.patient-item strong { display: block; font-size: 11px; color: #888; text-transform: uppercase; margin-bottom: 3px; }
.patient-item span { font-size: 14px; color: #333; }

/* ── Misc ── */
.cat-badge { display: inline-flex; align-items: center; gap: 8px; background: #e8f5e9; color: var(--green); padding: 7px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; margin-bottom: 22px; }
.guest-note { background: #e8f5e9; border-radius: 8px; padding: 12px 16px; font-size: 13px; color: var(--green); margin-bottom: 22px; display: flex; align-items: center; gap: 8px; }
.login-link { text-align: center; margin-top: 18px; font-size: 14px; color: #888; }
.login-link a { color: var(--green); font-weight: 600; text-decoration: none; }
.err { background: #ffebee; border-left: 4px solid #ef5350; padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; color: #c62828; }
.no-result { background: #fff3cd; border-left: 4px solid var(--gold); padding: 20px; border-radius: 10px; color: #856404; }
.disclaimer { background: #fff8e1; border-left: 4px solid var(--gold); padding: 14px 18px; border-radius: 8px; font-size: 13px; color: #5a4a00; margin-top: 24px; }
.note { background: #fffde7; border-left: 4px solid var(--gold); padding: 14px 18px; border-radius: 6px; font-size: 13px; color: #5a4a00; margin-top: 20px; }
.r-hero .check { width: 68px; height: 68px; background: rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 34px; margin: 0 auto 14px; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .dh h1, .diag-hero h1 { font-size: 1.6rem; }
    .cat-grid { grid-template-columns: 1fr 1fr; }
    .diet-grid, .form-row, .fr { grid-template-columns: 1fr; }
    .med-row { flex-wrap: wrap; }
    .qcard, .q-card, .dc, .c-card { padding: 24px 18px; }
    .qtext, .q-text { font-size: 1.05rem; }
}