/****** PACIFIC APC — SimplyBook Booking CSS (clean cards + readable spacing + PHONE SAFE) ******/

/* =========================
   THEME KNOBS
========================= */
:root{
  --accent:#c77000;

  --field-gap:14px;
  --q-pad:14px;
  --q-radius:12px;

  --q-bg:#fafafa;
  --q-border:#e7e7e7;

  --text:#1e1e1e;
  --muted:#6f6f6f;

  --input-vpad:10px;
  --input-hpad:12px;
  --input-radius:10px;
  --input-border:#d6d6d6;

  --label-bottom:8px;
}

/* =========================
   BASE TYPOGRAPHY
========================= */
#sb_booking_content,
#sb_main,
.detail-step,
.left-side{
  line-height:1.35!important;
  font-size:16px!important;
  color:var(--text)!important;
}

/* =========================
   QUESTION “CARDS”
========================= */
#sb_booking_content .form-horizontal .form-group,
#sb_client_info_container .form-group,
#sb_attribute_container .form-group,
#sb_additional_fields_container .form-group{
  margin:0 0 var(--field-gap) 0!important;
  padding:var(--q-pad)!important;
  border:1px solid var(--q-border)!important;
  border-radius:var(--q-radius)!important;
  background:var(--q-bg)!important;
}

#sb_booking_content .form-horizontal .form-group:last-child,
#sb_client_info_container .form-group:last-child,
#sb_attribute_container .form-group:last-child,
#sb_additional_fields_container .form-group:last-child{
  margin-bottom:0!important;
}

/* =========================
   LABELS
========================= */
#sb_booking_content label,
#sb_booking_content .control-label,
#sb_client_info_container .control-label,
#sb_attribute_container .control-label{
  display:block!important;
  margin:0 0 var(--label-bottom) 0!important;
  padding:0!important;
  font-weight:800!important;
  letter-spacing:0.2px;
  color:var(--text)!important;
}

/* Required asterisk */
#sb_booking_content label .required,
#sb_booking_content .control-label .required{
  color:#ff3b30!important;
  font-weight:900!important;
}

/* =========================
   INPUTS (global)
========================= */
#sb_booking_content input[type="text"],
#sb_booking_content input[type="email"],
#sb_booking_content input[type="number"],
#sb_booking_content input[type="password"],
#sb_booking_content select,
#sb_booking_content textarea{
  width:100%!important;
  box-sizing:border-box!important;
  padding:var(--input-vpad) var(--input-hpad)!important;
  border:1px solid var(--input-border)!important;
  border-radius:var(--input-radius)!important;
  background:#fff!important;
  line-height:1.25!important;
}

/* Textarea */
#sb_booking_content textarea{
  min-height:120px!important;
  resize:vertical!important;
}

/* Focus */
#sb_booking_content input:focus,
#sb_booking_content select:focus,
#sb_booking_content textarea:focus{
  outline:none!important;
  border-color:rgba(199,112,0,0.55)!important;
  box-shadow:0 0 0 4px rgba(199,112,0,0.12)!important;
}

/* =========================
   HELP + ERRORS
========================= */
#sb_booking_content .help-block,
#sb_booking_content .description,
#sb_booking_content .hint{
  margin:8px 0 0 0!important;
  color:var(--muted)!important;
  font-size:13px!important;
  line-height:1.35!important;
}

#sb_booking_content .error,
#sb_booking_content .sb-validation-error,
#sb_booking_content .help-block.error{
  height:auto!important;
  overflow:visible!important;
  margin:10px 0 0 0!important;
  color:#d93025!important;
  font-size:13px!important;
  font-weight:800!important;
}

/* =========================
   CHECKBOXES / RADIOS
========================= */
#sb_booking_content input[type="checkbox"],
#sb_booking_content input[type="radio"]{
  transform:scale(1.1);
  margin-right:10px!important;
}

/* =========================
   PHONE FIELD — DO NOT FIGHT THE .iti PLUGIN
   This is the key change vs your old CSS.
========================= */

