/*
 * bookly.css — Bookly booking form integration
 *
 * Bookly builds its form in the BROWSER, not on the server. The server sends
 * only `.bookly-form.bookly-css-root` and JavaScript fills it in. So unlike
 * tutor.css and woocommerce.css, these selectors could not be taken from the
 * page source — they were captured from the live DOM of page 4163 (حجز موعد)
 * in a real browser on 29 Aug 2026, after the form had rendered: 115 elements.
 *
 * Loaded only where alrasly_page_needs_bookly() is true — see
 * inc/asset-trimming.php. Bookly's own 13 stylesheets (730 KB, including
 * Bootstrap, FontAwesome and Tailwind) now load only on the two booking pages
 * instead of on all 14 page types.
 *
 * TWO MEASURED PROBLEMS THIS FILE FIXES
 *
 * 1. Touch targets. Measured heights in the live form: <select> 32px,
 *    <input> 23px, stepper buttons 0px. The design system requires 44px.
 *    23px is less than half.
 * 2. A white calendar. Bookly's prefixed Tailwind puts `bookly:bg-white` on
 *    the datepicker container, which lands as a white slab on a #0E0A24 page.
 */

/* ------------------------------------------------------------------ *
 * CONTAINER
 * ------------------------------------------------------------------ */

.bookly-form,
.bookly-css-root {
	color: var(--wp--preset--color--text);
	font-family: inherit;
}

.bookly-form .bookly-box,
.bookly-form .bookly-table {
	background-color: transparent;
	color: var(--wp--preset--color--text);
	border-color: rgba(255, 255, 255, 0.1);
}

/*
 * Bookly paints its form labels in its brand blue #1D63A9. Measured against
 * --ground (#0E0A24) that is 3.14:1 — it fails WCAG AA for normal text, and
 * this is a paid-consultation booking flow, so labels have to be legible.
 *
 * KNOWN UNRESOLVED — this rule does NOT currently win. Measured on 29 Aug 2026
 * across all 12 labels in the form: the computed colour is still #1D63A9 at
 * 3.14:1, with `.bookly-form label.bookly-col-label { ... !important }` in
 * place and the stylesheet confirmed loading fresh (?ver=0.2.1).
 *
 * What is ruled out: it is not an inline style (the elements carry no style
 * attribute and no inline priority), not a caching artefact, and not JavaScript
 * repainting — the button rule below, which needed only !important, DOES win
 * and now renders --brand. So a Bookly rule with specificity above (0,2,1) and
 * its own !important is beating this one, in a stylesheet that could not be
 * enumerated from script.
 *
 * TO FIX: open the form in browser devtools, read the winning selector off the
 * computed-styles panel, and match it here. The cleaner fix is Bookly's own
 * Appearance setting, which is where #1D63A9 is configured — but that is a
 * `bookly*` row in wp_options, which CLAUDE.md forbids writing, so it needs to
 * be changed by hand in the Bookly admin rather than by this project.
 *
 * The rule is left in place because it is correct and costs nothing; it will
 * start working as soon as the selector is matched.
 */
.bookly-form label.bookly-col-label,
.bookly-form .bookly-col-label,
.bookly-form label {
	color: var(--wp--preset--color--text-2) !important;
	letter-spacing: 0;
}

.bookly-form .bookly-bold {
	color: var(--wp--preset--color--text);
	font-weight: 500;
}

/* ------------------------------------------------------------------ *
 * TOUCH TARGETS — the main accessibility fix
 *
 * Measured before: select 32px, input 23px, next/prev step buttons 0px.
 * Bookly sets these inline-ish through Bootstrap, so the override needs to
 * beat a class selector; a plain element selector is not enough.
 * ------------------------------------------------------------------ */

