/* General Image Styling */
figure.image img {
    width: 100%;
}

/* Center Align Form and Limit Width */
#crm-main-content-wrapper {
    margin: 0 auto;
    max-width: 900px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Input Field Styling */
.crm-form-text, .crm-select2 {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

/* Input Focus Highlight */
.crm-form-text:focus, .crm-select2:focus {
    border-color: #0073e6;
    outline: none;
    box-shadow: 0 0 3px rgba(0, 115, 230, 0.5);
}

/* Improve Label Styling */
label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #333;
}

/* Highlight Required Fields */
.crm-marker {
    color: red;
    margin-left: 5px;
    font-size: 14px;
}

/* Section Styling */
fieldset {
    border: 1px solid #ddd;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 4px;
}

/* Section Headers */
legend {
    font-size: 18px;
    font-weight: bold;
    color: #444;
    padding: 0 10px;
}

/* Submit Button Styling */
.crm-form-submit {
    background-color: #0073e6;
    color: white;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    display: inline-block;
}

/* Submit Button Hover */
.crm-form-submit:hover {
    background-color: #005bb5;
}

/* Donation Buttons Styling */
.content .price-set-row {
    margin: 10px auto;
    max-width: 420px;
    background-color: transparent;
}

/* Default State: Light Gray Background */
.content .price-set-row label {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #aaa; /* Default light gray */
    color: white;
    border-radius: 5px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: none;
}

/* Button Hover State */
.content .price-set-row label:hover {
    background-color: #d47474; /* Slightly darker red on hover */
}

/* Hide Radio Inputs */
.content .price-set-row input[type="radio"] {
    display: none;
}

/* Selected State: Dark Red Background with White Text */
.content .price-set-row input[type="radio"]:checked + label {
    background-color: #8b1919; /* Darker red when selected */
    color: white; /* Ensure text is white for better visibility */
    border: 2px solid white;
}

/* Ensure spans inside labels are also white */
.content .price-set-row label span {
    color: inherit;
}

/* Donation Amount Label on New Line */
.contribution_amount-content label:first-of-type {
    display: block;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

/* Footer Text Styling */
#footer_text {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    #crm-main-content-wrapper {
        padding: 10px;
    }

    .content .price-set-row {
        max-width: 100%;
    }

    .crm-form-text, .crm-select2 {
        font-size: 14px;
    }

    .crm-form-submit {
        font-size: 14px;
        padding: 8px 15px;
    }
}

/* Intro Image Styling */
#intro_text figure img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 15px;
}


#crm-container.crm-public .price-set-row .highlight .crm-price-amount-label {
    color: white;
}

#crm-container.crm-public .price-set-row .highlight .crm-price-amount-amount {
    color: white;
}


/* Hide the original radio buttons */
.soft_credit_type_id-section .content input[type="radio"] {
    display: none;
}

