/* ==========================================================================
   VBS Kids Registration – Full Fidelity Theme
   Scoped to .vbskr-wrapper to avoid collisions with your volunteer form/theme
   ========================================================================== */

.vbskr-wrapper {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  min-height: 100vh;
  padding: 48px 22px;
  line-height: 1.7;
  font-size: 18px;
  box-sizing: border-box;
}
.vbskr-wrapper *, .vbskr-wrapper *::before, .vbskr-wrapper *::after { box-sizing: inherit; }

/* Hero */
.vbskr-hero {
  text-align: center;
  padding: 70px 24px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  margin-bottom: 44px;
  max-width: 900px;
  margin-left:auto;
  margin-right:auto;
}
.vbskr-hero h1 {
  font-size: 2.75rem;
  font-weight: 900;
  color: #fff;
  margin: 0 0 20px 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.vbskr-event-info { display:flex; justify-content:center; gap:20px; margin:20px 0; flex-wrap:wrap; }
.vbskr-event-badge {
  background: rgba(255,255,255,0.2);
  color:#fff;
  padding:10px 18px;
  border-radius:22px;
  font-weight:700;
  backdrop-filter: blur(10px);
  font-size:1rem;
}
.vbskr-hero p { font-size:1.35rem; color: rgba(255,255,255,0.95); margin: 20px 0 0 0; }

/* Container */
.vbskr-container { max-width: 920px; margin: 0 auto; }

/* Progress */
.vbskr-progress {
  background:#fff;
  border-radius:18px;
  padding:34px;
  margin-bottom:30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  font-size:1.05rem;
}
.vbskr-progress-bar {
  width:100%;
  height:10px;
  background:#e5e7eb;
  border-radius:6px;
  margin-bottom:22px;
  overflow:hidden;
}
.vbskr-progress-fill {
  height:100%;
  background: linear-gradient(90deg,#4f46e5 0%,#06b6d4 100%);
  border-radius:6px;
  transition: width 0.5s ease;
  width:25%;
}
.vbskr-steps { display:grid; grid-template-columns: repeat(4,1fr); gap:12px; text-align:center; }
.vbskr-step { opacity:0.5; transition: all .3s ease; }
.vbskr-step.active { opacity:1; }
.vbskr-step-circle {
  width:46px; height:46px; border-radius:50%;
  background:#e5e7eb; color:#6b7280; display:flex; align-items:center; justify-content:center;
  font-weight:800; margin:0 auto 8px; transition: all .3s ease; font-size:1.05rem;
}
.vbskr-step.active .vbskr-step-circle {
  background: linear-gradient(135deg,#4f46e5 0%,#06b6d4 100%);
  color:#fff; transform: scale(1.1);
}
.vbskr-step span { font-size:1rem; font-weight:700; color:#6b7280; }
.vbskr-step.active span { color:#4f46e5; }

/* Sections */
.vbskr-form-section {
  background:#fff;
  border-radius:22px;
  padding:44px;
  margin-bottom:30px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  border:1px solid rgba(255,255,255,0.2);
  display:none;
  font-size:1.05rem;
}
.vbskr-form-section.active { display:block; animation: vbskrSlideIn .5s ease-out; }
@keyframes vbskrSlideIn { from { opacity:0; transform: translateY(20px);} to { opacity:1; transform: translateY(0);} }

.vbskr-section-header { text-align:center; margin-bottom:38px; }
.vbskr-section-header h2 {
  font-size:2.1rem; font-weight:800;
  background: linear-gradient(135deg,#4f46e5 0%,#06b6d4 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin:0 0 15px 0;
}
.vbskr-section-header p { font-size:1.15rem; color:#6b7280; margin:0; }

/* Grid & fields */
.vbskr-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:28px; }
.vbskr-field-full { grid-column: 1 / -1; }

.vbskr-field label { display:block; margin-bottom:10px; font-weight:700; color:#374151; font-size:1.05rem; }
.vbskr-required { color:#ef4444; font-weight:800; }
.vbskr-optional { color:#6b7280; font-weight:500; font-size:.95rem; margin-left:6px; }
.vbskr-input-group { position:relative; display:flex; align-items:center; }

.vbskr-field input,
.vbskr-field select,
.vbskr-field textarea {
  width:100%; padding:18px 16px; border:2px solid #e5e7eb; border-radius:14px;
  font-size:1.05rem; transition: all .3s ease; background:#fff; color:#111827;
}
.vbskr-field textarea { min-height:120px; }
.vbskr-field input:focus,
.vbskr-field select:focus,
.vbskr-field textarea:focus {
  outline:none; border-color:#4f46e5; box-shadow: 0 0 0 4px rgba(79,70,229,0.12); transform: translateY(-1px);
}

/* Checkbox */
.vbskr-checkbox-label {
  display:flex !important; align-items:center; gap:12px; cursor:pointer; padding:16px;
  border:2px solid #e5e7eb; border-radius:14px; transition: all .3s ease; background:#fff; font-size:1.05rem;
}
.vbskr-checkbox-label:hover { border-color:#4f46e5; }
.vbskr-checkbox-label input[type="checkbox"] {
  width:22px !important; height:22px !important; padding:0 !important; margin:0 !important; border:none !important; box-shadow:none !important;
}
.vbskr-checkbox-text { font-weight:700; color:#374151; }
.vbskr-field-help { display:block; margin-top:8px; font-size:.95rem; color:#6b7280; font-style:italic; }

/* Child card */
.vbskr-child-card {
  background:#f9fafb; border:2px solid #e5e7eb; border-radius:18px; padding:34px; margin-bottom:26px;
  position:relative; transition: all .3s ease;
}
.vbskr-child-card:hover { border-color:#4f46e5; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.08); }
.vbskr-child-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; padding-bottom:14px; border-bottom:2px solid #e5e7eb; }
.vbskr-child-header h3 { margin:0; font-size:1.6rem; font-weight:800; color:#4f46e5; }
.vbskr-remove-btn {
  background:#ef4444; color:#fff; border:none; padding:10px 16px; border-radius:22px; font-size:.95rem; font-weight:700; cursor:pointer; transition: all .2s ease;
}
.vbskr-remove-btn:hover { background:#dc2626; transform: scale(1.05); }

.vbskr-add-section {
  text-align:center; padding:32px; border:2px dashed #d1d5db; border-radius:16px; margin:26px 0; transition: all .3s ease; font-size:1.05rem;
}
.vbskr-add-section:hover { border-color:#4f46e5; background: rgba(79,70,229,0.02); }

/* Buttons */
.vbskr-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 26px;
  border-radius:14px; font-size:1.05rem; font-weight:800; text-decoration:none; transition: all .25s ease; cursor:pointer;
  border:2px solid transparent; min-height:52px;
}
.vbskr-btn-primary {
  background: linear-gradient(135deg,#4f46e5 0%,#3730a3 100%); color:#fff; box-shadow: 0 4px 15px rgba(79,70,229,0.3);
}
.vbskr-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(79,70,229,0.4); }
.vbskr-btn-outline { background:#fff; color:#4f46e5; border-color:#4f46e5; }
.vbskr-btn-outline:hover { background:#4f46e5; color:#fff; }
.vbskr-btn-submit {
  background: linear-gradient(135deg,#10b981 0%,#059669 100%); color:#fff; font-size:1.15rem; padding:20px 38px; width:100%;
  box-shadow: 0 8px 25px rgba(16,185,129,0.3); border-radius:16px;
}
.vbskr-btn-submit:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(16,185,129,0.4); }

/* Nav */
.vbskr-nav { display:flex; justify-content:space-between; align-items:center; margin-top:40px; padding-top:30px; border-top:2px solid #f3f4f6; }

/* Cards */
.vbskr-summary-card,
.vbskr-payment-card,
.vbskr-free-card {
  background:#f9fafb; border:2px solid #e5e7eb; border-radius:16px; padding:30px; margin-bottom:24px;
}
.vbskr-cost-breakdown { background:#fff; border-radius:12px; padding:22px; margin-bottom:20px; font-size:1.05rem; }
.vbskr-cost-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #e5e7eb; }
.vbskr-cost-row:last-child { border-bottom:none; }
.vbskr-total-row { margin-top:12px; padding-top:16px; border-top:2px solid #d1d5db; font-size:1.2rem; font-weight:800; }

.vbskr-payment-notice {
  display:flex; align-items:flex-start; gap:16px; background: rgba(79,70,229,0.05); border:1px solid rgba(79,70,229,0.2);
  border-radius:12px; padding:20px;
}
.vbskr-free-card { background: linear-gradient(135deg,rgba(16,185,129,0.1) 0%,rgba(5,150,105,0.1) 100%); border-color:#10b981; }
.vbskr-free-content { display:flex; align-items:center; gap:20px; text-align:left; }

/* Notices */
.vbskr-success {
  background: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(5,150,105,0.1) 100%);
  border: 2px solid #10b981; color: #065f46; padding: 25px; border-radius: 15px; margin: 25px 0; text-align:center;
}
.vbskr-error {
  background: linear-gradient(135deg, rgba(239,68,68,0.1) 0%, rgba(220,38,38,0.1) 100%);
  border:2px solid #ef4444; color:#7f1d1d; padding:25px; border-radius:15px; margin:25px 0; text-align:center;
}

/* Security info (optional element) */
.vbskr-security {
  background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
  border-radius: 15px; padding: 20px; margin-top: 30px; text-align: center; color: rgba(255,255,255,0.9);
}

/* Mobile */
@media (max-width:768px){
  .vbskr-hero h1{font-size:2.25rem;}
  .vbskr-grid{grid-template-columns:1fr;}
  .vbskr-steps{grid-template-columns:repeat(2,1fr);}
  .vbskr-nav{flex-direction:column; gap:16px;}
  .vbskr-nav .vbskr-btn{width:100%;}
}