/* Zinn Projects Frontend v1.5.5 — Cream theme conversion (Batch D, v1.14.16).
 *
 * Palette source: established Zinn Hub cream theme used across header (v1.3.x),
 * mega menu (v1.6.x), freelancer hub, alternatives section, homepage hero,
 * dashboard hero, product categories shortcode, and buyer guides.
 *
 *   #fdfcf5 cream page bg · #ecd9a0 warm cream borders · #fef3d4 light cream tint
 *   #ffffff white cards · #b8860b mid gold · #8a6410 dark gold (text on cream)
 *   #d4a017 bright gold · #1a1a1a strong text · #3d3d3d body · #888 muted
 *   Warm shadows rgba(184,134,11,0.10-0.18) instead of cool black
 *
 * Compatibility strategy: --zp-bg stays #ffffff (every template that uses it
 * for cards/inputs/dropdowns keeps its semantics). NEW --zp-page-bg is the
 * cream page background, applied only to .zp-container and the critical inline
 * CSS in ZP_Frontend::output_critical_css. No template references need to be
 * rewritten en-masse — they keep working as-is.
 *
 * Logic-free conversion. No new selectors. No new behaviour. */

:root {
    --zp-primary: #B8860B;
    --zp-primary-light: #D4A017;
    --zp-primary-dark: #8A6410;
    --zp-text: #1A1A1A;
    --zp-text-light: #666666;
    --zp-text-muted: #888888;
    --zp-bg: #ffffff;
    --zp-page-bg: #FAF5DC;
    --zp-container-bg: #FBF7EC;
    --zp-bg-alt: #FEF3D4;
    --zp-border: #ECD9A0;
    --zp-border-light: #F5E8C0;
    --zp-radius: 10px;
    --zp-radius-sm: 6px;
    --zp-shadow: 0 1px 2px rgba(184,134,11,0.06), 0 4px 16px rgba(184,134,11,0.12);
    --zp-shadow-hover: 0 2px 4px rgba(184,134,11,0.08), 0 8px 28px rgba(184,134,11,0.18);
    --zp-success: #228B22;
    --zp-warning: #f59e0b;
    --zp-danger: #dc3545;
    --zp-info: #3b82f6;
    --zp-gold-gradient: linear-gradient(135deg, #B8860B 0%, #D4A017 100%);
    --zp-dark-gradient: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
}

/* ═══ CREAM PAGE — override Botiga on ALL ZP pages ═══ */
body.zp-active-page .site-main,
body.zp-active-page .entry-content,
body.zp-active-page .page-content,
body.zp-active-page #primary,
body.zp-active-page .content-area { background: var(--zp-page-bg) !important; color: var(--zp-text) !important; }
body.zp-active-page #secondary, body.zp-active-page .sidebar-column, body.zp-active-page aside.widget-area { display: none !important; }
body.zp-active-page .content-wrapper, body.zp-active-page #primary { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; }

.zp-page { background: var(--zp-page-bg) !important; color: var(--zp-text) !important; padding-bottom: 40px; }
/* v1.14.18 — .zp-container is now a designed panel on the cream body.
 * Warm cream border + rounded corners + soft warm shadow give the content
 * area real definition instead of looking like an invisible layout box.
 * Wide/narrow modifiers preserved — they only change max-width. */
.zp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px;
    background: var(--zp-container-bg);
    color: var(--zp-text);
    border: 1px solid var(--zp-border);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(184,134,11,0.08);
}
.zp-container.zp-container--wide   { max-width: 1480px; }
.zp-container.zp-container--narrow { max-width: 900px; }

/* ═══ TYPOGRAPHY — refined, not oversized ═══ */
.zp-page h1, .zp-container h1 { color: var(--zp-primary) !important; font-size: 1.9rem !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.01em; margin-bottom: 16px !important; font-family: Inter, -apple-system, sans-serif !important; }
.zp-page h2, .zp-container h2 { color: var(--zp-primary) !important; font-size: 1.4rem !important; font-weight: 700 !important; line-height: 1.3 !important; margin-bottom: 14px !important; font-family: Inter, -apple-system, sans-serif !important; }
.zp-page h3, .zp-container h3 { color: var(--zp-primary) !important; font-size: 1.15rem !important; font-weight: 600 !important; line-height: 1.35 !important; margin-bottom: 10px !important; font-family: Inter, -apple-system, sans-serif !important; }
.zp-page p, .zp-page li, .zp-page span, .zp-page td, .zp-page th, .zp-page label,
.zp-container p, .zp-container li, .zp-container span { color: var(--zp-text); font-size: 15px; line-height: 1.65; }
/* A <span> nested in a heading must INHERIT the heading typography, not the generic span reset above
 * (which otherwise renders a masked zp_nt() name small + dark inside a gold heading). Higher specificity
 * than `.zp-container span` so it wins. Mirrors the inline-critical rule in class-zp-frontend.php. */
