/* ===== TEXT COLOR OVERRIDE ===== */
#ssa-booking-app *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.ssa-icon):not(path):not(svg) {
  color: #001473 !important;
}

/* Inputs */
#ssa-booking-app input, 
#ssa-booking-app textarea, 
#ssa-booking-app select {
  color: #001473 !important;
}

/* Placeholders */
#ssa-booking-app input::placeholder, 
#ssa-booking-app textarea::placeholder {
  color: #001473 !important;
  opacity: 0.7;
}

/* SVG */
#ssa-booking-app svg:not(.fa-svg) path {
  fill: #001473 !important;
}

/* ===== TRANSPARENT BACKGROUNDS ===== */
#ssa-booking-app,
#ssa-booking-app .ssa-appointment-form,
#ssa-booking-app .ssa-form-container,
#ssa-booking-app .ssa-form-section,
#ssa-booking-app .ssa-date-container,
#ssa-booking-app .ssa-time-container,
#ssa-booking-app .ssa-datetime-container,
#ssa-booking-app .ssa-details-container,
#ssa-booking-app .ssa-confirmation-container,
#ssa-booking-app .ssa-tab,
#ssa-booking-app .ssa-time-slot-button,
#ssa-booking-app .ssa-button,
#ssa-booking-app .ssa-edit-appointment,
#ssa-booking-app .ssa-progress-bar-step {
  background: transparent !important;
  background-color: transparent !important;
}

/* Remove box shadows and borders */
#ssa-booking-app .ssa-form-container,
#ssa-booking-app .ssa-time-slot-button,
#ssa-booking-app .ssa-button,
#ssa-booking-app .ssa-tab {
  box-shadow: none !important;
  border: none !important;
}

/* Input fields */
#ssa-booking-app input,
#ssa-booking-app textarea,
#ssa-booking-app select {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(0,20,115,0.2) !important;
}

/* ===== BUTTON & INTERACTIVE ELEMENT STYLING ===== */
/* Base styles for all interactive elements */
#ssa-booking-app .ssa-button,
#ssa-booking-app .ssa-time-slot-button,
#ssa-booking-app .ssa-tab,
#ssa-booking-app .ssa-confirm-button,
#ssa-booking-app .ssa-continue-button,
#ssa-booking-app .ssa-back-button,
#ssa-booking-app .ssa-edit-appointment,
#ssa-booking-app .ssa-reschedule-appointment,
#ssa-booking-app .ssa-cancel-appointment,
#ssa-booking-app .ssa-appointment-type,
#ssa-booking-app .ssa-progress-bar-step,
#ssa-booking-app .ssa-calendar-day {
  /* Required for effects */
  position: relative !important;
  cursor: pointer !important;
  overflow: visible !important;
  z-index: 1 !important;
  
  /* Transitions */
  transition: 
    color 0.2s linear,
    box-shadow 0.3s linear,
    background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.3s ease !important;
}

/* Underline animation elements */
#ssa-booking-app .ssa-button::before,
#ssa-booking-app .ssa-button::after,
#ssa-booking-app .ssa-time-slot-button::before,
#ssa-booking-app .ssa-time-slot-button::after,
#ssa-booking-app .ssa-tab::before,
#ssa-booking-app .ssa-tab::after,
#ssa-booking-app .ssa-confirm-button::before,
#ssa-booking-app .ssa-confirm-button::after,
#ssa-booking-app .ssa-continue-button::before,
#ssa-booking-app .ssa-continue-button::after,
#ssa-booking-app .ssa-back-button::before,
#ssa-booking-app .ssa-back-button::after,
#ssa-booking-app .ssa-edit-appointment::before,
#ssa-booking-app .ssa-edit-appointment::after,
#ssa-booking-app .ssa-reschedule-appointment::before,
#ssa-booking-app .ssa-reschedule-appointment::after,
#ssa-booking-app .ssa-cancel-appointment::before,
#ssa-booking-app .ssa-cancel-appointment::after,
#ssa-booking-app .ssa-appointment-type::before,
#ssa-booking-app .ssa-appointment-type::after,
#ssa-booking-app .ssa-progress-bar-step::before,
#ssa-booking-app .ssa-progress-bar-step::after,
#ssa-booking-app .ssa-calendar-day::before,
#ssa-booking-app .ssa-calendar-day::after {
  content: '';
  position: absolute !important;
  pointer-events: none;
  left: 50% !important;
  width: 0% !important;
  height: 2px !important;
  background-color: #fff !important;
  transition: 
    width 0.25s cubic-bezier(0.5, 0.8, 0.5, 0.5), 
    left 0.25s cubic-bezier(0.5, 0.8, 0.5, 0.5) !important;
  z-index: 2 !important;
}

/* Top lines */
#ssa-booking-app .ssa-button::before,
#ssa-booking-app .ssa-time-slot-button::before,
#ssa-booking-app .ssa-tab::before,
#ssa-booking-app .ssa-confirm-button::before,
#ssa-booking-app .ssa-continue-button::before,
#ssa-booking-app .ssa-back-button::before,
#ssa-booking-app .ssa-edit-appointment::before,
#ssa-booking-app .ssa-reschedule-appointment::before,
#ssa-booking-app .ssa-cancel-appointment::before,
#ssa-booking-app .ssa-appointment-type::before,
#ssa-booking-app .ssa-progress-bar-step::before,
#ssa-booking-app .ssa-calendar-day::before {
  top: 0 !important;
}

