.ccform-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: var(--cc-bg, #f8f9fa);
  color: var(--cc-text, #2b2b2b);
  font-family: var(--cc-ff, sans-serif);
  font-size: var(--cc-fs, 16px);
  padding: 28px;
  border-radius: var(--cc-radius, 12px);
  box-sizing: border-box;
}
.ccform-wrap * { box-sizing: border-box; }

.ccform-header { text-align: left; margin-bottom: 24px; }
.ccform-title {
  color: var(--cc-heading, #1a1a1a);
  font-size: var(--cc-hs, 28px);
  margin: 0 0 8px;
  line-height: 1.2;
  font-weight: 700;
}
.ccform-subtitle { margin: 0 0 6px; opacity: .8; }
.ccform-intro { margin: 0; opacity: .7; font-size: .95em; }

/* Progress */
.ccform-progress { margin-bottom: 24px; }
.ccform-progress-track {
  height: 8px; background: rgba(0,0,0,.08); border-radius: 999px; overflow: hidden;
}
.ccform-progress-fill {
  height: 100%; background: var(--cc-primary, #d6336c);
  transition: width .4s ease; border-radius: 999px;
}
.ccform-progress-pct { font-size: .85em; opacity: .7; }
.ccform-steps-list {
  list-style: none; display: flex; gap: 4px; padding: 0; margin: 0;
  justify-content: space-between; flex-wrap: wrap;
}
.ccform-step-dot { display: flex; align-items: center; gap: 8px; flex: 1; opacity: .45; transition: opacity .3s; }
.ccform-step-dot.active { opacity: 1; }
.ccform-dot-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--cc-primary, #d6336c); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px;
  flex-shrink: 0;
}
.ccform-dot-label { font-size: .85em; }

/* Steps */
.ccform-step { display: none; animation: ccfade .35s ease; }
.ccform-step-active { display: block; }
@keyframes ccfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ccform-step-head { margin-bottom: 18px; }
.ccform-step-title { color: var(--cc-heading); font-size: 1.25em; margin: 0 0 4px; }
.ccform-step-sub { margin: 0; opacity: .7; font-size: .9em; }

/* Fields grid */
.ccform-fields { display: grid; grid-template-columns: 1fr; gap: 18px; }
.ccform-cols-2 .ccform-fields, .ccform-fields.ccform-cols-2 { grid-template-columns: 1fr 1fr; }
.ccform-cols-3 .ccform-fields, .ccform-fields.ccform-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.ccform-width-half { grid-column: span 1; }
.ccform-width-full { grid-column: 1 / -1; }
.ccform-width-third { grid-column: span 1; }

.ccform-field { text-align: left; }
.ccform-label { display: block; font-weight: 600; margin-bottom: 6px; font-size: var(--cc-ls, 15px); color: var(--cc-heading); }
.ccform-req { color: var(--cc-primary); }
.ccform-desc { font-size: .85em; opacity: .7; margin-bottom: 6px; }
.ccform-help { font-size: .8em; opacity: .6; margin-top: 5px; }
.ccform-error { color: #e03131; font-size: .8em; margin-top: 5px; min-height: 1em; }
.ccform-has-error .ccform-input { border-color: #e03131; }

/* Inputs */
.ccform-input, .ccform-select, textarea.ccform-input {
  width: 100%; height: var(--cc-ih, 48px);
  padding: 10px 14px;
  background: var(--cc-input-bg, #fff);
  border: 1.5px solid var(--cc-input-border, #dee2e6);
  border-radius: calc(var(--cc-radius, 12px) * .6);
  font-size: 1em; font-family: inherit; color: var(--cc-text);
  transition: border-color .2s, box-shadow .2s;
}
textarea.ccform-input { height: auto; min-height: 100px; resize: vertical; }
.ccform-input:focus, .ccform-select:focus {
  outline: none; border-color: var(--cc-input-focus, var(--cc-primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-primary) 18%, transparent);
}
.ccform-range { display: flex; align-items: center; gap: 10px; }
.ccform-slider-val { font-weight: 700; color: var(--cc-primary); }

/* Radios / buttons */
.ccform-buttons, .ccform-radios, .ccform-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.ccform-btn-option, .ccform-check-option {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1.5px solid var(--cc-input-border);
  border-radius: 999px; cursor: pointer; transition: all .2s; background: var(--cc-card, #fff);
}
.ccform-btn-option input, .ccform-check-option input, .ccform-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.ccform-btn-option.selected, .ccform-btn-option:has(input:checked) {
  border-color: var(--cc-primary); background: var(--cc-primary); color: var(--cc-btn-text, #fff);
}
.ccform-check-option:has(input:checked) { border-color: var(--cc-primary); background: color-mix(in srgb, var(--cc-primary) 10%, #fff); }

/* Cards */
.ccform-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.ccform-card { position: relative; cursor: pointer; }
.ccform-card-inner {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 18px 12px; border: 2px solid var(--cc-input-border);
  border-radius: var(--cc-radius, 12px); background: var(--cc-card, #fff);
  transition: all .2s; height: 100%;
}
.ccform-card:has(input:checked) .ccform-card-inner, .ccform-card.selected .ccform-card-inner {
  border-color: var(--cc-primary); box-shadow: 0 6px 18px color-mix(in srgb, var(--cc-primary) 22%, transparent);
  transform: translateY(-2px);
}
.ccform-card-icon { font-size: 1.8em; }
.ccform-card-label { font-weight: 600; }
.ccform-card-desc { font-size: .78em; opacity: .65; }
.ccform-cards-image .ccform-card img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; }
.ccform-consent { display: flex; gap: 10px; align-items: flex-start; }

/* Nav / buttons */
.ccform-nav { display: flex; gap: 12px; margin-top: 28px; align-items: center; }
.ccform-btn {
  border: none; cursor: pointer; font-weight: 600; font-family: inherit;
  padding: 14px 28px; border-radius: 999px; font-size: 1em;
  background: var(--cc-primary, #d6336c); color: var(--cc-btn-text, #fff);
  transition: transform .15s, box-shadow .2s, opacity .2s;
}
.ccform-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--cc-primary) 35%, transparent); }
.ccform-btn:disabled { opacity: .6; cursor: not-allowed; }
.ccform-back { background: transparent; color: var(--cc-text); border: 1.5px solid var(--cc-input-border); }
.ccform-back:hover { box-shadow: none; }
.ccform-submit, .ccform-next { margin-left: auto; }
.ccform-whatsapp-btn { background: #25d366; color: #fff; text-decoration: none; display: inline-block; margin-top: 14px; }

.ccform-footer { text-align: center; margin-top: 24px; font-size: .8em; opacity: .55; }

/* Messages */
.ccform-message { margin-top: 16px; padding: 12px 16px; border-radius: 8px; }
.ccform-error-msg { background: #fff0f0; color: #c92a2a; border: 1px solid #ffc9c9; }

/* Success */
.ccform-success { text-align: center; padding: 30px 20px; animation: ccfade .4s ease; }
.ccform-success-icon {
  width: 64px; height: 64px; border-radius: 50%; background: #37b24d; color: #fff;
  font-size: 34px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.ccform-success-text { font-size: 1.1em; }

/* Recommendations */
.ccform-rec-head { font-size: 1.15em; font-weight: 700; margin: 20px 0 8px; color: var(--cc-heading); }
.ccform-rec-note { background: #fff9db; border: 1px solid #ffe066; padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-size: .9em; }
.ccform-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.ccform-rec-card { background: var(--cc-card, #fff); border-radius: var(--cc-radius); overflow: hidden; box-shadow: var(--cc-shadow); transition: transform .2s; }
.ccform-rec-card:hover { transform: translateY(-4px); }
.ccform-rec-img { height: 130px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 2.5em; background-color: #f1f3f5; }
.ccform-rec-body { padding: 14px; }
.ccform-rec-body h4 { margin: 0 0 6px; color: var(--cc-heading); }
.ccform-badge { background: var(--cc-accent, #ffd43b); color: #333; font-size: .7em; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.ccform-rec-desc { font-size: .82em; opacity: .7; margin: 6px 0; }
.ccform-rec-price { font-weight: 700; font-size: 1.1em; color: var(--cc-primary); }
.ccform-rec-serves { font-size: .8em; opacity: .6; }

/* Cake selection (recommendation cards field) */
.ccform-cake-select { margin-top: 6px; }
.ccform-find-cake { width: 100%; justify-content: center; }
.ccform-cake-results:empty { margin: 0; }
.ccform-cake-results .ccform-rec-grid { margin-top: 16px; }
.ccform-cake-results .ccform-rec-card { position: relative; border: 2px solid transparent; }
.ccform-cake-results .ccform-rec-card.selected { border-color: var(--cc-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-primary) 20%, transparent); }
.ccform-rec-selected-mark {
  position: absolute; top: 10px; right: 10px; background: var(--cc-primary); color: #fff;
  font-size: .72em; font-weight: 700; padding: 3px 9px; border-radius: 999px; z-index: 2; letter-spacing: .03em;
}
.ccform-choose-cake { width: 100%; justify-content: center; margin-top: 10px; padding: 9px 14px; font-size: .88em; }
.ccform-rec-card.selected .ccform-choose-cake { background: var(--cc-secondary, var(--cc-primary)); }
.ccform-rec-empty { opacity: .7; font-size: .9em; padding: 10px 0; }
.ccform-rec-custom-note {
  margin-top: 16px; font-size: .85em; opacity: .8; background: #f8f4ff; border: 1px solid #e5d9fb;
  padding: 12px 16px; border-radius: 10px; line-height: 1.5;
}

/* Promo Code / Referral ID */
.ccform-code-field { display: flex; gap: 8px; }
.ccform-code-field input { flex: 1 1 auto; }
.ccform-btn-secondary {
  background: var(--cc-card, #fff); color: var(--cc-primary); border: 1px solid var(--cc-primary);
  box-shadow: none; flex: 0 0 auto;
}
.ccform-btn-secondary:hover { transform: none; box-shadow: none; opacity: .85; }
.ccform-code-message { font-size: .82em; margin-top: 6px; min-height: 1.2em; }
.ccform-code-message.ccform-code-valid { color: #2f9e44; }
.ccform-code-message.ccform-code-invalid { color: #e03131; }

/* Booking / creator */
.ccform-booking-card, .ccform-creator-ref { background: var(--cc-card, #fff); padding: 20px; border-radius: var(--cc-radius); box-shadow: var(--cc-shadow); margin-top: 18px; }
.ccform-brow { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f1f3f5; }
.ccform-brow:last-child { border-bottom: none; }
.ccform-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; margin-top: 18px; }
.ccform-stat { background: var(--cc-card, #fff); padding: 18px; border-radius: var(--cc-radius); text-align: center; box-shadow: var(--cc-shadow); }
.ccform-stat-val { display: block; font-size: 1.6em; font-weight: 800; color: var(--cc-primary); }
.ccform-stat-label { font-size: .8em; opacity: .65; }
.ccform-logout { font-size: .85em; color: var(--cc-primary); }
.ccform-notice { padding: 16px; background: #fff3bf; border-radius: 8px; text-align: center; }
.ccform-signature { border: 1.5px dashed var(--cc-input-border); border-radius: 8px; touch-action: none; background: #fff; }

/* Mobile */
@media (max-width: 640px) {
  .ccform-wrap { padding: 18px; }
  .ccform-fields, .ccform-cols-2 .ccform-fields, .ccform-cols-3 .ccform-fields { grid-template-columns: 1fr; }
  .ccform-title { font-size: 22px; }
  .ccform-dot-label { display: none; }
  .ccform-nav { flex-wrap: wrap; }
}