.zp-page h1 span, .zp-container h1 span,
.zp-page h2 span, .zp-container h2 span,
.zp-page h3 span, .zp-container h3 span { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; }
.zp-page a, .zp-container a { color: var(--zp-primary); }
.zp-page a:hover, .zp-container a:hover { color: var(--zp-primary-dark); }

/* ═══ SECTION NAV BAR ═══ */
.zp-section-nav { background: var(--zp-bg); border-bottom: 2px solid var(--zp-border); padding: 0 24px; position: sticky; top: 0; z-index: 90; }
.zp-section-nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 0; overflow-x: auto; }
.zp-section-nav a { display: inline-flex; align-items: center; padding: 14px 18px; font-size: 13.5px; font-weight: 600; color: var(--zp-text-light) !important; text-decoration: none !important; white-space: nowrap; border-bottom: 3px solid transparent; transition: all 0.2s; margin-bottom: -2px; }
.zp-section-nav a:hover { color: var(--zp-primary) !important; background: rgba(184,134,11,0.04); }
.zp-section-nav a.zp-nav-active { color: var(--zp-primary) !important; border-bottom-color: var(--zp-primary); }
.zp-section-nav a.zp-nav-cta { color: var(--zp-success) !important; font-weight: 700; }
.zp-nav-hamburger { display: none; padding: 10px 16px; font-size: 14px; font-weight: 700; color: var(--zp-primary); background: none; border: 1px solid var(--zp-border); border-radius: var(--zp-radius-sm); cursor: pointer; white-space: nowrap; }

/* ═══ GRID ═══ */
.zp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.zp-freelancer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.zp-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }

/* ═══ CARDS ═══ */
.zp-card, .zp-project-card, .zp-freelancer-card { background: var(--zp-bg); border: 1px solid var(--zp-border); border-radius: var(--zp-radius); padding: 24px; transition: all 0.3s ease; box-shadow: var(--zp-shadow); }
.zp-card:hover, .zp-project-card:hover, .zp-freelancer-card:hover { box-shadow: var(--zp-shadow-hover); transform: translateY(-2px); border-color: var(--zp-primary); }
.zp-card a, .zp-project-card a, .zp-freelancer-card a { color: var(--zp-text) !important; text-decoration: none !important; }
.zp-card a:hover, .zp-project-card a:hover, .zp-freelancer-card a:hover { color: var(--zp-primary) !important; }
.zp-category-card { background: var(--zp-bg); border: 1px solid var(--zp-border); border-radius: var(--zp-radius); padding: 20px; text-align: center; transition: all 0.3s ease; box-shadow: var(--zp-shadow); }
.zp-category-card:hover { border-color: var(--zp-primary); box-shadow: var(--zp-shadow-hover); transform: translateY(-2px); }

/* ═══ BADGES ═══ */
.zp-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.zp-badge-open { background: rgba(34,139,34,0.1); color: var(--zp-success); }
.zp-badge-progress { background: rgba(59,130,246,0.1); color: var(--zp-info); }
.zp-badge-completed { background: rgba(34,139,34,0.1); color: var(--zp-success); }
.zp-badge-urgent { background: rgba(220,53,69,0.1); color: var(--zp-danger); }
.zp-badge-pending { background: rgba(245,158,11,0.1); color: var(--zp-warning); }

