/*
  giving-public.css: causes and pledges on the public site (Giving module), on top of Huruma demo 3's
  own Causes, Causes Details and Donate Form areas. Loaded by the public layout after the template, so
  these rules win. Colours come from tokens only (StyleRules) and layout uses logical properties, so
  the RTL build and dark mode need nothing extra.
*/

/* ---- Money: an amount and its code stay one unit, in every direction ---- */
.bfau-cause-money {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bfau-cause-money-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
}

.bfau-cause-money-amount {
  font-weight: 700;
}

.bfau-cause-money-percent {
  margin-inline-start: auto;
  font-weight: 700;
}

.bfau-cause-money-other {
  opacity: 0.85;
  font-size: 0.9em;
}

/* A native progress element: its value is an attribute, so no inline style is needed. */
.bfau-cause-bar {
  appearance: none;
  inline-size: 100%;
  block-size: 0.35rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background-color: var(--bfau-border);
}

.bfau-cause-bar::-webkit-progress-bar {
  background-color: var(--bfau-border);
  border-radius: 999px;
}

.bfau-cause-bar::-webkit-progress-value {
  background-color: var(--bfau-primary);
  border-radius: 999px;
}

.bfau-cause-bar::-moz-progress-bar {
  background-color: var(--bfau-primary);
  border-radius: 999px;
}

/* A progress bar fills in the reading direction: from the right in Arabic. */
[dir="rtl"] .bfau-cause-bar {
  transform: scaleX(-1);
}

/* ---- The cause card (Huruma's .single-causes), with its panel under the photo ---- */
.bfau-cause-card {
  display: flex;
  flex-direction: column;
  block-size: calc(100% - 30px);
  border-radius: 5px;
  overflow: hidden;
  background-color: var(--bfau-heading);
}

/* The template floats the panel over the photo and reveals the button on hover: here the panel
   follows the photo, whatever the length of the text, and the button is always there (phones have
   no hover). The template's hover colour sweep is kept off, so the text stays readable. */
.bfau-cause-card::before {
  display: none;
}

.bfau-cause-card-image {
  display: block;
}

.bfau-cause-card-image img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 0;
  border-radius: 0;
}

.bfau-cause-image-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  font-size: 3rem;
  background-color: var(--bfau-primary);
  color: var(--bfau-on-primary);
}

.single-causes.bfau-cause-card .causes-content {
  position: static;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.35rem;
  border-radius: 0;
  color: var(--bfau-on-primary);
  text-align: start;
}

.single-causes.bfau-cause-card:hover .causes-content span,
.single-causes.bfau-cause-card:hover .causes-content h3,
.single-causes.bfau-cause-card:hover .causes-content p,
.single-causes.bfau-cause-card:hover .causes-progress-bar {
  transform: none;
}

.single-causes.bfau-cause-card .causes-content h3 {
  margin: 0;
}

.single-causes.bfau-cause-card .causes-content h3 a {
  color: inherit;
}

.single-causes.bfau-cause-card .causes-content h3 a:hover,
.single-causes.bfau-cause-card .causes-content h3 a:focus-visible {
  text-decoration: underline;
}

.single-causes.bfau-cause-card .causes-content .causes-progress-bar {
  margin-block: 0.5rem;
}

.single-causes.bfau-cause-card .causes-content .bfau-cause-money span {
  font-size: 0.9rem;
  font-weight: 400;
}

.single-causes.bfau-cause-card .causes-content .bfau-cause-money .bfau-cause-money-amount,
.single-causes.bfau-cause-card .causes-content .bfau-cause-money-percent {
  font-weight: 700;
}

.single-causes.bfau-cause-card .bfau-cause-bar {
  background-color: color-mix(in srgb, var(--bfau-on-primary) 25%, transparent);
}

.single-causes.bfau-cause-card .bfau-cause-bar::-webkit-progress-bar {
  background-color: color-mix(in srgb, var(--bfau-on-primary) 25%, transparent);
}

.single-causes.bfau-cause-card .causes-content .causes-btn-one {
  position: static;
  opacity: 1;
  visibility: visible;
  align-self: flex-start;
  margin-block-start: auto;
  background-color: var(--bfau-surface);
  color: var(--bfau-primary-text);
}

