/* 10BitWorks file: _main.css */
/*
    Name: Thames;
    Description: Aaaaah;

    I have added 'thames' to lines I changed.
    This means I can track changes to the core variables with diff.
    (One day all this css could be nicely optimised but for now
    during heavy development it's more helpful to track changes than
    worry about duplicate definitions etc.)

*/

:root {
/* COLOUR NAMES */
  --crm-c-blue-overlay2: #edf4f7; /* thames only */
  --crm-c-blue-overlay: #dce9ef; /* thames only */
  --crm-c-blue-light: #d8edfe;
  --crm-c-blue: #c5e4fc;
  --crm-c-blue-dark: #0d5790; /* thames. nb #127aca not AAA on #f8f8f8  */
  --crm-c-blue-darker: #033b67;
  --crm-c-green-dark: #468847;
  --crm-c-red-light: #f2dede;
  --crm-c-red-dark: #740f0f;
  --crm-c-red-bright: #bd0404; /* thames only */
  --crm-c-amber: #eeb153;
  --crm-c-amber-light: #ffebc5;
  --crm-c-yellow: #fcfc5a; /* todo change this horrible yellow! */
  --crm-c-yellow-light: #f2deb9;
/* PRACTICAL COLOURS */
  --crm-text-dark-color: #000000dd;
  --crm-border-color: var(--crm-c-blue-overlay);
  --crm-page-bg-color: #f3f2ed;
  --crm-container-bg-color: #f8f8f8;
  --crm-layer2-bg-color: color-mix(in srgb,var(--crm-layer1-bg-color) 90%,#000 10%);
  --crm-drag-bg-color: var(--crm-c-blue-overlay2); /* background for drag/drop regions, select2 highlight */
  --crm-code-bg-color: var(--crm-c-blue-overlay2); /* background for code regions */
  /* Emphasis colours */
  --crm-primary-color: var(--crm-c-blue-dark); /* primary button bgs */
  --crm-primary-hover-color: var(--crm-c-blue-darker);
  --crm-secondary-color: #c9e1f1; /* buttons */
  --crm-secondary-hover-color: #a1cef3;
  --crm-secondary-text-color: var(--crm-c-blue-darker);
  --crm-secondary-hover-text-color: var(--crm-text-light-color); /* thames todo */
  --crm-secondary-ink-color: var(--crm-c-blue-darker);
  --crm-warning-text-color: var(--crm-text-dark-color);
}
:root {
/* thames only radii */
  --crm-r-5: 0.8rem;
  --crm-r-3: 0.4rem;
  --crm-r-2: 0.25em;
  --crm-r-1: 3px;
/* SHADOWS */
  --crm-shadow-popup: 3px 3px 18px 0 rgba(0, 0, 0,.25);
  --crm-shadow-bottom: unset;
/* SIZES - temporary */
  --crm-l-radius: 0; /* thames - this gets applied in too many places; so setting to 0 and positively re-applying, rather than using this and negatively unapplying. */
/* thames: on standalone the following is overridden in cms.css */
  --crm-page-padding: clamp(0.5rem 2vw 4rem); /* Margin left/right */
/* Type */
  --crm-font: Lato, sans-serif;
  --crm-heading-bg-color: unset;
  --crm-heading-color: var(--crm-text-dark-color);
  --crm-heading-padding: var(--crm-l-small-1) var(--crm-l-medium-1); /* thames unset this? todo */
}
:root {
/* Buttons */
  --crm-btn-padding-block: var(--crm-l-small);
  --crm-btn-padding-inline: var(--crm-l-medium-2);
  --crm-btn-height: 1.825rem;
  --crm-btn-icon-spacing: var(--crm-l-xsmall-2);
  --crm-btn-cancel-bg-color: var(--crm-c-red-light);
  --crm-btn-cancel-text-color: var(--crm-c-red-dark);
  --crm-btn-info-bg-color: var(--crm-secondary-color);
  --crm-btn-info-text-color: var(--crm-secondary-text-color);
  --crm-btn-success-bg-color: var(--crm-info-color);
  --crm-btn-success-text-color: #fff;
  --crm-btn-danger-bg-color: var(--crm-c-red);
  --crm-btn-danger-text-color: var(--crm-c-red-dark);
  --crm-btn-margin: var(--crm-l-medium) 0;
}
:root {
/* Tables */
  --crm-table-outside-border: 1px solid var(--crm-layer2-bg-color);
  --crm-table-bg-color: var(--crm-page-bg-color);
  --crm-table-header-bg-color: var(--crm-page-bg-color);
  --crm-table-row-bg-color: var(--crm-c-gray-025);
  --crm-table-row-hover-color: var(--crm-c-blue-overlay);
}
:root {
/* Panels */
  --crm-panel-head-height: 42px;
}
:root {
/* Accordions */
  --crm-accordion-radius: 4px;
/* .crm-accordion-bold */
  --crm-accordion-header-bg-color: var(--crm-c-blue-overlay);
  --crm-accordion-header-bg-active-color: var(--crm-c-blue-overlay);
  --crm-accordion-header-color: var(--crm-c-blue-darker);
  --crm-accordion-header-padding: 0.6rem 1.6rem 0.6rem 2.8rem;
  --crm-accordion-header-border: unset;
  --crm-accordion-header-border-width: unset;
  --crm-accordion-border: unset;
  --crm-accordion-border-width: unset;
  --crm-accordion-body-bg-color: var(--crm-c-blue-overlay); /* thames - todo check*/
  --crm-accordion-body-padding: 0.25rem 2.8rem;
/* .crm-accordion-light */
  --crm-accordion2-header-bg-color: transparent;
  --crm-accordion2-header-bg-active-color: var(--crm-layer2-bg-color);
  --crm-accordion2-header-padding: .6rem 1.6rem 0.6rem 2.8rem;
  --crm-accordion2-body-bg-color: transparent;
  --crm-accordion2-body-padding: 0.25rem 2.8rem;
}
:root {
/* Alerts */
  --crm-alert-padding: var(--crm-l-reg);
  --crm-alert-border-width: 0;
/* Note 'help' suffix here is for the 'success' boxes. */
  --crm-alert-success-bg-color: var(--crm-c-blue-light);
  --crm-alert-success-border-color: unset;
  --crm-alert-success-text-color: unset;
  --crm-alert-warning-border-color: var(--crm-c-yellow);
  --crm-alert-info-bg-color: var(--crm-c-blue-light);
  --crm-alert-info-border-color: var(--crm-c-blue);
  --crm-alert-info-text-color: var(--crm-c-blue-darker);
  --crm-alert-danger-bg-color: var(--crm-c-red-light);
  --crm-alert-danger-border-color: var(--crm-c-red);
  --crm-alert-danger-text-color: var(--crm-c-red-dark);
}
:root {
/* Form */
  --crm-input-border-color: #0000001a;
  --crm-input-box-shadow: none;
  --crm-input-label-width: 16ch; /* thames todo - where is this used? */
  --crm-input-description: #000000e8; /* darker for legibility */
}
:root {
/* Tabs */
  --crm-tabs-bg-color: var(--crm-c-blue-overlay2);
  --crm-tabs-padding: 0;
  --crm-tabs-border: 4px solid var(--crm-c-blue-overlay2);
  --crm-tab-hover-bg-color: var(--crm-c-blue-overlay);
  --crm-tab-bg-active: var(--crm-paper);
  --crm-tab-hang: 0 0 calc(-1 * var(--crm-l-small)) 0; /* thames todo check */
  --crm-tab-padding: var(--crm-l-medium-2) var(--crm-l-reg-1) var(--crm-l-medium); /* thames todo check */
  --crm-tab-count-bg-color: var(--crm-info-text-color);
  --crm-tab-count-color: var(--crm-info-color);
  --crm-tab-radius: var(--crm-r-3) var(--crm-r-3) 0 0;
  --crm-tab-border: none;
  --crm-tabs-2-border: var(--crm-tabs-border);
}
:root {
/* Contact dashboard/summary */
  --crm-contact-border: 0 solid transparent;
  --crm-contact-radius: var(--crm-r-5);
  --crm-contact-direction: grid;
  --crm-contact-side-tabs-width: 220px;
  --crm-contact-tabs-flow: column;
  --crm-contact-tabs-gap: 0;
  --crm-contact-tabs-bg-color: var(--crm-c-blue-overlay);
  --crm-contact-tabs-padding: unset;
  --crm-contact-tab-bg-color: transparent;
  --crm-contact-tabs-radius: var(--crm-contact-radius) 0 0 var(--crm-contact-radius);
  --crm-contact-tab-hover-bg-color: var(--crm-paper);
  --crm-contact-tab-padding: var(--crm-l-medium-2) var(--crm-l-reg-1);
  --crm-contact-tab-border: var(--crm-contact-border);
  --crm-contact-tab-count-bg-color: var(--crm-primary-color);
  --crm-contact-tab-count-color: var(--crm-text-light-color);
  --crm-contact-tab-hang: 0 0 -1px 0;
  --crm-contact-tab-radius: 0;
  --crm-contact-heading-inset: unset;
  --crm-contact-panel-padding: var(--crm-l-reg-2);
  --crm-contact-panel-radius: 0 var(--crm-contact-radius) var(--crm-contact-radius) 0;
  --crm-contact-edit-border: 1px solid var(--crm-c-blue-dark);
  --crm-contact-block-padding: var(--crm-l-medium-2);
  --crm-contact-block-bg-color: var(--crm-container-bg-color);
  --crm-contact-label-bg-color: var(--crm-container-bg-color);
  --crm-contact-header-bg-color: unset;
  --crm-contact-header2-bg-color: unset;
  --crm-contact-header-color: var(--crm-c-blue-darker);
  --crm-contact-header-padding: unset;
  --crm-contact-image-right: 20px;
}
:root {
/* Dialog */
  --crm-dialog-bg-color: var(--crm-page-bg-color);
  --crm-dialog-padding: 0;
  --crm-dialog-header-bg-color: var(--crm-c-blue-overlay);
  --crm-dialog-header-color: var(--crm-c-blue-darker);
  --crm-dialog-header-border-color: transparent;
}
:root {
/* Dashlet */
  --crm-dashlet-box-shadow: none;
  --crm-dashlet-header-bg-color: var(--crm-paper);
  --crm-dashlet-tabs-bg-color: var(--crm-tabs-bg-color);
  --crm-dashlet-radius: var(--crm-r-3);
}
:root {
/* Button dropdowns */
  --crm-dropdown-bg-color: var(--crm-paper);
  --crm-dropdown-color: var(--crm-c-blue-darker);
  --crm-dropdown-hover-text-color: var(--crm-c-blue-dark);
  --crm-dropdown-hover-bg-color: var(--crm-c-blue-light);
  --crm-dropdown-width: 23ch;
}
:root {
/* Notifications */
  --crm-notify-bg-color: var(--crm-paper);
  --crm-notify-color: var(--crm-text-color);
  --crm-notify-accent-border-width: 0.875rem 0 0 0;
  --crm-notify-radius: 4px;
  --crm-notify-danger-color: var(--crm-danger-color);
  --crm-notify-warning-color: var(--crm-warning-color);
  --crm-notify-success-color: var(--crm-success-color);
  --crm-notify-info-color: var(--crm-info-color);
}
:root {
/* Icons */
  --crm-icon-danger: "\f06a";
  --crm-icon-danger-color: inherit;
  --crm-icon-success-color: inherit;
  --crm-icon-warning-color: inherit;
  --crm-icon-info-color: inherit;
}
:root {
/* Wizard */
  --crm-wizard-bg-color: var(--crm-page-bg-color);
}
:root {
/* Alpha filter */
  --crm-filter-bg-color: var(--crm-c-blue-overlay);
  --crm-filter-item-bg-color: transparent;
  --crm-filter-item-shadow: none;
}
:root {
/* Frontend */
  --crm-f-form-width: 700px;
  --crm-f-fieldset-bg-color: var(--crm-container-bg-color);
  --crm-f-fieldset-padding: var(--crm-l-reg);
  --crm-f-legend-align: center;
  --crm-f-label-position: unset;
  --crm-f-label-align: left;
  --crm-f-label-width: unset;
  --crm-f-input-width: 100%;
  --crm-f-form-focus-border-color: unset;
  --crm-f-form-focus-bg-color: unset;
  --crm-f-form-focus-outline-color: var(--crm-c-green);
  --crm-f-form-error-border-color: unset;
  --crm-f-form-error-bg-color: unset;
  --crm-f-form-error-outline-color: var(--crm-c-red);
}

/* Only affect body colour in standalone */
html.cms-standalone body {
  background-color: var(--crm-page-bg-color);
}

#crm-container {
  min-height: 100vh;
  background-color: var(--crm-page-bg-color);
}

