/* Rafa Line booking widget — colors/spacing/typography match the Figma design tokens. */

@font-face {
	font-family: 'Tajawal-RLB';
	src: url('../fonts/Tajawal-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Tajawal-RLB';
	src: url('../fonts/Tajawal-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

.rlb-app {
	--rlb-emerald: #006b5c;
	--rlb-emerald-tint: rgba(0, 107, 92, 0.05);
	--rlb-dark: #191c1c;
	--rlb-muted: #727e92;
	--rlb-white: #ffffff;
	--rlb-border: #f1f3f7;
	--rlb-success-bg: #f3fef6;
	--rlb-success-border: #eafef0;
	--rlb-overlay: rgba(12, 10, 32, 0.2);
	--rlb-radius: 20px;

	font-family: 'Tajawal-RLB', Tahoma, Arial, sans-serif;
	color: var(--rlb-dark);
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}

.rlb-app *,
.rlb-app *::before,
.rlb-app *::after {
	box-sizing: border-box;
}

/*
 * Hard reset for interactive elements. Themes commonly style bare
 * `button`/`input` tags globally (rounded dark backgrounds, custom focus
 * rings, etc.) with selectors that can outrank our classes. Strip all of
 * that first so every control below renders exactly as intended regardless
 * of the theme it's embedded in.
 */
/*
 * Deliberately targeted, NOT `all: unset`: a combined class+tag selector
 * like `.rlb-app button` has higher specificity than a plain single class
 * like `.rlb-calendar-day`, so a blanket `all: unset` here would silently
 * beat width/height/margin declared later without !important. Only reset
 * the visual skin properties a theme is likely to set on bare tags; leave
 * box-model properties alone so normal cascade rules apply cleanly.
 */
.rlb-app button,
.rlb-app input,
.rlb-app textarea {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	font: inherit;
	color: inherit;
	box-sizing: border-box;
}

.rlb-app button {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	text-align: inherit;
}

.rlb-app button::before,
.rlb-app button::after {
	content: none !important;
}

.rlb-app button:disabled {
	cursor: not-allowed;
}

.rlb-loading {
	text-align: center;
	padding: 60px 0;
	color: var(--rlb-muted);
}

/* Stepper. Step 1 must sit on the right and step 3 on the left (RTL reading
   order), which is simply flex-direction: row under a dir="rtl" ancestor —
   row-reverse would flip it the wrong way. */
.rlb-stepper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 24px 12px;
	flex-wrap: wrap;
}

.rlb-step-indicator {
	display: flex;
	align-items: center;
	gap: 14px;
}

.rlb-step-indicator .rlb-step-meta {
	text-align: right;
}

.rlb-step-indicator .rlb-step-count {
	display: block;
	font-size: 13px;
	color: var(--rlb-muted);
}

.rlb-step-indicator .rlb-step-name {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--rlb-dark);
}

.rlb-step-icon {
	width: 48px;
	height: 48px;
	border-radius: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rlb-dark);
	color: var(--rlb-white);
	flex-shrink: 0;
	font-size: 18px;
}

.rlb-step-indicator.is-current .rlb-step-icon,
.rlb-step-indicator.is-done .rlb-step-icon {
	background: var(--rlb-emerald);
}

.rlb-step-connector {
	width: 60px;
	height: 1px;
	background: var(--rlb-border);
}

@media (max-width: 720px) {
	.rlb-step-connector {
		width: 24px;
	}
	.rlb-step-indicator .rlb-step-name {
		font-size: 14px;
	}
}

/* Card shell shared by all steps */
.rlb-card {
	background: var(--rlb-emerald-tint);
	border-radius: var(--rlb-radius);
	display: flex;
	flex-direction: row-reverse;
	overflow: hidden;
}

