/* Define your default font */
body, html {
    font-family: 'FSAlbertTrial-Regular', sans-serif, !important; /* Replace with your desired font */
}

/* Apply the same font to common elements */
h1, h2, h3, h4, h5, h6, p, span, a, li, button, input, textarea, label, div, form-label {
    font-family: inherit; /* Inherit font from body */
}

/* Override any additional classes that might use a different font */
[class*='-btn'], .navbar, .custom-nav, .service-card, .child-service-card {
    font-family: inherit; /* Ensure consistency across common UI elements */
}



@font-face {
    font-family: 'FSAlbertTrial-Regular';
    src: url('./FSAlbertTrial-Regular.otf');
}


.navbar {
    background-color: #FFF;
}

.navbar-brand {
    font-weight: bold;
}

.navbar .nav-link {
    color: #000;
}



.promo-banner img {
    width: 100%;
    margin-top: 20px;
}

.promo-banner {
    margin-top: 20px;
    text-align: center;
}

.sub-service-title {
    flex-grow: 1;
    padding-left: 10px;
    word-wrap: break-word;
    /* Ensure long words are wrapped */
}

    .sub-service-title h5 {
        margin: 0;
        font-size: 1.2rem;
        font-weight: bold;
    }

.child-service-card {
    display: flex;
    align-items: center;
    border: 1px solid #F0F0F0;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /*    transition: transform 0.3s;*/
}
/*    .child-service-card:hover {
        transform: scale(1.02);}
*/
.sub-service-list-outer .price-info {
    margin-left: auto;
    margin-right: 10px;
}

