.checkout-page-header {
        text-align: center;
        margin-bottom: 30px;
      }
      .checkout-page-header h1 {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 10px;
        color: #F0BA47; /* Accent color for headings */
      }
      .checkout-page-header p {
        font-size: 1.1rem;
        color: #bbb;
      }

      /* Layout for checkout sections */
      .checkout-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: .62em;
        align-items: start; /* Align items to the start of their cells */
      }
      @media (min-width: 768px) {
        .checkout-grid {
          grid-template-columns: 2fr 1fr; /* Two columns: forms on left, summary on right */
        }
      }

      /* Section styling */
      .checkout-section {
        background-color: #222; /* Slightly lighter dark for sections */
        padding: 25px;
        border-radius: 10px;
        margin-bottom: 30px;
        border: 1px solid #555;
      }
      .checkout-section h2 {
                font-size: 1.8rem;
    font-weight: 100;
    margin-bottom: 20px;
    color: #f4f4f4;
    font-family: 'Schabo Condensed';
    letter-spacing: normal;
    text-transform: uppercase;
      }

      /* Sticky Right Section */
      @media (min-width: 768px) {
        .checkout-grid > div:last-child > .checkout-section { /* Target the summary section specifically */
          position: sticky;
          top: 20px; /* Adjust this value as needed for desired spacing from the top */
          align-self: start; /* Helps with sticky behavior in grid/flex containers */
          z-index: 10; /* Ensure it stays above other content if necessary */
          /* Important: If sticky still doesn't work, check parent elements in your external CSS
             for 'overflow: hidden', 'overflow: auto', or 'transform' properties. */
        }
      }


      /* Form Field Styling */
      .form-group {
        margin-bottom: 15px;
      }
      .form-group label {
               display: block;
    margin-bottom: 8px;
    font-weight: 100;
    color: #f4f4f4;
    font-size: 14px;
    font-family: monospace;
      }
      .form-group input,
      .form-group select {
        width: 100%;
        padding: 15px;
        border: 1px solid #555;
        border-radius: 6px;
        background-color: #333;
        color: white;
        font-size: .75em;
      }
      .form-group input::placeholder {
        color: #888;
      }
      .input-half {
        display: flex;
        gap: 15px;
      }
      .input-half > div {
        flex: 1;
      }

      /* Order Summary Styles */
      .order-summary-list {
        list-style: none;
        padding: 0;
        margin: 0;
        max-height: 300px;
        overflow-y: auto;
        border-top: 1px solid #444;
        padding-top: 15px;
      }
      .order-summary-item {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 10px 0;
        border-bottom: 1px solid #444;
        color: white;
      }
      .order-summary-item:last-child {
        border-bottom: none;
      }
      .order-summary-item-image {
        width: 60px; /* Smaller images for summary */
        height: 60px;
        object-fit: cover;
        border-radius: 6px;
      }
      .order-summary-item-info {
        flex-grow: 1;
      }
      .order-summary-item-name {
                font-weight: 100;
    font-size: 1.25em;
    font-family: 'Schabo Condensed';
    color: #f4f4f4;
    text-transform: uppercase;
      }
      .order-summary-item-qty-price {
                color: #bbb;
    font-family: 'Schabo Condensed';
    text-transform: uppercase;
      }
      .text-right {
          font-size: 1.25em;
                  color: #f4f4f4;
    font-family: 'Schabo Condensed';
    text-transform: uppercase;
      }

      .order-total-summary {
        border-top: 1px solid #444;
        padding-top: 20px;
        margin-top: 20px;
      }
      .total-line-item {
        display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-family: 'Schabo Condensed';
    font-weight: 100;
    letter-spacing: .5px;
    color: #f4f4f4;
    text-transform: uppercase;
      }
      .total-value {
        font-weight: 100;
        color: #f4f4f4;
      }
      .total-value.discounted {
        color: green;
      }
      .strike-through {
        text-decoration: line-through;
        color: gray;
        font-size: 0.9em;
      }

      .place-order-button {
         background-color: #28ace4;
    color: #f4f4f4;
    padding: 15px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 100;
    width: 100%;
    text-align: center;
    display: block;
    text-decoration: none;
    transition: background-color 0.3s ease;
    margin-top: 20px;
    font-size: 1.2em;
    font-family: 'Schabo Condensed';
    letter-spacing: .5px;
    text-transform: uppercase;
      }

      .back-to-cart-link {
        background-color: #28ace4;
    color: #f4f4f4;
    padding: 15px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 100;
    width: 100%;
    text-align: center;
    display: block;
    text-decoration: none;
    transition: background-color 0.3s ease;
    margin-top: 20px;
    font-size: 1.2em;
    font-family: 'Schabo Condensed';
    letter-spacing: .5px;
    text-transform: uppercase;
      }

      #checkout-message {
        background-color: #333;
        color: white;
        padding: 15px;
        border-radius: 8px;
        margin-top: 20px;
        text-align: center;
        display: none; /* Hidden by default */
      }
      .items-in-order-count {
        font-size: 1.1rem;
        color: #bbb;
        margin-bottom: 20px;
        text-align: center;
      }
      
    .checkout-bg {
        margin:.62em;
            padding: 30px;
    background-color: #111;
    border-radius: 4px;
    }
    
    .bills {
        
    }
    
    /* Checkbox group for Terms & Conditions and Billing Address */
