/* DJ Booking Tool – Stylesheet v2.0 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;700&display=swap');

:root {
  --djb-bg:        #0d0d0f;
  --djb-surface:   #18181c;
  --djb-surface2:  #222228;
  --djb-border:    #2e2e38;
  --djb-accent:    #e8ff00;
  --djb-accent2:   #ff4d6d;
  --djb-text:      #f0f0f4;
  --djb-muted:     #888898;
  --djb-radius:    12px;
  --djb-font:      'DM Sans', sans-serif;
}

.djb-wrap {
  font-family: var(--djb-font);
  background: var(--djb-bg);
  color: var(--djb-text);
  max-width: 740px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}

/* STEPS */
.djb-steps { display:flex; align-items:center; padding:28px 32px 0; background:var(--djb-surface); }
.djb-step { display:flex; align-items:center; gap:8px; opacity:.35; transition:opacity .3s; }
.djb-step.active { opacity:1; }
.djb-step.done   { opacity:.7; }
.djb-step-num {
  width:28px; height:28px; border-radius:50%;
  background:var(--djb-border);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
  transition:background .3s, color .3s;
}
.djb-step.active .djb-step-num { background:var(--djb-accent); color:#000; }
.djb-step.done .djb-step-num   { background:#2a2a14; color:var(--djb-accent); }
.djb-step-label { font-size:13px; font-weight:600; white-space:nowrap; }
.djb-step-line  { flex:1; height:1px; background:var(--djb-border); min-width:16px; }

/* PANELS */
.djb-panel { padding:36px 32px 32px; }
.djb-panel.hidden { display:none; }
.djb-panel h2 { font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; margin:0 0 6px; letter-spacing:-.3px; }
.djb-hint { font-size:13px; color:var(--djb-muted); margin:0 0 28px; }

/* CARDS */
.djb-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(195px,1fr)); gap:14px; margin-bottom:32px; }
.djb-card input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.djb-card { cursor:pointer; position:relative; }
.djb-card-inner {
  background:var(--djb-surface); border:2px solid var(--djb-border);
  border-radius:var(--djb-radius); padding:22px 18px 18px;
  transition:border-color .2s, box-shadow .2s, transform .15s;
  position:relative; overflow:hidden;
}
.djb-card-inner:hover { border-color:#444; transform:translateY(-2px); }
.djb-card input:checked ~ .djb-card-inner { border-color:var(--djb-accent); box-shadow:0 0 0 3px rgba(232,255,0,.12); }
.djb-card-special .djb-card-inner { background:linear-gradient(135deg,#1a1a22 0%,#1f1a2c 100%); }
.djb-card-badge { position:absolute; top:12px; right:12px; background:var(--djb-accent2); color:#fff; font-size:10px; font-weight:700; letter-spacing:.5px; padding:3px 8px; border-radius:20px; text-transform:uppercase; }
.djb-card-icon  { font-size:26px; margin-bottom:10px; }
.djb-card-title { font-weight:700; font-size:15px; margin-bottom:6px; }
.djb-card-desc  { font-size:12px; color:var(--djb-muted); line-height:1.5; margin-bottom:14px; }
.djb-card-price { font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; color:var(--djb-accent); }
.djb-card-check {
  position:absolute; bottom:14px; right:14px; width:22px; height:22px;
  background:var(--djb-accent); color:#000; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;
  opacity:0; transform:scale(.5); transition:opacity .2s, transform .2s;
}
.djb-card input:checked ~ .djb-card-inner .djb-card-check { opacity:1; transform:scale(1); }

/* EXTRAS */
.djb-extras-group { margin-bottom:28px; }
.djb-extra-row, .djb-toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; background:var(--djb-surface); border:1px solid var(--djb-border);
  border-radius:var(--djb-radius); margin-bottom:10px; cursor:pointer;
  transition:border-color .2s;
}
.djb-toggle-row:hover { border-color:#444; }
.djb-extra-info strong, .djb-toggle-info strong { display:block; font-size:14px; font-weight:600; }
.djb-extra-sub { font-size:12px; color:var(--djb-muted); }

/* Counter */
.djb-extra-counter { display:flex; align-items:center; gap:10px; }
.djb-counter-btn {
  width:32px; height:32px; background:var(--djb-surface2); border:1px solid var(--djb-border);
  color:var(--djb-text); border-radius:8px; font-size:18px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.djb-counter-btn:hover { background:var(--djb-border); }
.djb-extra-counter input[type=number] {
  width:42px; text-align:center; background:transparent; border:none;
  color:var(--djb-text); font-size:18px; font-weight:700; font-family:var(--djb-font);
  pointer-events:none; -moz-appearance:textfield;
}

/* Toggle */
.djb-toggle { position:relative; width:46px; height:26px; flex-shrink:0; }
.djb-toggle input { opacity:0; width:0; height:0; }
.djb-toggle-slider {
  position:absolute; inset:0; background:var(--djb-surface2); border:1px solid var(--djb-border);
  border-radius:13px; cursor:pointer; transition:background .2s;
}
.djb-toggle-slider::before {
  content:''; position:absolute; width:18px; height:18px; left:3px; top:3px;
  background:var(--djb-muted); border-radius:50%; transition:transform .2s, background .2s;
}
.djb-toggle input:checked ~ .djb-toggle-slider { background:rgba(232,255,0,.12); border-color:var(--djb-accent); }
.djb-toggle input:checked ~ .djb-toggle-slider::before { background:var(--djb-accent); transform:translateX(20px); }

.djb-info-box { background:var(--djb-surface); border:1px solid var(--djb-border); border-radius:var(--djb-radius); padding:18px; font-size:13px; color:var(--djb-muted); margin:0 0 10px; }

/* FIELD SECTIONS */
.djb-field-section { margin-bottom:22px; }
.djb-section-label { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--djb-muted); margin-bottom:10px; }
.djb-field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* Radio cards */
.djb-radio-group { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.djb-radio-card input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.djb-radio-card { cursor:pointer; }
.djb-radio-inner {
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  background:var(--djb-surface); border:2px solid var(--djb-border);
  border-radius:var(--djb-radius); transition:border-color .2s;
}
.djb-radio-card input:checked ~ .djb-radio-inner { border-color:var(--djb-accent); box-shadow:0 0 0 3px rgba(232,255,0,.1); }
.djb-radio-icon  { font-size:20px; }
.djb-radio-label { font-size:14px; font-weight:600; }

/* Chips */
.djb-chip-group { display:flex; flex-wrap:wrap; gap:8px; }
.djb-chip input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.djb-chip {
  display:inline-flex; align-items:center; padding:8px 16px;
  background:var(--djb-surface); border:1.5px solid var(--djb-border);
  border-radius:100px; font-size:13px; font-weight:500; cursor:pointer;
  transition:border-color .15s, background .15s, color .15s; user-select:none;
}
.djb-chip:hover { border-color:#555; }
.djb-chip:has(input:checked),
.djb-chip.djb-chip--active { background:var(--djb-accent); border-color:var(--djb-accent); color:#000; font-weight:700; }

/* CONTACT FIELDS */
.djb-field-group { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:28px; }
.djb-field { display:flex; flex-direction:column; gap:6px; }
.djb-field-full { grid-column:1/-1; }
.djb-field label { font-size:13px; font-weight:600; color:var(--djb-muted); }
.djb-field input, .djb-field textarea {
  background:var(--djb-surface); border:1px solid var(--djb-border);
  border-radius:10px; color:var(--djb-text); font-family:var(--djb-font);
  font-size:14px; padding:11px 14px; transition:border-color .2s; outline:none; resize:vertical;
}
.djb-field input:focus, .djb-field textarea:focus { border-color:var(--djb-accent); box-shadow:0 0 0 3px rgba(232,255,0,.08); }

/* SUMMARY */
.djb-summary { background:var(--djb-surface); border:1px solid var(--djb-border); border-radius:var(--djb-radius); overflow:hidden; margin-bottom:28px; }
.djb-summary-section { padding:16px 20px; border-bottom:1px solid var(--djb-border); }
.djb-summary-label { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--djb-muted); margin-bottom:8px; }
.djb-summary-section p, .djb-summary-section div { font-size:14px; line-height:1.7; margin:0; }
.djb-sum-item { display:flex; justify-content:space-between; padding:2px 0; }
.djb-sum-item-price { color:var(--djb-accent); font-weight:600; }
.djb-summary-total { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; }
#djb-sum-total { color:var(--djb-accent); font-size:22px; }
.djb-sum-tag { display:inline-block; padding:2px 10px; background:rgba(232,255,0,.1); border:1px solid rgba(232,255,0,.25); border-radius:20px; font-size:12px; color:var(--djb-accent); font-weight:600; margin-bottom:2px; }

/* NAV + BUTTONS */
.djb-nav { display:flex; justify-content:space-between; gap:12px; }
.djb-btn { padding:13px 26px; border-radius:10px; font-family:var(--djb-font); font-size:14px; font-weight:700; cursor:pointer; border:none; transition:transform .15s, box-shadow .15s; }
.djb-btn:active { transform:scale(.97); }
.djb-btn-next, .djb-btn-submit { background:var(--djb-accent); color:#000; margin-left:auto; }
.djb-btn-next:hover, .djb-btn-submit:hover { box-shadow:0 4px 24px rgba(232,255,0,.35); }
.djb-btn-back { background:var(--djb-surface2); color:var(--djb-text); border:1px solid var(--djb-border); }
.djb-btn-back:hover { background:var(--djb-border); }
.djb-btn:disabled { opacity:.4; cursor:not-allowed; }

/* RESULT */
#djb-result { margin-top:20px; padding:16px 18px; border-radius:var(--djb-radius); font-size:14px; font-weight:500; }
#djb-result.success { background:rgba(232,255,0,.08); border:1px solid rgba(232,255,0,.3); color:var(--djb-accent); }
#djb-result.error   { background:rgba(255,77,109,.08); border:1px solid rgba(255,77,109,.3); color:var(--djb-accent2); }

/* MISC */
.djb-inline-error { color:var(--djb-accent2); font-size:13px; margin:0 0 12px; }

@keyframes djb-shake {
  0%,100% { transform:translateX(0); }
  25%      { transform:translateX(-6px); }
  75%      { transform:translateX(6px); }
}
.djb-shake { animation:djb-shake .35s ease; }

.hidden { display:none !important; }

@media (max-width:520px) {
  .djb-steps { padding:20px 16px 0; }
  .djb-step-label { display:none; }
  .djb-panel { padding:24px 16px 20px; }
  .djb-field-group, .djb-field-row, .djb-radio-group { grid-template-columns:1fr; }
  .djb-cards { grid-template-columns:1fr; }
}