/* Zio's Catering Quote Builder — style.css v3.0.0
   ALL values controlled via CSS variables from admin dashboard */

.zios-qb-wrap *, .zios-qb-wrap *::before, .zios-qb-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }

.zios-qb-wrap {
    /* ── Default variable values (overridden by PHP wp_head injection) ── */
    --zqb-df: 'Playfair Display', serif;
    --zqb-bf: 'Jost', sans-serif;
    --zqb-primary: #C0392B;
    --zqb-text: #1a1a1a;
    --zqb-text-sub: #666;
    --zqb-text-muted: #aaa;
    --zqb-brand-color: #C0392B;
    --zqb-stitle-color: #C0392B;
    --zqb-pkg-price-color: #C0392B;
    --zqb-step-active: #C0392B;
    --zqb-grand-color: #C0392B;
    --zqb-btn-bg: #C0392B;
    --zqb-btn-text: #fff;
    --zqb-card-bg: #fafafa;
    --zqb-card-border: #e0e0e0;
    --zqb-input-border: #ddd;
    --zqb-q-total-color: #C0392B;
    --zqb-pkg-badge-color: #999;
    --zqb-pkg-name-color: #1a1a1a;
    --zqb-pkg-note-color: #aaa;
    --zqb-label-color: #666;
    --zqb-input-color: #1a1a1a;
    --zqb-bd-label: #666;
    --zqb-bd-val: #1a1a1a;
    --zqb-progress-color: #C0392B;
    --zqb-rule-color: #C0392B;
    /* sizes */
    --zqb-brand-size: 10px;
    --zqb-htitle-size: 34px;
    --zqb-hsub-size: 13px;
    --zqb-step-label-size: 10px;
    --zqb-stitle-size: 11px;
    --zqb-pkg-badge-size: 9px;
    --zqb-pkg-name-size: 13px;
    --zqb-pkg-price-size: 20px;
    --zqb-pkg-note-size: 10px;
    --zqb-label-size: 11px;
    --zqb-input-size: 14px;
    --zqb-bd-size: 13px;
    --zqb-grand-label-size: 18px;
    --zqb-grand-val-size: 26px;
    --zqb-perp-size: 11px;
    --zqb-btn-size: 12px;
    --zqb-q-brand-size: 10px;
    --zqb-q-title-size: 26px;
    --zqb-q-meta-lbl-size: 10px;
    --zqb-q-meta-val-size: 13px;
    --zqb-q-table-size: 13px;
    --zqb-q-total-size: 22px;
    --zqb-q-note-size: 12px;
    /* radii */
    --zqb-card-radius: 10px;
    --zqb-pkg-radius: 10px;
    --zqb-input-radius: 7px;
    --zqb-btn-radius: 7px;
    /* letter spacing */
    --zqb-brand-ls: 0.45em;
    --zqb-stitle-ls: 0.15em;
    --zqb-label-ls: 0.08em;
    --zqb-btn-ls: 0.08em;
    /* font weights */
    --zqb-htitle-fw: 400;
    --zqb-pkg-price-fw: 500;
    --zqb-btn-fw: 500;
    /* ── Base ── */
    font-family: var(--zqb-bf);
    color: var(--zqb-text);
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    line-height: 1.5;
}

