/*
	Rental agreement (#3637) — the .ra-* namespace.

	Loaded in BOTH the portal base layout (counter signing on booking detail)
	and the widget layout (the customer's signing page), because the agreement
	"sheet" is the exact same document on both surfaces. Every selector is
	namespaced, so it is inert on any page that doesn't use it.

	Mirrors docs/mockups/booqable-parity/rental-agreement-mockup.html and reuses
	the booking-detail token values so the card sits flush beside .bd-card.
*/

:root {
	--ra-navy: #003264;
	--ra-ink: #1a2b3c;
	--ra-ink-2: #3c4c5d;
	/* The app-wide muted token (public/style.css) — darkened to #5A7089 for
	   WCAG AA. Never a literal hex here, or this namespace drifts back. */
	--ra-mute: var(--ed-text-muted, #5A7089);
	--ra-line: #e5e9f0;
	--ra-line-strong: #d7dde6;
	--ra-success: #16a34a;
	--ra-success-soft: #e5f5ec;
	--ra-success-ink: #0f7a3d;
	--ra-warn: #d97706;
	--ra-warn-soft: #fff4e0;
	--ra-warn-ink: #a35c04;
}

/* ------------------------------------------------------------------ *
 * Status pill
 * ------------------------------------------------------------------ */

.ra-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 0 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.ra-status__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.ra-status--signed { background: var(--ra-success-soft); color: var(--ra-success-ink); }
.ra-status--signed .ra-status__dot { background: var(--ra-success); }
.ra-status--sent { background: #eef3f8; color: #35526f; }
.ra-status--sent .ra-status__dot { background: var(--ra-mute); }
.ra-status--draft { background: var(--ra-warn-soft); color: var(--ra-warn-ink); }
.ra-status--draft .ra-status__dot { background: var(--ra-warn); }

/* ------------------------------------------------------------------ *
 * Booking-detail row (inside the Documents card)
 * ------------------------------------------------------------------ */

.ra-row {
	padding: 12px 0 4px;
	border-bottom: 1px solid var(--ra-line);
	margin-bottom: 8px;
}

.ra-row__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.ra-row__wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.ra-row__icon {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 8px;
	background: #eef3f8;
	color: var(--ra-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.ra-row__name {
	font-size: 13px;
	font-weight: 700;
	color: var(--ra-ink);
}

.ra-row__meta {
	font-size: 11.5px;
	color: var(--ra-mute);
	margin-top: 1px;
}

.ra-row__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 12px;
}

/* public/style.css sets a global `.btn-primary { width: 100% }`. Left alone it
   stretches the primary action across the whole row, pushes its partner onto a
   second line, and leaves the two at different heights (41px vs 34px). Scope
   the width back and give both one height so the actions read as one row.

   That height is 44px, not the usual 40px form height: these buttons sign,
   send and clear a contract on a phone, and 44x44 is the minimum tap target.
   The 640px rule further down still stacks them full-width on a phone. */
.ra-row__actions .btn,
.ra-panel__actions .btn,
.ra-sign__actions .btn,
.ra-form__actions .btn {
	width: auto;
	min-height: 44px;
}

/* Icon-only row actions (#3735/#3736). They sit beside the labelled "Sign now"
   button, so the 44px rule above already gives them a matching height — this
   only squares them up so the icon isn't a 30px-wide sliver and the tap target
   is a full 44x44 on a phone. */
.ra-icon-action {
	min-width: 44px;
	padding-left: 0;
	padding-right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Never stretched by the ≤640px full-width stack rule further down. */
	flex: 0 0 auto;
}

/* A link dropped into helper text must stay in the sentence — public/style.css
   sets a global `a { display: block }`. */
.ra-row a,
.ra-sheet a {
	display: inline;
}

/* ------------------------------------------------------------------ *
 * The agreement sheet — identical on the counter and the customer page
 * ------------------------------------------------------------------ */

.ra-sheet {
	background: #fff;
	border: 1px solid var(--ra-line-strong);
	border-radius: 6px;
	padding: 28px 30px 26px;
	color: var(--ra-ink);
	max-width: 760px;
	margin: 0 auto;
}

.ra-sheet__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--ra-navy);
}

.ra-sheet__logo {
	max-height: 46px;
	max-width: 170px;
	margin-bottom: 6px;
	display: block;
}

.ra-sheet__business {
	font-size: 18px;
	font-weight: 700;
	color: var(--ra-navy);
}

.ra-sheet__addr {
	font-size: 12px;
	color: var(--ra-mute);
	margin-top: 3px;
	line-height: 1.55;
}

.ra-sheet__title-block { text-align: right; }

.ra-sheet__title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.1px;
	color: var(--ra-ink-2);
}

