/* ============================================================
   donation-box.css
   Matches the design mockup: clean white card, 2-col grid for
   targets, modern amount+currency row, two-tone action buttons.
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --db-blue:        #1A56DB;
  --db-blue-light:  #EBF2FF;
  --db-blue-mid:    #3B82F6;
  --db-border:      #E2E8F0;
  --db-bg:          #FFFFFF;
  --db-bg-page:     #EFF6FF;
  --db-text:        #1E293B;
  --db-muted:       #64748B;
  --db-success:     #10B981;
  --db-radius:      16px;
  --db-radius-sm:   10px;
  --db-shadow:      0 4px 24px rgba(26,86,219,.08);
  --db-shadow-item: 0 2px 12px rgba(26,86,219,.06);
}

/* ── Outer wrapper ─────────────────────────────────────────── */
.donation-box {
  background: var(--db-bg);
  border-radius: var(--db-radius);
  padding: 28px 28px 20px;
  box-shadow: var(--db-shadow);
  border: 1px solid var(--db-border);
  position: relative;
  overflow: hidden;
}

/* subtle top-right watermark area (matches mockup corner graphic) */
.donation-box::after {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(26,86,219,.06) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Raised header (Total Raised) ──────────────────────────── */
.donation-box__raised {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.donation-box__raised-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--db-blue-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--db-blue);
  font-size: 20px;
}

.donation-box__raised-label {
  font-size: 13px;
  color: var(--db-muted);
  margin-bottom: 2px;
}

.donation-box__raised-amount {
  font-size: 28px;
  font-weight: 800;
  color: var(--db-text);
  line-height: 1;
}

/* ── Section title (Choose an item) ───────────────────────── */
.donation-items__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--db-text);
  margin-bottom: 4px;
}

.donation-items__title::before {
  content: '';
  display: inline-flex;
  width: 32px; height: 32px;
  background: var(--db-blue-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='14' rx='2'/%3E%3Cpath d='M16 8V6a4 4 0 0 0-8 0v2'/%3E%3C/svg%3E") center/18px no-repeat;
  border-radius: 8px;
  flex-shrink: 0;
}

.donation-items__subtitle {
  font-size: 13px;
  color: var(--db-muted);
  margin-bottom: 18px;
  padding-left: 42px;
}

/* ── Target items grid ─────────────────────────────────────── */
/* Default (half layout): single column, full width */
.donation-items .row-targets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 0;
}

/* Full-width layout: 3 columns (33.3% each) */
.donation-box--full .donation-items .row-targets {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .donation-box--full .donation-items .row-targets {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .donation-box--full .donation-items .row-targets {
    grid-template-columns: 1fr;
  }
}

/* ── Individual target card ────────────────────────────────── */
.donation-item {
  background: #FAFBFF;
  border: 1.5px solid var(--db-border);
  border-radius: var(--db-radius-sm);
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .2s, box-shadow .2s;
}

.donation-item:has(.js-target-checkbox:checked),
.donation-item.is-selected {
  border-color: var(--db-blue);
  background: #F0F6FF;
  box-shadow: 0 0 0 3px rgba(26,86,219,.08);
}

/* chip variant (shared fields scope — 3 columns) */
.donation-target-chip {
  background: #FAFBFF;
  border: 1.5px solid var(--db-border);
  border-radius: var(--db-radius-sm);
  padding: 16px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .2s, box-shadow .2s;
}

.donation-target-chip:has(.js-target-checkbox:checked),
.donation-target-chip.is-selected {
  border-color: var(--db-blue);
  background: #F0F6FF;
  box-shadow: 0 0 0 3px rgba(26,86,219,.08);
}

/* ── Checkbox (inline inside info row) ──────────────────────── */
.donation-item__checkbox {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--db-border);
  border-radius: 4px;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

.donation-item__checkbox:checked {
  background-color: var(--db-blue);
  border-color: var(--db-blue);
}

/* ── Content area ───────────────────────────────────────────── */
.donation-item__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Info row (icon + name + unit) ────────────────────────── */
.donation-item__info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.donation-item__icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 50%;
  background: var(--db-blue-light);
  padding: 6px;
  flex-shrink: 0;
}

.donation-item__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--db-text);
  line-height: 1.3;
}

.donation-item__unit {
  font-size: 12px;
  color: var(--db-muted);
  margin-top: 2px;
}

.donation-item__unit .js-target-unit-text {
  font-weight: 600;
  color: var(--db-blue);
}