.single-causes.bfau-cause-card .causes-content .causes-btn-one:hover,
.single-causes.bfau-cause-card .causes-content .causes-btn-one:focus-visible {
  background-color: var(--bfau-primary);
  color: var(--bfau-on-primary);
}

.bfau-cause-closed {
  align-self: flex-start;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--bfau-on-primary) 20%, transparent);
}

/* Arrows point the way the text reads. */
[dir="rtl"] .bfau-cause-arrow,
[dir="rtl"] .bfau-pledge-arrow {
  display: inline-block;
  transform: scaleX(-1);
}

/* ---- The causes page ---- */
.bfau-causes-empty {
  text-align: center;
  color: var(--bfau-text-muted);
}

.bfau-causes-pager {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-block: 1rem;
}

.bfau-causes-pager a {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--bfau-border);
  border-radius: var(--bfau-radius);
  color: inherit;
}

.bfau-causes-pager a.active {
  background-color: var(--bfau-primary);
  border-color: var(--bfau-primary);
  color: var(--bfau-on-primary);
}

.bfau-causes-general,
.bfau-causes-more {
  margin-block-start: 2rem;
  text-align: center;
}

.bfau-causes-general p {
  margin-block-end: 1rem;
}

.bfau-causes-section .section-title {
  margin-block-end: 2.5rem;
}

/* ---- A cause's page ---- */
.bfau-cause-page .causes-details-image img {
  inline-size: 100%;
  border-radius: var(--bfau-radius);
}

.bfau-cause-page .causes-details-text,
.bfau-cause-page .causes-details-meta,
.bfau-cause-page .causes-details-payment {
  background-color: var(--bfau-surface);
  color: var(--bfau-text);
  text-align: start;
}

.bfau-cause-page .causes-details-payment {
  margin-block-start: 30px;
  padding: 30px;
  box-shadow: var(--bfau-shadow-soft);
}

.bfau-cause-fallback,
.bfau-cause-closed-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--bfau-text-muted);
  font-size: 0.95rem;
}

.bfau-cause-widget {
  padding: 1.5rem;
  border-radius: var(--bfau-radius);
  background-color: var(--bfau-surface);
  box-shadow: var(--bfau-shadow-soft);
}

.bfau-cause-widget .widget-title {
  margin-block-end: 1rem;
}

.bfau-cause-widget .bfau-cause-money-amount {
  font-size: 1.15rem;
  color: var(--bfau-heading);
}

.bfau-cause-widget-note {
  margin-block: 1rem;
  font-size: 0.85rem;
  color: var(--bfau-text-muted);
}

.bfau-cause-widget-btn {
  display: block;
}

/* ---- The pledge form (Huruma's .donate-form): a card on the page's surface, in both modes ---- */
.donate-form.bfau-pledge-form {
  background-color: var(--bfau-surface);
  color: var(--bfau-text);
  text-align: start;
  box-shadow: var(--bfau-shadow-soft);
}

.bfau-cause-pledge .donate-form.bfau-pledge-form {
  padding: 0;
  box-shadow: none;
}

.bfau-pledge-form .form-group {
  margin-block-end: 1.25rem;
}

.bfau-pledge-form .form-control {
  background-color: color-mix(in srgb, var(--bfau-text) 5%, var(--bfau-surface));
  border: 1px solid var(--bfau-border);
  color: var(--bfau-text);
}

.bfau-pledge-form .form-control::placeholder {
  color: var(--bfau-text-muted);
  font-weight: 400;
  opacity: 0.7;
}

.bfau-pledge-form .form-control:focus {
  border-color: var(--bfau-primary);
  box-shadow: 0 0 0 0.2rem var(--bfau-focus-ring);
}

.bfau-pledge-form .form-control.is-invalid {
  border-color: var(--bfau-danger);
}

.bfau-pledge-form textarea.form-control {
  block-size: auto;
  min-block-size: 6rem;
}

.bfau-pledge-form .invalid-feedback {
  color: var(--bfau-danger);
  font-weight: 500;
}

.bfau-pledge-label {
  display: block;
  float: none;
  inline-size: auto;
  margin-block-end: 0.4rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bfau-heading);
}

.bfau-pledge-required {
  margin-inline-start: 0.15rem;
  color: var(--bfau-danger);
}