.sub-service-list-outer .price-label {
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.sub-service-list-outer .price-value {
    font-size: 17px;
    font-weight: 800;
    line-height: 26px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.sub-service-list-outer .child-service-card h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    color: #212121;
}

.child-service-card p {
    margin: 0 15px;
    white-space: nowrap;
}

.child-service-card .add-to-cart,
.child-service-card .quantity-control {
    background-color: #FF7800;
    border: none;
    color: #000;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 20px;
    transition: background-color 0.3s ease;
}


.quantity-controls {
    display: flex;
    align-items: center;
}

    .quantity-controls button {
        background-color: #FF7800;
        border: none;
        color: #000;
        padding: 5px 10px; /* Reduced padding */
        cursor: pointer;
        border-radius: 20px;
        transition: background-color 0.3s ease;
    }

    .quantity-controls .quantity {
        margin: 0 2px; /* Further reduced margin */
        min-width: 20px; /* Slightly reduced width */
        text-align: center;
        display: inline-block;
        font-size: 14px; /* Adjust font size if needed */
    }


.header-icons .btn {
    padding: 0.2rem 0.2rem;
    /* Reduce padding around the buttons */
    margin: 0 0.1rem;
    /* Reduce space between buttons */
}

    .header-icons .btn i {
        font-size: 1.2rem;
        /* Adjust the size of the icons if needed */
    }

.header-icons .badge {
    font-size: 0.75rem;
    /* Adjust badge size if needed */
    margin-left: 0.2rem;
    /* Fine-tune space between icon and badge */
}

.location-icon {
    margin-right: 5px;
    /* Adjust the spacing between the icon and the text */
    font-size: 1.2rem;
    /* Adjust the size of the location icon */
}

.service-card {
    border: 1px solid #F0F0F0;
    border-radius: 16px;
    margin-bottom: 15px;
    padding: 0px;
    background-color: #fff;
    box-shadow: 0px 12px 17px 2px rgba(0, 0, 0, 0.04), 0px 5px 22px 4px rgba(0, 0, 0, 0.04), 0px 7px 8px 0px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    text-align: center;
}


    .service-card img {
        width: 100%; /* Ensure the image stretches the full width of the card */
        height: 100%; /* Maintain aspect ratio */
        object-fit: cover; /* Ensure the image covers the area without distortion */
        border-radius: 15px; /* Keep rounded corners for the image if needed */
    }

    .service-card h5 {
        margin: 0;
        font-size: 1.2rem;
        font-weight: bold;
        color: #000; /* Black color for the service name */
        text-decoration: none; /* Remove underline */
    }

    .service-card a {
        text-decoration: none; /* Remove underline from links */
        color: inherit; /* Inherit the color from h5 */
    }
/* RTL Styles */
.rtl {
    direction: rtl;
}

    .rtl .service-card {
        text-align: right;
    }

        .rtl .service-card img {
            margin-left: 0px;
            margin-right: 0;
        }
/* Card title color */
.service-card .card-title {
    color: #212121; /* Dark gray color for the card title */
}
/* Arrow button styling with image */
.service-card .arrow-button {
    /*background-image: url('../../image/Icon.png');
    background-size: contain;*/ /* Ensure the image fits within the button */
    /*background-repeat: no-repeat;*/ /* Prevent image from repeating */
    /*background-position: center;*/ /* Center the image */
    width: 40px; /* Adjust width as needed */
    height: 40px; /* Adjust height as needed */
    display: inline-flex; /* Center the image inside the button */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    border-radius: 10px; /* Optional: rounded corners */
    background-color: #FF7800; /* Background color behind the image (if needed) */
}

    .service-card .arrow-button img {
        width: 10px;
        height: auto;
    }

.service-card .card-title {
    font-size: 15px;
    background-color: var(--Ink-100, white); /* Background color */
    color: #212121; /* Font color, adjust as needed */
    padding: 0; /* Padding for better visibility */
    border-radius: 8px; /* Optional: rounded corners */
    display: inline-block; /* Ensure background color applies to text */
    text-align: left; /* Align text to the right */
    line-height: 22px;
    width: 80%;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.sub-service-card {
    border: 1px solid #F0F0F0;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 0;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden; /* Hide overflow for consistent sizing */
}



.service-details-outer.sub-service-card img {
    width: 100%; /* Ensure image stretches to full width */
    height: 100%; /* 
            object-fit: cover; /* Ensure image covers the area without distortion */
    display: block;
    border-top-left-radius: 10px; /* Rounded corners for top */
    border-top-right-radius: 10px; /* Rounded corners for top */
}

.sub-service-details {
    padding: 10px 0; /* Reduced padding to close the gap */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Align text and button */
    flex: 1;
}

    .sub-service-details h5 {
        margin: 0;
        font-size: 0.9rem; /* Reset font size */
        font-weight: bold;
        color: #212121; /* Text color */
        text-align: left;
        flex: 1;
    }

    .sub-service-details .arrow-button {
        background-image: url('../../image/right-arrow-white.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 40px; /* Adjusted width */
        height: 40px; /* Adjusted height */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background-color: #FF7800;
    }

a.sub-service-card-link {
    color: inherit;
    text-decoration: none;
    display: block;
}



.rtl .sub-service-card {
    text-align: right;
}

    .rtl .sub-service-card img {
        margin-left: 15px;
        margin-right: 0;
    }

body {
    background-color: #f8f9fa;
    color: #212121; /* Set font color */
    font-family: 'FSAlbertTrial-Regular' !important;
    font-size: 15px !important;
}

.navbar {
    background-color: #FCFCFC;
}

.back-button {
    font-size: 1rem;
    color: #000;
}

.sub-service-info {
    text-align: center;
    margin-bottom: 5px;
}

.sub-service-card {
    border: 1px solid #F0F0F0;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    width: 101%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


    .sub-service-card img {
        max-height: 150px;
        object-fit: cover;
        border-radius: 10px;
        flex-shrink:;
    }

.sub-service-details {
    flex-grow: 1;
}

    .sub-service-details h3 {
        margin: 0;
        font-size: 32px;
        line-height: 40px;
        letter-spacing: 0;
        text-align: left;
        font-weight: bold;
        color: #212121;
        margin-bottom: 10px;
    }

.sub-service-list-outer .child-service-card {
    display: flex;
    align-items: center;
    border: 1px solid #E0E0E0; /* Light border color */
    border-radius: 8px; /* Rounded corners */
    padding: 10px; /* Padding for inner content */
    background-color: transparent; /* Remove background color */
    box-shadow: none; /* Removed shadow */
    transition: none; /* Remove transition for hover effects */
    flex: 1 1 100%; /* Make each card take full width */
    justify-content: space-between; /* Distribute items evenly */
    height: 70px; /* Height of the card */
}
/*.child-service-card:hover {
    transform: scale(1.01); 
    border-color: #FFB74D;}
*/

.child-service-card h5 {
    margin: 0;
    font-size: 0.85rem; /* Smaller font size for compact appearance */
    font-weight: 500; /* Slightly bolder for emphasis */
    color: #333; /* Darker text color for contrast */
}

.child-service-card p {
    margin: 0 5px; /* Reduced margin for tighter spacing */
    font-size: 0.80rem; /* Smaller font size for consistency */
    color: #666; /* Subtle color for secondary text */
    white-space: nowrap;
}

.child-service-card .add-to-cart {
    background-color: transparent;
    border: none;
    color: #000;
    padding: 8px 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}




    .child-service-card .add-to-cart:focus {
        box-shadow: none;
    }

    .child-service-card .add-to-cart:not(:disabled):not(.disabled):active {
        background-color: transparent; /* Darker shade for hover effect */
        border-color: transparent; /* Matching border color on hover */
    }

    .child-service-card .add-to-cart.btn-warning:not(:disabled):not(.disabled):active:focus {
        background-color: transparent; /* Darker shade for hover effect */
        border-color: transparent; /* Matching border color on hover */
        box-shadow: none;
    }

.child-service-card .quantity-control {
    background-color: #ff7800;
    border: 1px solid #ff7800;
    color: #fff;
    padding: 8px 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    height: 30px;
    display: flex;
    align-items: center;
    width: 30px;
    justify-content: center;
    font-weight: bold;
}
/* Container adjustments to support flex items */
.row {
    display: flex;
    flex-wrap: wrap; /* Allow cards to wrap to the next line */
    margin: -4px; /* Adjust margin to offset card margin */
}

.col-12 {
    padding: 0; /* Remove padding for proper spacing */
}

.quantity-controls button {
    background-color: #FF7800;
    border: none;
    color: #000;
    padding: 5px 30px;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}



.quantity-controls .quantity {
    margin: 0 5px;
    min-width: 10px;
    text-align: left;
    font-family: 'FSAlbertTrial-Regular' !important;
}

/*.total-container {
    display: flex;
    flex-direction: column;*/ /* Stack elements vertically */
/*text-align: left;
    margin-top: 20px;
    padding: 10px;
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: unset;
    bottom: 0;
    left: 0;
    width: 100%;
}*/

.total-container h4 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: normal;
}

.total-container .total-label {
    font-size: 1rem;
    font-weight: normal;
    margin-top: 20px;
}

.total-container .total-price {
    display: flex;
    align-items: center;
    font-size: 1.25rem; /* Base font size for the container */
    font-weight: normal;
    margin-top: 5px;
    margin-left: 5px; /* Adjust margin as needed */
    position: relative; /* Relative positioning to adjust the underline */
}

    .total-container .total-price::after {
        content: ''; /* Empty content for the pseudo-element */
        position: absolute; /* Absolute positioning to move the underline */
        left: 0; /* Align underline with the left of the container */
        bottom: -2px; /* Adjust this value to move the underline lower */
        width: 100%; /* Full width of the total-price container */
        height: 1px; /* Thickness of the underline */
        background-color: #000; /* Color of the underline */
    }

    .total-container .total-price .first-number,
    .total-container .total-price .rest-of-price {
        color: #000; /* Make all digits black */
        font-size: 1.25rem; /* Font size for all digits */
        display: inline; /* Ensure text flows inline without extra spacing */
    }

    .total-container .total-price .first-number {
        font-size: 1.75rem; /* Larger font size for the first number */
        font-weight: bold; /* Make the first number bold */
    }

#total-unit {
    font-size: 0.85rem;
    margin-right: 1px; /* Space between OMR and the total price */
    margin-top: 14px;
}

.confirm-purchase-btn {
    background-color: #FF7800 !important; /* Add !important to override other styles */
    border: none;
    color: #FFF; /* Make text color white */
    padding: 10px 28px;
    cursor: pointer;
    border-radius: 15px;
    transition: background-color 0.3s ease;
    margin-top: 10px;
    width: 100%;
}




.error-message {
    color: red;
    font-weight: normal;
    margin-bottom: 10px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.rtl .child-service-card {
    text-align: right;
}

    .rtl .child-service-card img {
        margin-left: 15px;
        margin-right: 0;
    }

.sub-service-card {
    display: flex;
    align-items: center; /* Vertically center items if needed */
    justify-content: center; /* Horizontally center items */
    width: 100%; /* Make sure the card takes full width of its container */
    height: 100%; /* Make sure the card takes full height of its container */
    overflow: hidden; /* Hide any overflow if the image is larger than the container */
}

    .sub-service-card img {
        width: 100%; /* Make the image take full width of its container */
        height: 100%; /* Make the image take full height of its container */
        object-fit: cover; /* Ensure the image covers the container without distortion */
    }

#services-list {
    padding-top: 8px;
    padding-bottom: 0;
}

.child-service-total-outer .total-label {
    font-size: 21px;
    font-weight: 700;
    line-height: 32px;
    color: #4D4D4D;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.child-service-total-outer #total-unit {
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    color: #8e8e8e;
    margin-top: 8px;
    margin-right: 5px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.child-service-total-outer #total-price {
    font-size: 28px;
    font-weight: 800;
    line-height: 28px;
    color: #212121;
    /*    border-bottom: 2px solid #8e8e8e;
    padding-bottom: 8px;*/
    margin-bottom: 0px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.child-service-total-form .confirm-purchase-btn {
    height: 65px;
    font-size: 17px;
    margin-top: 50px;
}

.service-details-outer {
    border-radius: 32px;
    height: 156px;
}

.child-service-total-form .confirm-purchase-btn:focus {
    box-shadow: none;
    background-color: #FF7800; /* Darker shade for hover effect */
    border-color: transparent; /* Matching border color on hover */
    color: #fff;
}

.child-service-total-form .confirm-purchase-btn:not(:disabled):not(.disabled):active {
    background-color: #4d4d4d; /* Darker shade for hover effect */
    border-color: transparent; /* Matching border color on hover */
    color: #fff;
}

.child-service-total-form .confirm-purchase-btn.btn-warning:not(:disabled):not(.disabled):active:focus {
    background-color: #FF7800; /* Darker shade for hover effect */
    border-color: transparent; /* Matching border color on hover */
    box-shadow: none;
}

.child-service-total-form .confirm-purchase-btn {
    background-color: #FF7800;
    color: #fff;
    /* Change text color to white for better contrast */
}



body {
    background-color: #f8f9fa;
}

.order-list {
    list-style-type: none;
    padding: 0;
}

.order-item {
    cursor: pointer;
    padding: 10px;
    border: 1px solid #ff7800;
    border-radius: 5px;
    background-color: #fff;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
}



.order-details {
    display: none;
    margin-top: 10px;
}

.tab-content {
    margin-top: 20px;
}

.total {
    font-size: 1.5rem;
    font-weight: bold;
}

.home-btn {
    background-color: #000;
    border: none;
    color: #fff;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 20px;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}


.checkout-card {
    border: 1px solid #F0F0F0;
    border-radius: 10px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

    .checkout-card h1 {
        font-size: 2rem;
        font-weight: bold;
    }

.table thead th {
    background-color: #FF7800;
    color: #000;
    font-weight: bold;
}

body {
    background-color: #f8f9fa;
    margin: 0;
    height: 100vh; /* Full viewport height */
    display: flex;
    flex-direction: column;
}

.container {
    flex: 5; /* Allows the container to take up remaining space */
}

.confirm-purchase-btn {
    background-color: #FF7800;
    border: none;
    color: #fff;
    padding: 8px 28px;
    cursor: pointer;
    border-radius: 15px;
    transition: background-color 0.3s ease;
    height: 65px;
    font-size: 20px;
    font-family: 'FSAlbertTrial-Regular' !important;
}



.button-wrapper {
    display: flex;
    justify-content: center;
    align-items: baseline;
    height: 0px; /* Adjust height as needed */
}


.rtl {
    direction: rtl;
}

    .rtl .checkout-card {
        text-align: right;
    }

    .rtl .total-container {
        text-align: right;
    }

.item-total-container {
    border-radius: 10px;
    padding: 2px;
    margin-top: 30px;
    background-color: #fff;
}

    .item-total-container h5 {
        font-weight: bold;
    }

    .item-total-container h4 {
        font-weight: bold;
    }

    .item-total-container .price-label {
        font-weight: bold; /* Ensure price labels are not bold */
    }
    /* Style for text on the left side of the item-total-container */
    .item-total-container .d-flex > h5:first-of-type,
    .item-total-container .d-flex > h4:first-of-type {
        color: #636363; /* Set text color for left side items */
        font-family: 'FSAlbertTrial-Regular' !important;
    }
    /* Reduce font size for headings and price labels in the item-total-container */
    .item-total-container h5,
    .item-total-container h4 {
        font-size: 0.9rem; /* Adjust as needed */
        font-weight: normal; /* Ensure text is not bold */
    }

.schedule-btn {
    background-color: #fff;
    border: 1px solid #FF7800;
    color: #FF7800;
    margin-top: 5px;
    padding: 8px 28px;
    cursor: pointer;
    border-radius: 16px;
    transition: background-color 0.3s ease;
    width: 150px;
    text-align: center
}



.promo-code-section {
    margin-bottom: 10px;
}

.promo-message {
    color: green;
    font-weight: bold;
}

    .promo-message.error {
        color: red;
    }

.grouped-section {
    /*    border: 1px solid #F0F0F0;*/
    border-radius: 10px;
    padding: 1px;
    margin-top: 20px;
}

.promo-code-section {
    margin-bottom: 0;
}

.bold-unit {
    font-weight: bold;
}
/* Updated text styling */
.confirm-reservation-text {
    margin: 0;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0;
    text-align: left;
    font-weight: bold;
    color: #212121;
    margin-bottom: 15px;
    padding: 0;
    text-transform: capitalize;
}

    .confirm-reservation-text img {
        margin-top: -4px;
    }

.confirm-reservation-text {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-left: -6px;
}

    .confirm-reservation-text p {
        margin-bottom: 0px;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        color: #212121;
        font-family: 'FSAlbertTrial-Regular' !important;
    }
/* Styling for service list items directly within the item total container */
.item-total-container {
    padding: 15px;
    background-color: #fff; /* Background color for better contrast */
    border-radius: 10px;
    box-shadow: 0 px 0px rgba(0, 0, 0, 0.1); /* Light shadow for subtle depth */
}

#total-price {
    font-weight: bold; /* Make the total price bold */
}

.d-flex {
    display: flex;
    align-items: center;
}

.justify-content-between {
    justify-content: space-between;
}

.service-name p,
.service-details p {
    font-size: 15px; /* Decrease font size */
    margin: 0; /* Remove default margin */
}

.service-details {
    justify-content: flex-end; /* Align details to the end of the container */
}

.price-label {
    font-size: 17px;
    margin-bottom: -2px;
    font-weight: 400;
}


.price-unit {
    font-size: 12px; /* Adjust font size if needed */
    margin-left: 2px;
    font-weight: 400; /* Make the unit bold */
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-shrink-1 {
    flex-shrink: 1;
}
/* Banner styling */
.banner {
    color: red;
    padding: 15px; /* Increased padding for better visibility */
    border-radius: 5px;
    text-align: center; /* Center text */
    width: 100%; /* Full width */
    position: relative; /* Ensure relative positioning for margin adjustments */
    margin: 80px 0; /* Adjust margin-top to push it further down */
}

.button-wrapper {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 0px; /* Reduce this value to decrease the space at the bottom */
}

.banner {
    text-align: center;
    color: red;
    padding: 10px;
    margin-bottom: 0; /* Remove any bottom margin */
    margin-top: 50px; /* Add some margin on top to separate from the button */
}
/* Ensure the total container and other elements don’t overlap or push it up */

/* Button alignment */
.button-group {
    display: flex;
    justify-content: space-between; /* Align buttons to opposite sides */
    width: 100%;
}

    .button-group .schedule-btn {
        order: 1; /* Moves the reschedule button to the right */
    }

    .button-group .confirm-purchase-btn {
        order: 2; /* Moves the request now button to the left */
    }

.checkout-reservation-outer .form-label {
    color: #8E8E8E;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.checkout-reservation-outer .item-total-container {
    padding: 0px;
    border-radius: 10px;
    box-shadow: 0 px 0px rgba(0, 0, 0, 0.1); /* Light shadow for subtle depth */
    background-color: transparent;
}

.checkout-reservation-outer .promo-code-section .form-control {
    box-shadow: none;
    display: flex;
    height: 48px;
    padding: 4px 4px 4px 12px;
    align-items: center;
    flex: 1 0 0;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
    background: #FCFCFC;
    color: #A4A4A4;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 117.647% */
    font-family: 'FSAlbertTrial-Regular' !important;
}

    .checkout-reservation-outer .promo-code-section .form-control::placeholder {
        color: #A4A4A4;
        !important;
    }

.notes-section .form-control {
    border-radius: 4px;
    border: 1px solid #E0E0E0;
    background: #fff;
    display: flex;
    padding: 8px 8px 8px 12px;
    align-items: center;
    flex-shrink: 0;
    align-self: stretch;
    height: 72px;
}

    .notes-section .form-control::placeholder {
        color: #A4A4A4;
        !important;
    }

#promo-code::placeholder {
    color: #A4A4A4;
    !important;
}

.checkout-reservation-outer .form-control {
    border-color: #E0E0E0;
    box-shadow: none;
}

.notes-section .form-control {
    border-color: #E0E0E0;
    box-shadow: none;
    background-color: transparent;
}

.service-date-outer {
    display: flex;
    padding: 12px 12px 12px 12px;
    align-items: flex-start;
    gap: 0px;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
    flex-direction: column;
}

    .service-date-outer label {
        margin-bottom: 0px;
    }

    .service-date-outer input {
        background-color: transparent;
        border: none;
        padding: 0;
        color: #212121;
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        height: 20px;
        margin-top: 8px;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

#service-date:focus {
    color: #495057;
    background-color: transparent;
    border-color: snow;
    outline: 0;
    box-shadow: none;
}

.promo-code-section .btn-secondary {
    border: 1.5px solid #FF9333; /* Equivalent to var(--Brand-70, #FF9333) */
    background-color: transparent;
    color: #FF9333;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 20px;
}

#promo-code:focus {
    background-color: transparent;
}

#promo-code {
    color: #A4A4A4;
    font-size: 17px;
    background-color: transparent;
    font-weight: 400;
    line-height: 20px; /* 117.647% */
    font-family: 'FSAlbertTrial-Regular' !important;
}

.promo-code-section .btn-secondary:not(:disabled):not(.disabled):active:focus {
    box-shadow: none
}

.promo-code-section .btn-secondary.focus, .promo-code-section .btn-secondary:focus {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
    box-shadow: 0 0 0 .2rem rgba(130, 138, 145, .5);
}

.checkout-reservation-outer .service-name p {
    color: var(--color-text-secondary, #4D4D4D); /* Text color with a fallback */
    font-family: var(--font-font-family-body, "FS Albert Trial"); /* Font family with a fallback */
    font-size: var(--font-size-s, 15px); /* Font size with a fallback */
    font-style: normal; /* Normal font style */
    font-weight: 400; /* Regular font weight */
    line-height: var(--font-line-height-s, 22px); /* Line height with a fallback */
    font-family: 'FSAlbertTrial-Regular' !important;
}

    .checkout-reservation-outer .service-name p span {
        color: var(--color-text-secondary, #4D4D4D); /* Text color with a fallback */
        font-family: var(--font-font-family-body, "FS Albert Trial"); /* Font family with a fallback */
        font-size: var(--font-size-s, 15px); /* Font size with a fallback */
        font-style: normal; /* Normal font style */
        font-weight: 400; /* Regular font weight */
        line-height: var(--font-line-height-s, 22px); /* Line height with a fallback */
        font-family: 'FSAlbertTrial-Regular' !important;
    }

.service-details .unit-div .price-label,
.service-details .unit-div .price-unit {
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    font-family: 'FSAlbertTrial-Regular' !important;
}



.service-details .price-div .price-unit {
    color: var(--color-text-secondary, #4D4D4D); /* Text color with a fallback */
    font-size: 15px;
    font-style: normal;
    font-weight: 400; /* Regular font weight */
    line-height: normal;
    font-family: 'FSAlbertTrial-Regular' !important;
}


.service-details .price-div .price-label {
    color: var(--color-text-secondary, #4D4D4D); /* Text color with a fallback */
    font-size: 15px;
    font-style: normal;
    font-weight: bold;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.checkout-outer-list-div {
    border-bottom: 0px dotted #000;
    padding-bottom: 10px;
    align-items: flex-start;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.itrem-total-outer .itrem-total-left {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #212121;
}

.itrem-total-outer .total-unit {
    margin-top: 8px;
    margin-right: -2px;
    color: #4D4D4D;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.itrem-total-outer .total-price {
    color: #212121;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    padding-bottom: 8px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.itrem-total-main {
    border-top: 0px dotted #000;
    padding-top: 10px;
}

    .itrem-total-main .itrem-total-left {
        margin: 0;
        color: #212121;
        font-size: 15px;
        font-style: normal;
        font-weight: 700;
        line-height: 13px;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

    .itrem-total-main .total-price {
        font-size: 17px;
        font-weight: 800;
        line-height: 28px;
        color: #212121;
        /* border-bottom: 2px solid #8e8e8e; */
        padding-bottom: 8px;
    }

.accordian-outer {
    display: flex;
    justify-content: space-between;
}



.sticky-checkout-outer {
    position: unset;
    width: 100%;
    bottom: 35px;
    top: auto;
}

.confirm-purchase-btn {
    margin-bottom: 20px;
    margin-top: 35px;
}

.custom-nav {
    border-bottom: 1px solid #E0E0E0;
    background: #FCFCFC;
    padding: 5px 0px !important;
}

.custom-nav-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.custom-nav-inner-logo h2 {
}

.custom-nav-inner-logo h2 {
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
    color: #212121;
    margin: 0;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.custom-nav-inner-logo .power-outer {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .custom-nav-inner-logo .power-outer p {
        font-size: 11px;
        font-style: normal;
        font-weight: 400;
        line-height: 13px;
        color: #212121;
        margin: 0;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

    .custom-nav-inner-logo .power-outer img {
    }

.custom-nav-inner-cart {
    display: flex;
    align-items: center;
    gap: 30px;
}

.custom-nav-inner-logo {
    margin-left: 40px;
}

.location-inner-text-icon {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .location-inner-text-icon a {
        color: #FF7800;
        text-align: center;
        font-size: 17px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
        font-family: 'FSAlbertTrial-Regular' !important;
    }


.location-outer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.location-inner-search {
    width: 60%;
}

.location-inner-search-input {
    height: 48px;
    padding: 0px 4px 0px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .location-inner-search-input p {
        margin: 0;
        color: #FF7800;
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

.custom-nav-inner-close {
    width: 25px;
}

.cart-question-div a {
    position: relative;
}

    .cart-question-div a .cart-icon-span {
        position: absolute;
        top: -23px;
        left: 17px;
        background-color: #000;
        color: #fff;
        border-radius: 50px;
        width: 25px;
        height: 25px;
        font-size: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .cart-question-div a .cart-icon-span #cart-count {
            display: flex;
        }

.service-request-left {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.service-request-right {
    margin-right: 25px;
    background-color: #000;
    color: #fff;
    font-size: 16px;
    padding: 9px 12px;
    border-radius: 10px;
    height: 43px;
}

    .service-request-right .view-btn {
        background-color: transparent;
        color: #fff;
        border: none;
        padding: 0px;
    }

/*.collapsible-link {
    width: 100%;
    position: relative;
    text-align: left;
}

    .collapsible-link::before {
        content: "";
        position: absolute;
        top: 25px;
        right: 0;
        transform: translateY(-50%);
        display: block;
        background-image: url(../Image/down-arrow.png);
        width: 20px;
        height: 20px;
        background-size: 20px;
        background-repeat: no-repeat;
    }

    .collapsible-link[aria-expanded="true"]::before {
        content: "";
        background-image: url(../Image/down-arrow.png)
    }

    .collapsible-link[aria-expanded="false"]::before {
        content: "";
        background-image: url(../Image/down-arrow.png);
        transform: rotate(269deg);
        top: 23px;
    }*/

.service-request-outer-div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.servicehistory-outer .card-header .collapsible-link {
    padding: 0;
}

.servicehistory-outer .card-header {
    border-radius: 5px !important;
    box-shadow: none;
    background-color: #fff;
    border: none;
    position: relative;
}

    .servicehistory-outer .card-header::after {
        content: '';
        background-color: #e0e0e0;
        position: absolute;
        width: 94%;
        height: 0px;
        bottom: -1px;
    }

.servicehistory-outer .card {
    box-shadow: none;
}

.servicehistory-outer > .card:not(:last-of-type) {
    border-bottom: 1px solid #e0e0e0 !important;
    border-bottom-right-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-radius: 10px;
}

.servicehistory-outer > .card:not(:first-of-type) {
    border-top: 1px solid #e0e0e0 !important;
    border-top-right-radius: 10px !important;
    border-top-left-radius: 10px !important;
    border-radius: 10px;
}

.servicehistory-outer .card {
    margin-bottom: 15px;
}

.servicehistory-outer .service-status-outer {
    display: flex;
    justify-content: space-between;
}

.service-status-outer p {
    margin-bottom: 0px;
}

.service-status-right {
    text-align: right;
}

.servicehistory-outer .card-body .service-status-outer:nth-child(1) {
    margin-bottom: 10px;
}

.servicehistory-outer .card-header,
.servicehistory-outer .card-body {
    padding: 10px;
}

.service-request-id {
    display: flex;
    gap: 6px;
}

    .service-request-id p {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: #212121;
        margin: 0;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

    .service-request-id span {
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: #212121;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

.service-request-div span {
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: black;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.service-status-left b {
    font-size: 12px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.service-status-left p {
    font-size: 14px;
    margin-bottom: 3px;
    font-weight: 400;
    line-height: 14px;
    color: #212121;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.service-status-right p {
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    color: #212121;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.service-status-right b {
    font-size: 12px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.service-listing-outer h3 {
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    color: #212121;
    margin: 0;
    margin-bottom: 10px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.service-listing-outer {
    margin-top: 15px;
}

    .service-listing-outer ul li {
        margin-bottom: 5px;
        color: #555;
        font-size: 13px;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

.servicehistory-outer .service-listing-outer {
    position: relative;
}


    .servicehistory-outer .service-listing-outer::before {
        content: '';
        background-color: #e0e0e0;
        position: absolute;
        width: 99%;
        height: 0px;
        top: -7px;
    }

.checkout-outer-list {
    border-radius: 12px !important;
    background: #FFF;
    box-shadow: 0px 0.5px 2px 0px rgba(14, 14, 16, 0.04), 0px 0px 2px 0px rgba(5, 5, 7, 0.12), 0px 2px 2px 0px rgba(4, 4, 6, 0.08);
    padding: 12px 10px !important;
}


#maintenanceModal .modal-header {
    background-color: #FF7800;
    color: #fff;
}

#maintenanceModal .modal-title {
    font-weight: bold;
}

#maintenanceModal .modal-body {
    font-size: 1.1rem;
    line-height: 1.5;
    font-family: 'FSAlbertTrial-Regular' !important;
}

#maintenanceModal .modal-footer .btn-secondary {
    border: 1.5px solid #FF9333; /* Equivalent to var(--Brand-70, #FF9333) */
    background-color: transparent;
    color: #FF9333;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 20px;
}

#paymentPendingModal .modal-outer {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
    margin-bottom: 10px;
}





#paymentPendingModal .itrem-total-main {
    border-top: 0px dotted #FF7800;
    padding-top: 10px;
}
/* Payment Modal Styles */
#paymentPendingModal .modal-header {
    background-color: #FF7800; /* Use the brand color */
    color: #fff;
    border-bottom: 1px solid #E0E0E0;
}

.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}

#paymentPendingModal .modal-title {
    font-size: 20px;
    font-weight: bold;
    font-family: 'FSAlbertTrial-Regular' !important;
}

#paymentPendingModal .modal-body {
    padding: 20px;
    font-size: 16px;
    color: #212121; /* Use the text color from the main stylesheet */
    line-height: 1.6;
    font-family: 'FSAlbertTrial-Regular' !important;
}

/*#paymentPendingModal .service-request {
    border: 1px solid #F0F0F0;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    border-radius: 16px !important;
    background: #FFF;
    box-shadow: 0px 0.5px 2px 0px rgba(14, 14, 16, 0.04), 0px 0px 2px 0px rgba(5, 5, 7, 0.12), 0px 2px 2px 0px rgba(4, 4, 6, 0.08);
    padding: 12px 10px !important;
}*/
#paymentPendingModal .service-list-outer {
    border-radius: 16px !important;
    background: #FFF;
    box-shadow: 0px 0.5px 2px 0px rgba(14, 14, 16, 0.04), 0px 0px 2px 0px rgba(5, 5, 7, 0.12), 0px 2px 2px 0px rgba(4, 4, 6, 0.08);
    padding: 12px 12px 12px 12px;
    margin-bottom: 15px;
}

#paymentPendingModal .service_title {
    width: 80%;
    border-bottom: 0px dotted #FF7800;
    margin-right: 20px;
    padding-bottom: 6px;
    padding-top: 6px;
    font-size: 13px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

#paymentPendingModal .service_quantity {
    width: 20%;
    font-size: 13px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

#paymentPendingModal .service_amount {
    width: 20%;
    font-size: 13px;
    border-bottom: 0px dotted #FF7800;
    font-family: 'FSAlbertTrial-Regular' !important;
}

#paymentPendingModal .service-list-outer h3 {
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    color: #212121;
    font-family: 'FSAlbertTrial-Regular' !important;
}

#paymentPendingModal .service_amount strong {
    font-weight: normal;
}

#paymentPendingModal .list-group-item {
    border: none;
    padding: 0;
}

#paymentPendingModal .modal-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #E0E0E0;
}

#paymentPendingModal .btn-secondary {
    border: 1.5px solid #FF9333; /* Equivalent to var(--Brand-70, #FF9333) */
    background-color: transparent;
    color: #FF9333;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 20px;
}

#paymentPendingModal .btn-primary {
    background-color: #FF7800;
    border: none;
    color: #fff;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}



#paymentPendingModal .invoice-service-request-outer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
}

    #paymentPendingModal .invoice-service-request-outer .invoice-service-request-left {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: #212121;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

    #paymentPendingModal .invoice-service-request-outer .invoice-service-request-right {
        color: #212121;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

#paymentPendingModal .invoice-service-Status-outer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
}


    #paymentPendingModal .invoice-service-Status-outer .invoice-service-Status-left {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: #212121;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

    #paymentPendingModal .invoice-service-Status-outer .invoice-service-Status-right {
        color: #212121;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

#paymentPendingModal .invoice-service-date-outer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
}


    #paymentPendingModal .invoice-service-date-outer .invoice-service-date-left {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: #212121;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

    #paymentPendingModal .invoice-service-date-outer .invoice-service-date-right {
        color: #212121;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

#paymentPendingModal .modal-body h2 {
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    color: #212121;
    text-align: center;
    font-family: 'FSAlbertTrial-Regular' !important;
}

#paymentPendingModal .modal-body p {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: #4D4D4D;
    font-family: 'FSAlbertTrial-Regular' !important;
}

#paymentPendingModal #service-requests-container {
    margin-top: 15px;
}
/* Custom Styles for Service Cards */
#accordionExample .service-card {
    border: 1px solid #ff7800;
    border-radius: 16x;
    margin-bottom: 10px;
    padding: 15px;
    background-color: #fff;
    transition: transform 0.3s;
    box-shadow: none;
}



    #accordionExample .service-card .service-id {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: #212121;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

    #accordionExample .service-card .text-muted small {
        color: #8E8E8E;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

