/**
 * @file
 * CiviCRM form styling.
 *
 * Styles CiviCRM public-facing forms to match the cudar_theme design system.
 * Uses single-column layout for clarity and accessibility, with labels
 * positioned above inputs rather than in narrow side columns.
 *
 * All rules target #crm-container.crm-public to avoid affecting admin forms.
 * Form-specific selectors follow the pattern:
 *   #crm-container.crm-public .CRM_Form_Class_Name ...
 *
 * Price Set Sections:
 * - Contribution forms (#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main):
 *   Two-column layout with horizontal pill-style radio options.
 *   Priceset is in #priceset-div at the top of the form.
 *
 * - Event registration forms (#crm-container.crm-public .CRM_Event_Form_Registration_Register)
 *   and additional participant forms (.CRM_Event_Form_Registration_AdditionalParticipant):
 *   Card-based layout with visible radio buttons in a grid.
 *   Priceset is in fieldset#priceset partway through the form.
 *
 * - Event registration confirm page (.CRM_Event_Form_Registration_Confirm):
 *   Review/summary page with card-like section groups, dark headers,
 *   line item tables, and clear total displays.
 */

/* ==========================================================================
   Base Container
   ========================================================================== */

#crm-container.crm-public {
  font-family: var(--font-body);
  font-size: var(--font-body-medium);
  line-height: var(--line-height);
  color: var(--cam-slate-4);
}

#crm-container.crm-public *,
#crm-container.crm-public *::before,
#crm-container.crm-public *::after {
  box-sizing: border-box;
}

.crm-container.crm-public form h3 {
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 400;
}

/* ==========================================================================
   Form
   ========================================================================== */

/* Override layout.css form max-width restriction for CiviCRM forms. */
#crm-container.crm-public form {
  max-width: none;
  margin-bottom: 2rem;
}

.crm-container div.form-item {
  padding-top: 0;
  padding-bottom: 1rem;
}

/* Keep individual fields at standard width. */
#crm-container.crm-public .crm-section,
#crm-container.crm-public .crm-section .content {
  max-width: var(--field-max-width);
  margin-top: 0;
}

/* Allow price set content to be wider. */
#crm-container.crm-public .price_set-section .content {
  max-width: none;
}

/* ==========================================================================
   Section Layout - Single Column
   ========================================================================== */

/* Override CiviCRM's float-based two-column layout. */
#crm-container.crm-public .crm-section {
  display: block;
  margin-top: 0 !important;
}

#crm-container.crm-public .crm-section .label {
  float: none;
  width: auto;
  text-align: left;
  margin-bottom: 0;
}

#crm-container.crm-public .crm-section .content {
  margin-left: 0;
}

#crm-container.crm-public .crm-section > .clear {
  display: none;
}

/* ==========================================================================
   Labels
   ========================================================================== */

#crm-container.crm-public .crm-section .label,
#crm-container.crm-public .crm-section .label label,
#crm-container.crm-public .crm-profile .label,
#crm-container.crm-public label.crm-form-label {
  font: var(--input-label);
  color: var(--cam-slate-4);
  display: block;
  float: none;
  width: auto;
  text-align: left;
  margin-top: 0;
}

/* Labels within .label container display inline for marker alignment. */
#crm-container.crm-public .crm-section .label {
  margin-top: 0;
  padding-top: 0;
}

#crm-container.crm-public .crm-section .label label {
  display: inline;
}

/* Required field marker. */
#crm-container.crm-public .crm-marker {
  color: var(--cam-red);
  margin-left: 0.25rem;
  display: inline;
  font-weight: var(--weight-normal);
}

/* Option labels (checkbox/radio) use normal weight. */
#crm-container.crm-public .crm-section .content label,
#crm-container.crm-public .price-set-row label {
  font-weight: var(--weight-normal);
  cursor: pointer;
}

/* ==========================================================================
   Text Inputs, Textareas, Selects
   ========================================================================== */

#crm-container.crm-public input[type="text"],
#crm-container.crm-public input[type="email"],
#crm-container.crm-public input[type="password"],
#crm-container.crm-public input[type="number"],
#crm-container.crm-public input[type="tel"],
#crm-container.crm-public input[type="url"],
#crm-container.crm-public input[type="date"],
#crm-container.crm-public input.crm-form-text,
#crm-container.crm-public textarea,
#crm-container.crm-public select:not(.select2-hidden-accessible) {
  padding: 0.5rem 1rem;
  font: var(--input-font);
  color: var(--cam-slate-4);
  width: 100%;
  height: 2.55rem;
  border: var(--input-border);
  border-bottom: var(--input-border-bottom);
  border-radius: var(--input-border-radius);
  background-color: var(--white);
  transition: border-color var(--transition-speed-fast),
  box-shadow var(--transition-speed-fast);
}

#crm-container.crm-public input[type="number"] {
  width: 40%;
  max-width: 200px;
}

#crm-container.crm-public textarea {
  min-height: 120px;
  resize: vertical;
}

/* Focus states. */
#crm-container.crm-public input[type="text"]:focus,
#crm-container.crm-public input[type="email"]:focus,
#crm-container.crm-public input[type="password"]:focus,
#crm-container.crm-public input[type="number"]:focus,
#crm-container.crm-public input[type="tel"]:focus,
#crm-container.crm-public input[type="url"]:focus,
#crm-container.crm-public input[type="date"]:focus,
#crm-container.crm-public input.crm-form-text:focus,
#crm-container.crm-public textarea:focus,
#crm-container.crm-public select:focus {
  border-bottom-color: var(--cam-blue);
  outline: 1px dashed var(--black);
  outline-offset: 2px;
}

/* Readonly/disabled. */
#crm-container.crm-public input[readonly],
#crm-container.crm-public input.readonly,
#crm-container.crm-public input:disabled,
#crm-container.crm-public select:disabled,
#crm-container.crm-public textarea:disabled {
  background-color: var(--cam-slate-1);
  cursor: not-allowed;
}

/* ==========================================================================
   Checkboxes
   ========================================================================== */

#crm-container.crm-public input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  margin: 0 1rem 0 0;
  border: 2px solid var(--cam-slate-2);
  border-radius: 4px;
  background-color: var(--white);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background-color var(--transition-speed-fast),
  border-color var(--transition-speed-fast);
}

#crm-container.crm-public input[type="checkbox"]:hover {
  border-color: var(--cam-slate-3);
}

#crm-container.crm-public input[type="checkbox"]:focus {
  border-color: var(--cam-blue);
  outline: 1px dashed var(--black);
  outline-offset: 2px;
}

#crm-container.crm-public input[type="checkbox"]:checked {
  background-color: var(--green);
  border-color: var(--green);
}

#crm-container.crm-public input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: var(--white);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

#crm-container.crm-public input[type="checkbox"] + label {
  display: inline;
  vertical-align: middle;
  cursor: pointer;
  margin-bottom: 0;
}

#crm-container.crm-public .crm-section.editrow_custom_2562-section.form-item .crm-hover-button.crm-clear-link {
  display: none;
}

/* ==========================================================================
   Radio Buttons
   ========================================================================== */