.bfau-pledge-optional {
  margin-inline-start: 0.25rem;
  font-size: 0.85em;
  font-weight: 400;
  color: var(--bfau-text-muted);
}

.bfau-pledge-help {
  display: block;
  margin-block: 0.35rem 1rem;
  color: var(--bfau-text-muted);
}

.bfau-pledge-fixed {
  padding: 0.6rem 0.9rem;
  border: 1px dashed var(--bfau-primary);
  border-radius: var(--bfau-radius);
  color: var(--bfau-heading);
}

/* The amount and its currency: one control, the code at the end of the line in the reading direction. */
.bfau-pledge-amount {
  display: flex;
  gap: 0.5rem;
}

.bfau-pledge-amount .form-control {
  flex: 1 1 auto;
  font-size: 1.25rem;
  font-weight: 600;
}

.bfau-pledge-amount .bfau-pledge-currency {
  flex: 0 0 6.5rem;
  font-size: 1rem;
}

/* Once / every month, and the ways to pay: radio buttons drawn as choices. */
.bfau-pledge-choices {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.bfau-pledge-choice-input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
}

.bfau-pledge-choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--bfau-border);
  border-radius: var(--bfau-radius);
  background-color: var(--bfau-surface);
  color: var(--bfau-heading);
  cursor: pointer;
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.bfau-pledge-choice .bx {
  font-size: 1.25rem;
  color: var(--bfau-primary-text);
}

.bfau-pledge-choice-input:checked + .bfau-pledge-choice {
  border-color: var(--bfau-primary);
  background-color: var(--bfau-primary-subtle);
  font-weight: 600;
}

.bfau-pledge-choice-input:focus-visible + .bfau-pledge-choice {
  box-shadow: 0 0 0 0.2rem var(--bfau-focus-ring);
}

/* The hidden field only robots fill: off the screen, never display:none (robots look for that). */
.bfau-pledge-trap {
  position: absolute;
  inset-inline-start: -10000px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

.bfau-pledge-problem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: start;
}

.bfau-pledge-problem:focus {
  outline: none;
}

.bfau-pledge-privacy {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-block: 0 1rem;
  font-size: 0.9rem;
  color: var(--bfau-text-muted);
}

.bfau-pledge-closed {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--bfau-text-muted);
}

.bfau-pledge-closed .bx {
  font-size: 1.75rem;
  color: var(--bfau-primary-text);
}

/* ---- The pledge page and its confirmation ---- */
.bfau-pledge-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-block-end: 1.25rem;
}

.bfau-pledge-lead {
  margin-block-end: 1.5rem;
}

.bfau-pledge-sent {
  padding: 2.5rem;
  border-radius: var(--bfau-radius);
  background-color: var(--bfau-surface);
  box-shadow: var(--bfau-shadow-soft);
  text-align: center;
}

.bfau-pledge-sent-icon {
  font-size: 3.5rem;
  color: var(--bfau-primary-text);
}

.bfau-pledge-reference {
  font-weight: 700;
  color: var(--bfau-heading);
}

.bfau-pledge-sent-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-block-start: 1.5rem;
}

/* On the dark-section colour, not the brand colour: the label is the text-on-photos colour, whatever
   the preset's text on the brand colour is (templates.css, BFAUCRM-146). */
.default-btn.bfau-pledge-secondary {
  color: var(--bfau-on-photo);
  background-color: var(--bfau-dark-section);
}

/* ---- The pledge section (Huruma's Donate Form Area) ---- */
.donate-form-section.bfau-pledge-section {
  padding-block: 80px;
}

.bfau-pledge-section .donate-form-content {
  margin-block-end: 2rem;
  text-align: start;
}

.bfau-pledge-section .donate-form-content h3,
.bfau-pledge-section .donate-form-info span,
.bfau-pledge-section .donate-form-info h4 a {
  color: var(--bfau-on-primary);
}

@media (max-width: 767.98px) {
  .donate-form.bfau-pledge-form {
    padding: 1.25rem;
  }

  .bfau-pledge-section .donate-form-content h3 {
    font-size: 1.6rem;
  }

  .bfau-pledge-amount .bfau-pledge-currency {
    flex-basis: 5.5rem;
  }

  .bfau-cause-page .causes-details-payment {
    padding: 1.25rem;
  }
}