.crm-container details {
  /* background-color: var(--crm-accordion-body-bg-color); Removed for FormBuilder clashes */
  border: var(--crm-border);
}

.crm-container summary {
  color: var(--crm-c-blue-darker); /* novar */
  cursor: pointer; /* show it's clickable */
  position: relative; /* so our animated triangle doesn't go walkies */
}
.crm-container summary:hover,
.crm-container summary:focus {
  background-color: var(--crm-c-blue-overlay2);
}

/* Replace Riverlea's FontAwesome icon with our own shape. */
/* This rule is really sensitive to specificity. */
/* .crm-container :where(details, .crm-accordion-wrapper)>:is(summary,.crm-accordion-header)::before {  */

.crm-container details>summary::before /* accordion8 (recommended) */,
.crm-container .crm-accordion-header::before, /* accordion1, accordion2, accordion6 */
.crm-container .crm-collapsible .collapsible-title::before /* accordion3 */ {
  --crm-accordion-icon: '';
  border: .4rem solid transparent;
  border-left-color: var(--crm-accordion-icon-color);
  position: absolute;
  margin-left: -1.5rem;
  margin-top: 0.2rem;
  transform: rotate(0);
  transform-origin: .2rem 50%;
  transition: transform .25s ease;
}
/* fight the fixes.css */
.crm-container .civicrm-community-messages .collapsible-title::before {
  transform-origin: .2rem 50% !important;
}
/* advanced search */
.crm-container details.crm-accordion-settings summary::before {
  content: '';
}
/* extensions */
.crm-container #extensions-main table.dataTable summary,
.crm-container #extensions-addnew table.dataTable summary {
  padding: 0 0 0 2rem !important;
}
.crm-container #extensions-main  details {
  border: none;
}