#crm-container.crm-public input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  margin: 0 1rem 0 0;
  border: 2px solid var(--cam-slate-2);
  border-radius: 50%;
  background-color: var(--white);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background-color var(--transition-speed-fast),
  border-color var(--transition-speed-fast);
}

#crm-container.crm-public input[type="radio"]:hover {
  border-color: var(--cam-slate-3);
}

#crm-container.crm-public input[type="radio"]:focus {
  border-color: var(--cam-blue);
  outline: 1px dashed var(--black);
  outline-offset: 2px;
}

#crm-container.crm-public input[type="radio"]:checked {
  background-color: var(--green);
  border-color: var(--green);
}

#crm-container.crm-public input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 14px;
  height: 14px;
  background-color: var(--white);
  border-radius: 50%;
}

#crm-container.crm-public input[type="radio"] + label {
  display: inline;
  vertical-align: middle;
  cursor: pointer;
  margin-bottom: 0;
}

/* Checkbox/radio option rows. */
#crm-container.crm-public .crm-section .content.crm-multiple-checkbox-radio-options > div:has(input[type="radio"]),
#crm-container.crm-public .crm-multiple-checkbox-radio-options > div.crm-option-label-pair {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 0.5rem;
}

#crm-container.crm-public .crm-section .content > div:has(input[type="radio"]):last-child,
#crm-container.crm-public .crm-multiple-checkbox-radio-options > div.crm-option-label-pair:last-child {
  margin-bottom: 1rem;
}

#crm-container.crm-public .crm-section .content > div.crm-multiple-checkbox-radio-options {
  flex-direction: column;
  gap: 0.5rem;
}

/* Sold out radio */
#crm-container.crm-public .price-set-row tt {
  margin-right: 1rem;
}

/* ==========================================================================
   Select2 Dropdowns (v3.x used by CiviCRM)
   ========================================================================== */

#crm-container.crm-public .select2-container {
  max-width: var(--field-max-width);
  width: 100% !important; /** CiviCRM applies inline width, therefore we must !important */
}

/* Select2 choice box (the visible selection). */
#crm-container.crm-public .select2-container .select2-choice {
  height: auto;
  min-height: 42px;
  padding: 0.5rem 2.5rem 0.5rem 1rem;
  border: var(--input-border);
  border-bottom: var(--input-border-bottom);
  border-radius: var(--input-border-radius);
  background: var(--white);
  line-height: 1.5;
  color: var(--cam-slate-4);
  transition: border-color var(--transition-speed-fast);
}

#crm-container.crm-public .select2-container a.select2-choice {
  text-decoration: none;
}

/* Selected text. */
#crm-container.crm-public .select2-container .select2-choice > .select2-chosen {
  line-height: 1.5;
  color: var(--cam-slate-4);
}

/* Dropdown arrow container. */
#crm-container.crm-public .select2-container .select2-choice .select2-arrow {
  width: 26px;
  border-left: none;
  background: transparent;
}

/* Dropdown arrow icon. */
#crm-container.crm-public .select2-container .select2-choice .select2-arrow b {
  background-position: 0 3px;
}

/* Open state arrow. */
#crm-container.crm-public .select2-dropdown-open .select2-choice .select2-arrow b {
  background-position: -18px 3px;
}

/* Focus and active states. */
#crm-container.crm-public .select2-container-active .select2-choice,
#crm-container.crm-public .select2-dropdown-open .select2-choice {
  border-bottom-color: var(--cam-blue);
  outline: 1px dashed var(--black);
  outline-offset: 2px;
}

.crm-container .select2-container .select2-choice abbr {
  top: 12px
}

/* Select2 dropdown results (renders outside container, so uses global selector). */
.select2-results .select2-highlighted {
  background-color: var(--cam-light-blue);
  color: var(--cam-slate-4);
}

.select2-results .select2-result-label {
  padding: 0.5rem 1rem;
}

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

/* ==========================================================================
   Buttons - Contribution and Event Registration Forms Only
   ========================================================================== */

.CRM_Contribute_Form_Contribution_Main #crm-submit-buttons,
.CRM_Event_Form_Registration_Register #crm-submit-buttons,
.CRM_Event_Form_Registration_AdditionalParticipant #crm-submit-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 2rem;
}

.CRM_Contribute_Form_Contribution_Main input[type="submit"],
.CRM_Contribute_Form_Contribution_Main button.crm-button,
.CRM_Contribute_Form_Contribution_Main .crm-form-submit,
.CRM_Contribute_Form_Contribution_Main .crm-button,
.CRM_Contribute_Form_Contribution_Main div[class^="cam-dd-confirm-"] a.button,
.CRM_Contribute_Form_Contribution_Confirm input[type="submit"],
.CRM_Contribute_Form_Contribution_Confirm button.crm-button,
.CRM_Contribute_Form_Contribution_Confirm .crm-form-submit,
.CRM_Contribute_Form_Contribution_Confirm .crm-button,
.CRM_Event_Form_Registration_Register input[type="submit"],
.CRM_Event_Form_Registration_Register button.crm-button,
.CRM_Event_Form_Registration_Register .crm-form-submit,
.CRM_Event_Form_Registration_Register .crm-button,
.CRM_Event_Form_Registration_AdditionalParticipant input[type="submit"],
.CRM_Event_Form_Registration_AdditionalParticipant button.crm-button,
.CRM_Event_Form_Registration_AdditionalParticipant .crm-form-submit,
.CRM_Event_Form_Registration_AdditionalParticipant .crm-button {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: var(--button-padding);
  border: 0;
  border-radius: var(--button-border-radius);
  font: var(--button-font);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow);
  text-shadow: none;
  transition: background-color var(--transition-speed),
  box-shadow var(--transition-speed),
  transform var(--transition-speed-fast);
}

/* Primary button (default). */
.CRM_Contribute_Form_Contribution_Main input[type="submit"],
.CRM_Contribute_Form_Contribution_Main .crm-form-submit,
.CRM_Contribute_Form_Contribution_Main .crm-button,
.CRM_Contribute_Form_Contribution_Main div[class^="cam-dd-confirm-"] a.button,
.CRM_Contribute_Form_Contribution_Confirm input[type="submit"],
.CRM_Contribute_Form_Contribution_Confirm .crm-form-submit,
.CRM_Contribute_Form_Contribution_Confirm .crm-button,
.CRM_Event_Form_Registration_Register input[type="submit"],
.CRM_Event_Form_Registration_Register .crm-form-submit,
.CRM_Event_Form_Registration_Register .crm-button,
.CRM_Event_Form_Registration_AdditionalParticipant input[type="submit"],
.CRM_Event_Form_Registration_AdditionalParticipant .crm-form-submit,
.CRM_Event_Form_Registration_AdditionalParticipant .crm-button {
  background-color: var(--cam-blue);
  color: var(--cam-slate-4);
}

