/* ===== Techfaulta Booking – Polished Frontend UI ===== */
.tfb-wrap {
  --tfb-card:#f8f9fb; --tfb-text:#111827; --tfb-muted:#6b7280;
  --tfb-border:#e5e7eb; --tfb-ring:#2563eb; --tfb-shadow:0 10px 30px rgba(17,24,39,.08);
  --tfb-radius:12px;
  color:var(--tfb-text); max-width:860px; margin-inline:auto;
}
.tfb-wrap h3{font-size:clamp(1.6rem,2vw,2rem);margin:0 0 1rem}
.tfb-wrap h4{font-size:1.1rem;margin:1.25rem 0 .5rem}

#tfb-form{
  background:var(--tfb-card); border:1px solid var(--tfb-border); border-radius:var(--tfb-radius);
  box-shadow:var(--tfb-shadow); padding:clamp(16px,3vw,28px)
}
.tfb-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:end;margin:.25rem 0 1rem}
.tfb-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tfb-colspan{grid-column:1/-1}

#tfb-form label{display:block;font-weight:600;margin-bottom:.35rem; font-size: 15px;}
#tfb-form input[type="text"],
#tfb-form input[type="email"],
#tfb-form input[type="tel"],
#tfb-form input[type="url"],
#tfb-form input[type="date"],
#tfb-form input[type="time"],
#tfb-form textarea,
#tfb-form select{
  width:80%;appearance:none;background:#fff;border:1px solid var(--tfb-border);
  border-radius:10px;padding:10px 12px;font-size:15px;line-height:1.35;
  transition:border-color .15s, box-shadow .15s, transform .02s
}
#tfb-form textarea{resize:vertical;min-height:84px}
#tfb-form input:focus,#tfb-form textarea:focus,#tfb-form select:focus{
  outline:none;border-color:var(--tfb-ring);box-shadow:0 0 0 4px rgba(37,99,235,.15)
}

/* Slots */
.tfb-slots{display:flex;flex-wrap:wrap;gap:10px;margin:.5rem 0 1rem}
.tfb-slot{
  border:1.5px solid #d1d5db;background:#fff;border-radius:999px;padding:8px 14px;
  font-size:14px;line-height:1;cursor:pointer;
  transition:transform .06s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease
}
.tfb-slot:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.06)}
.tfb-slot.sel{
  color:#fff;border-color:#0f172a;background:linear-gradient(180deg,#1f2937,#0b1327);
  box-shadow:0 8px 20px rgba(2,6,23,.25)
}
.tfb-slot.taken{
  color:var(--tfb-muted);background:#f3f4f6;border-style:dashed;cursor:not-allowed;
  text-decoration:line-through;box-shadow:none;transform:none
}

/* Services */
.tfb-services{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:.25rem}
.tfb-services label{
  background:#fff;border:1px solid var(--tfb-border);border-radius:10px;padding:10px 12px;
  font-weight:500;display:flex;gap:10px;align-items:flex-start
}
.tfb-services input[type="checkbox"]{margin-top:3px}

/* Notes & messages */
.tfb-note{color:var(--tfb-muted);font-size:.9rem;margin-top:.5rem}
#tfb-msg{margin-top:.75rem;font-weight:600}
#tfb-msg.success{color:#065f46}
#tfb-msg.error{color:#b91c1c}

/* Buttons */
#tfb-form .button,.tfb-manage .button{
  display:inline-block;border:0;border-radius:12px;padding:12px 18px;font-weight:700;letter-spacing:.2px;
  color:#fff;background:linear-gradient(180deg,#111827,#000);box-shadow:0 14px 30px rgba(0,0,0,.22);
  cursor:pointer;text-decoration:none;transition:transform .08s, box-shadow .2s, background .2s
}
#tfb-form .button:hover,.tfb-manage .button:hover{
  background:linear-gradient(180deg,#3b82f6,#1d4ed8);transform:translateY(-1px);box-shadow:0 18px 36px rgba(29,78,216,.28)
}
#tfb-form .button:active{transform:translateY(0);box-shadow:0 10px 20px rgba(0,0,0,.18)}
.tfb-manage .button:not(.button-primary){
  background: linear-gradient(180deg, #ef4444, #b91c1c); color:#111827;border:1px solid var(--tfb-border);box-shadow:none
}
.tfb-manage .button:not(.button-primary):hover{border-color:#9ca3af;background: linear-gradient(180deg, #dc2626, #991b1b);}

.tfb-terms {
  color: #000;
  font-size: 15px;
  font-weight: 700; /* bold */
  margin-top: .5rem;
  line-height: 1.5;
}
.tfb-terms p { margin: .3rem 0; }


/* reCAPTCHA */
.g-recaptcha{margin-top:8px}

/* Invalid field highlight (inputs + textareas + selects) */
.is-invalid {
  border: 1px solid #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) inset;
  border-radius: 4px;
}
.tfb-field-error {
  margin-top: 6px;
  font-size: 0.9rem;
  line-height: 1.2;
  color: #b91c1c;
}


/* Optional: style the overall messages */
#tfb-msg.success { padding: 12px; border: 1px solid #c6e6c6; background: #f2fbf2; border-radius: 6px; }
#tfb-msg.error   { padding: 12px; border: 1px solid #f1c0c0; background: #fff5f5; border-radius: 6px; }


/* Responsive */
@media (max-width:820px){.tfb-row{grid-template-columns:1fr 1fr}.tfb-grid{grid-template-columns:1fr}}
@media (max-width:520px){.tfb-row{grid-template-columns:1fr}.tfb-slot{padding:10px 14px;font-size:15px}}