/*
 * Rutob Consult Core — components rendered by the plugin.
 *
 * Colours and spacing come from the theme's theme.json presets, with fallbacks
 * so the forms stay usable under any theme. Mobile first; logical properties
 * throughout so Arabic (RTL) works by setting dir="rtl".
 */

:root {
	--rc-primary: var(--wp--preset--color--primary, #0b5d4b);
	--rc-primary-dark: var(--wp--preset--color--primary-dark, #073d31);
	--rc-accent: var(--wp--preset--color--accent, #c9a227);
	--rc-ink: var(--wp--preset--color--contrast, #14201c);
	--rc-muted: var(--wp--preset--color--muted, #4a5753);
	--rc-base: var(--wp--preset--color--base, #fbf8f2);
	--rc-surface: var(--wp--preset--color--surface, #ffffff);
	--rc-tint: var(--wp--preset--color--tint, #e6f0ec);
	--rc-line: var(--wp--preset--color--line, #ddd6c8);
	--rc-error: var(--wp--preset--color--error, #a3261b);
	--rc-whatsapp: #25d366;
	--rc-focus: #073d31; /* themes override this on dark sections */
	--rc-radius: 12px;
	--rc-tap: 48px;
	--rc-gap: var(--wp--preset--spacing--40, 1.25rem);
}

.rc-icon { inline-size: 1.25em; block-size: 1.25em; flex: none; vertical-align: -0.2em; }

/* Buttons ---------------------------------------------------------------- */

.rc-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-block-size: var(--rc-tap);
	padding-block: 0.6em;
	padding-inline: 1.25em;
	border: 2px solid var(--rc-primary);
	border-radius: 999px;
	background: var(--rc-primary);
	color: #fff;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
.rc-button:hover { background: var(--rc-primary-dark); border-color: var(--rc-primary-dark); color: #fff; }
.rc-button:focus-visible, .rc-chip:focus-visible, .rc-call:focus-visible, .rc-wa-float:focus-visible {
	outline: 3px solid var(--rc-focus);
	outline-offset: 2px;
}
.rc-button--ghost { background: transparent; color: var(--rc-primary); }
.rc-button--ghost:hover { background: var(--rc-tint); color: var(--rc-primary-dark); }
.rc-button--whatsapp { background: var(--rc-whatsapp); border-color: var(--rc-whatsapp); color: var(--rc-ink); }
.rc-button--whatsapp:hover { background: #1fb457; border-color: #1fb457; color: var(--rc-ink); }
.rc-button--block { inline-size: 100%; }
.rc-button--small { min-block-size: 40px; padding-inline: 1em; }
.rc-button[hidden] { display: none; }

/* Forms ------------------------------------------------------------------ */

.rc-form { display: grid; gap: 1.1rem; }
.rc-field { display: grid; gap: 0.35rem; }
.rc-field label { font-weight: 600; }
.rc-optional { font-weight: 400; color: var(--rc-muted); }
.rc-form input[type="text"],
.rc-form input[type="email"],
.rc-form input[type="tel"],
.rc-form input[type="file"],
.rc-form select,
.rc-form textarea,
.rc-search input {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: var(--rc-tap);
	padding: 0.65rem 0.85rem;
	border: 1.5px solid var(--rc-line);
	border-radius: 8px;
	background: var(--rc-surface);
	color: var(--rc-ink);
	font: inherit;
	font-size: max(1rem, 16px); /* below 16px, iOS zooms the page on focus */
}
.rc-form textarea { resize: vertical; min-block-size: 8rem; }
.rc-form input:focus, .rc-form select:focus, .rc-form textarea:focus, .rc-search input:focus {
	outline: 3px solid var(--rc-focus);
	outline-offset: 1px;
	border-color: var(--rc-primary);
}
.rc-field--error input, .rc-field--error select, .rc-field--error textarea { border-color: var(--rc-error); }
.rc-field-error { margin: 0; color: var(--rc-error); font-weight: 600; font-size: 0.9375rem; }
.rc-hint { margin: 0; color: var(--rc-muted); font-size: 0.9375rem; }
.rc-check { display: flex; gap: 0.75rem; align-items: flex-start; }
.rc-check input { inline-size: 24px; block-size: 24px; margin-block-start: 0.1rem; flex: none; accent-color: var(--rc-primary); }
.rc-hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }

.rc-notice {
	padding: 1rem 1.15rem;
	border-radius: var(--rc-radius);
	background: var(--rc-tint);
	border-inline-start: 4px solid var(--rc-primary);
}
.rc-notice > :first-child { margin-block-start: 0; }
.rc-notice > :last-child { margin-block-end: 0; }
.rc-notice--success { background: var(--rc-tint); }
.rc-notice--error { background: #fbeceb; border-color: var(--rc-error); color: var(--rc-ink); }
.rc-notice:focus { outline: 3px solid var(--rc-focus); }

/* Cards and grids --------------------------------------------------------- */

.rc-grid {
	display: grid;
	gap: var(--rc-gap);
	/* At most three columns; one on a phone. */
	grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 17rem), calc((100% - 2 * var(--rc-gap)) / 3)), 1fr));
}
.rc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
	border: 1px solid var(--rc-line);
	border-radius: var(--rc-radius);
	background: var(--rc-surface);
}
.rc-card p { margin: 0; color: var(--rc-muted); }
.rc-card__icon {
	display: inline-grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: 12px;
	background: var(--rc-tint);
	color: var(--rc-primary);
}
.rc-card__icon .rc-icon { inline-size: 26px; block-size: 26px; }
.rc-card__title { margin: 0.25rem 0 0; font-size: 1.2rem; line-height: 1.3; }
.rc-card__title a { color: var(--rc-ink); text-decoration: none; }
/* The whole card is the tap target; the link inside it is the accessible name. */
.rc-card--link .rc-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rc-radius); }
.rc-card--link:hover { border-color: var(--rc-primary); }
.rc-card--link:focus-within { outline: 3px solid var(--rc-focus); outline-offset: 2px; }
.rc-card__more { margin-block-start: auto; padding-block-start: 0.5rem; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--rc-primary); font-weight: 600; }
[dir="rtl"] .rc-card__more .rc-icon, [dir="rtl"] .rc-linklist .rc-icon { transform: scaleX(-1); }

.rc-pillar + .rc-pillar { margin-block-start: var(--wp--preset--spacing--60, 3rem); }
.rc-lede { color: var(--rc-muted); font-size: 1.1rem; }

/* Bookings --------------------------------------------------------------- */

.rc-events { display: grid; gap: var(--rc-gap); }
.rc-event__title { margin: 0; font-size: 1.25rem; }
.rc-event__meta { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--rc-primary) !important; }
.rc-event__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 0.5rem; }
.rc-event:has(.rc-cal.is-open) { grid-column: 1 / -1; }
.rc-cal.is-open { min-block-size: 32rem; margin-block-start: 1rem; overflow: auto; }

/* Contact ---------------------------------------------------------------- */

.rc-contact { display: grid; gap: 1rem; margin: 0; }
.rc-contact__item { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: start; }
.rc-contact__item .rc-icon { grid-row: span 2; color: var(--rc-primary); margin-block-start: 0.15rem; }
.rc-contact dt { font-weight: 600; }
.rc-contact dd { margin: 0; }
.rc-contact a { display: inline-block; padding-block: 0.4rem; }
.rc-contact--compact { gap: 0.5rem; }
.rc-map { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-block-start: 1.25rem; }
.rc-map__frame { inline-size: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--rc-radius); }

/* Service page sections -------------------------------------------------- */

.rc-section { margin-block-start: var(--wp--preset--spacing--60, 2.5rem); }
.rc-checklist { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.rc-checklist li { display: flex; gap: 0.6rem; align-items: flex-start; }
.rc-checklist .rc-icon { color: var(--rc-primary); margin-block-start: 0.2rem; }
.rc-steps { list-style: none; counter-reset: rc-step; padding: 0; display: grid; gap: 0.75rem; }
.rc-steps li { counter-increment: rc-step; display: flex; gap: 0.85rem; align-items: center; padding: 0.75rem 1rem; border-radius: var(--rc-radius); background: var(--rc-tint); }
.rc-steps li::before {
	content: counter(rc-step);
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	background: var(--rc-primary);
	color: #fff;
	font-weight: 700;
}
.rc-faqs { display: grid; gap: 0.5rem; }
.rc-faq { border: 1px solid var(--rc-line); border-radius: var(--rc-radius); background: var(--rc-surface); }
.rc-faq summary { min-block-size: var(--rc-tap); display: flex; align-items: center; padding: 0.75rem 1rem; font-weight: 600; cursor: pointer; }
.rc-faq p { margin: 0; padding: 0 1rem 1rem; }

/* Q&A -------------------------------------------------------------------- */

.rc-search { display: flex; gap: 0.5rem; }
.rc-search .rc-button { flex: none; inline-size: var(--rc-tap); padding: 0; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1rem; }
.rc-chip {
	display: inline-flex;
	align-items: center;
	min-block-size: 40px;
	padding-inline: 1rem;
	border: 1.5px solid var(--rc-line);
	border-radius: 999px;
	background: var(--rc-surface);
	color: var(--rc-ink);
	font: inherit;
	font-size: 0.9375rem;
	text-decoration: none;
	cursor: pointer;
}
.rc-chip:hover { border-color: var(--rc-primary); }
.rc-chip[aria-current="page"] { background: var(--rc-primary); border-color: var(--rc-primary); color: #fff; }
.rc-chip[hidden] { display: none; }
.rc-results { color: var(--rc-muted); }
.rc-question { padding: 1rem 1.15rem; border-radius: var(--rc-radius); background: var(--rc-tint); }
.rc-question p { margin-block: 0 0.5rem; }
.rc-question__by { margin: 0 !important; color: var(--rc-muted); font-size: 0.9375rem; }
.rc-disclaimer { margin-block-start: 2rem; padding: 1rem 1.15rem; border: 1px solid var(--rc-line); border-radius: var(--rc-radius); color: var(--rc-muted); font-size: 0.9375rem; }
.rc-disclaimer p { margin: 0; }
.rc-answer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-block-start: 1rem; padding: 1rem 1.15rem; border-radius: var(--rc-radius); background: var(--rc-primary); color: #fff; }
.rc-answer-cta p { margin: 0; font-weight: 600; }
.rc-answer-cta .rc-button { background: #fff; border-color: #fff; color: var(--rc-primary); }

.rc-linklist { list-style: none; padding: 0; margin: 0; border-block-start: 1px solid var(--rc-line); }
.rc-linklist li { border-block-end: 1px solid var(--rc-line); }
.rc-linklist a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-block-size: var(--rc-tap); padding-block: 0.75rem; color: var(--rc-ink); font-weight: 600; text-decoration: none; }
.rc-linklist a:hover { color: var(--rc-primary); }
.rc-linklist .rc-icon { color: var(--rc-primary); }

.rc-share { margin-block-start: 2rem; }
.rc-share__label { margin: 0 0 0.5rem; font-weight: 600; }
.rc-share__links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Header phone link: shown on small screens by the theme. */
.rc-call { display: inline-grid; place-items: center; inline-size: var(--rc-tap); block-size: var(--rc-tap); border-radius: 50%; color: var(--rc-primary); }

/* Mobile action bar, desktop WhatsApp button, privacy notice --------------- */

.rc-actionbar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 50;
	display: flex;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
	background: var(--rc-surface);
	border-block-start: 1px solid var(--rc-line);
}
.rc-actionbar .rc-button { white-space: nowrap; padding-inline: 1rem; }
.rc-actionbar__book { flex: 1 1 auto; }
.rc-actionbar__wa { flex: 0 0 auto; }
body.rc-has-actionbar { padding-block-end: calc(64px + env(safe-area-inset-bottom)); }

.rc-wa-float { display: none; }

.rc-privacy {
	position: fixed;
	inset-inline: 0.75rem;
	inset-block-end: calc(72px + env(safe-area-inset-bottom));
	z-index: 60;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border-radius: var(--rc-radius);
	background: var(--rc-ink);
	color: #fff;
	font-size: 0.9375rem;
}
.rc-privacy[hidden] { display: none; }
.rc-privacy p { margin: 0; flex: 1 1 16rem; }
.rc-privacy a { color: #fff; }
.rc-privacy .rc-button { background: #fff; border-color: #fff; color: var(--rc-ink); }

@media (min-width: 782px) {
	.rc-actionbar { display: none; }
	body.rc-has-actionbar { padding-block-end: 0; }
	.rc-call { display: none; }
	.rc-wa-float {
		position: fixed;
		inset-inline-end: 1.5rem;
		inset-block-end: 1.5rem;
		z-index: 50;
		display: grid;
		place-items: center;
		inline-size: 56px;
		block-size: 56px;
		border-radius: 50%;
		background: var(--rc-whatsapp);
		color: var(--rc-ink);
	}
	.rc-wa-float .rc-icon { inline-size: 28px; block-size: 28px; }
	.rc-privacy { inset-inline: 1.5rem auto; inset-block-end: 1.5rem; max-inline-size: 34rem; }
	.rc-events { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; }
}

.screen-reader-text:not(:focus) {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}