/* ═══════════════════════════════════════════════════════════
   CleanCo Booking — Frontend Styles
   Orange: #F57C00 (primary)  #E65100 (dark)  #FFF3E0 (light)
   ═══════════════════════════════════════════════════════════ */

.ccb-root {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  width:100% !important; max-width:1280px !important;
  margin:0 auto !important; box-sizing:border-box !important; color:#212121 !important;
}
.ccb-root *, .ccb-root *::before, .ccb-root *::after { box-sizing:border-box !important; }

/* ── LAYOUT ── */
.ccb-layout {
  display:grid !important; grid-template-columns:1fr 360px !important;
  border:1px solid #EEEEEE !important; border-radius:12px !important;
  overflow:visible !important; box-shadow:0 4px 24px rgba(0,0,0,.08) !important;
  background:#fff !important; align-items:start !important;
}
.ccb-form {
  background:#fff !important; padding:40px 48px !important;
  border-right:1px solid #EEEEEE !important; border-radius:12px 0 0 12px !important; min-width:0 !important;
}

/* ── STEPS VISIBILITY ── */
.ccb-pre  { display:none !important; }
.ccb-pre.ccb-on  { display:block !important; animation:ccbSlide .3s ease !important; }
.ccb-main { display:none !important; }
.ccb-main.ccb-on { display:block !important; animation:ccbSlide .3s ease !important; }
.ccb-done { display:none !important; }
.ccb-done.ccb-on { display:block !important; animation:ccbSlide .4s ease !important; }
@keyframes ccbSlide { from{opacity:0;transform:translateX(10px)} to{opacity:1;transform:translateX(0)} }