/* ── Country select ────────────────────────────────────────── */
.donation-item__country .form-select {
  border-radius: 10px;
  border: 1.5px solid var(--db-border);
  font-size: 14px;
  color: var(--db-text);
  background-color: #fff;
  height: 44px;
  padding-left: 38px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: 10px center, right 12px center;
  background-repeat: no-repeat, no-repeat;
  background-size: 18px, 12px;
  appearance: none;
  -webkit-appearance: none;
}

[dir="rtl"] .donation-item__country .form-select {
  padding-left: 12px;
  padding-right: 38px;
  background-position: right 10px center, left 12px center;
}

.donation-item__country .form-select:focus {
  border-color: var(--db-blue);
  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
  outline: none;
}

/* ── Qty + Subtotal row ────────────────────────────────────── */
.donation-item__controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.donation-item__qty {
  flex: 0 0 auto;
}

.donation-item__qty .form-control {
  width: 90px;
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--db-border);
  font-size: 14px;
  text-align: center;
  font-weight: 600;
  color: var(--db-text);
}

.donation-item__qty .form-control:focus {
  border-color: var(--db-blue);
  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
  outline: none;
}

.donation-item__qty .form-control::placeholder {
  font-weight: 400;
  color: var(--db-muted);
}

.donation-item__subtotal {
  flex: 1;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

[dir="rtl"] .donation-item__subtotal {
  text-align: left;
  justify-content: flex-start;
}

.donation-item__subtotal-label {
  font-size: 12px;
  color: var(--db-muted);
}

.donation-item__subtotal-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--db-blue);
}

/* ── Dynamic extra fields ──────────────────────────────────── */
.donation-item__fields {
  border-top: 1px dashed var(--db-border);
  padding-top: 12px;
}

.donation-item__field .form-label {
  font-size: 12px;
  color: var(--db-muted);
  font-weight: 500;
  margin-bottom: 4px;
}

.donation-item__field .form-control {
  border-radius: 8px;
  border: 1.5px solid var(--db-border);
  font-size: 13px;
}

.donation-item__field .form-control:focus {
  border-color: var(--db-blue);
  box-shadow: 0 0 0 3px rgba(26,86,219,.10);
}

/* ── Separator between items section and amount section ─────── */
.donation-items + .donation-main,
.donation-items ~ .donation-main {
  margin-top: 8px;
}

/* ── Amount + currency + buttons section ───────────────────── */
.donation-main {
  margin-top: 8px;
}

.donation-main__section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--db-text);
  margin-bottom: 4px;
}

.donation-main__section-title::before {
  content: '';
  display: inline-flex;
  width: 32px; height: 32px;
  background: var(--db-blue-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cline x1='9' y1='7' x2='15' y2='7'/%3E%3Cline x1='9' y1='11' x2='15' y2='11'/%3E%3Cline x1='9' y1='15' x2='12' y2='15'/%3E%3C/svg%3E") center/18px no-repeat;
  border-radius: 8px;
  flex-shrink: 0;
}

.donation-main__section-sub {
  font-size: 12px;
  color: var(--db-muted);
  margin-bottom: 14px;
  padding-left: 42px;
}

[dir="rtl"] .donation-main__section-sub {
  padding-left: 0;
  padding-right: 42px;
}

/* amount + currency pill */
.donation-main__amount-group {
  display: flex;
  border: 1.5px solid var(--db-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 16px;
}

.donation-main__amount-group:focus-within {
  border-color: var(--db-blue);
  box-shadow: 0 0 0 3px rgba(26,86,219,.10);
}

.donation-main__amount-input {
  flex: 1;
  border: none !important;
  box-shadow: none !important;
  font-size: 22px;
  font-weight: 700;
  color: var(--db-text);
  padding: 14px 18px;
  background: transparent;
  min-width: 0;
}

.donation-main__amount-input::placeholder {
  color: #CBD5E1;
  font-weight: 400;
  font-size: 18px;
}

.donation-main__amount-input:focus {
  outline: none;
  box-shadow: none !important;
  border: none !important;
}

/* currency pill — right side */
.donation-main__currency-select {
  flex: 0 0 auto;
  min-width: 160px;
  max-width: 200px;
  border: none !important;
  border-left: 1.5px solid var(--db-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 600;
  color: var(--db-text);
  padding: 0 14px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 12px;
  appearance: none;
  -webkit-appearance: none;
  height: auto;
}

[dir="rtl"] .donation-main__currency-select {
  border-left: none !important;
  border-right: 1.5px solid var(--db-border) !important;
  border-radius: 0 !important;
  background-position: left 12px center;
}

.donation-main__currency-select:focus {
  outline: none;
  box-shadow: none !important;
}

/* ── Action buttons ────────────────────────────────────────── */
.donation-main__actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

@media (max-width: 480px) {
  .donation-main__actions {
    grid-template-columns: 1fr;
  }
}

.donation-btn {
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity .15s, transform .1s, box-shadow .15s;
  white-space: nowrap;
}

.donation-btn:active {
  transform: scale(.98);
}

/* Add to cart — outlined blue */
.donation-btn--secondary {
  background: #fff;
  color: var(--db-blue);
  border: 1.5px solid var(--db-blue);
}

.donation-btn--secondary:hover {
  background: var(--db-blue-light);
}

.donation-btn--secondary::before {
  content: '';
  width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0;
}

/* Donate now — solid blue */
.donation-btn--primary {
  background: var(--db-blue);
  color: #fff;
  box-shadow: 0 4px 16px rgba(26,86,219,.30);
}

.donation-btn--primary:hover {
  background: #1547BA;
  box-shadow: 0 6px 20px rgba(26,86,219,.38);
}

.donation-btn--primary::before {
  content: '';
  width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0;
}

/* ── Trust badge at bottom ─────────────────────────────────── */
.donation-box__trust {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--db-blue-light);
  border-radius: 10px;
}

.donation-box__trust-icon {
  width: 36px; height: 36px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A56DB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center/18px no-repeat;
  border-radius: 50%;
  flex-shrink: 0;
}

.donation-box__trust-text strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--db-text);
}