.CRM_Contribute_Form_Contribution_Main input[type="submit"]:hover,
.CRM_Contribute_Form_Contribution_Main .crm-form-submit:hover,
.CRM_Contribute_Form_Contribution_Main .crm-button:hover,
.CRM_Contribute_Form_Contribution_Main div[class^="cam-dd-confirm-"] a.button:hover,
.CRM_Contribute_Form_Contribution_Confirm input[type="submit"]:hover,
.CRM_Contribute_Form_Contribution_Confirm .crm-form-submit:hover,
.CRM_Contribute_Form_Contribution_Confirm .crm-button:hover,
.CRM_Event_Form_Registration_Register input[type="submit"]:hover,
.CRM_Event_Form_Registration_Register .crm-form-submit:hover,
.CRM_Event_Form_Registration_Register .crm-button:hover,
.CRM_Event_Form_Registration_AdditionalParticipant input[type="submit"]:hover,
.CRM_Event_Form_Registration_AdditionalParticipant .crm-form-submit:hover,
.CRM_Event_Form_Registration_AdditionalParticipant .crm-button:hover {
  background-color: var(--cam-light-blue);
  box-shadow: var(--shadow-hover);
}

.CRM_Contribute_Form_Contribution_Main input[type="submit"]:active,
.CRM_Contribute_Form_Contribution_Main .crm-form-submit:active,
.CRM_Contribute_Form_Contribution_Main .crm-button:active,
.CRM_Contribute_Form_Contribution_Main div[class^="cam-dd-confirm-"] a.button:active,
.CRM_Event_Form_Registration_Register input[type="submit"]:active,
.CRM_Event_Form_Registration_Register .crm-form-submit:active,
.CRM_Event_Form_Registration_Register .crm-button:active,
.CRM_Event_Form_Registration_AdditionalParticipant input[type="submit"]:active,
.CRM_Event_Form_Registration_AdditionalParticipant .crm-form-submit:active,
.CRM_Event_Form_Registration_AdditionalParticipant .crm-button:active {
  transform: translateY(1px);
}

.CRM_Contribute_Form_Contribution_Main input[type="submit"]:focus,
.CRM_Contribute_Form_Contribution_Main .crm-form-submit:focus,
.CRM_Contribute_Form_Contribution_Main .crm-button:focus,
.CRM_Contribute_Form_Contribution_Main div[class^="cam-dd-confirm-"] a.button:focus,
.CRM_Event_Form_Registration_Register input[type="submit"]:focus,
.CRM_Event_Form_Registration_Register .crm-form-submit:focus,
.CRM_Event_Form_Registration_Register .crm-button:focus,
.CRM_Event_Form_Registration_AdditionalParticipant input[type="submit"]:focus,
.CRM_Event_Form_Registration_AdditionalParticipant .crm-form-submit:focus,
.CRM_Event_Form_Registration_AdditionalParticipant .crm-button:focus {
  outline: 1px dashed var(--black);
  outline-offset: 2px;
  background: var(--cam-light-blue);
}

/* Secondary button (back/previous). */
.CRM_Contribute_Form_Contribution_Main input[name*="_back"],
.CRM_Contribute_Form_Contribution_Main .crm-button[name*="_back"],
.CRM_Contribute_Form_Contribution_Confirm input[name*="_back"],
.CRM_Contribute_Form_Contribution_Confirm .crm-button[name*="_back"],
.CRM_Event_Form_Registration_Register input[name*="_back"],
.CRM_Event_Form_Registration_Register .crm-button[name*="_back"],
.CRM_Event_Form_Registration_AdditionalParticipant input[name*="_back"],
.CRM_Event_Form_Registration_AdditionalParticipant .crm-button[name*="_back"] {
  background-color: var(--cam-slate-2);
  color: var(--cam-slate-4);
}

.CRM_Contribute_Form_Contribution_Main input[name*="_back"]:hover,
.CRM_Contribute_Form_Contribution_Main .crm-button[name*="_back"]:hover,
.CRM_Event_Form_Registration_Register input[name*="_back"]:hover,
.CRM_Contribute_Form_Contribution_Confirm .crm-button[name*="_back"]:hover,
.CRM_Event_Form_Registration_Register .crm-button[name*="_back"]:hover,
.CRM_Event_Form_Registration_AdditionalParticipant input[name*="_back"]:hover,
.CRM_Event_Form_Registration_AdditionalParticipant .crm-button[name*="_back"]:hover {
  background-color: var(--cam-slate-1);
}

/* Cancel/neutral button. */
.CRM_Contribute_Form_Contribution_Main input[value="Cancel"],
.CRM_Contribute_Form_Contribution_Main .crm-button.cancel,
.CRM_Event_Form_Registration_Register input[value="Cancel"],
.CRM_Event_Form_Registration_Register .crm-button.cancel,
.CRM_Event_Form_Registration_AdditionalParticipant input[value="Cancel"],
.CRM_Event_Form_Registration_AdditionalParticipant .crm-button.cancel {
  background-color: var(--cam-slate-2);
  color: var(--cam-slate-4);
}

.CRM_Contribute_Form_Contribution_Main input[value="Cancel"]:hover,
.CRM_Contribute_Form_Contribution_Main .crm-button.cancel:hover,
.CRM_Event_Form_Registration_Register input[value="Cancel"]:hover,
.CRM_Event_Form_Registration_Register .crm-button.cancel:hover,
.CRM_Event_Form_Registration_AdditionalParticipant input[value="Cancel"]:hover,
.CRM_Event_Form_Registration_AdditionalParticipant .crm-button.cancel:hover {
  background-color: var(--cam-slate-1);
}

#crm-container.crm-public .CRM_Contribute_Form_Contribution_Confirm #crm-submit-buttons {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

#crm-container.crm-public .CRM_Contribute_Form_Contribution_Confirm fieldset {
  border-bottom: none;
  margin-bottom: 0;
}

#crm-container.crm-public .CRM_Contribute_Form_Contribution_Confirm fieldset .crm-section label {
  font-family: var(--font-heading);
}

/* ===========================================================
  Frozen fields.
 ============================================================ */
#crm-container.crm-public fieldset .crm-section .crm-frozen-field {
  min-width: 300px;
  max-width: 720px;
  width: 100%;
  display: block;
  padding: 1rem;
  background-color: var(--cam-slate-1);
}

#crm-container.crm-public form:not(.CRM_Contribute_Form_Contribution_Confirm) fieldset .crm-section .crm-frozen-field {
  border-radius: var(--input-border-radius);
  padding: 0.5rem 1rem;
}

/* ==========================================================================
   Fieldsets
 ============================================================================ */

#crm-container.crm-public fieldset {
  border-radius: 0;
  border: none;
  border-bottom: 2px solid var(--cam-slate-1);
  margin: 0 0 1rem;
}

#crm-container.crm-public fieldset legend,
.america #crm-container.crm-public .crm-section.form-item h2 {
  font: var(--h3);
  color: var(--cam-slate-4);
  padding: 0 0.5rem;
  margin-left: -0.5rem;
}

.america #crm-container.crm-public .crm-section.form-item h2 {
  padding: 0;
  /** CiviCRM adds inline margin therefore we must !important */
  margin-top: 0 !important;
  margin-left: 0 !important;
}

.america #crm-container.crm-public fieldset legend {
  display: none;
}

