/* CB Party Planner — Frontend Wizard Styles */
.cbpp-app{
  --cbpp-cream:#FFF8EE; --cbpp-card:#FFFFFF; --cbpp-choc:#3D2B1F; --cbpp-choc-soft:#6B5645;
  --cbpp-raspberry:#C6355F; --cbpp-raspberry-dark:#A32B4E; --cbpp-butter:#F2AE30; --cbpp-mint:#7BAE8E;
  --cbpp-line:#EDE1CB; --cbpp-line-strong:#DCCBA8; --cbpp-shadow:0 8px 24px rgba(61,43,31,0.08);
  background:var(--cbpp-cream); color:var(--cbpp-choc);
  font-family: inherit;
  max-width:1240px; margin:0 auto; padding:24px 20px 60px; box-sizing:border-box;
}
.cbpp-app *{box-sizing:border-box; font-family:inherit;}
.cbpp-app h1,.cbpp-app h3{font-weight:600; color:var(--cbpp-choc); margin:0;}

/* Defensive reset — neutralizes theme/page-builder global button & input
   styling from bleeding into the wizard (fixes "boxes"/broken layout when
   embedded in a themed page). Our own classes restyle everything below. */
:where(.cbpp-app) button{
  all:unset; box-sizing:border-box; cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; justify-content:center;
}
:where(.cbpp-app) input, :where(.cbpp-app) select{
  font-family:inherit; -webkit-appearance:none; appearance:none;
}

.cbpp-hero{margin-bottom:26px;}
.cbpp-hero h1{font-size:28px; line-height:1.15; display:flex; align-items:center; gap:10px;}
.cbpp-hero p{margin:8px 0 0; color:var(--cbpp-choc-soft); font-size:15px; max-width:520px;}

