/* =========================================
   1. ADOBE FONTS
   ========================================= */

@import url('https://use.typekit.net/who2beb.css');


/* =========================================
   2. UNIVERSAL TYPOGRAPHY
   ========================================= */

body,
h1, h2, h3, h4, h5, h6,
p, span:not(.fa):not([class*="fa-"]),
div, label, button, input,
select, option, a,
.service-item, .sb-card, .sb-content {
    font-family: "malila", sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
b, strong {
    font-weight: 700 !important;
    font-style: normal !important;
}

p, span:not(.fa):not([class*="fa-"]),
div, label, input, select, option {
    font-weight: 500 !important;
    font-style: normal !important;
}


/* =========================================
   3. BUTTON STYLING
   ========================================= */

.btn,
button,
input[type="submit"],
.sb-btn,
.sb-next-btn,
.sb-confirm-btn,
.sb-submit-btn,
#sb_book_btn {
    font-family: "malila", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    background-color: #E65A28 !important;
    color: #FDF5E6 !important;
    border-radius: 8px !important;
    border: none !important;
    padding: 10px !important;
    min-width: 0 !important;
    height: auto !important;
    width: auto !important;
    display: inline-block !important;
    box-shadow: none !important;
    cursor: pointer !important;
    text-align: center !important;
    background-image: none !important;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
.sb-btn:hover,
.sb-next-btn:hover,
#sb_book_btn:hover {
    background-color: #CC4E20 !important;
    color: #FFFFFF !important;
}

#sb_book_btn span {
    font-family: "malila", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #FDF5E6 !important;
}


/* =========================================
   4. SIDEBAR SPACING
   ========================================= */

.sb-company-details,
.sb-company-logo,
.sb-company-image,
.sb-company-info,
.company-info,
.sb-header,
.sb-company-card-header {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sb-sidebar,
.sb-sidebar .sb-card {
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

.sb-sidebar .card-body,
.sb-sidebar .sb-card-body,
.sb-steps-nav,
.sb-steps,
.sb-steps-container,
.sb-nav-list,
.sb-step-list {
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* =========================================
   5. HIDE TIMEZONE / COMPANY TIME
   ========================================= */

.sb-company-time,
.company-time,
.sb-company-time-wrap,
.company-time-wrap,
.sb-timezone,
.company-timezone,
.current-time-block,
.timezone-info,
.sb-time,
.time-slot-header,
.sb-time-slot-header,
.sb-top-header,
.sb-top-bar,
.sb-timezone-display,
.client-timezone,
.timezone-wrapper,
#sb_time_zone,
div[class*="time-zone"],
div[class*="timezone"],
div[ng-if*="companyTime"],
span[ng-bind*="companyTime"],
div[class*="sb-top-header"] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}


/* =========================================
   6. HIDE DATE / COPYRIGHT FOOTERS
   ========================================= */

.copyright,
.sb-copyright,
footer.footer,
.footer-copy,
.sb-date-footer,
.sb-current-date,
.date-display,
.sb-footer-date,
div[class*="date-display"],
div[class*="current-date"] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
}


/* =========================================
   7. BOOKING CONTENT SPACING
   ========================================= */

.sb-booking-container,
.sb-content-inner,
#sb_booking_content {
    margin-top: 0 !important;
    padding-top: 10px !important;
}


/* =========================================
   8. BACK BUTTON
   CSS-DRAWN ARROW
   ========================================= */

#sb_timeline #steps #sb_back_button
a > span.fa-angle-left {
    font-family: sans-serif !important;
    font-size: 0 !important;
    line-height: 0 !important;
    width: 12px !important;
    height: 12px !important;
    display: inline-block !important;
    position: relative !important;
    padding: 0 !important;
    margin-right: 12px !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    vertical-align: middle !important;
}

#sb_timeline #steps #sb_back_button
a > span.fa-angle-left::before {
    content: none !important;
    display: none !important;
}