/* we have to sort of re-state these rules because the specificity of the above overrules the 'open' state
 * note that a lot of non-recommended patterns use .collapsed, whereas details uses [open] - reverse logic.
 * This covers accordion1, accordion2, accordion6.
 */
.crm-container .crm-accordion-wrapper.collapsed>.crm-accordion-header::before {
  transform: none;
  transform-origin: .2rem 50%;
}
.crm-container .crm-accordion-wrapper:not(.collapsed)>.crm-accordion-header::before {
  transform: rotate(90deg);
}
/* the following 2 rules are for accordion3 and accordion4(still bit weird) */
.crm-container .crm-collapsible.collapsed>.collapsible-title::before {
  transform: none;
  transform-origin: .2rem 50%;
}
.crm-container .crm-collapsible:not(.collapsed)>.collapsible-title::before {
  transform: rotate(90deg);
}

/* Apply subtle animation */
@keyframes crm-details-show {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
}
  50% {
    transform: translateY(-0.1rem);
}
}
.crm-container :is(details,
.crm-accordion-wrapper)>.crm-accordion-body {
  padding: var(--crm-accordion-body-padding);
  animation: crm-details-show 240ms ease-in-out;
}
/* We don't want a different colour header bg on 'active' (open) but we do on hover
 * This doesn't work yet.*/
.crm-container .crm-accordion-bold>summary:is(:hover,
:focus) {
  background-color: var(--crm-c-blue-overlay2);
}


/* Alternate backgrounds */
/* .crm-container details:not(.crm-accordion-light) details:not(.crm-accordion-light) { */
/*   --crm-accordion-header-bg-color: var(--crm-c-blue-overlay2); */
/* } */


/* ALERTS (these are in-page-flow boxes with info, not the (normally) popup notifications) */

/* help boxes: put stripe down left with icon in it. */
.crm-container #help,
.crm-container .help {
  border: none;
  border-left: 2rem solid #7cb5e1;
  border-radius: 0;
}
.crm-container #help::before,
.crm-container .help::before {
  color: #fff;
  content: "\f0eb";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  margin-left: -2.3rem;
  position: absolute;
  text-rendering: auto;
}

.crm-container .alert-success {
  background-color: var(--crm-c-green);
}
.crm-container :is(.status,
.alert-warning,
.messages.warning) {
  --crm-l-radius: 0.25rem;
}

/* BUTTONS */

/*.crm-container .btn,
.crm-container button,
.crm-container .crm-button,
.crm-container [type="button"],
.crm-container [type="reset"],
.crm-container [type="submit"] {
  Sometimes we have lots of buttons and they wrap to a 2nd line. This puts some vertical space betwixt.
  margin: var(--crm-l-medium) 0;
}

/* Make it clear when you're hovering delete. */
.crm-container .btn.btn-danger:hover,
.crm-container .btn.btn-danger:focus,
.crm-container a.button.delete-button:hover,
.crm-container a.button.delete-button:focus,
.crm-container a.button.delete:hover {
  color: var(--crm-c-red-bright);
}
.crm-icon-picker-button {
  float: none;
}
.crm-container .ui-button:not(.ui-button-icon-only).crm-icon-picker-button {
  display: inline-flex;
}

/* DIALOGS */

/* I feel title, resize, close is a better order for buttons bs modal dialogs */
/* .ui-dialog-title { flex: 1 1 auto; order: 1; } */
/* .crm-dialog-titlebar-resize { order: 2; } */
.crm-container.ui-dialog .ui-dialog-titlebar .ui-button.crm-dialog-titlebar-print {
  display: none;
}

/* .modal-header .close { order: 3; } */
/* .crm-container  .modal-header .ui-icon[class*=" fa-"] { font-size: 1rem; } */
/* I don't know what problem this solved, but it creates an undesired left padding */
/* #bootstrap-theme .modal-header::before, #bootstrap-theme .modal-header::after { */
/*   display: none !important; */
/* } */
/**/
/* #bootstrap-theme .modal-header { */
/*   border:none; */
/* } */
/**/
/* .crm-container button.close { */
/*   color: var(--crm-c-blue-darker) !important; */
/* } */

/* DROPDOWNS */
.crm-container .btn-group .dropdown-menu,
.crm-container .btn.dropdown-toggle+.dropdown-menu {
  border-radius: 4px;
}

/* FORMS */

.crm-container .replace-plain {
  background: #fff;
}


/* NOTIFICATIONS (the popup ones) */
/* This produces a nicer hanging-indent type thing aligning the title and message to the left. */
.crm-container .notify-content {
  padding-left: 1.6rem;
}

/* Thames theme does hanging indent for the little <i>con, but happy for the list bullets to be outside of main text block as is narrow column. */
#crm-notification-container div.ui-notify-message .notify-content ul,
#crm-notification-container div.ui-notify-message .alert.notify-content ul {
  margin: 1rem 0 0;
  padding: 0;
}