.ra-sheet__ref {
	font-size: 12px;
	color: var(--ra-mute);
	margin-top: 3px;
}

.ra-parties {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	padding: 16px 0 4px;
}

.ra-party { flex: 1 1 220px; min-width: 0; }

.ra-party__label {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: var(--ra-mute);
	margin-bottom: 4px;
}

.ra-party__name {
	font-size: 13.5px;
	font-weight: 700;
}

.ra-party__line {
	font-size: 12px;
	color: var(--ra-ink-2);
	word-break: break-word;
}

.ra-table-wrap { overflow-x: auto; }

.ra-table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0 4px;
	font-size: 12.5px;
}

.ra-table th {
	text-align: left;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .7px;
	color: var(--ra-mute);
	padding: 7px 10px;
	border-bottom: 1px solid var(--ra-line-strong);
	background: #fafbfd;
}

.ra-table td {
	padding: 9px 10px;
	border-bottom: 1px solid var(--ra-line);
	vertical-align: top;
}

.ra-table .ra-num {
	text-align: right;
	white-space: nowrap;
}

.ra-table tfoot td {
	border-bottom: 0;
	padding: 6px 10px;
}

.ra-table tfoot .ra-lab { text-align: right; color: var(--ra-ink-2); }
.ra-table tfoot tr.ra-total td { font-weight: 700; font-size: 13.5px; }
.ra-table tfoot tr.ra-total .ra-num { color: var(--ra-navy); }
.ra-table tfoot tr.ra-sub td { color: var(--ra-mute); font-size: 12px; }

.ra-terms { margin-top: 18px; }

.ra-terms__head {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: var(--ra-ink-2);
	margin-bottom: 6px;
}

/* The wording is rich text (#3733) — RichTextHelper::render() turns it into
   allowlisted HTML (and legacy plain-text rows into <br>s), so `pre-wrap` must
   NOT be here or every paragraph would gain a blank line. */
.ra-terms__body {
	font-size: 12.5px;
	color: var(--ra-ink-2);
	line-height: 1.7;
}

.ra-terms__body p {
	margin: 0 0 10px;
}

.ra-terms__body p:last-child {
	margin-bottom: 0;
}

.ra-terms__body ul,
.ra-terms__body ol {
	margin: 0 0 10px;
	padding-left: 22px;
}

.ra-terms__body li {
	margin-bottom: 4px;
}

/* The editor offers headings; without these they'd paint at browser defaults
   (h1 ≈ 2em) and tower over a 12.5px document. */
.ra-terms__body h1,
.ra-terms__body h2 {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ra-ink);
	margin: 16px 0 7px;
}

.ra-terms__body h3,
.ra-terms__body h4,
.ra-terms__body h5,
.ra-terms__body h6 {
	font-size: 13px;
	font-weight: 700;
	color: var(--ra-ink);
	margin: 14px 0 6px;
}

.ra-terms__body blockquote {
	margin: 0 0 10px 14px;
	padding-left: 10px;
	border-left: 2px solid var(--ra-line-strong);
}

/* ------------------------------------------------------------------ *
 * Signature box
 * ------------------------------------------------------------------ */

.ra-sign {
	margin-top: 24px;
	border: 1px solid var(--ra-line-strong);
	border-radius: 8px;
	padding: 16px 18px 14px;
	background: #fcfdfe;
}

.ra-sign__label {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: var(--ra-mute);
}

.ra-sign__pad {
	position: relative;
	margin-top: 8px;
	height: 120px;
	border: 1px dashed var(--ra-line-strong);
	border-radius: 6px;
	background: #fff;
}