#sb_timeline #steps #sb_back_button
a > span.fa-angle-left::after {
    content: "" !important;
    display: block !important;
    width: 9px !important;
    height: 9px !important;
    border-left: 2px solid #BF68B1 !important;
    border-bottom: 2px solid #BF68B1 !important;
    border-top: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    transform: rotate(45deg) !important;
    position: absolute !important;
    top: 1px !important;
    left: 2px !important;
}

#sb_timeline #steps #sb_back_button
a > span:last-child {
    font-family: "malila", sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #BF68B1 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}


/* =========================================
   9. CALENDAR NAVIGATION ARROWS
   ========================================= */

.ui-datepicker-prev span,
.sb-prev-month i,
button.ui-datepicker-prev::before {
    content: "‹" !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.ui-datepicker-next span,
.sb-next-month i,
button.ui-datepicker-next::before {
    content: "›" !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}


/* =========================================
   10. SERVICE BUTTON ALIGNMENT
   DESKTOP
   ========================================= */

@media screen and (min-width: 768px) {

    #sb_main .service-item .btn-bar.has-read-more {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* Read more — LEFT */
    #sb_main .service-item .btn-bar .wrap-read-more {
        order: 1 !important;
        position: static !important;
        float: none !important;
        display: flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* Select — FAR RIGHT */
    #sb_main .service-item .btn-bar .btn-round-mask {
        order: 2 !important;
        position: static !important;
        float: none !important;
        display: flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* Align both buttons */
    #sb_main .service-item .btn-bar a.btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 184px !important;
        height: 48px !important;
        padding: 0 20px !important;
        margin: 0 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    #sb_main .service-item .btn.read-more .part.txt-part {
        white-space: nowrap !important;
    }
}


/* =========================================
   11. READ MORE — ORANGE OUTLINE
   ========================================= */

#sb_main .service-item a.btn.read-more,
#sb_main .service-item a.btn-hide {
    background: transparent !important;
    background-color: transparent !important;
    border: 2px solid #E65A28 !important;
    color: #E65A28 !important;
    -webkit-text-fill-color: #E65A28 !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

/* Read more text */
#sb_main .service-item a.btn.read-more .part.txt-part,
#sb_main .service-item a.btn-hide .part.txt-part {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: #E65A28 !important;
    -webkit-text-fill-color: #E65A28 !important;
    font-weight: 700 !important;
}

/* Keep arrow beside text */
#sb_main .service-item a.btn.read-more,
#sb_main .service-item a.btn-hide {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* Arrow wrapper */
#sb_main .service-item a.btn.read-more .part.ico-part,
#sb_main .service-item a.btn-hide .part.ico-part {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Arrow icon */
#sb_main .service-item a.btn.read-more .ico-part i,
#sb_main .service-item a.btn-hide .ico-part i {
    font-size: 14px !important;
    line-height: 1 !important;
    margin: 0 !important;
    vertical-align: middle !important;
    color: #E65A28 !important;
}

/* Hover */
#sb_main .service-item a.btn.read-more:hover,
#sb_main .service-item a.btn-hide:hover {
    background: #E65A28 !important;
    background-color: #E65A28 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

#sb_main .service-item a.btn.read-more:hover *,
#sb_main .service-item a.btn-hide:hover * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}


/* =========================================
   12. READ MORE ARROW COLOUR
   ========================================= */

#sb_main .service-item a.btn.read-more::before,
#sb_main .service-item a.btn.read-more::after,
#sb_main .service-item a.btn-hide::before,
#sb_main .service-item a.btn-hide::after {
    color: #E65A28 !important;
    border-color: #E65A28 !important;
}


/* =========================================
   13. HEADER TEXT COLOUR
   ========================================= */

.company-name.company-logo-and-name {
    color: #402020 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

.company-name.company-logo-and-name * {
    color: #402020 !important;
    -webkit-text-fill-color: #402020 !important;
    text-shadow: none !important;
}


/* =========================================
   14. HEADER NAVIGATION — RIGHT ALIGNMENT
   ========================================= */

header#header .inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    width: 100% !important;
}

