<style>
.militaryModal {
  display: flex; /* default hidden */
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
#militaryModal.modal {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#militaryModal {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

@keyframes fadeIn {
  from { opacity: 0 }
  to { opacity: 1 }
}

@keyframes scaleUp {
  from { transform: scale(0.8); opacity: 0 }
  to { transform: scale(1); opacity: 1 }
}

/* Overlay */
#emailModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6); /* Dim background */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
#emailModal.modal {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#emailModal {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

/* Close button */
.closeBtn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
    color: #888;
    cursor: pointer;
}

.closeBtn:hover {
    color: #000;
}

/* Inputs and textarea */
#emailForm input,
#emailForm textarea {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    font-size: 1rem;
}

#emailForm textarea {
    resize: vertical;
}

/* Submit button */
#emailSubmitBtn {
    margin-top: 15px;
    background: #007bff;
    color: white;
    border: none;
    padding: 12px;
    width: 100%;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
}

#emailSubmitBtn:hover {
    background: #0056b3;
}

/* Messages */
#emailLoading,
#emailSuccess,
#emailError {
    font-size: 0.9rem;
    margin-top: 10px;
    display: none;
}

#emailSuccess { color: green; }
#emailError { color: red; }

/* Animation */
@keyframes fadeInScale {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

#promoCodeSection {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
     /* max-width: 500px; Slightly wider */
    margin: auto;
}

.promo-label {
    font-weight: bold;
    margin-bottom: 5px;
    text-align: left;
    width: 100%;
}

.promo-container {
    display: flex;
    width: 100%;
    gap: 10px; /* Space between input and button */
    flex-wrap: nowrap; /* Ensures two columns even on small screens */
}

.promo-input {
    flex: 2; /* Input field takes more space */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.promo-button {
    flex: 1; /* Button takes less space */
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.promo-button:hover {
    background-color: #0056b3;
}

.promo-message {
    color: red;
    margin-top: 5px;
    text-align: left;
    width: 100%;
}

/* Ensure it remains two columns even on smaller screens */
@media screen and (max-width: 600px) {
    .promo-container {
        display: grid;
        grid-template-columns: 2fr 1fr; /* Input takes 2x space of button */
        gap: 10px;
        width: 100%;
    }

    .promo-input {
        width: 100%; /* Ensure input uses full width */
    }

    .promo-button {
        width: 100%; /* Ensure button uses full width */
    }
}

/* Edge Case: Super small screens */
@media screen and (max-width: 400px) {
    .promo-container {
        display: flex;
        flex-direction: column; /* Stack on ultra-small screens */
    }

    .promo-input, .promo-button {
        width: 100%; /* Full width */
    }
}



    /* Default layout */
#tabLayout {
    display: flex;
    flex-wrap: wrap;
}
#leftContent {
    order: 0;
}
#summary {
    order: 1;
}

/* Reversed layout for Tab 5 */
#tabLayout.tab-reverse-layout {
    flex-direction: row-reverse;
}

#tabLayout.tab-reverse-layout #leftContent {
    order: 1;
}
#tabLayout.tab-reverse-layout #summary {
    order: 0;
}



    /* Hide #summary by default */
    /*#summary {
        display: none;
    }*/

    /* Show #summary for larger screens */
    /*@media (min-width: 768px) {
        #summary {
            display: block;
        }
    }*/

    /* Always show #summary on Tab 5, regardless of screen size */
    #tab5.active #summary {
        display: block;
    }

    /* Hide #summary on mobile or small screens */
    @media (max-width: 767px) {
        #summary {
            display: none;
        }

        /* Allow #summary only on Tab 5 for small screens */
        #tab5.active #summary {
            display: block;
        }
    }