.service-list-left {
    text-align: left;
}

#accordionExample .service-card .status {
    font-weight: bold;
    margin-left: 10px;
}

.service-list-outer .status {
    font-size: 14px;
    font-weight: bold;
    font-family: 'FSAlbertTrial-Regular' !important;
}

#accordionExample .service-card .view-btn {
    background-color: #4d4d4d;
    color: #fff;
    padding: 10px 10px;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    font-size: 15px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

#accordionExample .service-card .card-body {
    background-color: transparent;
    padding: 12px 12px 12px 12px;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
    margin-bottom: 15px;
}

    #accordionExample .service-card .card-body .service-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
        border-bottom: 1px solid #ddd;
    }

        #accordionExample .service-card .card-body .service-item:last-child {
            border-bottom: none;
        }

#accordionExample .service-card .card-footer {
    text-align: right;
    padding: 10px;
    background-color: #FFF;
    border-top: 1px solid #ddd;
    border-radius: 0 0 10px 10px;
}

    #accordionExample .service-card .card-footer p {
        margin: 0;
        font-size: 0.9rem;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

#accordionExample .expand-icon {
    transform: rotate(0deg);
    transition: transform 0.3s;
}

    #accordionExample .expand-icon.expanded {
        transform: rotate(180deg);
    }