.checkbox-group {
    display: flex;
    align-items: center;
    justify-content: space-between; /* NEW: Pushes label to left, checkbox to right */
    margin-bottom: 15px; /* Standard form-group margin */
}

.checkbox-group input[type="checkbox"] {
    /* Reverted custom styling for checkmark to allow native browser checkmark */
    width: 18px; /* Slightly adjusted size for native checkbox */
    height: 18px; /* Slightly adjusted size for native checkbox */
    border: 2px solid #F0BA47; /* Border color for checkbox */
    border-radius: 4px;
    background-color: #333; /* Background matches inputs */
    cursor: pointer;
    flex-shrink: 0; /* Prevent it from shrinking */
    margin-left: 10px; /* Space between label and checkbox */
    /* Removed: appearance: none; -webkit-appearance: none; -moz-appearance: none; */
    /* Removed: position: relative; and all ::before styles */
}

.checkbox-group input[type="checkbox"]:checked {
    background-color: #F0BA47; /* Fill with accent color when checked */
    border-color: #F0BA47;
}

.checkbox-group label {
    flex-grow: 1;
    margin-bottom: 0;
    color: #f4f4f4;
    font-size: .55em;
    font-family: monospace;
    font-weight: 100;
    letter-spacing: normal;
    text-transform: uppercase;
}

/* Billing Header with Checkbox */
.billing-header-row { /* Flex container for heading and checkbox */
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* Adjust as needed */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.billing-header-row h2 { /* Ensure heading styles apply within new flex container */
    margin-bottom: 0; /* Remove default bottom margin as flex handles spacing */
    flex: 1; /* Makes h2 take up 50% of the space on larger screens */
}

.billing-header-row.no-margin-bottom {
    margin-bottom: 0;
}

/* NEW: Responsive adjustments for billing header row on small screens */
@media (max-width: 767px) { /* Applies to screens smaller than 768px (common mobile breakpoint) */
    .billing-header-row {
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start; /* Align stacked items to the left */
    }
    .billing-header-row h2 {
        flex: none; /* Remove flex property so it doesn't try to take up 50% */
        width: 100%; /* Make heading take full width */
        margin-bottom: 10px; /* Add some space below heading when stacked */
    }
    .billing-header-row .checkbox-group {
        flex: none; /* Remove flex property */
        justify-content: flex-start; /* Align checkbox to the left when stacked */
        margin-bottom: 0; /* No extra margin */
    }
    
    .checkout-bg {
        margin:10px;
            padding: .62em;
    background-color: #111;
    border-radius: 4px;
    margin-top:0px;
    }
    
    .delivery-date-buttons {
    display: grid;
    gap: 10px;
    margin-top: 5px;
}
    .checkout-section {
    background-color: #222;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid #555;
}
    .checkout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
}
}
.fa, .fas {
    font-weight: 900;
    color: #F0BA47;
}
.billing-header-row .checkbox-group { /* Specific styling for checkbox group within billing header */
    flex: 1; /* Makes checkbox group take up 50% of the space */
    justify-content: flex-end; /* Pushes checkbox to the far right within its 50% space */
    margin-bottom: 0; /* Ensures no extra margin from form-group */
}
.bills {
    text-align: end;
}