header#header .company-name {
    margin-right: auto !important;
    text-align: left !important;
}

header#header .bar {
    margin-left: auto !important;
    margin-right: 0 !important;
    position: static !important;
    float: none !important;
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

header#header .bar,
header#header .bar * {
    text-align: right !important;
}


/* =========================================
   15. HAMBURGER RIGHT ALIGNMENT
   ========================================= */

#header .row > .col-xs-4.col-md-9 {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    text-align: right !important;
}

#header .nav-trigger {
    position: relative !important;
    margin: 24px 10px 0 auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    float: none !important;
}


/* =========================================
   16. HAMBURGER PRECISE POSITION
   ========================================= */

#header .row {
    position: relative !important;
}

#header .row > .col-xs-4.col-md-9 {
    position: static !important;
}

#header .nav-trigger {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    float: none !important;
}

#header .row {
    display: flex !important;
    align-items: center !important;
}

#header .col-xs-8.col-md-3 {
    display: flex !important;
    align-items: center !important;
}

#header .col-xs-4.col-md-9 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Remove excess vertical space around hamburger */
#header .nav-trigger {
    height: 28px !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 10px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#header .nav-trigger span {
    display: block !important;
    margin: 0 !important;
    line-height: 0 !important;
}


/* =========================================
   17. FARMERSMARKET FONT
   ========================================= */

@font-face {
    font-family: 'FarmersMarket';
    src: url('https://framerusercontent.com/assets/e0SiuSuf2QtkO7wYhSQFygX0Mn0.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* =========================================
   18. ERNIE'S HOMEPAGE HEADING
   ========================================= */

/* Hide original company name */
#main-buttons .company-name.company-logo-and-name {
    font-size: 0 !important;
    color: #402020 !important;
    text-shadow: none !important;
}

/* Desktop heading */
#main-buttons .company-name.company-logo-and-name::after {
    content: "Welcome To Ernie’s!";
    display: block;
    font-family: 'FarmersMarket', sans-serif !important;
    font-size: 50px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: #402020 !important;
    -webkit-text-fill-color: #402020 !important;
}

/* Tablet and mobile heading */
@media screen and (max-width: 1024px) {
    #main-buttons .company-name.company-logo-and-name::after {
        content: "Welcome To\A Ernie’s!";
        white-space: pre-line !important;
        font-size: clamp(36px, 6vw, 48px) !important;
        line-height: 1.15 !important;
    }
}


/* =========================================
   19. HOMEPAGE BUTTONS — TABLET
   ========================================= */

@media screen and (max-width: 1024px) {

    #main-buttons .wrapper .inner .bar {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        width: 100% !important;
    }

    #main-buttons .wrapper .inner .bar > .btn {
        display: inline-flex !important;
        flex: 0 1 auto !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 14px !important;
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1 !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
}


/* =========================================
   20. HOMEPAGE BUTTONS — MOBILE
   ========================================= */

@media screen and (max-width: 767px) {

    #main-buttons .wrapper .inner .bar {
        gap: 8px !important;
    }

    #main-buttons .wrapper .inner .bar > .btn {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 12px !important;
        font-size: 15px !important;
        line-height: 1 !important;
        border-radius: 10px !important;
    }
}
/* =========================================
   SERVICE BUTTONS — FINAL ALIGNMENT
   ========================================= */

@media screen and (min-width: 768px) {

    #sb_main .service-item .btn-bar.has-read-more {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 12px !important;
    }

    /* Centre both button wrappers */
    #sb_main .service-item .btn-bar .wrap-read-more,
    #sb_main .service-item .btn-bar .btn-round-mask {
        display: flex !important;
        align-items: center !important;
        align-self: center !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
    }

    /* Consistent button dimensions */
    #sb_main .service-item .btn-bar a.btn {
        height: 40px !important;
        min-height: 64px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* Bold Read more text */
    #sb_main .service-item a.btn.read-more,
    #sb_main .service-item a.btn.read-more *,
    #sb_main .service-item a.btn-hide,
    #sb_main .service-item a.btn-hide * {
        font-weight: 700 !important;
    }

    /* Align arrow with text */
    #sb_main .service-item a.btn.read-more .part.txt-part,
    #sb_main .service-item a.btn.read-more .part.ico-part {
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
}

