/* =============================================
   A&L Simple Services Booking - Styles
   Matches existing design system & XD mockups
   ============================================= */

/*  VARIABLES (matching existing palette)  */
:root {
    --al-primary: #CBA482;
    --al-primary-hover: #b8926f;
    --al-text: #1B1A1A;
    --al-text-light: #939393;
    --al-border: #CBA482;
    --al-bg-cream: #F5F0EB;
    --al-bg-light: #FAF7F4;
    --al-danger: #C03A2C;
    --al-booked: #CBA482;
    --al-booked-bg: #CBA482;
    --al-pink-btn: #C03A6B;
}

/*  SERVICE INTRO  */
.al_service_listing_filter {
    background: #fff;
    padding: 64px 0 64px 0;
}
.al-service-intro {
    max-width: 824px;
    margin-bottom: 34px;
}

.al-service-intro-title {
    color: var(--al-text);
    margin-bottom: 16px;
    font-weight: 300;
    line-height: 1.2;
}

.al-service-intro-text {
    color: var(--al-text);
    line-height: 1.6;
    margin-bottom: 24px;
}

/*  PILL FILTERS  */
.al-service-filters {
    /* margin-bottom: clamp(2.500rem, calc(0.965rem + 3.198vw), 4.563rem); */
}

.al-filter-label {
    font-weight: 400;
    color: var(--al-text);
    margin-bottom: 26px;
}

.al-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 46px;
}

.al-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 30px;
    border: 1px solid var(--al-border);
    border-radius: 27px;
    background: transparent;
    color: var(--al-primary);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: 'AtlasGrotesk-Regular';
    min-width: 170px;
    text-transform: uppercase;
}

.al-pill:hover {
    background: #cba482;
    color: #fff;
}

.al-pill.al-pill-active {
    background: var(--al-primary);
    border-color: var(--al-primary);
    color: #fff;
}

.al-pill.al-pill-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/*  SERVICES TABLE  */
.al-services-table-wrap {
    width: 100%;
      margin-top: clamp(2.500rem, calc(0.965rem + 3.198vw), 4.563rem);
}

/* Header */

.al-services-table-header {
    /* margin-bottom: 10px; */
}

.al-table-title {
    margin-bottom: 0;
    font-weight: 500;
    line-height: 1;
    color: #1B1A1A;
}
.al-table-title.mobiletitle {
    display: none;
}
.al-table-cols {
    display: grid;
    grid-template-columns: 2fr 100px 140px 1.5fr 140px 140px;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid #E5DCD2;
    color: #CBA482;
    align-items: end;
}


/* Row */

.al-service-row {
    display: grid;
    grid-template-columns: 2fr 100px 140px 1.5fr 140px 140px;
    gap: 20px;
    align-items: center;
    padding: 31px 0;
    border-bottom: 1px solid #e6e2dc;
}


/* Title */

.al-service-name {
    font-weight: 400;
}


/* Price */

.al-service-price {
    font-weight: 500;
}


/* Button */

.al-book-btn {
    padding: 10px 22px;
    border-radius: 30px;
    border: 1px solid #111;
    background: transparent;
    transition: .3s;
}

.al-book-btn.active {
    background: #111;
    color: #fff;
}


/* Hover */

.al-service-row:hover {
    /* background: rgba(0,0,0,0.02); */
}


/* Button */

.al-book-btn {
    padding: 10px 22px;
    border-radius: 30px;
    border: 1px solid #222;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    transition: .3s ease;
}

.al-book-btn:hover {
    background: #222;
    color: #fff;
}


/*  BOOK NOW BUTTON  */
.al-book-btn {
    width: 130px;
    padding: 11.5px 16px;
    border: 1px solid #1B1A1A;
    border-radius: 27px;
    background: transparent;
    color: #1B1A1A;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.45;
}

.al-book-btn:hover:not(.al-booked):not(.al-booking) {
    background: #1B1A1A;
    border-color: #1B1A1A;
    color: #fff;
}

.al-book-btn.al-booked {
    background: #1B1A1A;
    border-color: #1B1A1A;
    color: #fff;
    cursor: default;
    position: relative;
    opacity: 1;
}

.al-book-btn.al-booked::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    background: var(--al-primary);
    border-radius: 50%;
    border: 2px solid #fff;
}

