/* 26-booking-form.css — Multi-step booking form */

/* ── Form wrapper ── */
.bk-form-wrap{
  background:var(--color-bg-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-10) var(--space-8);
  box-shadow:var(--shadow-md);
}

/* ── Step indicator ── */
.bk-steps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin-bottom:var(--space-10);
}
.bk-steps__item{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  opacity:0.35;
  transition:opacity var(--duration-base) var(--ease-out);
}
.bk-steps__item.is-active{opacity:1;}
.bk-steps__item.is-done{opacity:0.6;}
.bk-steps__num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;
  border-radius:var(--radius-full);
  border:2px solid var(--color-border-strong);
  font-family:var(--font-heading);
  font-size:var(--text-xs);
  font-weight:var(--weight-bold);
  color:var(--color-text-muted);
  transition:var(--transition-base);
}
.bk-steps__item.is-active .bk-steps__num{
  background:var(--color-action-deep);
  border-color:var(--color-action-deep);
  color:var(--color-text-inverse);
}
.bk-steps__item.is-done .bk-steps__num{
  background:var(--color-action-light);
  border-color:var(--color-action);
  color:var(--color-action-deep);
}
.bk-steps__label{
  font-size:var(--text-xs);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--color-text-muted);
}
.bk-steps__item.is-active .bk-steps__label{color:var(--color-action-deep);}
.bk-steps__line{
  width:48px;height:2px;
  background:var(--color-border);
  margin-inline:var(--space-3);
  border-radius:1px;
}

/* ── Step panels ── */
.bk-form__step{display:none;}
.bk-form__step.is-active{display:block;animation:bkFadeIn var(--duration-base) var(--ease-out);}
@keyframes bkFadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.bk-form__step-title{
  font-size:var(--text-lg);
  font-weight:var(--weight-semibold);
  text-align:center;
  margin-bottom:var(--space-2);
}
.bk-form__step-sub{
  text-align:center;
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  margin-bottom:var(--space-6);
}

/* ── Service type cards (Step 1) ── */
.bk-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-4);
  margin-top:var(--space-6);
}
.bk-card{cursor:pointer;}
.bk-card input{position:absolute;opacity:0;pointer-events:none;}
.bk-card__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-6) var(--space-4);
  border:2px solid var(--color-border);
  border-radius:var(--radius-md);
  text-align:center;
  transition:var(--transition-base);
}
.bk-card__inner:hover{
  border-color:var(--color-border-action);
  background:var(--color-action-hover-bg);
}
.bk-card input:checked + .bk-card__inner{
  border-color:var(--color-action);
  background:var(--color-action-light);
  box-shadow:0 0 0 3px rgba(49,155,66,0.15);
}
.bk-card__icon{
  width:32px;height:32px;
  color:var(--color-action-deep);
  margin-bottom:var(--space-1);
}
.bk-card__label{
  font-family:var(--font-heading);
  font-size:var(--text-base);
  font-weight:var(--weight-semibold);
  color:var(--color-text-primary);
}
.bk-card__desc{
  font-size:var(--text-xs);
  color:var(--color-text-muted);
}

/* ── Form fields (Steps 2 & 3) ── */
.bk-form__fields{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
  margin-top:var(--space-6);
}
.bk-form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
}
.bk-form__field{
  display:flex;
  flex-direction:column;
  gap:var(--space-1);
}
.bk-form__field label{
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  color:var(--color-text-primary);
}
.bk-form__field input,
.bk-form__field select,
.bk-form__field textarea{
  padding:var(--space-3) var(--space-4);
  border:1.5px solid var(--color-border-strong);
  border-radius:var(--radius-md);
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--color-text-primary);
  background:var(--color-bg-white);
  transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);
  outline:none;
  appearance:none;-webkit-appearance:none;
}
.bk-form__field input:focus,
.bk-form__field select:focus,
.bk-form__field textarea:focus{
  border-color:var(--color-action);
  box-shadow:var(--shadow-focus);
}
.bk-form__field input::placeholder,
.bk-form__field textarea::placeholder{
  color:var(--color-text-muted);
}
.bk-form__field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--space-4) center;
  padding-right:var(--space-10);
}
.bk-form__field textarea{
  resize:vertical;
  min-height:80px;
  line-height:var(--leading-normal);
}

/* ── Validation error ── */
.bk-form__error{
  text-align:center;
  font-size:var(--text-sm);
  color:var(--color-error);
  margin-top:var(--space-4);
}

/* ── Navigation row ── */
.bk-form__nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:var(--space-8);
  padding-top:var(--space-6);
  border-top:1px solid var(--color-border);
}
.bk-form__back{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  color:var(--color-text-muted);
  background:none;
  border:none;
  cursor:pointer;
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-sm);
  transition:var(--transition-color);
}
.bk-form__back:hover{
  color:var(--color-text-primary);
  background:var(--color-bg-alt);
}
.bk-form__next,
.bk-form__submit{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
}

/* ── Submit loading state ── */
.bk-form__submit.is-loading{
  pointer-events:none;
  opacity:0.7;
}

/* ── Confirmation (Step Done) ── */
.bk-form__done{
  text-align:center;
  padding:var(--space-8) 0;
}
.bk-form__done-icon{
  color:var(--color-action);
  margin:0 auto var(--space-5);
}
.bk-form__done-title{
  font-size:var(--text-xl);
  margin-bottom:var(--space-3);
}
.bk-form__done-text{
  font-size:var(--text-base);
  color:var(--color-text-body);
  line-height:var(--leading-normal);
  max-width:420px;
  margin:0 auto var(--space-6);
}
.bk-form__done-sub{
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  margin-bottom:var(--space-3);
}

/* ── Responsive ── */
@media(max-width:640px){
  .bk-form-wrap{padding:var(--space-6) var(--space-5);}
  .bk-cards{grid-template-columns:1fr;}
  .bk-form__row{grid-template-columns:1fr;}
  .bk-steps__label{display:none;}
  .bk-steps__line{width:32px;}
}