/* agri-formula.css — frontend section ที่ inject ผ่าน afsm_after_product_table */

.af-section {
    margin: 1.5rem 0;
    border-top: 3px solid var(--afsm-primary, #0f6b4e);
    border-radius: 0 0 var(--afsm-radius, 10px) var(--afsm-radius, 10px);
    background: #fff;
    border-left: 1px solid var(--afsm-border, #e5e7eb);
    border-right: 1px solid var(--afsm-border, #e5e7eb);
    border-bottom: 1px solid var(--afsm-border, #e5e7eb);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", sans-serif;
}

/* ── Header ──────────────────────────────────────────────────────────── */

.af-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: .85rem 1rem .75rem;
    background: var(--afsm-primary-lt, #e8f5f0);
    border-bottom: 1px solid var(--afsm-border, #e5e7eb);
}

.af-section-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.af-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--afsm-primary, #0f6b4e);
    margin: 0;
    flex: 1;
}

.af-section-count {
    font-size: .75rem;
    background: var(--afsm-primary, #0f6b4e);
    color: #fff;
    border-radius: 999px;
    padding: 1px 10px;
}

/* ── Tab strip ───────────────────────────────────────────────────────── */

.af-tab-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--afsm-border, #e5e7eb);
    padding: 0 .5rem;
    background: #fafafa;
}

.af-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .6rem .9rem;
    font-size: .82rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}

.af-tab:hover {
    color: var(--afsm-primary, #0f6b4e);
}

.af-tab.active {
    color: var(--afsm-primary, #0f6b4e);
    border-bottom-color: var(--afsm-primary, #0f6b4e);
    font-weight: 600;
}

/* ── Panel ───────────────────────────────────────────────────────────── */

.af-panel {
    display: none;
    padding: 1rem;
}

.af-panel.active {
    display: block;
}

/* ── Meta row ────────────────────────────────────────────────────────── */

.af-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-bottom: .85rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--afsm-border, #e5e7eb);
    font-size: .82rem;
    color: #374151;
}

.af-meta-label {
    font-weight: 600;
    color: var(--afsm-primary, #0f6b4e);
    margin-right: 4px;
}

/* ── Ingredient table ────────────────────────────────────────────────── */

.af-ingredient-table-wrap {
    overflow-x: auto;
    margin-bottom: .75rem;
}

.af-ingredient-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .83rem;
}

.af-ingredient-table thead tr {
    background: var(--afsm-primary-lt, #e8f5f0);
}

.af-ingredient-table th {
    padding: 6px 10px;
    text-align: left;
    font-size: .75rem;
    font-weight: 600;
    color: var(--afsm-primary, #0f6b4e);
    border-bottom: 1px solid var(--afsm-border, #e5e7eb);
    white-space: nowrap;
}

.af-ingredient-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--afsm-border, #e5e7eb);
    vertical-align: middle;
    color: #374151;
}

.af-ingredient-table tr:last-child td {
    border-bottom: none;
}

.af-col-role  { width: 90px; }
.af-col-dose  { width: 110px; white-space: nowrap; }
.af-col-water { width: 90px; }

.af-ing-name a {
    color: var(--afsm-primary, #0f6b4e);
    text-decoration: none;
}

.af-ing-name a:hover {
    text-decoration: underline;
}

/* ── Role badges ─────────────────────────────────────────────────────── */

.af-role-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

.af-role-main_active        { background: #dcfce7; color: #14532d; }
.af-role-adjuvant           { background: #dbeafe; color: #1e3a5f; }
.af-role-secondary_nutrient { background: #fef3c7; color: #78350f; }
.af-role-primary_nutrient   { background: #ede9fe; color: #3b0764; }
.af-role-amino_acid         { background: #fce7f3; color: #831843; }
.af-role-other              { background: #f3f4f6; color: #374151; }

.af-badge--chemical   { background: #fee2e2; color: #7f1d1d; }
.af-badge--organic    { background: #dcfce7; color: #14532d; }
.af-badge--integrated { background: #dbeafe; color: #1e3a5f; }

/* ── Precaution ──────────────────────────────────────────────────────── */

.af-precaution {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    padding: .65rem .85rem;
    font-size: .82rem;
    color: #78350f;
    line-height: 1.6;
    margin-bottom: .75rem;
}

.af-precaution-icon {
    flex-shrink: 0;
    font-size: .9rem;
    margin-top: 1px;
}

/* ── Related links ───────────────────────────────────────────────────── */

.af-related-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: #6b7280;
    padding-top: .5rem;
    border-top: 1px solid var(--afsm-border, #e5e7eb);
}

.af-related-label {
    font-weight: 600;
    color: #374151;
    flex-shrink: 0;
}

.af-related-link {
    color: var(--afsm-primary, #0f6b4e);
    text-decoration: none;
    padding: 1px 8px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .75rem;
}

.af-related-link:hover {
    background: var(--afsm-primary-lt, #e8f5f0);
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .af-ingredient-table th,
    .af-ingredient-table td {
        padding: 5px 7px;
        font-size: .78rem;
    }

    .af-tab {
        padding: .5rem .65rem;
        font-size: .78rem;
    }
}