.al-book-btn.al-booking {
    opacity: 0.6;
    cursor: wait;
}

.al-no-services,
.al-loading {
    text-align: center;
    color: var(--al-text-light);
    padding: 40px 0;
}
.al-cart-header {
    margin-bottom: 69px;
}
.al-cart-header  .font55{
    margin-bottom: 0;
}
.al-cart-subtitle {
    margin: 0;
    font-family: 'PP Eiko, Light';
}
/*  BOOKINGS PAGE WRAPPER  */

.al-cart-section {
    margin-bottom: 74px;
}

.al-bookings-page-wrap {
    padding-bottom: 60px;
}
.al-bookings-page{
    padding-top: clamp(6.250rem, calc(-0.634rem + 14.341vw), 15.500rem);
}

.al-cart-section-header {
    border-bottom: 1px solid var(--al-border);
}

.al-cart-cols {
    display: grid;
    grid-template-columns: 2fr 140px 90px 100px 1.4fr 100px 60px 40px;
    align-items: end;
    padding-bottom: 24px;
    color: #CBA482;
    gap: 10px;
}
.al-cart-cols-title {
    margin: 0;
    line-height: 1;
    color: #1B1A1A;
}
.al-cart-row {
    padding: 20px 0;
    border-bottom: 1px solid var(--al-border);
    display: grid;
    grid-template-columns: 2fr 140px 90px 100px 1.4fr 100px 60px 40px;
    align-items: center;
    gap: 10px;
    position: relative;
}

/* "Add More" navigation links under each cart section */
.al-cart-add-more {
    margin-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--al-border);
}

.al-cart-add-more-link {
    color: var(--al-primary) !important;
    text-decoration: underline;
    font-family: 'AtlasGrotesk-Regular', sans-serif;
    transition: color 0.2s ease;
    text-underline-offset: 4px;
}

.al-cart-add-more-link:hover,
.al-cart-add-more-link:focus {
    color: #1B1A1A !important;
    text-decoration: underline;
}

/* Per-service date picker on cart page */
.al-cart-date-cell {
    display: flex;
    align-items: center;
}
.al-cart-date {
       width: 100%;
    padding: 0 !important;
    border: 1px solid #CBA482;
    border-radius: 27px;
    background-color: transparent;
    color: #1B1A1A;
    font-family: 'AtlasGrotesk-Regular', sans-serif;
    font-size: 15px !important;
    line-height: 1;
    cursor: pointer;
    border: none;
    border-radius: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23939393' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 24px center !important;
    background-size: 16px 16px !important;
}
.al-cart-date::placeholder {
    color: #1b1a1a;
    opacity: 1;
    font-size: 15px !important;
    font-family: "AtlasGrotesk-Regular", sans-serif;
}
.al-cart-date:focus {
    outline: none;
    border-color: var(--al-primary-hover);
}
.al-cart-cols-title.mobiletitle {
        display: none;
}
.al-qty-select {
    border: 1px solid #CBA482 !important;
    border-radius: 27px;
    font-size: 15px !important;
    padding: 11.5px 16px !important;
    min-width: 60px;
    font-family: "AtlasGrotesk-Regular", sans-serif;
    line-height: 1 !important;
}
.al-remove-service {
    padding: 0;
    width: 40px;
    height: 40px;
    background: transparent;
}


/*  CART ACTIONS  */
.al-cart-actions {
    margin-top: 40px;
    text-align: left;
}

.al-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 40px;
    background: var(--al-primary);
    border: 2px solid var(--al-primary);
    border-radius: 30px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.al-btn-primary:hover {
    background: var(--al-primary-hover);
    border-color: var(--al-primary-hover);
}

.al-btn-primary.al-submitting {
    opacity: 0.6;
    cursor: wait;
}

/*  BOOKING FORM (INLINE ON PAGE)  */
.al-booking-form-section {
    background: #E5DCD2;
    padding: 114px 0 198px 0;
}


.al-booking-form-header {
    margin-bottom: 0;
    max-width: 845px;
}

.al-booking-form-header h2 {
    line-height: 1.3;
    margin-bottom: 37px;
}

.al-booking-form-header p {max-width: 661px;}

