/* making spaces */
.crm-contribution-main-form-block {
 margin-top:0px;

}
.crm-contribution-main-form-block .price_set-section {
 margin-top:30px;
}
.crm-contribution-main-form-block #amount_sum_label {
 font-weight:bold;
 font-size: 14px!important;
}
/* lines up top of all new buttons */
#priceset.crm-section  {
    padding: 15px;
    border:1px solid #ccc;
}
.crm-contribution-main-form-block .is_recur-section {
 padding-left:15px;
 padding-right:15px;
 padding-bottom:20px;
 border:1px solid #ccc;
 margin-top:20px;
}
.crm-contribution-main-form-block .email-5-section {
 padding-top:15px;
 padding-left:15px;
 padding-right:15px;
 padding-bottom:20px;
 border:1px solid #ccc;
 margin-top:20px;
}
.crm-contribution-main-form-block #onBehalfOfOrg {
 margin-top:30px;
}
.crm-contribution-main-form-block .crm-credit_card_type-icons {
    margin-top:20px;
    margin-bottom:20px;
}
.crm-contribution-main-form-block .crm-credit_card_type-icon-visa,
.crm-contribution-main-form-block .crm-credit_card_type-icon-mastercard {
 background-color: #0274be;
 color: white;
 padding: 14px 25px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 cursor: pointer;
 border-radius: 4px;
 border: 1px solid #ccc;
 text-decoration:none;
 margin-left:20px;
}
.crm-contribution-main-form-block .crm-credit_card_type-icon-visa {
 margin-left:0px;
}
/* Add hover effect for better user experience */
.crm-contribution-main-form-block .crm-credit_card_type-icon-visa:hover,
.crm-contribution-main-form-block .crm-credit_card_type-icon-mastercard:hover {
 background-color: #333333;
}
.crm-contribution-main-form-block .credit_card_info-group {
 padding-top:0px;
 margin-top:30px;
}
.crm-contribution-main-form-block .billing_name_address-group {
 padding-top:0px;
 margin-top:30px;
}
.crm-contribution-main-form-block .crm-profile-name-Donation_Bottom {
 padding-top:0px;
 margin-top:30px;
 margin-top:20px;
}

/* prevents various sections from overlapping or wrapping weirdly if the description includes
images or divs, not a bad candidate for basic Civi css */
#crm-container.crm-public .crm-section, .crm-section {
 display: flow-root;
}
/* Styling the buttons */
.price-set-option-content input[type="radio"],
.price-set-option-content input[type="radio"] + label,
.price-set-option-content input[type="checkbox"],
.price-set-option-content input[type="checkbox"] + label {
 float:left;
 width:180px;
 margin:4px;
 background-color:#e9e1ef;
 border-radius:4px;
 border:1px solid #D0D0D0;
 overflow:auto;
 padding:23px 6px;
}
/* Styling the labels
 * This section is really really weird.
 * I am really not sure why CIVICRM wants BOTH, it
 * even looks very bad when one selects radio buttons.
 * So I am using the LABELS as the amounts and hide
 * (below) the ACTUAL amounts!
 */
.price-set-option-content label,
.price-set-option-content label span,
.price-set-option-content input[type="checkbox"] + label {
 text-align:center;
 font-size: 20px;
 display:block;
}
/* Alternate text styles for the amounts,
 * if both labels and amounts are shown for a field
 * (don't want everything to be large)
 * I am sorry, CIVICRM, but this is really really stupid.
 * whacking this.
 */
.price-set-option-content input[type="radio"] + label .crm-price-amount-amount {
 font-size: 0px;
 display:none;
}
/* make Total Amount same size as button text */
#crm-container.crm-public .calc-value {
 font-size: 32px;
}
#crm-container.crm-public .crm-title {
    display:none;
}
/* puts the normal input controls out of sight */
.price-set-option-content input[type="radio"],
.price-set-option-content input[type="checkbox"],
span.crm-price-amount-label-separator {
 position:fixed;
 top:-50px;
}

/* Style for hovered item */
.price-set-option-content input[type="radio"]:hover + label,
.price-set-option-content input[type="radio"]:hover + label .crm-price-amount-amount,
.price-set-option-content input[type="checkbox"]:hover + label {
 background-color:#eee6f4;
}

/* Style for selected item */
.price-set-option-content input[type="radio"]:checked + label,
.price-set-option-content input[type="radio"]:checked + label .crm-price-amount-amount,
.price-set-option-content input[type="checkbox"]:checked + label {
 background: #0274be;;
 color:#fff !important;
}

/* ── ThankYou page ─────────────────────────────────────────────────────── */