/* Event form fieldset - Keep inline with rest of form. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register fieldset#priceset,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant fieldset#priceset {
  max-width: var(--field-max-width);
}

/* ==========================================================================
   Price Sets - Base Styles
   ========================================================================== */

/* Base price set section styling shared by all form types. */
#crm-container.crm-public .crm-section.price_set-section {
  max-width: 100%;
  margin-bottom: 1.5rem;
}

/* Price field label styling. */
#crm-container.crm-public .price_set-section > .label,
#crm-container.crm-public .price_set-section > .label label {
  font: var(--h3);
  color: var(--cam-slate-4);
  margin-bottom: 0.75rem;
}

/* Price field amount styling. */
#crm-container.crm-public .crm-price-amount-label {
  font-weight: var(--weight-normal);
}

#crm-container.crm-public .crm-price-amount-amount {
  font-weight: var(--weight-heavy);
  color: var(--cam-slate-4);
}

/* Total amount display. */
#crm-container.crm-public .section-pricesetTotal .label {
  font: var(--input-label);
  color: var(--cam-slate-3);
}

#crm-container.crm-public .section-pricesetTotal .content {
  font-size: var(--font-header-medium);
  font-weight: var(--weight-normal);
  color: var(--cam-slate-4);
  padding-top: 0;
  line-height: 1;
}

/* ==========================================================================
   Price Sets - Contribution Forms
   Clean pill-style selector with accessible touch targets.
   ========================================================================== */

/* Contribution form priceset container. */
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main #priceset-div {
  margin-bottom: 2rem;
}

/* Contribution form help text box - subtle info styling. */
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main #priceset > .messages.help,
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price_set-section .content > .description:first-child {
  display: block;
  width: 100%;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  background-color: var(--cam-light-blue);
  border: 1px solid var(--cam-blue);
  border-radius: 0;
  color: var(--cam-slate-4);
  font-size: var(--font-body-medium);
  line-height: var(--line-height);
}

/* Contribution form price set section. */
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .crm-section.price_set-section {
  display: block;
  padding: 0;
  background-color: transparent;
  border: none;
  margin-bottom: 1.5rem;
}

/* Contribution form label. */
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price_set-section > .label {
  margin-bottom: 0.75rem;
}

#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price_set-section > .label label {
  font: var(--input-label);
  color: var(--cam-slate-4);
}

/* Contribution form content - horizontal pill layout. */
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price_set-section > .content {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  max-width: none;
}

/* Contribution form pill-style radio options. */
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 1rem;
  padding: 0.75rem 1.25rem;
  min-width: 4.5rem;
  min-height: 3rem;
  background-color: var(--white);
  border: 2px solid var(--cam-slate-2);
  cursor: pointer;
  position: relative;
  transition: background-color var(--transition-speed-fast),
  border-color var(--transition-speed-fast),
  transform var(--transition-speed-fast);
}

/* Contribution form pill hover state. */
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-row:hover {
  background-color: var(--cam-slate-1);
  border-color: var(--cam-slate-3);
  z-index: 1;
}

/* Contribution form pill focus state. */
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-row:focus-within {
  outline: 1px dashed var(--black);
  outline-offset: 2px;
  z-index: 3;
}

/* Contribution form selected pill. */
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-row:has(input[type="radio"]:checked) {
  background-color: var(--cam-blue);
  border-color: var(--cam-warm-blue);
  z-index: 2;
}

#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-row:has(input[type="radio"]:checked):hover {
  background-color: var(--cam-light-blue);
  border-color: var(--cam-blue);
}

/* Hide radio button visual in contribution form pills. */
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-row input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  top: 0;
  left: 0;
}

/* Contribution form pill label. */
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-row label {
  font-weight: var(--weight-heavy);
  font-size: var(--font-body-medium);
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  color: var(--cam-slate-4);
  pointer-events: none;
}

/* Contribution form pill highlight container - override CiviCRM default. */
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-row .highlight,
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-row .crm-option-label-pair.highlight {
  margin: 0;
  padding: 0;
  background-color: transparent;
}

/* Price set option content span. */
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-option-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contribution form other amount section. */
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .Other_amount_please_enter_in_wh-section,
#crm-container.crm-public .other_amount-section {
  width: 100%;
  margin-top: 0;
  margin-bottom: 1rem;
}

#crm-container.crm-public .other_amount-section .other_amount-content {
  flex-direction: column;
  max-width: var(--field-max-width);
}

/* Show other amount field when Other option is selected. */
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main #priceset:has(.price-set-row input[data-amount="0"]:checked) > .Other_amount_please_enter_in_wh-section {
  display: block;
}

#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .Other_amount_please_enter_in_wh-content.content {
  flex-direction: column;
}

#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .Other_amount_please_enter_in_wh-content.content label.crm-inline-error {
  max-width: fit-content;
}

#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .Other_amount_please_enter_in_wh-content input[type="text"] {
  position: relative;
  opacity: 1;
  padding: 0.5rem 1rem;
  border-radius: var(--input-border-radius);
  font-size: 1.25rem;
  font-weight: var(--weight-heavy);
}

#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .Other_amount_please_enter_in_wh-content input[type="text"]:focus {
  border-bottom: 2px solid var(--cam-blue);
}

#crm-container.crm-public .Other_amount_please_enter_in_wh-section .pound-symbol {
  margin-left: 0.5rem;
}

/* Contribution form total amount. */
#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .section-pricesetTotal > .label {
  padding-top: 0;
}

#crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .section-pricesetTotal > .content.calc-value {
  font-size: var(--font-header-medium);
  color: var(--cam-slate-4);
}

/* Contribution form confirmation screen */
#crm-container.crm-public form {
  max-width: 720px;
}

/* ============================================
  Contribution confirmation page.
 ============================================= */

.crm-container .CRM_Contribute_Form_Contribution_Confirm .help p {
  font-size: 1rem;
}

.crm-container .CRM_Contribute_Form_Contribution_Confirm .crm-group {
  margin-bottom: 2rem;
}

.crm-container .CRM_Contribute_Form_Contribution_Confirm .header-dark {
  margin-top: 0;
  padding-left: 1rem;
  font-size: 1rem;
  background-color: var(--cam-slate-1);
  color: var(--cam-slate-4);
}

#crm-container.crm-container .CRM_Contribute_Form_Contribution_Confirm .columnheader th {
  color: var(--cam-slate-4);
}

#crm-container.crm-container .CRM_Contribute_Form_Contribution_Confirm .amount_display-section,
#crm-container.crm-container .CRM_Contribute_Form_Contribution_Confirm .amount_display-section .content {
  max-width: 100%;
}

.crm-container .CRM_Contribute_Form_Contribution_Confirm .total_amount-section .crm-grid-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.crm-container .CRM_Contribute_Form_Contribution_Confirm .total_amount-section .text-right {
  font-size: 1.5rem;
}

.crm-container .CRM_Contribute_Form_Contribution_Confirm .total_amount-section .text-right:not(#totalAmount) {
  font-family: var(--font-heading);
  font-size: 1rem;
}

.crm-container .CRM_Contribute_Form_Contribution_Confirm .crm-grid-table,
.crm-container .CRM_Contribute_Form_Contribution_Confirm .crm-grid-cell {
  border: none;
}

