@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

h1, h2, h3, h4, h5, h6 {
    font-family: Inter !important;
}

/* ==================================================
   Container and Card Styling
   ================================================== */

/* Main form container */
.form-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem;
  background-color: transparent;
  min-height: max-content;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Lightning card styling */
lightning-card,
.form-card,
.slds-card {
  width: 100%;
  background: transparent;
  border: none !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  overflow: hidden;
}

.slds-card__header {
  background: transparent;
  border: none;
  padding: 0px;
}

.slds-card__body {
  padding: 0;
}

.form-body {
  padding: 0rem 1.5rem !important;
}

/* ==================================================
   Form Element Base Styling
   ================================================== */

/* Lightning form elements */
lightning-input,
lightning-textarea,
lightning-combobox,
lightning-dual-listbox,
.slds-form-element {
  margin-bottom: 1.5rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Form element containers */
.slds-form-element__control {
  position: relative;
}

/* ==================================================
   Label Styling
   ================================================== */

/* Form labels */
.slds-form-element__label,
lightning-input label,
lightning-textarea label,
lightning-combobox label {
  color: #556A8C !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  margin-bottom: 6px !important;
  display: block !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  line-height: 1.4 !important;
}

/* Required field asterisk */
.slds-required,
abbr.slds-required {
  color: #d32f2f !important;
  font-weight: bold !important;
  margin-right: 4px !important;
}

/* ==================================================
   Input Field Styling
   ================================================== */

/* Text inputs */
.slds-input,
lightning-input input,
lightning-textarea textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 2px solid #d9d9d9 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  color: #17335B !important;
  background-color: white !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 1.4 !important;
}

/* Input focus-visible state with HAP design system */
.slds-input:focus-visible,
lightning-input input:focus-visible,
lightning-textarea textarea:focus-visible,
input:focus-visible,
textarea:focus-visible {
  border-color: #d9d9d9 !important;
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #2684ff !important;
  outline: none !important;
}

/* Fallback for browsers without focus-visible support */
.slds-input:focus:not(:focus-visible),
lightning-input input:focus:not(:focus-visible),
lightning-textarea textarea:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Input hover state */
.slds-input:hover,
lightning-input input:hover,
lightning-textarea textarea:hover,
input:hover,
textarea:hover {
  border-color: #C25700 !important;
}

/* Input placeholder */
.slds-input::placeholder,
lightning-input input::placeholder,
lightning-textarea textarea::placeholder,
input::placeholder,
textarea::placeholder {
  color: #999 !important;
  opacity: 1 !important;
}

/* Disabled inputs */
.slds-input:disabled,
lightning-input input:disabled,
lightning-textarea textarea:disabled,
input:disabled,
textarea:disabled {
  background-color: #f5f5f5 !important;
  border-color: #ccc !important;
  color: #666 !important;
  cursor: not-allowed !important;
}

/* ==================================================
   Button Styling
   ================================================== */

/* Primary buttons */
.slds-button_brand,
.slds-button--brand,
lightning-button button,
.submit-button,
button[type="submit"] {
  background: #181D27 !important;
  background-color: #181D27 !important;
  border: 2px solid #181D27 !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  padding: 10px 24px !important;
  border-radius: 32px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-transform: none !important;
  box-shadow: none !important;
  outline: none !important;
  min-height: auto !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}

