/* * --- CUSTOM CSS FOR THE ORDER BUMP ---
 * Apply the class 'order-bump' to the SureCart Order Bump block 
 * in the block settings under 'Advanced' > 'Additional CSS Class(es)'.
 */
.order-bump {
    /* 1. Customize the Border, Background, and Shadow */
    border: 3px dashed #228B22 !important; /* Deep Green dashed border */
    border-radius: 10px !important;       /* Rounded corners */
    background-color: #e6fae6 !important;  /* Light green background */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Stronger shadow */
    padding: 20px !important;
    transition: all 0.3s ease;
}

/* 2. Style the Main Headline/Description (Target the SureCart header if possible) */
.order-bump .bump-header {
    font-size: 1.5em;        /* Larger font size */
    font-weight: bold;       
    color: #364958;          /* Dark blue color */
    margin-bottom: 10px;
}

/* 3. Style the Call to Action Text (The checkbox label) */
.order-bump .bump-label {
    font-size: 1.25em;         /* Significantly larger font */
    color: #008000;            /* Bright green text */
    font-weight: 700;          /* Extra bold */
    display: block;            
    padding-left: 10px;        
}

/* 4. Style the inner product name/details separator */
.order-bump .product-details {
    padding: 15px;
    border-top: 1px solid #c8e0c8; /* Lighter separator line (adjusted for green theme) */
    margin-top: 15px;
}