/*  GRAVITY FORMS BOOKING FORM STYLING  */

/* Two-column grid layout for GF fields */
.al-booking-form-section .gform_wrapper .gform_fields {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

/* Section headers span full width */
.al-booking-form-section .gform_wrapper .gsection {
    grid-column: 1 / -1;
    margin-top: clamp(2.500rem, calc(1.012rem + 3.101vw), 4.500rem) !important;
    padding-bottom: 0;
    border-bottom: none !important;
    margin-bottom: 33px;
}

.al-booking-form-section .gform_wrapper .gsection .gsection_title {
    font-size: 30px;
    margin-bottom: 10px;
    line-height: 1;
}

.al-booking-form-section .gform_wrapper .gsection::after {
    content: '';
    display: block;
    height: 1px;
    background: var(--al-primary);
    margin-top: 10px;
}

/* Field labels */
.al-booking-form-section .gform_wrapper .gfield_label {
    font-size: 16px !important;
    margin-bottom: 6px;
    font-family: 'AtlasGrotesk-Regular';
}

/* All inputs on dark bg: transparent with light border */
.al-booking-form-section .gform_wrapper input[type="text"],
.al-booking-form-section .gform_wrapper input[type="email"],
.al-booking-form-section .gform_wrapper input[type="tel"],
.al-booking-form-section .gform_wrapper input[type="number"],
.al-booking-form-section .gform_wrapper input[type="url"],
.al-booking-form-section .gform_wrapper textarea,
.al-booking-form-section .gform_wrapper select {
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    font-size: 15px !important;
    background: #FFFFFF;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
    padding: 15px  10px!important;
    height: 50px !important;
    font-family: 'AtlasGrotesk-Regular';
}

.al-booking-form-section .gform_wrapper input:focus,
.al-booking-form-section .gform_wrapper textarea:focus {
    outline: none;
    border-color: var(--al-primary);
}

/* Agency section: dark pink/filled inputs per XD design */
.al-booking-form-section .gform_wrapper .al-gf-dark-field input[type="text"],
.al-booking-form-section .gform_wrapper .al-gf-dark-field input[type="email"],
.al-booking-form-section .gform_wrapper .al-gf-dark-field input[type="tel"] {
    background: #fff;
    border-color: #fff !important;
}

.al-booking-form-section input::placeholder,
.al-booking-form-section textarea::placeholder {
    font-size: 16px !important;
}

.al-booking-form-section .ginput_container.ginput_container_textarea{
    margin: 0;
}

.al-booking-form-section .gform_wrapper .al-gf-dark-field .gfield_label {
}

/* Half-width fields already handled by grid */
.al-booking-form-section .gform_wrapper .al-gf-field-half {
    grid-column: span 1;
    margin-bottom: 16px !important;
}

/* Full-width fields (like address) */
.al-booking-form-section .gform_wrapper .gfield:not(.al-gf-field-half):not(.gsection):not(.gfield--type-hidden) {
    grid-column: span 1;
}

/* Hidden fields */
.al-booking-form-section .gform_wrapper .gfield--type-hidden,
.al-booking-form-section .gform_wrapper .gfield_visibility_hidden {
    display: none !important;
}

/* Submit button */
.al-booking-form-section .gform_wrapper .gform_footer,
.al-booking-form-section .gform_wrapper .gform_page_footer {
    grid-column: 1 / -1;
    margin-top: 30px !important;
    padding: 0;
    border: none;
}

.al-booking-form-section .gform_wrapper input[type="submit"],
.al-booking-form-section .gform_wrapper .gform_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 50px !important;
    background: var(--al-primary);
    border: 2px solid #fff !important;
    border-radius: 30px;
    color: #fff;
    font-size: 16px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    min-width: 317px;
    font-family: "AtlasGrotesk-Regular", sans-serif;
}

.al-booking-form-section .gform_wrapper input[type="submit"]:hover,
.al-booking-form-section .gform_wrapper .gform_button:hover {
    background: #fff;
    border-color: var(--al-primary-hover) !important;
    color: var(--al-primary);
}

/* Validation errors */
.al-booking-form-section .gform_wrapper .gfield_error .gfield_label {
    /* color: #ff6b6b; */
}