#accordionExample .service-item {
    border-bottom: none; /* Ensure no border at the bottom */
    box-shadow: none; /* Remove any potential shadow */
}


/* Custom button without background or border */
#accordionExample .custom-icon-btn {
    background: none; /* No background */
    border: none; /* No border */
    padding: 2; /* Remove padding */
    margin: 0; /* Remove margin */
    cursor: pointer; /* Change cursor to pointer */
}

    /* Icon styles */
    #accordionExample .custom-icon-btn .expand-icon {
        color: black; /* Set the icon color to black */
        font-size: 16px; /* Adjust icon size if needed */
        font-family: 'FSAlbertTrial-Regular' !important;
    }




/* Download Invoice Button */
.download-invoice-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 20px;
    margin-top: 20px;
    font-size: 16px;
    font-weight: bold;
    background-color: #28a745; /* Green background */
    color: #fff; /* White text */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.bill-summary .total-amount {
    font-weight: bold;
    font-size: 1.2rem;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.bill-summary h6 {
    margin-bottom: 0;
    font-weight: bold;
}
/* Bill Summary */
.bill-summary {
    padding: 10px;
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: 0px 12px 17px 2px rgba(0, 0, 0, 0.04), 0px 5px 22px 4px rgba(0, 0, 0, 0.04), 0px 7px 8px 0px rgba(0, 0, 0, 0.05);
}
/* Location & Notes */
.location-notes {
    padding: 10px;
}

