/**
 * Husna Square — checkout.
 *
 * Only the decline dialog lives here. The card field itself is styled by the
 * theme, which owns the id `husna-square-card` as a seam; this file must not
 * reach into it.
 *
 * TOKENS ARE READ FROM THE THEME WITH FALLBACKS. `assets/css/tokens.css` in the
 * theme defines --ink, --paper, --gold and the rest, and this dialog is only
 * ever shown on a page that theme rendered. The fallbacks exist because a
 * payment plugin that becomes unreadable when someone switches theme is a worse
 * failure than one that looks plain: a guest must be able to read what happened
 * to their money whatever else is broken.
 */

.husna-decline {
	/*
	 * A <dialog> opened with showModal() is in the browser's top layer, above
	 * the whole normal stacking context, so no z-index appears anywhere in this
	 * file. Adding one would do nothing and would suggest to the next reader
	 * that the stacking here is contested.
	 */
	/*
	 * CENTRING IS RESTORED EXPLICITLY, AND IT IS NOT REDUNDANT.
	 *
	 * A modal <dialog> is centred by the user agent with `inset: 0` plus
	 * `margin: auto`. The theme's reset is `*, *::before, *::after { margin: 0 }`
	 * — which matches this element too, beats the UA sheet, and pins the dialog
	 * to the top-left corner of the viewport. Nothing measurable changes: the
	 * box is the right size, it is on top, it hit-tests correctly, and every
	 * assertion passes. It was found by looking at the screenshot.
	 *
	 * Written as `inset` and `margin` together rather than `margin: auto` alone,
	 * because the auto-centring only resolves against the UA's `inset: 0`, and a
	 * future reset that zeroes `inset` would break it again silently.
	 */
	inset: 0;
	margin: auto;

	max-width: 34rem;
	width: calc(100vw - 2rem);
	/* Never taller than the viewport; the body scrolls inside if the copy grows. */
	max-height: calc(100vh - 2rem);
	padding: 0;
	border: 0;
	background: var(--paper, #FFFFFF);
	color: var(--ink, #0B0B0B);
	font-family: var(--ui, "Montserrat", -apple-system, "Helvetica Neue", sans-serif);
	box-shadow: 0 24px 60px rgba(11, 11, 11, .28);
}

.husna-decline::backdrop {
	background: rgba(11, 11, 11, .58);
}

.husna-decline__inner {
	padding: clamp(24px, 5vw, 40px);
	border-top: 3px solid var(--gold, #CAAA61);
	/* If the copy ever outgrows a short viewport, this scrolls rather than the
	   dialog being clipped with the buttons out of reach. */
	overflow-y: auto;
	max-height: calc(100vh - 2rem);
}

.husna-decline__eyebrow {
	margin: 0 0 14px;
	font-size: 9.5px;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--gold-deep, #96762E);
}

.husna-decline__title {
	margin: 0 0 14px;
	font-family: var(--display, "Montserrat", sans-serif);
	font-size: clamp(21px, 3.4vw, 27px);
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: 1.25;
	color: var(--ink, #0B0B0B);
}

.husna-decline__body {
	margin: 0 0 24px;
	font-size: 14.5px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--grey, #5E5E5E);
}

.husna-decline__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.husna-decline__btn {
	flex: 1 1 auto;
	/*
	 * 48px, not the 44px minimum. These two are pressed by someone who has just
	 * been told their payment failed, frequently on a phone, frequently in a
	 * hurry — the state in which a mis-tap costs the booking.
	 */
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 22px;
	border: 1px solid var(--ink, #0B0B0B);
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: .2em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background: transparent;
	color: var(--ink, #0B0B0B);
}

.husna-decline__btn--primary {
	background: var(--ink, #0B0B0B);
	color: var(--paper, #FFFFFF);
}

/*
 * ESCALATED: the second failure, and every unsafe-to-retry failure.
 *
 * The two buttons swap weight rather than the calling option appearing from
 * nowhere — it was already there on the first failure, as the quiet outline
 * button. A control that moves is easier to follow than one that materialises.
 */
.husna-decline.is-escalated .husna-decline__btn--call {
	background: var(--ink, #0B0B0B);
	color: var(--paper, #FFFFFF);
}

.husna-decline.is-escalated .husna-decline__btn--primary {
	background: transparent;
	color: var(--ink, #0B0B0B);
}

.husna-decline__contact {
	margin: 18px 0 0;
	font-size: 12.5px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--grey, #5E5E5E);
}

.husna-decline__contact a {
	color: var(--gold-deep, #96762E);
}

/*
 * `hidden` is set by JavaScript on the title that does not apply and on the
 * retry button when a retry is unsafe. The attribute's own UA style is
 * `display: none`, which any `display` declaration on the same element would
 * beat — so this restores it explicitly for the flex children above, where a
 * later rule sets `display: inline-flex`.
 */
.husna-decline [hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.husna-decline[open] {
		animation: husna-decline-in .18s ease-out;
	}

	@keyframes husna-decline-in {
		from { opacity: 0; transform: translateY(8px); }
		to   { opacity: 1; transform: none; }
	}
}