/* Only include the margin under the h1 (h1!) when it's not empty. When it's empty the h1 only contains the <i>con and adding a margin messes up vertical alignment of the message. */
#crm-notification-container div.ui-notify-message h1:not(:empty) {
  margin-bottom: 1rem;
}

/* OTHER */
/* 'alpha-filter' is the alphabetical pager you see, for example, on adv search results */
.crm-container #alpha-filter li {
  --crm-text-color: #0002; /* referenced in searchForm.css */
}

.crm-container .description:not(#help),
.crm-container td.description {
  font-size: 0.875rem;
}


/* Get rid of the ugly black overlay during loading */
@keyframes aahblockoverlay {
  0% {
    background-color: var(--crm-c-blue-overlay);
}
  50% {
    background-color: var(--crm-page-bg-color);
}
  100% {
    background-color: var(--crm-c-blue-overlay);
}
}
.crm-container .blockUI.blockOverlay {
  animation: aahblockoverlay 10s infinite;
}

/* CONTACT SUMMARY */
/* Ensure the Summary tab's top left corner matches the radius of the container */
.crm-contact-page #mainTabContainer .crm-contact-tabs-list>li:first-child a {
  border-radius: var(--crm-contact-radius) 0 0 0;
}

.crm-contact-page #mainTabContainer .ui-tabs-nav li .ui-tabs-anchor:has(.crm-i) {
  grid-template-columns: var(--crm-contact-icon-size) 1fr auto;
  gap: 1ch;
}

.crm-contact-page #mainTabContainer .ui-tabs-nav li .ui-tabs-anchor .crm-i:first-child {
  justify-self: center;
}

.crm-summary-contactname-block:not(.crm-edit-ready) #crm-contactname-content {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
}

/* RL has no margin-bottom so the actions ribbon touches the main contact block */
div.crm-summary-contactname-block+.crm-actions-ribbon {
  margin-bottom: var(--crm-l-reg-1) !important;
}

/* Use subgrid? No. Not responsive enough. */
/* #contact-summary { grid-template-columns: 1fr 1fr; display: grid; } */
/* .crm-container div.contact_panel { display: grid; grid-template-columns: subgrid; grid-column: 1 / 3; } */
/* .contact_details { grid-template-columns: subgrid; grid-column: 1/ 3; } */

/* Decorations to indicate an editable chunk. */
#contact-summary .crm-edit-help {
  color: transparent;
  transition: 0.3s color;
  opacity: 1;
  font-size: 0.875rem;
}

#contact-summary .crm-edit-help .crm-i.fa-pencil {
  color: var(--crm-c-blue-dark) !important; /* important overrides contactSummary.css */
}

#contact-summary .crm-inline-edit:hover .crm-edit-help {
  color: var(--crm-c-blue-dark);
}

#contact-summary .crm-inline-edit:hover .crm-edit-help .crm-i.fa-pencil {
  color: var(--crm-c-blue-dark) !important;
}

.crm-container div.crm-summary-row {
  display: grid;
  grid-template-columns: var(--crm-input-label-width) 1fr;
}

/* unbold the labels */
.crm-container div.crm-summary-row div.crm-label {
  font-weight: normal !important; /* important overrides contactSummary.css that comes after this stylesheet */
}

/* instead bold the values */
.crm-container div.crm-summary-row div.crm-label+div {
  font-weight: bold;
}

/* drop the ugly mahusive roadsign-atop unreadable icon for things like do not email */
.fa-stack .crm-i.fa-stack-2x {
  font-size: 1rem;
}

.fa-stack .crm-i.fa-stack-1x:first-child {
  display: none;
}

#contact-summary div.crm-summary-row div.crm-label .fa-stack {
  height: auto;
  line-height: inherit;
  vertical-align: baseline;
  width: auto;
}

#contact-summary div.crm-summary-row div.crm-label :where(.fa-stack-1x,
.fa-stack-2x) {
  position: static;
  width: auto;
}

/* when space is tight, wrap labels onto next row */
.crm-container div.crm-summary-row {
  flex-wrap: wrap;
}

/* */
#contact-summary .crm-tag-item {
  border-radius: var(--crm-r-1);
}

.crm-container div.crm-summary-row div.crm-label {
  color: var(--crm-c-blue-darker);
}

/* INLINE EDIT */
.crm-editable.crm-editable-editing {
  background: white;
  padding: 0.5em;
  border-radius: 0.25em;
  border: solid 1px var(--crm-c-blue);
}

.crm-container .crm-editable-form [type="submit"] {
  color: var(--crm-c-green-dark) !important;
}

/* nice rounded tables. Pretty niche. */
.crm-container table:not(.crm-inline-edit-form) {
  border-radius: 0.4rem;
  /* Fails when pop-up menus inside table need to extend beyond the table */
  /* clip-path: inset(0 0 0 0 round 0.4rem); */
  border-collapse: separate;
  border-spacing: 0;
}

.crm-container table tr:first-child th:first-child {
  border-radius: 0.4rem 0 0 0;
}

.crm-container table tr:first-child th:last-child {
  border-radius: 0 0.4rem 0 0;
}

.crm-container table tr:last-child td:first-child {
  border-radius: 0 0 0 0.4rem;
}

.crm-container table tr:last-child td:last-child {
  border-radius: 0 0 0.4rem 0;
}

/* ensure thing that wrap tables allow scrolling in case the table overflows. */
div:has(> table) {
  overflow-x: auto;
  max-width: 100%;
}
/* When a menu is activated, allow it 20rem height to prevent it causing scroll
 * when the menu is opened on a row near the bottom of the table and
 * which the user might not notice / might make the menu hard to access.
 * https://lab.civicrm.org/extensions/riverlea/-/issues/90
 */
div:has(> table .btn-slide-active),
div:has(> table .dropdown-toggle[aria-expanded="true"]) {
  padding-bottom: 20rem;
}

/* Advanced search: override searchForm.css for slightly better aligned fields */
.advanced-search-fields {
  align-items: end;
}

/* tabs */
.crm-container .ui-tabs:not(#mainTabContainer) {
  background: white;
  border: var(--crm-tabs-border) !important;
  border-radius: var(--crm-r-3);
  /* overrides #civicrm-news-feed.ui-tabs and .crm-contact-page #secondaryTabContainer */
}
/* breadcrumbs - links not accessibile using the nromal blue. */
#civicrm-footer a,
nav.breadcrumb a {
  --crm-link-color: var(--crm-c-blue-darker);
  --crm-link-hover-color: var(--crm-c-blue-dark);
}
#crm-contactname-content .crm-edit-help {
  color: var(--crm-c-blue-dark) !important; /* override */
  padding: 0.25rem !important;
  opacity: 1 !important;
}
#crm-contactname-content > .crm-inline-block-content {
  border: solid 1px transparent !important;
}
#crm-contactname-content:hover > .crm-inline-block-content {
  border-color: var(--crm-c-blue-dark) !important;
}

