/**
 * ZN Partner Store — Styles (Phase 1: Appearance Overhaul)
 *
 * Light-first, theme-aware design system.
 * .zn-badge--partner lives in zn-agent-network.css (unconditional load).
 *
 * @package ZadwaNetwork\Partner
 * @since   2.9.6 (Phase 1)
 */

/* ════════════════════════════════════════════════════════════
   1. MODULE TOKENS — light-mode defaults
   ════════════════════════════════════════════════════════════ */
:root {
    --zn-partner-gold:           var(--zn-partner-accent,      #f59e0b);
    --zn-partner-gold-dark:      var(--zn-partner-accent-dark, #d97706);
    --zn-partner-gold-light:     var(--zn-partner-accent-light,rgba(245,158,11,.10));
    --zn-partner-bg:             #f8fafc;
    --zn-partner-surface:        #ffffff;
    --zn-partner-card:           #ffffff;
    --zn-partner-card-border:    #E5E7EB;
    --zn-partner-card-accent:    #F59E0B;
    --zn-partner-text:           #111827;
    --zn-partner-text-secondary: #374151;
    --zn-partner-muted:          #6B7280;
    --zn-partner-input-bg:       #ffffff;
    --zn-partner-input-border:   #D1D5DB;
    --zn-partner-input-text:     #111827;
    --zn-partner-border:         #E5E7EB;
    --zn-partner-border-gold:    rgba(245,158,11,0.30);
    --zn-partner-radius:         var(--zn-radius,    12px);
    --zn-partner-radius-sm:      var(--zn-radius-sm,  8px);
    --zn-partner-shadow:         0 2px 8px rgba(0,0,0,.08);
    --zn-partner-shadow-gold:    0 2px 10px rgba(245,158,11,.35);
}

/* Dark theme scope */
.zn-dark-theme {
    --zn-partner-bg:             #0f172a;
    --zn-partner-surface:        #1a1a2e;
    --zn-partner-card:           #0f3460;
    --zn-partner-card-border:    rgba(245,158,11,.20);
    --zn-partner-text:           #e2e8f0;
    --zn-partner-text-secondary: #cbd5e1;
    --zn-partner-muted:          #94a3b8;
    --zn-partner-input-bg:       rgba(255,255,255,.05);
    --zn-partner-input-border:   rgba(245,158,11,.20);
    --zn-partner-input-text:     #e2e8f0;
    --zn-partner-border:         rgba(255,255,255,.08);
    --zn-partner-border-gold:    rgba(245,158,11,.25);
    --zn-partner-shadow:         0 4px 20px rgba(0,0,0,.30);
}

/* ════════════════════════════════════════════════════════════
   2. TYPE BADGES
   ════════════════════════════════════════════════════════════ */
.zn-type-badge { display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.zn-type-badge--product { background:#0d9488; color:#fff; }
.zn-type-badge--service { background:#6366f1; color:#fff; }
.zn-type-badge--asset   { background:#ec4899; color:#fff; }

/* ════════════════════════════════════════════════════════════
   3. SDG BADGES
   ════════════════════════════════════════════════════════════ */
.zn-sdg-badge { display:inline-flex; align-items:center; justify-content:center; padding:3px 9px; border-radius:6px; font-size:11px; font-weight:700; background:#1e3a5f; color:#93c5fd; border:1px solid #2563eb; margin:2px; }
.zn-sdg-badge--1  { background:#eb1c2d; color:#fff; border-color:#eb1c2d; }
.zn-sdg-badge--2  { background:#d3a029; color:#fff; border-color:#d3a029; }
.zn-sdg-badge--3  { background:#4c9f38; color:#fff; border-color:#4c9f38; }
.zn-sdg-badge--4  { background:#c5192d; color:#fff; border-color:#c5192d; }
.zn-sdg-badge--5  { background:#ff3a21; color:#fff; border-color:#ff3a21; }
.zn-sdg-badge--6  { background:#26bde2; color:#fff; border-color:#26bde2; }
.zn-sdg-badge--7  { background:#fcc30b; color:#1a1a1a; border-color:#fcc30b; }
.zn-sdg-badge--8  { background:#a21942; color:#fff; border-color:#a21942; }
.zn-sdg-badge--9  { background:#fd6925; color:#fff; border-color:#fd6925; }
.zn-sdg-badge--10 { background:#dd1367; color:#fff; border-color:#dd1367; }
.zn-sdg-badge--11 { background:#fd9d24; color:#fff; border-color:#fd9d24; }
.zn-sdg-badge--12 { background:#bf8b2e; color:#fff; border-color:#bf8b2e; }
.zn-sdg-badge--13 { background:#3f7e44; color:#fff; border-color:#3f7e44; }
.zn-sdg-badge--14 { background:#0a97d9; color:#fff; border-color:#0a97d9; }
.zn-sdg-badge--15 { background:#56c02b; color:#fff; border-color:#56c02b; }
.zn-sdg-badge--16 { background:#00689d; color:#fff; border-color:#00689d; }
.zn-sdg-badge--17 { background:#19486a; color:#fff; border-color:#19486a; }

/* ════════════════════════════════════════════════════════════
   4. STATUS PILLS
   ════════════════════════════════════════════════════════════ */
.zn-status-pill { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; text-transform:uppercase; }
.zn-status-pill--active    { background:rgba(16,185,129,.12); color:#059669; border:1px solid rgba(16,185,129,.30); }
.zn-status-pill--approved  { background:rgba(59,130,246,.12); color:#2563eb; border:1px solid rgba(59,130,246,.30); }
.zn-status-pill--applied   { background:rgba(245,158,11,.12); color:#d97706; border:1px solid rgba(245,158,11,.30); }
.zn-status-pill--suspended { background:rgba(239,68,68,.12);  color:#dc2626; border:1px solid rgba(239,68,68,.30); }
.zn-status-pill--pending   { background:rgba(156,163,175,.12);color:#6B7280; border:1px solid rgba(156,163,175,.30); }
.zn-status-pill--completed { background:rgba(16,185,129,.12); color:#059669; border:1px solid rgba(16,185,129,.30); }
.zn-badge--active { background:rgba(16,185,129,.12); color:#059669; border:1px solid rgba(16,185,129,.25); border-radius:20px; padding:2px 9px; font-size:11px; font-weight:600; }
.zn-badge--draft  { background:rgba(156,163,175,.12);color:#6B7280; border:1px solid rgba(156,163,175,.25); border-radius:20px; padding:2px 9px; font-size:11px; font-weight:600; }

/* ════════════════════════════════════════════════════════════
   5. BUTTONS
   ════════════════════════════════════════════════════════════ */
.zn-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    min-height:44px; padding:0 20px; border-radius:var(--zn-partner-radius-sm);
    font-size:14px; font-weight:600; cursor:pointer; border:none;
    transition:all .2s ease; text-decoration:none; white-space:nowrap; box-sizing:border-box;
}
.zn-btn--primary { background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; box-shadow:var(--zn-partner-shadow-gold); }
.zn-btn--primary:hover { filter:brightness(1.08); transform:translateY(-1px); color:#fff; text-decoration:none; }
.zn-btn--ghost { background:transparent; color:var(--zn-partner-gold); border:1.5px solid var(--zn-partner-gold); }
.zn-btn--ghost:hover { background:var(--zn-partner-gold-light); text-decoration:none; }
.zn-btn--danger { background:transparent; color:#dc2626; border:1.5px solid #dc2626; }
.zn-btn--danger:hover { background:rgba(220,38,38,.08); }
.zn-btn--sm { min-height:36px; padding:0 14px; font-size:13px; }
.zn-btn--xs { min-height:30px; padding:0 10px; font-size:12px; }
.zn-btn:disabled,.zn-btn[disabled] { opacity:.55; cursor:not-allowed; transform:none !important; filter:none !important; }

/* ════════════════════════════════════════════════════════════
   6. MY STORE WRAPPER
   ════════════════════════════════════════════════════════════ */
.zn-partner-store-wrap {
    max-width:860px; margin:0 auto; padding:4px 0 80px;
    color:var(--zn-partner-text);
    font-family:var(--zn-bb-font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);
}

/* ════════════════════════════════════════════════════════════
   7. OVERVIEW TAB v2
   ════════════════════════════════════════════════════════════ */

/* Store header card */
.zn-partner-overview__header {
    display:flex; align-items:flex-start; gap:20px;
    margin-bottom:24px; padding:24px;
    background:var(--zn-partner-surface,#fff);
    border:1px solid var(--zn-partner-border,#E5E7EB);
    border-left:4px solid var(--zn-partner-gold,#F59E0B);
    border-radius:var(--zn-partner-radius);
    box-shadow:var(--zn-partner-shadow);
}
.zn-partner-overview__avatar {
    width:72px; height:72px; border-radius:50%;
    border:3px solid var(--zn-partner-gold,#F59E0B);
    object-fit:cover; flex-shrink:0;
    box-shadow:0 0 0 2px #fff,0 2px 8px rgba(245,158,11,.25);
}
.zn-partner-overview__header-info { flex:1; min-width:0; }
.zn-partner-overview__name {
    font-size:20px; font-weight:800; margin:0 0 6px;
    color:var(--zn-partner-text,#111827); line-height:1.2;
}
.zn-partner-overview__header-badges {
    display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px;
}
.zn-partner-overview__desc {
    color:var(--zn-partner-muted,#6B7280); margin:0; font-size:14px; line-height:1.6;
}

/* Stat grid — 4 columns */
.zn-partner-overview__stats {
    display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 20px;
}

/* Stat card — Phase 1 final */
.zn-stat-card {
    background:var(--zn-partner-surface,#fff);
    border:1px solid var(--zn-partner-card-border,#E5E7EB);
    border-left:4px solid var(--zn-partner-card-accent,#F59E0B);
    border-radius:var(--zn-partner-radius); padding:20px 16px;
    display:flex; flex-direction:column; gap:6px;
    box-shadow:0 1px 3px rgba(0,0,0,.06); transition:box-shadow .2s;
}
.zn-stat-card:hover { box-shadow:0 3px 10px rgba(0,0,0,.10); }
.zn-stat-card__value {
    font-size:26px; font-weight:800;
    color:var(--zn-partner-gold,#F59E0B); line-height:1.1; letter-spacing:-.5px;
}
.zn-stat-card__label {
    font-size:11px; color:var(--zn-partner-muted,#6B7280);
    text-transform:uppercase; letter-spacing:.6px; font-weight:500;
}
/* Earnings cards — teal accent to distinguish from product counts */
.zn-stat-card--earnings { border-left-color:#0284c7; }
.zn-stat-card--earnings .zn-stat-card__value { color:#0284c7; }

/* Quick actions */
.zn-partner-overview__quick-actions {
    display:flex; flex-wrap:wrap; gap:10px; margin:0 0 28px;
}

/* SDG strip */
.zn-partner-sdg-strip { margin:0 0 20px; }
.zn-partner-sdg-strip h4 {
    font-size:11px; color:var(--zn-partner-muted,#6B7280);
    text-transform:uppercase; letter-spacing:.6px; margin:0 0 10px; font-weight:600;
}
.zn-partner-sdg-strip__tags { display:flex; flex-wrap:wrap; gap:6px; }

/* Share URL */
.zn-partner-overview__share { margin-top:20px; }
.zn-partner-overview__share > p {
    font-size:12px; font-weight:700; color:var(--zn-partner-muted,#6B7280);
    text-transform:uppercase; letter-spacing:.5px; margin:0 0 8px;
}
.zn-partner-overview__share-url { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.zn-partner-overview__share-url input {
    flex:1; min-width:0; padding:10px 14px; border-radius:8px;
    border:1px solid var(--zn-partner-input-border,#D1D5DB);
    background:var(--zn-partner-input-bg,#fff); color:var(--zn-partner-text,#111827);
    font-size:14px; min-height:44px; box-sizing:border-box;
}

/* ════════════════════════════════════════════════════════════
   8. STATUS BANNERS
   ════════════════════════════════════════════════════════════ */
.zn-partner-activation-banner {
    background:#FFFBEB; border:1px solid #F59E0B; border-left:4px solid #F59E0B;
    border-radius:var(--zn-partner-radius); padding:20px 24px; margin:0 0 24px;
}
.zn-partner-activation-banner h4 { font-size:15px; font-weight:700; color:#92400E; margin:0 0 14px; }
.zn-activation-checklist { list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:10px; }
.zn-activation-checklist li {
    font-size:14px; color:#374151; display:flex; align-items:center; gap:10px;
    padding:8px 12px; border-radius:8px;
    background:rgba(255,255,255,.60); border:1px solid rgba(245,158,11,.15);
}
.zn-activation-checklist li.done { color:#065F46; background:rgba(16,185,129,.06); border-color:rgba(16,185,129,.20); }
.zn-activation-hint { font-size:13px; color:#92400E; margin:0; font-style:italic; }
.zn-btn--activate-store {
    background:linear-gradient(135deg,#F59E0B,#D97706); color:#fff; border:none;
    padding:13px 28px; min-height:48px; font-size:15px; font-weight:700;
    border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
    transition:filter .15s,transform .1s; box-shadow:0 2px 8px rgba(245,158,11,.35);
}
.zn-btn--activate-store:hover   { filter:brightness(1.08); transform:translateY(-1px); }
.zn-btn--activate-store:active  { transform:translateY(0); }
.zn-btn--activate-store:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.zn-partner-status-banner--live {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:#ECFDF5; border:1px solid #10B981; border-left:4px solid #10B981;
    border-radius:var(--zn-partner-radius); padding:14px 20px; margin:0 0 24px;
    font-size:14px; font-weight:600; color:#065F46;
}

/* ════════════════════════════════════════════════════════════
   9. PRODUCTS TAB
   ════════════════════════════════════════════════════════════ */
.zn-partner-products__actions { margin-bottom:16px; }
.zn-partner-products__empty { color:var(--zn-partner-muted,#6B7280); padding:32px 0; text-align:center; font-size:14px; }
.zn-partner-products__list { display:flex; flex-direction:column; gap:12px; }

/* Product card — Phase 1 */
.zn-product-card {
    background:var(--zn-partner-surface,#fff);
    border:1px solid var(--zn-partner-border,#E5E7EB);
    border-left:4px solid #9CA3AF;
    border-radius:var(--zn-partner-radius);
    overflow:hidden; transition:border-color .18s,box-shadow .18s;
    box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.zn-product-card:hover { border-color:var(--zn-partner-border-gold); box-shadow:0 3px 12px rgba(0,0,0,.08); }
.zn-product-card--published { border-left-color:#10B981; }
.zn-product-card--draft     { border-left-color:#9CA3AF; }

/* Thumb + content row */
.zn-product-card__inner { display:flex; }
.zn-product-card__thumb {
    width:72px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:#F3F4F6; font-size:28px; color:#9CA3AF;
    border-right:1px solid var(--zn-partner-border,#E5E7EB); min-height:80px;
}
.zn-product-card__thumb img { width:72px; height:100%; object-fit:cover; display:block; }
.zn-product-card__content { flex:1; min-width:0; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.zn-product-card__header { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.zn-product-card__name { font-weight:700; color:var(--zn-partner-text,#111827); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
.zn-product-card__meta { font-size:13px; color:var(--zn-partner-muted,#6B7280); display:flex; gap:16px; flex-wrap:wrap; }
.zn-product-card__meta-item { display:flex; align-items:center; gap:4px; }
.zn-product-card__meta-item strong { color:var(--zn-partner-text-secondary,#374151); }
.zn-product-card__ar {
    font-size:12px; color:var(--zn-partner-muted,#6B7280);
    background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.20);
    border-radius:6px; padding:2px 8px;
}
.zn-product-card__actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Inline edit panel */
.zn-product-card__edit-form {
    border-top:1px solid var(--zn-partner-border,#E5E7EB);
    background:#FAFAFA; padding:16px; display:none;
}

/* Add product form */
.zn-partner-products__add-form {
    background:#FAFBFF;
    border:1px solid var(--zn-partner-border-gold,rgba(245,158,11,.25));
    border-left:4px solid var(--zn-partner-gold,#F59E0B);
    border-radius:var(--zn-partner-radius); padding:24px; margin-bottom:20px;
}

/* ════════════════════════════════════════════════════════════
   10. FORMS
   ════════════════════════════════════════════════════════════ */
.zn-form-row { margin-bottom:20px; }
.zn-form-row label { display:block; font-size:12px; font-weight:700; color:var(--zn-partner-muted,#6B7280); margin-bottom:6px; text-transform:uppercase; letter-spacing:.6px; }
.zn-required { color:#dc2626; }
.zn-input {
    width:100%; padding:11px 14px; border-radius:var(--zn-partner-radius-sm);
    border:1.5px solid var(--zn-partner-input-border,#D1D5DB);
    background:var(--zn-partner-input-bg,#fff); color:var(--zn-partner-input-text,#111827);
    font-size:14px; min-height:44px; box-sizing:border-box;
    transition:border-color .18s,box-shadow .18s; font-family:inherit;
}
.zn-input:focus { outline:none; border-color:var(--zn-partner-gold,#F59E0B); box-shadow:0 0 0 3px rgba(245,158,11,.12); }
.zn-input[type="color"] { padding:4px 6px; min-height:40px; cursor:pointer; }
.zn-textarea { min-height:100px; resize:vertical; }
.zn-form-row--half  { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.zn-form-row--third { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.zn-form-section-heading {
    font-size:12px; font-weight:700; color:var(--zn-partner-text-secondary,#374151);
    text-transform:uppercase; letter-spacing:.6px;
    margin:28px 0 16px; padding-bottom:8px;
    border-bottom:1px solid var(--zn-partner-border,#E5E7EB);
}
.zn-form-actions { display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; align-items:center; }
.zn-form-msg { margin-top:12px; padding:10px 14px; border-radius:8px; font-size:13px; }
.zn-form-msg--success { background:rgba(16,185,129,.08); color:#059669; border:1px solid rgba(16,185,129,.25); }
.zn-form-msg--error   { background:rgba(220,38,38,.08);  color:#dc2626; border:1px solid rgba(220,38,38,.25); }

/* SDG checkboxes */
.zn-sdg-multi-select { display:flex; flex-wrap:wrap; gap:8px; }
.zn-sdg-check { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; color:var(--zn-partner-text,#111827); }
.zn-sdg-check input[type="checkbox"] { width:16px; height:16px; accent-color:var(--zn-partner-gold,#F59E0B); }

/* Brand colour row */
.zn-color-row { display:flex; align-items:center; gap:12px; }
.zn-color-preview { width:36px; height:36px; border-radius:8px; border:1px solid var(--zn-partner-border,#E5E7EB); flex-shrink:0; }

/* Social links */
.zn-social-links-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.zn-social-field label { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--zn-partner-muted,#6B7280); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.zn-social-icon { font-size:16px; }

/* Activation toggle row */
.zn-toggle-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; background:var(--zn-partner-surface,#fff);
    border:1px solid var(--zn-partner-border,#E5E7EB); border-radius:var(--zn-partner-radius-sm);
}
.zn-toggle-row__label { font-size:14px; font-weight:600; color:var(--zn-partner-text,#111827); }
.zn-toggle-row__desc  { font-size:13px; color:var(--zn-partner-muted,#6B7280); margin-top:2px; }
.zn-toggle { position:relative; display:inline-block; width:52px; height:28px; flex-shrink:0; }
.zn-toggle input { opacity:0; width:0; height:0; }
.zn-toggle__slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#D1D5DB; border-radius:14px; transition:.25s; }
.zn-toggle__slider::before { position:absolute; content:''; height:20px; width:20px; left:4px; bottom:4px; background:#fff; border-radius:50%; transition:.25s; box-shadow:0 1px 4px rgba(0,0,0,.15); }
.zn-toggle input:checked + .zn-toggle__slider { background:var(--zn-partner-gold,#F59E0B); }
.zn-toggle input:checked + .zn-toggle__slider::before { transform:translateX(24px); }

/* ════════════════════════════════════════════════════════════
   11. EARNINGS TAB
   ════════════════════════════════════════════════════════════ */
.zn-partner-earnings h3 { font-size:18px; font-weight:700; color:var(--zn-partner-text,#111827); margin:0 0 16px; }
.zn-earnings-summary {
    background:rgba(245,158,11,.06); border:1px solid rgba(245,158,11,.25);
    border-left:4px solid #F59E0B; border-radius:var(--zn-partner-radius-sm);
    padding:16px 20px; margin-bottom:20px; font-size:16px; color:var(--zn-partner-text,#111827);
}
.zn-info-box {
    background:rgba(2,132,199,.06); border:1px solid rgba(2,132,199,.25);
    border-radius:var(--zn-partner-radius-sm); padding:14px 18px;
    color:#0369a1; font-size:14px; line-height:1.6; margin-bottom:20px;
}
.zn-table { width:100%; border-collapse:collapse; margin-top:8px; font-size:14px; }
.zn-table th { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--zn-partner-muted,#6B7280); padding:10px 14px; border-bottom:2px solid var(--zn-partner-border,#E5E7EB); text-align:left; font-weight:700; }
.zn-table td { padding:12px 14px; border-bottom:1px solid var(--zn-partner-border,#E5E7EB); color:var(--zn-partner-text,#111827); }
.zn-table tr:last-child td { border-bottom:none; }
.zn-table tr:hover td { background:var(--zn-partner-bg,#f8fafc); }

/* ════════════════════════════════════════════════════════════
   12. SETTINGS TAB
   ════════════════════════════════════════════════════════════ */
.zn-partner-settings h3 { font-size:18px; font-weight:700; color:var(--zn-partner-text,#111827); margin:0 0 20px; }

/* ════════════════════════════════════════════════════════════
   13. PUBLIC STORE
   ════════════════════════════════════════════════════════════ */
.zn-public-store { max-width:1040px; margin:0 auto; padding:0 16px 60px; }
.zn-store-header { padding:40px 0 32px; border-bottom:1px solid var(--zn-partner-border); margin-bottom:40px; }
.zn-store-header__inner { display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.zn-store-header__avatar { width:100px; height:100px; border-radius:50%; border:3px solid var(--zn-partner-gold); object-fit:cover; flex-shrink:0; }
.zn-store-header__info { flex:1; min-width:0; }
.zn-store-header__name { font-size:28px; font-weight:800; margin:0 0 8px; color:var(--zn-partner-text); }
.zn-store-header__desc { color:var(--zn-partner-muted); font-size:15px; line-height:1.6; margin:10px 0 0; }
.zn-store-header__sdg { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.zn-store-products { margin-bottom:48px; }
.zn-store-products__heading { font-size:20px; font-weight:700; margin-bottom:24px; color:var(--zn-partner-text); }
.zn-store-products__empty { color:var(--zn-partner-muted); padding:40px 0; text-align:center; }
.zn-store-products__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.zn-product-card--public {
    background:var(--zn-partner-surface,#fff); border:1px solid var(--zn-partner-border);
    border-radius:var(--zn-partner-radius); overflow:hidden;
    transition:transform .2s,box-shadow .2s; display:flex; flex-direction:column;
    box-shadow:var(--zn-partner-shadow);
}
.zn-product-card--public:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.12); }
.zn-product-card__image { aspect-ratio:4/3; overflow:hidden; background:#F3F4F6; }
.zn-product-card__image img { width:100%; height:100%; object-fit:cover; }
.zn-product-card__image--placeholder { display:flex; align-items:center; justify-content:center; font-size:48px; aspect-ratio:4/3; background:#F3F4F6; color:#9CA3AF; }
.zn-product-card__body { padding:16px; flex:1; display:flex; flex-direction:column; gap:8px; }
.zn-product-card__name { font-size:16px; font-weight:700; color:var(--zn-partner-text); margin:0; }
.zn-product-card__desc { font-size:13px; color:var(--zn-partner-muted); line-height:1.5; flex:1; }
.zn-product-card__footer { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:12px; border-top:1px solid var(--zn-partner-border); }
.zn-product-card__price { font-size:18px; font-weight:800; color:var(--zn-partner-gold); }

/* SDG strip */
.zn-store-sdg-strip { padding:32px 0; border-top:1px solid var(--zn-partner-border); margin-bottom:40px; }
.zn-store-sdg-strip__heading { font-size:13px; font-weight:700; color:var(--zn-partner-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:20px; }
.zn-store-sdg-strip__row { display:flex; flex-wrap:wrap; gap:12px; }
.zn-sdg-goal-block { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 16px; border-radius:var(--zn-partner-radius-sm); background:var(--zn-partner-surface,#fff); border:1px solid var(--zn-partner-border); min-width:80px; text-align:center; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.zn-sdg-goal-num { font-size:20px; font-weight:800; color:var(--zn-partner-gold); }
.zn-sdg-goal-label { font-size:10px; color:var(--zn-partner-muted); text-transform:uppercase; letter-spacing:.5px; line-height:1.3; }
.zn-sdg-goal-block--1  { border-color:#eb1c2d; } .zn-sdg-goal-block--1  .zn-sdg-goal-num { color:#eb1c2d; }
.zn-sdg-goal-block--3  { border-color:#4c9f38; } .zn-sdg-goal-block--3  .zn-sdg-goal-num { color:#4c9f38; }
.zn-sdg-goal-block--8  { border-color:#a21942; } .zn-sdg-goal-block--8  .zn-sdg-goal-num { color:#a21942; }
.zn-sdg-goal-block--10 { border-color:#dd1367; } .zn-sdg-goal-block--10 .zn-sdg-goal-num { color:#dd1367; }
.zn-sdg-goal-block--17 { border-color:#19486a; } .zn-sdg-goal-block--17 .zn-sdg-goal-num { color:#00bcd4; }

/* Share CTA */
.zn-store-share-cta { background:linear-gradient(135deg,rgba(245,158,11,.06),rgba(217,119,6,.03)); border:1px solid var(--zn-partner-border-gold); border-radius:var(--zn-partner-radius); padding:32px; }
.zn-store-share-cta__inner { max-width:600px; }
.zn-store-share-cta h3 { font-size:18px; font-weight:700; color:var(--zn-partner-text); margin:0 0 8px; }
.zn-store-share-cta p  { color:var(--zn-partner-muted); font-size:14px; margin:0 0 16px; }
.zn-store-share-cta__input-row { display:flex; gap:8px; flex-wrap:wrap; }
.zn-store-share-cta__input-row input { flex:1; min-width:0; padding:12px 14px; border-radius:8px; border:1.5px solid var(--zn-partner-input-border,#D1D5DB); background:var(--zn-partner-input-bg,#fff); color:var(--zn-partner-text,#111827); font-size:14px; min-height:44px; box-sizing:border-box; }

/* ════════════════════════════════════════════════════════════
   14. ADMIN PANEL
   ════════════════════════════════════════════════════════════ */
.zn-partner-admin-wrap { max-width:1200px; }
.zn-impact-summary { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:28px; }
.zn-impact-summary .zn-stat-card { min-width:140px; flex:1; }
.zn-bar-track { width:100%; background:#E5E7EB; border-radius:4px; height:8px; overflow:hidden; }
.zn-bar-fill { height:100%; border-radius:4px; background:var(--zn-partner-gold,#F59E0B); transition:width .4s ease; }
.zn-admin-settings-form .zn-toggle { position:relative; display:inline-block; width:52px; height:28px; }
.zn-admin-settings-form .zn-toggle input { opacity:0; width:0; height:0; }

/* ════════════════════════════════════════════════════════════
   15. MOBILE 600px
   ════════════════════════════════════════════════════════════ */
@media (max-width:600px) {
    .zn-partner-overview__stats { grid-template-columns:1fr 1fr; }
    .zn-partner-overview__header { flex-direction:column; gap:14px; padding:18px; }
    .zn-partner-overview__avatar { width:56px; height:56px; }
    .zn-partner-overview__name { font-size:17px; }
    .zn-partner-overview__quick-actions .zn-btn { font-size:13px; }
    .zn-store-header__inner { flex-direction:column; align-items:flex-start; }
    .zn-store-header__name { font-size:22px; }
    .zn-store-products__grid { grid-template-columns:1fr; }
    .zn-form-row--half,.zn-form-row--third { grid-template-columns:1fr; }
    .zn-social-links-grid { grid-template-columns:1fr; }
    .zn-store-share-cta { padding:20px 16px; }
    .zn-store-sdg-strip__row { gap:8px; }
    .zn-sdg-goal-block { min-width:64px; padding:10px 12px; }
    .zn-partner-activation-banner { padding:16px; }
}

/* ════════════════════════════════════════════════════════════
   16. MOBILE 375px tight viewport
   ════════════════════════════════════════════════════════════ */
@media (max-width:375px) {
    .zn-partner-overview__stats { grid-template-columns:1fr 1fr; gap:8px; }
    .zn-stat-card { padding:14px 10px; }
    .zn-stat-card__value { font-size:20px; }
    .zn-stat-card__label { font-size:10px; }
    .zn-partner-overview__quick-actions { flex-direction:column; gap:8px; }
    .zn-partner-overview__quick-actions .zn-btn { width:100%; justify-content:center; }
    .zn-product-card__name { font-size:14px; }
    .zn-product-card__actions { flex-wrap:wrap; gap:6px; }
    .zn-btn--sm { min-height:38px; font-size:12px; padding:0 12px; }
    .zn-store-share-cta__input-row { flex-direction:column; }
    .zn-store-share-cta__input-row .zn-btn { width:100%; }
    .zn-partner-status-banner--live { flex-direction:column; align-items:flex-start; gap:10px; }
    .zn-table { font-size:13px; }
    .zn-table th,.zn-table td { padding:8px 10px; }
}

/* ════════════════════════════════════════════════════════════
   17. PHASE 4 — Product image upload UI
   ════════════════════════════════════════════════════════════ */

.zn-form-row--image-upload {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--zn-border, #E5E7EB);
    margin-bottom: 4px;
}

.zn-product-image-preview {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    border: 2px solid var(--zn-border, #E5E7EB);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F9FAFB;
}

.zn-product-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zn-product-image-preview--empty {
    background: #F3F4F6;
    border-style: dashed;
}

.zn-product-image-preview--empty span {
    font-size: 11px;
    color: #9CA3AF;
    text-align: center;
    padding: 4px;
}

.zn-image-upload-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Public store social share buttons (Phase 4) */
.zn-store-social-share {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.zn-store-social-share a,
.zn-store-social-share button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s;
}

.zn-store-social-share a:hover,
.zn-store-social-share button:hover { opacity: .85; }

.zn-share-btn--telegram  { background: #2AABEE; color: #fff; }
.zn-share-btn--whatsapp  { background: #25D366; color: #fff; }
.zn-share-btn--copy      { background: #F3F4F6; color: #374151; border: 1px solid #D1D5DB; }
.zn-share-btn--copy.copied { background: #D1FAE5; color: #065F46; border-color: #6EE7B7; }

/* Non-agent "earn by sharing" CTA panel */
.zn-store-join-agent-cta {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1px solid #FDE68A;
    border-radius: 14px;
    padding: 28px 28px 24px;
    margin: 32px 0;
    text-align: center;
}

.zn-store-join-agent-cta__icon {
    font-size: 36px;
    margin-bottom: 10px;
}

.zn-store-join-agent-cta h3 {
    font-size: 20px;
    font-weight: 700;
    color: #92400E;
    margin: 0 0 8px;
}

.zn-store-join-agent-cta p {
    font-size: 15px;
    color: #78350F;
    margin: 0 0 18px;
    line-height: 1.5;
}

.zn-store-join-agent-cta__steps {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.zn-store-join-agent-cta__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #92400E;
    font-weight: 600;
    max-width: 100px;
}

.zn-store-join-agent-cta__step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F59E0B;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 480px) {
    .zn-store-join-agent-cta { padding: 20px 16px; }
    .zn-store-social-share { flex-direction: column; }
    .zn-store-social-share a,
    .zn-store-social-share button { width: 100%; justify-content: center; }
}
