.checkout-progress--step .mb-2{
    display: none !important;
}

.commerce-checkout-flow{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* Styling for the main checkout content area (shipping information) */
.layout-region-checkout-main {
    background-color: #ffffff; /* White background for the form section */
     border-left: 1px solid #acb5bf;

}


/* Styling for the main fieldset that wraps the shipping information */
.layout-region-checkout-main, .layout-region-checkout-secondary {
    padding: 25px 30px; /* Internal padding for content within the fieldset */
    margin-top: 0 !important; /* Adjust top margin if needed, Bootstrap's my-3 adds it already */
    margin-bottom: 30px !important; /* Space below the fieldset */
    background-color: white !important; /* Very light background for the fieldset */
}
.bg-light{
    background-color: white !important;
}

/* Styling for the legend (title) of the fieldset */
.fieldset-legend {
    font-size: 1.6rem; /* Larger font size for the section title */
    font-weight: 600; /* Semi-bold text */
    color: #333; /* Darker text color */
    border-bottom: 2px solid #007bff; /* A prominent blue underline */
    padding-bottom: 12px; /* Space between text and underline */
    margin-bottom: 25px; /* Space below the legend */
    display: block; /* Ensures the border-bottom spans the full width */
    line-height: 1.2; /* Adjust line height for better appearance */
}

/* Styling for form labels */
.form-label {
    font-weight: 500; /* Medium font weight for labels */
    color: #495057; /* Slightly darker gray for better readability */
    margin-bottom: 8px; /* Space below each label */
    display: block; /* Ensures labels take full width and stack */
}

/* Styling for all text input fields and textareas */
.form-control {
    border-radius: 5px; /* Slightly more rounded corners for inputs */
    border: 1px solid #ced4da; /* Standard border color */
    padding: 10px 15px; /* Ample padding inside the input fields */
    font-size: 1rem; /* Standard font size */
    color: #495057; /* Text color inside inputs */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth transition for focus */
}

.form-control:focus {
    border-color: #80bdff; /* Blue border on focus */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Light blue glow on focus */
    outline: none; /* Remove default outline */
}

/* Styling for the checkbox (Save to address book) */
.form-check {
    margin-top: 20px; /* Space above the checkbox */
    margin-bottom: 20px; /* Space below the checkbox */
    display: flex; /* Use flexbox for better alignment of checkbox and label */
    align-items: center; /* Vertically align checkbox and text */
}

.form-check-input {
    margin-right: 10px; /* Space between checkbox and its label */
    width: 1.2em; /* Slightly larger checkbox */
    height: 1.2em; /* Slightly larger checkbox */
}

.form-check-label {
    font-weight: normal; /* Normal font weight for checkbox labels */
    color: #343a40; /* Standard text color */
    cursor: pointer; /* Indicate it's clickable */
}

/* Styling for the "Recalculate shipping" button */
.btn-outline-success {
    display: none !important;
}



/* Styling for the Shipping Method fieldset */
fieldset[data-drupal-selector*="shipping-method"] {
    border: 1px solid #e0e0e0; /* Consistent border style */
    border-radius: 8px; /* Consistent rounded corners */
    padding: 20px 25px; /* Internal padding */
    margin-top: 30px; /* Space above this fieldset */
    background-color: #fdfdfd; /* Light background */
}

fieldset[data-drupal-selector*="shipping-method"] .fieldset-legend {
    font-size: 1.4rem; /* Slightly smaller legend for nested fieldset */
    border-bottom: 1px solid #dee2e6; /* Lighter border for nested legend */
    margin-bottom: 15px; /* Less space below */
    padding-bottom: 10px;
}

/* Styling for shipping method radio buttons */
.form-radios .form-check {
    margin-bottom: 15px; /* Space between radio options */
    align-items: flex-start; /* Align radio button to the top of the text */
}

.form-radios .form-check-input {
    margin-top: 0.3em; /* Align with text baseline */
}

.form-radios .form-check-label {
    font-size: 1.05rem; /* Slightly larger font for clarity */
    color: #343a40;
    font-weight: 500; /* Make the shipping cost label stand out */
}

.address-container-inline{
    display: flex !important;
    flex-direction: column;
    align-items: center;
}
/* Responsive adjustments */
@media (max-width: 991.98px) {
    .layout-region-checkout-main {
        padding: 20px; /* Reduce padding on smaller screens */
    }

    fieldset.checkout-pane-shipping-information {
        padding: 20px; /* Reduce fieldset padding */
    }

    .fieldset-legend {
        font-size: 1.4rem; /* Adjust legend font size */
        margin-bottom: 20px;
    }

    .address-container-inline {
        flex-direction: column; /* Stack address fields vertically on smaller screens */
        gap: 0; /* Remove gap when stacked */
    }

    .address-container-inline .js-form-item {
        flex: 1 1 100%; /* Each item takes full width */
        margin-bottom: 15px; /* Add vertical spacing between stacked items */
    }
}

@media (max-width: 767.98px) {
    .layout-region-checkout-main {
        padding: 15px;
    }

    fieldset.checkout-pane-shipping-information {
        padding: 15px;
    }

    .fieldset-legend {
        font-size: 1.3rem;
    }
}


/* Apply text-align: center to the parent container */
/* This targets the specific 'checkout-pane' div that contains both the address fields and the checkbox. */
/* text-align: center; only affects inline-level and inline-block children, */
/* so the block-level address wrapper should remain left-aligned, while the checkbox will be centered. */
.fieldset-wrapper > .checkout-pane {
    text-align: center;
}

/* Keep the checkbox container itself as inline-block as you specified */
.form-item-shipping-information-shipping-profile-copy-to-address-book {
    display: inline-block;
    /* You might want to add some vertical margin for better spacing */
    margin-top: 15px;
    margin-bottom: 15px;
}

.form-item-shipping-information-shipping-profile-address-0-address-organization {
    display: none !important;
}

input [data-drupal-selector="edit-shipping-information-recalculate-shipping"],
div [data-drupal-selector="edit-shipping-information-shipments"]   {
  display: none !important;
}




/* Order Summary Heading */
.layout-region-checkout-secondary h5.mb-3 {
    font-size: 1.7rem; /* Slightly larger and more prominent heading */
    font-weight: 600; /* Semi-bold */
    color: #333; /* Darker text */
    margin-bottom: 20px !important; /* Override Bootstrap's default margin if necessary */
    padding-bottom: 15px; /* Space below the text before the border */
    border-bottom: 1px solid #e9ecef; /* A subtle separator line */
}

/* Order Summary Table (Product List) */
.view-commerce-checkout-order-summary table {
    width: 100%;
    border-collapse: collapse; /* Remove space between table cells */
    margin-bottom: 20px; /* Space below the table */
}

.view-commerce-checkout-order-summary table tbody tr {
    border-bottom: 1px dashed #e0e0e0; /* Light dashed line between items */
}

.view-commerce-checkout-order-summary table tbody tr:last-child {
    border-bottom: none; /* No border after the last item */
}

.view-commerce-checkout-order-summary table td {
    padding: 12px 0; /* Vertical padding for table cells */
    vertical-align: top; /* Align content to the top */
    font-size: 0.95rem; /* Slightly smaller font for item details */
    color: #555; /* Medium gray for text */
}

.views-field-quantity {
    font-weight: 600; /* Bold quantity */
    width: 40px; /* Fixed width for quantity column */
    white-space: nowrap; /* Prevent wrapping */
    padding-right: 10px; /* Space after quantity */
}

.views-field-title {
    font-weight: 500; /* Medium weight for product title */
    color: #343a40; /* Darker color for title */
    padding-right: 10px; /* Space after title */
}

.views-field-purchased-entity .price {
    font-weight: 600;
    color: #007bff; /* Primary blue for regular prices */
    font-size: 1rem;
    white-space: nowrap;
}

.promotion-base-price {
    color: #6c757d; /* Gray for strikethrough price */
    text-decoration: line-through; /* Strikethrough effect */
    font-size: 0.9em; /* Smaller font for original price */
    margin-right: 5px;
}

.promotion-discount-price {
    color: #dc3545; /* Red for discounted price */
    font-weight: 700; /* Extra bold for discount */
    font-size: 1rem;
}

.discount-percentage {
    color: #28a745; /* Green for discount percentage */
    font-weight: 600;
    margin-right: 5px;
    font-size: 0.9em;
}

.views-field-total-price__number {
    text-align: right; /* Align price to the right */
    font-weight: 600;
    color: #343a40;
    white-space: nowrap; /* Prevent price from wrapping */
}

/* Order Total Summary Section */
.order-total-summary {
    padding-top: 15px;
    border-top: 1px solid #dee2e6; /* Separator above totals */
    margin-top: 15px; /* Space above the separator */
}

.order-total-line {
    display: flex; /* Use flexbox for label and value alignment */
    margin-bottom: 10px; /* Space between total lines */
    font-size: 1.1rem; /* Slightly larger font for totals */
}

.order-total-line-label {
    color: #555; /* Medium gray for labels */
}

.order-total-line-value {
    font-weight: 500; /* Medium weight for values */
    color: #343a40; /* Darker color for values */
}

.order-total-line__total {
    font-size: 1.8rem; /* Large font for the final total */
    font-weight: 700; /* Extra bold */
    color: #007bff; /* Primary blue for the grand total */
    margin-top: 20px; /* More space above the grand total */
    padding-top: 15px; /* Space above the grand total text */
}

/* Coupon Redemption Section */
.checkout-pane-coupon-redemption {
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Internal padding */
    margin-top: 30px; /* Space above this section */
}

.checkout-pane-coupon-redemption .form-label {
    font-weight: 500;
    color: #495057;
    margin-bottom: 8px;
}

.checkout-pane-coupon-redemption .form-control {
    border-radius: 5px;
    border: 1px solid #a0c9ed; /* Slightly darker border for coupon input */
    padding: 10px 15px;
    font-size: 1rem;
}

.checkout-pane-coupon-redemption .btn-primary {
    background-color: #007bff; /* Primary blue for apply button */
    border-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 5px;
    margin-top: 15px; /* Space above the button */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.checkout-pane-coupon-redemption .btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 991.98px) {
    .layout-region-checkout-secondary {
        position: static; /* Disable sticky positioning on smaller screens */
        top: auto;
        margin-top: 30px; /* Add top margin when it's not sticky */
        padding: 20px; /* Slightly less padding */
    }

    .layout-region-checkout-secondary h5 {
        font-size: 1.5rem;
    }

    .order-total-line {
        font-size: 1rem;
    }

    .order-total-line__total {
        font-size: 1.6rem;
    }
}

@media (max-width: 767.98px) {
    .layout-region-checkout-secondary {
        padding: 15px;
    }

    .layout-region-checkout-secondary h5 {
        font-size: 1.4rem;
    }

    .view-commerce-checkout-order-summary table td {
        font-size: 0.9rem;
        padding: 8px 0;
    }

    .views-field-quantity {
        width: 30px;
    }
}


.layout-checkout-form .py-2, .layout-region-checkout-secondary .p-4 {
  font-weight: bold !important;
  text-align: center !important;
  padding: 0 !important;
}

.layout-region-checkout-secondary .mb-3 {
      font-weight: bold !important;
}
.address-container-inline > .form-item {
  display: flex !important;
  width: 100% !important;
  margin-right: 0 !important;
}


div [data-drupal-selector*="edit-review-shipping"] {
    display: none !important;
}