/* Overrides for crmSearchAdmin.css */
.crm-search-nav-tabs > div.btn-group {
  top: 0 !important; /* the buttons already have padding, we don't need this. (crmSearchAdmin.css, L10 at time of writing) */
}


/* Make the tags list nicer. */
.crm-tag-item {
  padding: 0 1ch;
  border-radius: 1rem;
}

/* clickable items in select2 drop downs should be blue like links. */
.select2-drop.select2-drop-active.crm-container .select2-results > li {
  color: var(--crm-c-blue-dark);
}

/* Breadcrumbs */
html.crm-standalone  nav.breadcrumb>ol {
  display: flex;
  gap: var(--crm-l-medium);
}
.breadcrumb ol li:not(:first-child)::before {
  content: " \BB ";
  margin-inline-end: var(--crm-l-medium);
  color: var(--crm-c-blue-dark);
}

/* override _fixes.css */
.crm-container .font-red {
  color: var(--crm-c-red-bright) !important;
}
/* override _icons.css */
.crm-i.fa-ban.fa-stack-2x {
  opacity: 1;
}

/* PHP errors, warnings */
.standalone-errors {
  background: #ead2ce;
}

/* e.g. search buttons followed by count of matches on SK screen */
.crm-search-display .form-inline:not(th,td) {
  padding: var(--crm-padding-reg) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--crm-l-medium);
}

/* Spinner. Replace the fa icon with something nicer. */
.fa-spinner::before {
  content: "";
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  border: dashed 1px white;
  border-radius: 1rem;
  animation: thames-spinner 1s infinite;
}

/* Spinner for notifications .status-start notifications e.g. loading/saving. */
.crm-status-box-outer.status-start .crm-status-box-inner {
  /* Allow space for spinner.*/
  padding-left: 2.5ch;
}

/* The spinner. */
.crm-status-box-outer.status-start .crm-status-box-inner::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: -2.5ch;
  display: block;
  content: '';
  line-height: 1;
  animation: thames-spinner 1s infinite;
  transform-origin: center;
  width: 1.5ch;
  height: 1.5ch;
  border: dashed 1px white;
  border-radius: 2ch;
}

@keyframes thames-spinner {
  0% {
    transform: none;
  }
  100% {
    transform: rotateZ(360deg);
  }
}


/* Searchkit preview table headers go weird because of the button margin for the select-all button. */
/* .crm-container .btn, .crm-container button, .crm-container .crm-button, .crm-container [type="button"], .crm-container [type="reset"], .crm-container [type="submit"]*/
.crm-container th.crm-search-result-select {
  --crm-btn-margin: 0;
}
/* Searchkit accordions */
.crm-search-admin-edit-columns details,
.crm-search .crm-search-admin-relative details {
  /*issue https://lab.civicrm.org/extensions/riverlea/-/issues/102 */
  margin-left: 1rem;
  /* crmSearchAdmin applies this var as the bg here and it does not suit us. */
  --crm-page-bg-color: transparent;
}

/* Override contactSummary.css */
#crm-contact-actions-list a.delete {
  --crm-danger-text-color: var(--crm-c-red-dark);
}
#crm-contact-actions-list a.delete:hover,
#crm-contact-actions-list a.delete:focus {
  /* the hover state gives crm-c-red-dark to the background */
  --crm-danger-text-color: var(--crm-c-red-light);
}

/* Fix Mosaico wizard */
.crm_wizard__tille {
  --crm-panel-bg-color: transparent;
}
.crmb-wizard-button-right {
  gap: 1rem;
}

/* Support contact dashboard image float */
.contactCardRight:has(#crm-contact-thumbnail) .float-left {
  width: calc(100% - var(--crm-flex-gap) - var(--crm-contact-image-size));
}

/* Quicksearch */
ul.crm-quickSearch-results a {
  padding: 0.25rem 1rem;
  text-decoration: none;
  color: var(--crm-link-color);
}
ul.crm-quickSearch-results .ui-state-active a /* mouse,keyboard nav */ {
  background: var(--crm-c-blue);
  color: var(--crm-link-hover-color);
}
ul.crm-quickSearch-results a:active {
  background: white;
}


/* ajax status/saving notifications */
.crm-status-box-msg {
  color: white;
}

.crm-status-box-outer {
  position: fixed;
  top: 2px;
  right: 2px;
  z-index: 100000;
  background-image: none;
  background-color: var(--crm-c-blue-dark);
  padding: 0 1rem;
  border-radius: 3px;
  min-width: 8rem;
  max-width: 13rem;
  text-align: left;
  --crm-layer1-bg-color: transparent;

  .crm-status-box-msg {
    color: white;
  }

  &.status-success {
    background-color: var(--crm-c-green-dark);
  }

  &.status-error {
    background-color: var(--crm-c-red-dark);
  }
}
.crm-status-box-outer.status-start .crm-status-box-inner {
  padding-left: 2.5ch;
}
.crm-status-box-outer.status-start .crm-status-box-inner::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: -2.5ch;
  display: block;
  content: '';
  line-height: 1;
  animation: loading-status-message 1s infinite;
  transform-origin: center;
  width: 1.5ch;
  height: 1.5ch;
  border: dashed 1px white;
  border-radius: 2ch;
}

@keyframes loading-status-message {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(-50%) rotateZ(360deg);
  }
}