/* Desktop: Reduce Read More button padding */
@media screen and (min-width: 768px) {
    #sb_main .service-item a.btn.read-more,
    #sb_main .service-item a.btn-hide {
        padding: 0 16px !important;
        min-width: 0 !important;
        width: auto !important;
        height: 48px !important;
        min-height: 48px !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        gap: 8px !important;
    }

    #sb_main .service-item .btn-bar .btn-round-mask a.btn {
        height: 48px !important;
        min-height: 48px !important;
    }
}

/* Desktop: Make Select content-sized */
@media screen and (min-width: 768px) {
    #sb_main .service-item .btn-bar .btn-round-mask {
        width: auto !important;
        flex: 0 0 auto !important;
    }

    #sb_main .service-item .btn-bar .btn-round-mask a.btn {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 20px !important;
        height: 48px !important;
        min-height: 48px !important;
        white-space: nowrap !important;
    }
}

/* Desktop: Reduce vertical button padding */
@media screen and (min-width: 768px) {
    #sb_main .service-item .btn-bar a.btn {
        height: 42px !important;
        min-height: 42px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Match Select and Read More heights */
@media screen and (min-width: 768px) {
    #sb_main .service-item .btn-bar .wrap-read-more a.btn,
    #sb_main .service-item .btn-bar .btn-round-mask a.btn {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* =========================================
   MOBILE SERVICE BUTTONS
   ========================================= */

@media screen and (max-width: 767px) {

    #sb_main .service-item .btn-bar.has-read-more {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* Read more wrapper */
    #sb_main .service-item .btn-bar .wrap-read-more {
        order: 1 !important;
        display: flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        position: static !important;
    }

    /* Select wrapper */
    #sb_main .service-item .btn-bar .btn-round-mask {
        order: 2 !important;
        display: flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        position: static !important;
    }

    /* Both buttons */
    #sb_main .service-item .btn-bar a.btn {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 12px !important;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* Keep Read more text and arrow together */
    #sb_main .service-item a.btn.read-more .part.txt-part,
    #sb_main .service-item a.btn.read-more .part.ico-part {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

/* MOBILE — ARROW ONLY */
@media screen and (max-width: 767px) {

    /* Hide Read more text completely */
    .service-item .btn-bar .wrap-read-more .txt-part,
    .service-item .btn-bar a.read-more .txt-part,
    .service-item .btn-bar a.btn-hide .txt-part {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
    }

    /* Compact arrow button */
    .service-item .btn-bar .wrap-read-more a.btn,
    .service-item .btn-bar a.btn.read-more,
    .service-item .btn-bar a.btn-hide {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 42px !important;
        box-sizing: border-box !important;
    }

    /* Centre arrow */
    .service-item .btn-bar .ico-part {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Align both button wrappers */
    .service-item .btn-bar.has-read-more {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
    }

    .service-item .btn-bar .wrap-read-more,
    .service-item .btn-bar .btn-round-mask {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        position: static !important;
    }

    /* Select matches arrow button height */
    .service-item .btn-bar .btn-round-mask a.btn {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Mobile: Centre and enlarge Read More arrow */
@media screen and (max-width: 767px) {

    #sb_main .service-item a.btn.read-more .ico-part,
    #sb_main .service-item a.btn-hide .ico-part {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        inset: 0 !important;
    }

    #sb_main .service-item a.btn.read-more,
    #sb_main .service-item a.btn-hide {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #sb_main .service-item a.btn.read-more .ico-part i,
    #sb_main .service-item a.btn-hide .ico-part i {
        font-size: 20px !important;
        line-height: 1 !important;
        margin: 0 !important;
        color: #E65A28 !important;
    }
}