/**
 * Force text color to be visible in appointment details
 * This ensures all text is black/dark and visible
 */

/* Force text color on all form elements */
.mbs-booking-form-react,
.mbs-booking-form-react * {
    color: #111827 !important;
}

/* But allow placeholders to be gray */
.mbs-booking-form-react input::placeholder,
.mbs-booking-form-react select::placeholder,
.mbs-booking-form-react textarea::placeholder {
    color: #9ca3af !important;
}

/* Ensure button text is visible - highest priority (exclude intl-tel country button: dial must stay light on brand strip) */
.mbs-booking-form-react button:not(.iti__selected-country),
.mbs-booking-form-react button:not(.iti__selected-country) span,
.mbs-booking-form-react button:not(.iti__selected-country) *,
.mbs-booking-form-react button[type="button"]:not(.iti__selected-country),
.mbs-booking-form-react button[type="button"]:not(.iti__selected-country) span,
.mbs-booking-form-react button[type="button"]:not(.iti__selected-country) * {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Ensure selected values in dropdowns are visible */
.mbs-booking-form-react [role="button"],
.mbs-booking-form-react [role="button"] span,
.mbs-booking-form-react [role="button"] * {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Override any transparent or white text */
.mbs-booking-form-react * {
    -webkit-text-fill-color: #111827 !important;
}

/* Ensure labels are visible */
.mbs-booking-form-react label {
    color: #374151 !important;
}

/* Fix for React component text */
.mbs-booking-form-react span {
    color: #111827 !important;
}

/* Ensure all text inputs have visible text */
.mbs-booking-form-react input[type="text"],
.mbs-booking-form-react input[type="email"],
.mbs-booking-form-react input[type="tel"],
.mbs-booking-form-react input[type="date"],
.mbs-booking-form-react input[type="time"] {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* Wizard choice pills: readable text on brand fill (overrides force-black rules above). */
.mbs-booking-form-react button.mbs-wiz-choice-pill {
    color: var(--mbs-wizard-pill-text, #0f172a) !important;
    -webkit-text-fill-color: var(--mbs-wizard-pill-text, #0f172a) !important;
}
.mbs-booking-form-react button.mbs-wiz-choice-pill *,
.mbs-booking-form-react button.mbs-wiz-choice-pill span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}
.mbs-booking-form-react button.mbs-wiz-choice-pill--selected,
.mbs-booking-form-react button.mbs-wiz-choice-pill--selected *,
.mbs-booking-form-react button.mbs-wiz-choice-pill--selected span {
    color: var(--mbs-wizard-pill-selected-text, #ffffff) !important;
    -webkit-text-fill-color: var(--mbs-wizard-pill-selected-text, #ffffff) !important;
}

/* Primary actions (hero CTA, wizard Continue/Submit/Pay, default submit): honor theme button text on brand fill */
.mbs-booking-form-react button.mbs-btn-on-brand,
.mbs-booking-form-react button.mbs-booking-hero__cta,
.mbs-booking-form-react button.mbs-btn-on-brand *,
.mbs-booking-form-react button.mbs-btn-on-brand span,
.mbs-booking-form-react button.mbs-booking-hero__cta *,
.mbs-booking-form-react button.mbs-booking-hero__cta span {
    color: var(--mbs-button-text, #ffffff) !important;
    -webkit-text-fill-color: var(--mbs-button-text, #ffffff) !important;
}

/* intl-tel-input: dial code only — white on hero brand strip (must beat * / span force-black above). */
.mbs-booking-form-react.mbs-booking-hero .iti .iti__selected-dial-code,
.mbs-booking-form-react.mbs-booking-hero .iti span.iti__selected-dial-code {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* v25 uses div.iti__selected-dial-code — extra chain beats themes and the * fill rule */
.mbs-booking-form-react.mbs-booking-hero .iti.iti--separate-dial-code div.iti__selected-dial-code {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.mbs-booking-form-react:not(.mbs-booking-hero) .iti.iti--separate-dial-code div.iti__selected-dial-code {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

/* intl-tel typed number: never inherit white / autofill wash — must stay dark on white field */
.mbs-booking-form-react .iti input.iti__tel-input,
.mbs-booking-form-react .iti input.iti__tel-input[type="tel"],
.mbs-booking-form-react.mbs-booking-hero .iti input.iti__tel-input,
.mbs-booking-form-react.mbs-booking-hero .iti input.iti__tel-input[type="tel"] {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    caret-color: #111827 !important;
    background-color: #ffffff !important;
}