/* FreshCraversBakes - Custom Cake Form styles */
:root{
  --fcb-primary: #ea7b2c; /* primary orange similar to screenshots */
  --fcb-primary-dark: #d86b18;
  --fcb-muted: #f6f4f2;
  --fcb-border: #eee7e4;
  --fcb-text: #222;
  --fcb-muted-text: #7a7a7a;
}

/* Container card */
.cc-card {
  background: #fff;
  border-radius: 10px;
  padding: 22px;
  border: 1px solid var(--fcb-border);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* Progress */
.cc-progress-wrap { display:flex; gap:12px; margin-bottom:18px; align-items:center }
.cc-progress-seg { height:6px; flex:1; border-radius:6px; background: #eee; }
.cc-progress-seg.active { background: linear-gradient(90deg,var(--fcb-primary), var(--fcb-primary-dark)); box-shadow:0 1px 0 rgba(0,0,0,0.02) }

h3 { font-size:18px; margin:0 0 10px; color:var(--fcb-text) }
label { display:block; font-size:13px; margin-bottom:6px; color:var(--fcb-muted-text) }

.cc-select, .cc-input, .cc-textarea {
  width:100%;
  padding:10px 12px;
  border:1px solid #e6dfdb;
  border-radius:6px;
  background: #fff;
  font-size:14px;
  color:var(--fcb-text);
}

.cc-textarea { min-height:120px; resize:vertical }

.cc-btn { padding:10px 14px; border-radius:6px; cursor:pointer; font-weight:600; font-size:14px; border:none }
.cc-btn-primary { background:var(--fcb-primary); color:#fff }
.cc-btn-primary:hover { background:var(--fcb-primary-dark) }
.cc-btn-outline { background:#fff; border:1px solid #e6dfdb; color:var(--fcb-text) }

.cc-upload { text-align:center; border:2px dashed #efe6e2; padding:28px; border-radius:8px; background: #fff; color:var(--fcb-muted-text) }

.cc-muted { color:var(--fcb-muted-text); font-size:13px }

.cc-price-box { background: #fbfaf9; padding:14px; border-radius:8px; border:1px solid #efe6e2 }
.cc-price-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; color:var(--fcb-muted-text) }
.cc-price-total { display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:18px; color:var(--fcb-text) }

/* layout helpers */
.flex { display:flex }
.gap-3 { gap:12px }
.space-y-4 > * + * { margin-top:12px }
.mb-6 { margin-bottom:18px }

/* responsive */
@media (max-width: 900px){
  .cc-column { width:100% }
}