#billingAddressFields {
    margin-top:20px;
}

/* Styles for new delivery date buttons */
.delivery-date-buttons {
    display: flex; /* Use flex for two side-by-side buttons */
    gap: 10px; /* Consistent gap between buttons */
    margin-top: 5px; /* Similar to time slots for spacing from label */
}

.delivery-date-buttons button {
    /* Inherit or re-apply styles from .time-slot-buttons button for consistency */
    padding: 10px 15px;
    border: 2px solid #555;
    background: #333;
    color: #f4f4f4;
    cursor: pointer;
    border-radius: 6px;
    font-family: 'Tanker';
    font-weight: 100;
    font-size: 1em;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    flex: 1; /* Make them take equal space within their container */
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.delivery-date-buttons button.selected {
    border-color: #F0BA47;
    background: #F0BA47;
    color: #222;
}

.delivery-date-buttons button:hover:not(.selected) {
    background-color: #444;
    border-color: #F0BA47;
}




.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #555;
    border-radius: 6px;
    background-color: #333;
    color: white;
    font-size: 1em;
}
.form-group textarea::placeholder {
    color: #888;
}
    /* Container for time slot buttons - using CSS Grid for 1fr layout */
.time-slot-buttons {
    display: grid; /* Changed from flex to grid */
    grid-template-columns: repeat(4, 1fr); /* 4 equal columns on larger screens */
    gap: 10px; /* Space between grid items (both rows and columns) */
    margin-top: 5px; /* Adjust spacing from label, as you had before */
    /* Removed flex-wrap as grid handles wrapping automatically */
}

/* Individual Time Slot Buttons */
.time-slot-buttons button {
    padding: 10px 15px; /* Keeping the slightly reduced padding for better fit */
    border: 2px solid #555; /* Existing border style */
    background: #333; /* Existing background style */
    color: #f4f4f4; /* Existing text color */
    cursor: pointer;
    border-radius: 6px; /* Existing border-radius */
    font-family: 'Tanker'; /* Existing font family */
    font-weight: 100; /* Existing font weight */
    font-size: 1em; /* Existing font size */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;

    /* Removed 'margin: 5px;' because 'gap' on the grid container handles spacing */
    box-sizing: border-box; /* Crucial for calc() and grid sizing */
    text-align: center; /* Ensure text is centered within the button */
    white-space: nowrap; /* Prevent text from wrapping inside the button if space is tight */
    overflow: hidden; /* Hide overflow if text is too long */
    text-overflow: ellipsis; /* Add ellipsis for overflowing text */
}

/* Selected state for buttons */
.time-slot-buttons button.selected {
    border-color: #F0BA47; /* Your accent color for selected state */
    background: #F0BA47; /* Your accent color for selected state */
    color: #222; /* Text color for selected state - contrasts well with accent */
}

/* Hover state for non-selected buttons */
.time-slot-buttons button:hover:not(.selected) {
    background-color: #444;
    border-color: #F0BA47;
}

/* Responsive adjustments for fewer columns on smaller screens */
@media (max-width: 768px) { /* Example: 3 buttons per row on tablets/smaller desktops */
    .time-slot-buttons {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .input-half {
    display: contents;
    gap: 15px;
}

.total-line-item {
    
    font-size: 1.5em;
}
}

@media (max-width: 480px) { /* Example: 2 buttons per row on mobile phones */
    .time-slot-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
}