.crm-container .CRM_Contribute_Form_Contribution_Confirm fieldset.crm-profile-view {
  width: 100%;
}

/* ==========================================================================
   Price Sets - Event Registration Forms
   Card-based layout with visible radio buttons in a responsive grid.
   ========================================================================== */

/* Event form priceset fieldset. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register legend,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant legend {
  display: none;
}

/* Event form price set section. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register .crm-section.price_set-section,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .crm-section.price_set-section {
  padding: 0;
  background-color: transparent;
  border: none;
  margin-bottom: 1.5rem;
}

/* Event form price set label. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register .price_set-section > .label,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price_set-section > .label {
  margin-bottom: 0.75rem;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Register .price_set-section > .label label,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price_set-section > .label label {
  font: var(--input-label);
  color: var(--cam-slate-4);
}

/* Event form price set content - single column grid on mobile. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register .price_set-section > .content,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price_set-section > .content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Event form individual price option card. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row {
  display: flex;
  align-items: center;
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  background-color: var(--white);
  border: 2px solid var(--cam-slate-2);
  border-radius: var(--button-border-radius);
  cursor: pointer;
  position: relative;
  transition: background-color var(--transition-speed-fast),
  border-color var(--transition-speed-fast),
  box-shadow var(--transition-speed-fast);
}

/* Event form card hover state. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row:hover,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row:hover {
  border-color: var(--cam-slate-3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Event form card focus state. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row:focus-within,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row:focus-within {
  outline: 1px dashed var(--black);
  outline-offset: 2px;
  z-index: 1;
}

/* Event form selected card. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row:has(input[type="radio"]:checked),
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row:has(input[type="radio"]:checked) {
  background-color: var(--cam-light-blue);
  border-color: var(--cam-blue);
}

#crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row:has(input[type="radio"]:checked):hover,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row:has(input[type="radio"]:checked):hover {
  background-color: var(--cam-light-blue);
  border-color: var(--cam-blue);
}

/* Event form checkbox cards. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row:has(input[type="checkbox"]:checked),
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row:has(input[type="checkbox"]:checked) {
  background-color: var(--cam-light-blue);
  border-color: var(--cam-blue);
}

/* Event form radio button styling within cards. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row input[type="radio"],
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row input[type="radio"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  margin: 0 1rem 0 0;
  border-width: 2px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row input[type="radio"]:checked::after,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row input[type="radio"]:checked::after {
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
}

/* Event form checkbox styling within cards. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row input[type="checkbox"],
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  margin: 0 1rem 0 0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row input[type="checkbox"]:checked::after,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row input[type="checkbox"]:checked::after {
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
}

/* Event form card label. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row label,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row label {
  font-weight: var(--weight-normal);
  font-size: var(--font-body-medium);
  color: var(--cam-slate-4);
  margin: 0;
  cursor: pointer;
  flex: 1;
  line-height: 1.4;
}

/* Extend label click target to cover entire price-set-row card. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row label::after,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row label::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Event form price amount within label. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row .crm-price-amount-amount,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row .crm-price-amount-amount {
  font-weight: var(--weight-heavy);
}

/* Event form card highlight container - override CiviCRM default. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row .highlight,
#crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row .crm-option-label-pair,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row .highlight,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row .crm-option-label-pair {
  margin: 0;
  padding: 0;
  background-color: transparent;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Event form other amount input within card. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row input[type="text"],
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row input[type="text"] {
  width: 6rem;
  height: 2.5rem;
  padding: 0.5rem;
  margin-left: 0.5rem;
  border: 2px solid var(--cam-slate-2);
  border-radius: var(--input-border-radius);
  font-size: var(--font-body-medium);
  font-weight: var(--weight-heavy);
  position: relative;
  z-index: 1;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row input[type="text"]:focus,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row input[type="text"]:focus {
  border-color: var(--cam-blue);
}

/* Event form help text within priceset. */
#crm-container.crm-public .CRM_Event_Form_Registration_Register .price_set-section .description.help,
#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price_set-section .description.help {
  margin-bottom: 1rem;
  padding: 1rem 1.5rem;
  background-color: var(--white);
  border-left: 3px solid var(--dark-amber);
  color: var(--cam-slate-3);
  font-size: var(--font-body-small);
  line-height: var(--line-height);
  font-size: 1rem;
}

/* ==========================================================================
   Description & Help Text
   ========================================================================== */

#crm-container.crm-public .description,
#crm-container.crm-public .crm-section .description,
#crm-container.crm-public .crm-section .content .description {
  color: var(--cam-slate-3);
  font-size: var(--font-body-small);
  margin-top: 0.25rem;
  line-height: 1.5;
  margin-top: 0;
  padding-top: 0;
}

.crm-container.crm-public a,
.crm-container.crm-public a:link,
#crm-container.crm-public .description a {
  color: var(--hyperlink-blue);
  text-decoration: underline;
}

.crm-container.crm-public a:hover,
.crm-container.crm-public a:link:hover,
#crm-container.crm-public .description a:hover {
  text-decoration: none;
}

.crm-container.crm-public .description li,
.crm-container.crm-public .description a,
.crm-container.crm-public .description p {
  font-size: var(--font-body-medium);
}

.crm-container.crm-public .description p {
  margin-bottom: 0.5rem;
}

.crm-container.crm-public .CRM_Contribute_Form_Contribution_Main p,
.crm-container.crm-public .CRM_Event_Form_Registration_Register p,
.crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant p {
  max-width: 720px;
  margin-bottom: 0.5rem;
}

.crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .messages p,
.crm-container.crm-public .CRM_Event_Form_Registration_Register .messages p,
.crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .messages p {
  margin-bottom: 0;
}

/* Help rows (before/after fields). */
#crm-container.crm-public .helprow-pre .content,
#crm-container.crm-public .helprow-post .content {
  margin-left: 0;
}

/* Section dividing hr tags added through the UI. */
#crm-container.crm-public .crm-profile.crm-profile-name-Name_Address_and_Gift_Aid_Information_272 hr,
#crm-container.crm-public .helprow-post .description hr {
  margin: 2rem auto;
  border: 1px solid var(--cam-slate-1);
}

/* Field description (repositioned help text via JS). */
#crm-container.crm-public .field-description {
  color: var(--cam-slate-3);
  font-size: var(--font-body-small);
  line-height: 1.5;
}

#crm-container.crm-public .field-description a {
  color: var(--hyperlink-blue);
}

#crm-container.crm-public .field-description a:hover {
  text-decoration: none;
}

#crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .help {
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
  margin-bottom: 0;
  background-color: var(--cam-light-blue);
  border: 1px solid var(--cam-blue);
  border-radius: 0;
  color: var(--cam-slate-4);
  font-size: var(--font-body-medium);
}

/* ==========================================================================
   Error States
   ========================================================================== */

#crm-container.crm-public input.crm-error,
#crm-container.crm-public select.crm-error,
#crm-container.crm-public textarea.crm-error,
#crm-container.crm-public .crm-error {
  border-color: var(--cam-red);
}