/* Style the labels as buttons */
.soft_credit_type_id-section .content label {
    display: inline-block;
    padding: 10px 20px;
    background-color: #aaa; /* Default light gray */
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    margin-right: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover effect for the buttons */
.soft_credit_type_id-section .content label:hover {
    background-color: #888;
}

/* Styling for the selected button */
.soft_credit_type_id-section .content input[type="radio"]:checked + label {
    background-color: #8b1919; /* Dark red when selected */
    color: white;
    border: 2px solid white;
}

/* Style the 'Clear' link */
.soft_credit_type_id-section .content .crm-clear-link {
    color: #8b1919;
    font-weight: bold;
    text-decoration: none;
    padding: 10px;
    margin-left: 10px;
}

/* Hover effect for the 'Clear' link */
.soft_credit_type_id-section .content .crm-clear-link:hover {
    text-decoration: underline;
}

/* Description styling */
.soft_credit_type_id-section .content .description {
    margin-top: 10px;
    color: #666;
    font-size: 14px;
}


/* Hide the original radio buttons */
.payment_options-group .content input[type="radio"] {
    display: none;
}

/* Style the labels as buttons */
.payment_options-group .content label {
    display: inline-block;
    padding: 10px 20px;
    background-color: #aaa; /* Default light gray */
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    margin-right: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover effect for the buttons */
.payment_options-group .content label:hover {
    background-color: #888; /* Slightly darker gray on hover */
}

/* Style the selected button */
.payment_options-group .content input[type="radio"]:checked + label {
    background-color: #8b1919; /* Dark red when selected */
    color: white;
    border: 2px solid white;
}

/* Ensure spacing and alignment for the fieldset */
.payment_options-group {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

/* Style the legend */
.payment_options-group legend {
    font-size: 18px;
    font-weight: bold;
    color: #444;
    padding: 0 10px;
}

/* Clear floats for consistent layout */
.payment_options-group .clear {
    clear: both;
}

/* Add responsiveness for smaller screens */
@media (max-width: 768px) {
    .payment_options-group .content label {
        display: block;
        margin-bottom: 10px; /* Add spacing between buttons */
    }
}


/* Style the fieldset container */
.custom_post_profile-group fieldset {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

/* Style the legend */
.custom_post_profile-group fieldset legend {
    font-size: 18px;
    font-weight: bold;
    color: #444;
    padding: 0 10px;
}

/* Hide the original radio buttons */
.custom_post_profile-group .crm-multiple-checkbox-radio-options input[type="radio"] {
    display: none;
}

/* Style the labels as buttons */
.custom_post_profile-group .crm-multiple-checkbox-radio-options label {
    display: inline-block;
    width: 150px; /* Ensures enough width for the text */
    text-align: center; /* Centers the text */
    padding: 10px 20px;
    margin: 5px;
    background-color: #aaa; /* Default gray */
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-sizing: border-box;
}

/* Hover effect for radio button labels */
.custom_post_profile-group .crm-multiple-checkbox-radio-options label:hover {
    background-color: #888; /* Slightly darker gray */
}

/* Selected state */
.custom_post_profile-group .crm-multiple-checkbox-radio-options input[type="radio"]:checked + label {
    background-color: #8b1919; /* Dark red */
    color: white;
    border: 2px solid white; /* Add a white border for emphasis */
}

/* Define the custom property for button width */
.crm-container .crm-multiple-checkbox-radio-options {
    --checkbox-width: 10em; /* You can easily adjust this value */
}

/* Hide the original radio buttons */
.crm-container .crm-multiple-checkbox-radio-options input[type="radio"] {
    display: none;
}

/* Style the labels as buttons */
.crm-container .crm-multiple-checkbox-radio-options label {
    display: inline-block;
    width: var(--checkbox-width); /* Use the custom property for width */
    text-align: center;
    padding: 10px;
    margin: 5px;
    background-color: #aaa; /* Default gray */
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-sizing: border-box;
}

/* Hover effect for radio button labels */
.crm-container .crm-multiple-checkbox-radio-options label:hover {
    background-color: #888; /* Slightly darker gray */
}

/* Selected state */
.crm-container .crm-multiple-checkbox-radio-options input[type="radio"]:checked + label {
    background-color: #8b1919; /* Dark red */
    color: white;
    border: 2px solid white; /* Add a white border for emphasis */
}

/* Adjust width and alignment for small screens */
@media (max-width: 768px) {
    .crm-container .crm-multiple-checkbox-radio-options label {
        width: 100%; /* Full width on smaller screens */
    }
}


/* Adjust width and alignment for small screens */
@media (max-width: 768px) {
    .custom_post_profile-group .crm-multiple-checkbox-radio-options label {
        width: 100%; /* Full width on smaller screens */
    }
}

/* Style the input field for the donor recognition name */
.custom_post_profile-group .crm-form-text {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Highlight the input field on focus */
.custom_post_profile-group .crm-form-text:focus {
    border-color: #8b1919; /* Match the red theme */
    box-shadow: 0 0 3px rgba(139, 25, 25, 0.5);
    outline: none;
}

/* Description styling */
.custom_post_profile-group .description {
    margin: 10px 0;
    font-size: 14px;
    color: #666;
}

/* Label styling */
.custom_post_profile-group .label label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #333;
}

/* Clear float fix */
.custom_post_profile-group .clear {
    clear: both;
}

#crm-container.crm-public .price-set-row .crm-price-amount-amount {
    top: 5px;
}


/* Stack checkboxes vertically */
.crm-section .crm-multiple-checkbox-radio-options .crm-option-label-pair {
    display: block; /* Ensures vertical stacking */
    margin-bottom: 10px; /* Adds spacing between items */
}

/* Hide the original checkbox */
.crm-section .crm-multiple-checkbox-radio-options input[type="checkbox"] {
    display: none;
}

/* Style the labels as buttons */
.crm-section .crm-multiple-checkbox-radio-options label {
    display: block; /* Ensures the entire label is clickable */
    width: 100%; /* Full width for consistency */
    padding: 10px;
    background-color: #aaa; /* Default gray */
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover effect for the label */
.crm-section .crm-multiple-checkbox-radio-options label:hover {
    background-color: #888; /* Slightly darker gray */
}

/* Style for selected (checked) labels */
.crm-section .crm-multiple-checkbox-radio-options input[type="checkbox"]:checked + label {
    background-color: #8b1919; /* Dark red for selected state */
    color: white;
    border: 2px solid white; /* Optional: Add a border to emphasize selection */
}

/* Target only the specific section's checkbox label pairs for full width */
#editrow-custom_60 .crm-multiple-checkbox-radio-options .crm-option-label-pair {
    width: 100%; /* Ensure vertical stacking */
}


/* paste this into your theme's CSS injector or stylesheet 
   This targets the standard CiviCRM "Name and Address" profile 
*/

/* 1. Turn the main container into a Grid */
.crm-profile-name-name_and_address fieldset {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr); /* 12 column grid for flexibility */
    gap: 15px; /* Space between items */
    border: none !important; /* Optional: Clean up default borders */
}

/* 2. Reset CiviCRM default spacing/floats for these specific rows */
.crm-profile-name-name_and_address .crm-section {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column; /* Ensure label sits on top of input */
}

/* 3. Make inputs fill their new grid boxes */
.crm-profile-name-name_and_address input[type="text"],
.crm-profile-name-name_and_address select,
.crm-profile-name-name_and_address .select2-container {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 4. Hide the "clear" divs CiviCRM inserts (they break grids) */
.crm-profile-name-name_and_address .clear {
    display: none !important;
}

/* --- ROW LAYOUTS --- */

/* First & Last Name: Side by Side (6 columns each = 50%) */
#editrow-first_name,
#editrow-last_name {
    grid-column: span 6;
}

/* Street Address & City: Full Width (12 columns = 100%) */
#editrow-street_address-1,
#editrow-city-1 {
    grid-column: span 12;
}

/* State, Zip, Country: Beside Each Other (4 columns each = 33%) */
#editrow-state_province-1,
#editrow-postal_code-1,
#editrow-country-1 {
    grid-column: span 4;
}