.donation-box__trust-text span {
  font-size: 12px;
  color: var(--db-muted);
}

/* ── Recurring card ────────────────────────────────────────── */
.donation-box .card {
  border: 1.5px solid var(--db-border);
  border-radius: var(--db-radius-sm);
  box-shadow: none;
}

/* ── Label above amount group ──────────────────────────────── */
.donation-main__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--db-muted);
}

/* ── Divider between sections ──────────────────────────────── */
.donation-box__divider {
  height: 1px;
  background: var(--db-border);
  margin: 20px 0;
}

/* ── Responsive tweaks ─────────────────────────────────────── */
@media (max-width: 768px) {
  .donation-box {
    padding: 20px 16px 16px;
    border-radius: 12px;
  }

  .donation-main__amount-input {
    font-size: 18px;
    padding: 12px 14px;
  }

  .donation-main__currency-select {
    min-width: 120px;
    font-size: 13px;
  }
}

/* (2-col grid is now handled by .donation-box--full modifier above) */

/* ── Quick Amount Buttons ──────────────────────────────────── */
.donation-item__quick-amounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 8px;
  width: 100%;
}

.donation-item__quick-amounts .js-quick-amount-btn {
  width: 100%;
  padding: 8px 6px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--db-border);
  background: #fff;
  color: var(--db-blue);
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  white-space: nowrap;
}

.donation-item__quick-amounts .js-quick-amount-btn:hover,
.donation-item__quick-amounts .js-quick-amount-btn.active {
  background: var(--db-blue);
  border-color: var(--db-blue);
  color: #fff;
}

/* ── Campaign-level country selector ──────────────────────── */
.donation-box__campaign-country .form-select {
  border-radius: 10px;
  border: 1.5px solid var(--db-border);
  height: 48px;
  font-size: 14px;
  font-weight: 500;
}

.donation-box__campaign-country .form-select:focus {
  border-color: var(--db-blue);
  box-shadow: 0 0 0 3px rgba(26,86,219,.10);
}

/* ── Dropdown mode target selector ────────────────────────── */
.donation-items__dropdown-wrap .form-select {
  border-radius: 10px;
  border: 1.5px solid var(--db-border);
  height: 52px;
  font-size: 15px;
  font-weight: 500;
  color: var(--db-text);
}

.donation-items__dropdown-wrap .form-select:focus {
  border-color: var(--db-blue);
  box-shadow: 0 0 0 3px rgba(26,86,219,.10);
  outline: none;
}

/* ── Suggested price hint on qty placeholder ───────────────── */
.donation-item__unit .suggested-tag {
  font-size: 11px;
  background: #FEF9C3;
  color: #92400E;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  font-weight: 600;
}