@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Jost:wght@300;400;500&display=swap');

/* Design tokens */
:root {
  --primary:      #c9a84c;
  --primary-dark: #b8943d;
  --primary-tint: rgba(201,168,76,.1);
  --primary-glow: rgba(201,168,76,.25);
  --black:        #1a1208;
  --cream:        #faf7f0;
  --sand:         #f0ebe0;
  --border:       rgba(26,18,8,.12);
  --muted:        rgba(26,18,8,.45);
  --radius:       10px;
}

/* Container */
#bellot-app { font-family:'Jost',sans-serif !important; color:var(--black) !important; width:100%; }
#bellot-app * { box-sizing:border-box !important; }

/* Card */
.b-card {
  background: var(--cream) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 8px rgba(26,18,8,.06), 0 8px 40px rgba(26,18,8,.1) !important;
  overflow: hidden !important;
}

/* Header */
.b-card-header {
  background: var(--primary) !important;
  padding: 0 28px 26px !important;
  text-align: center !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  position: relative !important;
  box-shadow: 0 4px 20px var(--primary-glow) !important;
}

/* Menu button inside header */
#bellot-menu-tab {
  display: none;
  justify-content: flex-end !important;
  padding: 12px 0 6px !important;
}
.b-menu-btn {
  background: rgba(0,0,0,.2) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
  border-radius: var(--radius) !important;
  padding: 6px 16px !important;
  font-family: 'Jost',sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  cursor: pointer !important;
  transition: background .2s !important;
  box-shadow: none !important;
}
.b-menu-btn:hover { background: rgba(0,0,0,.32) !important; }

.b-brand {
  font-family: 'Cormorant Garamond',serif !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  color: #fff !important;
  line-height: 1 !important;
  padding-top: 18px !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.18) !important;
}
.b-brand-sub {
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: .12em !important;
  color: rgba(255,255,255,.7) !important;
  margin-top: 8px !important;
  text-transform: uppercase !important;
}

/* Body */
.b-card-body { padding: 28px 32px 32px !important; overflow: visible !important; }

/* Steps */
.b-step        { display: none !important; }
.b-step.active { display: block !important; animation: bFade .3s ease !important; }
@keyframes bFade { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }

.b-step-title {
  font-family: 'Cormorant Garamond',serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  margin: 0 0 20px !important;
  color: var(--black) !important;
}
.b-back {
  background: none !important;
  border: none !important;
  color: var(--primary) !important;
  font-family: 'Jost',sans-serif !important;
  font-size: 13px !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  box-shadow: none !important;
  transition: opacity .2s !important;
}
.b-back:hover { opacity: .6 !important; }

/* Error banner */
.b-errors {
  background: #fff5f5 !important;
  border: 1.5px solid #fca5a5 !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  margin-bottom: 18px !important;
}
.b-error-item { font-size: 13px !important; color: #dc2626 !important; padding: 3px 0 !important; }

/* Fields - force override any theme styles */
.b-field { margin-bottom: 16px !important; position: relative !important; }
.b-field label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin-bottom: 6px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
#bellot-app .b-field input,
#bellot-app .b-field select,
#bellot-app .b-field textarea,
#bellot-app[id] .b-field input,
#bellot-app[id] .b-field select,
#bellot-app[id] .b-field textarea {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  font-family: 'Jost',sans-serif !important;
  font-size: 15px !important;
  color: #1a1208 !important;
  -webkit-text-fill-color: #1a1208 !important;
  opacity: 1 !important;
  transition: border-color .2s, box-shadow .2s !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  line-height: normal !important;
}
#bellot-app .b-field select,
#bellot-app[id] .b-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 34px !important;
  cursor: pointer !important;
}
#bellot-app .b-field input:focus,
#bellot-app .b-field select:focus,
#bellot-app .b-field textarea:focus,
#bellot-app[id] .b-field input:focus,
#bellot-app[id] .b-field select:focus,
#bellot-app[id] .b-field textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-tint) !important;
  outline: none !important;
}
#bellot-app .b-field input.b-error,
#bellot-app .b-field select.b-error,
#bellot-app .b-field textarea.b-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}
#bellot-app .b-field textarea { resize: vertical !important; min-height: 70px !important; }
#bellot-app .b-date-input { cursor: pointer !important; }

/* 2-col row */
.b-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }

/* Note */
.b-note {
  background: var(--primary-tint) !important;
  border-left: 3px solid var(--primary) !important;
  padding: 9px 13px !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  font-size: 13px !important;
  color: var(--black) !important;
  margin-bottom: 16px !important;
}