/* --- MOBILE RESPONSIVENESS --- */
/* On small screens, stack everything back to 1 column */
@media (max-width: 768px) {
    #editrow-first_name,
    #editrow-last_name,
    #editrow-state_province-1,
    #editrow-postal_code-1,
    #editrow-country-1 {
        grid-column: span 12;
    }
}

/* =========================================
   CIVICRM CUSTOM LAYOUT - MAKEHAVEN
   ========================================= */

/* --- GENERAL RESET --- */
/* Force inputs and Select2 containers to respect the grid width */
.crm-profile-name-name_and_address input[type="text"],
.crm-profile-name-name_and_address select,
.crm-profile-name-name_and_address .select2-container,
.crm-profile-name-name_and_address .select2-drop,
.billing_name_address-section input[type="text"],
.billing_name_address-section select,
.billing_name_address-section .select2-container,
.billing_name_address-section .select2-drop {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important; /* Prevents flex items from overflowing */
}

/* Fix specific Select2 internal structure */
.select2-container .select2-choice {
    width: 100% !important;
    box-sizing: border-box !important;
    height: 34px; /* Optional: Consistent height */
    line-height: 34px;
}

/* Hide the "clear" divs CiviCRM inserts (they break grids) */
.crm-profile-name-name_and_address .clear,
.billing_name_address-section .clear {
    display: none !important;
}

/* Reset CiviCRM default margins/floats for rows inside our grids */
.crm-profile-name-name_and_address .crm-section,
.billing_name_address-section .crm-section {
    float: none !important;
    width: auto !important; /* changed from 100% to auto to respect grid */
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column; /* Ensure label sits on top of input */
    justify-content: space-between !important; /* Forces inputs to align at bottom even if labels vary in height */
    height: 100% !important; /* Ensures the section fills the grid cell height */
    border: none !important;
    min-width: 0; /* CRITICAL: Prevents grid overlap */
}