.bookly-form select,
.bookly-form input[type="text"],
.bookly-form input[type="email"],
.bookly-form input[type="tel"],
.bookly-form input[type="number"],
.bookly-form input[type="date"],
.bookly-form textarea,
.bookly-form .bookly-date-from,
.bookly-form .bookly-js-select-time-from,
.bookly-form .bookly-js-select-time-to {
	min-height: 44px;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--ground-alt);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	color: var(--wp--preset--color--text);
	padding-block: 0.5rem;
	padding-inline: 0.875rem;
	font-family: inherit;
	font-size: 1rem; /* 16px — stops iOS zooming the page on focus. */
	letter-spacing: 0;
}

.bookly-form select option {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
}

.bookly-form input::placeholder,
.bookly-form textarea::placeholder {
	color: var(--wp--preset--color--text-3);
}

.bookly-form select:focus,
.bookly-form input:focus,
.bookly-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-color: transparent;
}

/* Checkboxes and radios keep their visible size but gain a 44px hit area. */
.bookly-form input[type="checkbox"],
.bookly-form input[type="radio"] {
	min-width: 24px;
	min-height: 24px;
	accent-color: var(--wp--preset--color--brand);
}

.bookly-form input[type="checkbox"] + label,
.bookly-form input[type="radio"] + label {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* ------------------------------------------------------------------ *
 * BUTTONS
 *
 * Bookly wraps its buttons in Ladda (spinner library). The measured height of
 * the mobile step buttons was 0px because Ladda collapses them until active.
 * ------------------------------------------------------------------ */

.bookly-form .bookly-btn,
.bookly-form .ladda-button,
.bookly-form button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-block: 0.5rem;
	padding-inline: 1.5rem;
	border: 0;
	border-radius: 8px;
	/* !important for the same reason as .bookly-col-label above — Bookly
	   repaints buttons in #1D63A9 from JavaScript after render. */
	background-color: var(--wp--preset--color--brand) !important;
	color: #ffffff !important; /* 5.55 on --brand — AA. */
	font-family: inherit;
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: 0;
	cursor: pointer;
}

.bookly-form .bookly-btn:hover,
.bookly-form .ladda-button:hover,
.bookly-form .bookly-btn:focus-visible {
	background-color: #6b2ee0;
	color: #ffffff;
}

.bookly-form .ladda-label {
	color: inherit;
	letter-spacing: 0;
}

/*
 * The final confirm action is the accent moment on a booking page.
 * White on --accent is 1.76:1 — a hard fail. The label must be --ground.
 */
.bookly-form .bookly-js-next-step.bookly-btn-submit,
.bookly-form .bookly-js-book-appointment,
.bookly-form [class*="bookly-js-confirm"] {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ground);
}