/* Calendar */
.b-calendar {
  background: #fff !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
  box-shadow: 0 4px 6px rgba(26,18,8,.04), 0 12px 32px rgba(26,18,8,.12) !important;
  width: 304px !important;
  z-index: 99999 !important;
}
.b-cal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}
.b-cal-title { font-weight: 600 !important; font-size: 14px !important; color: var(--black) !important; }
.b-cal-nav {
  background: none !important;
  border: none !important;
  font-size: 22px !important;
  cursor: pointer !important;
  color: var(--primary) !important;
  line-height: 1 !important;
  padding: 0 6px !important;
  box-shadow: none !important;
  transition: opacity .2s !important;
}
.b-cal-nav:hover { opacity: .7 !important; }
.b-cal-grid { display: grid !important; grid-template-columns: repeat(7,1fr) !important; gap: 3px !important; }
.b-cal-dow {
  text-align: center !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 4px 0 !important;
}
.b-cal-day {
  text-align: center !important;
  font-size: 13px !important;
  padding: 7px 2px !important;
  border-radius: 7px !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  color: var(--black) !important;
  font-family: 'Jost',sans-serif !important;
  transition: background .15s, color .15s !important;
  box-shadow: none !important;
  width: 100% !important;
}
.b-cal-day:hover    { background: var(--primary-tint) !important; }
.b-cal-day.selected { background: var(--primary) !important; color: #fff !important; font-weight: 600 !important; box-shadow: 0 2px 8px var(--primary-glow) !important; }
.b-cal-day.disabled { color: #ccc !important; cursor: default !important; background: none !important; }

/* Table select error state */
#b-table.b-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}

/* Time slots */
.b-slots { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.b-slot {
  padding: 9px 16px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: #fff !important;
  font-family: 'Jost',sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  color: var(--black) !important;
  box-shadow: none !important;
  transition: border-color .18s, background .18s, box-shadow .18s, transform .18s !important;
}
.b-slot:hover {
  border-color: var(--primary) !important;
  background: var(--primary-tint) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px var(--primary-glow) !important;
}
.b-slot.sel {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px var(--primary-glow) !important;
}
.b-no-slots { font-size: 14px !important; color: #aaa !important; }

/* Buttons */
.b-btn {
  width: 100% !important;
  padding: 14px !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-family: 'Jost',sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: .05em !important;
  cursor: pointer !important;
  margin-top: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .2s, transform .15s, box-shadow .2s !important;
}
.b-btn:disabled { opacity: .6 !important; cursor: default !important; transform: none !important; box-shadow: none !important; }

.b-btn-primary {
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px var(--primary-glow), 0 4px 20px var(--primary-tint) !important;
}
.b-btn-primary:hover {
  background: var(--primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px var(--primary-glow) !important;
}

.b-btn-wa {
  background: #25d366 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(37,211,102,.25) !important;
}
.b-btn-wa:hover {
  background: #1ebe59 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(37,211,102,.35) !important;
}

/* Loading */
.b-loading { text-align: center !important; padding: 14px !important; font-size: 13px !important; color: var(--muted) !important; }
.b-loading::after {
  content: '' !important;
  display: inline-block !important;
  width: 13px !important; height: 13px !important;
  border: 2px solid var(--primary-tint) !important;
  border-top-color: var(--primary) !important;
  border-radius: 50% !important;
  animation: bSpin .7s linear infinite !important;
  vertical-align: middle !important;
  margin-left: 8px !important;
}
@keyframes bSpin { to { transform: rotate(360deg); } }

/* Summary */
.b-summary { background: var(--sand) !important; border-radius: var(--radius) !important; padding: 16px 18px !important; margin-bottom: 18px !important; }
.b-sum-row { display: flex !important; justify-content: space-between !important; padding: 7px 0 !important; font-size: 14px !important; border-bottom: 1px solid rgba(26,18,8,.07) !important; }
.b-sum-row:last-child { border-bottom: none !important; }
.b-sum-lbl { color: var(--muted) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
.b-sum-val { font-weight: 500 !important; text-align: right !important; max-width: 60% !important; }
.b-wa-note { font-size: 13px !important; color: var(--muted) !important; text-align: center !important; margin-bottom: 12px !important; }

/* Success */
.b-success {
  text-align: center !important;
  padding: 40px 20px 32px !important;
}
.b-success-icon {
  width: 72px !important; height: 72px !important;
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 32px !important;
  margin: 0 auto 24px !important;
  box-shadow: 0 6px 24px var(--primary-glow) !important;
}
.b-success h3 {
  font-family: 'Cormorant Garamond',serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  margin: 0 0 16px !important;
  color: var(--black) !important;
}
.b-success .b-success-sub {
  font-size: 16px !important;
  color: var(--black) !important;
  margin: 0 0 8px !important;
  font-weight: 400 !important;
}
.b-success .b-success-note {
  font-size: 13px !important;
  color: var(--muted) !important;
  margin: 0 0 28px !important;
  font-style: italic !important;
}
.b-success .b-btn { max-width: 280px !important; margin: 0 auto !important; }

/* Responsive */
@media (max-width:600px) {
  .b-card-body { padding: 20px 18px 24px !important; }
  .b-brand     { font-size: 32px !important; }
  .b-row       { grid-template-columns: 1fr !important; }
  .b-calendar  { width: 100vw !important; left: 0 !important; right: 0 !important; position: fixed !important; top: auto !important; bottom: 0 !important; border-radius: var(--radius) var(--radius) 0 0 !important; padding: 20px !important; }
}