/* --- FIX LABEL & ASTERISK ALIGNMENT --- */
/* Force the label text and the red star to stay on the same line */
.crm-profile-name-name_and_address .crm-section .label,
.billing_name_address-section .crm-section .label {
    float: none !important;
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    display: flex !important; /* Use flexbox to align items */
    flex-direction: row !important; /* Ensure they sit side-by-side */
    align-items: center !important; /* Vertically center them */
    flex-wrap: nowrap !important; /* Prevent wrapping */
}

/* Target the asterisk specifically */
.crm-marker {
    display: inline-block !important;
    float: none !important;
    margin-left: 4px !important; /* Add slight space between text and star */
    position: static !important; /* Reset any absolute positioning */
}

/* Force internal content to fill the grid cell */
.crm-profile-name-name_and_address .crm-section .content,
.billing_name_address-section .crm-section .content {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}


/* =========================================
   SECTION 1: MAIN CONTACT (Name & Address)
   ========================================= */

/* Turn the fieldset into a 12-column Grid */
fieldset.crm-profile-name-name_and_address {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr); 
    gap: 20px; /* Increased gap slightly for breathing room */
    border: none !important; 
}

/* FIX: Reset the LEGEND (Title) so it doesn't squish the form */
fieldset.crm-profile-name-name_and_address legend {
    float: none !important;
    width: 100% !important;
    grid-column: 1 / -1; /* Make it span the full top row */
    margin-bottom: 15px !important;
    border-bottom: 1px solid #eee; /* Optional styling */
    padding-bottom: 5px;
}

/* Row 1: First & Last Name (Side by Side - 50% each) */
#editrow-first_name,
#editrow-last_name {
    grid-column: span 6;
}

/* Row 2: Street Address & Supplemental Address (Full Width) */
#editrow-street_address-1,
#editrow-supplemental_address_2-Primary {
    grid-column: span 12;
}

/* Row 3: City (Full Width) */
#editrow-city-1 {
    grid-column: span 12;
}

/* Row 4: State & Country (Side by Side - 50% each) */
#editrow-state_province-1,
#editrow-country-1 {
    grid-column: span 6;
}

/* Row 5: Zip Code (Full Width on new line) */
#editrow-postal_code-1 {
    grid-column: span 12;
}


/* =========================================
   SECTION 2: BILLING ADDRESS (Credit Card)
   ========================================= */

/* Turn the Billing Container into a 12-column Grid */
.billing_name_address-section {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr); 
    gap: 20px; 
    margin-top: 10px !important;
}

/* Row 1: First, Middle, Last Name (3 cols - 33% each) */
.billing_first_name-section,
.billing_middle_name-section,
.billing_last_name-section {
    grid-column: span 4;
}

/* Row 2: Street Address (Full Width) */
.billing_street_address-5-section {
    grid-column: span 12;
}

/* Row 3: City (Full Width) */
.billing_city-5-section {
    grid-column: span 12;
}

/* Row 4: Country & State (Side by Side - 50% each) */
.billing_country_id-5-section,
.billing_state_province_id-5-section {
    grid-column: span 6;
}

/* Row 5: Zip Code (Full Width on new line) */
.billing_postal_code-5-section {
    grid-column: span 12;
}


/* =========================================
   MOBILE RESPONSIVENESS
   ========================================= */
/* On phones (screens smaller than 768px), force everything to 1 column */
@media (max-width: 768px) {
    /* Reset Contact Info */
    #editrow-first_name,
    #editrow-last_name,
    #editrow-state_province-1,
    #editrow-postal_code-1,
    #editrow-country-1,
    #editrow-supplemental_address_2-Primary {
        grid-column: span 12 !important;
    }

    /* Reset Billing Info */
    .billing_first_name-section,
    .billing_middle_name-section,
    .billing_last_name-section,
    .billing_country_id-5-section,
    .billing_state_province_id-5-section,
    .billing_postal_code-5-section {
        grid-column: span 12 !important;
    }
}



/* Center the Other Amount Section */
.other_amount-section {
    text-align: center !important;
    float: none !important;
    margin: 10px auto !important;
}

/* Force the label to sit on top and center */
.other_amount-section .label {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
}

/* Remove margin/float from the input container */
.other_amount-section .content {
    float: none !important;
    margin-left: 0 !important;
    display: block !important;
    text-align: center !important;
}

/* Ensure the input box itself is centered */
.other_amount-section input {
    display: inline-block !important;
    float: none !important;
}