/* 10BitWorks vars */
:root {
--crm-font-size: nullrem;
}
/* 10BitWorks custom css */
:root:root, #crm-container.crm-public {
  --crm-c-darkest: #1A1A1A;
  --crm-text-dark-color: #1A1A1A;
  --crm-paper: #F5F0E6;
  --crm-page-bg-color: transparent;
  --crm-container-bg-color: transparent;
  --crm-form-block-bg-color: transparent;
  --crm-layer1-bg-color: color-mix(in srgb, #F5F0E6 92%, #1A1A1A 8%);
  --crm-border-color: #6E655B;
  --crm-link-color: #1A1A1A;
  --crm-link-hover-color: #C9952A;
  --crm-link-decoration: underline;
  --crm-focus-color: #C9952A;
  --crm-primary-color: #C9952A;
  --crm-primary-text-color: #F5F0E6;
  --crm-secondary-color: #302922;
  --crm-info-color: #3A5A7C;
  --crm-danger-color: #8B3A2A;
  --crm-form-checkbox-list-bg-color: transparent;
  --crm-shadow-block: none;
  --crm-font: "Barlow", sans-serif;
  --crm-font-size: 1rem;
  --crm-input-label-font: "Barlow Condensed", sans-serif;
  --crm-heading-bg-color: transparent;
  --crm-heading-color: #1A1A1A;
  --crm-l-radius: 0;
  --crm-btn-radius: 0;
  --crm-input-border-radius: 0;
  --crm-f-input-radius: 0;
  --crm-btn-border: 2px solid #1A1A1A;
  --crm-btn-txt-transform: uppercase;
  --crm-input-bg-color: transparent;
  --crm-input-box-shadow: none;
  --crm-f-form-width: unset;
  --crm-f-form-layout: block;
  --crm-f-fieldset-bg-color: transparent;
  --crm-f-legend-align: start;
  --crm-f-label-position: unset;
  --crm-f-label-align: left;
  --crm-f-label-width: auto;
  --crm-f-input-width: 100%;
  --crm-f-box-shadow: none;
  --crm-f-form-focus-outline-color: #C9952A;
  --crm-f-form-focus-border-color: #C9952A;
  --crm-f-form-focus-border-width: 0; /* v4.7: River draws this on the whole .crm-section row, not the input */
  --crm-f-form-focus-bg-color: transparent;
  --crm-f-form-error-outline-color: #8B3A2A;
  --crm-f-form-error-border-color: #8B3A2A;
  --crm-f-form-error-border-width: 0; /* v4.7: same; the input carries the error underline (see v4.7 block) */
}

/* ── 10BitWorks layout v3: desktop split, contribution pages ──
   Block grid: [head] legends + labels | [body] fields. Wrappers pass the
   columns down as subgrids; <fieldset> itself dissolves (display: contents),
   because Chrome lays fieldset content out in an anonymous box and never
   grids the legend. Doubled #crm-container on display/order rules: snippet
   10436 sets the page 5 block to flex at (1,3,1). Grid keeps its `order`. */
body.civicrm-contribute #crm-container {
  container: tbwcrm / inline-size;
}

@container tbwcrm (min-width: 56rem) { /* SPLIT POINT: your call */

  body.civicrm-contribute #crm-container #crm-main-content-wrapper {
    grid-template-columns: 1fr min(64rem, 100%) 1fr; /* MAX WIDTH: your call */
  }

  body.civicrm-contribute #crm-container#crm-container .crm-contribution-main-form-block {
    --tbw-head-w: 16rem;  /* LEFT COLUMN WIDTH: your call */
    --tbw-gap: 2.5rem;
    display: grid;
    grid-template-columns: [head-start] var(--tbw-head-w) [head-end body-start] minmax(0, 1fr) [body-end];
    column-gap: var(--tbw-gap);
    background-image: linear-gradient(#C9952A, #C9952A);
    background-repeat: no-repeat;
    background-size: 2px 100%;
    background-position: calc(var(--tbw-head-w) + var(--tbw-gap) / 2 - 1px) 0;
  }

  /* Default: everything in the body column. */
  body.civicrm-contribute #crm-container .crm-contribution-main-form-block > *,
  body.civicrm-contribute #crm-container .crm-contribution-main-form-block fieldset > :not(legend) {
    grid-column: body;
  }

  /* Subgrids: wrappers holding a fieldset, and loose label/content rows.
     #priceset-div / #priceset lose to snippet 10436 (display: contents) on
     page 5, which is what keeps its order working. column-gap must match the
     parent or the subgrid shifts content by half the difference. */
  body.civicrm-contribute #crm-container .crm-contribution-main-form-block
    div:has(fieldset):not(fieldset *),
  body.civicrm-contribute #crm-container .crm-contribution-main-form-block
    .crm-section:has(> .label + .content):not(#pricesetTotal):not(fieldset *) {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: head-start / body-end;
    column-gap: var(--tbw-gap);
    row-gap: 0;
    min-width: 0;
    margin-inline: 0;
    padding-inline: 0;
    border: 0;
  }
  body.civicrm-contribute #crm-container .crm-contribution-main-form-block
    div:has(fieldset):not(fieldset *) > :not(fieldset, legend, :has(fieldset)) {
    grid-column: body;
  }

  body.civicrm-contribute #crm-container .crm-contribution-main-form-block
    .crm-section:not(#pricesetTotal):not(fieldset *) > .label {
    grid-column: head;
    margin: 0;
  }
  body.civicrm-contribute #crm-container .crm-contribution-main-form-block
    .crm-section:not(#pricesetTotal) > .content {
    grid-column: body;
  }
  body.civicrm-contribute #crm-container .crm-contribution-main-form-block .clear {
    display: none;
  }

  /* Fieldsets dissolve; their children keep the fieldset's order. */
  body.civicrm-contribute #crm-container#crm-container .crm-contribution-main-form-block fieldset {
    display: contents;
  }
  body.civicrm-contribute #crm-container#crm-container .crm-contribution-main-form-block fieldset > * {
    order: inherit;
  }
  body.civicrm-contribute #crm-container#crm-container .crm-contribution-main-form-block fieldset > legend {
    display: block;
    float: none;
    grid-column: head;
    align-self: start;
    width: auto;
    margin: 0;
    text-align: start;
    border-bottom: 0;
  }

  body.civicrm-contribute #crm-container .crm-contribution-main-form-block
    :is(#pricesetTotal, #crm-submit-buttons) {
    grid-column: body;
  }
}