.cbpp-bunting{position:relative; margin:30px 0 36px; padding-top:22px;}
.cbpp-bunting-string{position:absolute; top:0; left:0; right:0; height:2px; background:repeating-linear-gradient(90deg,var(--cbpp-line-strong) 0 8px, transparent 8px 14px);}
.cbpp-flags{display:flex; justify-content:space-between; gap:4px;}
.cbpp-flag-wrap{display:flex; flex-direction:column; align-items:center; flex:1;}
.cbpp-flag{width:0;height:0;border-left:22px solid transparent;border-right:22px solid transparent;border-top:30px solid #fff;box-shadow:var(--cbpp-shadow);position:relative;transition:transform .25s ease,border-top-color .25s ease;}
.cbpp-flag::before{content:attr(data-num);position:absolute;top:-30px;left:-11px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--cbpp-choc-soft);}
.cbpp-flag-wrap.done .cbpp-flag{border-top-color:var(--cbpp-mint);}
.cbpp-flag-wrap.done .cbpp-flag::before{content:"✓";color:#fff;}
.cbpp-flag-wrap.active .cbpp-flag{border-top-color:var(--cbpp-raspberry);transform:translateY(-4px) scale(1.08);}
.cbpp-flag-wrap.active .cbpp-flag::before{color:#fff;}
.cbpp-flag-label{margin-top:8px;font-size:11.5px;text-align:center;color:var(--cbpp-choc-soft);max-width:82px;line-height:1.25;}
.cbpp-flag-wrap.active .cbpp-flag-label{color:var(--cbpp-raspberry-dark);font-weight:600;}
.cbpp-flag-wrap.done .cbpp-flag-label{color:var(--cbpp-choc);}
.cbpp-flag-wrap.clickable{cursor:pointer;}
.cbpp-flag-wrap.clickable:hover .cbpp-flag{transform:translateY(-3px);}
.cbpp-flag-wrap.clickable:hover .cbpp-flag-label{color:var(--cbpp-raspberry-dark);}

.cbpp-layout{display:grid; grid-template-columns:1fr 350px; gap:26px; align-items:start;}
.cbpp-panel{background:var(--cbpp-card); border-radius:20px; box-shadow:var(--cbpp-shadow); padding:30px 32px; min-height:420px;}
.cbpp-step-eyebrow{font-size:11.5px;letter-spacing:0.6px;text-transform:uppercase;color:var(--cbpp-raspberry-dark);font-weight:700;margin-bottom:6px;}
.cbpp-step-title{font-size:22px;margin-bottom:4px;font-weight:600; display:flex; align-items:center; gap:8px;}
.cbpp-step-desc{color:var(--cbpp-choc-soft);font-size:14px;margin-bottom:22px;max-width:560px; display:flex; align-items:center; gap:6px;}

.cbpp-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;}
.cbpp-field{display:flex;flex-direction:column;gap:6px;}
.cbpp-field.full{grid-column:1/-1;}
.cbpp-field label{font-size:12.5px;font-weight:600;color:var(--cbpp-choc-soft);}
.cbpp-field input,.cbpp-field select{border:1.5px solid var(--cbpp-line);background:#FFFDF9;border-radius:10px;padding:11px 13px;font-size:14px;color:var(--cbpp-choc);outline:none;}
.cbpp-field input:focus,.cbpp-field select:focus{border-color:var(--cbpp-raspberry);}

.cbpp-delivery-note{display:flex; align-items:flex-start; gap:8px; margin:-8px 0 22px; padding:10px 14px; border-radius:10px; font-size:13px; font-weight:600; background:#F1F8F4; color:#3E6E56; border:1.5px dashed var(--cbpp-mint);}
.cbpp-delivery-note.warn{background:#FBE7E9; color:var(--cbpp-raspberry-dark); border-color:var(--cbpp-raspberry);}
.cbpp-delivery-note .cbpp-icon{width:16px; height:16px; margin-top:1px; flex-shrink:0;}
.cbpp-delivery-note .cbpp-icon svg{width:100%; height:100%;}

.cbpp-guest-box{display:flex;align-items:center;gap:18px;margin-bottom:18px;}
.cbpp-stepper{display:flex;align-items:center;border:1.5px solid var(--cbpp-line);border-radius:12px;overflow:hidden;}
.cbpp-stepper button{width:44px;height:48px;background:#FFFDF9;font-size:19px;color:var(--cbpp-raspberry-dark);}
.cbpp-stepper input{width:70px;height:48px;border:none;border-left:1.5px solid var(--cbpp-line);border-right:1.5px solid var(--cbpp-line);text-align:center;font-size:17px;font-weight:600;color:var(--cbpp-choc);}
.cbpp-guest-hint{font-size:13px;color:var(--cbpp-choc-soft);}
.cbpp-quick-guest{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.cbpp-chip{padding:7px 14px;border-radius:20px;border:1.5px solid var(--cbpp-line);font-size:13px;background:#fff;cursor:pointer;color:var(--cbpp-choc-soft);font-weight:600;}
.cbpp-chip.selected,.cbpp-chip:hover{border-color:var(--cbpp-raspberry);color:var(--cbpp-raspberry-dark);}

.cbpp-reco-banner{display:flex;align-items:center;gap:12px;background:#FDF3E7;border:1.5px dashed var(--cbpp-butter);border-radius:14px;padding:14px 16px;margin-bottom:22px;font-size:13.5px;}
.cbpp-reco-banner b{color:var(--cbpp-raspberry-dark);}
.cbpp-reco-icon{width:22px; height:22px; color:var(--cbpp-raspberry-dark); flex-shrink:0;}
.cbpp-reco-icon svg{width:100%; height:100%;}

.cbpp-skip-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.cbpp-btn-ghost-skip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--cbpp-mint);color:#3E6E56;background:#F1F8F4;padding:9px 16px;border-radius:10px;font-size:13px;font-weight:700;}

.cbpp-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.cbpp-cake-grid{grid-template-columns:repeat(3,1fr);}
.cbpp-product-card{border:1.5px solid var(--cbpp-line);border-radius:16px;padding:14px;display:flex;flex-direction:column;background:#FFFDF9;position:relative;}
.cbpp-product-card.in-cart{border-color:var(--cbpp-mint);background:#F6FBF8;}
.cbpp-product-thumb{height:100px;border-radius:12px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;background:#F1F1E8;overflow:hidden;}
.cbpp-product-thumb img{width:100%;height:100%;object-fit:cover;border-radius:12px;}
/* Cake cards: portrait 3:4 image, smaller footprint than the wide food/serve cards */
.cbpp-product-thumb-portrait{aspect-ratio:3/4; height:auto;}
.cbpp-thumb-fallback{width:30px; height:30px; color:var(--cbpp-raspberry-dark);}
.cbpp-thumb-fallback svg{width:100%; height:100%;}
.cbpp-product-name{font-size:14px;font-weight:700;margin-bottom:3px;}
.cbpp-product-meta{font-size:12px;color:var(--cbpp-choc-soft);margin-bottom:6px;}
.cbpp-serves-note{display:inline-flex; align-items:center; gap:5px; font-size:11.5px;font-weight:600;color:#3E6E56;background:#F1F8F4;padding:4px 9px;border-radius:8px;margin-bottom:10px;}
.cbpp-serves-note .cbpp-icon{width:13px; height:13px;}
.cbpp-serves-note .cbpp-icon svg{width:100%; height:100%;}
.cbpp-product-price{font-size:16px;font-weight:600;margin-bottom:10px;}
.cbpp-product-price .unit{font-size:11px;font-weight:400;color:var(--cbpp-choc-soft);}
.cbpp-add-btn{margin-top:auto;border-radius:10px;padding:10px;font-size:13px;font-weight:700;background:var(--cbpp-raspberry);color:#fff;gap:6px; width:100%;}
.cbpp-add-btn.added{background:var(--cbpp-mint);}
.cbpp-add-btn .cbpp-icon{width:13px; height:13px;}
.cbpp-add-btn .cbpp-icon svg{width:100%; height:100%;}
.cbpp-badge-corner{position:absolute;top:10px;right:10px;background:var(--cbpp-butter);color:#3D2B1F;font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;}
.cbpp-loading,.cbpp-empty-note{font-size:13px;color:var(--cbpp-choc-soft);padding:20px 0;}

/* Quantity counter (food/serve/decor cards) & weight stepper (cake cards) */
.cbpp-qty-counter, .cbpp-cake-weight-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px;}
.cbpp-serve-qty-label{font-size:11px;color:var(--cbpp-choc-soft);}
.cbpp-mini-stepper{display:flex;align-items:center;border:1.5px solid var(--cbpp-line);border-radius:9px;overflow:hidden;}
.cbpp-mini-stepper button{width:26px;height:28px;background:#FFFDF9;font-size:14px;color:var(--cbpp-raspberry-dark);}
.cbpp-mini-stepper span{min-width:44px;text-align:center;font-size:12.5px;font-weight:700;padding:0 4px;}

/* Egg / eggless switch */
.cbpp-egg-switch{display:flex;align-items:center;gap:8px;margin-bottom:10px;cursor:pointer;user-select:none;}
.cbpp-egg-switch input{position:absolute;opacity:0;width:0;height:0;}
.cbpp-egg-track{width:34px;height:19px;border-radius:20px;background:var(--cbpp-line-strong);position:relative;transition:background .2s;flex-shrink:0;}
.cbpp-egg-thumb{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,0.2);}
.cbpp-egg-toggle:checked + .cbpp-egg-track{background:var(--cbpp-mint);}
.cbpp-egg-toggle:checked + .cbpp-egg-track .cbpp-egg-thumb{transform:translateX(15px);}
.cbpp-egg-label{font-size:12px;font-weight:600;color:var(--cbpp-choc-soft);}

/* Pagination */
.cbpp-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;}
.cbpp-pager-btn{border:1.5px solid var(--cbpp-line);background:#fff;padding:8px 16px;border-radius:9px;font-size:13px;font-weight:600;color:var(--cbpp-choc-soft);}
.cbpp-pager-btn:disabled{opacity:0.35;cursor:default;}
.cbpp-pager-btn:not(:disabled):hover{border-color:var(--cbpp-raspberry);color:var(--cbpp-raspberry-dark);}
.cbpp-pager-info{font-size:12.5px;color:var(--cbpp-choc-soft);font-weight:600;}
.cbpp-pager-compact{gap:8px;margin-top:12px;justify-content:flex-end;}
.cbpp-pager-arrow{width:30px;height:30px;padding:0;border-radius:50%;}
.cbpp-pager-arrow .cbpp-icon{width:14px;height:14px;}
.cbpp-pager-arrow .cbpp-icon svg{width:100%;height:100%;}

.cbpp-accordion{border:1.5px solid var(--cbpp-line);border-radius:14px;margin-bottom:12px;overflow:hidden;}
.cbpp-accordion-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;cursor:pointer;background:#FFFDF9;}
.cbpp-accordion-head-left{display:flex;align-items:center;gap:10px;}
.cbpp-accordion-emoji{width:32px;height:32px;border-radius:50%;background:#FBEFE0;color:var(--cbpp-raspberry-dark);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.cbpp-accordion-emoji svg{width:17px;height:17px;}
.cbpp-accordion-title{font-weight:600;font-size:15px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.cbpp-accordion-caption{font-size:11.5px; font-weight:500; color:var(--cbpp-choc-soft); font-style:italic;}
.cbpp-accordion-count{font-size:11px;font-weight:700;background:var(--cbpp-mint);color:#fff;padding:2px 9px;border-radius:20px;}
.cbpp-accordion-chevron{font-size:13px;color:var(--cbpp-choc-soft);transition:transform .2s;}
.cbpp-accordion.open .cbpp-accordion-chevron{transform:rotate(180deg);}
.cbpp-accordion-body{padding:0 18px 18px;display:none;}
.cbpp-accordion.open .cbpp-accordion-body{display:block;}

.cbpp-nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid var(--cbpp-line);}
.cbpp-btn-primary{background:var(--cbpp-choc);color:#fff;padding:13px 26px;border-radius:12px;font-size:14px;font-weight:700;}
.cbpp-btn-secondary{background:transparent;color:var(--cbpp-choc-soft);border:1.5px solid var(--cbpp-line);padding:12px 22px;border-radius:12px;font-size:14px;font-weight:600;}

.cbpp-cart-panel{background:var(--cbpp-card);border-radius:20px;box-shadow:var(--cbpp-shadow);padding:22px;position:sticky;top:20px;display:flex;flex-direction:column;max-height:calc(100vh - 40px);}
.cbpp-cart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.cbpp-cart-head h3{font-size:16px;}
.cbpp-cart-count{background:var(--cbpp-raspberry);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;}
.cbpp-cart-sub{font-size:12px;color:var(--cbpp-choc-soft);margin-bottom:14px;}
.cbpp-cart-items{overflow-y:auto;flex:1;margin:4px -6px;padding:0 6px;min-height:60px;}
.cbpp-cart-section{margin-bottom:14px;}
.cbpp-cart-section-head{display:flex;align-items:center;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;color:var(--cbpp-choc-soft);padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--cbpp-line);}
.cbpp-cart-section-empty{font-size:12px;color:#B5A688;font-style:italic;padding:2px 0 4px;}
.cbpp-cart-item{display:flex;gap:10px;padding:8px 0;align-items:center;}
.cbpp-ci-thumb{width:34px;height:34px;border-radius:9px;background:#FBEFE0;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;color:var(--cbpp-raspberry-dark);}
.cbpp-ci-thumb img{width:100%;height:100%;object-fit:cover;}
.cbpp-ci-thumb .cbpp-icon{width:16px;height:16px;}
.cbpp-ci-thumb .cbpp-icon svg{width:100%;height:100%;}
.cbpp-ci-info{flex:1;min-width:0;}
.cbpp-ci-name{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cbpp-ci-cat{font-size:10.5px;color:var(--cbpp-choc-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cbpp-ci-qty{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.cbpp-ci-qty button{width:20px;height:20px;border-radius:6px;border:1px solid var(--cbpp-line);background:#fff;font-size:12px;}
.cbpp-ci-price{font-size:12.5px;font-weight:700;width:56px;text-align:right;flex-shrink:0;}

.cbpp-milestone-wrap{margin:6px 0 16px;padding:14px;background:#FDF3E7;border-radius:14px;border:1.5px dashed var(--cbpp-butter);}
.cbpp-milestone-msg{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--cbpp-raspberry-dark);margin-bottom:10px;line-height:1.4;}
.cbpp-milestone-msg .cbpp-icon{width:15px;height:15px;flex-shrink:0;}
.cbpp-milestone-msg .cbpp-icon svg{width:100%;height:100%;}
.cbpp-milestone-track{position:relative;height:10px;background:#F2E3C8;border-radius:20px;}
.cbpp-milestone-fill{position:absolute;top:0;left:0;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--cbpp-butter),var(--cbpp-raspberry));transition:width .4s ease;}

.cbpp-cart-foot{border-top:1.5px solid var(--cbpp-line);padding-top:14px;margin-top:10px;}
.cbpp-cart-row{display:flex;justify-content:space-between;font-size:13px;color:var(--cbpp-choc-soft);margin-bottom:6px;}
.cbpp-cart-row.cbpp-discount{color:var(--cbpp-mint);font-weight:700;}
.cbpp-cart-row.cbpp-total{color:var(--cbpp-choc);font-weight:700;font-size:16px;margin-top:8px;}
.cbpp-checkout-btn{width:100%;margin-top:14px;background:var(--cbpp-raspberry);color:#fff;padding:14px;border-radius:12px;font-size:14.5px;font-weight:700;}
.cbpp-checkout-btn:disabled{background:#E9DFCF;color:#B5A688;cursor:not-allowed;}

.cbpp-inline-icon{width:0.8em; height:0.8em; color:var(--cbpp-butter); vertical-align:0.05em; display:inline-flex;}
.cbpp-inline-icon svg{width:100%; height:100%;}

.sc-icon{width:15px; height:15px; margin-right:6px; color:var(--cbpp-raspberry-dark); vertical-align:-2px;}
.sc-icon svg{width:100%; height:100%;}

.cbpp-sync-badge{position:fixed;top:18px;right:20px;background:#2E4A3A;color:#fff;font-size:12px;font-weight:700;padding:8px 14px;border-radius:20px;opacity:0;transform:translateY(-8px);transition:all .3s ease;z-index:60;box-shadow:var(--cbpp-shadow);display:flex;align-items:center;gap:6px;}
.cbpp-sync-badge.show{opacity:1;transform:translateY(0);}
.cbpp-sync-badge .cbpp-icon{width:14px;height:14px;}
.cbpp-sync-badge .cbpp-icon svg{width:100%;height:100%;}

.cbpp-icon{display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.cbpp-icon svg{width:1em; height:1em; display:block;}

@media (max-width:900px){
  .cbpp-layout{grid-template-columns:1fr;}
  .cbpp-cart-panel{position:relative;top:0;max-height:none;}
  .cbpp-product-grid{grid-template-columns:repeat(2,1fr);}
  .cbpp-cake-grid{grid-template-columns:repeat(2,1fr);}
  .cbpp-field-grid{grid-template-columns:1fr;}
  .cbpp-flag-label{display:none;}
}