#crm-container.crm-public input.crm-error:focus,
#crm-container.crm-public select.crm-error:focus,
#crm-container.crm-public textarea.crm-error:focus {
  border-bottom-color: var(--cam-red);
}

#crm-container.crm-public .crm-error,
#crm-container.crm-public .crm-error-message,
#crm-container.crm-public label.crm-inline-error {
  color: var(--cam-red);
  padding: 0.2rem 1rem;
  position: relative;
  top: 0.3rem;
  display: inline-block;
}

#crm-container.crm-public .crm-error.crm-error-label {
  top: 0;
}

#crm-container.crm-public fieldset.crm-error {
  border-color: var(--cam-red);
  border-width: 2px;
}

/* ==========================================================================
   Messages
   ========================================================================== */

#crm-container.crm-public .messages,
#crm-container.crm-public .help {
  padding: 1rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  border-radius: var(--input-border-radius);
  line-height: 1.5;
}

#crm-container.crm-public .messages.status,
#crm-container.crm-public .help,
#crm-container.crm-public .crm-not-you-message {
  background-color: var(--light-amber);
  border: 1px solid var(--dark-amber);
  color: var(--cam-slate-4);
  margin-top: 0;
  font-size: 1rem;
}

#crm-container.crm-public .messages.error {
  background-color: var(--light-red);
  border: 1px solid var(--cam-red);
  color: var(--dark-red);
}

#crm-container.crm-public .messages.success {
  background-color: var(--light-green);
  border: 1px solid var(--green);
  color: var(--dark-green);
}

/* Gift Aid thank you notice. */
#crm-container.crm-public .gift-aid-thank-you {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: var(--light-green);
  border: 1px solid var(--green);
  color: var(--dark-green);
  font-size: var(--font-body-small);
  line-height: 1.5;
}

/* ==========================================================================
   Tables (form-layout)
   ========================================================================== */

/* Convert table layout to single-column on mobile. */
#crm-container.crm-public table.form-layout,
#crm-container.crm-public table.form-layout-compressed {
  width: 100%;
  border-collapse: collapse;
}

#crm-container.crm-public table.form-layout tr,
#crm-container.crm-public table.form-layout-compressed tr {
  display: block;
  margin-bottom: 1.25rem;
}

#crm-container.crm-public table.form-layout td,
#crm-container.crm-public table.form-layout-compressed td {
  display: block;
  padding: 0;
  text-align: left;
}

#crm-container.crm-public table.form-layout td.label,
#crm-container.crm-public table.form-layout-compressed td.label {
  width: auto;
  padding-bottom: 0.5rem;
  font: var(--input-label);
}

/* Preserve table layout for fee display tables. */
#crm-container.crm-public table.fee_block-table {
  display: table;
}

#crm-container.crm-public table.fee_block-table tr {
  display: table-row;
  margin-bottom: 0;
}

#crm-container.crm-public table.fee_block-table td {
  display: table-cell;
  padding: 0.25rem 0.5rem;
}

/* ==========================================================================
   Specific Sections
   ========================================================================== */

/* Additional participants. */
#crm-container.crm-public .additional_participants-section .label,
#crm-container.crm-public .additional_participants-section .content {
  float: none;
  width: auto;
  text-align: left;
  margin-left: 0;
}

#crm-container.crm-public .additional_participants-section .content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

#crm-container.crm-public .additional_participants-section .content > select {
  width: 4rem;
}

#crm-container.crm-public .additional_participants-section .content .description {
  flex-basis: 100%;
}

/* Name/title. */
#crm-container.crm-public .editrow_prefix_id-section .content {
  width: 15rem;
}

/* Event date/time. */
#crm-container.crm-public .event_date_time-section .label {
  float: none;
  width: auto;
  text-align: left;
  font: var(--input-label);
  margin-bottom: 0.25rem;
}

#crm-container.crm-public .event_date_time-section .content {
  margin-left: 0;
}

/* Event fees. */
#crm-container.crm-public .event_fees-section .label {
  float: none;
  width: auto;
  text-align: left;
  font: var(--input-label);
  margin-bottom: 0.5rem;
}

#crm-container.crm-public .event_fees-section .content {
  margin-left: 0;
}

/* Billing sections. */
#crm-container.crm-public .credit_card-section,
#crm-container.crm-public .billing_name_address-section {
  margin-bottom: 1.5rem;
}

#crm-container.crm-public .credit_card-section .label,
#crm-container.crm-public .billing_name_address-section .label {
  float: none;
  width: auto;
  text-align: left;
  font: var(--input-label);
  margin-bottom: 0.5rem;
}

#crm-container.crm-public .credit_card-section .content,
#crm-container.crm-public .billing_name_address-section .content {
  margin-left: 0;
}

/* Dedication field. */
.america #crm-container.crm-public .form-item.editrow_custom_1682-section {
  display: none;
}

/* Is recur section */
.america #crm-container.crm-public .crm-public-form-item.crm-section.is_recur-section {
  margin-bottom: 2rem;
}

.america #crm-container.crm-public .crm-public-form-item.crm-section.is_recur-section .label {
  display: none;
}

/* ==========================================================================
   Miscellaneous
   ========================================================================== */

/* Currency. */
#crm-container.crm-public .currency {
  font-weight: var(--weight-heavy);
}

/* ==========================================================================
   Event Registration Confirm Page
   Review page with clear section groupings and summary display.
   ========================================================================== */

/* Confirm page main container. */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm {
  max-width: var(--max-width);
}