/* ── TYPOGRAPHY ── */
.ccb-pnum  { font-size:.72rem !important; color:#9E9E9E !important; font-weight:500 !important; text-align:right !important; margin-bottom:20px !important; display:block !important; }
.ccb-title { font-size:1.4rem !important; font-weight:700 !important; color:#212121 !important; margin-bottom:8px !important; line-height:1.3 !important; display:block !important; }
.ccb-note  { font-size:.875rem !important; color:#424242 !important; margin-bottom:24px !important; line-height:1.6 !important; display:block !important; }
.ccb-fg    { margin-bottom:18px !important; display:block !important; }
.ccb-lbl   { font-size:.8rem !important; font-weight:600 !important; color:#424242 !important; margin-bottom:6px !important; display:flex !important; align-items:center !important; gap:4px !important; }
.ccb-req   { color:#D32F2F !important; }
.ccb-hint  { font-size:.76rem !important; color:#9E9E9E !important; margin-top:5px !important; font-style:italic !important; display:block !important; }
.ccb-hint a { color:#F57C00 !important; }
.ccb-r2    { display:grid !important; grid-template-columns:1fr 1fr !important; gap:14px !important; }

/* ── VALIDATION ERROR ── */
.ccb-err {
  display:none !important; background:#FFEBEE !important; border:1px solid #EF9A9A !important;
  border-radius:6px !important; padding:10px 14px !important; font-size:.82rem !important;
  color:#C62828 !important; margin-bottom:14px !important; font-weight:500 !important;
  align-items:center !important; gap:7px !important;
}
.ccb-err.ccb-on { display:flex !important; animation:ccbShake .3s ease !important; }
@keyframes ccbShake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}   60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}
.ccb-input-err { border-color:#EF5350 !important; box-shadow:0 0 0 3px rgba(239,83,80,.15) !important; }

/* ── FIELDS ── */
.ccb-root input[type="text"],
.ccb-root input[type="email"],
.ccb-root input[type="tel"],
.ccb-root input[type="date"],
.ccb-root select,
.ccb-root textarea {
  width:100% !important; padding:11px 14px !important; border:1.5px solid #D9D9D9 !important;
  border-radius:6px !important; font-family:'Inter',-apple-system,sans-serif !important;
  font-size:.9rem !important; color:#212121 !important; background:#ffffff !important;
  -webkit-text-fill-color:#212121 !important; transition:border-color .2s,box-shadow .2s !important;
  appearance:none !important; -webkit-appearance:none !important; outline:none !important;
  line-height:1.4 !important; opacity:1 !important;
}
.ccb-root input:focus, .ccb-root select:focus, .ccb-root textarea:focus {
  border-color:#F57C00 !important; box-shadow:0 0 0 3px rgba(245,124,0,.18) !important;
}
.ccb-root input::placeholder, .ccb-root textarea::placeholder { color:#BDBDBD !important; }
.ccb-root select {
  cursor:pointer !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23757575' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 14px center !important; padding-right:36px !important;
}
.ccb-root textarea { resize:vertical !important; min-height:80px !important; }

/* ── SERVICE DESC ── */
.ccb-sdesc {
  background:#FFF3E0 !important; border:1px solid #FFCC80 !important; border-radius:8px !important;
  padding:14px 16px !important; margin-top:10px !important; font-size:.875rem !important;
  line-height:1.6 !important; color:#424242 !important; display:none !important;
}

/* ── SECTION HEADERS ── */
.ccb-sh { margin:28px 0 16px !important; display:block !important; }
.ccb-sh h3 { font-size:1rem !important; font-weight:700 !important; color:#212121 !important; margin:0 !important; }
.ccb-sh p  { font-size:.8rem !important; color:#9E9E9E !important; margin-top:3px !important; }
.ccb-sh a  { color:#F57C00 !important; }

/* ── FREQ TABS ── */
.ccb-freqs { display:flex !important; gap:8px !important; flex-wrap:wrap !important; margin-top:8px !important; }
.ccb-ftab {
  display:inline-block !important; padding:9px 18px !important; border:2px solid #BDBDBD !important;
  border-radius:6px !important; background:#F5F5F5 !important; font-size:.82rem !important;
  font-weight:600 !important; cursor:pointer !important; color:#424242 !important; line-height:1 !important;
}
.ccb-ftab:hover { border-color:#F57C00 !important; background:#FFF3E0 !important; color:#E65100 !important; }
.ccb-ftab.ccb-sel, .ccb-ftab.ccb-sel:hover {
  background:#F57C00 !important; color:#ffffff !important; border-color:#E65100 !important;
  box-shadow:0 2px 8px rgba(245,124,0,.35) !important;
}

/* ── EXTRAS ── */
.ccb-extras { display:grid !important; grid-template-columns:repeat(5,1fr) !important; gap:10px !important; margin-top:10px !important; }
.ccb-extra {
  border:1.5px solid #D9D9D9 !important; border-radius:8px !important; padding:12px 8px !important;
  text-align:center !important; cursor:pointer !important; background:#fff !important; position:relative !important;
}
.ccb-extra:hover { border-color:#F57C00 !important; }
.ccb-extra.ccb-sel { border-color:#F57C00 !important; background:#FFF3E0 !important; }
.ccb-eico  { font-size:1.5rem !important; margin-bottom:5px !important; display:block !important; }
.ccb-ename { font-size:.7rem !important; font-weight:500 !important; color:#424242 !important; line-height:1.3 !important; display:block !important; }
.ccb-epx   { font-size:.65rem !important; color:#F57C00 !important; font-weight:600 !important; margin-top:2px !important; display:block !important; }
.ccb-echk  {
  position:absolute !important; top:5px !important; right:5px !important;
  width:16px !important; height:16px !important; background:#F57C00 !important;
  border-radius:50% !important; display:none !important; align-items:center !important;
  justify-content:center !important; font-size:.55rem !important; color:#fff !important;
}
.ccb-extra.ccb-sel .ccb-echk { display:flex !important; }

/* ── TIPS ── */
.ccb-tips { display:flex !important; gap:8px !important; margin-top:8px !important; flex-wrap:wrap !important; }
.ccb-tip {
  display:inline-block !important; padding:8px 16px !important; border:1.5px solid #D9D9D9 !important;
  border-radius:6px !important; background:#ffffff !important; font-size:.82rem !important;
  font-weight:600 !important; cursor:pointer !important; color:#424242 !important; line-height:1 !important;
}
.ccb-tip:hover { border-color:#F57C00 !important; }
.ccb-tip.ccb-sel { background:#F57C00 !important; color:#ffffff !important; border-color:#E65100 !important; }

/* ── COUPON TABS ── */
.ccb-ctabs { display:flex !important; margin-bottom:10px !important; }
.ccb-ctab {
  display:inline-block !important; padding:8px 18px !important; border:1.5px solid #D9D9D9 !important;
  background:#fff !important; font-size:.82rem !important; font-weight:500 !important; cursor:pointer !important;
  color:#424242 !important; line-height:1 !important;
}
.ccb-ctab:first-child { border-radius:6px 0 0 6px !important; border-right:none !important; }
.ccb-ctab:last-child  { border-radius:0 6px 6px 0 !important; }
.ccb-ctab.ccb-on { background:#F57C00 !important; color:#ffffff !important; border-color:#E65100 !important; }
.ccb-crow { display:flex !important; gap:8px !important; }
.ccb-crow input { flex:1 !important; }
.ccb-apply {
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  padding:11px 22px !important; background:#F57C00 !important; color:#ffffff !important;
  border:none !important; border-radius:6px !important; font-size:.875rem !important;
  font-weight:600 !important; cursor:pointer !important;
}
.ccb-apply:hover { background:#E65100 !important; }

/* ── PAYMENT METHODS ── */
.ccb-pmethods { display:flex !important; gap:10px !important; margin-bottom:18px !important; }
.ccb-pm {
  flex:1 !important; padding:12px !important; border:1.5px solid #D9D9D9 !important;
  border-radius:8px !important; cursor:pointer !important; text-align:center !important;
}
.ccb-pm:hover { border-color:#F57C00 !important; }
.ccb-pm.ccb-sel.ccb-card { border-color:#635BFF !important; background:rgba(99,91,255,.04) !important; }
.ccb-pmico { font-size:1.2rem !important; margin-bottom:3px !important; display:block !important; }
.ccb-pmlb  { font-size:.75rem !important; font-weight:600 !important; color:#424242 !important; display:block !important; }
.ccb-pmsb  { font-size:.65rem !important; font-weight:600 !important; margin-top:2px !important; display:block !important; }

/* ── DEMO BADGE ── */
.ccb-demo {
  display:inline-flex !important; align-items:center !important; gap:5px !important;
  background:#FFF9C4 !important; border:1px solid #F9A825 !important; border-radius:20px !important;
  padding:4px 12px !important; font-size:.72rem !important; font-weight:600 !important;
  color:#F57F17 !important; margin-bottom:14px !important;
}

.ccb-spanel { display:none !important; }
.ccb-spanel.ccb-on { display:block !important; }

/* ── BOOK BUTTON ── */
.ccb-bookbtn {
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:100% !important; padding:16px !important; background:#F57C00 !important;
  color:#ffffff !important; border:none !important; border-radius:8px !important;
  font-size:1rem !important; font-weight:700 !important; cursor:pointer !important;
  margin-top:18px !important; gap:8px !important;
}
.ccb-bookbtn:hover { background:#E65100 !important; box-shadow:0 6px 22px rgba(245,124,0,.35) !important; }
.ccb-bookbtn:disabled { opacity:.6 !important; cursor:not-allowed !important; }

/* ── NEXT / BACK ── */
.ccb-next {
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  padding:12px 28px !important; background:#F57C00 !important; color:#ffffff !important;
  border:none !important; border-radius:6px !important; font-size:.9rem !important;
  font-weight:600 !important; cursor:pointer !important;
}
.ccb-next:hover { background:#E65100 !important; }
.ccb-back {
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  padding:12px 22px !important; background:#ffffff !important; color:#424242 !important;
  border:1.5px solid #D9D9D9 !important; border-radius:6px !important;
  font-size:.9rem !important; font-weight:500 !important; cursor:pointer !important;
}
.ccb-back:hover { border-color:#F57C00 !important; color:#F57C00 !important; }

.ccb-btnrow { display:flex !important; gap:12px !important; margin-top:32px !important; }

/* ── CUSTOM QUOTE ── */
.ccb-customq {
  display:none; background:#FFF3E0 !important; border:1px solid #FFCC80 !important;
  border-radius:8px !important; padding:14px 16px !important; margin-top:10px !important;
  font-size:.875rem !important; line-height:1.6 !important; color:#E65100 !important; font-weight:500 !important;
}

/* ── AGREE ── */
.ccb-agree {
  display:flex !important; align-items:flex-start !important; gap:10px !important;
  margin-bottom:18px !important; font-size:.8rem !important; color:#757575 !important; line-height:1.5 !important;
}
.ccb-agree input[type="checkbox"] { width:16px !important; height:16px !important; accent-color:#F57C00 !important; flex-shrink:0 !important; }
.ccb-agree a { color:#F57C00 !important; }
.ccb-hold { font-size:.75rem !important; color:#9E9E9E !important; margin-top:6px !important; display:flex !important; gap:5px !important; line-height:1.5 !important; }

/* ── PROCESSING ── */
.ccb-proc { display:none !important; text-align:center !important; padding:40px 20px !important; }
.ccb-proc.ccb-on { display:block !important; }
.ccb-spin {
  width:44px !important; height:44px !important; border:3px solid #EEEEEE !important;
  border-top-color:#F57C00 !important; border-radius:50% !important;
  animation:ccbSpin .8s linear infinite !important; margin:0 auto 16px !important;
}
@keyframes ccbSpin { to{transform:rotate(360deg)} }

/* ── SECURE BADGES ── */
.ccb-secure { display:flex !important; align-items:center !important; justify-content:center !important; gap:12px !important; font-size:.72rem !important; color:#9E9E9E !important; margin-top:10px !important; }

/* ── SUCCESS ── */
.ccb-sico {
  width:72px !important; height:72px !important; background:#F57C00 !important; border-radius:50% !important;
  margin:0 auto 20px !important; display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:1.8rem !important; box-shadow:0 8px 24px rgba(245,124,0,.3) !important; color:#fff !important;
}
.ccb-stitle { font-size:1.6rem !important; font-weight:700 !important; color:#E65100 !important; margin-bottom:10px !important; display:block !important; }
.ccb-ssub   { font-size:.9rem !important; color:#757575 !important; line-height:1.7 !important; display:block !important; }
.ccb-smail  {
  display:flex !important; align-items:center !important; gap:10px !important;
  background:#FFF3E0 !important; border:1px solid #FFCC80 !important; border-radius:8px !important;
  padding:12px 16px !important; margin-top:18px !important; font-size:.82rem !important; color:#E65100 !important;
}

/* ── PHONE ROW ── */
.ccb-phonerow { display:flex !important; gap:8px !important; align-items:center !important; }
.ccb-phonerow select { width:88px !important; flex-shrink:0 !important; }
.ccb-phonerow input  { flex:1 !important; }

/* ══════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════ */
.ccb-sidebar {
  background:#FAFAFA !important; padding:28px 24px !important; border-radius:0 12px 12px 0 !important;
  position:sticky !important; top:20px !important; max-height:calc(100vh - 40px) !important;
  overflow-y:auto !important; align-self:start !important;
  scrollbar-width:thin !important; scrollbar-color:#FFCC80 transparent !important;
}
.ccb-sidebar::-webkit-scrollbar { width:4px !important; }
.ccb-sidebar::-webkit-scrollbar-thumb { background:#FFCC80 !important; border-radius:4px !important; }

.ccb-sbt { font-size:1rem !important; font-weight:700 !important; color:#212121 !important; margin-bottom:18px !important; display:flex !important; align-items:center !important; gap:8px !important; }
.ccb-sbt::before { content:'' !important; display:inline-block !important; width:4px !important; height:16px !important; background:#F57C00 !important; border-radius:2px !important; flex-shrink:0 !important; }

.ccb-sumblock {
  background:#fff !important; border:1px solid #EEEEEE !important; border-radius:10px !important;
  padding:16px !important; margin-bottom:14px !important; box-shadow:0 1px 3px rgba(0,0,0,.08) !important;
}
.ccb-sumrow { display:flex !important; justify-content:space-between !important; align-items:flex-start !important; padding:5px 0 !important; font-size:.82rem !important; border-bottom:1px solid #F5F5F5 !important; }
.ccb-sumrow:last-child { border:none !important; }
.ccb-sl { color:#9E9E9E !important; min-width:110px !important; font-size:.78rem !important; }
.ccb-sv { color:#212121 !important; font-weight:500 !important; text-align:right !important; font-size:.78rem !important; }

.ccb-prblock {
  background:#fff !important; border:1px solid #EEEEEE !important; border-radius:10px !important;
  padding:16px !important; box-shadow:0 1px 3px rgba(0,0,0,.08) !important;
}
.ccb-prrow { display:flex !important; justify-content:space-between !important; font-size:.85rem !important; padding:4px 0 !important; }
.ccb-prl { color:#757575 !important; }
.ccb-prv { font-weight:600 !important; color:#212121 !important; }
.ccb-prrow.addon .ccb-prv { color:#F57C00 !important; }
.ccb-prrow.disc  .ccb-prv { color:#2E7D32 !important; }
.ccb-prrow.ptotal { padding-top:10px !important; margin-top:6px !important; border-top:2px solid #EEEEEE !important; }
.ccb-prrow.ptotal .ccb-prl { font-weight:700 !important; font-size:.9rem !important; }
.ccb-prrow.ptotal .ccb-prv { font-size:1.3rem !important; font-weight:700 !important; color:#E65100 !important; transition:all .35s !important; }

.ccb-divider { border:none !important; border-top:1px solid #EEEEEE !important; margin:12px 0 !important; }

.ccb-badges { margin-top:20px !important; display:flex !important; flex-direction:column !important; gap:8px !important; }
.ccb-badge  { display:flex !important; align-items:center !important; gap:8px !important; font-size:.78rem !important; color:#9E9E9E !important; }

/* ── STRIPE CARD ELEMENT ── */
#ccbCardElement {
  padding:11px 14px !important; border:1.5px solid #D9D9D9 !important;
  border-radius:6px !important; background:#fff !important; min-height:44px !important;
  transition:border-color .2s !important;
}
#ccbCardElement.StripeElement--focus { border-color:#F57C00 !important; box-shadow:0 0 0 3px rgba(245,124,0,.18) !important; }
#ccbCardElement.StripeElement--invalid { border-color:#EF5350 !important; }

/* ── DISABLED SERVICE OPTIONS ── */
.ccb-root select option:disabled,
.ccb-root select option.ccb-opt-na {
  color:#BDBDBD !important;
  font-style:italic !important;
}

/* ── EST TIME ROW in sidebar ── */
#sbEstRow .ccb-sv {
  color:#F57C00 !important;
  font-weight:700 !important;
}

/* ── COUPON discount row (green) ── */
.ccb-prrow.disc .ccb-prv { color:#2E7D32 !important; }

/* ── RESPONSIVE ── */
@media (max-width:900px){
  .ccb-layout { grid-template-columns:1fr !important; }
  .ccb-form   { padding:24px 20px !important; border-right:none !important; border-radius:12px 12px 0 0 !important; border-bottom:1px solid #EEEEEE !important; }
  .ccb-sidebar { position:static !important; max-height:none !important; border-radius:0 0 12px 12px !important; }
  .ccb-extras { grid-template-columns:repeat(3,1fr) !important; }
  .ccb-r2     { grid-template-columns:1fr !important; }
}
@media (max-width:480px){
  .ccb-extras { grid-template-columns:repeat(2,1fr) !important; }
}