/**
 * Ascend Closest Store — Modal Styles
 * Minimal, accessible modal that layers cleanly over any Ascend theme.
 */

/* ── Overlay ───────────────────────────────────────────────────────────────── */
.acs-modal-overlay {
	position:        fixed;
	inset:           0;
	background:      rgba( 0, 0, 0, 0.55 );
	z-index:         999999;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         1rem;
	opacity:         0;
	transition:      opacity 0.22s ease;
}

.acs-modal-overlay.acs-modal--visible {
	opacity: 1;
}

.acs-modal-overlay.acs-modal--closing {
	opacity:    0;
	transition: opacity 0.18s ease;
}

/* ── Dialog box ─────────────────────────────────────────────────────────────── */
.acs-modal-box {
	background:    #fff;
	border-radius: 12px;
	padding:       2rem 2.25rem 1.75rem;
	max-width:     440px;
	width:         100%;
	box-shadow:    0 20px 60px rgba( 0, 0, 0, 0.25 );
	transform:     translateY( 16px );
	transition:    transform 0.22s ease;
}

.acs-modal--visible .acs-modal-box {
	transform: translateY( 0 );
}

/* ── Text ───────────────────────────────────────────────────────────────────── */
.acs-modal-heading {
	margin:      0 0 0.6rem;
	font-size:   1.35rem;
	font-weight: 700;
	line-height: 1.3;
	color:       #1a1a1a;
}

.acs-modal-body {
	margin:      0 0 1.5rem;
	font-size:   1rem;
	line-height: 1.55;
	color:       #444;
}

/* ── Action buttons ─────────────────────────────────────────────────────────── */
.acs-modal-actions {
	display:         flex;
	gap:             0.75rem;
	flex-wrap:       wrap;
}

.acs-modal-actions .elementor-button {
	flex:          1 1 auto;
	min-width:     120px;
	padding:       0.7rem 1.25rem;
	border:        none;
	border-radius: 6px;
	font-size:     0.95rem;
	font-weight:   600;
	cursor:        pointer;
	transition:    filter 0.15s ease, transform 0.12s ease;
	color:         #fff;
	text-align:    center;
}

.acs-modal-actions .acs-modal-confirm {
    background: #E59E32 !important;
    border-radius: 25px;
}
.acs-modal-actions .acs-modal-cancel {
    background: #888;
    border-radius: 25px;
}

.acs-modal-actions .elementor-button:hover {
	filter:    brightness( 1.12 );
	transform: translateY( -1px );
}

.acs-modal-actions .elementor-button:focus-visible {
	outline:        3px solid #1a6b3c;
	outline-offset: 2px;
}

/* ── Trigger button loading state ───────────────────────────────────────────── */
.acs-button--loading {
	cursor:  wait;
	opacity: 0.75;
}

/* ── Wrapper alignment helpers ──────────────────────────────────────────────── */
.acs-button-wrap {
	display: block;
}

.acs-button-wrap .acs-button {
	display:         inline-flex;
	align-items:     center;
	gap:             0.5em;
	cursor:          pointer;
	text-decoration: none;
	border:          none;
}

.acs-button-wrap.is-justify .acs-button {
	width:           100%;
	justify-content: center;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media ( max-width: 480px ) {
	.acs-modal-box {
		padding: 1.5rem 1.25rem 1.25rem;
	}
	.acs-modal-actions {
		flex-direction: column;
	}
	.acs-modal-actions .elementor-button {
		width: 100%;
	}
}