/* Confirm page intro status message. */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .continue_message-section {
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  background-color: var(--cam-light-blue);
  border: 1px solid var(--cam-blue);
  border-left: 4px solid var(--cam-warm-blue);
  border-radius: 0;
  color: var(--cam-slate-4);
  font-size: var(--font-body-medium);
  line-height: var(--line-height);
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .continue_message-section p {
  margin: 0;
}

/* Pay later instructions. */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .pay-later-receipt-instructions {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  background-color: var(--light-amber);
  border: 1px solid var(--dark-amber);
  border-left: 4px solid var(--dark-amber);
  color: var(--cam-slate-4);
  font-size: var(--font-body-medium);
  line-height: var(--line-height);
}

/* Confirm page intro text. */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .event_confirm_text-section,
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .event_confirm_footer-section {
  margin-bottom: 2rem;
  color: var(--cam-slate-4);
  font-size: var(--font-body-medium);
  line-height: var(--line-height);
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .event_confirm_text-section p,
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .event_confirm_footer-section p {
  margin: 0 0 1rem;
}

/* Section groups - card-like containers. */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .crm-group {
  margin-bottom: 2rem;
  background-color: var(--white);
  overflow: hidden;
}

/* Section headers - dark header style. */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .header-dark {
  padding: 1rem 1.5rem;
  background-color: var(--cam-warm-blue);
  color: var(--cam-slate-4);
  font: var(--h3);
  font-size: var(--font-header-xsmall);
  margin: 0;
  border: none;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .participant_info-group .crm-public-form-item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Content display blocks within groups. */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .display-block {
  padding: 1.25rem;
}

/* Total amount section */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .total_amount-section {
  padding: 1rem 1.25rem;
  font-size: var(--font-header-xsmall);
  font-weight: var(--weight-heavy);
  color: var(--cam-slate-4);
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .total_amount-section,
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .total_amount-section .crm-grid-row,
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .total_amount-section .crm-grid-cell {
  border: 0;
}

/* Line item tables. */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: var(--font-body-medium);
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm table .columnheader th {
  padding: 0.75rem 1rem;
  background-color: var(--cam-slate-1);
  color: var(--cam-slate-4);
  font-weight: var(--weight-heavy);
  font-size: var(--font-body-small);
  border-bottom: 2px solid var(--cam-slate-2);
  text-align: left;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm table .columnheader th.right,
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm table .columnheader th.text-right {
  text-align: right;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm table td {
  padding: 1rem;
  border-bottom: 1px solid var(--cam-slate-1);
  color: var(--cam-slate-4);
  vertical-align: top;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm table td.right,
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm table td.text-right {
  text-align: right;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm table tr:last-child td {
  border-bottom: none;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm table tr.cancelled td {
  opacity: 0.5;
  text-decoration: line-through;
}

/* Line item description. */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm table td .description {
  margin-top: 0.25rem;
  font-size: var(--font-body-small);
  color: var(--cam-slate-3);
}

/* Participant header in multi-participant registrations. */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .display-block > strong {
  display: block;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--cam-slate-1);
  font-weight: var(--weight-heavy);
  color: var(--cam-slate-4);
}

/* Profile display sections. */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .crm-profile-view {
  margin-bottom: 2rem;
  background-color: var(--white);
  border: 1px solid var(--cam-slate-1);
  overflow: hidden;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .crm-profile-view .header-dark {
  margin: 0;
}

/* Profile view labels and content. */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .crm-profile-view .crm-section {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--cam-slate-1);
  max-width: none;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .crm-profile-view .crm-section:last-child {
  border-bottom: none;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .crm-profile-view .label {
  font-weight: var(--weight-heavy);
  font-size: var(--font-body-small);
  color: var(--cam-slate-3);
  margin-bottom: 0.25rem;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .crm-profile-view .content {
  color: var(--cam-slate-4);
  max-width: none;
}

/* Billing name and address. */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .billing_name_address-group .billing_name-section,
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .billing_name_address-group .billing_address-section {
  padding: 0.75rem 1.25rem;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .billing_name_address-group .billing_name-section .content {
  font-weight: var(--weight-heavy);
}

/* Credit card info. */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .credit_card-group .credit_card_details-section {
  padding: 1rem 1.25rem;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .credit_card-group .content {
  padding: 0.25rem 0;
}

/* Event info section within confirm. */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .event_info-group .display-block {
  padding: 0;
}

/* Event info block styling. */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .event-info {
  padding: 1.25rem;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .event-info .event-title {
  font: var(--h3);
  color: var(--cam-slate-4);
  margin-bottom: 1rem;
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .event-info .event-date,
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .event-info .event-location {
  margin-bottom: 0.5rem;
  color: var(--cam-slate-3);
}

#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .event-info .event-date strong,
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .event-info .event-location strong {
  color: var(--cam-slate-4);
}

/* Submit buttons container. */
.CRM_Event_Form_Registration_Confirm #crm-submit-buttons {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 2rem;
}

/* Button base styling. */
.CRM_Event_Form_Registration_Confirm input[type="submit"],
.CRM_Event_Form_Registration_Confirm button.crm-button,
.CRM_Event_Form_Registration_Confirm .crm-form-submit,
.CRM_Event_Form_Registration_Confirm .crm-button {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: var(--button-padding);
  border: 0;
  border-radius: var(--button-border-radius);
  font: var(--button-font);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow);
  text-shadow: none;
  transition: background-color var(--transition-speed),
  box-shadow var(--transition-speed),
  transform var(--transition-speed-fast);
  background-color: var(--cam-blue);
  color: var(--cam-slate-4);
}

.CRM_Event_Form_Registration_Confirm input[type="submit"]:hover,
.CRM_Event_Form_Registration_Confirm .crm-form-submit:hover,
.CRM_Event_Form_Registration_Confirm .crm-button:hover {
  background-color: var(--cam-light-blue);
  box-shadow: var(--shadow-hover);
}

.CRM_Event_Form_Registration_Confirm input[type="submit"]:active,
.CRM_Event_Form_Registration_Confirm .crm-form-submit:active,
.CRM_Event_Form_Registration_Confirm .crm-button:active {
  transform: translateY(1px);
}

.CRM_Event_Form_Registration_Confirm input[type="submit"]:focus,
.CRM_Event_Form_Registration_Confirm .crm-form-submit:focus,
.CRM_Event_Form_Registration_Confirm .crm-button:focus {
  outline: 1px dashed var(--black);
  outline-offset: 2px;
  background: var(--cam-light-blue);
}

/* Back button styling. */
.CRM_Event_Form_Registration_Confirm input[name*="_back"],
.CRM_Event_Form_Registration_Confirm .crm-button[name*="_back"] {
  background-color: var(--cam-slate-2);
  color: var(--cam-slate-4);
}

.CRM_Event_Form_Registration_Confirm input[name*="_back"]:hover,
.CRM_Event_Form_Registration_Confirm .crm-button[name*="_back"]:hover {
  background-color: var(--cam-slate-1);
}

/* America buttons. */
.america .crm-container.crm-public input[type="submit"],
.america .crm-container.crm-public .crm-form-submit,
.america .crm-container.crm-public .crm-button,
.america .crm-container.crm-public div[class^="cam-dd-confirm-"] a.button {
  background-color: var(--am-bold);
  color: var(--cam-slate-1);
}

.america .crm-container.crm-public input[type="submit"]:hover,
.america .crm-container.crm-public .crm-form-submit:hover,
.america .crm-container.crm-public .crm-button:hover,
.america .crm-container.crm-public div[class^="cam-dd-confirm-"] a.button:hover {
  background-color: var(--am-bold);
  box-shadow: var(--shadow-hover);
}

.america .crm-container.crm-public input[name*="_back"],
.america .crm-container.crm-public .crm-button[name*="_back"] {
  background-color: var(--am-light);
  color: var(--cam-slate-4);
}


/* Confirm page paragraph max-width. */
.crm-container.crm-public .CRM_Event_Form_Registration_Confirm p {
  max-width: var(--max-width);
}

/* Hook discount message. */
#crm-container.crm-public .CRM_Event_Form_Registration_Confirm .hookDiscount-section {
  padding: 0.75rem 1.25rem;
  background-color: var(--light-green);
  border-top: 1px solid var(--green);
  color: var(--dark-green);
  font-style: italic;
}

/* ========================================================
Stripe element
======================================================== */

#crm-container.crm-public #card-element {
  margin-left: 0;
}

#crm-container.crm-public .crm-error#card-errors {
  display: none;
  margin-left: 0;
  width: fit-content;
}

/* ==========================================================================
   Responsive - Narrow (740px+)
   ========================================================================== */

@media (min-width: 740px) and (min-device-width: 740px),
(max-device-width: 800px) and (min-width: 740px) and (orientation: landscape) {

  /* Contribution form - larger pills at narrow+ breakpoint. */
  #crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-row {
    padding: 0.75rem 1.5rem;
    min-width: 5.5rem;
  }

  /* Contribution form - larger other amount input. */
  #crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .Other_amount_please_enter_in_wh-content input[type="text"] {
    font-size: 1.5rem;
    max-width: 14rem;
  }

  /* Event form price set content - two column layout on wider screens. */
  #crm-container.crm-public .CRM_Event_Form_Registration_Register .price_set-section > .content,
  #crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price_set-section > .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  /* Event form cards - consistent height in grid. */
  #crm-container.crm-public .CRM_Event_Form_Registration_Register .price-set-row,
  #crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price-set-row {
    padding: 1rem 1.5rem;
  }

  /* Restore table layout at wider screens. */
  #crm-container.crm-public table.form-layout tr,
  #crm-container.crm-public table.form-layout-compressed tr {
    display: table-row;
    margin-bottom: 0;
  }

  #crm-container.crm-public table.form-layout td,
  #crm-container.crm-public table.form-layout-compressed td {
    display: table-cell;
    padding: 0.5rem 0;
    vertical-align: top;
  }

  #crm-container.crm-public table.form-layout td.label,
  #crm-container.crm-public table.form-layout-compressed td.label {
    width: 25%;
    padding-right: 1rem;
    padding-bottom: 0;
  }
  /* ==========================================================================
   Contribution form.
   ========================================================================== */
  /* Allow price set content to be wider. */
  #crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price_set-section .content {
    display: flex;
    flex-direction: row;
  }

  /* First pill gets left border radius. */
  #crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-row:first-of-type {
    border-radius: var(--button-border-radius) 0 0 var(--button-border-radius);
  }

  /* Last pill gets right border radius. */
  #crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-row:last-of-type {
    border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
  }

  /* Single pill (only of type) gets full border radius. */
  #crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-row:only-of-type {
    border-radius: var(--button-border-radius);
  }

  /* Collapse adjacent borders. */
  #crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-row + .price-set-row {
    margin-left: -2px;
  }

  /* ==========================================================================
     Confirm page - Narrow breakpoint.
     ========================================================================== */
  /* Profile view - horizontal layout for label/content pairs. */
  #crm-container.crm-public .CRM_Event_Form_Registration_Confirm .crm-profile-view .crm-section {
    flex-direction: row;
    align-items: baseline;
  }

  #crm-container.crm-public .CRM_Event_Form_Registration_Confirm .crm-profile-view .label {
    width: 35%;
    flex-shrink: 0;
    margin-bottom: 0;
    padding-right: 1rem;
  }

  #crm-container.crm-public .CRM_Event_Form_Registration_Confirm .crm-profile-view .content {
    flex: 1;
  }

  /* Line item table - more breathing room. */
  #crm-container.crm-public .CRM_Event_Form_Registration_Confirm table .columnheader th {
    padding: 0.75rem 1.25rem;
  }

  #crm-container.crm-public .CRM_Event_Form_Registration_Confirm table td {
    padding: 1rem 1.25rem;
  }

  /* ==========================================================================
   Price Sets
   ========================================================================== */
  #crm-container.crm-public .price_set-section .content {
    width: 720px;
  }

  #crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-row label {
    text-wrap: auto;
  }

  /* ==========================================================================
  Specific Sections
  =========================================================================== */
  /* Gift frequency toggle */
  #crm-container.crm-public .crm-section.cam-gift-frequency .content,
  #crm-container.crm-public .crm-section.cam-gift-location .content {
    display: flex;
    padding-top: 0;
  }

  /* Sometimes 'Other' is outside of the content container. 'Where are you giving from?' form */
  #crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .cam-gift-location .content:has(+ .price-set-row) .price-set-row:last-of-type {
    border-radius: 0;
  }
  #crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .cam-gift-location {
    display: grid;
    grid-template-areas:
    'item1 . .'
    'item2 item2 item3';
  }
  #crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .cam-gift-location > .label {
    grid-area: item1;
  }
  #crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .cam-gift-location > .content {
    padding-top: 0;
    grid-area: item2;
  }
  #crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .cam-gift-location > .price-set-row {
    grid-area: item3;
    border-left: none;
  }

  /* Is recur section */
  .america #crm-container.crm-public .crm-public-form-item.crm-section.is_recur-section .content {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  .america #crm-container.crm-public .crm-public-form-item.crm-section.is_recur-section .content label {
    min-width: fit-content;
  }
}

