/*
 * Sweetorium Builder — Styles
 * Pixel-matched to Figma prototype: silver-goal-41076736.figma.site
 * Fonts: DM Sans (body), Abril Fatface (headings via theme)
 * Primary: #ff477e  Grey bg: #f5f5f5  Border: #eee  Dark: #1a1a1a
 */

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
    --sb-pink:         #ff477e;
    --sb-pink-dark:    #e03068;
    --sb-dark:         #1a1a1a;
    --sb-grey-text:    #666666;
    --sb-grey-muted:   #bbbbbb;
    --sb-grey-bg:      #f5f5f5;
    --sb-grey-hover:   #eeeeee;
    --sb-border:       #eeeeee;
    --sb-white:        #ffffff;
    --sb-green-ve:     #a3e635;
    --sb-green-v:      #22c55e;
    --sb-radius-card:  12px;
    --sb-radius-pill:  9999px;
    --sb-radius-panel: 16px;
    --sb-font:         'DM Sans', sans-serif;
    --sb-trans:        0.18s ease;
}

.sb-builder, .sb-builder * { box-sizing: border-box; font-family: var(--sb-font); }

/* ── Two-column layout ──────────────────────────────────────────────────── */
.sb-builder {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    padding-bottom: 80px;
}
@media (min-width: 768px) { .sb-builder { padding-bottom: 32px; } }

.sb-builder__left  { flex: 1; min-width: 0; padding-top: 110px; }
.sb-builder__right { display: none; width: 340px; flex-shrink: 0; }
@media (min-width: 768px)  { .sb-builder__right { display: block; } .sb-builder__left { padding-top: 0; } }
@media (min-width: 1024px) { .sb-builder__right { width: 360px; } }

/* ── Mobile top bar ─────────────────────────────────────────────────────── */
.sb-mobile-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: var(--sb-white);
    border-bottom: 1px solid var(--sb-border);
}
@media (min-width: 768px) { .sb-mobile-bar { display: none; } }

.sb-mobile-bar__top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; height: 48px;
}
.sb-mobile-bar__title { font-size: 14px; font-weight: 600; color: var(--sb-dark); }
.sb-mobile-bar__picks { font-size: 12px; color: var(--sb-grey-text); }
.sb-mobile-bar__search { padding: 0 16px 10px; }
.sb-mobile-bar__search .sb-search { display: block; }

/* ── Search ─────────────────────────────────────────────────────────────── */
.sb-search-wrap { position: relative; margin-bottom: 10px; display: none; }
@media (min-width: 768px) { .sb-search-wrap { display: block; } }
.sb-search-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--sb-grey-text); pointer-events: none; width: 15px; height: 15px; }
.sb-search {
    width: 100%; padding: 10px 16px 10px 38px;
    background: var(--sb-grey-bg); border: none; border-radius: var(--sb-radius-pill);
    font-size: 14px; color: var(--sb-dark); font-family: var(--sb-font); outline: none;
    transition: box-shadow var(--sb-trans);
}
.sb-search:focus { box-shadow: 0 0 0 3px rgba(255,71,126,.2); }
.sb-search::placeholder { color: var(--sb-grey-text); }

/* ── Controls row (dietary btn + sweet type pills) ───────────────────────── */
.sb-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }

/* Dietary & Allergens dropdown button */
.sb-dropdown { position: relative; }
.sb-dietary-btn {
    height: 42px; padding: 0 14px; border-radius: var(--sb-radius-pill); border: none;
    background: var(--sb-grey-bg); color: var(--sb-grey-text); font-size: 12px;
    font-family: var(--sb-font); display: flex; align-items: center; gap: 6px;
    cursor: pointer; transition: background var(--sb-trans); white-space: nowrap; flex-shrink: 0;
}
.sb-dietary-btn:hover { background: var(--sb-grey-hover); }
.sb-dietary-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.sb-dropdown__panel {
    display: none; position: absolute; top: calc(100% + 6px); left: 0;
    background: var(--sb-white); border: 1px solid var(--sb-border); border-radius: 12px;
    padding: 12px; min-width: 220px; z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.sb-dropdown__panel.is-open { display: block; }
.sb-dropdown__label {
    font-size: 11px; font-weight: 600; color: var(--sb-grey-text);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; padding: 0 4px;
}
.sb-dropdown__option {
    display: flex; align-items: center; gap: 8px; padding: 7px 8px;
    border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--sb-dark);
    transition: background var(--sb-trans);
}
.sb-dropdown__option:hover { background: var(--sb-grey-bg); }
.sb-dropdown__option input[type="checkbox"] { accent-color: var(--sb-pink); width: 15px; height: 15px; flex-shrink: 0; }

