.brand-blue {
  color: #4147FF;
}

.brand-blue-dark {
	color: #292E90;
}

/* 2. Primary Headings - Crisp Light Grey */
.woocommerce-checkout h2, 
.woocommerce-checkout h3, 
#order_review_heading {
    color: #e5e5e5 !important;
  	font-size: 20px !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #333; /* Subtle divider */
    padding-bottom: 10px;
}

/* 3. Form Labels and General Text - Light and Readable */
.woocommerce-checkout label,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .checkout-group h3 {
    color: #e5e5e5 !important;
}

/* 4. Secondary Text (Descriptions/Placeholders) - Dimmer Light Variation */
.woocommerce-checkout p, 
.woocommerce-checkout span, 
.woocommerce-checkout .shipping-calculator-button,
.woocommerce-info {
    color: #b0b0b0 !important; /* Dimmer variation of light */
}

/* 5. Inputs - Dark background with Light text so they don't "pop" too much */
.woocommerce-checkout input.input-text, 
.woocommerce-checkout select, 
.woocommerce-checkout textarea {
    background-color: #1a1a1a !important; /* Dark input boxes */
    border: 1px solid #333 !important;
    color: #e5e5e5 !important;
    border-radius: 4px;
}

/* 6. Fix Order Summary Table - Remove the white background */
#order_review, 
.woocommerce-checkout-review-order-table {
    background-color: transparent !important;
    border: 1px solid #333 !important;
    color: #e5e5e5 !important;
}

/* 7. Table Cells & Product Names */
.woocommerce-checkout-review-order-table th, 
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table .product-name,
.woocommerce-checkout-review-order-table .product-total {
    color: #e5e5e5 !important;
    border-top: 1px solid #333 !important;
}

/* 8. Fix Product Title Overlap for Dark Mode */
.woocommerce-checkout-review-order-table .product-name {
    display: table-cell !important; /* Standard table behavior usually works better unless it's mobile */
    word-break: break-word !important;
    line-height: 1.6 !important;
}


/* Individual Spell Requirements Feature CSS */

/* --- 1. CLEANUP: HIDE GHOST FIELDS (Classic & Modern) --- */
.variation-NameofRecipient,
.variation-BirthdateofRecipientOptional,
.variation-YourPetition,
.wc-block-components-product-details__name-of-recipient,
.wc-block-components-product-details__birthdate-of-recipient-optional,
.wc-block-components-product-details__your-petition,
.wc-block-components-product-details-item__name-of-recipient,
.wc-block-components-product-details-item__birthdate-of-recipient-optional,
.wc-block-components-product-details-item__your-petition {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}

/* --- 2. DISPLAY: STYLING THE CLEAN DATA IN CART/CHECKOUT --- */
dl.variation {
    margin: 15px 0;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 5px;
}

dl.variation dt {
    display: block;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 3px;
    font-size: 0.85em;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

dl.variation dt:first-child { margin-top: 0; }

dl.variation dd {
    display: block;
    margin: 0 0 10px 0;
    font-size: 0.95em;
    color: #666;
    padding-left: 10px;
    border-left: 3px solid #ddd;
}

dl.variation dd p { margin: 0; }

/* --- 3. LAYOUT: ALIGNING THE FORM FIELDS ON PRODUCT PAGE --- */

/* Reset Row & Column Padding to fix the "Crooked" look */
.wcpa_form_outer .wcpa_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
}

.wcpa_form_outer .wcpa_field_wrap {
    padding-left: 0 !important;   /* Fixes the left-side sticking out */
    padding-right: 0 !important;  /* Fixes the right-side sticking out */
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* DESKTOP VIEW: Keep Name & Birthdate side-by-side */
@media (min-width: 769px) {
    .wcpa_form_outer .wcpa-col-3 {
        width: calc(50% - 10px) !important; /* Half width minus a small gap */
        float: left !important;
        display: inline-block !important;
    }
    
    /* Add a gap only to the first column so the second stays aligned right */
    .wcpa_form_outer .wcpa-col-3:first-child {
        margin-right: 20px !important;
    }
    
    .wcpa_row::after {
        content: "";
        clear: both;
        display: table;
    }
}

/* MOBILE VIEW: Force everything to stay perfectly flush and 100% */
@media (max-width: 768px) {
    .wcpa_form_outer .wcpa-col-3,
    .wcpa_form_outer .wcpa-col-6,
    .wcpa_form_outer .wcpa_field_wrap {
        width: 100% !important;
        display: block !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Label and Input Polish */
.wcpa_field_label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    font-size: 14px !important;
    text-align: left !important;
}

.wcpa_form_outer .wcpa_field {
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
    padding: 12px !important; /* Slightly more padding for a premium feel */
    border: 1px solid #ccc !important;
}

/* Fix for the Petition textarea specifically */
.wcpa_type_textarea .wcpa_field {
    min-height: 100px !important;
}

/* Individual Spell Requirements Feature CSS END */

/* --- FIX FOR NEURON SIDE CART OVERFLOW --- */

/* 1. Limit the height of the product list and make it scrollable */
.m-neuron-menu-cart__sidebar .woocommerce-mini-cart.cart_list {
    max-height: 75vh !important; /* Uses 55% of screen height - perfect for mobile */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding-right: 10px !important;
    margin-bottom: 0 !important;
}

/* 2. Style the scrollbar for a cleaner look */
.m-neuron-menu-cart__sidebar .woocommerce-mini-cart.cart_list::-webkit-scrollbar {
    width: 4px;
}
.m-neuron-menu-cart__sidebar .woocommerce-mini-cart.cart_list::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 10px;
}

/* 3. Make the Total and Buttons "Sticky" at the bottom */
.m-neuron-menu-cart__sidebar .woocommerce-mini-cart__total,
.m-neuron-menu-cart__sidebar .woocommerce-mini-cart__buttons {
    position: sticky !important;
    bottom: 0;
    background: #ffffff !important; /* Match your cart background */
    z-index: 99;
    margin: 0 !important;
    padding: 15px 20px !important;
    border-top: 1px solid #eee;
}

/* 4. Extra safety for the buttons container specifically */
.m-neuron-menu-cart__sidebar .woocommerce-mini-cart__buttons {
    bottom: 0 !important;
    padding-bottom: 30px !important; /* Extra space for mobile thumb reach */
}