/* ==========================================================================
   Responsive - Normal (980px+)
   ========================================================================== */

@media (min-width: 980px) and (min-device-width: 980px),
(max-device-width: 1024px) and (min-width: 1024px) and (orientation: landscape) {

  /* Contribution form - even larger pills at normal+ breakpoint. */
  #crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-row {
    padding: 1rem 2rem;
    min-width: 6rem;
  }

  #crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price-set-row label {
    font-size: 1.125rem;
  }

  /* Event form - three column layout for many options. */
  #crm-container.crm-public .CRM_Event_Form_Registration_Register .price_set-section > .content,
  #crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price_set-section > .content {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
  }

  /* Table label width. */
  #crm-container.crm-public table.form-layout td.label,
  #crm-container.crm-public table.form-layout-compressed td.label {
    width: 20%;
  }

  /* ==========================================================================
     Confirm page - Normal breakpoint.
     ========================================================================== */
  /* Profile view label width adjustment. */
  #crm-container.crm-public .CRM_Event_Form_Registration_Confirm .crm-profile-view .label {
    width: 25%;
  }

  /* Section header styling enhancement. */
  #crm-container.crm-public .CRM_Event_Form_Registration_Confirm .header-dark {
    padding: 1rem 1.5rem;
  }

  /* Content padding adjustment. */
  #crm-container.crm-public .CRM_Event_Form_Registration_Confirm .display-block {
    padding: 1.5rem;
  }

  #crm-container.crm-public .CRM_Event_Form_Registration_Confirm .crm-section.no-label {
    padding: 1rem 1.5rem;
  }

  #crm-container.crm-public .CRM_Event_Form_Registration_Confirm .crm-profile-view .crm-section {
    padding: 1rem 1.5rem;
  }
}

/* ==========================================================================
   Responsive - Wide (1220px+)
   ========================================================================== */

@media (min-width: 1220px) {

  /* Contribution form - max width constraint for readability. */
  #crm-container.crm-public .CRM_Contribute_Form_Contribution_Main .price_set-section > .content {
    max-width: 800px;
  }

  /* Event form - optimal grid layout. */
  #crm-container.crm-public .CRM_Event_Form_Registration_Register .price_set-section > .content,
  #crm-container.crm-public .CRM_Event_Form_Registration_AdditionalParticipant .price_set-section > .content {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

  /* ==========================================================================
     Confirm page - Wide breakpoint.
     ========================================================================== */
  /* Profile view label width for wide screens. */
  #crm-container.crm-public .CRM_Event_Form_Registration_Confirm .crm-profile-view .label {
    width: 20%;
  }
}