/* Sweet type filter pills */
.sb-filters {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    -ms-overflow-style: none; padding-bottom: 4px; margin-bottom: 12px;
}
.sb-filters::-webkit-scrollbar { display: none; }
.sb-filter-pill {
    flex-shrink: 0; padding: 6px 14px; border-radius: var(--sb-radius-pill); border: none;
    font-size: 12px; font-family: var(--sb-font); cursor: pointer;
    transition: background var(--sb-trans), color var(--sb-trans); white-space: nowrap;
    background: var(--sb-grey-bg); color: var(--sb-grey-text);
}
.sb-filter-pill:hover  { background: var(--sb-grey-hover); }
.sb-filter-pill.is-active { background: var(--sb-pink); color: var(--sb-white); }

/* ── Sweet grid ─────────────────────────────────────────────────────────── */
.sb-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
@media (min-width: 480px)  { .sb-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 768px)  { .sb-grid { grid-template-columns: repeat(3,1fr); gap: 12px; } }
@media (min-width: 1024px) { .sb-grid { grid-template-columns: repeat(4,1fr); } }

/* ── Sweet card ─────────────────────────────────────────────────────────── */
.sb-card {
    background: var(--sb-white); border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-card); overflow: hidden;
    cursor: pointer; transition: all var(--sb-trans); position: relative;
}
.sb-card:hover     { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.sb-card.is-selected { border-color: var(--sb-pink); box-shadow: 0 0 0 2px rgba(255,71,126,.15); }
.sb-card.is-maxed  { opacity: 0.4; pointer-events: none; }

/* Image area */
.sb-card__img-wrap { background: var(--sb-grey-bg); padding: 8px; position: relative; }
.sb-card__img-wrap img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; display: block; }

/* Qty count badge (top-right pink circle) */
.sb-card__qty-badge {
    position: absolute; top: -6px; right: -6px;
    background: var(--sb-pink); color: var(--sb-white);
    font-size: 10px; font-weight: 700;
    width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; z-index: 2;
}