/* Let intl-tel-input control layout; only make container full width */
#sb_client_info_container .form-group.form-client-phone .iti{
  width:100%!important;
}

/* Style ONLY the actual tel input, but do NOT hide flags / arrows / lists */
#sb_client_info_container .form-group.form-client-phone input[type="tel"]{
  width:100%!important;
  box-sizing:border-box!important;
  padding:var(--input-vpad) var(--input-hpad)!important;
  border:1px solid var(--input-border)!important;
  border-radius:var(--input-radius)!important;
  background:#fff!important;
  line-height:1.25!important;
}

/* Make sure the dial-code UI isn’t forced offscreen by our “card” styling */
#sb_client_info_container .form-group.form-client-phone .iti__flag-container{
  z-index:3!important;
}

/* Country dropdown list stays above cards */
.iti__country-list{
  z-index:99999!important;
}

/* =========================
   ADD-ON “PILL”
========================= */
#sb_additional_fields_container .form-group.form-group--checkbox{
  position:relative;
}

/* Whole card clickable */
#sb_additional_fields_container .form-group.form-group--checkbox input[type="checkbox"]{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  cursor:pointer!important;
  margin:0!important;
  z-index:2!important;
}

/* Pill */
#sb_additional_fields_container .form-group.form-group--checkbox label{
  display:block!important;
  margin:0!important;
}

#sb_additional_fields_container .form-group.form-group--checkbox label::after{
  content:"Add service";
  display:inline-block;
  margin-top:10px;
  padding:8px 14px;
  border-radius:999px;
  border:2px solid var(--accent);
  color:var(--accent);
  font-weight:800;
  cursor:pointer;
  user-select:none;
}

/* Checked state (modern browsers) */
#sb_additional_fields_container .form-group.form-group--checkbox:has(input[type="checkbox"]:checked) label::after{
  content:"Service added";
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* Fallback checked state */
#sb_additional_fields_container .form-group.form-group--checkbox input[type="checkbox"]:checked + label::after{
  content:"Service added";
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* =========================
   BUTTONS
========================= */
#eventForm #save_button,
#eventForm input.reserve_time_btn,
#eventForm input.select_another_btn,
#sb_booking_content button,
#sb_booking_content .btn{
  border-radius:12px!important;
  font-weight:800!important;
}

/* =========================
   MOBILE
========================= */
@media (max-width:640px){
  :root{
    --field-gap:12px;
    --q-pad:12px;
    --input-vpad:12px;
    --input-hpad:12px;
  }
/***** REQUIRED-FIELD ERROR HIGHLIGHT (add this at the END of your CSS) *****/

/* Light-red highlight for the whole question "card" when invalid */
#sb_booking_content .form-group.has-error,
#sb_booking_content .form-group.sb-error,
#sb_booking_content .form-group.error,
#sb_booking_content .form-group:has(.error),
#sb_booking_content .form-group:has(.sb-validation-error),
#sb_booking_content .form-group:has(.help-block.error){
  background: rgba(217, 48, 37, 0.06) !important;  /* light red fill */
  border-color: rgba(217, 48, 37, 0.45) !important; /* red border */
}

/* Make the input itself look invalid too */
#sb_booking_content .form-group.has-error input,
#sb_booking_content .form-group.has-error select,
#sb_booking_content .form-group.has-error textarea,
#sb_booking_content .form-group:has(.error) input,
#sb_booking_content .form-group:has(.error) select,
#sb_booking_content .form-group:has(.error) textarea,
#sb_booking_content .form-group:has(.sb-validation-error) input,
#sb_booking_content .form-group:has(.sb-validation-error) select,
#sb_booking_content .form-group:has(.sb-validation-error) textarea{
  border-color: rgba(217, 48, 37, 0.85) !important;
  box-shadow: 0 0 0 4px rgba(217, 48, 37, 0.12) !important;
}

