/* ==========================================================================
   Reusable Components — buttons, glass surfaces, cards, forms, modal
   ========================================================================== */

/* ---- Glass surface utility ------------------------------------------ */
.glass {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	box-shadow: var(--shadow-soft), var(--shadow-inset-hairline);
}

/* ---- Buttons ---------------------------------------------------------- */
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	padding: 0.95em 2em;
	border-radius: var(--radius-pill);
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: 0.01em;
	isolation: isolate;
	overflow: hidden;
	transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
	will-change: transform;
}

.btn:active {
	transform: scale(0.97);
}

.btn--gold {
	color: var(--color-on-gold);
	background: var(--gradient-gold);
	box-shadow: var(--shadow-gold);
}

.btn--gold::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(135deg, var(--color-white), var(--color-gold-light));
	opacity: 0;
	transition: opacity var(--dur-fast) var(--ease-soft);
}

.btn--gold:hover::before {
	opacity: 1;
}

.btn--gold:hover {
	box-shadow: 0 14px 45px -10px rgba(198, 164, 108, 0.65);
}

.btn--ghost {
	color: var(--color-white);
	border: 1px solid var(--glass-border);
	background: var(--glass-bg);
}

.btn--ghost:hover {
	border-color: var(--color-gold);
	color: var(--color-gold-light);
}

.btn--sm {
	padding: 0.6em 1.4em;
	font-size: var(--fs-xs);
}

.btn--block {
	width: 100%;
}

.btn__spinner {
	display: none;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 2px solid rgba(13, 13, 13, 0.35);
	border-top-color: var(--color-on-gold);
	animation: spin 0.7s linear infinite;
}

.btn.is-loading .btn__label {
	opacity: 0.6;
}

.btn.is-loading .btn__spinner {
	display: inline-block;
}

/* ==========================================================================
   Service Cards | کارت‌های خدمات
   ========================================================================== */

.service-card {
	position: relative;
	flex: 0 1 calc((100% - 2 * var(--space-4)) / 3);
	padding: var(--space-5);
	border-radius: var(--radius-md);
	overflow: hidden;
	isolation: isolate;
	transform: translate3d(0, 0, 0)
		rotateX(calc(var(--tilt-y, 0) * -6deg))
		rotateY(calc(var(--tilt-x, 0) * 6deg));
	transition:
		transform calc(var(--dur-mid) * var(--motion-scale, 1)) var(--ease-luxury),
		border-color calc(var(--dur-mid) * var(--motion-scale, 1)) var(--ease-soft),
		box-shadow calc(var(--dur-mid) * var(--motion-scale, 1)) var(--ease-soft);
}

/* Selector deliberately over-specific (.services__grid .service-card:hover)
   so this transform always outranks animations.css's `.reveal-up.is-visible`
   (equal specificity to a bare `.service-card:hover`, loads later) — that
   rule targets every reveal-up element including these cards and was
   silently overwriting the hover lift/tilt with `translateY(0)`. */
.services__grid .service-card:hover {
	transform: translate3d(0, -10px, 0)
		rotateX(calc(var(--tilt-y, 0) * -6deg))
		rotateY(calc(var(--tilt-x, 0) * 6deg))
		scale(1.02);
	border-color: rgba(198, 164, 108, 0.65);
	box-shadow: 0 24px 60px -20px rgba(198, 164, 108, 0.35), var(--shadow-soft);
}

/* ---- Featured card (photo cover) — currently only the "botox" card,
   which got a real campaign photo; the rest stay icon-only until they
   have one too. Same footprint as its siblings (no grid-column span) —
   the photo already carries its own baked-in title/tagline/doctor name,
   so this card shows it in full (object-fit: contain, never cropped)
   instead of duplicating that text in HTML on top of it. ---- */
.service-card--featured {
	min-height: 340px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
}

.service-card--featured .service-card__index,
.service-card--featured .service-card__icon,
.service-card--featured .service-card__title,
.service-card--featured .service-card__desc {
	display: none;
}

.service-card__cover {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: transform calc(var(--dur-slow, 0.9s) * var(--motion-scale, 1)) var(--ease-soft);
}

.services__grid .service-card--featured:hover .service-card__cover {
	transform: scale(1.04);
}

.service-card__cover-fade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, transparent 0%, transparent 75%, rgba(13, 13, 13, 0.75) 100%);
}

.service-card--featured .service-card__cta {
	margin-bottom: 0;
	background: var(--gradient-gold);
	color: var(--color-on-gold);
	border-color: transparent;
	font-weight: 700;
	box-shadow: 0 10px 26px -10px rgba(198, 164, 108, 0.65);
}

.services__grid .service-card--featured:hover .service-card__cta {
	background: var(--gradient-gold);
	color: var(--color-on-gold);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px -10px rgba(198, 164, 108, 0.8);
}

/* Cursor-tracked spotlight — JS (serviceCardFX.js) sets --spot-x/--spot-y
   on pointermove; this just paints them. Sits above the card's own
   background but below its text content (isolate + z-index). */
.service-card__spotlight {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(320px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(231, 206, 159, 0.16), transparent 65%);
	opacity: 0;
	transition: opacity calc(var(--dur-fast) * var(--motion-scale, 1)) var(--ease-soft);
	pointer-events: none;
}

.service-card:hover .service-card__spotlight {
	opacity: 1;
}

.service-card__index {
	position: absolute;
	top: -0.15em;
	inset-inline-end: var(--space-4);
	z-index: 0;
	display: block;
	font-family: var(--font-display);
	font-size: 4.5rem;
	font-weight: 800;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(198, 164, 108, 0.3);
	opacity: 0.7;
	transition: transform calc(var(--dur-mid) * var(--motion-scale, 1)) var(--ease-luxury);
	pointer-events: none;
}