.al-booking-form-section .gform_wrapper .gfield_error input {
    border-color: #ff6b6b;
}

.al-booking-form-section .gform_wrapper .validation_message {
    padding: 8px 0 0 !important;
}

/* Confirmation message (hidden — we show our modal instead) */
.al-booking-form-section .gform_confirmation_wrapper {
    display: none;
}

/* GF spinner */
.al-booking-form-section .gform_wrapper .gform_ajax_spinner {
    margin-left: 10px;
}

.al-form-actions {
    margin-top: 40px;
}

/* GF form wrapper reset */
.al-gf-form-wrap .gform_wrapper {
    margin: 0;
    padding: 0;
}

/*  SUCCESS MODAL  */
.al-success-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
}

.al-success-modal-content {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: auto;
    background: #fff;
    border-radius: 8px;
    padding: 50px 60px;
    text-align: center;
}

.al-success-progress-wrap {
    position: absolute;
    top: 38px;
    right: 65px;
    width: 90px;
    height: 4px;
    background: #E5DCD2;
    border-radius: 2px;
    overflow: hidden;
}

.al-success-progress-line {
    width: 0;
    height: 100%;
    background: var(--al-primary);
    border-radius: 2px;
    transition: none;
}

.al-success-progress-line.al-animating {
    width: 100%;
    transition: width 5s linear;
}

.al-success-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--al-text-light);
    cursor: pointer;
}

.al-success-title {
    font-weight: 300;
    color: var(--al-primary);
    margin-bottom: 20px;
}

.al-success-body p {
    color: var(--al-text-light);
    line-height: 1.6;
    margin-bottom: 24px;
}

.al-back-link {
    color: var(--al-text);
    text-decoration: underline;
    font-weight: 500;
}

.al-back-link:hover {
    color: var(--al-primary);
}

/*  HEADER CART ICON  */
.al-cart-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 53px;
    height: 53px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: transparent;
    color: var(--al-text);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

body:not(:has(.heroBanner))  .al-cart-icon,
body:not(:has(.heroBanner)) .page-my-dashboard .al-cart-icon{
    border-color: #1b1a1a;
}

body:not(:has(.heroBanner))  .al-cart-icon svg rect,
body:not(:has(.heroBanner))  .al-cart-icon svg path,
body:not(:has(.heroBanner))  .al-cart-icon svg rect,
body:not(:has(.heroBanner))  .al-cart-icon svg path{
    stroke: #1b1a1a;
}

body:not(:has(.heroBanner))  .al-cart-icon.al-cart-has-items svg rect,
body:not(:has(.heroBanner))  .al-cart-icon.al-cart-has-items svg path,
body:not(:has(.heroBanner))  .al-cart-icon.al-cart-has-items svg rect,
body:not(:has(.heroBanner))  .al-cart-icon.al-cart-has-items svg path{
    stroke: #fff;
}


.al-cart-icon.al-cart-has-items:after {
    content: '';
    position: absolute;
    top: 1px;
    right: -1px;
    width: 12px;
    height: 12px;
    background: var(--al-primary);
    border-radius: 50%;
    border: 2px solid #fff;
}

body:not(.menuOpen) .site-header.sticky .al-cart-icon{
    border-color: #1B1A1A;
}
body:not(.menuOpen) .site-header.sticky .al-cart-icon svg rect , body:not(.menuOpen) .site-header.sticky .al-cart-icon svg path{
   stroke: #1B1A1A;
}

body:not(.menuOpen) .site-header.sticky .al-cart-icon.al-cart-has-items svg rect , body:not(.menuOpen) .site-header.sticky .al-cart-icon.al-cart-has-items svg path{
    stroke: #fff;
}

.al-cart-icon:hover {
    border-color: var(--al-primary);
}

/* .al-cart-icon svg {
    width: 20px;
    height: 20px;
} */

/* Filled/active state when cart has items */
.al-cart-icon.al-cart-has-items {
    background: var(--al-text);
    border-color: var(--al-text);
    color: #fff;
}

.menuOpen .al-cart-icon.al-cart-has-items svg rect , .menuOpen .al-cart-icon.al-cart-has-items  svg path{
         stroke: #fff !important;
}

.al-cart-icon.al-cart-has-items:hover {
    background: #333;
    border-color: #333;
}