/* Ensure error text is visible and readable */
#sb_booking_content .form-group .error,
#sb_booking_content .form-group .sb-validation-error,
#sb_booking_content .form-group .help-block.error{
  display:block !important;
  height:auto !important;
  overflow:visible !important;
  margin-top:10px !important;
  color:#d93025 !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.3 !important;
}

/* If SimplyBook hides error placeholders, force them on */
#sb_booking_content .form-group .mat-mdc-form-field-subscript-wrapper,
#sb_booking_content .form-group .mat-form-field-subscript-wrapper{
  height:auto !important;
  overflow:visible !important;
}

/* Optional: add a small “Required” badge next to label on error */
#sb_booking_content .form-group.has-error label::after,
#sb_booking_content .form-group:has(.error) label::after,
#sb_booking_content .form-group:has(.sb-validation-error) label::after{
  content:"  — required";
  color:#d93025;
  font-weight:900;
  font-size:12px;
}
/***** REQUIRED-FIELD ERROR HIGHLIGHT — DESKTOP SAFE (paste at END) *****/

/* 1) Highlight the whole “card” when SB marks the group as error */
#sb_booking_content .form-group.has-error,
#sb_booking_content .form-group.error,
#sb_booking_content .form-group.sb-error,
#sb_booking_content .form-group.ng-invalid.ng-touched,
#sb_booking_content .form-group.ng-invalid.ng-dirty{
  background: rgba(217, 48, 37, 0.06) !important;
  border-color: rgba(217, 48, 37, 0.45) !important;
}

/* 2) Highlight the card when any field inside is explicitly invalid (no :has needed) */
#sb_booking_content .form-group:focus-within{
  /* keep your normal state; error state handled below */
}

/* If the input itself is invalid/aria-invalid, tint the CARD using :focus-within + invalid input rules */
#sb_booking_content .form-group:focus-within input[aria-invalid="true"],
#sb_booking_content .form-group:focus-within select[aria-invalid="true"],
#sb_booking_content .form-group:focus-within textarea[aria-invalid="true"],
#sb_booking_content .form-group:focus-within input:invalid,
#sb_booking_content .form-group:focus-within select:invalid,
#sb_booking_content .form-group:focus-within textarea:invalid{
  /* this targets the field; card tinting comes from group classes above */
}

/* 3) Make the INPUT look invalid across desktop implementations */
#sb_booking_content input[aria-invalid="true"],
#sb_booking_content select[aria-invalid="true"],
#sb_booking_content textarea[aria-invalid="true"],
#sb_booking_content input:invalid,
#sb_booking_content select:invalid,
#sb_booking_content textarea:invalid,
#sb_booking_content .ng-invalid.ng-touched,
#sb_booking_content .ng-invalid.ng-dirty,
#sb_booking_content .mat-form-field-invalid input,
#sb_booking_content .mat-mdc-form-field-invalid input{
  border-color: rgba(217, 48, 37, 0.85) !important;
  box-shadow: 0 0 0 4px rgba(217, 48, 37, 0.12) !important;
}

/* 4) Force error text to show (desktop sometimes collapses it) */
#sb_booking_content .error,
#sb_booking_content .sb-validation-error,
#sb_booking_content .help-block.error,
#sb_booking_content .mat-error,
#sb_booking_content .mat-mdc-form-field-error{
  display:block !important;
  height:auto !important;
  overflow:visible !important;
  margin-top:10px !important;
  color:#d93025 !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.3 !important;
}

/* 5) OPTIONAL: add “— required” badge next to label when SB marks the GROUP invalid (desktop-safe) */
#sb_booking_content .form-group.has-error > label::after,
#sb_booking_content .form-group.has-error .control-label::after,
#sb_booking_content .form-group.ng-invalid.ng-touched > label::after,
#sb_booking_content .form-group.ng-invalid.ng-touched .control-label::after,
#sb_booking_content .form-group.ng-invalid.ng-dirty > label::after,
#sb_booking_content .form-group.ng-invalid.ng-dirty .control-label::after{
  content:"  — required";
  color:#d93025;
  font-weight:900;
  font-size:12px;
}
}