/* Button hover state */
.slds-button_brand:hover,
.slds-button--brand:hover,
lightning-button button:hover,
.submit-button:hover,
button[type="submit"]:hover {
  background-color: #C25700 !important;
  background: #C25700 !important;
  border-color: #C25700 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.slds-button_brand:hover::before,
.slds-button--brand:hover::before,
lightning-button button:hover::before,
.submit-button:hover::before,
button[type="submit"]:hover::before,
.slds-button_brand:hover::after,
.slds-button--brand:hover::after,
lightning-button button:hover::after,
.submit-button:hover::after,
button[type="submit"]:hover::after {
  background: unset !important;
  background-color: unset !important;
}

/* Button active state */
.slds-button_brand:active,
.slds-button--brand:active,
lightning-button button:active,
.submit-button:active,
button[type="submit"]:active {
  background-color: #cc5a09 !important;
  border-color: #cc5a09 !important;
  transform: translateY(0) !important;
}

/* Button focus-visible state with HAP design system */
.slds-button_brand:focus-visible,
.slds-button--brand:focus-visible,
lightning-button button:focus-visible,
.submit-button:focus-visible,
button[type="submit"]:focus-visible {
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #2684ff !important;
  outline: none !important;
}

/* Fallback for browsers without focus-visible support */
.slds-button_brand:focus:not(:focus-visible),
.slds-button--brand:focus:not(:focus-visible),
lightning-button button:focus:not(:focus-visible),
.submit-button:focus:not(:focus-visible),
button[type="submit"]:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Secondary buttons - HAP button secondary styling */
.slds-button_neutral,
.slds-button--neutral,
.secondary-button {
  display: flex !important;
  width: max-content !important;
  padding: 10px 24px !important;
  gap: 6px !important;
  justify-content: center !important;
  align-items: center !important;
  text-decoration: none !important;
  border-radius: 32px !important;
  border: 1px solid #181d27 !important;
  background-color: white !important;
  color: #181d27 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.slds-button_neutral:hover,
.slds-button--neutral:hover,
.secondary-button:hover {
  background-color: white !important;
  color: #C25700 !important;
  border-color: #C25700 !important;
}

.slds-button_neutral:focus-visible,
.slds-button--neutral:focus-visible,
.secondary-button:focus-visible {
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #2684ff !important;
  outline: none !important;
}

.slds-button_neutral:focus:not(:focus-visible),
.slds-button--neutral:focus:not(:focus-visible),
.secondary-button:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Secondary button disabled state - HAP styling */
.slds-button_neutral:disabled,
.slds-button--neutral:disabled,
.secondary-button:disabled {
  cursor: not-allowed !important;
  pointer-events: none !important;
  color: #9ca3af !important;
  border-color: #9ca3af !important;
  background-color: white !important;
}

/* Disabled buttons */
.slds-button:disabled,
lightning-button button:disabled,
button:disabled {
  background-color: #f5f5f5 !important;
  border-color: #ccc !important;
  color: #999 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Additional button variants with HAP focus-visible styling */
.slds-button_outline-brand,
.slds-button--outline-brand {
  background-color: transparent !important;
  border: 2px solid #C25700 !important;
  color: #C25700 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  padding: 10px 24px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.slds-button_outline-brand:hover,
.slds-button--outline-brand:hover {
  background-color: #C25700 !important;
  color: white !important;
}

.slds-button_destructive,
.slds-button--destructive {
  background-color: #d32f2f !important;
  border: 2px solid #d32f2f !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  padding: 10px 24px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.slds-button_destructive:hover,
.slds-button--destructive:hover {
  background-color: #b71c1c !important;
  border-color: #b71c1c !important;
}

/* ==================================================
   Dropdown/Combobox Styling
   ================================================== */

/* Combobox containers */
.slds-combobox_container,
.slds-dropdown-trigger {
  width: 100%;
}

/* Combobox input styling */
.slds-combobox__input,
.slds-select {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 2px solid #d9d9d9 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  color: #17335B !important;
  background-color: white !important;
}

.slds-combobox__input:focus-visible,
.slds-select:focus-visible {
  border-color: #d9d9d9 !important;
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #2684ff !important;
}

.slds-combobox__input:focus:not(:focus-visible),
.slds-select:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Dropdown menu */
.slds-dropdown,
.slds-listbox {
  border: 1px solid #d9d9d9 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  background: white !important;
}

/* Dropdown options */
.slds-listbox__option {
  padding: 8px 14px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  color: #17335B !important;
}

.slds-listbox__option:hover,
.slds-listbox__option[aria-selected="true"] {
  background-color: #f4f6f9 !important;
}

/* ==================================================
   Checkbox and Radio Button Styling
   ================================================== */

/* Checkbox containers */
.slds-checkbox,
.slds-radio {
  margin-bottom: 8px;
}

/* Custom checkbox styling - Lightning Web Component structure */
/* Hide the actual input but keep it accessible */
.slds-checkbox input[type="checkbox"],
.slds-radio input[type="radio"] {
  opacity: 0 !important;
  position: absolute !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  cursor: pointer !important;
  z-index: 1 !important;
}

/* Style the visual checkbox indicator */
.slds-checkbox_faux,
.slds-radio_faux:not(.slds-radio_button-group .slds-radio_faux):not(.slds-grid_vertical .slds-radio_faux) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 5px !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
  position: relative !important;
  box-sizing: border-box !important;
  margin-right: 8px !important;
}

.slds-radio_faux:not(.slds-radio_button-group .slds-radio_faux):not(.slds-grid_vertical .slds-radio_faux) {
  border-radius: 50% !important;
}

/* Hover state */
.slds-checkbox:hover .slds-checkbox_faux,
.slds-radio:hover .slds-radio_faux:not(.slds-radio_button-group .slds-radio_faux):not(.slds-grid_vertical .slds-radio_faux) {
  border-color: #111827 !important;
}

/* Focus-visible state for accessibility - HAP design system */
.slds-checkbox input[type="checkbox"]:focus-visible + .slds-checkbox__label .slds-checkbox_faux,
.slds-radio input[type="radio"]:focus-visible + .slds-radio__label .slds-radio_faux:not(.slds-radio_button-group .slds-radio_faux):not(.slds-grid_vertical .slds-radio_faux) {
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #2684ff !important;
  outline: none !important;
}

/* Remove focus styling for non-focus-visible */
.slds-checkbox input[type="checkbox"]:focus:not(:focus-visible) + .slds-checkbox__label .slds-checkbox_faux,
.slds-radio input[type="radio"]:focus:not(:focus-visible) + .slds-radio__label .slds-radio_faux:not(.slds-radio_button-group .slds-radio_faux):not(.slds-grid_vertical .slds-radio_faux) {
  outline: none !important;
  box-shadow: none !important;
}

/* Active state */
.slds-checkbox:active .slds-checkbox_faux,
.slds-radio:active .slds-radio_faux:not(.slds-radio_button-group .slds-radio_faux):not(.slds-grid_vertical .slds-radio_faux) {
  transform: scale(0.95) !important;
}

/* Checked state */
.slds-checkbox input[type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux,
.slds-radio input[type="radio"]:checked + .slds-radio__label .slds-radio_faux:not(.slds-radio_button-group .slds-radio_faux):not(.slds-grid_vertical .slds-radio_faux) {
  background-color: #111827 !important;
  border-color: #111827 !important;
}

/* Checkbox checkmark */
.slds-checkbox input[type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux::after {
  content: "" !important;
  width: 6px !important;
  height: 10px !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin-top: -7px !important;
  margin-left: -3px !important;
  display: block !important;
}

/* Radio button dot */
.slds-radio input[type="radio"]:checked + .slds-radio__label .slds-radio_faux:not(.slds-radio_button-group .slds-radio_faux):not(.slds-grid_vertical .slds-radio_faux)::after {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Checkbox/radio labels */
.slds-checkbox .slds-form-element__label,
.slds-radio .slds-form-element__label,
.slds-checkbox__label,
.slds-radio__label,
.slds-checkbox__label .slds-form-element__label,
.slds-radio__label .slds-form-element__label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  color: #181d27 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.5 !important;
}

/* Ensure proper layout for Lightning checkbox labels */
.slds-checkbox__label {
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
}

/* Position the checkbox container properly */
.slds-checkbox {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  margin-bottom: 8px !important;
}

/* Required asterisk styling */
.slds-checkbox .slds-required,
.slds-radio .slds-required {
  color: #d32f2f !important;
  font-weight: bold !important;
  margin-right: 4px !important;
}

/* Error state styling */
.slds-has-error .slds-checkbox_faux,
.slds-has-error .slds-radio_faux:not(.slds-radio_button-group .slds-radio_faux):not(.slds-grid_vertical .slds-radio_faux) {
  border-color: #d32f2f !important;
  box-shadow: 0 0 0 1px #d32f2f !important;
}

.slds-has-error .slds-checkbox input[type="checkbox"]:focus-visible + .slds-checkbox__label .slds-checkbox_faux,
.slds-has-error .slds-radio input[type="radio"]:focus-visible + .slds-radio__label .slds-radio_faux:not(.slds-radio_button-group .slds-radio_faux):not(.slds-grid_vertical .slds-radio_faux) {
  border-color: #d32f2f !important;
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #f04438 !important;
}

.slds-has-error .slds-checkbox input[type="checkbox"]:focus:not(:focus-visible) + .slds-checkbox__label .slds-checkbox_faux,
.slds-has-error .slds-radio input[type="radio"]:focus:not(:focus-visible) + .slds-radio__label .slds-radio_faux:not(.slds-radio_button-group .slds-radio_faux):not(.slds-grid_vertical .slds-radio_faux) {
  outline: none !important;
  box-shadow: 0 0 0 1px #d32f2f !important;
}

/* Help text styling */
.slds-form-element__help {
  color: #d32f2f !important;
  font-size: 12px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  margin-top: 4px !important;
}

/* Specific styling for radio_faux elements inside grid_vertical (time slots) */
.slds-grid_vertical .slds-radio_faux {
  white-space: nowrap !important;
}

.slds-radio_button [type=radio]:checked+.slds-radio_faux, .slds-radio_button [type=radio]:checked+.slds-radio--faux, .slds-radio_button [type=radio]:checked~.slds-radio_faux, .slds-radio_button [type=radio]:checked~.slds-radio--faux, .slds-radio_button [type=radio]:checked+.slds-radio_button__label, .slds-radio_button [type=radio]:checked+.slds-radio--button__label, .slds-radio--button [type=radio]:checked+.slds-radio_faux, .slds-radio--button [type=radio]:checked+.slds-radio--faux, .slds-radio--button [type=radio]:checked~.slds-radio_faux, .slds-radio--button [type=radio]:checked~.slds-radio--faux, .slds-radio--button [type=radio]:checked+.slds-radio_button__label, .slds-radio--button [type=radio]:checked+.slds-radio--button__label {
    background-color: #181D27 !important;
    color: #ffffff !important;
}

/* ==================================================
   Additional Form Elements (Date, Time, File, Range, etc.)
   ================================================== */

/* Date and Time inputs */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
.slds-input[type="date"],
.slds-input[type="time"],
.slds-input[type="datetime-local"] {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 2px solid #d9d9d9 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  color: #17335B !important;
  background-color: white !important;
  transition: all 0.2s ease !important;
}

input[type="date"]:focus-visible,
input[type="time"]:focus-visible,
input[type="datetime-local"]:focus-visible,
input[type="month"]:focus-visible,
input[type="week"]:focus-visible {
  border-color: #d9d9d9 !important;
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #2684ff !important;
  outline: none !important;
}

/* File input styling */
input[type="file"],
.slds-file-selector__input {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 2px dashed #d9d9d9 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  color: #17335B !important;
  background-color: white !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

input[type="file"]:hover,
.slds-file-selector__input:hover {
  border-color: #C25700 !important;
  background-color: #f4f6f9 !important;
}

input[type="file"]:focus-visible,
.slds-file-selector__input:focus-visible {
  border-color: #d9d9d9 !important;
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #2684ff !important;
  outline: none !important;
}

/* Range slider styling */
input[type="range"],
.slds-slider {
  width: 100% !important;
  height: 6px !important;
  border-radius: 3px !important;
  background: #d9d9d9 !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 10px 0 !important;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 20px !important;
  width: 20px !important;
  border-radius: 50% !important;
  background: #C25700 !important;
  cursor: pointer !important;
  border: 2px solid white !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

input[type="range"]::-moz-range-thumb {
  height: 20px !important;
  width: 20px !important;
  border-radius: 50% !important;
  background: #C25700 !important;
  cursor: pointer !important;
  border: 2px solid white !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

input[type="range"]:focus-visible {
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #2684ff !important;
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #2684ff !important;
}

/* Color picker styling */
input[type="color"],
.slds-color-picker {
  width: 60px !important;
  height: 44px !important;
  padding: 4px !important;
  border: 2px solid #d9d9d9 !important;
  border-radius: 8px !important;
  background-color: white !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

input[type="color"]:hover {
  border-color: #C25700 !important;
}

input[type="color"]:focus-visible {
  border-color: #d9d9d9 !important;
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #2684ff !important;
  outline: none !important;
}

/* Search input styling */
input[type="search"],
.slds-input[type="search"] {
  width: 100% !important;
  padding: 10px 14px 10px 40px !important;
  border: 2px solid #d9d9d9 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  color: #17335B !important;
  background-color: white !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'%3E%3C/path%3E%3C/svg%3E") !important;
  background-position: 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  transition: all 0.2s ease !important;
}

input[type="search"]:focus-visible {
  border-color: #d9d9d9 !important;
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #2684ff !important;
  outline: none !important;
}

/* Number input with spinner controls */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

/* URL input styling */
input[type="url"],
.slds-input[type="url"] {
  width: 100% !important;
  padding: 10px 14px 10px 40px !important;
  border: 2px solid #d9d9d9 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  color: #17335B !important;
  background-color: white !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23666'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1'%3E%3C/path%3E%3C/svg%3E") !important;
  background-position: 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  transition: all 0.2s ease !important;
}

input[type="url"]:focus-visible {
  border-color: #d9d9d9 !important;
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #2684ff !important;
  outline: none !important;
}

/* Hidden input styling */
input[type="hidden"] {
  display: none !important;
}

/* Output element styling */
output,
.slds-form-element__control output {
  display: inline-block !important;
  padding: 8px 12px !important;
  background-color: #f4f6f9 !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 8px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  color: #17335B !important;
  font-weight: 500 !important;
}

/* Multi-select listbox styling */
.slds-listbox_vertical,
.slds-dueling-list {
  border: 2px solid #d9d9d9 !important;
  border-radius: 8px !important;
  background: white !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

.slds-listbox_vertical .slds-listbox__option,
.slds-dueling-list .slds-listbox__option {
  padding: 8px 14px !important;
  font-size: 14px !important;
  color: #17335B !important;
  border-bottom: 1px solid #f4f6f9 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.slds-listbox_vertical .slds-listbox__option:hover,
.slds-dueling-list .slds-listbox__option:hover {
  background-color: #f4f6f9 !important;
}

.slds-listbox_vertical .slds-listbox__option[aria-selected="true"],
.slds-dueling-list .slds-listbox__option[aria-selected="true"] {
  background-color: #C25700 !important;
  color: white !important;
}

/* Progress indicator styling */
.slds-progress-bar,
progress {
  width: 100% !important;
  height: 8px !important;
  border: none !important;
  border-radius: 4px !important;
  background-color: #f4f6f9 !important;
  overflow: hidden !important;
}

.slds-progress-bar__value,
progress::-webkit-progress-bar {
  background-color: #f4f6f9 !important;
  border-radius: 4px !important;
}

.slds-progress-bar__value,
progress::-webkit-progress-value {
  background-color: #C25700 !important;
  border-radius: 4px !important;
  transition: width 0.3s ease !important;
}

progress::-moz-progress-bar {
  background-color: #C25700 !important;
  border-radius: 4px !important;
}

/* Fieldset and legend styling */
fieldset,
.slds-form-element fieldset {
  border: 1px solid #d9d9d9 !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 16px 0 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

legend,
.slds-form-element legend {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #17335B !important;
  padding: 0 8px !important;
  margin-bottom: 8px !important;
}

/* Toggle/switch styling */
.slds-checkbox_toggle,
.slds-switch {
  position: relative !important;
  display: inline-block !important;
  width: 48px !important;
  height: 24px !important;
}

.slds-checkbox_toggle input,
.slds-switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.slds-checkbox_toggle .slds-checkbox_faux,
.slds-switch .slds-switch__track {
  position: absolute !important;
  cursor: pointer !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: #d9d9d9 !important;
  transition: 0.2s !important;
  border-radius: 24px !important;
}

.slds-checkbox_toggle .slds-checkbox_faux:before,
.slds-switch .slds-switch__track:before {
  position: absolute !important;
  content: "" !important;
  height: 18px !important;
  width: 18px !important;
  left: 3px !important;
  bottom: 3px !important;
  background-color: white !important;
  transition: 0.2s !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.slds-checkbox_toggle input:checked + .slds-checkbox_faux,
.slds-switch input:checked + .slds-switch__track {
  background-color: #C25700 !important;
}

.slds-checkbox_toggle input:checked + .slds-checkbox_faux:before,
.slds-switch input:checked + .slds-switch__track:before {
  transform: translateX(24px) !important;
}

.slds-checkbox_toggle input:focus-visible + .slds-checkbox_faux,
.slds-switch input:focus-visible + .slds-switch__track {
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #2684ff !important;
}

/* ==================================================
   Error States
   ================================================== */

/* Error message styling */
.slds-form-element__help,
.slds-has-error .slds-form-element__help,
.error-message {
  color: #d32f2f !important;
  font-size: 12px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  margin-top: 4px !important;
  display: block !important;
}

/* Input error state */
.slds-has-error .slds-input,
.slds-has-error input,
.error .slds-input,
.error input {
  border-color: #d32f2f !important;
}

/* Error focus state */
.slds-has-error .slds-input:focus-visible,
.slds-has-error input:focus-visible,
.error .slds-input:focus-visible,
.error input:focus-visible {
  border-color: #d32f2f !important;
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #f04438 !important;
  outline: none !important;
}

/* ==================================================
   Success States
   ================================================== */

/* Success message */
.slds-form-element__help.success,
.success-message {
  color: #4caf50 !important;
  font-size: 12px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Success input state */
.success .slds-input,
.success input {
  border-color: #4caf50 !important;
}

/* Success focus state */
.success .slds-input:focus-visible,
.success input:focus-visible {
  border-color: #4caf50 !important;
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #4caf50 !important;
  outline: none !important;
}

/* ==================================================
   Loading and Disabled States
   ================================================== */

/* Loading spinner */
.slds-spinner,
.loading-spinner {
  border: 2px solid #f4f6f9;
  border-top: 2px solid #C25700;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==================================================
   Responsive Design
   ================================================== */

@media (max-width: 768px) {
  .form-container {
    padding: 1rem;
  }
  
  .form-body {
    padding: 0rem 1rem !important;
  }
  
  lightning-card,
  .form-card,
  .slds-card {
    max-width: 100%;
  }
  
  .slds-input,
  lightning-input input,
  input {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
}

/* ==================================================
   Salesforce Lightning Design System Overrides
   ================================================== */

/* Remove SLDS default styling that conflicts with HAP design */
.slds-form-element__control .slds-input,
.slds-form-element__control .slds-textarea,
.slds-form-element__control .slds-select {
  background-color: white !important;
  border-color: #d9d9d9 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Override SLDS focus states with HAP design system */
.slds-has-focus .slds-input,
.slds-has-focus .slds-textarea,
.slds-has-focus .slds-select {
  border-color: #d9d9d9 !important;
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #2684ff !important;
}

/* Override SLDS button focus with HAP focus-visible pattern */
.slds-button:focus-visible,
.slds-button_brand:focus-visible,
.slds-button_neutral:focus-visible,
.slds-button_outline-brand:focus-visible,
.slds-button_destructive:focus-visible,
lightning-button:focus-visible,
lightning-button button:focus-visible {
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #2684ff !important;
  outline: none !important;
}

.slds-button:focus:not(:focus-visible),
.slds-button_brand:focus:not(:focus-visible),
.slds-button_neutral:focus:not(:focus-visible),
.slds-button_outline-brand:focus:not(:focus-visible),
.slds-button_destructive:focus:not(:focus-visible),
lightning-button:focus:not(:focus-visible),
lightning-button button:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* ==================================================
   Form Submission Section
   ================================================== */

.submit-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1rem;
}

/* ==================================================
   Accessibility Enhancements
   ================================================== */

/* HAP focus ring for keyboard navigation */
*:focus-visible {
  box-shadow: 0px 0px 0px 2px white, 0px 0px 0px 4px #2684ff;
  outline: none;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .slds-input,
  lightning-input input,
  input {
    border-width: 3px !important;
  }
  
  .slds-button_brand,
  lightning-button button {
    border-width: 3px !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* for hover change color to "digital teal" for service resources  for story # SFSTRY0029239 */
.slds-visual-picker input:not(:disabled)~label:hover .slds-visual-picker__figure {
     border: 1px solid #C25700 ;
     box-shadow: none !important;    
}

/* color change for today TEXT (ex:- MON 11  TUE 12 )  for story # SFSTRY0029239 */
.runtime_appointmentbookingFlowTimeslot .today {
    color: #C25700 !important;
}

/* Time slot color to "digital teal" for the border and fill for story # SFSTRY0029239*/
.runtime_appointmentbookingFlowTimeslot.slds-radio_button-group.slds-button.slds-radio_button.label {
    width: 100%;
    text-align: center;
    border:solid !important;
    border-radius: .0rem !important;
    box-shadow:none !important;
    border: 1px solid #C25700 ;
}

/* for the time slots  adjustment in the border size and  color" for story # SFSTRY0029239 */
.runtime_appointmentbookingFlowTimeslot .slds-radio_button-group .slds-button.slds-radio_button, .runtime_appointmentbookingFlowTimeslot .slds-radio_button-group .slds-button.slds-radio_button label {
    border-radius: .0rem !important;
     border: 2px solid #C25700 !important;
     box-shadow: none !important;
  }

/* for the "Benefit consulation phone call "box width adjustment in the border color"  for story # SFSTRY0029239 */

.slds-visual-picker input:checked~label .slds-visual-picker__text {      
    border: 3px solid #C25700 !important;
     box-shadow: none !important;
}

/* for the "Benefit consulation phone call "box width ajustment" for story # SFSTRY0029239 */
.slds-visual-picker.slds-visual-picker_vertical.responsiveCard.runtime_appointmentbookingVisualPickerCard{
    max-width:27rem;     
}
/*  Time slots time color and font  for story # SFSTRY0029239 */
.slds-button.slds-radio_button {
    color:black;
    font-family:Inter;
} 

/*  Next button to avoid square border for story # SFSTRY0029239 */
.slds-button.flow-button__NEXT{
    border:none !important;
      box-shadow: none !important; 
 }

/*  PREV button to avoid square border for story # SFSTRY0029239 */
.slds-button.flow-button__BACK{
     border:none !important;
      box-shadow: none !important; 
 }

/*  Previous and Today button for story # SFSTRY0029239 */
.slds-button.slds-button_neutral {
    color: #C25700;
    background-color: rgb(255, 255, 255);
    font-size: 20px ; 
    font-family:Inter;
    font-weight: bold;
    padding-left: 24px ;
    padding-right: 24px ;
    padding-top: 10px ;
    padding-bottom: 10px ;
    border-radius:32px;
    border-color: #C25700;
    border-spacing:bold;
    border-color: 3px solid #C25700;
    box-shadow: none; 
}

/* Medicare Consultation Phone Call  OR  Benefit Consultation Phone Call  (work type group) TEXT NAME ONLY for story # SFSTRY0029239*/
.slds-text-heading_medium{
      font-family:Inter;
      font-size: 24px; 
}

/* Select Appointment Topic  TEXT for story # SFSTRY0029239   */
.slds-text-heading_large{
    font-family:Inter; 
    font-size: 34px;
}

/*What is this appointment about? TEXT  for story # SFSTRY0029239 */
.slds-text-body_regular{
     font-family:Inter;
     font-size: 19px; 
}

/* 20 minute quick call TEXT for story # SFSTRY0029239 */
.slds-text-title{
      font-family:Inter;
      font-size: 16px; 
}

.embeddedServiceSidebarMinimizedDefaultUI {
    padding:0;
    border: rgb(255, 104, 9);
    background-color: rgb(255, 255, 255); 
}
li.mainNavItem:first-of-type{
    visibility: hidden;
}

li.mainNavItem:nth-of-type(2){
   padding-left: 0 ;
}
.embeddedServiceSidebarMinimizedDefaultUI .content {
    background-color: rgb(255, 255, 255);
}

li.mainNavItem {
  font-weight: bold ;
  font-size: 16px ;
}

li.mainNavItem {
  font-family:Inter;
}

/* To avoid the click event on the logo */
.forceCommunityThemeLogo {
    pointer-events: none;     cursor: default; 
}

/* Below 3 methods are modified based on the story SFSTRY0032248  */

.runtime_appointmentbookingFlowTimeslot .fsc-radio-labels .slds-form-element__control .slds-radio_button-group .slds-radio_button{
    border: 0 !important;
}

.slds-button:hover, .slds-button:focus, .slds-button:active, .slds-button:visited{
    border: 1px solid #C25700;
    box-shadow: 0px 0px 0px 1px #C25700; 
}

.slds-input:focus{
    /*  --slds-c-input-shadow: var(--slds-c-input-shadow-focus, var(--slds-g-shadow-outline-focus-1, var(--lwc-shadowButtonFocus, 0 0 3px #FF0000)));  */
    border: 2px solid #C25700;
    box-shadow: none;
}

.slds-visual-picker input:checked~label .slds-visual-picker__text:after {
    border-right-color: #C25700 !important;
    border-top-color: #C25700 !important;
}

.slds-media {
    font-family: Inter !important;
}

.slds-icon-standard-person-account {
    background-color: #181D27 !important;
}

.slds-visual-picker:hover {
    background-color: #F9F7F4;
}

.slds-input-has-icon > .slds-input {
    padding-left: 2rem !important;
}