/*  VIEW YOUR CART BUTTON (services listing pages)  */
.al-view-cart-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    border-bottom: 1px solid #e6e2dc;
    padding-bottom: 20px;
}

.al-view-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11.5px 28px;
    border: 1px solid var(--al-primary);
    border-radius: 27px;
    background: var(--al-primary);
    color: #fff !important;
    font-family: 'AtlasGrotesk-Regular', sans-serif;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center;
        line-height: 1 !important;
}

.al-view-cart-btn:hover,
.al-view-cart-btn:focus {
    background: #1B1A1A;
    border-color: #1B1A1A;
    color: #fff;
    text-decoration: none;
}

.al-view-cart-btn.is-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

.al-view-cart-btn.is-disabled:hover,
.al-view-cart-btn.is-disabled:focus {
    background: var(--al-primary);
    border-color: var(--al-primary);
}

/*  IMPORTANT INFORMATION  */
.al-important-info {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--al-border);
}

.al-important-info h2 {
    font-weight: 300;
    color: var(--al-text);
    margin-bottom: 24px;
}

.al-important-info-content {
    column-count: 2;
    column-gap: 40px;
    color: var(--al-text);
    line-height: 1.8;
}

.al-important-info-content ul {
    list-style: disc;
    padding-left: 16px;
    margin: 0;
}

.al-important-info-content li {
    margin-bottom: 4px;
    break-inside: avoid;
}

/*  SERVICE LANDING PAGE CARDS  */
.al-services-landing-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 40px 0;
}

.al-landing-card {
    position: relative;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    min-height: 350px;
}

.al-landing-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.al-landing-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    color: #fff;
}

.al-landing-card-title {
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 16px;
    color: #fff;
}

.al-landing-card .al-btn-primary {
    font-size: 12px;
    padding: 10px 28px;
}

.al-homepage-services {
    padding: 80px 0;
}

.al-homepage-services-title {
    font-weight: 300;
    color: var(--al-text);
    margin-bottom: 40px;
    text-align: center;
}



@media (max-width: 1800px) {
   .al-pill {
        padding: 14px 18px;
        font-size: 15px;
        min-width: 130px;
    }
}



@media (max-width: 1400px) {
    .al-service-cart .wrapper {
        max-width: 90vw !important;
    }
}

/* @media (max-width: 1280px) {
    .al-service-cart .wrapper {
        max-width: 1196px !important;
    }
} */


