/**
 * FleetForm Addon Template - Frontend Styles
 *
 * Frontend stylesheet for the FleetForm Addon Template.
 * Only loaded when frontend functionality is needed.
 *
 * @package FleetFormAddonTemplate
 */

/* ==========================================================================
   Frontend Base Styles
   ========================================================================== */

/* ==========================================================================
   Frontend Forms
   ========================================================================== */

/* ==========================================================================
   Frontend Buttons
   ========================================================================== */

/* ==========================================================================
   Notices and loading states are CORE's (core#7 item 1). frontend-scripts.js
   emits .fleetform-notice / .fleetform-notice--<type> and .fleetform-is-loading,
   styled by core's fleet-form.css from the TENANT palette. The pastel copies
   that lived here ignored the palette; do not re-add them.
   ========================================================================== */

/* ==========================================================================
   Frontend Cards and Widgets
   ========================================================================== */

/* ==========================================================================
   Frontend Tables
   ========================================================================== */

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.fleetform-text-center {
    text-align: center;
}

.fleetform-text-right {
    text-align: right;
}

.fleetform-text-left {
    text-align: left;
}

.fleetform-mb-10 {
    margin-bottom: 10px;
}

.fleetform-mb-20 {
    margin-bottom: 20px;
}

.fleetform-mt-10 {
    margin-top: 10px;
}

.fleetform-mt-20 {
    margin-top: 20px;
}

.fleetform-hidden {
    display: none;
}

.fleetform-clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* An EMPTY error line still took its margins, leaving a gap under the card
   fields on every render (measured on the real Parlay payment screen, #53). */
.fleetform-payments-card__error:empty {
	display: none;
}

/* The frame is a block, so no inline-baseline sliver sits under it, and the
   note keeps a deliberate gap. Through the armour's block token as well, since
   the armour floors paragraph margins inside a FleetForm container (core#70). */
.fleetform-payments-card__frame {
	display: block;
}

/* 0-2-0 on purpose: a host page's own `.x p` (0-1-1) must not flatten it. */
.fleetform-payments-card .fleetform-payments-card__note {
	margin-top: 10px;
	--ff-block-margin-top: 10px;
}

/* The card field reads as an INPUT, not loose text on the page (Ethan,
   2026-09-26: "improve the spacing just a little bit for stripe"). Colours are
   the tenant's --fleet-* tokens; Stripe's iframe inside takes its text colour
   from elements.js themeStyle(). 0-2-0 so a host page's `.x div` cannot flatten it. */
.fleetform-payments-card .fleetform-payments-card__label {
	display: block;
	margin-bottom: 8px;
}
.fleetform-payments-card .fleetform-payments-card__element {
	padding: 14px 14px;
	border: 1px solid var(--fleet-border-color, rgba(128, 128, 128, 0.45));
	border-radius: var(--input-border-radius, 8px);
	background: var(--fleet-background-panel, transparent);
	box-sizing: border-box;
}
.fleetform-payments-card .fleetform-payments-card__element.StripeElement--focus {
	border-color: var(--fleet-accent-color, #f0bd5b);
}
.fleetform-payments-card .fleetform-payments-card__element.StripeElement--invalid {
	border-color: #ff5a4f;
}
.fleetform-payments-card .fleetform-payments-card__error {
	color: #ff5a4f;
	margin-top: 8px;
}

/* ── #68: Apple Pay / Google Pay buttons and the Payment Element ─────────────
   The buttons and the Payment Element are Stripe iframes; these rules only
   space the containers. A device with no wallet renders no buttons, and the
   wrapper collapses (`is-empty`) so no gap or "or" line is left behind. */
.fleetform-payments-express {
	margin-bottom: 14px;
}
.fleetform-payments-express.is-empty {
	margin-bottom: 0;
}
.fleetform-payments-express .fleetform-payments-express__or {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0 0;
	--ff-block-margin-top: 14px;
	/* #70: the wrapper's 14px is the ONLY space under the divider, matching
	   the 14px above it. The bottom token too, not just the property: a host
	   `p` rule (booking's renter card sets --ff-block-margin-bottom: 16px)
	   feeds the armour, which paints the margin from the token. */
	--ff-block-margin-bottom: 0;
	font-size: 0.9em;
	opacity: 0.75;
}
.fleetform-payments-express .fleetform-payments-express__or[hidden] {
	display: none;
}
.fleetform-payments-express .fleetform-payments-express__or::before,
.fleetform-payments-express .fleetform-payments-express__or::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--fleet-border-color, rgba(128, 128, 128, 0.45));
}
.fleetform-payments-checkout .fleetform-payments-checkout__element {
	min-height: 40px;
}