/**
 * Button Component — Almutaheda Pack
 *
 * Variants:  primary, secondary, accent, text, icon
 * States:    default, hover, focus, active, disabled, loading
 * RTL:       uses logical CSS properties throughout
 */

/* ─── Base ────────────────────────────────────────────────────────── */

.alm-btn {
	/* Layout */
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             var(--alm-btn-gap);
	min-height:      var(--alm-btn-height);
	padding-block:   var(--alm-btn-padding-y);
	padding-inline:  var(--alm-btn-padding-x);

	/* Typography */
	font-family:     var(--alm-font-arabic);
	font-size:       var(--alm-btn-font-size);
	font-weight:     var(--alm-btn-font-weight);
	line-height:     1;
	text-decoration: none;
	white-space:     nowrap;

	/* Shape */
	border:          var(--alm-border-width-2) solid transparent;
	border-radius:   var(--alm-btn-radius);
	cursor:          pointer;

	/* Interaction */
	transition:      var(--alm-btn-transition);
	user-select:     none;
	-webkit-user-select: none;

	/* Reset */
	appearance: none;
	background: none;
}

/* Remove default button margin in Firefox */
.alm-btn::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* ─── Primary ─────────────────────────────────────────────────────── */

.alm-btn--primary {
	background-color: var(--alm-color-navy-primary);
	border-color:     var(--alm-color-navy-primary);
	color:            var(--alm-color-white);
}

.alm-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
	background-color: var(--alm-color-navy-primary-90);
	border-color:     var(--alm-color-navy-primary-90);
	color:            var(--alm-color-white);
}

.alm-btn--primary:active:not(:disabled):not([aria-disabled="true"]) {
	background-color: var(--alm-color-navy-secondary);
	border-color:     var(--alm-color-navy-secondary);
}

/* ─── Secondary ───────────────────────────────────────────────────── */

.alm-btn--secondary {
	background-color: transparent;
	border-color:     var(--alm-color-navy-primary);
	color:            var(--alm-color-navy-primary);
}

.alm-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
	background-color: var(--alm-color-navy-primary-10);
	color:            var(--alm-color-navy-primary);
}

.alm-btn--secondary:active:not(:disabled):not([aria-disabled="true"]) {
	background-color: #D1DCE8;
}

/* ─── Accent ──────────────────────────────────────────────────────── */

.alm-btn--accent {
	background-color: var(--alm-color-sand);
	border-color:     var(--alm-color-sand);
	color:            var(--alm-color-navy-primary);
}

.alm-btn--accent:hover:not(:disabled):not([aria-disabled="true"]) {
	background-color: var(--alm-color-sand-dark);
	border-color:     var(--alm-color-sand-dark);
	color:            var(--alm-color-navy-primary);
}

.alm-btn--accent:active:not(:disabled):not([aria-disabled="true"]) {
	background-color: #9C7248;
	border-color:     #9C7248;
}

/* ─── Text ────────────────────────────────────────────────────────── */

.alm-btn--text {
	background-color: transparent;
	border-color:     transparent;
	color:            var(--alm-color-navy-primary);
	padding-inline:   var(--alm-space-2);
	min-height:       auto;
}

.alm-btn--text:hover:not(:disabled):not([aria-disabled="true"]) {
	color:            var(--alm-color-navy-primary-90);
	text-decoration:  underline;
	text-underline-offset: 3px;
}

.alm-btn--text:active:not(:disabled):not([aria-disabled="true"]) {
	color: var(--alm-color-navy-secondary);
}

/* ─── Icon ────────────────────────────────────────────────────────── */

.alm-btn--icon {
	background-color: transparent;
	border-color:     transparent;
	color:            var(--alm-color-text-primary);
	padding-inline:   var(--alm-space-2-5);
	padding-block:    var(--alm-space-2-5);
	min-height:       var(--alm-btn-height);
	min-width:        var(--alm-btn-height);
	border-radius:    var(--alm-radius-md);
}

.alm-btn--icon:hover:not(:disabled):not([aria-disabled="true"]) {
	background-color: var(--alm-color-navy-primary-10);
	color:            var(--alm-color-navy-primary);
}

.alm-btn--icon:active:not(:disabled):not([aria-disabled="true"]) {
	background-color: #D1DCE8;
}

/* ─── Size modifiers ──────────────────────────────────────────────── */

.alm-btn--sm {
	min-height:    2.25rem;  /* 36px */
	padding-block: var(--alm-space-1-5);
	padding-inline:var(--alm-space-4);
	font-size:     var(--alm-text-sm);
}

.alm-btn--lg {
	min-height:    3.25rem;  /* 52px */
	padding-block: var(--alm-space-3);
	padding-inline:var(--alm-space-8);
	font-size:     var(--alm-text-md);
}

/* ─── Full-width modifier ─────────────────────────────────────────── */

.alm-btn--full {
	width: 100%;
}

/* ─── Focus state (all variants) ──────────────────────────────────── */

.alm-btn:focus-visible {
	outline:        var(--alm-focus-ring-width) solid var(--alm-focus-ring-color);
	outline-offset: var(--alm-focus-ring-offset);
}