/* ═══ BUTTONS — !important overrides Botiga hover ═══ */
.zp-btn { display: inline-block !important; padding: 12px 28px !important; border-radius: var(--zp-radius-sm) !important; font-weight: 600 !important; text-decoration: none !important; cursor: pointer !important; border: none !important; font-size: 14px !important; transition: all 0.3s ease !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; line-height: 1.4 !important; }
.zp-btn-primary { background: var(--zp-gold-gradient) !important; color: #fff !important; }
.zp-btn-primary:hover, .zp-btn-primary:focus { box-shadow: 0 4px 12px rgba(184,134,11,0.4) !important; transform: translateY(-1px) !important; color: #fff !important; background: linear-gradient(135deg, #a07609 0%, #c49a3a 100%) !important; }
.zp-btn-outline { background: transparent !important; border: 2px solid var(--zp-primary) !important; color: var(--zp-primary) !important; }
.zp-btn-outline:hover, .zp-btn-outline:focus { background: var(--zp-primary) !important; color: #fff !important; border-color: var(--zp-primary) !important; }
.zp-btn-dark { background: var(--zp-dark-gradient) !important; color: #fff !important; border: 1px solid var(--zp-primary) !important; }
.zp-btn-danger { background: var(--zp-danger) !important; color: #fff !important; }

/* ═══ SKILL TAGS ═══ */
.zp-skill-tag { display: inline-block; background: var(--zp-bg-alt); border: 1px solid var(--zp-border); border-radius: 20px; padding: 5px 14px; font-size: 13px; margin: 3px; color: var(--zp-text) !important; transition: all 0.2s; }
a.zp-skill-tag { text-decoration: none !important; }
a.zp-skill-tag:hover, .zp-skill-tag:hover { background: var(--zp-primary) !important; color: #fff !important; border-color: var(--zp-primary) !important; }

/* ═══ AVAILABILITY ═══ */
.zp-availability { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--zp-text); }
.zp-availability-dot { width: 8px; height: 8px; border-radius: 50%; }
.zp-available { background: var(--zp-success); } .zp-busy { background: var(--zp-warning); }
.zp-star { color: #F5A623; }

/* ═══ PAYMENT/TRUST ═══ */
.zp-payment-strip { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 18px; background: var(--zp-bg); border: 1px solid var(--zp-border); border-radius: 999px; font-size: 13px; color: var(--zp-text-light); margin: 12px auto; }
.zp-payment-strip img { height: 22px; width: auto; vertical-align: middle; border-radius: 3px; }
.zp-trust-notice { background: rgba(34,139,34,0.05); border-left: 4px solid var(--zp-success); padding: 12px 18px; border-radius: var(--zp-radius-sm); margin: 12px auto; font-size: 14px; color: var(--zp-text); max-width: 650px; }

/* ═══ FORMS ═══ */
.zp-page input[type="text"], .zp-page input[type="email"], .zp-page input[type="number"],
.zp-page input[type="url"], .zp-page input[type="password"], .zp-page input[type="date"],
.zp-page textarea, .zp-page select { width: 100%; padding: 12px 15px; border: 1px solid var(--zp-border) !important; border-radius: var(--zp-radius-sm) !important; font-size: 14px; color: var(--zp-text) !important; background: var(--zp-bg) !important; transition: border-color 0.3s, box-shadow 0.3s; }
.zp-page input:focus, .zp-page textarea:focus, .zp-page select:focus { outline: none !important; border-color: var(--zp-primary) !important; box-shadow: 0 0 0 3px rgba(184,134,11,0.15) !important; }
.zp-page label { display: block; margin-bottom: 6px; font-weight: 600; color: var(--zp-text); font-size: 14px; }

/* Checkbox grid */
.zp-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; max-height: 300px; overflow-y: auto; border: 1px solid var(--zp-border); border-radius: var(--zp-radius-sm); padding: 12px; background: var(--zp-bg); }
.zp-checkbox-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer; transition: background 0.2s; }
.zp-checkbox-item:hover { background: var(--zp-bg-alt); }
.zp-checkbox-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--zp-primary); cursor: pointer; }
.zp-checkbox-item span { cursor: pointer; font-weight: 400; font-size: 14px; color: var(--zp-text); }
.zp-checkbox-item.zp-is-parent span { font-weight: 600; color: var(--zp-primary); }
.zp-checkbox-item.zp-is-child { padding-left: 28px; }
.zp-checkbox-search { width: 100% !important; padding: 10px 14px !important; border: 1px solid var(--zp-border) !important; border-radius: var(--zp-radius-sm) !important; margin-bottom: 8px; font-size: 14px; }

/* Skill picker */
.zp-skill-picker { position: relative; }
.zp-skill-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--zp-bg); border: 1px solid var(--zp-border); border-radius: 0 0 var(--zp-radius-sm) var(--zp-radius-sm); max-height: 200px; overflow-y: auto; z-index: 100; display: none; box-shadow: var(--zp-shadow-hover); }
.zp-skill-option { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--zp-border-light); color: var(--zp-text); }
.zp-skill-option:hover { background: rgba(184,134,11,0.08); color: var(--zp-primary); }
.zp-selected-skills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.zp-skill-remove { cursor: pointer; margin-left: 6px; color: var(--zp-danger); font-weight: bold; }