/* CiviCRM emits a stray "x" text node directly inside the form, before our
 * shell div.  font-size/line-height:0 on the form makes that invisible;
 * the shell resets to normal values for all real content. */
form.CRM_Contribute_Form_Contribution_ThankYou {
 font-size: 0;
 line-height: 0;
}

.cib-donate-thankyou-shell {
 font-size: 1rem;
 line-height: 1.5;
}

/* Card */
.cib-donate-thankyou-card {
 background: #fff;
 border: 1px solid #e5e7eb;
 border-radius: 12px;
 overflow: hidden;
 margin-bottom: 2rem;
 box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* Hero */
.cib-donate-thankyou-hero {
 background: linear-gradient(135deg, #0274be 0%, #0d5fa0 100%);
 color: #fff;
 text-align: center;
 padding: 2.5rem 2rem 2rem;
}

.cib-donate-thankyou-icon {
 display: block;
 font-size: 3rem;
 line-height: 1;
 margin-bottom: 0.75rem;
 color: #fff;
}

.cib-donate-thankyou-title {
 font-size: 2rem !important;
 font-weight: 700 !important;
 color: #fff !important;
 margin: 0 0 0.4rem !important;
}

.cib-donate-thankyou-sub {
 font-size: 1.05rem;
 color: rgba(255,255,255,.85);
 margin: 0;
}

/* Content area inside the card */
.cib-donate-thankyou-card .crm-contribution-thankyou-form-block {
 padding: 1.5rem 2rem 0.5rem;
}

/* "Your transaction has been processed…" confirmation banner */
.cib-donate-thankyou-card .help {
 background: #f0fdf4;
 border-left: 4px solid #16a34a;
 border-radius: 6px;
 padding: 0.75rem 1rem;
 color: #14532d;
 margin-bottom: 1.5rem;
 font-size: 0.95rem;
 line-height: 1.6;
}

/* Section heading bars (Contribution Information, Billing Name…, etc.) */
.cib-donate-thankyou-card .header-dark {
 background: #f3f4f6;
 border: none;
 border-radius: 6px;
 color: #374151;
 font-size: 0.78rem;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 padding: 0.45rem 0.75rem;
 margin-bottom: 0.75rem;
}

/* Row groups */
.cib-donate-thankyou-card .crm-group {
 margin-bottom: 1.5rem;
}

/* Amount / date / trxn rows */
.cib-donate-thankyou-card .amount_display-section .content {
 font-size: 0.95rem;
 line-height: 2;
}

/* Profile field labels (First Name, Email, etc.) */
.cib-donate-thankyou-card .label,
.cib-donate-thankyou-card .label label,
.cib-donate-thankyou-card .label a {
 font-size: 0.78rem !important;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 color: #6b7280 !important;
 font-weight: 600 !important;
 text-decoration: none !important;
}

/* Billing name / address text */
.cib-donate-thankyou-card .billing_name-section .content,
.cib-donate-thankyou-card .billing_address-section .content,
.cib-donate-thankyou-card .credit_card_details-section .content {
 font-size: 0.95rem;
 line-height: 1.8;
}

/* Action buttons row */
.cib-donate-thankyou-actions {
 display: flex;
 gap: 0.75rem;
 justify-content: center;
 padding: 1rem 2rem 1.5rem;
 flex-wrap: wrap;
 border-top: 1px solid #f3f4f6;
 background: #fafafa;
}

.cib-donate-thankyou-actions .button span {
 display: inline-block;
}

.cib-donate-thankyou-actions .cib-donate-thankyou-secondary {
 background: #f3f4f6 !important;
 border-color: #d1d5db !important;
 color: #374151 !important;
}

.cib-donate-thankyou-actions .cib-donate-thankyou-secondary:hover {
 background: #e5e7eb !important;
}

/* ── Donate page: constrain layout when CiviCRM's basepage handler takes over.
 * Mirrors Elementor's e-con-boxed > e-con-inner pattern:
 *   outer = full width, 10px side padding
 *   inner = max-width 1140px, centered
 * box-sizing:border-box → 1160px total = 1140px content + 10px each side. */
.cib-donate-page-layout {
 max-width: min(100%, 1160px);
 margin-left: auto;
 margin-right: auto;
 padding-left: 10px;
 padding-right: 10px;
 box-sizing: border-box;
}

/* On the validation-error / in-progress page (has intro) the layout needs top
 * padding to match Elementor's spacer (50px) + two container padding-tops (10px
 * each) = 80px.  The ThankYou page has no intro, so no top padding needed. */
.cib-donate-page-layout:has(.cib-donate-page-intro) {
 padding-top: 80px;
}