/* ─── Disabled state ──────────────────────────────────────────────── */

.alm-btn:disabled,
.alm-btn[aria-disabled="true"] {
	opacity:       0.45;
	cursor:        not-allowed;
	pointer-events:none;
}

/* ─── Loading state ───────────────────────────────────────────────── */

/*
 * Use aria-busy="true" + data-loading="true" to activate.
 * The spinner is injected via ::before pseudo-element so
 * no extra markup is required. The button text remains in
 * the DOM for screen readers.
 */

.alm-btn[data-loading="true"] {
	position:       relative;
	color:          transparent !important;
	pointer-events: none;
}

.alm-btn[data-loading="true"]::after {
	content:       "";
	position:      absolute;
	inset:         50% auto auto 50%;
	transform:     translate(-50%, -50%);
	width:         1.125rem;
	height:        1.125rem;
	border:        2px solid currentColor;
	border-top-color: transparent;
	border-radius: var(--alm-radius-full);
	animation:     alm-spin 0.65s linear infinite;
	/* Restore the color the text had (use CSS variable per variant) */
	color:         var(--alm-spinner-color, white);
}

.alm-btn--secondary[data-loading="true"]::after,
.alm-btn--text[data-loading="true"]::after,
.alm-btn--icon[data-loading="true"]::after {
	--alm-spinner-color: var(--alm-color-navy-primary);
}

/* The text is visually hidden but still readable by assistive tech */
.alm-btn[data-loading="true"] > * {
	visibility: hidden;
}

@keyframes alm-spin {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ─── WhatsApp variant ────────────────────────────────────────────── */

.alm-btn--whatsapp {
	background-color: #25D366;
	border-color:     #25D366;
	color:            #FFFFFF;
}

.alm-btn--whatsapp:hover:not(:disabled):not([aria-disabled="true"]) {
	background-color: #1EB857;
	border-color:     #1EB857;
}

.alm-btn--whatsapp:active:not(:disabled):not([aria-disabled="true"]) {
	background-color: #17A34A;
	border-color:     #17A34A;
}

/* ─── Ghost ────────────────────────────────────────────────────────── */

.alm-btn--ghost {
	background-color: transparent;
	border-color:     var(--alm-color-border);
	color:            var(--alm-color-text-primary);
}

.alm-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
	background-color: var(--alm-color-navy-primary-10);
	border-color:     var(--alm-color-navy-primary);
	color:            var(--alm-color-navy-primary);
}

.alm-btn--ghost:active:not(:disabled):not([aria-disabled="true"]) {
	background-color: var(--alm-color-navy-primary-10);
	border-color:     var(--alm-color-navy-primary);
}


/* ═══════════════════════════════════════════════════════════════════
   BRAND FOUNDATION REFRESH — 2026
   ══════════════════════════════════════════════════════════════════ */

.alm-btn {
	position: relative;
	isolation: isolate;
	letter-spacing: -0.01em;
	box-shadow: none;
	transition:
		transform var(--alm-duration-fast) var(--alm-easing-standard),
		box-shadow var(--alm-duration-base) var(--alm-easing-standard),
		background-color var(--alm-duration-base) var(--alm-easing-standard),
		border-color var(--alm-duration-base) var(--alm-easing-standard),
		color var(--alm-duration-base) var(--alm-easing-standard);
}

.alm-btn:hover:not(:disabled):not([aria-disabled="true"]) {
	transform: translateY(-1px);
}

.alm-btn:active:not(:disabled):not([aria-disabled="true"]) {
	transform: translateY(0);
}

.alm-btn--primary {
	box-shadow: 0 8px 20px rgba(14, 34, 58, 0.16);
}

.alm-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
	box-shadow: 0 12px 28px rgba(14, 34, 58, 0.22);
}

.alm-btn--accent {
	box-shadow: 0 8px 20px rgba(199, 154, 86, 0.20);
}

.alm-btn--accent:hover:not(:disabled):not([aria-disabled="true"]) {
	box-shadow: 0 12px 28px rgba(199, 154, 86, 0.28);
}

.alm-btn--secondary {
	background-color: rgba(255, 255, 255, 0.72);
}

.alm-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
	background-color: var(--alm-color-white);
	border-color: var(--alm-color-sand-dark);
}

.alm-btn--whatsapp {
	background-color: var(--alm-color-whatsapp);
	border-color: var(--alm-color-whatsapp);
	box-shadow: 0 8px 20px rgba(22, 139, 91, 0.18);
}

.alm-btn--whatsapp:hover:not(:disabled):not([aria-disabled="true"]) {
	background-color: var(--alm-color-whatsapp-hover);
	border-color: var(--alm-color-whatsapp-hover);
	box-shadow: 0 12px 28px rgba(22, 139, 91, 0.24);
}

.alm-btn--icon {
	border-radius: var(--alm-radius-lg);
}

.alm-btn--lg {
	min-height: 3.5rem;
	padding-inline: clamp(1.5rem, 4vw, 2.25rem);
}

@media (max-width: 30rem) {
	.alm-btn--mobile-full {
		width: 100%;
	}
}