/*    very good progress on floating cart*/
    .button-container {
        display: flex;
        justify-content: space-between; /* Align buttons to the right */
        gap: 10px; /* Add spacing between buttons */
        margin-top: 10px; /* Add some margin above */
    }

    /* Specific width for buttons to achieve the ratio */
    .btn-empty-cart {
        flex: 2; /* 40% width */
        background-color: #f44336; /* Example color for Empty Cart */
        color: white;
        border: none;
        border-radius: 5px;
        padding: 10px 20px;
        cursor: pointer;
    }

    .btn-close-cart {
        flex: 3; /* 60% width */
        background-color: #4CAF50; /* Example color for Close */
        color: white;
        border: none;
        border-radius: 5px;
        padding: 10px 20px;
        cursor: pointer;
    }

    /* Hover effects for buttons */
    .btn-empty-cart:hover {
        background-color: #d32f2f;
    }

    .btn-close-cart:hover {
        background-color: #388e3c;
    }

        .button-container .btn {
            background-color: #007bff; /* Primary button color */
            color: #fff; /* White text color */
            border: none; /* Remove border */
            border-radius: 5px; /* Rounded corners */
            padding: 10px 15px; /* Button padding */
            font-size: 14px; /* Font size */
            cursor: pointer; /* Pointer cursor on hover */
            transition: background-color 0.3s; /* Smooth hover transition */
        }

            .button-container .btn:hover {
                background-color: #0056b3; /* Darker shade on hover */
            }




    /* Notification popup styles */

    .quantity-controls {
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .quantity-controls button {
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            padding: 5px;
            cursor: pointer;
            width: 30px;
            height: 30px;
        }

            .quantity-controls button:hover {
                background-color: #0056b3;
            }

        .quantity-controls input {
            width: 40px;
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 5px;
        }


    /* Overall card styling */
    .order-summary-card {
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        margin: 20px;
        padding: 15px;
        font-family: 'Arial', sans-serif;
    }

    /* Header */
    .order-summary-header {
        background-color: #007bff;
        color: #ffffff;
        padding: 10px 15px;
        text-align: center;
        border-radius: 8px 8px 0 0;
    }

        .order-summary-header h3 {
            margin: 0;
            font-size: 1.5rem;
        }

    /* List styling */
    .order-summary-list {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    /* Individual item styling */
    .order-summary-item {
        display: flex;
        flex-direction: column; /* Stack children in a column */
        align-items: flex-start; /* Align items to the left */
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
    }

        .order-summary-item:last-child {
            border-bottom: none;
        }

    /* Labels and values */
    .summary-label {
        font-weight: bold;
        color: #333;
        margin-bottom: 5px; /* Add spacing between label and value */
    }

    .summary-value {
        color: #555;
        word-break: break-word; /* Prevent overflow on long texts */
    }

    /* Note styling */
    .order-summary-note {
        font-size: 0.9rem;
        color: #666;
        margin-top: 10px;
        line-height: 1.4;
        text-align: center;
    }

    /* Responsive design for smaller screens */
    @media (max-width: 768px) {
        .order-summary-card {
            padding: 10px;
            margin: 10px;
        }

        .order-summary-header h3 {
            font-size: 1.2rem;
        }

        .order-summary-item {
            flex-direction: column;
            align-items: flex-start;
        }

        .summary-label {
            margin-bottom: 5px;
        }

        .summary-value {
            text-align: left;
        }

        .quantity-wrapper {
            width: 70px; /* Reduce size for smaller screens */
            height: 35px;
        }

        .cart-quantity-btn {
            width: 35px;
            font-size: 16px;
        }

        .quantity-input {
            width: 50px;
            font-size: 14px;
        }
    }



    /* Cart summary styling - HIDDEN (replaced by global cart bar in master.blade.php) */
    #cartSummary {
        display: none !important; /* Hide this old cart summary */
        position: fixed; /* Fixes the element relative to the viewport */
        bottom: 0; /* Sticks it to the bottom */
        left: 0;
        right: 0;
        background-color: #007bff; /* Background color for visibility */
        color: white; /* Text color */
        text-align: center;
        padding: 10px 15px;
        z-index: 9999; /* Ensures it is above all other content */
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Adds shadow for depth */
        transition: transform 0.3s ease-in-out; /* Smooth animation for expanding/collapsing */
    }

    #cartItemsPreview {
        font-size: 14px;
    }

    /* Expanded state for cart summary */
    #cartSummary.expanded {
        transform: translateY(-50%); /* Slide up when expanded */
    }

    /* Modal styling for detailed view */
    /* Modal Styling */
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        overflow: auto;
    }

    .modal-content {
        background: #ffffff;
        border-radius: 15px;
        max-width: 600px;
        width: 90%;
        margin: 5% auto;
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        animation: slideIn 0.3s ease-in-out;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        border-bottom: 1px solid #ddd;
        background: #007bff;
        color: white;
        border-radius: 15px 15px 0 0;
    }

    .modal-body {
        padding: 20px;
        max-height: 400px;
        overflow-y: auto;
    }

    .modal-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 15px 20px;
        border-top: 1px solid #ddd;
        background: #f9f9f9;
        border-radius: 0 0 15px 15px;
    }

    /* Total Section in Footer */
    .total-section {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-size: 1.2rem;
        font-weight: bold;
        margin-bottom: 15px;
    }

    /* Cart Item Styling */

    $black: #000;
    $white: #fff;
    $gray: #ccc;
    $smoke: #e2e2e2;
    $disable: #f2f2f2;

    .qty-input {
        color: $black;
        background: $white;
        display: flex;
        align-items: center;
        overflow: hidden;
        .product-qty, .qty-count

    {
        background: transparent;
        color: inherit;
        font-weight: bold;
        font-size: inherit;
        border: none;
        display: inline-block;
        min-width: 0;
        height: 2.5rem;
        line-height: 1;
        &:focus

    {
        outline: none;
    }

    }

    .product-qty {
        width: 50px;
        min-width: 0;
        display: inline-block;
        text-align: center;
        appearance: textfield;
        &::-webkit-outer-spin-button, &::-webkit-inner-spin-button

    {
        appearance: none;
        margin: 0;
    }

    }

    .qty-count {
        padding: 0;
        cursor: pointer;
        width: 2.5rem;
        font-size: 1.25em;
        text-indent: -100px;
        overflow: hidden;
        position: relative;
        &:before, &:after

    {
        content: "";
        height: 2px;
        width: 10px;
        position: absolute;
        display: block;
        background: $black;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    &--minus {
        border-right: 1px solid $smoke;
    }

    &--add {
        border-left: 1px solid $smoke;
        &:after

    {
        transform: rotate(90deg);
    }

    }

    &:disabled {
        color: $gray;
        background: $disable;
        cursor: not-allowed;
        border-color: transparent;
        &:before, &:after

    {
        background: $gray;
    }

    }
    }
    }

    .cart-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }

        .cart-item:last-child {
            border-bottom: none;
        }

    .cart-item-name {
        flex: 1;
    }

    .cart-item-quantity {
        display: flex;
        align-items: center;
    }

        .cart-item-quantity button {
            width: 30px; /* Match input box width */
            height: 30px; /* Match input box height */
            background: #6590ce; /* Transparent background */
            border: 1px solid #ddd; /* Consistent border */
            border-radius: 5px; /* Rounded edges */
            font-size: 16px; /* Slightly larger font for visibility */
            cursor: pointer; /* Pointer cursor for better UX */
        }

            .cart-item-quantity button:hover {
                background-color: #f8f9fa; /* Light background on hover */
                border-color: #007bff; /* Border color on hover */
            }


    .cart-item-price {
        font-weight: bold;
    }

    /* Buttons */
    .checkout-btn {
        width: 100%;
        padding: 10px;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 10px;
        font-size: 1rem;
    }

        .checkout-btn:hover {
            background: #0056b3;
        }

    .empty-cart-btn {
        width: 100%;
        padding: 10px;
        background: #f44336;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 10px;
        font-size: 1rem;
    }

        .empty-cart-btn:hover {
            background: #d32f2f;
        }

    /* Animation */
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-50px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .modal-content {
            width: 95%;
            height: auto;
        }

        .modal-body {
            max-height: 300px;
        }
    }


    /* Container for Product */
    /* Overall Product Container */
    .product-container {
        margin-bottom: 15px;
        padding: 15px;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        background-color: #f9f9f9;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s, box-shadow 0.2s;
    }

        /* Hover Effect */
        .product-container:hover,
        .product-container.active { /* Add an "active" class for mobile interaction */
            transform: translateY(-5px);
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
            background-color: #ffffff;
        }


    /* Product Info */
    .product-info {
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: bold;
        color: #333;
    }

    /* Product Actions */
    .product-actions {
        display: flex;
        align-items: center;
        gap: 15px;
        justify-content: space-between; /* Space out elements evenly */
    }

    /* Quantity Wrapper */
    .quantity-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 150px; /* Adjust width as needed */
        height: 40px; /* Adjust height for the design */
        border: 2px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        background-color: white; /* Background for the container */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* Quantity Input */
   


    /* Quantity Buttons */
    .cart-quantity-btn {
        width: 40px; /* Set button width */
        height: 100%; /* Match container height */
        background-color: transparent;
        color: black;
        font-size: 18px;
        font-weight: bold;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s ease;
    }

    .cart-quantity-btn:hover {
        background-color: #0056b3;
    }

    .quantity-input {
        width: 50px; /* Adjust for input size */
        height: 100%; /* Match container height */
        text-align: center;
        border: none;
        font-size: 16px;
        font-weight: bold;
        background-color: transparent;
        outline: none;
        pointer-events: none; /* Prevent manual input changes */
    }

    /* Add to Cart Button */
    .add-to-cart-btn {
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        padding: 5px 10px;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

        .add-to-cart-btn:hover {
            background-color: #0056b3;
        }

    /* Responsive Design for Smaller Screens */
    @media (max-width: 768px) {
        .product-actions {
            flex-direction: column; /* Stack actions vertically for narrow screens */
            align-items: flex-start; /* Align items to the left */
        }

        .add-to-cart-btn {
            margin-top: 10px; /* Add spacing for stacked layout */
        }
    }



    /* General Modal Styles */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1000; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scrolling if needed */
        background-color: rgba(0, 0, 0, 0.4); /* Black background with transparency */
    }

    /* Modal Content */
    .modal-content {
        position: relative;
        background-color: #ffffff;
        margin: 5% auto; /* Center the modal */
        padding: 20px;
        width: 80%; /* Default width */
        max-width: 600px; /* Limit the width */
        border-radius: 15px;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
        animation: slideIn 0.3s ease-in-out;
    }

    /* Slide-in animation for modal */
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-20%);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Close Button */
  .close {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 26px;
    font-weight: bold;
    color: #FFFFFF;
    cursor: pointer;
}

        .close:hover {
            color: #000;
        }

    /* Modal Header */
    .modal-header {
        font-size: 1.5rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 15px;
    }

    /* Modal Body */
    .modal-body {
        max-height: 70vh; /* Limit the height on smaller screens */
        overflow-y: auto; /* Enable vertical scrolling if content exceeds */
    }

    /* Mobile-Friendly Adjustments */
    @media (max-width: 768px) {
        .modal-content {
            width: 95%; /* Full width on small screens */
            max-width: none;
            padding: 15px;
        }

        .modal-header {
            font-size: 1.2rem;
        }

        .close {
            font-size: 20px;
        }
    }

    /* Button Styling Inside the Modal */
    .modal-footer button {
        padding: 10px 15px;
        margin: 10px 5px;
        font-size: 14px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        background-color: #007bff;
        color: white;
        transition: background-color 0.3s;
    }

        .modal-footer button:hover {
            background-color: #0056b3;
        }


    .payment-method-container {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        flex-wrap: wrap;
    }

    .payment-option {
        flex: 1 1 30%;
        text-align: center;
        border: 2px solid #e6e6e6;
        border-radius: 10px;
        padding: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

        .payment-option:hover,
        .payment-option input[type="radio"]:checked + label {
            border-color: #007bff;
            box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
        }

        .payment-option input[type="radio"] {
            display: none;
        }

    .icon-wrapper img {
        width: 50px;
        height: 50px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-row {
        display: flex;
        gap: 10px;
    }

        .form-row .form-group {
            flex: 1;
        }

    .terms-container {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .payment-summary {
        background-color: #f9f9f9;
        padding: 15px;
        border-radius: 10px;
    }

    .summary-item {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 10px;
    }

        .summary-item img {
            width: 40px;
            height: 40px;
        }

    .action-buttons {
        display: flex;
        justify-content: space-between;
    }



    @media (max-width: 768px) {
        .payment-method-container {
            flex-direction: column;
        }

        .payment-option {
            flex: 1 1 100%;
        }

        .form-row {
            flex-direction: column;
        }

        .btn {
            width: 100%;
        }

        .action-buttons {
            flex-direction: column;
            gap: 10px;
        }
    }

    label {
        font-weight: bold;
    }

    .error {
        color: red;
        margin-top: 5px;
        font-size: 13px;
    }
.cart-notification {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #4caf50; /* Default: Success color */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.cart-notification.show {
    opacity: 1;
    visibility: visible;
}

.cart-notification.add {
    background-color: #4caf50; /* Green for adding items */
}

.cart-notification.remove {
    background-color: #f44336; /* Red for removing items */
}

#map {
            height: 300px;
            margin-top: 10px;
        }

        .tab {
            display: none;
        }

        .tab.active {
            display: block;
        }

        .tab-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            background-color: #E6E6E6;
            padding: .5px;
            border-radius: .5px;
            color: white;
        }

        .tab-header div {
            padding: 1px;
            cursor: pointer;
            border-bottom: 1px solid #E6E6E6;
        }

        .tab-header div.active {
            background-color: #E6E6E6;
            border-radius: 0px;
        }

        .tab-header div.completed {
            background-color: #E6E6E6;
            border-radius: 0px;
        }

    .form-section {
        margin: 20px 0;
    }

    .section-heading {
        font-size: 2rem;
    }

    textarea {
        resize: vertical;
        min-height: 80px;
    }


        /*input[type="text"],
        input[type="email"],
        select,
        textarea {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            border-radius: 5px;
            border: 1px solid #ccc;
        }*/

        button {
            background-color: #007bff;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
/*            margin-top: 10px;*/
        }
/*
        button:hover {
            background-color: #0056b3;
        }*/

        .navigation-buttons {
    margin-top: 20px; /* Gap above the section */
    display: flex;
    align-items: center; /* Center align items vertically */
    justify-content: space-between; /* Spread text and buttons */
    gap: 10px; /* Space between text and buttons */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.navigation-buttons p {
    font-size: 12px; /* Adjust font size for better readability */
    color: #666;
    margin: 0; /* Remove default margin for inline alignment */
    flex: 1; /* Allow text to take up remaining space */
}

.button-row {
    display: flex;
    gap: 10px; /* Space between buttons */
}

.btn-back, .btn-next {
    background-color: #026aa2; /* Matches primary button color */
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    flex-shrink: 0; /* Prevent buttons from shrinking */
}

.btn-back:hover, .btn-next:hover {
    background-color: #024f7a; /* Darker shade for hover effect */
}

.btn-back {
    background-color: #f3f5ff; /* Light background for the back button */
    color: #026aa2;
    border: 1px solid #026aa2;
}

.btn-back:hover {
    background-color: #d9e8f5;
}




@media (max-width: 768px) { /* Adjust the breakpoint as needed */
            button {
            background-color: #007bff;
            color: white;
            padding: 5px 8px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

    .form-section {
        padding: 5px;
        margin: 5px 0;
    }

    .section-heading {
        font-size: 0.6rem;
        text-align: center;
    }

    .form-group {
        width: 100%;
    }

        #map {
            height: 300px;
            margin-top: 10px;
        }

    .error-message {
        color: red;
        font-weight: bold;
    }

    

        /*#summary {
            margin-top: 20px;
            padding: 10px;
            background-color: #e9ecef;
            border-radius: 5px;
        }*/

        /*#summary h3 {
            margin-top: 0;
        }*/


/* Modal (Pop-up) Styles */


        /* Responsive Styles for different screen sizes */
        @media (max-width: 768px) {
            .form-group {
                width: 100%;
            }

            .cart-summary {
                padding: 15px;
            }
            .modal-content {
                width: 80%;
            }
        }

        @media (max-width: 480px) {
            h2, h3 {
                font-size: 1.2rem;
            }

            .modal-content {
                width: 80%;
            }

            .cart-summary {
                padding: 10px;
            }

            .cart-total {
                font-size: 1rem;
            }
        }

        /* Map Styles */
        #map {
            width: 100%;
            height: 300px;
            margin-top: 10px;
        }

.closeBtn {
    color: #ff0000;
    float: right;
    font-size: 40px;
    font-weight: bold;
}

/*.closeBtn:hover,
.closeBtn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}*/

input[type="text"], input[type="email"], input[type="date"], input[type="tel"], input[type="time"] {
            width: 100%;
            padding: 10px;
            font-size: 1rem;
            box-sizing: border-box;
        }

button[type="submit"] {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.cart-quantity-btn {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    font-size: 1.5rem;
    margin: 0 5px;
}

.cart-quantity-btn:hover {
    color: #0056b3;
}

/*button[type="submit"]:hover {
    background-color: #45a049;
}*/

.form-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }

    .form-row {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 15px;
    }

    .form-group {
        flex: 1;
        margin: 10px 0;
        min-width: 250px;
    }

        .form-group-full {
            width: 100%; /* Full-width for rows with one column */
        }

    .full-width {
        width: 100%;
    }
        .form-control{
border-radius:10px;
}

        /* Responsive styles */
        @media (max-width: 768px) { /* Tablets/iPads */
            .form-group {
                width: 48%; /* Keep two columns, but adjust for medium screens */
            }
        }

        @media (max-width: 600px) { /* Mobile devices */
            .form-group, .form-group-full {
                width: 100%; /* Stack columns vertically on small screens */
            }
        }

.error {
            color: red;
            font-size: 0.9em;
        }

    </style>
    <style>
        .cart-summary {
            margin-top: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .service-item, .variant-item, .product-item {
            margin-bottom: 10px;
        }

        .variant-item {
            margin-left: 10px;
        }

        .product-item {
            margin-left: 10px;
        }

        .cart-total {
            font-size: 1.2em;
            margin-top: 10px;
            text-align: right;
        }

        .add-to-cart {
            margin-left: 20px;
            color: blue;
            cursor: pointer;
        }

        .remove-item {
            color: red;
            cursor: pointer;
        }

/* ✅ MOBILE PHONE NUMBER - SIMPLE LABEL + TEXT DISPLAY */
@media (max-width: 768px) {
    /* Mobile number container in Tab 5 */
    #mobileNumberContainer {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        width: 100% !important;
        padding: 12px !important;
        background: #f8f9fa !important;
        border-radius: 10px !important;
    }
    
    /* Phone number text */
    #mobileNumberDisplay {
        font-size: 20px !important;
        font-weight: 800 !important;
        color: #111 !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Label */
    #mobileNumberContainer label {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #667eea !important;
        margin: 0 !important;
    }
    
    /* Hint text */
    #mobileNumberContainer small {
        font-size: 12px !important;
        color: #666 !important;
        text-align: left !important;
        display: block !important;
        margin-top: 8px !important;
    }
}

    </style>