/* Bookly hides step buttons by collapsing them; do not force them visible. */
.bookly-form .bookly-none {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 * STEPPER / PROGRESS
 * ------------------------------------------------------------------ */

.bookly-form .bookly-progress-tracker,
.bookly-form .bookly-stepper,
.bookly-form .bookly-nav-steps {
	background-color: transparent;
	color: var(--wp--preset--color--text-2);
}

.bookly-form .bookly-progress-tracker .step {
	color: var(--wp--preset--color--text-3);
	letter-spacing: 0;
}

.bookly-form .bookly-progress-tracker .step.active,
.bookly-form .bookly-step-active {
	color: var(--wp--preset--color--text);
}

.bookly-form .bookly-progress-tracker .step.active::after,
.bookly-form .bookly-step-active::after {
	background-color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------------ *
 * DATEPICKER
 *
 * `bookly:bg-white` is Bookly's prefixed Tailwind. The colon must be escaped
 * in a CSS selector. Left alone it renders a white calendar popover on a
 * #0E0A24 page.
 * ------------------------------------------------------------------ */

.bookly-form .bookly-js-datepicker-container,
.bookly-form .bookly-js-datepicker-calendar,
.bookly-form .bookly\:bg-white {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
}

.bookly-form .bookly-week-days,
.bookly-form .bookly-week-days * {
	color: var(--wp--preset--color--text-2);
	letter-spacing: 0;
}

.bookly-form .bookly-js-datepicker-calendar td,
.bookly-form .bookly-js-datepicker-calendar th {
	color: var(--wp--preset--color--text);
}

/* Individual day cells need a real hit area — they are the smallest control
   in the whole flow. */
.bookly-form .bookly-js-datepicker-calendar td {
	min-width: 44px;
	height: 44px;
	text-align: center;
	vertical-align: middle;
}

.bookly-form .bookly-available-date,
.bookly-form .bookly-js-available-date {
	color: var(--wp--preset--color--text);
}

/* ------------------------------------------------------------------ *
 * RTL CORRECTIONS
 *
 * bookly-left / bookly-right are PHYSICAL float classes — Bookly emits them
 * regardless of direction, so in Arabic the "next" button floats to the wrong
 * side. bookly-rtl.css handles this when WPML serves an Arabic page, but it is
 * one of the sheets we no longer load site-wide, and it does not cover the
 * runtime-rendered stepper.
 * ------------------------------------------------------------------ */

html[dir="rtl"] .bookly-form .bookly-left {
	float: right;
}

html[dir="rtl"] .bookly-form .bookly-right {
	float: left;
}

html[dir="rtl"] .bookly-form,
html[dir="rtl"] .bookly-form * {
	letter-spacing: 0;
}

html[dir="rtl"] .bookly-form .bookly-table,
html[dir="rtl"] .bookly-form .bookly-col-label {
	text-align: right;
}

/* Times and dates are Western numerals; isolate them from the RTL run so the
   digits are not reordered around the separator. */
html[dir="rtl"] .bookly-form .bookly-js-select-time-from,
html[dir="rtl"] .bookly-form .bookly-js-select-time-to,
html[dir="rtl"] .bookly-form .bookly-date-from {
	direction: ltr;
	text-align: right;
	unicode-bidi: isolate;
}

/* Bookly's datepicker arrows are directional glyphs. */
html[dir="rtl"] .bookly-form .bookly-js-datepicker-calendar .prev,
html[dir="rtl"] .bookly-form .bookly-js-datepicker-calendar .next {
	transform: scaleX(-1);
}

/* ── Bookly's error messages were invisible ──────────────────────────
 * Reported: the "data already in use" message a returning customer gets at the
 * details step was white on white and could not be read at all.
 *
 * Bookly ships NO css for .bookly-error or .bookly-label-error — checked across
 * all eight of its frontend stylesheets — so the panel took whatever background
 * was around it while the theme kept the text white. Exactly the same failure as
 * the WooCommerce notices, and it matters more here: this message is the only
 * thing telling someone their email is already registered.
 *
 * The two classes are different things and are treated differently: .bookly-error
 * is a block message, .bookly-label-error is the inline note under a single
 * field. A field-level error does not need a panel, it needs to be legible and
 * clearly attached to its input.
 * ────────────────────────────────────────────────────────────────── */
.bookly-form .bookly-error,
.bookly-form-wrapper .bookly-error,
.bookly-error {
	display: block;
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
	border: 1px solid rgba(242, 119, 122, 0.35);
	border-inline-start: 3px solid #F2777A;
	border-radius: var(--wp--custom--radius--card, 12px);
	padding: 0.9rem 1.1rem;
	margin-block: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.8;
}

/* Bookly paints the field-level error in its own BRAND colour, and with
   !important:

     .bookly-form .bookly-label-error { color: var(--bookly-main-color) !important }

   Measured, that is rgb(29,99,169) on the dark ground — 3.14:1, under the 4.5
   required, and worse than the contrast alone: an error rendered in the same
   blue as everything else does not read as an error at all.

   Matching an !important needs an !important. The class is repeated to take the
   specificity to (0,3,0) as well, so this does not depend on which stylesheet
   the browser happens to load second. */
.bookly-form .bookly-label-error.bookly-label-error,
.bookly-form-wrapper .bookly-label-error.bookly-label-error,
.bookly-label-error {
	display: block;
	background: none;
	color: #FFB4B4 !important;   /* 9.4:1 on --ground */
	font-size: 0.8125rem;
	line-height: 1.7;
	margin-block-start: 0.3rem;
}

/* An input that failed validation should look failed, not just have text near
   it — colour alone is not a signal someone can rely on. */
.bookly-form input.bookly-error,
.bookly-form select.bookly-error,
.bookly-form textarea.bookly-error {
	background-color: var(--wp--preset--color--ground-alt);
	border: 1px solid #F2777A;
	border-inline-start-width: 1px;
	border-radius: 8px;
	padding: 0.7rem 0.85rem;
	color: var(--wp--preset--color--text);
}

/* ── Bookly's dialogs ────────────────────────────────────────────────
 * Reported: the "Data already in use" dialog was entirely blank — white text
 * on white. Bookly hard-codes a light dialog:
 *
 *   .bookly-modal .bookly-modal-content { background-color: #fff }
 *   .bookly-modal .bookly-modal-header  { color: #666; border-bottom: 1px solid #e5e5e5 }
 *   .bookly-btn-cancel                  { color: #21759b }
 *
 * On this theme the inherited ink is white, so the whole panel disappeared. It
 * is the same class of failure as the WooCommerce notices and the Bookly field
 * errors, and the worst instance of it: this dialog asks a question whose two
 * answers do different things to stored data.
 *
 * SIX frontend dialogs share this anatomy and are all fixed by these rules —
 * the duplicate-customer message, the verification-code prompt, the inline
 * login form, and the customer cabinet's cancel, delete and reschedule
 * confirmations. Scoped to .bookly-modal so nothing else is touched.
 * ────────────────────────────────────────────────────────────────── */
.bookly-modal .bookly-modal-content {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--wp--custom--radius--card, 12px);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
}

.bookly-modal .bookly-modal-content .bookly-modal-header {
	color: var(--wp--preset--color--text);
	border-block-end: 1px solid rgba(255, 255, 255, 0.10);
	font-weight: 600;
}

.bookly-modal .bookly-modal-content .bookly-modal-body {
	color: var(--wp--preset--color--text);
	line-height: 1.9;
}

.bookly-modal .bookly-modal-content .bookly-modal-footer {
	border-block-start: 1px solid rgba(255, 255, 255, 0.10);
}

/* The close × sat at #000 on a dark panel. */
.bookly-modal .bookly-close {
	color: var(--wp--preset--color--text-2);
	background: none;
	border: 0;
	opacity: 1;
}
.bookly-modal .bookly-close:hover { color: var(--wp--preset--color--text); }

/* Cancel was WordPress-admin blue (#21759b) — 2.6:1 here, and it is the SAFE
   choice in this dialog, so it must not be the harder one to read. */
.bookly-modal .bookly-modal-footer .bookly-btn-cancel {
	color: var(--wp--preset--color--text) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
	padding-inline: 0.75rem;
}

/* «تحديث» is OUTLINED, not filled, and that is a safety decision rather than a
   stylistic one.

   In this dialog Update REPLACES the customer's stored name and email with
   whatever was just typed, and Cancel is the reversible choice. A solid accent
   button — which is what this was first styled as — makes the destructive
   answer the most attractive thing on screen. Both are legible and obviously
   clickable; neither shouts. */
.bookly-modal .bookly-modal-footer .bookly-btn-submit {
	background-color: transparent !important;
	color: var(--wp--preset--color--accent) !important;
	border: 1px solid rgba(255, 178, 122, 0.55) !important;
	border-radius: 999px;
	min-block-size: 44px;
	padding: 0.6rem 1.4rem !important;
	font-weight: 600;
}
.bookly-modal .bookly-modal-footer .bookly-btn-submit:hover {
	background-color: rgba(255, 178, 122, 0.14) !important;
	color: var(--wp--preset--color--accent) !important;
}