@tailwind base;
@tailwind components;
@tailwind utilities;

/* booking.css */

/* --- STEP 2/3 buttons, states, checkboxes, errors, etc --- */

#step-2 button[aria-pressed="true"],
#step-2 button[aria-pressed="true"]:hover,
#step-2 button[aria-pressed="true"]:active {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
}

/* 1) Nuke focus rings/borders on ALL timeslot buttons */
#step-3 button[wire\:key^="opt-"],
#step-3 button[wire\:key^="opt-"]:focus,
#step-3 button[wire\:key^="opt-"]:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

/* 2) Force RED style for "bad" (aria-invalid=true) regardless of Tailwind classes */
#step-3 button[wire\:key^="opt-"][aria-invalid="true"] {
  border-color: #dc2626 !important;
  background:   #fee2e2 !important;
  color:        #7f1d1d !important;
  box-shadow: inset 0 0 0 1px #dc2626 !important;
}
#step-3 button[wire\:key^="opt-"][aria-invalid="true"]:hover {
  background: #fecaca !important;
}
#step-3 button[wire\:key^="opt-"][aria-invalid="true"] * {
  color: inherit !important;
}

/* Unavailable time slots (disabled) – light pink, red-ish */
#step-3 button[aria-disabled="true"] {
  background-color: #fff1f2 !important;
  border-color:     #ffe4e6 !important;
  color:            #fb7185 !important;
  cursor: not-allowed !important;
  opacity: 0.9;
}
#step-3 button[aria-disabled="true"]:hover {
  background-color: #fecdd3 !important;
}
#step-3 button[aria-disabled="true"] * {
  color: inherit !important;
}

/* agreeTerms checkbox – green when checked */
input[type="checkbox"][wire\:model="agreeTerms"]:checked,
input[type="checkbox"][wire\:model\.live="agreeTerms"]:checked,
input[type="checkbox"][wire\:model\.defer="agreeTerms"]:checked {
  accent-color: #16a34a !important;
  background-color: #16a34a !important;
  border-color: #16a34a !important;
}
html.dark input[type="checkbox"][wire\:model="agreeTerms"]:checked,
html.dark input[type="checkbox"][wire\:model\.live="agreeTerms"]:checked,
html.dark input[type="checkbox"][wire\:model\.defer="agreeTerms"]:checked {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
}

/* agreePolicies checkbox – green when checked */
input[type="checkbox"][wire\:model="agreePolicies"]:checked,
input[type="checkbox"][wire\:model\.live="agreePolicies"]:checked,
input[type="checkbox"][wire\:model\.defer="agreePolicies"]:checked {
  accent-color: #16a34a !important;
  background-color: #16a34a !important;
  border-color: #16a34a !important;
}
html.dark input[type="checkbox"][wire\:model="agreePolicies"]:checked,
html.dark input[type="checkbox"][wire\:model\.live="agreePolicies"]:checked,
html.dark input[type="checkbox"][wire\:model\.defer="agreePolicies"]:checked {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
}

/* Internal booking checkbox – green when checked */
input[type="checkbox"][wire\:model="isInternalBooking"]:checked,
input[type="checkbox"][wire\:model\.live="isInternalBooking"]:checked,
input[type="checkbox"][wire\:model\.defer="isInternalBooking"]:checked {
  accent-color: #16a34a !important;
  background-color: #16a34a !important;
  border-color: #16a34a !important;
}
html.dark input[type="checkbox"][wire\:model="isInternalBooking"]:checked,
html.dark input[type="checkbox"][wire\:model\.live="isInternalBooking"]:checked,
html.dark input[type="checkbox"][wire\:model\.defer="isInternalBooking"]:checked {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
}

/* Generic form fields: force red border when invalid (exclude checkboxes) */
input:not([type="checkbox"])[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: #dc2626 !important;
  box-shadow: inset 0 0 0 1px #dc2626 !important;
}
html.dark input:not([type="checkbox"])[aria-invalid="true"],
html.dark textarea[aria-invalid="true"],
html.dark select[aria-invalid="true"] {
  border-color: #dc2626 !important;
}

/* Checkboxes: red outline + red tick when invalid */
label.has-error input[type="checkbox"]:not(:checked) {
  accent-color: #dc2626 !important;
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px #dc2626 !important;
  background-color: #fee2e2 !important;
}
html.dark label.has-error input[type="checkbox"]:not(:checked) {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px #dc2626 !important;
}

/* Footer error pulses */
@keyframes footer-error-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.footer-error-flash {
  animation: footer-error-pulse 0.9s ease-in-out 0s 2;
}
.review-error-button {
  animation: footer-error-pulse 0.9s ease-in-out 0s 2;
}

/* Scale everything up on larger screens */
@media (min-width: 1280px) {
  html { font-size: 17px; }
}
@media (min-width: 1536px) {
  html { font-size: 18px; }
}
@media (min-width: 1920px) {
  html { font-size: 20px; }
}
@media (min-width: 2560px) {
  html { font-size: 21px; }
}
@media (min-width: 3840px) {
  html { font-size: 22px; }
}