/*
 * Component styles for the giving area only.
 * Page chrome (header, nav, wrapper, footer, headings, links, fonts)
 * comes from /style_main.css — this file only styles things that don't
 * already exist elsewhere on the site (donation forms, amount pickers,
 * campaign grids).
 */

.giving-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 15px;
   margin: 10px 0 20px;
}

.giving-box {
   max-width: 480px;
   margin: 15px auto;
}

.giving-methods-grid {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 15px;
   margin: 10px 0 20px;
}

.giving-card-section + .giving-card-section {
   margin-top: 15px;
   padding-top: 15px;
   border-top: 1px solid #ddd;
}

.giving-card-title {
   display: block;
}

.giving-error {
   margin: 0 0 15px;
   padding: 10px;
   border: 1px solid #8a1c1c;
   border-left: 4px solid #8a1c1c;
   color: #8a1c1c;
   background: #fff2f2;
}

.giving-form fieldset {
   margin: 0 0 15px;
   padding: 0;
   border: 0;
}

.giving-form legend, .giving-other-amount label {
   display: block;
   margin-bottom: 8px;
   font-weight: bold;
   color: #666;
}

.giving-amount-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 8px;
}

.giving-amount-choice {
   position: relative;
}

.giving-amount-choice input {
   position: absolute;
   opacity: 0;
}

.giving-amount-choice span {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 42px;
   border: 2px solid #ccc;
   border-radius: 4px;
   font-weight: bold;
   cursor: pointer;
}

.giving-amount-choice input:checked + span {
   background: #069;
   border-color: #069;
   color: #fff;
}

.giving-amount-choice input:focus-visible + span {
   outline: 2px solid #069;
   outline-offset: 2px;
}

/* Once a custom amount is typed, the preset buttons above no longer
   apply — un-highlight whichever one is still marked "checked" so
   the form doesn't look like two amounts are selected at once. */
.giving-form:has(#other_amount:not(:placeholder-shown)) .giving-amount-choice input:checked + span {
   background: #fff;
   border-color: #ccc;
   color: inherit;
}

.giving-other-amount {
   margin-top: 15px;
}

.giving-money-input {
   display: flex;
   align-items: center;
   border: 2px solid #ccc;
   border-radius: 4px;
   background: #fff;
}

.giving-money-input:focus-within,
.giving-money-input:has(#other_amount:not(:placeholder-shown)) {
   border-color: #069;
}

.giving-money-input span {
   padding-left: 10px;
   font-weight: bold;
   color: #666;
}

.giving-money-input input {
   width: 100%;
   min-height: 38px;
   padding: 8px;
   border: 0;
   outline: 0;
   background: transparent;
   font: inherit;
   font-size: 100%;
   color: #666;
}

.giving-hint {
   margin: 8px 0 0;
   color: #999;
   font-size: 90%;
}

.giving-fund-note {
   margin: 0 0 15px;
   color: #999;
   font-size: 90%;
   font-style: italic;
}

.giving-submit {
   display: block;
   width: 100%;
   margin-top: 15px;
   padding: 12px 15px;
   border: 0;
   border-radius: 4px;
   background: #069;
   color: #fff;
   font: inherit;
   font-weight: bold;
   font-size: 100%;
   text-align: center;
   cursor: pointer;
}

.giving-submit:hover {
   background: #00496e;
}

.giving-secure-note {
   margin: 10px 0 0;
   color: #999;
   font-size: 85%;
   text-align: center;
}

.giving-bank-details {
   margin: 10px 0;
}

.giving-bank-details div {
   display: flex;
   gap: 10px;
   padding: 4px 0;
   border-bottom: 1px solid #ddd;
}

.giving-bank-details dt {
   flex: 0 0 130px;
   width: 130px;
   font-size: 100%;
   font-weight: bold;
   white-space: nowrap;
}

.giving-bank-details dd {
   margin: 0;
}

.giving-status-success { border-left: 4px solid #19734a; padding-left: 12px; }
.giving-status-pending { border-left: 4px solid #b27400; padding-left: 12px; }
.giving-status-failed  { border-left: 4px solid #8a1c1c; padding-left: 12px; }

.giving-actions {
   margin-top: 15px;
}

.giving-actions a {
   display: block;
   margin-bottom: 8px;
}

/*
 * Native <details>/<summary> disclosure, styled to match the site's
 * "[show details]" / "[hide details]" convention used on /events — done in
 * CSS only (no JS) since the giving area's CSP blocks all scripts.
 */
.giving-collapsible {
   margin-top: 2rem;
}

.giving-collapsible summary {
   cursor: pointer;
   list-style: none;
   color: #069;
   font-weight: bold;
   text-transform: lowercase;
   font-size: 120%;
}

.giving-collapsible summary::-webkit-details-marker,
.giving-collapsible summary::marker {
   display: none;
   content: '';
}

.giving-collapsible summary::after {
   content: ' [show details]';
   color: #069;
   font-weight: normal;
   text-transform: none;
   font-size: 80%;
}

.giving-collapsible[open] summary::after {
   content: ' [hide details]';
}

.giving-collapsible .giving-methods-grid {
   margin-top: 15px;
}

@media (max-width: 760px) {
   .giving-grid,
   .giving-methods-grid {
      grid-template-columns: 1fr;
   }
}