/* Skills browse-all */
.zp-skills-browse { display: none; border: 1px solid var(--zp-border); border-radius: var(--zp-radius-sm); padding: 16px; margin-top: 8px; max-height: 400px; overflow-y: auto; background: var(--zp-bg); }
.zp-skills-browse.open { display: block; }
.zp-skills-browse-group h4 { font-size: 13px; font-weight: 700; color: var(--zp-primary); margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--zp-border-light); }
.zp-skills-browse-item { display: inline-block; padding: 4px 12px; margin: 2px; font-size: 13px; background: var(--zp-bg-alt); border: 1px solid var(--zp-border); border-radius: 20px; cursor: pointer; transition: all 0.2s; color: var(--zp-text); }
.zp-skills-browse-item:hover { background: var(--zp-primary); color: #fff; border-color: var(--zp-primary); }

/* ═══ FAQ ═══ */
.zp-page details { background: var(--zp-bg) !important; border: 1px solid var(--zp-border) !important; border-radius: var(--zp-radius); margin-bottom: 12px; }
.zp-page summary { padding: 16px 20px; font-weight: 600; cursor: pointer; color: var(--zp-text) !important; background: var(--zp-bg-alt) !important; }
.zp-page summary:hover { background: rgba(184,134,11,0.05) !important; }
.zp-page details[open] summary { border-bottom: 1px solid var(--zp-border); color: var(--zp-primary) !important; }
.zp-page details > div, .zp-page details > p { padding: 16px 20px; color: var(--zp-text) !important; line-height: 1.7; }

/* ═══ EMPTY/UPSELL ═══ */
.zp-empty-state { text-align: center; padding: 60px 20px; color: var(--zp-text-light); }
.zp-upsell-box { background: rgba(184,134,11,0.04); border: 2px dashed var(--zp-primary); border-radius: var(--zp-radius); padding: 30px; text-align: center; margin: 20px 0; }
.zp-upsell-box h3 { color: var(--zp-primary) !important; margin-bottom: 8px; }
.zp-upsell-box p { color: var(--zp-text-light); margin-bottom: 16px; }

/* ═══ HERO ═══ */
.zp-hero { text-align: center; padding: 36px 24px; }
.zp-hero p { color: var(--zp-text-light); font-size: 15px; max-width: 650px; margin: 0 auto 18px; }

/* ═══ SECTIONS ═══ */
.zp-project-single { color: var(--zp-text); }
.zp-project-single aside { background: var(--zp-bg-alt); border: 1px solid var(--zp-border); border-radius: var(--zp-radius); padding: 24px; }
.zp-proposal-card { background: var(--zp-bg); border: 1px solid var(--zp-border); border-radius: var(--zp-radius); padding: 20px; margin-bottom: 16px; }
.zp-proposal-card:hover { border-color: var(--zp-primary); }
.zp-notice { padding: 14px 20px; background: rgba(245,158,11,0.08); border-left: 4px solid var(--zp-warning); border-radius: var(--zp-radius-sm); margin-bottom: 16px; font-size: 14px; color: var(--zp-text); }
.zp-platform-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: var(--zp-gold-gradient); color: #fff; border-radius: 999px; font-size: 12px; font-weight: 700; }
.zp-load-more-wrap { text-align: center; margin: 30px 0; clear: both; }
.zp-filter-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 24px; padding: 16px; background: var(--zp-bg-alt); border: 1px solid var(--zp-border); border-radius: var(--zp-radius); }
.zp-pagination { display: flex; justify-content: center; gap: 6px; margin: 30px 0; }
.zp-pagination a, .zp-pagination span { display: inline-block; padding: 10px 16px; border: 1px solid var(--zp-border); border-radius: var(--zp-radius-sm); color: var(--zp-text); text-decoration: none; }
.zp-pagination a:hover { background: var(--zp-primary); color: #fff !important; border-color: var(--zp-primary); }
.zp-pagination .current { background: var(--zp-primary); color: #fff !important; border-color: var(--zp-primary); }
#zp-invite-modal { backdrop-filter: blur(2px); }

/* ═══ QUALIFICATIONS ═══ */
.zp-quals-section { margin-top: 24px; }
.zp-qual-item { display: flex; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--zp-border-light); }
.zp-qual-icon { width: 40px; height: 40px; background: rgba(184,134,11,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.zp-qual-details { flex: 1; }
.zp-qual-title { font-weight: 600; color: var(--zp-text); font-size: 14px; }
.zp-qual-meta { font-size: 13px; color: var(--zp-text-light); margin-top: 2px; }
.zp-qual-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--zp-success); font-weight: 600; }

/* ═══ POST PROJECT FORM ═══ */
.zp-post-project-form { max-width: 800px; margin: 0 auto; }
.zp-date-picker-wrap { display: none; margin-top: 8px; }
.zp-date-picker-wrap.visible { display: block; }

/* ═══ ACCESSIBILITY ═══ */
.zp-btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #1a73e8 !important; outline-offset: 2px !important; }
.zp-skip-link { position: absolute; top: -100px; left: 0; background: #1a1a2e; color: #fff; padding: 12px 24px; z-index: 100000; font-weight: 700; text-decoration: none; }
.zp-skip-link:focus { top: 0; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
    .zp-grid, .zp-freelancer-grid { grid-template-columns: 1fr; }
    .zp-category-grid { grid-template-columns: repeat(2, 1fr); }
    .zp-container { padding: 16px 14px; }
    .zp-hero { padding: 24px 14px; }
    .zp-project-single > div:first-child { flex-direction: column !important; }
    .zp-project-single aside { width: 100% !important; }
    .zp-filter-bar { flex-direction: column; }
    .zp-checkbox-grid { grid-template-columns: 1fr; }
    .zp-post-project-form { max-width: 100%; }
    .zp-section-nav-inner { flex-wrap: wrap; }
    .zp-section-nav-inner a { display: none; }
    .zp-section-nav-inner.zp-nav-open a { display: flex; width: 100%; border-bottom: 1px solid var(--zp-border-light); }
    .zp-nav-hamburger { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: center; }
    .zp-page h1 { font-size: 1.5rem !important; }
    .zp-page h2 { font-size: 1.2rem !important; }
}
@media (max-width: 480px) {
    .zp-category-grid { grid-template-columns: 1fr; }
    .zp-card, .zp-project-card, .zp-freelancer-card { padding: 16px; }
}

/* Freelancer profile header — mobile responsive */
@media (max-width: 640px) {
    .zp-freelancer-profile > div:first-of-type > img { width: 80px !important; height: 80px !important; }
    .zp-freelancer-profile h1 { font-size: 1.4rem !important; line-height: 1.2 !important; }
    .zp-freelancer-profile .zp-btn { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 14px; padding: 10px 14px; }
    .zp-freelancer-profile section { padding: 16px !important; margin-bottom: 16px !important; }
}
@media (max-width: 420px) {
    .zp-freelancer-profile > div:first-of-type { gap: 14px !important; }
    .zp-freelancer-profile > div:first-of-type > img { width: 64px !important; height: 64px !important; }
    .zp-freelancer-profile h1 { font-size: 1.25rem !important; }
    .zp-freelancer-profile .zp-btn { flex: 1 1 100%; }
}

/* Freelancer directory full-width cards */
.zp-freelancers-list { display: flex; flex-direction: column; gap: 16px; }
.zp-freelancer-card-wide { background: #fff; border: 1px solid var(--zp-border); border-radius: 10px; box-shadow: var(--zp-shadow); transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.zp-freelancer-card-wide:hover { box-shadow: var(--zp-shadow-hover); border-color: var(--zp-primary); }
.zp-partner-card { background: linear-gradient(to right, #fffdf5 0%, #fff 60%); }

@media (max-width: 768px) {
    .zp-freelancer-card-wide .zp-card-row { gap: 14px !important; }
    .zp-freelancer-card-wide .zp-card-avatar { width: 72px !important; height: 72px !important; }
    .zp-freelancer-card-wide .zp-card-content { min-width: 0 !important; flex: 1 1 100% !important; padding-right: 0 !important; }
    .zp-freelancer-card-wide .zp-card-actions { min-width: 0 !important; flex: 1 1 100% !important; text-align: left !important; padding-top: 8px; border-top: 1px solid var(--zp-border-light); }
    .zp-freelancer-card-wide .zp-card-btns { flex-direction: row !important; }
    .zp-freelancer-card-wide .zp-card-btns .zp-btn { flex: 1 1 auto; }
}
@media (max-width: 480px) {
    .zp-freelancer-card-wide { padding: 16px !important; }
    .zp-freelancer-card-wide .zp-card-avatar { width: 60px !important; height: 60px !important; }
    .zp-freelancer-card-wide h3 { font-size: 16px !important; }
    .zp-freelancer-card-wide .zp-card-btns { flex-direction: column !important; }
}

/* Profile header — avatar + name on top, full-width body below */
.zp-profile-header .zp-profile-body { width: 100%; }
@media (max-width: 640px) {
    .zp-profile-header .zp-profile-title-row { gap: 14px !important; }
    .zp-profile-header .zp-profile-avatar { width: 72px !important; height: 72px !important; }
    .zp-profile-header h1 { font-size: 1.4rem !important; line-height: 1.2 !important; }
}
@media (max-width: 420px) {
    .zp-profile-header .zp-profile-title-row { gap: 12px !important; }
    .zp-profile-header .zp-profile-avatar { width: 60px !important; height: 60px !important; }
    .zp-profile-header h1 { font-size: 1.2rem !important; }
}

/* v1.3.8 — Kill Botiga's 40px paragraph margins on empty <p> tags from wpautop */
.zp-page p:empty { display:none !important; margin:0 !important; padding:0 !important; }
.zp-page .zp-card p:empty { display:none !important; }

/* v1.3.8 — Mobile card layout for My Projects / Proposals */
@media (max-width: 600px) {
    .zp-page > div[style*="justify-content:space-between"] { flex-direction: column !important; align-items: stretch !important; }
    .zp-page .zp-card > div[style*="justify-content:space-between"] { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
    .zp-page .zp-card div[style*="flex-shrink:0"] { justify-content: flex-start !important; }
    .zp-page .zp-card h3 { font-size: 14px !important; }
    .zp-page div[style*="gap:12px"][style*="margin-bottom:20px"] { gap: 6px !important; }
}

/* ═══ v1.5.0 — Dispute thread + revision modal ═══════════════ */
.zp-dispute-wrap .zp-dispute-thread::-webkit-scrollbar { width: 8px; }
.zp-dispute-wrap .zp-dispute-thread::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 4px; }
.zp-dispute-wrap .zp-dispute-thread::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.zp-dispute-wrap .zp-dispute-thread::-webkit-scrollbar-thumb:hover { background: #999; }

.zp-modal-overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: zpModalFade 0.18s ease-out;
}
@keyframes zpModalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.zp-modal-box {
    animation: zpModalSlide 0.22s cubic-bezier(0.2,0.8,0.3,1);
}
@keyframes zpModalSlide {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 640px) {
    .zp-dispute-wrap { padding: 16px !important; }
    .zp-modal-box    { padding: 20px !important; }
}

/* ═══ v1.7.7 — Freelancer directory filters mobile fix ═══
   The inline-styled filter form on /freelancers/ overflowed narrow viewports
   because selects had no width and no stacking rule at mobile. That overflow
   made the whole page render wider than the device and suppressed every
   max-width:768px rule — including the Projects Menu hamburger. Stacking the
   filters at ≤600px removes the overflow and the rest of the page goes
   mobile as expected. !important is used here because the form has inline
   style="display:flex;..." that would otherwise win. Scoped to the class so
   nothing else is affected. */
@media (max-width: 600px) {
    .zp-directory-filters { gap: 8px !important; padding: 12px !important; }
    .zp-directory-filters > input,
    .zp-directory-filters > select,
    .zp-directory-filters > button,
    .zp-directory-filters > a.zp-btn {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* v1.8.3 — Freelancer directory mobile fix (once and for all).
 *
 * Why the page rendered at desktop width on mobile:
 *   .zp-container is a flex child of .main-row (theme wraps it in display:flex).
 *   By spec, flex items have min-width:auto — meaning they refuse to shrink
 *   below their largest descendant's min-content size. On /freelancers/, the
 *   discovery-spotlight horizontal scroller has scrollWidth ~3043px (10 cards
 *   × 200px min-width + gaps). That forced .zp-container up to 1200px (its
 *   max-width cap), which in turn pushed every mobile @media rule out of
 *   reach — hence the page rendered full desktop width.
 *
 * Fix:
 *   min-width:0 on .zp-container decouples it from descendant min-content and
 *   lets it shrink to actual viewport width. This is the canonical flexbox
 *   "shrink me" fix and is safe on every other ZP page (it only has an effect
 *   when the page would have otherwise overflowed — a no-op otherwise).
 *
 * Diagnosed with headless Chromium at 390px viewport:
 *   BEFORE: .zp-container width=1200, body.scrollWidth=1200 (horizontal scroll)
 *   AFTER:  .zp-container width=390,  body.scrollWidth=390  (correct mobile)
 */
.zp-container { min-width: 0; }

/* Defence-in-depth — same rule on the inner list/card flex ancestors in case
 * any other future partial introduces a wide min-content child. These are
 * no-ops today. */
.zp-freelancers-list,
.zp-freelancer-card-wide,
.zp-freelancer-card-wide .zp-card-row,
.zp-freelancer-card-wide .zp-card-content { min-width: 0; }

/* Discovery spotlight — cap card width and clamp the name link to 2 lines so
 * a freelancer with an unusually long display_name (the one we saw was
 * "Web Designer & Developer | Building Stunning, Responsive & High-Performance
 * Websites") can't stretch their card wider than the others. Scoped strictly
 * to this section — does not affect names shown anywhere else. */
.zp-discovery-spotlight > div > div {
    /* Cap the card's max width so unusually long content can't stretch it;
     * inline min-width:200px on the card is preserved (our max is bigger). */
    max-width: 220px;
}
.zp-discovery-spotlight a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    line-height: 1.3;
}

/* v1.14.17 — Sub-category mini cards (Batch H pills portion).
 * v1.14.18 — Restyled with circular icon badges and stronger hover.
 * Replaces the flat outlined oval pills (.zp-skill-tag pattern) on the
 * project-category and freelancer-category pages with a grid of clickable
 * mini cards showing icon + name + count. Same data source as before
 * (ZP_Directory::get_subcategories) — the categories table already carries
 * `icon` and `project_count` / `freelancer_count` columns; sub-categories
 * without a seeded icon fall back to the 20-emoji rotating set via
 * zp_subcat_icon(). */
.zp-subcat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin: 0 0 28px; }
.zp-subcat-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 22px 14px;
    background: #fff;
    border: 1px solid var(--zp-border);
    border-radius: 12px;
    text-decoration: none !important;
    color: var(--zp-text) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    box-shadow: 0 1px 3px rgba(184,134,11,0.06);
}
.zp-subcat-card:hover {
    border-color: var(--zp-primary);
    box-shadow: 0 6px 18px rgba(184,134,11,0.15);
    transform: translateY(-2px);
}
.zp-subcat-card-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FEF3D4 0%, #F5E8C0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    transition: transform 0.18s ease;
}
.zp-subcat-card:hover .zp-subcat-card-icon-wrap { transform: scale(1.08); }
.zp-subcat-card-icon { font-size: 22px; line-height: 1; }
.zp-subcat-card-name { font-size: 13px; font-weight: 600; color: var(--zp-text); line-height: 1.3; margin-bottom: 4px; }
.zp-subcat-card-count { font-size: 11px; color: var(--zp-text-muted); font-weight: 500; }
@media (max-width: 480px) {
    .zp-subcat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .zp-subcat-card { padding: 16px 10px; }
    .zp-subcat-card-icon-wrap { width: 38px; height: 38px; margin-bottom: 8px; }
    .zp-subcat-card-icon { font-size: 19px; }
}

/* v1.14.18 — Action-card grid for the bottom "Post Your Project Today"
 * section on /projects/ and parallel "Hire by Category" section on
 * /freelancers/. White cards on the container panel, larger 56px circular
 * icon badge, gold uppercase CTA. Hover lifts the card and scales the
 * icon badge subtly. Full card is the click target — the CTA is just an
 * affordance. */
.zp-cat-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.zp-cat-action-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 28px 18px;
    background: #fff;
    border: 1px solid var(--zp-border);
    border-radius: 14px;
    text-decoration: none !important;
    color: var(--zp-text) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(184,134,11,0.06);
}
.zp-cat-action-card:hover {
    border-color: var(--zp-primary);
    box-shadow: 0 8px 24px rgba(184,134,11,0.15);
    transform: translateY(-3px);
}
.zp-cat-action-card-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FEF3D4 0%, #F5E8C0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    transition: transform 0.2s ease;
}
.zp-cat-action-card:hover .zp-cat-action-card-icon-wrap { transform: scale(1.08); }
.zp-cat-action-card-icon { font-size: 28px; line-height: 1; }
.zp-cat-action-card-name { font-size: 15px; font-weight: 700; color: var(--zp-text); line-height: 1.3; margin-bottom: 8px; }
.zp-cat-action-card-cta { font-size: 12px; color: var(--zp-primary); font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
@media (max-width: 480px) {
    .zp-cat-action-card { padding: 22px 14px; }
    .zp-cat-action-card-icon-wrap { width: 48px; height: 48px; margin-bottom: 12px; }
    .zp-cat-action-card-icon { font-size: 24px; }
}

/* ═══ v1.14.20 — FEATURE CARD GRID ═══
 * Same rules as in critical inline CSS. Defence-in-depth — if the external
 * file does load, identical visual outcome. */
.zp-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
}
.zp-feature-card {
    display: flex;
    flex-direction: column;
    padding: 22px 20px;
    background: #fff;
    border: 1px solid var(--zp-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(184,134,11,0.06);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.zp-feature-card:hover { border-color: #D4A017; box-shadow: 0 6px 18px rgba(184,134,11,0.12); transform: translateY(-2px); }
.zp-feature-card-icon-wrap {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, #FEF3D4 0%, #F5E8C0 100%);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.zp-feature-card-icon { font-size: 20px; line-height: 1; }
.zp-feature-card-title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--zp-primary); line-height: 1.3; }
.zp-feature-card-body { margin: 0; font-size: 13px; color: var(--zp-text-light); line-height: 1.6; }
.zp-load-more-wrap { margin: 24px 0; text-align: center; }
.zp-load-more-wrap button { padding: 10px 30px; min-width: 220px; }
@media (max-width: 860px) {
    .zp-feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .zp-feature-grid { grid-template-columns: 1fr; }
    .zp-feature-card { padding: 18px 16px; }
}

/* ═══ v1.14.21 — Portfolio cards + freelancer card clamping ═══
 * Mirrored from critical inline CSS for defence-in-depth — identical rules,
 * applied without !important here since the external file naturally wins the
 * cascade when both are present (later-loading == later-applying when specificity matches). */
.zp-portfolio-grid { grid-auto-rows: 1fr; }
.zp-portfolio-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.zp-portfolio-card:hover {
    border-color: var(--zp-primary);
    box-shadow: 0 8px 24px rgba(184,134,11,0.15);
    transform: translateY(-2px);
}
.zp-portfolio-card-img { transition: transform 0.3s ease; }
.zp-portfolio-card:hover .zp-portfolio-card-img { transform: scale(1.03); }
.zp-portfolio-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 2.6em;
}
.zp-portfolio-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em;
    flex: 1;
}
.zp-portfolio-card-footer { margin-top: auto; }
.zp-fl-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    max-height: 2.6em;
}
.zp-fl-card-headline {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    max-height: 2.9em;
}