.schedule-section i {
    color: #17a2b8;
    margin-right: 5px;
}
/* General styling */




/* Service request and status */
.service-listing-details-outer .service-details {
    display: flex;
    padding: 12px 12px 12px 12px;
    align-items: flex-start;
    gap: 0px;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
    flex-direction: column;
    margin-bottom: 15px;
}

    .service-listing-details-outer .service-details h5 {
        color: #8E8E8E;
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

/* Service Summary */
.service-listing-details-outer .service-summary {
    display: flex;
    padding: 12px 12px 12px 12px;
    align-items: flex-start;
    gap: 0px;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
    flex-direction: column;
    margin-bottom: 15px;
}

    .service-listing-details-outer .service-summary h6 {
        margin-bottom: 15px;
        color: #8E8E8E;
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

.service-listing-details-outer .price {
    background-color: black;
    color: white;
    border-radius: 5px;
    padding: 5px 10px;
    font-weight: bold;
}

.service-listing-details-outer .bill-summary {
    background-color: transparent !important;
    border-radius: 16px !important;
    background: #FFF;
    box-shadow: 0px 0.5px 2px 0px rgba(14, 14, 16, 0.04), 0px 0px 2px 0px rgba(5, 5, 7, 0.12), 0px 2px 2px 0px rgba(4, 4, 6, 0.08);
    padding: 12px 10px !important;
}

.service-listing-details-outer .service-summary p:last-child {
    margin-bottom: 0;
}

.service-listing-details-outer .bill-summary h6 {
    margin-bottom: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #212121;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.service-listing-details-outer .service-summary .status-right {
    margin-left: 10px;
}

.service-listing-details-item {
    border-bottom: 0px dotted #000;
    padding-bottom: 10px;
    padding-top: 10px;
}

.service-listing-details-item-left {
    color: #636363;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.service-listing-details-item-right {
}

    .service-listing-details-item-right .price-unit,
    .service-listing-details-vat-right .price-unit,
    .service-listing-details-discount-right .price-unit {
        color: #8E8E8E;
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

    .service-listing-details-item-right .price-label,
    .service-listing-details-vat-right .price-label,
    .service-listing-details-discount-right .price-label {
        color: #212121;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

.service-listing-details-vat {
    border-bottom: 0px dotted #000;
    padding-bottom: 10px;
    padding-top: 10px;
}

.service-listing-details-vat-left {
}

.service-listing-details-vat-right {
}

.service-listing-details-discount {
    border-bottom: 0px dotted #000;
    padding-bottom: 10px;
    padding-top: 10px;
}

.service-listing-details-discount-left {
}

.service-listing-details-discount-right {
}

.service-listing-details-total {
    padding-bottom: 10px;
    padding-top: 10px;
}

.service-listing-details-total-left {
    color: #636363;
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.service-listing-details-total-right {
}

    .service-listing-details-total-right .price-unit {
        margin-top: 8px;
        margin-right: 5px;
        color: #8E8E8E;
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

    .service-listing-details-total-right .price-label {
        font-size: 28px;
        font-weight: 800;
        line-height: 28px;
        color: #212121;
        padding-bottom: 8px;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

.service-listing-details-outer .download-invoice-btn {
    padding: 5px 15px;
    margin-bottom: 20px;
    margin-top: 35px;
    background-color: #4d4d4d;
    border: none;
    color: #fff;
    border-radius: 15px;
    transition: background-color 0.3s ease;
    height: 65px;
    font-size: 20px;
    width: 100%;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.service-listing-details-outer .service-details p {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #212121;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.service-listing-details-outer .service-summary p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #212121;
    width: 100%;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.service-listing-details-outer .schedule-section strong {
    font-size: 16px;
    line-height: 24px;
    color: #212121;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.service-listing-details-outer .location-notes {
    display: flex;
    padding: 12px 12px 12px 12px;
    align-items: flex-start;
    gap: 0px;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
    flex-direction: column;
    margin-bottom: 15px;
    margin-top: 15px;
}

    .service-listing-details-outer .location-notes h6 {
        margin-bottom: 8px;
        color: #8E8E8E;
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

    .service-listing-details-outer .location-notes p {
        display: flex;
        align-items: baseline;
        gap: 5px;
        margin-bottom: 0px;
    }

        .service-listing-details-outer .location-notes p i {
            color: #212121;
        }

        .service-listing-details-outer .location-notes p span {
            font-size: 15px;
            font-weight: 400;
            line-height: 24px;
            color: #212121;
            font-family: 'FSAlbertTrial-Regular' !important;
        }

.service-listing-details-outer .schedule-section i {
    color: #212121;
}

.service-listing-details-outer .location-notes p {
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    color: #212121;
    font-family: 'FSAlbertTrial-Regular' !important;
}



.order-confirmation-card h4 {
    font-size: 1.75rem;
    color: #343a40;
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.service-details-card h5 {
    color: #636363;
    font-size: 19px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px;
    margin-bottom: 5px;
    font-family: 'FSAlbertTrial-Regular' !important;
}




.order-confirmation-card h1 {
    font-size: 2rem;
    font-weight: bold;
    color: #343a40;
    margin-bottom: 20px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.order-confirmation-card p {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 10px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.order-confirmation-card .details {
    margin-bottom: 0px;
    display: flex;
    padding: 12px 12px 12px 12px;
    align-items: flex-start;
    gap: 0px;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
    flex-direction: column;
    margin-bottom: 15px;
}

.order-confirmation-card p strong {
    color: #8E8E8E;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.order-confirmation-card p span {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #212121;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.service-details-card {
    display: flex;
    padding: 12px 12px 12px 12px;
    align-items: flex-start;
    gap: 0px;
    border-radius: 4px;
    border: 1px solid #E0E0E0;
    flex-direction: column;
    margin-bottom: 15px;
    background-color: transparent;
    box-shadow: none;
}



    .service-details-card .service-item {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        padding-bottom: 0px;
    }

        .service-details-card .service-item h6 {
            color: #8E8E8E;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            margin-bottom: 0px;
            font-family: 'FSAlbertTrial-Regular' !important;
        }

        .service-details-card .service-item span {
            color: #636363;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            font-family: 'FSAlbertTrial-Regular' !important;
        }

            .service-details-card .service-item span.quantity {
                margin-left: 10px;
                margin-right: 10px;
            }

            .service-details-card .service-item span.price {
            }

        .service-details-card .service-item:last-child {
            border-bottom: none;
        }

        .service-details-card .service-item .quantity,
        .service-details-card .service-item .price {
            color: #555;
            font-size: 1rem;
            font-family: 'FSAlbertTrial-Regular' !important;
        }

.order-confirmation-card-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    margin-top: 30px;
}

.order-confirmation-card-total-left {
    color: #636363;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 13px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.order-confirmation-card-total-right .price-unit {
    font-size: 28px;
    font-weight: 800;
    line-height: 28px;
    color: #212121;
    padding-bottom: 8px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.order-confirmation-card-total-right .price-label {
    margin-top: 8px;
    margin-right: 5px;
    color: #8E8E8E;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.order-confirmation-btn-outer {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 160px;
}



    .order-confirmation-btn-outer .cancel-button {
        background-color: #4d4d4d;
        border: none;
        color: #fff;
        padding: 8px 28px;
        cursor: pointer;
        border-radius: 15px;
        transition: background-color 0.3s ease;
        height: 65px;
        font-size: 20px;
        display: flex;
        align-items: center;
        width: 177px;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

        .order-confirmation-btn-outer .cancel-button:focus-visible {
            outline: none;
        }

    .order-confirmation-btn-outer .home-button {
        background-color: #FF7800;
        border: none;
        color: #FFF;
        padding: 8px 28px;
        cursor: pointer;
        border-radius: 15px;
        transition: background-color 0.3s ease;
        height: 65px;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 149px;
        font-family: 'FSAlbertTrial-Regular' !important;
    }


#termsModal .modal-title {
    margin-bottom: 0px;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    color: #212121;
    font-family: 'FSAlbertTrial-Regular' !important;
}

#termsModal .modal-body p {
    color: #4D4D4D;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 0;
    font-family: 'FSAlbertTrial-Regular' !important;
}

    #termsModal .modal-body p a {
        color: #FF7800;
        font-weight: bold;
    }

#termsModal .modal-footer .btn-secondary {
    border: 1.5px solid #FF9333; /* Equivalent to var(--Brand-70, #FF9333) */
    background-color: transparent;
    color: #FF9333;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 20px;
}

#termsModal .modal-footer .btn-primary {
    background-color: #FF7800;
    border: none;
    color: #FFF;
    padding: 8px 28px;
    border-radius: 15px;
    transition: background-color 0.3s ease;
    height: 50px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'FSAlbertTrial-Regular' !important;
}

#termsModal .modal-header {
    border-bottom: 0;
}

#termsModal .modal-footer {
    border-top: 0;
}

#termsModal .modal-body {
    padding: 0 18px;
}

#cancelServiceModal .modal-title {
    margin-bottom: 0px;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    color: #212121;
    font-family: 'FSAlbertTrial-Regular' !important;
}

#cancelServiceModal .modal-body p {
    color: #212121;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 0;
    font-family: 'FSAlbertTrial-Regular' !important;
}

    #cancelServiceModal .modal-body p a {
        color: #FF7800;
        font-weight: bold;
    }

#cancelServiceModal .modal-footer .btn-secondary {
    border: 1.5px solid #FF9333; /* Equivalent to var(--Brand-70, #FF9333) */
    background-color: transparent;
    color: #FF9333;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 20px;
}

#cancelServiceModal .modal-footer .btn-danger {
    background-color: #FF7800;
    border: none;
    color: #FFF;
    padding: 8px 28px;
    border-radius: 15px;
    transition: background-color 0.3s ease;
    height: 65px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'FSAlbertTrial-Regular' !important;
}

#cancelServiceModal .modal-header {
    border-bottom: 0;
}