/* ── Header ── */
.zios-qb-wrap .zqb-header { text-align: center; padding: 1.5rem 0 1rem; margin-bottom: 1.5rem; }
.zios-qb-wrap .zqb-brand  { font-size: var(--zqb-brand-size); letter-spacing: var(--zqb-brand-ls); color: var(--zqb-brand-color); text-transform: uppercase; margin-bottom: 6px; font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-header h2 { font-family: var(--zqb-df); font-size: clamp(20px, 4vw, var(--zqb-htitle-size)); color: var(--zqb-text); font-weight: var(--zqb-htitle-fw); margin: 0; padding: 0; border: none; }
.zios-qb-wrap .zqb-header h2 em { font-style: italic; color: var(--zqb-primary); }
.zios-qb-wrap .zqb-header p  { font-size: var(--zqb-hsub-size); color: var(--zqb-text-sub); margin-top: 6px; }
.zios-qb-wrap .zqb-rule       { width: 50px; height: 2px; background: var(--zqb-rule-color); margin: 0.75rem auto 0; }

/* ── Step progress ── */
.zios-qb-wrap .zqb-steps  { display: flex; justify-content: center; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 4px; }
.zios-qb-wrap .zqb-sdot   { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #ccc; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #999; transition: all 0.3s; flex-shrink: 0; }
.zios-qb-wrap .zqb-sdot.active { border-color: var(--zqb-step-active); color: var(--zqb-step-active); background: rgba(0,0,0,0.03); }
.zios-qb-wrap .zqb-sdot.done   { background: var(--zqb-step-active); color: #fff; border-color: var(--zqb-step-active); }
.zios-qb-wrap .zqb-slabel      { font-size: var(--zqb-step-label-size); letter-spacing: 0.08em; text-transform: uppercase; color: var(--zqb-text-muted); margin: 0 8px; white-space: nowrap; font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-slabel.active { color: var(--zqb-step-active); }
.zios-qb-wrap .zqb-sline  { width: 32px; height: 1px; background: #ddd; flex-shrink: 0; }
.zios-qb-wrap .zqb-sline.done { background: var(--zqb-step-active); }
.zios-qb-wrap .zqb-pbar   { width: 100%; height: 2px; background: #e0e0e0; border-radius: 2px; margin-bottom: 1.75rem; }
.zios-qb-wrap .zqb-pfill  { height: 100%; background: var(--zqb-progress-color); border-radius: 2px; transition: width 0.4s ease; }

/* ── Layout grid ── */
.zios-qb-wrap .zqb-layout { display: grid; grid-template-columns: 1fr 290px; gap: 1.25rem; align-items: start; }
.zios-qb-wrap .zqb-layout > div:last-child { display: flex; flex-direction: column; gap: 0; }
@media (max-width: 680px) { .zios-qb-wrap .zqb-layout { grid-template-columns: 1fr; } .zios-qb-wrap .zqb-slabel { display: none; } }

/* ── Section cards ── */
.zios-qb-wrap .zqb-section { background: var(--zqb-card-bg); border: 1px solid var(--zqb-card-border); border-radius: var(--zqb-card-radius); padding: 1.25rem; margin-bottom: 1rem; }
.zios-qb-wrap .zqb-sec-title { font-size: var(--zqb-stitle-size); letter-spacing: var(--zqb-stitle-ls); text-transform: uppercase; color: var(--zqb-stitle-color); margin-bottom: 1rem; font-weight: 500; font-family: var(--zqb-bf); }

/* ── Package cards ── */
.zios-qb-wrap .zqb-pkg-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
@media (max-width: 600px) { .zios-qb-wrap .zqb-pkg-grid { grid-template-columns: 1fr 1fr; } }
.zios-qb-wrap .zqb-pkg-card { border: 1.5px solid var(--zqb-card-border); border-radius: var(--zqb-pkg-radius); padding: 1rem 0.75rem; cursor: pointer; transition: all 0.2s; background: #fff; text-align: center; position: relative; user-select: none; }
.zios-qb-wrap .zqb-pkg-card:hover { border-color: var(--zqb-primary); }
.zios-qb-wrap .zqb-pkg-card.selected { border-color: var(--zqb-primary); background: rgba(0,0,0,0.02); }
.zios-qb-wrap .zqb-pkg-card.selected::after { content: '\2713'; position: absolute; top: 8px; right: 10px; font-size: 11px; color: var(--zqb-primary); font-weight: 700; }
.zios-qb-wrap .zqb-pkg-badge { font-size: var(--zqb-pkg-badge-size); letter-spacing: 0.1em; text-transform: uppercase; color: var(--zqb-pkg-badge-color); margin-bottom: 4px; font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-pkg-name  { font-family: var(--zqb-df); font-size: var(--zqb-pkg-name-size); color: var(--zqb-pkg-name-color); margin-bottom: 8px; line-height: 1.3; }
.zios-qb-wrap .zqb-pkg-price { font-size: var(--zqb-pkg-price-size); font-weight: var(--zqb-pkg-price-fw); color: var(--zqb-pkg-price-color); }
.zios-qb-wrap .zqb-pkg-price span { font-size: 11px; font-weight: 400; color: var(--zqb-text-muted); }
.zios-qb-wrap .zqb-pkg-note  { font-size: var(--zqb-pkg-note-size); color: var(--zqb-pkg-note-color); margin-top: 4px; line-height: 1.4; font-family: var(--zqb-bf); }

/* ── Form fields ── */
.zios-qb-wrap .zqb-fg { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.zios-qb-wrap .zqb-fg:last-child { margin-bottom: 0; }
.zios-qb-wrap .zqb-fg label { font-size: var(--zqb-label-size); letter-spacing: var(--zqb-label-ls); text-transform: uppercase; color: var(--zqb-label-color); font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-fg input,
.zios-qb-wrap .zqb-fg select,
.zios-qb-wrap .zqb-fg textarea { background: #fff; border: 1px solid var(--zqb-input-border); border-radius: var(--zqb-input-radius); padding: 9px 12px; color: var(--zqb-input-color); font-family: var(--zqb-bf); font-size: var(--zqb-input-size); width: 100%; outline: none; transition: border-color 0.2s; box-shadow: none; }
.zios-qb-wrap .zqb-fg input:focus,
.zios-qb-wrap .zqb-fg select:focus { border-color: var(--zqb-primary); }
.zios-qb-wrap .zqb-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 500px) { .zios-qb-wrap .zqb-menu-grid { grid-template-columns: 1fr; } }

/* ── Delivery options ── */
.zios-qb-wrap .zqb-del-row { display: flex; gap: 10px; }
.zios-qb-wrap .zqb-del-opt { flex: 1; padding: 10px; border: 1.5px solid var(--zqb-card-border); border-radius: var(--zqb-input-radius); cursor: pointer; text-align: center; transition: all 0.2s; background: #fff; user-select: none; }
.zios-qb-wrap .zqb-del-opt:hover { border-color: var(--zqb-primary); }
.zios-qb-wrap .zqb-del-opt.selected { border-color: var(--zqb-primary); background: rgba(0,0,0,0.02); }
.zios-qb-wrap .zqb-del-opt .do-title { font-size: var(--zqb-input-size); font-weight: 500; color: var(--zqb-text); margin-bottom: 3px; }
.zios-qb-wrap .zqb-del-opt .do-sub   { font-size: 11px; color: var(--zqb-text-sub); }
.zios-qb-wrap .zqb-del-opt.selected .do-title { color: var(--zqb-primary); }

/* ── Info banner ── */
.zios-qb-wrap .zqb-info { background: rgba(192,57,43,0.06); border: 1px solid rgba(192,57,43,0.22); border-radius: var(--zqb-input-radius); padding: 10px 12px; font-size: 12px; color: var(--zqb-text); margin-bottom: 1rem; line-height: 1.5; font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-info span { color: var(--zqb-primary); font-weight: 500; }

/* ── Badges ── */
.zios-qb-wrap .zqb-badge      { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 10px; margin-left: 6px; }
.zios-qb-wrap .zqb-badge-incl { background: rgba(46,125,50,0.12); color: #2e7d32; }
.zios-qb-wrap .zqb-badge-xtra { background: rgba(192,57,43,0.12); color: var(--zqb-primary); }

/* ── Sidebar / Breakdown ── */
.zios-qb-wrap .zqb-breakdown { background: var(--zqb-card-bg); border: 1px solid var(--zqb-card-border); border-radius: var(--zqb-card-radius); padding: 1.25rem; position: static !important; top: auto !important; }
.zios-qb-wrap .zqb-bd-row    { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid #eee; font-size: var(--zqb-bd-size); }
.zios-qb-wrap .zqb-bd-row:last-child { border-bottom: none; }
.zios-qb-wrap .zqb-bd-label  { color: var(--zqb-bd-label); font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-bd-val    { color: var(--zqb-bd-val); font-weight: 500; font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-bd-add    { color: var(--zqb-primary); font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-bd-incl   { color: #2e7d32; font-size: 11px; font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-section-micro { padding: 6px 0 2px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zqb-text-muted); font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-grand-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; margin-top: 8px; border-top: 1.5px solid #ccc; }
.zios-qb-wrap .zqb-grand-label { font-family: var(--zqb-df); font-size: var(--zqb-grand-label-size); color: var(--zqb-text); }
.zios-qb-wrap .zqb-grand-val   { font-family: var(--zqb-df); font-size: var(--zqb-grand-val-size); color: var(--zqb-grand-color); }
.zios-qb-wrap .zqb-per-person  { font-size: var(--zqb-perp-size); color: var(--zqb-text-sub); margin-top: 4px; text-align: right; font-family: var(--zqb-bf); }

/* ── Buttons ── */
.zios-qb-wrap .zqb-btn { display: block; width: 100%; padding: 11px; border-radius: var(--zqb-btn-radius); border: none; cursor: pointer; font-family: var(--zqb-bf); font-size: var(--zqb-btn-size); letter-spacing: var(--zqb-btn-ls); text-transform: uppercase; font-weight: var(--zqb-btn-fw); transition: all 0.2s; margin-top: 10px; text-align: center; }
.zios-qb-wrap .zqb-btn-r  { background: var(--zqb-btn-bg); color: var(--zqb-btn-text); }
.zios-qb-wrap .zqb-btn-r:hover { opacity: 0.88; }
.zios-qb-wrap .zqb-btn-r:disabled { opacity: 0.4; cursor: not-allowed; }
.zios-qb-wrap .zqb-btn-o  { background: transparent; color: var(--zqb-text-sub); border: 1px solid var(--zqb-card-border); }
.zios-qb-wrap .zqb-btn-o:hover { border-color: var(--zqb-primary); color: var(--zqb-primary); }
.zios-qb-wrap .zqb-btn-dl { background: var(--zqb-btn-bg); color: var(--zqb-btn-text); }
.zios-qb-wrap .zqb-btn-dl:hover { opacity: 0.88; }
.zios-qb-wrap .zqb-btn-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zios-qb-wrap .zqb-btn-row2 .zqb-btn { margin: 0; }

/* ── Appetizer checkboxes ── */
.zios-qb-wrap .zqb-app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
@media (max-width: 500px) { .zios-qb-wrap .zqb-app-grid { grid-template-columns: 1fr; } }
.zios-qb-wrap .zqb-app-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--zqb-input-border); border-radius: var(--zqb-input-radius); cursor: pointer; background: #fff; transition: all 0.15s; user-select: none; }
.zios-qb-wrap .zqb-app-item:hover { border-color: var(--zqb-primary); }
.zios-qb-wrap .zqb-app-item.checked { border-color: var(--zqb-primary); background: rgba(0,0,0,0.02); }
.zios-qb-wrap .zqb-app-item input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; accent-color: var(--zqb-primary); }
.zios-qb-wrap .zqb-app-name  { font-size: var(--zqb-input-size); color: var(--zqb-text); flex: 1; line-height: 1.3; font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-app-price { font-size: 11px; font-weight: 500; white-space: nowrap; flex-shrink: 0; font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-app-price.free  { color: #2e7d32; }
.zios-qb-wrap .zqb-app-price.extra { color: var(--zqb-primary); }
.zios-qb-wrap .zqb-app-price.dim   { color: var(--zqb-text-muted); }

/* ── Quote document ── */
.zios-qb-wrap .zqb-quote-wrap { max-width: 680px; margin: 0 auto; }
.zios-qb-wrap .zqb-qdoc   { background: #fff; border: 1px solid var(--zqb-card-border); border-radius: var(--zqb-card-radius); padding: 2rem; margin-bottom: 1rem; }
.zios-qb-wrap .zqb-qhd    { text-align: center; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid #eee; }
.zios-qb-wrap .zqb-qbrand { font-size: var(--zqb-q-brand-size); letter-spacing: var(--zqb-brand-ls); color: var(--zqb-primary); text-transform: uppercase; margin-bottom: 6px; font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-qtit   { font-family: var(--zqb-df); font-size: var(--zqb-q-title-size); color: var(--zqb-text); font-style: italic; font-weight: var(--zqb-htitle-fw); margin: 0; }
.zios-qb-wrap .zqb-qnum   { font-size: 12px; color: var(--zqb-text-sub); margin-top: 5px; font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-qmeta  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1.25rem; }
.zios-qb-wrap .zqb-qmb    { background: #f9f9f9; border-radius: 8px; padding: 12px; }
.zios-qb-wrap .zqb-qml    { font-size: var(--zqb-q-meta-lbl-size); letter-spacing: 0.1em; text-transform: uppercase; color: var(--zqb-text-muted); margin-bottom: 4px; font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-qmv    { font-size: var(--zqb-q-meta-val-size); color: var(--zqb-text); font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-qms    { font-size: 12px; color: var(--zqb-text-sub); margin-top: 2px; font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-qtab   { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.zios-qb-wrap .zqb-qtab th { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zqb-text-muted); padding: 6px 8px; border-bottom: 1px solid #eee; text-align: left; font-weight: 400; font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-qtab th:last-child { text-align: right; }
.zios-qb-wrap .zqb-qtab td { padding: 9px 8px; border-bottom: 1px solid #eee; font-size: var(--zqb-q-table-size); color: var(--zqb-text); font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-qtab td:last-child { text-align: right; color: var(--zqb-q-total-color); font-weight: 500; }
.zios-qb-wrap .zqb-qtab tr.sub-row td { color: var(--zqb-text-sub); font-size: 12px; background: #f9f9f9; font-style: italic; }
.zios-qb-wrap .zqb-qtots  { display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 1.25rem; }
.zios-qb-wrap .zqb-qtr    { display: flex; justify-content: space-between; width: 240px; font-size: 13px; padding: 4px 0; color: var(--zqb-text-sub); font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-qgrand { display: flex; justify-content: space-between; width: 240px; font-family: var(--zqb-df); font-size: var(--zqb-q-total-size); padding-top: 8px; margin-top: 6px; border-top: 1px solid #ccc; color: var(--zqb-text); }
.zios-qb-wrap .zqb-qgrand span:last-child { color: var(--zqb-q-total-color); }
.zios-qb-wrap .zqb-qdiv   { width: 50px; height: 1.5px; background: var(--zqb-rule-color); margin: 1.25rem auto; }
.zios-qb-wrap .zqb-qnote  { text-align: center; font-size: var(--zqb-q-note-size); color: var(--zqb-text-sub); line-height: 1.7; font-family: var(--zqb-bf); }
.zios-qb-wrap .zqb-qnote strong { color: var(--zqb-primary); font-weight: 500; }