/**
 * LGM Activities — shared front-end styling.
 *
 * References the theme's design tokens (with safe fallbacks) so ticket + booking
 * widgets inherit the mosque's identity. Uses logical properties for RTL.
 * Widget-specific layout (ticket cards, calendar) lives in each satellite's CSS.
 */

/* Plugin-owned Montserrat --------------------------------------------------
 * Shipped inside the plugin so widgets render on-brand under ANY theme, even
 * one that never loads Montserrat. When the LGM theme IS present this is a
 * harmless duplicate of its identical self-hosted face, so output is unchanged. */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url( "../fonts/Montserrat-VariableFont_wght.woff2" ) format( "woff2" );
}

.lgm-ae-widget {
	--lgm-ae-font: "Montserrat", "Noto Naskh Arabic", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--lgm-ae-green: var( --lgm-green, #0F5D3A );
	--lgm-ae-green-deep: var( --lgm-green-deep, #0F4239 );
	--lgm-ae-gold-ink: var( --lgm-gold-ink, #8A5B00 );
	--lgm-ae-navy: var( --lgm-navy, #0B263C );
	--lgm-ae-slate: var( --lgm-slate, #374957 );
	--lgm-ae-muted: var( --lgm-fg-muted, rgba( 11, 38, 60, 0.65 ) );
	--lgm-ae-surface: var( --lgm-surface, #fff );
	--lgm-ae-surface-alt: var( --lgm-surface-alt, #F1F0F7 );
	--lgm-ae-line: var( --lgm-line, rgba( 11, 38, 60, 0.2 ) );
	--lgm-ae-danger: var( --lgm-danger, #FF383C );
	--lgm-ae-radius: 10px;

	color: var( --lgm-ae-navy );
	font-family: var( --lgm-ae-font );
}

/* Notices ---------------------------------------------------------------- */
.lgm-ae-notice {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: var( --lgm-ae-radius );
	font-size: 0.95rem;
	line-height: 1.5;
	border: 1px solid transparent;
}
.lgm-ae-notice[data-type='error'] {
	background: rgba( 255, 56, 60, 0.08 );
	border-color: rgba( 255, 56, 60, 0.35 );
	color: #8a1f1f;
}
.lgm-ae-notice[data-type='success'] {
	background: rgba( 15, 93, 58, 0.08 );
	border-color: rgba( 15, 93, 58, 0.35 );
	color: var( --lgm-ae-green-deep );
}

/* Fields ----------------------------------------------------------------- */
.lgm-ae-field {
	margin-bottom: 16px;
}
.lgm-ae-label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var( --lgm-ae-navy );
}
.lgm-ae-req {
	color: var( --lgm-ae-gold-ink );
	margin-inline-start: 2px;
}
.lgm-ae-input {
	width: 100%;
	border: 1px solid var( --lgm-ae-line );
	border-radius: 8px;
	padding: 11px 13px;
	font-size: 1rem;
	font-family: inherit;
	color: var( --lgm-ae-navy );
	background: var( --lgm-ae-surface );
	transition: border-color 0.15s, box-shadow 0.15s;
}
.lgm-ae-input:focus {
	outline: none;
	border-color: var( --lgm-ae-green );
	box-shadow: 0 0 0 3px rgba( 15, 93, 58, 0.15 );
}
select.lgm-ae-input {
	appearance: none;
	background-image: linear-gradient( 45deg, transparent 50%, var( --lgm-ae-slate ) 50% ),
		linear-gradient( 135deg, var( --lgm-ae-slate ) 50%, transparent 50% );
	background-position: calc( 100% - 18px ) 19px, calc( 100% - 13px ) 19px;
	background-size: 5px 5px;
	background-repeat: no-repeat;
	padding-inline-end: 36px;
}
html[dir='rtl'] select.lgm-ae-input {
	background-position: 18px 19px, 13px 19px;
	padding-inline-end: 13px;
	padding-inline-start: 36px;
}

.lgm-ae-choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.lgm-ae-choice {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 0.98rem;
	color: var( --lgm-ae-slate );
	cursor: pointer;
}
.lgm-ae-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.95rem;
	color: var( --lgm-ae-slate );
	line-height: 1.5;
	cursor: pointer;
}
.lgm-ae-help {
	margin: 6px 0 0;
	font-size: 0.85rem;
	color: var( --lgm-ae-muted );
}
.lgm-ae-error {
	margin: 6px 0 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: var( --lgm-ae-danger );
}
.lgm-ae-field--invalid .lgm-ae-input,
.lgm-ae-input[aria-invalid='true'] {
	border-color: var( --lgm-ae-danger );
}
.lgm-ae-field--invalid .lgm-ae-input:focus,
.lgm-ae-input[aria-invalid='true']:focus {
	box-shadow: 0 0 0 3px rgba( 197, 48, 48, 0.16 );
}
.lgm-ae-field--invalid > .lgm-ae-label {
	color: var( --lgm-ae-danger );
}

/* Quantity stepper ------------------------------------------------------- */
.lgm-ae-stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var( --lgm-ae-line );
	border-radius: 8px;
	overflow: hidden;
}
.lgm-ae-stepper button {
	border: 0;
	background: var( --lgm-ae-surface-alt );
	width: 38px;
	height: 44px;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	color: var( --lgm-ae-navy );
}
.lgm-ae-stepper button:hover {
	background: var( --lgm-ae-line );
}
.lgm-ae-stepper input {
	width: 46px;
	height: 44px;
	border: 0;
	text-align: center;
	font-weight: 700;
	font-size: 1rem;
	color: var( --lgm-ae-navy );
	background: var( --lgm-ae-surface );
	-moz-appearance: textfield;
}
.lgm-ae-stepper input::-webkit-outer-spin-button,
.lgm-ae-stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Buttons ---------------------------------------------------------------- */
.lgm-ae-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var( --lgm-ae-green );
	color: var( --lgm-fg-on-green, #fff );
	border: 0;
	border-radius: 1000px;
	padding: 13px 26px;
	font-family: inherit;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: transform 0.12s, background 0.15s, opacity 0.15s;
}
.lgm-ae-btn:hover {
	background: var( --lgm-ae-green-deep );
}
.lgm-ae-btn:disabled {
	opacity: 0.6;
	cursor: default;
}
.lgm-ae-btn--ghost {
	background: var( --lgm-ae-surface );
	color: var( --lgm-ae-green );
	border: 1.5px solid var( --lgm-ae-green );
}
.lgm-ae-btn--ghost:hover {
	background: rgba( 15, 93, 58, 0.06 );
}
.lgm-ae-btn--block {
	width: 100%;
}

/* Generic card ----------------------------------------------------------- */
.lgm-ae-card {
	background: var( --lgm-ae-surface );
	border: 1px solid var( --lgm-ae-line );
	border-radius: 16px;
	padding: 22px;
	box-shadow: var( --lgm-shadow-card, 0 1px 2px rgba( 11, 38, 60, 0.04 ), 0 14px 36px -22px rgba( 11, 38, 60, 0.22 ) );
}

.lgm-ae-is-busy {
	opacity: 0.6;
	pointer-events: none;
}