#cancelServiceModal .modal-footer {
    border-top: 0;
}

#cancelServiceModal .modal-body {
    padding: 0 18px;
}

#cancelServiceModal .close {
    background-color: #FF7800;
    padding: 8px;
    color: #fff;
    border-radius: 10px;
    position: relative;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    opacity: 1;
}

    #cancelServiceModal .close span {
        position: absolute;
        top: 0px;
        left: 7px;
    }

button:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
}

button:focus-visible {
    outline: 0;
}

.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .show > .btn-danger.dropdown-toggle:focus {
    box-shadow: none;
}

.itrem-total-outer {
    justify-content: space-between;
}

    .itrem-total-outer span {
        padding-bottom: 0px !important;
        font-family: 'FSAlbertTrial-Regular' !important;
    }

    .itrem-total-outer h3 {
        margin: 0px !important;
        line-height: 16px;
    }

.second-total-outer,
.fourth-total-outer {
    margin-bottom: 10px;
}

.service-item-list-div {
    padding: 0 0;
}

.service-details-title-div {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    color: #212121;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.service-list-total-outer {
    border-top: 0px dotted #000;
    padding-top: 8px;
}

    .service-list-total-outer .itrem-total-left {
    }

    .service-list-total-outer #item-total .total-unit {
    }

    .service-list-total-outer #item-total .total-price {
    }