/* Bottom lines */
#ssa-booking-app .ssa-button::after,
#ssa-booking-app .ssa-time-slot-button::after,
#ssa-booking-app .ssa-tab::after,
#ssa-booking-app .ssa-confirm-button::after,
#ssa-booking-app .ssa-continue-button::after,
#ssa-booking-app .ssa-back-button::after,
#ssa-booking-app .ssa-edit-appointment::after,
#ssa-booking-app .ssa-reschedule-appointment::after,
#ssa-booking-app .ssa-cancel-appointment::after,
#ssa-booking-app .ssa-appointment-type::after,
#ssa-booking-app .ssa-progress-bar-step::after,
#ssa-booking-app .ssa-calendar-day::after {
  bottom: 0 !important;
}

/* ===== HOVER/FOCUS EFFECTS ===== */
#ssa-booking-app .ssa-button:hover,
#ssa-booking-app .ssa-button:focus,
#ssa-booking-app .ssa-time-slot-button:hover,
#ssa-booking-app .ssa-time-slot-button:focus,
#ssa-booking-app .ssa-tab:hover,
#ssa-booking-app .ssa-tab:focus,
#ssa-booking-app .ssa-confirm-button:hover,
#ssa-booking-app .ssa-confirm-button:focus,
#ssa-booking-app .ssa-continue-button:hover,
#ssa-booking-app .ssa-continue-button:focus,
#ssa-booking-app .ssa-back-button:hover,
#ssa-booking-app .ssa-back-button:focus,
#ssa-booking-app .ssa-edit-appointment:hover,
#ssa-booking-app .ssa-edit-appointment:focus,
#ssa-booking-app .ssa-reschedule-appointment:hover,
#ssa-booking-app .ssa-reschedule-appointment:focus,
#ssa-booking-app .ssa-cancel-appointment:hover,
#ssa-booking-app .ssa-cancel-appointment:focus,
#ssa-booking-app .ssa-appointment-type:hover,
#ssa-booking-app .ssa-appointment-type:focus,
#ssa-booking-app .ssa-progress-bar-step:hover,
#ssa-booking-app .ssa-progress-bar-step:focus,
#ssa-booking-app .ssa-calendar-day:hover,
#ssa-booking-app .ssa-calendar-day:focus {
  box-shadow: 0 0 30px rgba(67, 97, 238, 0.8) !important;
  background-color: rgba(250, 250, 250, 0.9) !important;
  color: rgba(67, 97, 238, 1) !important;
  transform: translateY(-2px) !important;
}

/* Underline animation on hover */
#ssa-booking-app .ssa-button:hover::before,
#ssa-booking-app .ssa-button:focus::before,
#ssa-booking-app .ssa-button:hover::after,
#ssa-booking-app .ssa-button:focus::after,
#ssa-booking-app .ssa-time-slot-button:hover::before,
#ssa-booking-app .ssa-time-slot-button:focus::before,
#ssa-booking-app .ssa-time-slot-button:hover::after,
#ssa-booking-app .ssa-time-slot-button:focus::after,
#ssa-booking-app .ssa-tab:hover::before,
#ssa-booking-app .ssa-tab:focus::before,
#ssa-booking-app .ssa-tab:hover::after,
#ssa-booking-app .ssa-tab:focus::after,
#ssa-booking-app .ssa-confirm-button:hover::before,
#ssa-booking-app .ssa-confirm-button:focus::before,
#ssa-booking-app .ssa-confirm-button:hover::after,
#ssa-booking-app .ssa-confirm-button:focus::after,
#ssa-booking-app .ssa-continue-button:hover::before,
#ssa-booking-app .ssa-continue-button:focus::before,
#ssa-booking-app .ssa-continue-button:hover::after,
#ssa-booking-app .ssa-continue-button:focus::after,
#ssa-booking-app .ssa-back-button:hover::before,
#ssa-booking-app .ssa-back-button:focus::before,
#ssa-booking-app .ssa-back-button:hover::after,
#ssa-booking-app .ssa-back-button:focus::after,
#ssa-booking-app .ssa-edit-appointment:hover::before,
#ssa-booking-app .ssa-edit-appointment:focus::before,
#ssa-booking-app .ssa-edit-appointment:hover::after,
#ssa-booking-app .ssa-edit-appointment:focus::after,
#ssa-booking-app .ssa-reschedule-appointment:hover::before,
#ssa-booking-app .ssa-reschedule-appointment:focus::before,
#ssa-booking-app .ssa-reschedule-appointment:hover::after,
#ssa-booking-app .ssa-reschedule-appointment:focus::after,
#ssa-booking-app .ssa-cancel-appointment:hover::before,
#ssa-booking-app .ssa-cancel-appointment:focus::before,
#ssa-booking-app .ssa-cancel-appointment:hover::after,
#ssa-booking-app .ssa-cancel-appointment:focus::after,
#ssa-booking-app .ssa-appointment-type:hover::before,
#ssa-booking-app .ssa-appointment-type:focus::before,
#ssa-booking-app .ssa-appointment-type:hover::after,
#ssa-booking-app .ssa-appointment-type:focus::after,
#ssa-booking-app .ssa-progress-bar-step:hover::before,
#ssa-booking-app .ssa-progress-bar-step:focus::before,
#ssa-booking-app .ssa-progress-bar-step:hover::after,
#ssa-booking-app .ssa-progress-bar-step:focus::after,
#ssa-booking-app .ssa-calendar-day:hover::before,
#ssa-booking-app .ssa-calendar-day:focus::before,
#ssa-booking-app .ssa-calendar-day:hover::after,
#ssa-booking-app .ssa-calendar-day:focus::after {
  width: 100% !important;
  left: 0% !important;
}

/* ===== LOADING PRIORITY FIX ===== */
/* Add this if styles aren't applying */
body #ssa-booking-app,
body #ssa-booking-app * {
  /* Forces higher specificity */
}