/* Profundo donation form – variables scoped to this selector (no bleed) */
.pf-donation-form {
  /* Theme: override these on .pf-donation-form to customize */
  --pf-color-text: #333333;
  --pf-color-border: #333333;
  --pf-color-border-active: #000;
  --pf-color-bg: #fff;
  --pf-color-bg-selected: #f4e0df;
  --pf-color-bg-select: #f9f5f5;
  --pf-color-accent: #731812;
  --pf-color-error-bg: #f8d7da;
  --pf-color-error-text: #721c24;
  --pf-color-success-bg: #d4edda;
  --pf-color-success-text: #155724;
  --pf-radius: 10px;
  --pf-font-family: "Avenir LT W01_45 Book1475508", inherit;
  --pf-font-size: 18px;
  --pf-callout-font-size: 16px;
  --pf-font-weight: 300;
  --pf-option-padding: 14px 20px;
  --pf-block-margin: 30px;

  max-width: 500px;
  font-family: var(--pf-font-family);
  color: var(--pf-color-text);
  font-weight: var(--pf-font-weight);
  font-size: var(--pf-font-size);
  -webkit-font-smoothing: antialiased;
}

@media screen and (max-width: 768px) {
  .pf-donation-form {
    --pf-font-size: 16px;
    --pf-callout-font-size: 14px;
    --pf-option-padding: 12px 16px;
    --pf-block-margin: 20px;
  }
}

.pf-donation-form:not(:first-child) {
  margin-top: var(--pf-block-margin);
}

.pf-donation-form:not(:last-child) {
  margin-bottom: var(--pf-block-margin);
}

.pf-donation-form .pf-fieldset {
  position: relative;
  border: 0;
  margin: 0 0 15px;
  padding: 0;
}

.pf-donation-form .pf-legend {
  margin-bottom: 8px;
  display: block;
}

/* Visually hidden but available to screen readers */
.pf-donation-form .pf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Radio buttons for type of donation (single or recurring) */
.pf-donation-form .pf-radio-group {
  display: flex;
  gap: 16px;
}

.pf-donation-form .pf-radio-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pf-donation-form .pf-radio-wrap label {
  cursor: pointer;
  margin: 0;
}

.pf-donation-form .pf-radio-wrap input {
  margin: 0;
  width: 20px;
  height: 20px;
  accent-color: var(--pf-color-border-active);
  cursor: pointer;
}

/* Callout above amount buttons ("De fleste gir dette" + arrow) - arrow stays centered */
.pf-donation-form .pf-amount-callout {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 4px;
  margin-bottom: 8px;
}

.pf-donation-form .pf-amount-callout__left {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.pf-donation-form .pf-amount-callout__text {
  font-size: var(--pf-callout-font-size);
  color: var(--pf-color-accent);
}

.pf-donation-form .pf-amount-callout__arrow {
  width: auto;
  height: 19px;
  margin-top: 14px;
  flex-shrink: 0;
  color: var(--pf-color-accent);
}

.pf-donation-form .pf-amount-callout__right {
  flex: 1;
  min-width: 0;
}

/* Amount buttons - stretch to fill width equally */
.pf-donation-form .pf-amount-buttons {
  display: flex;
  gap: 13px;
  width: 100%;
}

.pf-donation-form .pf-amount-btn {
  flex: 1;
  min-width: 0;
  padding: var(--pf-option-padding);
  border: 1px solid var(--pf-color-border);
  border-radius: var(--pf-radius);
  background: var(--pf-color-bg);
  cursor: pointer;
  font-size: var(--pf-font-size);
  transition: border-color 0.15s, background 0.15s;
  color: var(--pf-color-text);
}

.pf-donation-form .pf-amount-btn:hover {
  border-color: var(--pf-color-border-active);
}

.pf-donation-form .pf-amount-btn.is-selected {
  border-color: var(--pf-color-border-active);
  background: var(--pf-color-bg-selected);
}

/* When a custom amount is entered, dim the preset buttons */
.pf-donation-form.pf-amount-from-custom .pf-amount-buttons {
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.pf-donation-form .pf-custom-amount-wrap {
  margin-top: 15px;
}

.pf-donation-form .pf-custom-amount-wrap input[type="number"] {
  width: 100%;
  padding: var(--pf-option-padding);
  font-size: var(--pf-font-size);
  border: 1px solid var(--pf-color-border);
  background-color: var(--pf-color-bg-select);
  border-radius: var(--pf-radius);
  transition: opacity 0.2s ease;
  text-align: left;
  color: var(--pf-color-text);
}

/* When custom amount field is empty, dim it a bit */
.pf-donation-form .pf-custom-amount-wrap.pf-custom-amount-placeholder input[type="number"] {
  opacity: 0.6;
}

/* When custom amount has a value, match the amount buttons' selected state */
.pf-donation-form .pf-custom-amount-wrap:not(.pf-custom-amount-placeholder) input[type="number"] {
  border-color: var(--pf-color-border-active);
  background-color: var(--pf-color-bg-selected);
}

.pf-donation-form .pf-submit-wrap {
  width: 100%;
}

/* Vipps web component: only layout, don't reset (no all: unset – breaks Shadow DOM) */
.pf-donation-form .pf-vipps-submit {
  display: block;
  width: 100%;
  cursor: pointer;
  transition: opacity 0.15s;
}

/* Loading state – JS toggles .pf-loading (custom elements don't use :disabled) */
.pf-donation-form .pf-vipps-submit.pf-loading {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.pf-donation-form .pf-message {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: var(--pf-font-size);
}

.pf-donation-form .pf-message.pf-error {
  background: var(--pf-color-error-bg);
  color: var(--pf-color-error-text);
}

.pf-donation-form .pf-message.pf-success {
  background: var(--pf-color-success-bg);
  color: var(--pf-color-success-text);
}