/* ── v4 delta (session 62) ── */
/* River's .help icon + blue border off; legacy notice as a full-width brass band */
body.civicrm-contribute #crm-container#crm-container .help::before { content: none; display: none; }
body.civicrm-contribute #crm-container#crm-container .legacy-plan-notice {
  grid-column: 1 / -1; border: 0; padding: 16px 20px; color: #1A1A1A;
  background-color: rgba(201,149,42,0.3);
  background-image: repeating-linear-gradient(45deg, rgba(26,26,26,0.06) 0 1px, transparent 1px 8px);
}
/* Gaps: hide empty sections, drop stacked trailing margins */
body.civicrm-contribute #crm-container .crm-contribution-main-form-block > :is(.cms_user-section, .custom_pre_profile-group, .custom_post_profile-group):not(:has(input, select, textarea)) { display: none; }
body.civicrm-contribute #crm-container#crm-container :is(#membership, #priceset, #totalWithPercentage) { margin-block-end: 0; }
body.civicrm-contribute #crm-container#crm-container #crm-submit-buttons { margin-block-start: 0; }
/* Labels stack in the body column; the head column holds legends only */
@container tbwcrm (min-width: 56rem) {
  body.civicrm-contribute #crm-container#crm-container .crm-contribution-main-form-block .crm-section:not(#pricesetTotal):not(fieldset *) > .label { grid-column: body; }
  body.civicrm-contribute #crm-container#crm-container .crm-contribution-main-form-block .crm-section:has(> .label + .content):not(#pricesetTotal):not(fieldset *) { row-gap: 8px; }
}
body.civicrm-contribute #crm-container#crm-container .email-5-section input { max-width: none; width: 100%; }
/* Checkbox price rows (lockers + storage): name | price, then descriptions */
body.civicrm-contribute #crm-container#crm-container :is(.reserved_space-content, .personal_storage-content) .price-set-option-content { display: flex; align-items: flex-start; gap: 16px; }
body.civicrm-contribute #crm-container#crm-container :is(.reserved_space-content, .personal_storage-content) .price-set-option-content > input { flex: none; width: 18px; height: 18px; margin-top: 4px; }
body.civicrm-contribute #crm-container#crm-container :is(.reserved_space-content, .personal_storage-content) .price-set-option-content > label {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "pre pre" "post post";
  column-gap: 16px; row-gap: 4px; flex: 1 1 0; align-items: baseline; margin: 0; font-size: 1rem; line-height: 1.5;
}
body.civicrm-contribute #crm-container#crm-container :is(.reserved_space-content, .personal_storage-content) label > [class*="-separator"] { display: none; }
body.civicrm-contribute #crm-container#crm-container :is(.reserved_space-content, .personal_storage-content) label > .crm-price-amount-label { grid-area: name; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 1.25rem; text-transform: uppercase; }
body.civicrm-contribute #crm-container#crm-container :is(.reserved_space-content, .personal_storage-content) label > .crm-price-amount-label sup { font-size: 0.6em; }
body.civicrm-contribute #crm-container#crm-container :is(.reserved_space-content, .personal_storage-content) label > .crm-price-amount-amount { grid-area: price; font-family: "JetBrains Mono", monospace; font-size: 1rem; color: #1A1A1A; }
body.civicrm-contribute #crm-container#crm-container :is(.reserved_space-content, .personal_storage-content) label > .crm-price-amount-help-pre { grid-area: pre; }
body.civicrm-contribute #crm-container#crm-container :is(.reserved_space-content, .personal_storage-content) label > .crm-price-amount-help-post { grid-area: post; }
body.civicrm-contribute #crm-container#crm-container :is(.reserved_space-content, .personal_storage-content) label > .description { font-size: 0.9375rem; color: #6E655B; }
/* Rewards: styled + behavior in Custom Code snippet 10439 (works with or without this stream) */

/* ── v4.1 (session 62) ── */
/* Legends right-aligned: text ends 20px left of the brass rule, mirroring the 20px on the field side */
@container tbwcrm (min-width: 56rem) {
  body.civicrm-contribute #crm-container#crm-container .crm-contribution-main-form-block fieldset > legend { text-align: end; }
}
/* Contribute button: drop River's fixed 29px height */
body.civicrm-contribute #crm-container#crm-container #crm-submit-buttons .crm-button { height: auto; min-height: 0; padding: 16px 40px; font-size: 1.125rem; line-height: 1.2; }
/* Page 5: v4 zeroed the button's top margin, which left Contribute touching the total band (snippet 10436 flex, no gap) */
body.civicrm-contribute #crm-container#crm-container:has(input[name="priceSetId"][value="12"]) #crm-submit-buttons { margin-block-start: 24px; }

/* ── v4.2 (session 63) ── */
/* River fixed heights off on every CiviCRM front-end page (extends v4.1's contribute-only button rule) */
body.civicrm #crm-container#crm-container select.crm-form-select { height: auto; min-height: 0; }
body.civicrm #crm-container#crm-container #crm-submit-buttons .crm-button { height: auto; min-height: 0; }
/* Event info: the fees section had no grid order, so it rendered above the title; place it after the cards, before Add to Cart */
body.civicrm-event-info #crm-container#crm-container .event-info > .event_fees-section { order: 4; grid-column: 1 / -1; }

/* ── v4.3 (session 63) ── */
/* QR check-in page (/members/qrcodecheckin/…): the extension renders #crm-container straight between header and footer,
   with no page column. Give it the 720px form column, hide the admin breadcrumb, title + brass notice like the other forms. */
body.civicrm-qrcodecheckin #crm-container#crm-container { width: min(45rem, calc(100% - 40px)); margin: 4rem auto 6rem; padding: 0; box-sizing: border-box; }
body.civicrm-qrcodecheckin #crm-container#crm-container > .breadcrumb { display: none; }
body.civicrm-qrcodecheckin #crm-container#crm-container #crm-main-content-wrapper > h3 {
  margin: 0 0 1.5rem; padding: 0 0 0.75rem; border-bottom: 2px solid #C9952A; background: none; color: #1A1A1A;
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.25rem); line-height: 1.1em; text-transform: uppercase;
}
body.civicrm-qrcodecheckin #crm-container#crm-container #qrcheckin-unpermissioned-successful-message {
  margin: 0; padding: 16px 20px; border: 0; color: #1A1A1A;
  background-color: rgba(201,149,42,0.3);
  background-image: repeating-linear-gradient(45deg, rgba(26,26,26,0.06) 0 1px, transparent 1px 8px);
}
body.civicrm-qrcodecheckin #crm-container#crm-container #qrcheckin-unpermissioned-successful-message p { margin: 0; font-size: 1.125rem; line-height: 1.5em; }

/* ── v4.4 (session 63) ── */
/* Member dashboard (/members/me) + all CiviCRM tables: River's white row fill, 7% zebra striping and 0.4rem rounded
   corners off, back to post 13's hairline rows on linen with a brass hover tint. River re-mixes the stripe colour per row
   from these variables, so set the variables rather than the row backgrounds. */
:root:root, #crm-container.crm-public {
  --crm-table-row-bg-color: transparent;
  --crm-table-row-alternate-bg-color: transparent;
  --crm-table-row-hover-color: rgba(201,149,42,0.12);
}
body.civicrm #crm-container#crm-container table { border-radius: 0; }

/* ── v4.5 (session 64) ── */
/* Thames rounds the corner cells of every table's first and last row (0.4rem) on top of the table radius v4.4 zeroed.
   On the event cart thank-you that rounded the bottom corners of the Shop Dark total band. */
