/**
 * Payment Form – custom front-end styles.
 *
 * Loaded by components/com_pmform/Controller/Display.php as
 *   media/com_pmform/assets/css/custom.css?version=<file-mtime>
 * so every edit here cache-busts. Pairs with
 *   media/com_pmform/js/custom_validation_rules.js
 * which switches jQuery validationEngine from floating bubbles to inline
 * prompts and tags each message with .uk-text-danger / .pf-inline-error.
 *
 * NOTE: if changes here don't show, it's almost always a stale cache —
 * clear Joomla cache (System -> Clear Cache) and hard-reload, and test the
 * form logged out / in a private window (System - Page Cache serves guests a
 * stored page snapshot). Active template: yootheme_alpaca.
 */

/* -- 1. Required-field asterisk ---------------------------------------------
   Overrides media/com_pmform/assets/css/style.css `.required { color: red }`. */
.pf-container .required {
	color: #DC3545 !important;
}

/* -- 2. Form block alignment --------------------------------------------
   #pmform-form and #os_form both carry Bootstrap's `.row` class (com_pmform
   BS5 class map + Form-Grid). `.row` pairs a -0.75rem negative side margin
   with 0.75rem padding on its children so the outer edges net to zero and
   the field columns line up with the heading/intro text above the form.
   DO NOT override those margins here - zeroing them (or using margin:auto)
   leaves the child padding uncompensated and indents the fields ~12px per
   nesting level, pushing them out of alignment with the titles.

   If the form's card ever sits in a narrower, left-aligned YOOtheme grid
   column, centre that column instead (leaves the internal .row math alone):

   .uk-grid:has(#pmform-form) { justify-content: center !important; }
*/

/* -- 3. Total amount field: fixed 150px width --------------------------- */
#total_amount {
	width: 150px !important;
	max-width: 150px !important;
	display: inline-block;
}

/* -- 4. Inline validation messages -------------------------------------------
   Bold #DC3545 text directly beneath each field instead of the floating
   validationEngine speech-bubble.

   Placed in a dedicated CSS Grid row on .controls (see section 5) instead
   of just flowing after the input, so the message appearing/disappearing
   never changes the field wrapper's height - Grid always reserves that
   row's track space, whether or not the message element exists in the
   DOM, without needing position:absolute (which depends on containing-
   block/stacking-context details that are harder to guarantee here). */
.formError.inline,
.formError.pf-inline-error {
	display: block;
	grid-row: 2;
	align-self: start;
	margin: 0;
	padding: 0;
	max-width: 100%;
	background: none;
	box-shadow: none;
	cursor: default;
	color: #DC3545 !important;
}

.formError.inline .formErrorContent,
.formError.pf-inline-error .formErrorContent {
	display: block;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
	color: #DC3545 !important;
	font-size: 0.8125rem;
	line-height: 1.4;
	font-weight: 700;
	white-space: normal;
}

.formError.inline .formErrorArrow,
.formError.pf-inline-error .formErrorArrow {
	display: none !important;
}

/* -- 5. Reserve space for the validation message so fields don't shift ----
   .controls (wraps the input/select/textarea; validationEngine inserts the
   .formError.inline message as its next sibling, still inside .controls -
   see field_first_name markup: <div class="controls"><input>...</div>)
   becomes a 2-row grid: row 1 (auto) sizes to the input, row 2 (a fixed
   22px, enough for one line of message text) is reserved for the message
   in section 4. CSS Grid keeps that row's track space allocated whether
   or not the message element currently exists in the DOM, so nothing
   below the field - the next field in the row, the next row, the totals
   block - jumps when a field goes from valid to invalid or back.
   Overrides theme.9.css's `.controls{display:flow-root}`.
   Every field gets the same reserved space regardless of whether it's
   required/validated, so spacing stays consistent across the whole form. */
.pf-container .controls {
	display: grid;
	grid-template-rows: auto 22px;
}

/* -- 6. One focus colour, not two -----------------------------------------
   Fields carry both Bootstrap's .form-control/.form-select (from
   com_pmform's BS5 class map) and the template's own generic focus rule
   (theme.9.css: `input:focus, .uk-select:focus, .uk-textarea:focus
   { border-color:#116e32 !important }`, applied site-wide, no class
   needed). Bootstrap adds its own blue focus ring on top of that green
   border change (`.form-control:focus / .form-select:focus
   { border-color:#86b7fe; box-shadow:0 0 0 .25rem #0d6efd40 }`), so both
   colours show at once. Removing just the blue box-shadow/border here
   leaves the theme's green border+background focus state doing the job
   (that's the same visible-focus treatment every other input on the site
   already uses, so accessibility is unaffected - not a case of removing
   focus styling, just the duplicate blue ring).
   !important is required: bootstrap.min.css's load position relative to
   this file differs by page, so a same-specificity override without
   !important only wins the cascade tie on some pages. */
.pf-container .form-control:focus,
.pf-container .form-select:focus {
	box-shadow: none !important;
	border-color: #116e32 !important;
}

/* -- 7. Tighter vertical spacing between fields -----------------------------
   Overrides media/com_pmform/assets/css/style.css `.form-group.form-row
   { margin-bottom: 15px }` (the only rule spacing field rows apart) down
   to 5px. Doesn't touch section 5's reserved error-message row, so
   messages still have their space regardless of this change. */
.pf-container .form-group.form-row {
	margin-bottom: 5px;
}

/* -- 8. Currency-symbol addon: white background --------------------------
   .input-group-text (the prepended currency symbol on amount fields, see
   components/com_pmform/View/Payment/tmpl/default.php) defaults to
   Bootstrap's var(--bs-tertiary-bg), a light grey. */
.pf-container .input-group-text {
	background-color: #fff;
}

/* -- 9. Process Payment button: 5px top margin ---------------------------
   See components/com_pmform/View/Form/tmpl/form.php's .form-actions block. */
#btn-submit {
	margin-top: 5px;
}

/* -- 10. Hide the "Payment Method" label ----------------------------------
   See components/com_pmform/View/Form/tmpl/form_payment_methods.php - the
   label shares .form-control-label with every other field label, so this
   is scoped to .payment_information (its wrapper) only. The radio choices
   themselves (in .controls, same wrapper) are untouched. */
.pf-container .payment_information .form-control-label {
	display: none;
}

/* -- 11. Hide the "Total Amount" label -------------------------------------
   See components/com_pmform/View/Form/tmpl/form_payment_amounts.php - this
   control-group is a static template block (not a DB field), so it has no
   class/id of its own to target; scoped via :has(#total_amount) to just
   this one instead of every field's .form-control-label. */
.pf-container .form-group.form-row:has(#total_amount) .form-control-label {
	display: none;
}

/* -- 12. Total Amount field: bottom margin ---------------------------------
   Overrides section 7's general 5px .form-group.form-row margin-bottom
   for just this field. */
.pf-container .form-group.form-row:has(#total_amount) {
	margin-bottom: 15px;
}