/* ═══ v1.14.23 — Load More status caption ═══ */
.zp-load-more-status { margin: 8px 0 0; font-size: 12px; color: var(--zp-text-light); line-height: 1.5; }


/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * TRANSLATION-UNIT UTILITIES (unitfix1, 13 Jul 2026) — v1.6.3
 *
 * WHY THEY EXIST. ZT_Buffer::block_query() selects the INNERMOST NON-INLINE element as a
 * translation unit ("leaf"), and its INLINE list (class-zt-buffer.php:38-42) contains a, span,
 * strong, b, em, i, small, mark, label, img, br… So a container whose children are ALL inline —
 * a pill row, a badge row, a stat line, a tag list — is ONE unit AT ANY SIZE, with a source keyed
 * on the COMBINATION of everything inside it. Such a source rarely repeats, so it never hits the
 * translation cache and can never be translated, no matter how many times we pay for it. (The live
 * corpus row "{{zt1}}Open{{zt2}} {{zt3}}Social Media Marketing{{zt4}} {{zt5}}Flexible{{zt6}}" is
 * exactly this.)
 *
 * THE FIX. Give each phrase its own BLOCK-level wrapper. That makes the OUTER row a non-leaf and
 * each phrase its own leaf with a SHARED, reusable source. These three utilities do that with ZERO
 * visual change — they are DOM-level structure that the browser renders as if it were not there.
 *
 *   .zp-leaf         display:contents — the wrapper generates NO box at all, so a flex/grid row's
 *                    children remain the flex/grid items and the layout is byte-identical. Use when
 *                    wrapping an already-styled inline element (a pill <span>, a tag <a>).
 *   .zp-leaf-inline  display:inline — a <div> that flows inline like the <span>/<strong> it
 *                    replaces. Use when the leaf must contain PURE TEXT (see below).
 *   .zp-leaf-pill    display:inline-block — a <div> that renders as an inline-block pill. Same
 *                    purpose as .zp-leaf-inline where padding/background are needed.
 *
 * ⚠️ PURE TEXT MATTERS ON GATED SURFACES. A leaf whose inner HTML still contains an inline element
 * hashes as "{{zt1}}Text{{zt2}}", not "Text". That is fine on a CRAWLED page (the warm collects
 * whatever it renders), but a LOGGED-IN-ONLY surface is never crawled, so its only route into the
 * corpus is the PLAIN-TEXT seeder (ZP_I18n::seed_ui_strings) — and a plain seed can only ever match
 * a leaf whose content is PURE TEXT. That is why the proposal form's labels are now
 * <div class="zp-leaf-inline">Cover Letter</div> (bold via .zp-flabel-t) rather than
 * <strong>Cover Letter</strong>.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */
.zp-leaf        { display: contents; }
.zp-leaf-inline { display: inline; }
.zp-leaf-pill   { display: inline-block; }
.zp-leaf-block  { display: block; }

/* Form labels rebuilt as pure-text leaves (see the note above). Visually identical to the
 * <strong> + <span> they replace. */
.zp-flabel   { display: block; }
.zp-flabel-t { font-weight: 700; }
.zp-flabel-h { color: var(--zp-text-light); font-size: 13px; margin-left: 4px; }

/* Eligibility notice (zp_eligibility_message) — prose and CTA are now separate leaves. */
.zp-elig-prose { margin: 0 0 10px; }
.zp-elig-cta   { font-weight: 600; }

/* B6(a): relevant-zinns titles are rendered in FULL (so they resolve against the product's existing
 * corpus title row) and truncated VISUALLY here — a wp_trim_words() truncation produced a novel
 * string that could never match any corpus row, so those titles were permanently English. */
.zp-rz-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}