body.civicrm #crm-container#crm-container table :is(th, td) { border-radius: 0; }
/* Cart tables: Thames' 1px outside table border drew a hairline under the total band. Rows keep post 13's hairlines. */
:is(body.civicrm-event-cart_checkout, body.civicrm-event-view_cart) #crm-container#crm-container table { border: 0; }

/* ── v4.6 (session 72) ── */
/* Form text at the site's body size. River's base was 1rem and post 13 set labels + descriptions to --size-sm (13–14px).
   --size-base (17–19px) and --size-lg (16–18px) come from the Elementor kit; the fallbacks are their desktop maximums. */
:root:root, #crm-container.crm-public { --crm-font-size: var(--size-base, 1.1875rem); }
:is(body.civicrm-event-register, body.civicrm-contribute, body.civicrm-event-cart_checkout) #crm-container#crm-container .crm-section .label { font-size: var(--size-lg, 1.125rem); }
:is(body.civicrm-event-register, body.civicrm-contribute) #crm-container#crm-container .description,
body.civicrm-contribute #crm-container#crm-container #allow_auto_renew .content,
body.civicrm-contribute #crm-container#crm-container :is(.reserved_space-content, .personal_storage-content) label > .description { font-size: var(--size-base, 1.1875rem); line-height: 1.65; }
body.civicrm-contribute #crm-container#crm-container :is(.reserved_space-content, .personal_storage-content) .price-set-option-content > label { font-size: var(--size-base, 1.1875rem); }

/* Checkboxes + profile radios drawn by us: carbon square, carbon fill + linen tick when checked. Replaces the native box,
   which River's accent-color painted brass. Brass stays only on the keyboard focus ring. Hidden tier and payment radios
   (opacity 0, styled through their labels) are not matched: radios are only restyled inside profile rows.
   min-height wins over the 18px heights set by snippet 10436 (page 5) and older rules, so every box stays square. */
body.civicrm #crm-container#crm-container input[type="checkbox"],
body.civicrm #crm-container#crm-container [id^="editrow-"] input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: none; display: inline-block; box-sizing: border-box;
  width: 22px; height: 22px; min-width: 22px; min-height: 22px; max-width: none; max-height: none; margin: 0; padding: 0; vertical-align: middle;
  border: 2px solid #1A1A1A; border-radius: 0; background: transparent no-repeat center / 16px 16px;
  box-shadow: none; outline: 0; cursor: pointer; accent-color: auto;
}
body.civicrm #crm-container#crm-container [id^="editrow-"] input[type="radio"] { border-radius: 50%; }
body.civicrm #crm-container#crm-container input[type="checkbox"]:checked {
  background-color: #1A1A1A;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.1L13 4.6' fill='none' stroke='%23F5F0E6' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E");
}
body.civicrm #crm-container#crm-container [id^="editrow-"] input[type="radio"]:checked { background-color: #1A1A1A; box-shadow: inset 0 0 0 4px #F5F0E6; }
body.civicrm #crm-container#crm-container :is(input[type="checkbox"], [id^="editrow-"] input[type="radio"]):focus-visible { outline: 2px solid #C9952A; outline-offset: 2px; }
body.civicrm #crm-container#crm-container :is(input[type="checkbox"], [id^="editrow-"] input[type="radio"]):disabled { opacity: 0.4; cursor: not-allowed; }
/* Locker/storage boxes (v4 set 18px) and the rewards "Add this reward" box (snippet 10439 sets 18px + brass accent) */
body.civicrm-contribute #crm-container#crm-container :is(.reserved_space-content, .personal_storage-content) .price-set-option-content > input,
body.civicrm-contribute #crm-container#crm-container .tbw-premiums .tbw-premium-pick input[type="checkbox"] { width: 22px; height: 22px; margin-top: 0.15em; }
/* Profile options and the fee box: box beside its label, label text wraps beside the box rather than under it */
body.civicrm #crm-container#crm-container [id^="editrow-"] .crm-option-label-pair,
body.civicrm #crm-container#crm-container .cover_processor_fees-content .price-set-option-content {
  display: flex; align-items: flex-start; gap: 12px;
}
body.civicrm #crm-container#crm-container [id^="editrow-"] .crm-option-label-pair > input,
body.civicrm #crm-container#crm-container .cover_processor_fees-content .price-set-option-content > input { margin-top: 0.15em; }
body.civicrm #crm-container#crm-container [id^="editrow-"] .crm-option-label-pair > label,
body.civicrm #crm-container#crm-container .cover_processor_fees-content .price-set-option-content > label,
body.civicrm-contribute #crm-container#crm-container #allow_auto_renew label { margin: 0; line-height: 1.4; cursor: pointer; }

/* ── v4.7 (session 72) ── */
/* Field focus showed two underlines: post 13's brass 2px on the input, plus River's row-level focus border
   (.crm-section:has(> .content input:focus) { border-width: var(--crm-f-form-focus-border-width) }), which the token
   block had set to 0 0 2px 0. Row focus and error borders are now 0 (token block). The error underline moves onto the
   input itself, danger red, matching post 13's focus underline (2px, -1px margin so the field doesn't shift). */
body.civicrm #crm-container#crm-container .crm-section :is(input:not([type="checkbox"], [type="radio"]), textarea):is(.error, .crm-inline-error, .crm-error) { border-bottom: 2px solid #8B3A2A; margin-bottom: -1px; }

/* ── v4.8 (session 72) ── */
/* Validation errors look like the rest of the form: no 3px red box around the field (v4.7 already draws the red underline),
   and CiviCRM's validator message ("This field is required.") as a full-width line with a red rule, at body size. */
:root:root, #crm-container.crm-public { --crm-f-form-error-outline-color: transparent; }
body.civicrm #crm-container#crm-container label.crm-inline-error {
  display: block; width: auto; margin: 0.5rem 0 0; padding: 0 0 0 12px; border: 0; border-left: 3px solid #8B3A2A; border-radius: 0;
  background: none; box-shadow: none; color: #8B3A2A; font-family: "Barlow", sans-serif; font-weight: 600;
  font-size: var(--size-base, 1.1875rem); line-height: 1.4; text-transform: none; letter-spacing: normal;
}
/* Radio-group labels (e.g. "Can we text you?") are plain text in a div; post 13 hides any .label without a label or span inside */
body.civicrm #crm-container#crm-container [id^="editrow-"][role="radiogroup"] > .label { display: block; }
:root { color-scheme: light; }