.service-list-vat-outer {
    padding-bottom: 10px;
}

.service-list-left .text-muted {
    margin-bottom: 0px;
}

.service-list-outer-main {
    margin-top: 15px;
}

/* Shared styles for both buttons */
.button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    border-radius: 16px; /* Equivalent to var(--Button-2xl, 16px) */
    padding: 10px 24px; /* Adjust as per padding specifications */
    font-size: 17px;
    font-weight: 700;
    transition: all 0.3s ease-in-out;
    font-family: 'FSAlbertTrial-Regular' !important;
}

/* Secondary button */
.secondary-btn {
    border: 1.5px solid #FF9333; /* Equivalent to var(--Brand-70, #FF9333) */
    background-color: transparent;
    color: #FF9333;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

.same-size {
    width: 48%; /* Adjust the percentage as needed */
}

/* Primary button */
.primary-btn {
    background-color: #FF7800 !important; /* Equivalent to var(--Actions-Primary-Default, #FF7800) */
    color: #FFFFFF;
    border: none;
    flex: 1 0 0;
    width: 100px;
}



    .primary-btn:active {
        background-color: #FF7800; /* Darker shade on active */
    }

.secondary-btn:active {
    background-color: rgba(255, 147, 51, 0.2); /* Active state for secondary */
}


/* Target the close button and change its color */
button.close {
    color: #fff; /* Set the color of the X button */
    opacity: 1; /* Ensure full opacity */
}

    /* Ensure the X inside the span is also white */
    button.close span {
        color: #fff; /* Set the color of the X symbol */
    }

/* Container for the entire cart section */
.cart-question-div {
    position: relative;
    display: inline-block; /* Ensures the container adapts to the content size */
}

/* Cart icon container styling */
.cart-icon-container {
    position: relative;
    display: inline-block; /* Keeps the cart icon and count together */
}

/* Cart image styling */
.cart-image {
    width: 40px; /* Adjust the size of the cart icon */
    height: auto;
}

/* Styling for the cart count */
.cart-icon-span {
    position: absolute;
    top: -7px; /* Move count upwards for overlap */
    left: 10px; /* Adjusted value to move count more to the left */
    width: 24px; /* Set the width of the count box */
    height: 24px; /* Set the height of the count box */
    border-radius: 50%; /* Make the count circular */
    background: #FF7800; /* Background color for the count */
    color: white; /* Text color */
    font-size: 14px; /* Font size for the count */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Optional shadow for effect */
    font-family: 'FSAlbertTrial-Regular' !important;
}

/* Optional styling to make the cart icon more visible */
.cart-icon-container:hover .cart-image {
    transform: scale(1.1); /* Slightly increase the size of the cart on hover */
    transition: transform 0.2s ease-in-out; /* Smooth transition */
}

.cart-question-div a .cart-icon-span {
    position: absolute;
    top: -3px;
    left: 20px; /* Adjusted value to move count more to the left */
    background-color: #FF7800;
    color: #fff;
    border-radius: 50px;
    width: 23px;
    height: 23px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.location-inner-search-input {
    /* border-radius: 4px; */
    /* border: 1px solid #D0D0D0; */
    /* background: #FFF; */
    /* height: 48px; */
    color: #212121;
    padding: 0px 4px 0px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    font-family: 'FSAlbertTrial-Regular' !important;
}

.service-status-label {
    display: flex;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 6px;
    font-family: 'FSAlbertTrial-Regular' !important;
}

/* Status color styles */
.status-new {
    background-color: #D1ECF1;
    border: 1px solid #0C5460;
    color: #0C5460;
}

.status-started {
    background-color: #CCE5FF;
    border: 1px solid #004085;
    color: #004085;
}

.status-completed {
    background-color: #D4EDDA;
    border: 1px solid #155724;
    color: #155724;
}

.status-cancelled {
    background-color: #FEEAE6;
    border: 1px solid #A71D2A;
    color: #A71D2A;
}

/* Assigned status */
.status-assigned {
    background-color: #E2E3E5;
    border: 1px solid #383D41;
    color: #383D41;
}

/* On Hold status */
.status-on-hold {
    background-color: #FFE8A1;
    border: 1px solid #DDAA00;
    color: #DDAA00;
}
/* 1) Make header a fixed height */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px; /* explicit header height */
    z-index: 999;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 2) Push page content down by exactly the header height */
body {
    margin: 0;
    padding-top: 60px; /* same value as header height */
    overflow-x: hidden; /* no horizontal scroll */
    touch-action: manipulation; /* block pinch?zoom */
}

/* 3) Fluid containers to span full viewport */
/*.container, .custom-container {
    width: 100vw;
    padding: 0 1rem;
}*/

@media (min-width: 576px) {
    .container, .custom-container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 768px) {
    .container, .custom-container {
        padding: 0 2rem;
    }
}

@media (min-width: 992px) {
    .container, .custom-container {
        padding: 0 3rem;
    }
}

/* 4) Prevent any overflow from images or media */
img, video, iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 5) Keep box-model predictable */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 6) (Optional) If you still need the modal centering & cart icon tweaks */
.location-icon {
    color: red;
}

#locationModal .modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    min-height: 100vh;
    max-width: 700px;
    width: 80%;
}

#locationModal .modal-content {
    margin: auto;
}

#location-search-btn {
    height: 100%;
    margin-left: 5px;
}

.cart-icon-container {
    position: relative;
    display: inline-block;
    transform: translateX(-10px);
}

    .cart-icon-container img {
        width: 40px;
        height: auto;
    }