@media (max-width: 1015px) {
    .al-cart-icon {
        border: none;
        width: 40px;
        margin-right: 4px;
    }

    .al-cart-icon svg rect , .al-cart-icon svg path{
        stroke: #1b1a1a;
    }
    .al-cart-icon.al-cart-has-items{
        background: transparent;
    }

    .menuOpen .al-cart-icon.al-cart-has-items svg rect , .menuOpen .al-cart-icon.al-cart-has-items  svg path{
         stroke: #fff;
    }

    .al-cart-icon.al-cart-has-items:after {
        top: 7px;
        right: 4px;
    }

    .menuOpen .site-header .al-cart-icon{
        display: none;
    }

    body:not(.menuOpen) .site-header.sticky .al-cart-icon.al-cart-has-items svg rect, body:not(.menuOpen) .site-header.sticky .al-cart-icon.al-cart-has-items svg path {
        stroke: #1B1A1A;
    }

    .al-cart-icon.al-cart-has-items:hover {
        background: transparent;
        border-color: transparent;
    }

    body:not(:has(.heroBanner))  .al-cart-icon.al-cart-has-items svg rect,
    body:not(:has(.heroBanner))  .al-cart-icon.al-cart-has-items svg path,
    body:not(:has(.heroBanner))  .al-cart-icon.al-cart-has-items svg rect,
    body:not(:has(.heroBanner))  .al-cart-icon.al-cart-has-items svg path{
        stroke: #1b1a1a;
    }
}
@media (max-width: 992px) {
    .al-services-landing-cards {
        grid-template-columns: 1fr;
    }

    .al-form-grid {
        grid-template-columns: 1fr;
    }

    .al-booking-form-section {
        padding: 40px 0;
    }

    .al-booking-form-section .gform_wrapper .gform_fields {
        grid-template-columns: 1fr;
    }

    .al-important-info-content {
        column-count: 1;
    }

    .al-table-cols,
    .al-cart-cols {
        display: none;
    }

    .al-service-row,
    .al-cart-row {
        flex-wrap: wrap;
        gap: 8px;
        padding: 16px 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    

    .al-service-name,
    .al-cart-name {
        width: 100%;
        flex: none;
        font-weight: 500;
        padding-right: 0;
        margin-bottom: 4px;
    }

    .al-service-pax,
    .al-service-vehicle,
    .al-service-fees,
    .al-service-price,
    .al-cart-pax,
    .al-cart-vehicle,
    .al-cart-fees,
    .al-cart-price {
        width: auto;
        text-align: left;
        font-size: 13px;
    }

    .al-service-pax::before { content: '#PAX: '; color: var(--al-primary); }
    .al-service-vehicle::before { content: 'Vehicle Size: '; color: var(--al-primary); }
     .al-service-vehicle.duration::before { content: 'Duration: '; color: var(--al-primary); }
    .al-service-fees::before { content: 'Special Fees: '; color: var(--al-primary); }
    .al-service-price::before {content: 'Net Cost: ';color: var(--al-primary);}

    .al-cart-pax::before { content: '#PAX: '; color: var(--al-primary); }
    .al-cart-vehicle::before { content: 'Vehicle Size: '; color: var(--al-primary); }
    .al-cart-vehicle.duration::before { content: 'Duration: '; color: var(--al-primary); }
    .al-cart-fees::before { content: 'Special Fees: '; color: var(--al-primary); }
    .al-cart-price::before {content: 'Net Cost: ';color: var(--al-primary);}
    .al-cart-date-cell::before { content: 'Service Date: '; color: var(--al-primary); margin-right: 8px; }
    .al-cart-date-cell {         width: auto;
        flex-wrap: nowrap;
        gap: 6px; }
    .al-cart-date {         width: calc(100% - 200px) !important;
        display: block;
        min-width: 150px; }

    .al-book-btn {
        width: auto;
        margin-left: 0;
    }

    /* .al-pill {
        padding: 16px 30px;
        font-size: 15px;
        min-width: auto;
    } */

    .al-booking-form-section .gform_wrapper .gfield_label {
        font-size: 15px !important;
    }
    .al-cart-remove {
        position: absolute;
        bottom: 17px;
        left: 70px;
    }

    .al-booking-form-section .gform_wrapper .gform_footer,
    .al-booking-form-section .gform_wrapper .gform_page_footer {
        margin-top: 0px !important;
    }
    .al-table-title.mobiletitle {
        margin-bottom: 10px;
        border-bottom: 1px solid #e6e2dc;
        padding-bottom: 10px;
        display: block;
    }

    .al-cart-section-header{
        border-bottom: 0;
    }
    .al-cart-cols-title.mobiletitle {
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--al-border);
        display: block;
    }

    .al-service-cart .wrapper {
        max-width: 100% !important;
    }
}

@media (max-width: 767px) {

    .al-pill-group {
        gap: 16px;
        margin-bottom: 40px;
    }
    .al-service-intro {
        margin: 30px 0;
    }

    .al-pill {
        font-size: 14px;
        max-width: calc((100% - 20px) / 2);
        width: 100%;
    }

    .al-success-modal-content {
        margin: 20px;
        padding: 30px 20px;
    }

    .al-landing-card {
        min-height: 250px;
    }
}

/* ──────────────────────────────────────────────
 * DEPARTURE DATE VALIDATION (My Bookings)
 * Banner + per-row highlight when a service is
 * missing its Departure Date at submit time.
 * ────────────────────────────────────────────── */
.al-cart-date-error {
    display: none;
    margin: 0 0 30px;
    padding: 14px 20px;
    border: 1px solid #c0392b;
    color: #c0392b;
    background: rgba(192, 57, 43, 0.06);
    font-family: 'AtlasGrotesk-Regular', sans-serif;
}

.al-cart-row.al-date-missing .al-cart-date {
    color: #c0392b;
    /* re-tint the calendar icon red */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
}

.al-cart-row.al-date-missing .al-cart-date::placeholder {
    color: #c0392b;
}