.service-card:hover .service-card__index {
	transform: translateY(-4px) scale(1.05);
}

.service-card__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-4);
	background: var(--gradient-gold);
	color: var(--color-on-gold);
	box-shadow: 0 10px 26px -10px rgba(198, 164, 108, 0.6);
	transition: transform calc(var(--dur-mid) * var(--motion-scale, 1)) var(--ease-spring, var(--ease-soft));
}

.service-card:hover .service-card__icon {
	transform: scale(1.1) rotate(-6deg);
}

.service-card__title {
	position: relative;
	z-index: 1;
	font-size: var(--fs-h3);
	margin-bottom: var(--space-2);
}

.service-card__desc {
	position: relative;
	z-index: 1;
	color: var(--color-gray);
	font-size: var(--fs-small);
	margin-bottom: var(--space-4);
	min-height: 3.4em;
}

.service-card__cta {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.55em 1.1em 0.55em 0.9em;
	border-radius: var(--radius-pill);
	color: var(--color-gold-light);
	font-size: var(--fs-small);
	background: transparent;
	border: 1px solid transparent;
	transition:
		color calc(var(--dur-fast) * var(--motion-scale, 1)) var(--ease-soft),
		background calc(var(--dur-fast) * var(--motion-scale, 1)) var(--ease-soft),
		border-color calc(var(--dur-fast) * var(--motion-scale, 1)) var(--ease-soft);
}

.service-card:hover .service-card__cta {
	color: var(--color-white);
	background: var(--glass-bg-strong);
	border-color: var(--glass-border);
}

.service-card__cta svg {
	transition: transform var(--dur-fast) var(--ease-soft);
}

.service-card:hover .service-card__cta svg {
	transform: translateX(-4px);
}

[dir="rtl"] .service-card__cta svg {
	transform: scaleX(-1);
}

[dir="rtl"] .service-card:hover .service-card__cta svg {
	transform: scaleX(-1) translateX(-4px);
}

.service-card__glow {
	position: absolute;
	inset: auto auto -40% -20%;
	z-index: 0;
	width: 70%;
	height: 70%;
	background: var(--gradient-radial-glow);
	opacity: 0;
	transition: opacity var(--dur-mid) var(--ease-soft);
	pointer-events: none;
}

.service-card:hover .service-card__glow {
	opacity: 0.8;
}

/* ==========================================================================
   Benefit Cards | کارت‌های مراقبت
   ========================================================================== */

.benefit-card {
	padding: var(--space-5);
	border-radius: var(--radius-md);
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	text-align: center;
	transition: transform var(--dur-mid) var(--ease-luxury), background var(--dur-mid) var(--ease-soft);
}

.benefit-card:hover {
	transform: translateY(-6px);
	background: var(--glass-bg-strong);
}

.benefit-card__icon {
	margin-inline: auto;
	margin-bottom: var(--space-3);
}

.benefit-card h3 {
	font-size: var(--fs-h3);
	margin-bottom: var(--space-2);
}

.benefit-card p {
	color: var(--color-gray);
	font-size: var(--fs-small);
}

/* ==========================================================================
   Form fields | فیلدهای فرم
   ========================================================================== */

.field {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	margin-bottom: var(--space-4);
	text-align: start;
}

.field label {
	font-size: var(--fs-small);
	color: var(--color-gray);
}

.field input,
.field select,
.field textarea {
	padding: 0.85em 1em;
	border-radius: var(--radius-sm);
	border: 1px solid var(--glass-border);
	background: rgba(247, 247, 247, 0.03);
	color: var(--color-white);
	transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}

.field input::placeholder,
.field textarea::placeholder {
	color: var(--color-gray-dim);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: var(--color-gold);
	background: rgba(247, 247, 247, 0.05);
}

.field select option {
	background: var(--color-bg-elevated);
	color: var(--color-white);
}

.field.has-error input,
.field.has-error select {
	border-color: var(--color-error);
}

.field__error {
	display: block;
	min-height: 1.1em;
	font-size: var(--fs-xs);
	color: var(--color-error);
}

.booking-form__status {
	text-align: center;
	font-size: var(--fs-small);
	margin-top: var(--space-3);
	min-height: 1.4em;
}

.booking-form__status.is-success { color: var(--color-success); }
.booking-form__status.is-error { color: var(--color-error); }

/* ==========================================================================
   Modal | مودال رزرو
   ========================================================================== */

.modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--dur-mid) var(--ease-soft), visibility var(--dur-mid) var(--ease-soft);
}

.modal.is-open {
	visibility: visible;
	opacity: 1;
}

.modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(13, 13, 13, 0.75);
	backdrop-filter: blur(6px);
}

.modal__panel {
	position: relative;
	width: min(100%, 460px);
	max-height: 90vh;
	overflow-y: auto;
	border-radius: var(--radius-lg);
	padding: var(--space-6) var(--space-5);
	transform: translateY(24px) scale(0.98);
	transition: transform var(--dur-mid) var(--ease-luxury);
}

.modal.is-open .modal__panel {
	transform: translateY(0) scale(1);
}

.modal__close {
	position: absolute;
	top: var(--space-3);
	inset-inline-end: var(--space-3);
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--glass-border);
	color: var(--color-gray);
	transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}

.modal__close:hover {
	color: var(--color-gold);
	border-color: var(--color-gold);
}

.modal__title {
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	margin-bottom: var(--space-1);
}

.modal__desc {
	color: var(--color-gray);
	font-size: var(--fs-small);
	margin-bottom: var(--space-5);
}