/* Dietary badges bottom-left of image */
.sb-card__dietary {
    position: absolute; bottom: 10px; left: 10px;
    display: flex; gap: 3px;
}
.sb-badge { padding: 2px 6px; border-radius: var(--sb-radius-pill); font-size: 10px; font-weight: 600; line-height: 1.4; }
.sb-badge--Ve, .sb-badge--vegan       { background: var(--sb-green-ve); color: #333; }
.sb-badge--V,  .sb-badge--vegetarian  { background: var(--sb-green-v);  color: #fff; }
.sb-badge--GF, .sb-badge--gluten-free { background: #fef08a; color: #713f12; }
.sb-badge--DF, .sb-badge--dairy-free  { background: #bae6fd; color: #0c4a6e; }
.sb-badge--halal                      { background: #ddd6fe; color: #4c1d95; }

/* Card body */
.sb-card__body { padding: 8px 8px 10px; }
.sb-card__name {
    font-size: 13px; color: var(--sb-dark); font-weight: 500; line-height: 1.3;
    margin: 0 0 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sb-card__actions { display: flex; justify-content: space-between; align-items: center; }
.sb-card__qty-display { display: none; align-items: center; gap: 6px; }
.sb-card__qty-display.is-visible { display: flex; }

.sb-btn-minus, .sb-btn-plus {
    width: 32px; height: 32px; border-radius: 50%; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: filter var(--sb-trans), transform 0.1s ease;
    font-size: 18px; line-height: 1;
    background: var(--sb-pink); color: var(--sb-white); flex-shrink: 0;
}
.sb-btn-plus:hover:not(:disabled)  { filter: brightness(1.1); }
.sb-btn-plus:active:not(:disabled) { transform: scale(0.9); }
.sb-btn-minus:hover:not(:disabled)  { filter: brightness(1.1); }
.sb-btn-minus:active:not(:disabled) { transform: scale(0.9); }
.sb-btn-minus:disabled { background: var(--sb-grey-bg); color: var(--sb-grey-muted); cursor: default; }
.sb-card__qty-num { font-size: 14px; font-weight: 700; color: var(--sb-dark); min-width: 16px; text-align: center; }

/* ── Right sidebar panel ─────────────────────────────────────────────────── */
.sb-panel {
    background: var(--sb-white); border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-panel); overflow: hidden;
    position: sticky; top: 16px;
}
/* Product header */
.sb-panel__header { padding: 20px 20px 16px; border-bottom: 1px solid var(--sb-border); display: flex; align-items: center; gap: 12px; }
.sb-panel__img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex-shrink: 0; }
.sb-panel__title    { font-size: 15px; font-weight: 700; color: var(--sb-dark); margin: 0 0 2px; }
.sb-panel__subtitle { font-size: 12px; color: var(--sb-grey-text); margin: 0 0 4px; }
.sb-panel__price    { font-size: 14px; font-weight: 600; color: var(--sb-dark); margin: 0; }
/* Progress section */
.sb-panel__progress { padding: 16px 20px; border-bottom: 1px solid var(--sb-border); }
.sb-panel__progress-label  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sb-panel__progress-text   { font-size: 13px; color: var(--sb-dark); font-weight: 500; }
.sb-panel__progress-price  { font-size: 13px; color: var(--sb-grey-text); }
.sb-panel__progress-track  { height: 8px; background: #f0f0f0; border-radius: var(--sb-radius-pill); overflow: hidden; }
.sb-panel__progress-fill   { height: 100%; background: var(--sb-pink); border-radius: var(--sb-radius-pill); transition: width 0.3s ease; width: 0%; }
/* Selections list */
.sb-panel__selections { padding: 16px 20px; border-bottom: 1px solid var(--sb-border); max-height: 300px; overflow-y: auto; }
.sb-panel__empty-msg  { font-size: 13px; color: var(--sb-grey-text); text-align: center; line-height: 1.5; }
.sb-selections-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sb-selection-item { display: flex; align-items: center; gap: 8px; }
.sb-selection-item img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.sb-selection-item__name   { flex: 1; font-size: 13px; color: var(--sb-dark); }
.sb-selection-item__qty    { font-size: 12px; color: var(--sb-grey-text); font-weight: 600; }
.sb-selection-item__remove { background: none; border: none; color: var(--sb-grey-muted); cursor: pointer; padding: 2px 4px; font-size: 16px; line-height: 1; transition: color var(--sb-trans); }
.sb-selection-item__remove:hover { color: var(--sb-pink); }
/* CTA section */
.sb-panel__cta { padding: 20px 20px 12px; }
.sb-add-to-cart {
    display: block; width: 100%; padding: 14px; border-radius: var(--sb-radius-pill); border: none;
    font-size: 14px; font-family: var(--sb-font); font-weight: 600; text-align: center;
    transition: all var(--sb-trans); cursor: not-allowed;
    background: #f0f0f0; color: var(--sb-grey-muted); margin-bottom: 8px;
}
.sb-add-to-cart.is-ready { background: var(--sb-pink); color: var(--sb-white); cursor: pointer; }
.sb-add-to-cart.is-ready:hover { filter: brightness(1.05); }
.sb-panel__cta-hint { text-align: center; font-size: 12px; color: var(--sb-grey-text); margin: 0; }
/* Allergen note */
.sb-panel__allergen-note { padding: 0 20px 16px; display: flex; gap: 8px; align-items: flex-start; }
.sb-panel__allergen-note svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--sb-grey-text); margin-top: 1px; }
.sb-panel__allergen-note p { font-size: 11px; color: var(--sb-grey-text); margin: 0; line-height: 1.5; }
.sb-panel__allergen-note a { color: var(--sb-pink); text-decoration: none; }

/* ── Mobile bottom CTA ───────────────────────────────────────────────────── */
.sb-mobile-cta {
    display: flex; align-items: center; gap: 12px;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--sb-white); border-top: 1px solid var(--sb-border);
    box-shadow: 0 -4px 20px rgba(0,0,0,.08); padding: 12px 16px;
}
@media (min-width: 768px) { .sb-mobile-cta { display: none; } }
.sb-mobile-cta__info  { flex: 1; text-align: left; }
.sb-mobile-cta__label { font-size: 14px; font-weight: 600; color: var(--sb-dark); display: block; }
.sb-mobile-cta__picks { font-size: 12px; color: var(--sb-grey-text); display: block; }
.sb-mobile-cta__btn {
    padding: 12px 20px; border-radius: var(--sb-radius-pill); border: none;
    background: var(--sb-pink); color: var(--sb-white); font-size: 14px;
    font-family: var(--sb-font); font-weight: 600; cursor: pointer;
    white-space: nowrap; transition: filter var(--sb-trans);
}
.sb-mobile-cta__btn:disabled { background: #f0f0f0; color: var(--sb-grey-muted); cursor: default; }
.sb-mobile-cta__btn:not(:disabled):hover { filter: brightness(1.05); }

/* ── Success / loading / error states ────────────────────────────────────── */
.sb-success { padding: 20px; text-align: center; }
.sb-success__title { font-size: 15px; font-weight: 700; color: var(--sb-dark); margin: 0 0 12px; }
.sb-success__actions { display: flex; flex-direction: column; gap: 8px; }
.sb-success__cart, .sb-success__checkout { display: block; padding: 12px; border-radius: var(--sb-radius-pill); font-size: 14px; font-weight: 600; text-decoration: none; text-align: center; transition: filter var(--sb-trans); }
.sb-success__cart     { background: var(--sb-grey-bg); color: var(--sb-dark); }
.sb-success__checkout { background: var(--sb-pink); color: var(--sb-white); }
.sb-success__checkout:hover { filter: brightness(1.05); }

.sb-loading { text-align: center; padding: 60px 20px; color: var(--sb-grey-text); font-size: 14px; grid-column: 1 / -1; }
.sb-loading::before { content: ''; display: block; width: 32px; height: 32px; border: 3px solid var(--sb-grey-hover); border-top-color: var(--sb-pink); border-radius: 50%; animation: sb-spin 0.7s linear infinite; margin: 0 auto 12px; }
@keyframes sb-spin { to { transform: rotate(360deg); } }
.sb-empty { grid-column: 1/-1; text-align: center; padding: 40px 20px; color: var(--sb-grey-text); font-size: 14px; }
.sb-error { background: #fff0f0; border: 1px solid #fca5a5; border-radius: 10px; color: #b91c1c; padding: 12px 16px; font-size: 13px; margin-bottom: 16px; }

/* ── Express payment buttons ─────────────────────────────────────────────── */
.sb-express-payments {
    margin-top: 10px;
}

.sb-express-payments__divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.sb-express-payments__divider::before,
.sb-express-payments__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--sb-border);
}

.sb-express-payments__divider span {
    font-size: 12px;
    color: var(--sb-grey-text);
    white-space: nowrap;
}

/* Ensure WooPayments / PayPal buttons fill the panel width */
.sb-express-payments .wp-block-woocommerce-cart-express-payment-block,
.sb-express-payments .wc-block-components-express-payment,
.sb-express-payments .wc-block-components-express-payment__event-buttons,
.sb-express-payments #wcpay-payment-request-wrapper,
.sb-express-payments #wcpay-woopay-button-container,
.sb-express-payments .ppcp-button-apm,
.sb-express-payments .ppcp-button {
    width: 100% !important;
    margin: 0 0 6px !important;
}

.sb-express-payments .ppcp-button-apm:last-child,
.sb-express-payments .ppcp-button:last-child {
    margin-bottom: 0 !important;
}