.ra-sign__canvas {
	display: block;
	width: 100%;
	height: 118px;
	touch-action: none;
	user-select: none;
	cursor: crosshair;
}

.ra-sign__hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	text-align: center;
	font-size: 11.5px;
	color: #b6c2ce;
	pointer-events: none;
}

.ra-sign__image {
	margin-top: 8px;
	padding-bottom: 4px;
	border-bottom: 1.5px solid var(--ra-ink-2);
}

.ra-sign__image img {
	display: block;
	max-height: 84px;
	max-width: 100%;
}

.ra-sign__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-top: 12px;
}

.ra-sign__name-field { flex: 1 1 240px; min-width: 0; }

.ra-sign__field-label {
	display: block;
	font-size: 12px;
	color: var(--ra-ink-2);
	margin-bottom: 4px;
}

.ra-sign__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* "Agree and sign" / "Clear" — the pair that signs a contract, so 44px is the
   floor on a phone, not the usual 40px form height. The name input beside them
   already renders taller than that on both surfaces (52px on the customer
   page, 54px in the counter panel), so the row still reads as one height. */
.ra-sign__actions .btn { min-height: 44px; }

.ra-sign__log {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--ra-ink-2);
}

.ra-sign__check {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	flex: 0 0 16px;
	background: var(--ra-success);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 700;
}

.ra-note {
	font-size: 12px;
	color: var(--ra-mute);
	margin-top: 12px;
}

.ra-notice {
	border: 1px solid #fde68a;
	background: #fffbeb;
	color: #92400e;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13px;
	margin-top: 12px;
}

/* ------------------------------------------------------------------ *
 * Counter signing panel (booking detail) + customer page shell
 * ------------------------------------------------------------------ */

.ra-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 16px;
}

.ra-page { padding: 24px 0 48px; }

.ra-page__head {
	text-align: center;
	margin-bottom: 16px;
}

.ra-page__business {
	font-weight: 600;
	font-size: 15px;
	color: var(--ra-ink);
}

.ra-page__meta {
	font-size: 12.5px;
	color: var(--ra-mute);
	margin-top: 2px;
}

/* ------------------------------------------------------------------ *
 * Settings › Rentals → Agreement tab (#3724) — the wording editor
 * ------------------------------------------------------------------ */

/* "Needed before pickup" lives inside the master-switch card (#3734), set off
   from the switch above it by the same hairline the settings rows use. */
.ra-switch-extra {
	margin-top: 14px;
	padding-top: 4px;
	border-top: 1px solid #f1f3f5;
}

.ra-switch-extra .set-row:first-child {
	padding-bottom: 0;
}

/* A document heading is a few words, not a paragraph — `.set-field .form-control`
   would otherwise stretch it across the whole card. */
.ra-heading-input {
	max-width: 420px;
}

/* The shared <x-input.description> field brings its own `mb-3` wrapper; inside
   a settings .set-field that reads as a double gap. */
.ra-editor > .mb-3 {
	margin-bottom: 0 !important;
}

/* The agreement is a full page of terms, not a one-line note. */
.ra-editor .ql-editor {
	min-height: 340px;
}

.ra-tags-label {
	margin-top: 14px;
}

/* ------------------------------------------------------------------ *
 * Settings — merge tag reference
 * ------------------------------------------------------------------ */

.ra-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.ra-tag {
	border: 1px solid var(--ra-line-strong);
	background: #fff;
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 11.5px;
	color: var(--ra-ink-2);
	cursor: pointer;
	font-family: inherit;
}

.ra-tag:hover { background: #eef3f8; border-color: #b9cbdd; }

.ra-tag__code {
	font-weight: 700;
	color: var(--ra-navy);
}

@media (max-width: 640px) {
	.ra-sheet { padding: 20px 18px 18px; }
	.ra-sheet__head { flex-direction: column; }
	.ra-sheet__title-block { text-align: left; }
	.ra-parties { gap: 16px; }
	.ra-panel__actions .btn,
	.ra-form__actions .btn,
	.ra-sign__actions .btn { flex: 1 1 100%; }
}