/* Sazzy Bundles Frontend — Purple (#4A1A6B) + Yellow (#F5C518) */

/* Prevent any zoom/scaling on mobile */
html.sazzy-no-zoom, html.sazzy-no-zoom body { overflow-x:hidden !important; touch-action:pan-y !important; }

.sazzy-builder-wrap { max-width:1200px; margin:0 auto; padding:32px 0; touch-action:pan-y; overflow:hidden; }
.sazzy-hidden { display:none !important; }

/* Header */
.sazzy-builder-heading { color:#4A1A6B; font-size:32px; font-weight:700; margin:0 0 8px; text-align:center; }
.sazzy-builder-subtitle { color:#666; font-size:16px; margin:0 0 32px; text-align:center; }

/* ─── Step 1: Tier Picker ─── */
.sazzy-step-heading { color:#4A1A6B; font-size:20px; font-weight:700; margin:0 0 20px; text-align:center; }

.sazzy-tier-cards { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }

.sazzy-tier-card {
    background:#fff; border:3px solid #e0d4e8; border-radius:16px; padding:32px 40px;
    text-align:center; cursor:pointer; transition:all .25s; min-width:200px;
    display:flex; flex-direction:column; gap:8px; align-items:center;
}
.sazzy-tier-card:hover { border-color:#4A1A6B; transform:translateY(-4px); box-shadow:0 8px 24px rgba(74,26,107,.15); }
.sazzy-tier-card.active { border-color:#4A1A6B; background:#4A1A6B; color:#fff; transform:translateY(-4px); box-shadow:0 8px 24px rgba(74,26,107,.25); }

.sazzy-tier-name { font-size:24px; font-weight:700; }
.sazzy-tier-card.active .sazzy-tier-name { color:#F5C518; }
.sazzy-tier-detail { font-size:14px; opacity:.7; }
.sazzy-tier-price { font-size:20px; font-weight:700; margin-top:4px; }
.sazzy-tier-card.active .sazzy-tier-price { color:#F5C518; }

/* ─── Selected tier bar ─── */
.sazzy-selected-tier-bar {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:#4A1A6B; color:#fff; padding:12px 24px; border-radius:12px; margin-bottom:20px;
}
.sazzy-tier-bar-name { font-size:16px; font-weight:700; color:#F5C518; }
.sazzy-tier-bar-price { font-size:16px; font-weight:600; }
.sazzy-change-size-btn {
    background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); color:#fff;
    padding:6px 16px; border-radius:6px; font-size:12px; cursor:pointer; transition:background .2s;
}
.sazzy-change-size-btn:hover { background:rgba(255,255,255,.25); }

/* ─── Progress Bar ─── */
.sazzy-progress-bar { background:#fff; border:1px solid #e0d4e8; border-radius:12px; padding:16px 24px; margin-bottom:24px; position:sticky; top:0; z-index:100; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.sazzy-progress-inner { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.sazzy-progress-track { flex:1; min-width:120px; height:8px; background:#e8e0ee; border-radius:4px; overflow:hidden; }
.sazzy-progress-fill { height:100%; background:linear-gradient(90deg,#4A1A6B,#7B3FA0); border-radius:4px; transition:width .3s ease; }
.sazzy-progress-fill.complete { background:linear-gradient(90deg,#28a745,#34ce57); }
.sazzy-progress-text { font-size:14px; font-weight:600; color:#4A1A6B; white-space:nowrap; }
.sazzy-progress-text.complete { color:#28a745; }
.sazzy-clear-btn { background:none; border:1px solid #ddd; border-radius:4px; padding:4px 12px; font-size:12px; color:#999; cursor:pointer; }
.sazzy-clear-btn:hover { border-color:#e74c3c; color:#e74c3c; }

/* ─── Collections / Designer Bar ─── */
.sazzy-collections-bar {
    display:flex; align-items:center; gap:16px; margin-bottom:16px;
    padding:12px 20px; background:#f3eef7; border:2px solid #d9cce5; border-radius:12px;
}
.sazzy-collections-label {
    font-size:13px; font-weight:700; color:#4A1A6B; text-transform:uppercase; letter-spacing:.5px;
    white-space:nowrap;
}
.sazzy-collections-filters { display:flex; flex-wrap:wrap; gap:8px; }
.sazzy-collection-btn {
    background:#fff; border:2px solid #d9cce5; border-radius:24px; padding:7px 18px;
    font-size:13px; font-weight:500; color:#4A1A6B; cursor:pointer; transition:all .2s;
}
.sazzy-collection-btn:hover { border-color:#7B3FA0; background:#f9f5fc; }
.sazzy-collection-btn.active {
    background:#7B3FA0; border-color:#7B3FA0; color:#fff; font-weight:700;
}

/* ─── Category Filters ─── */
.sazzy-category-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.sazzy-filter-btn { background:#fff; border:2px solid #e0d4e8; border-radius:24px; padding:8px 20px; font-size:13px; font-weight:500; color:#4A1A6B; cursor:pointer; transition:all .2s; }
.sazzy-filter-btn:hover { border-color:#4A1A6B; }
.sazzy-filter-btn.active { background:#4A1A6B; border-color:#4A1A6B; color:#F5C518; font-weight:700; }

/* ─── Grid + Sidebar Layout ─── */
.sazzy-builder-layout { display:grid; grid-template-columns:1fr 300px; gap:32px; }

/* ─── Card Grid ─── */
.sazzy-card-grid { display:grid; grid-template-columns:repeat(var(--sazzy-columns,4),1fr); gap:20px; }

.sazzy-card-item { position:relative; background:#fff; border:2px solid #eee; border-radius:12px; overflow:hidden; cursor:pointer; transition:all .25s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.sazzy-card-item:hover { border-color:#4A1A6B; transform:translateY(-2px); box-shadow:0 4px 16px rgba(74,26,107,.12); }
.sazzy-card-item.selected { border-color:#4A1A6B; box-shadow:0 0 0 3px rgba(74,26,107,.2); }
.sazzy-card-item.max-reached:not(.selected) { opacity:.45; pointer-events:none; }

.sazzy-card-image-wrap { position:relative; overflow:hidden; cursor:pointer; touch-action:manipulation; }
.sazzy-builder-wrap[data-image-ratio="square"] .sazzy-card-image-wrap { aspect-ratio:1/1; }
.sazzy-builder-wrap[data-image-ratio="portrait"] .sazzy-card-image-wrap { aspect-ratio:3/4; }
.sazzy-builder-wrap[data-image-ratio="landscape"] .sazzy-card-image-wrap { aspect-ratio:4/3; }
.sazzy-card-image-wrap { perspective:800px; }
.sazzy-card-image-wrap .sazzy-card-front,
.sazzy-card-image-wrap .sazzy-card-back { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; -webkit-touch-callout:none; user-select:none; backface-visibility:hidden; transition:transform .5s ease; }
.sazzy-card-image-wrap .sazzy-card-front { position:relative; }
.sazzy-card-image-wrap .sazzy-card-back { position:absolute; top:0; left:0; transform:rotateY(180deg); }
.sazzy-card-image-wrap.flipped .sazzy-card-front { transform:rotateY(-180deg); }
.sazzy-card-image-wrap.flipped .sazzy-card-back { transform:rotateY(0deg); }
/* Fallback for cards without inside image — keep old single-image class */
.sazzy-card-image { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; -webkit-touch-callout:none; user-select:none; }

/* Selected overlay — small badge only, no purple blanket */
.sazzy-card-overlay { position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:50%; background:#4A1A6B; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.sazzy-card-item.selected .sazzy-card-overlay { opacity:1; }
.sazzy-card-check { color:#F5C518; font-size:18px; font-weight:700; line-height:1; }

.sazzy-card-title { font-size:13px; font-weight:600; color:#333; padding:8px 12px 4px; margin:0; line-height:1.3; }

/* ─── Quantity Controls (per card) ─── */
.sazzy-card-actions { padding:8px 12px 10px; border-top:1px solid #eee; }
.sazzy-qty-control {
    display:flex; align-items:center; justify-content:center; gap:0;
    background:#f5f2f8; border-radius:8px; overflow:hidden; height:34px;
}
.sazzy-qty-minus,
.sazzy-qty-plus {
    width:34px; height:34px; border:none; background:transparent; font-size:18px; font-weight:700;
    color:#4A1A6B; cursor:pointer; transition:background .15s; display:flex; align-items:center; justify-content:center;
    line-height:1; padding:0; touch-action:manipulation;
}
.sazzy-qty-minus:hover:not(:disabled),
.sazzy-qty-plus:hover:not(:disabled) { background:#e0d4e8; }
.sazzy-qty-minus:disabled,
.sazzy-qty-plus:disabled { opacity:.3; cursor:not-allowed; }
.sazzy-qty-value {
    width:36px; text-align:center; font-size:15px; font-weight:700; color:#4A1A6B;
    user-select:none; line-height:34px;
}
.sazzy-card-item.selected .sazzy-qty-control { background:#4A1A6B; }
.sazzy-card-item.selected .sazzy-qty-value { color:#F5C518; }
.sazzy-card-item.selected .sazzy-qty-minus,
.sazzy-card-item.selected .sazzy-qty-plus { color:#F5C518; }
.sazzy-card-item.selected .sazzy-qty-minus:hover:not(:disabled),
.sazzy-card-item.selected .sazzy-qty-plus:hover:not(:disabled) { background:rgba(255,255,255,.15); }

/* ─── Summary ─── */
.sazzy-summary { background:#faf8fc; border:2px solid #e0d4e8; border-radius:12px; padding:24px; height:fit-content; position:sticky; top:80px; }
.sazzy-summary-heading { color:#4A1A6B; font-size:18px; font-weight:700; margin:0 0 16px; }
.sazzy-summary-cards { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; max-height:300px; overflow-y:auto; }
.sazzy-summary-card-item { display:flex; align-items:center; gap:10px; padding:6px 8px; background:#fff; border:1px solid #eee; border-radius:8px; font-size:13px; }
.sazzy-summary-card-item img { width:40px; height:40px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.sazzy-summary-card-name { flex:1; color:#333; font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Summary quantity controls */
.sazzy-summary-card-qty {
    display:flex; align-items:center; gap:2px; background:#f5f2f8; border-radius:6px;
    overflow:hidden; flex-shrink:0;
}
.sazzy-summary-qty-minus,
.sazzy-summary-qty-plus {
    width:22px; height:22px; border:none; background:transparent; font-size:14px; font-weight:700;
    color:#4A1A6B; cursor:pointer; display:flex; align-items:center; justify-content:center;
    padding:0; line-height:1; transition:background .15s;
}
.sazzy-summary-qty-minus:hover,
.sazzy-summary-qty-plus:hover { background:#e0d4e8; }
.sazzy-summary-card-qty span {
    font-size:12px; font-weight:700; color:#4A1A6B; min-width:18px; text-align:center;
}

.sazzy-summary-card-remove { background:none; border:none; color:#ccc; font-size:18px; cursor:pointer; padding:0 4px; flex-shrink:0; }
.sazzy-summary-card-remove:hover { color:#e74c3c; }
.sazzy-summary-empty { text-align:center; padding:24px; color:#bbb; font-style:italic; }

.sazzy-summary-price { display:flex; justify-content:space-between; padding:12px 0; border-top:1px solid #e0d4e8; margin-bottom:16px; }
.sazzy-price-label { font-size:14px; font-weight:600; color:#333; }
.sazzy-price-value { font-size:20px; font-weight:700; color:#4A1A6B; }

.sazzy-add-to-cart-btn { display:block; width:100%; padding:14px 24px; font-size:16px; font-weight:700; text-align:center; border:none; border-radius:8px; cursor:pointer; transition:all .25s; }
.sazzy-add-to-cart-btn:not(.disabled) { background:#F5C518; color:#4A1A6B; box-shadow:0 2px 8px rgba(245,197,24,.3); }
.sazzy-add-to-cart-btn:not(.disabled):hover { background:#FFD84D; transform:translateY(-1px); }
.sazzy-add-to-cart-btn.disabled { background:#e0e0e0; color:#999; cursor:not-allowed; }
.sazzy-add-to-cart-btn.loading { pointer-events:none; opacity:.7; }

.sazzy-cart-message { text-align:center; padding:12px; border-radius:8px; margin-top:12px; font-size:14px; font-weight:600; }
.sazzy-cart-message.success { background:#d4edda; color:#155724; }
.sazzy-cart-message.error { background:#f8d7da; color:#721c24; }

/* Load more */
.sazzy-pagination { text-align:center; margin-top:32px; }
.sazzy-load-more { background:#4A1A6B !important; color:#fff !important; border:none !important; padding:12px 32px !important; border-radius:8px !important; font-weight:600 !important; cursor:pointer !important; }
.sazzy-load-more:hover { background:#2D0F42 !important; }

.sazzy-empty-state { grid-column:1/-1; text-align:center; padding:64px 24px; color:#999; }
.sazzy-error { color:#e74c3c; font-weight:600; }

/* Animations */
.sazzy-builder-wrap[data-animate="yes"] .sazzy-card-item.selecting { animation:sazzy-pop .3s ease; }
@keyframes sazzy-pop { 0%{transform:scale(1)} 50%{transform:scale(.95)} 100%{transform:scale(1)} }
.sazzy-builder-wrap[data-animate="yes"] .sazzy-summary-card-item { animation:sazzy-slide .3s ease; }
@keyframes sazzy-slide { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }

/* Mobile tap fixes — prevent zoom on tap and remove black tap highlight */
.sazzy-card-item { -webkit-tap-highlight-color:transparent; }
.sazzy-card-image-wrap { -webkit-tap-highlight-color:transparent; }
.sazzy-qty-minus, .sazzy-qty-plus { -webkit-tap-highlight-color:transparent; }

/* Mobile */
@media(max-width:768px) {
    /* Prevent horizontal overflow that causes mobile zoom */
    .sazzy-builder-wrap { max-width:100vw; overflow-x:hidden; box-sizing:border-box; padding:16px 12px; }
    .sazzy-step-cards { max-width:100%; overflow:hidden; }
    .sazzy-builder-layout { grid-template-columns:1fr; max-width:100%; overflow:hidden; min-width:0; }
    .sazzy-card-grid { grid-template-columns:repeat(var(--sazzy-columns-mobile,2),1fr); gap:12px; max-width:100%; min-width:0; overflow:hidden; }
    .sazzy-summary { position:static; max-width:100%; min-width:0; overflow:hidden; word-break:break-word; }
    .sazzy-summary-card-item { max-width:100%; overflow:hidden; }
    .sazzy-summary-card-name { min-width:0; }
    .sazzy-builder-heading { font-size:24px; }
    .sazzy-tier-cards { flex-direction:column; align-items:center; }
    .sazzy-tier-card { min-width:80%; }
    .sazzy-progress-inner { flex-direction:column; align-items:stretch; gap:8px; }
    .sazzy-progress-bar { max-width:100%; }
    .sazzy-selected-tier-bar { flex-wrap:wrap; max-width:100%; }
    .sazzy-collections-bar { flex-direction:column; align-items:flex-start; gap:10px; padding:10px 16px; max-width:100%; overflow:hidden; }
    .sazzy-collections-filters { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; max-width:100%; }
    .sazzy-collection-btn { flex-shrink:0; }
    .sazzy-category-filters { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; max-width:100%; }
    .sazzy-filter-btn { flex-shrink:0; }
    .sazzy-qty-control { height:30px; }
    .sazzy-qty-minus, .sazzy-qty-plus { width:30px; height:30px; font-size:16px; }
    .sazzy-qty-value { width:28px; font-size:13px; line-height:30px; }
    /* Keep selected state visible on mobile */
    .sazzy-card-item.selected { border-color:#4A1A6B; box-shadow:0 0 0 3px rgba(74,26,107,.2); }
}

/* Divi compat */
.et_pb_section .sazzy-builder-wrap { max-width:100%; }