.rlb-card-media {
	flex: 1 1 0;
	min-width: 0;
	background: linear-gradient(135deg, #f1efe9 0%, #e4e0d3 100%);
	position: relative;
}

.rlb-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rlb-card-body {
	flex: 1 1 0;
	min-width: 0;
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.rlb-card-heading h2 {
	font-size: 24px;
	margin: 0 0 8px;
	font-weight: 700;
	text-align: right;
}

.rlb-card-heading p {
	margin: 0;
	color: var(--rlb-muted);
	font-size: 16px;
	line-height: 1.6;
	text-align: right;
}

@media (max-width: 860px) {
	.rlb-card {
		flex-direction: column;
	}
	.rlb-card-media {
		min-height: 180px;
	}
	.rlb-card-body {
		padding: 28px 20px;
	}
}

/* Step 1: service list */
.rlb-service-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rlb-service-option {
	background: var(--rlb-white) !important;
	border: 2px solid transparent !important;
	border-radius: 10px !important;
	padding: 24px !important;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	text-align: right;
	width: 100%;
	font-family: inherit;
}

.rlb-service-option .rlb-service-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rlb-service-option .rlb-service-name {
	font-weight: 700;
	font-size: 16px;
}

.rlb-service-option .rlb-service-desc {
	font-size: 14px;
	color: var(--rlb-muted);
}

.rlb-service-option .rlb-arrow {
	flex-shrink: 0;
	color: var(--rlb-dark);
}

.rlb-service-option.is-selected {
	border-color: var(--rlb-emerald) !important;
}

/* Buttons */
.rlb-btn {
	height: 56px !important;
	padding: 0 32px !important;
	border-radius: 4px !important;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	border: none !important;
	text-transform: uppercase;
	white-space: nowrap;
}

.rlb-btn-primary {
	background: var(--rlb-dark) !important;
	color: var(--rlb-white) !important;
}

.rlb-btn-primary:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.rlb-btn-outline {
	background: transparent !important;
	border: 1px solid var(--rlb-dark) !important;
	color: var(--rlb-dark) !important;
}

.rlb-btn-light {
	background: #f1f3f7 !important;
	color: var(--rlb-dark) !important;
}

.rlb-btn-row {
	display: flex;
	gap: 12px;
	justify-content: flex-end;
}

.rlb-btn-row-full {
	width: 100%;
}

.rlb-btn-row-full .rlb-btn {
	flex: 1;
}

@media (max-width: 600px) {
	.rlb-btn {
		height: 48px;
		padding: 0 20px;
		flex: 1;
	}
}

/* Step 2: date + time */
.rlb-section-label {
	color: var(--rlb-emerald);
	font-weight: 700;
	font-size: 18px;
	text-align: right;
	margin: 0 0 16px;
}

.rlb-month-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 20px;
}

.rlb-month-nav button {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	font-size: 18px;
	color: var(--rlb-dark) !important;
	line-height: 1;
	padding: 4px 8px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

.rlb-month-nav span {
	font-size: 16px;
	font-weight: 500;
	min-width: 130px;
	text-align: center;
}

.rlb-calendar {
	width: 100%;
}

.rlb-calendar-daynames {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	color: var(--rlb-muted);
	font-size: 14px;
	margin-bottom: 8px;
}

.rlb-calendar-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px 0;
}

.rlb-calendar-day {
	/* Fixed px box instead of aspect-ratio: grid stretch can resolve
	   aspect-ratio inconsistently, producing ovals instead of circles. */
	width: 40px !important;
	height: 40px !important;
	margin: 0 auto !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: none !important;
	background: none !important;
	border-radius: 50% !important;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
	color: var(--rlb-dark) !important;
	cursor: pointer;
	font-family: inherit;
	padding: 0 !important;
}

.rlb-calendar-day.is-bookable {
	color: var(--rlb-emerald) !important;
}

.rlb-calendar-day.is-disabled {
	color: #cbd0d8 !important;
	cursor: not-allowed;
}

.rlb-calendar-day.is-selected {
	background: var(--rlb-emerald) !important;
	color: var(--rlb-white) !important;
}

.rlb-slots-title {
	margin-top: 24px;
}

.rlb-slots-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 12px;
}

.rlb-slot {
	background: var(--rlb-white) !important;
	border: none !important;
	border-radius: 4px !important;
	padding: 20px 12px !important;
	font-size: 18px;
	color: var(--rlb-dark) !important;
	cursor: pointer;
	font-family: inherit;
	text-align: center;
	white-space: nowrap;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.rlb-slot.is-unavailable {
	color: #cbd0d8 !important;
	cursor: not-allowed;
	text-decoration: line-through;
}

.rlb-slot.is-selected {
	background: var(--rlb-emerald) !important;
	color: var(--rlb-white) !important;
}

.rlb-slots-empty {
	color: var(--rlb-muted);
	font-size: 14px;
	text-align: center;
	padding: 24px 0;
}

/* Step 3: contact form */
.rlb-form-fields {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.rlb-form-row {
	display: flex;
	gap: 16px;
}

.rlb-form-row .rlb-field {
	flex: 1;
}

.rlb-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: right;
}

.rlb-field label {
	font-size: 16px;
}

.rlb-field input,
.rlb-field textarea {
	background: var(--rlb-white) !important;
	border: 1px solid var(--rlb-border) !important;
	padding: 16px 20px !important;
	font-size: 15px;
	text-align: right;
	font-family: inherit;
	border-radius: 2px !important;
	width: 100%;
	display: block;
}

.rlb-field input:focus,
.rlb-field textarea:focus {
	border-color: var(--rlb-emerald) !important;
}

.rlb-field .rlb-phone-wrap {
	display: flex;
	align-items: stretch;
}

.rlb-field .rlb-phone-wrap .rlb-phone-prefix {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--rlb-white);
	border: 1px solid var(--rlb-border);
	border-left: none;
	padding: 0 14px;
	font-size: 14px;
	color: var(--rlb-dark);
	white-space: nowrap;
}

.rlb-field .rlb-phone-wrap input {
	border-left: none;
}

@media (max-width: 600px) {
	.rlb-form-row {
		flex-direction: column;
	}
}

/* Success modal */
.rlb-overlay {
	position: fixed;
	inset: 0;
	background: var(--rlb-overlay);
	backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 20px;
}

.rlb-overlay[hidden] {
	display: none;
}

.rlb-modal {
	background: var(--rlb-white);
	border-radius: 8px;
	padding: 40px 24px;
	width: 400px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
	font-family: 'Tajawal-RLB', Tahoma, Arial, sans-serif;
	direction: rtl;
}

.rlb-modal-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--rlb-success-bg);
	border: 1px solid var(--rlb-success-border);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rlb-modal-icon svg {
	width: 40px;
	height: 40px;
}

.rlb-modal h3 {
	margin: 0 0 8px;
	font-size: 24px;
	color: var(--rlb-dark);
}

.rlb-modal p {
	margin: 0;
	font-size: 14px;
	color: var(--rlb-muted);
	line-height: 1.6;
}

.rlb-modal .rlb-btn {
	width: 100%;
}

.rlb-error-banner {
	background: #fdecec;
	color: #b3261e;
	border-radius: 6px;
	padding: 12px 16px;
	font-size: 14px;
	text-align: right;
	margin-bottom: 16px;
}

.rlb-error-banner[hidden] {
	display: none;
}