/*
=========================================================
 HelpMEnanny — Hand Drawn / Crayon Style
 Full Booking Page CSS
=========================================================
*/


/* =====================================================
   GLOBAL
===================================================== */

#widget_container,
#events,
#eventForm {
    box-sizing: border-box !important;
}

#widget_container *,
#events *,
#eventForm * {
    box-sizing: border-box !important;
}


/* Main background */

body,
#widget_container {
    background: #fffdfb !important;
    color: #4f4354 !important;
}


/* =====================================================
   HEADINGS
===================================================== */

#events h1,
#events h2,
#events h3,
#eventForm h1,
#eventForm h2,
#eventForm h3 {
    color: #673c86 !important;

    font-weight: 600 !important;

    letter-spacing: 0.3px !important;

    line-height: 1.25 !important;
}


/* =====================================================
   TEXT
===================================================== */

#events p,
#events .description,
#events p.description,
#events div.description {
    color: #5f5963 !important;

    line-height: 1.6 !important;
}


#events .duration,
#events p.duration,
#events div.duration {
    color: #7b6b82 !important;
}


/* =====================================================
   SERVICE CARDS
===================================================== */

#events .event,
#events .service,
#events .eventItem,
#events .selectedEvent {

    background: #fffdfd !important;

    border: 2px solid #9d66bd !important;

    border-radius:
        27px 20px 31px 23px !important;

    box-shadow:
        2px 2px 0 rgba(110, 63, 139, 0.12),
        -1px 2px 0 rgba(110, 63, 139, 0.08) !important;

    padding: 18px !important;

    position: relative !important;
}


/* slightly uneven selected card */

#events .selectedEvent {

    background: #faf0ff !important;

    border: 3px solid #8f56b0 !important;

    border-radius:
        30px 22px 28px 25px !important;

    box-shadow:
        3px 2px 0 rgba(110, 63, 139, 0.17),
        -2px 3px 0 rgba(110, 63, 139, 0.10) !important;

    transform: rotate(-0.18deg) !important;
}


/* =====================================================
   BOOK NOW BUTTON
===================================================== */

/*
   Multiple selectors used because different templates
   may render the Book Now control differently.
*/

#events input.reserve_time_btn,
#events button.reserve_time_btn,
#events a.reserve_time_btn,
#events .reserve_time_btn,
.reserve_time_btn {

    display: inline-block !important;

    width: auto !important;
    min-width: 220px !important;

    background: #74459a !important;

    color: #ffffff !important;

    border: 3px solid #633781 !important;

    border-radius:
        32px 25px 35px 28px !important;

    padding: 13px 34px !important;

    font-size: 18px !important;

    font-weight: 600 !important;

    line-height: 1.2 !important;

    text-align: center !important;

    cursor: pointer !important;

    box-shadow:
        3px 3px 0 #5d3578,
        -2px 2px 0 #a67bc0,
        inset 0 0 0 1px rgba(255,255,255,0.28) !important;

    transform:
        rotate(-0.8deg) !important;

    transition:
        transform 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease !important;

    position: relative !important;

    z-index: 2 !important;

    -webkit-appearance: none !important;
    appearance: none !important;
}


/* fake imperfect hand-drawn outline */

#events .reserve_time_btn::before,
#events button.reserve_time_btn::before,
#events a.reserve_time_btn::before {

    content: "" !important;

    position: absolute !important;

    top: 3px !important;
    left: 4px !important;
    right: 2px !important;
    bottom: 4px !important;

    border: 1px solid rgba(255,255,255,0.65) !important;

    border-radius:
        29px 34px 27px 32px !important;

    pointer-events: none !important;
}


/* Hover */

#events input.reserve_time_btn:hover,
#events button.reserve_time_btn:hover,
#events a.reserve_time_btn:hover,
#events .reserve_time_btn:hover,
.reserve_time_btn:hover {

    background: #8252a4 !important;

    transform:
        rotate(0.7deg)
        translateY(-2px) !important;

    box-shadow:
        2px 4px 0 #5d3578,
        -2px 2px 0 #b28bca !important;
}


/* Click */

#events input.reserve_time_btn:active,
#events button.reserve_time_btn:active,
#events a.reserve_time_btn:active,
#events .reserve_time_btn:active {

    transform:
        rotate(0deg)
        translateY(1px) !important;

    box-shadow:
        1px 1px 0 #5d3578 !important;
}


/* =====================================================
   SELECT ANOTHER SERVICE
===================================================== */

#events input.select_another_btn,
#events button.select_another_btn,
#events .select_another_btn {

    background: #ffffff !important;

    color: #704493 !important;

    border: 2px solid #764798 !important;

    border-radius:
        23px 28px 20px 25px !important;

    padding: 11px 24px !important;

    font-size: 16px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    box-shadow:
        2px 2px 0 rgba(112, 68, 147, 0.18) !important;

    transform:
        rotate(0.5deg) !important;

    transition:
        transform 0.15s ease,
        background 0.15s ease !important;
}


#events input.select_another_btn:hover,
#events button.select_another_btn:hover,
#events .select_another_btn:hover {

    background: #faf1ff !important;

    transform:
        rotate(-0.4deg)
        translateY(-1px) !important;
}


/* =====================================================
   DATE + TIME SECTION
===================================================== */

#eventForm #start_date-block-container,
#eventForm #timeline-container {

    background: #fffdfd !important;

    border: 2px solid #9b64bc !important;

    border-radius:
        25px 20px 28px 22px !important;

    padding: 18px !important;

    box-shadow:
        2px 2px 0 rgba(116, 69, 154, 0.08) !important;
}


#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {

    color: #693c88 !important;

    font-weight: 600 !important;

    margin-bottom: 15px !important;
}


/* =====================================================
   CALENDAR
===================================================== */

.ui-datepicker,
div.ui-widget-content {

    background: #fffdfd !important;

    border: 1px solid #b5a7bb !important;

    border-radius:
        18px 15px 21px 17px !important;

    padding: 10px !important;

    box-shadow:
        2px 2px 0 rgba(95, 66, 109, 0.08) !important;
}


/* Calendar header */

div.ui-widget-header {

    background: transparent !important;

    color: #514658 !important;

    border: none !important;

    border-radius: 0 !important;

    font-weight: 600 !important;
}


/* Calendar weekday */

.ui-datepicker th {

    color: #504652 !important;

    font-weight: 600 !important;

    padding: 7px 4px !important;
}


/* Days */

.ui-datepicker td a,
.ui-datepicker td span {

    text-align: center !important;

    border: 1px solid transparent !important;

    border-radius:
        8px 10px 7px 9px !important;

    background: transparent !important;

    color: #4c4350 !important;

    padding: 6px !important;
}


/* Day hover */

.ui-datepicker td a:hover {

    background: #f6e7fb !important;

    border-color: #c9a5dd !important;
}


/* Selected date */

.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-highlight {

    background: #8750aa !important;

    color: #ffffff !important;

    border: 2px solid #774394 !important;

    border-radius:
        8px 11px 7px 10px !important;

    box-shadow:
        1px 1px 0 #65397f !important;

    transform:
        rotate(-1deg) !important;
}


/* =====================================================
   TIMELINE / TIME BUTTONS
===================================================== */

#timeline-container table.timeline {

    width: 100% !important;

    border-collapse: separate !important;

    border-spacing: 7px !important;

    overflow: visible !important;
}


/* Normal/free slot */

.timeline td.free_time {

    background: #fffefe !important;

    color: #51495a !important;

    border: 1px solid #b7abb9 !important;

    border-radius:
        9px 12px 8px 11px !important;

    padding: 11px 12px !important;

    cursor: pointer !important;

    transition:
        background 0.15s ease,
        transform 0.15s ease !important;
}


.timeline td.free_time:hover {

    background: #f8ebfb !important;

    transform:
        rotate(-0.5deg)
        translateY(-1px) !important;
}


/* Selected time */

.timeline td.selected_time {

    background: #f4b8e7 !important;

    color: #523858 !important;

    border: 2px solid #c479b8 !important;

    border-radius:
        10px 8px 12px 9px !important;

    font-weight: 600 !important;

    transform:
        rotate(-0.4deg) !important;
}


/* Reserved */

.timeline td.reserved_time {

    background: #f8d9f1 !important;

    color: #9a7c98 !important;

    border: 1px solid #dbb0d2 !important;

    border-radius:
        8px 11px 9px 10px !important;
}


/* Unavailable */

.timeline td.not_worked_time {

    background: #f1efef !important;

    color: #aaa2aa !important;

    border: 1px solid #d4d0d4 !important;

    border-radius:
        9px 8px 11px 10px !important;
}


/* =====================================================
   SAVE / CONTINUE
===================================================== */

#eventForm #save_button,
#eventForm .save_button,
#eventForm button[type="submit"] {

    display: inline-block !important;

    min-width: 240px !important;

    background: #74459a !important;

    color: #ffffff !important;

    border: 3px solid #623780 !important;

    border-radius:
        31px 24px 34px 27px !important;

    padding: 13px 34px !important;

    font-size: 18px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    box-shadow:
        3px 3px 0 #5b3276,
        -2px 2px 0 #ab83c4 !important;

    transform:
        rotate(-0.7deg) !important;

    transition:
        transform 0.15s ease,
        background 0.15s ease !important;
}


#eventForm #save_button:hover,
#eventForm .save_button:hover,
#eventForm button[type="submit"]:hover {

    background: #8252a5 !important;

    transform:
        rotate(0.5deg)
        translateY(-2px) !important;
}


/* =====================================================
   FORM LABELS
===================================================== */

#start_date-block-container .zend_form dt,
#start_date-block-container .zend_form dt b,
#start_date-block-container .zend_form dd label {

    color: #5e5362 !important;

    font-weight: 500 !important;
}


/* =====================================================
   INPUT FIELDS
===================================================== */

#eventForm input[type="text"],
#eventForm input[type="email"],
#eventForm input[type="tel"],
#eventForm input[type="date"],
#eventForm select,
#eventForm textarea {

    background: #fffdfd !important;

    color: #554b58 !important;

    border: 2px solid #c8b8ce !important;

    border-radius:
        14px 18px 13px 16px !important;

    padding: 11px 13px !important;

    outline: none !important;

    box-shadow:
        1px 2px 0 rgba(116, 69, 154, 0.08) !important;
}


#eventForm input:focus,
#eventForm select:focus,
#eventForm textarea:focus {

    border-color: #8955a8 !important;

    box-shadow:
        0 0 0 2px rgba(137, 85, 168, 0.12) !important;
}


/* =====================================================
   LOADING
===================================================== */

#loading {

    color: #78479b !important;

    font-weight: 600 !important;
}


/* =====================================================
   LINKS
===================================================== */

#widget_container a {

    color: #724494;
}


#widget_container a:hover {

    color: #8c58aa;
}


/* =====================================================
   SAFE LAYOUT
===================================================== */

/*
   Do NOT stretch all .container/.section elements.
   This prevents invisible overlays over Home/menu.
*/

#widget_container,
#events,
#eventForm {

    max-width: 100% !important;
}


/* =====================================================
   EXISTING BURGER BUTTON
===================================================== */

/*
   This styles an existing burger if the template
   already contains one.
*/

.navbar-toggle,
.navbar-toggler,
.menu-toggle,
.mobile-menu-toggle,
.hamburger,
[class*="hamburger"],
[class*="menu-toggle"] {

    background: transparent !important;

    border: 2px solid rgba(255,255,255,0.75) !important;

    border-radius:
        8px 11px 7px 9px !important;

    padding: 8px 10px !important;

    cursor: pointer !important;

    position: relative !important;

    z-index: 20 !important;
}


/* Burger lines */

.navbar-toggle .icon-bar,
.navbar-toggler span,
.menu-toggle span,
.hamburger span,
[class*="hamburger"] span {

    background: #ffffff !important;

    border-color: #ffffff !important;
}


/* =====================================================
   MOBILE
===================================================== */

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

    #events,
    #eventForm,
    #start_date-block-container,
    #timeline-container {

        width: 100% !important;

        max-width: 100% !important;
    }


    /* Make buttons comfortable on mobile */

    #events input.reserve_time_btn,
    #events button.reserve_time_btn,
    #events a.reserve_time_btn,
    #events .reserve_time_btn {

        min-width: 190px !important;

        max-width: 90% !important;

        font-size: 17px !important;
    }


    #eventForm #save_button,
    #eventForm .save_button,
    #eventForm button[type="submit"] {

        min-width: 200px !important;

        max-width: 90% !important;
    }


    #timeline-container {

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch !important;
    }


    /*
       Show an existing mobile burger.
       We do not create a fake burger because it would
       not open the real menu without JavaScript.
    */

    .navbar-toggle,
    .navbar-toggler,
    .menu-toggle,
    .mobile-menu-toggle,
    .hamburger,
    [class*="hamburger"],
    [class*="menu-toggle"] {

        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;
    }
}
/* =========================================
   REAL BOOK NOW BUTTON
========================================= */

#main #main-buttons .btn.book,
#main .btn.book,
.btn.book {
    display: inline-block !important;

    background: #74459a !important;

    border: 3px solid #5f347b !important;

    border-radius: 32px 25px 36px 28px !important;

    box-shadow:
        3px 3px 0 #5f347b,
        -2px 2px 0 #b78ecf,
        inset 0 0 0 1px rgba(255,255,255,0.30) !important;

    transform: rotate(-0.8deg) !important;

    overflow: visible !important;

    transition: 0.15s ease !important;
}


/* actual clickable link */
#main #main-buttons .btn.book a,
#main .btn.book a,
.btn.book a {
    display: block !important;

    min-width: 220px !important;

    padding: 14px 34px !important;

    background: transparent !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 30px 24px 34px 27px !important;

    font-size: 18px !important;

    font-weight: 600 !important;

    text-align: center !important;

    text-decoration: none !important;

    line-height: 1.2 !important;

    cursor: pointer !important;
}


/* white inner hand-drawn line */
#main #main-buttons .btn.book::after,
#main .btn.book::after,
.btn.book::after {
    content: "" !important;

    position: absolute !important;

    top: 4px !important;
    left: 5px !important;
    right: 3px !important;
    bottom: 5px !important;

    border: 1px solid rgba(255,255,255,0.75) !important;

    border-radius: 28px 34px 25px 31px !important;

    pointer-events: none !important;
}


/* hover */
#main #main-buttons .btn.book:hover,
#main .btn.book:hover,
.btn.book:hover {
    background: #8754aa !important;

    transform:
        rotate(0.6deg)
        translateY(-2px) !important;
}
/* =========================================
   HAND-DRAWN SERVICE CARDS
========================================= */

#events .event,
#events .event-container,
#events .event-item,
#events [class*="event"] {
    border-radius: 26px 19px 30px 22px !important;
}


/* =========================================
   SELECT BUTTON — HAND DRAWN
========================================= */

#events input[type="button"],
#events input[type="submit"],
#events button,
#events .btn,
#events a.btn {
    background: #7d4ba3 !important;
    color: #ffffff !important;

    border: 3px solid #60377d !important;

    border-radius: 28px 21px 31px 24px !important;

    box-shadow:
        3px 3px 0 #60377d,
        -2px 2px 0 #b88ed0 !important;

    padding: 11px 25px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    transform: rotate(-0.5deg) !important;

    transition: 0.15s ease !important;
}


/* hover */
#events input[type="button"]:hover,
#events input[type="submit"]:hover,
#events button:hover,
#events .btn:hover,
#events a.btn:hover {
    background: #925db2 !important;

    transform:
        rotate(0.5deg)
        translateY(-2px) !important;
}
/* =====================================================
   REAL SELECT BUTTON — HAND DRAWN
===================================================== */

#sb_booking_content .btn.select,
.tab .btn.select,
div.btn.select.custom,
.btn.select {
    position: relative !important;

    background: #74459a !important;

    border: 3px solid #5f347b !important;

    border-radius:
        32px 24px 36px 27px !important;

    box-shadow:
        3px 3px 0 #5f347b,
        -2px 2px 0 #b88fcf !important;

    transform: rotate(-0.6deg) !important;

    overflow: visible !important;

    transition: 0.15s ease !important;
}


/* Actual Select link */

#sb_booking_content .btn.select a,
.tab .btn.select a,
div.btn.select.custom a,
.btn.select a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    min-height: 46px !important;

    padding: 12px 28px !important;

    background: transparent !important;

    color: #ffffff !important;

    border: none !important;

    border-radius:
        30px 22px 34px 25px !important;

    font-size: 17px !important;

    font-weight: 600 !important;

    text-decoration: none !important;

    cursor: pointer !important;
}


/* Inner pencil-like line */

#sb_booking_content .btn.select::after,
.tab .btn.select::after,
div.btn.select.custom::after,
.btn.select::after {
    content: "" !important;

    position: absolute !important;

    top: 4px !important;
    left: 5px !important;
    right: 3px !important;
    bottom: 5px !important;

    border: 1px solid rgba(255,255,255,0.72) !important;

    border-radius:
        27px 33px 25px 31px !important;

    pointer-events: none !important;
}


/* Hover */

#sb_booking_content .btn.select:hover,
.tab .btn.select:hover,
div.btn.select.custom:hover,
.btn.select:hover {
    background: #8854aa !important;

    transform:
        rotate(0.5deg)
        translateY(-2px) !important;

    box-shadow:
        2px 4px 0 #5f347b,
        -2px 2px 0 #c09ad5 !important;
}


/* Click */

#sb_booking_content .btn.select:active,
.tab .btn.select:active,
div.btn.select.custom:active,
.btn.select:active {
    transform:
        rotate(0deg)
        translateY(1px) !important;

    box-shadow:
        1px 1px 0 #5f347b !important;
}
/* =====================================================
   NEXT BUTTON — HAND DRAWN / CRAYON STYLE
   SimplyBook.me
===================================================== */

#sb_booking_content button.sb-next,
#sb_booking_content .sb-next.btn.next,
button.sb-next.btn.next,
.sb-next.btn.next {

    /* Purple pencil-like background */
    background: #74459a !important;
    color: #ffffff !important;

    /* Uneven outline */
    border: 3px solid #5f347b !important;

    /* Intentionally different corners */
    border-radius:
        30px 23px 34px 26px !important;

    /* Button size */
    min-width: 150px !important;
    min-height: 52px !important;

    padding: 12px 30px !important;

    /* Text */
    font-size: 17px !important;
    font-weight: 600 !important;

    text-align: center !important;

    /* Handmade shadow */
    box-shadow:
        3px 3px 0 #5f347b,
        -2px 2px 0 #b88fcf !important;

    /* Slightly crooked */
    transform: rotate(-0.7deg) !important;

    cursor: pointer !important;

    position: relative !important;

    overflow: visible !important;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease !important;

    -webkit-appearance: none !important;
    appearance: none !important;
}


/* =====================================================
   SECOND PENCIL LINE
===================================================== */

#sb_booking_content button.sb-next::before,
button.sb-next.btn.next::before,
.sb-next.btn.next::before {

    content: "" !important;

    position: absolute !important;

    top: 4px !important;
    right: 4px !important;
    bottom: 4px !important;
    left: 5px !important;

    border: 1.5px solid rgba(255,255,255,0.75) !important;

    border-radius:
        26px 31px 24px 29px !important;

    pointer-events: none !important;
}


/* =====================================================
   LITTLE ARROW
===================================================== */

#sb_booking_content button.sb-next::after,
button.sb-next.btn.next::after,
.sb-next.btn.next::after {

    content: " →" !important;

    display: inline-block !important;

    margin-left: 9px !important;

    color: #ffffff !important;

    font-size: 24px !important;

    font-weight: 400 !important;

    line-height: 14px !important;

    transform: rotate(-3deg) !important;

    vertical-align: -2px !important;

    pointer-events: none !important;
}


/* =====================================================
   HOVER
===================================================== */

#sb_booking_content button.sb-next:hover,
button.sb-next.btn.next:hover,
.sb-next.btn.next:hover {

    background: #8954aa !important;

    transform:
        rotate(0.6deg)
        translateY(-2px) !important;

    box-shadow:
        2px 4px 0 #5f347b,
        -2px 2px 0 #c19bd6 !important;
}


/* =====================================================
   CLICK
===================================================== */

#sb_booking_content button.sb-next:active,
button.sb-next.btn.next:active,
.sb-next.btn.next:active {

    background: #6d408f !important;

    transform:
        rotate(0deg)
        translateY(1px) !important;

    box-shadow:
        1px 1px 0 #5f347b !important;
}


/* =====================================================
   DISABLED NEXT
===================================================== */

#sb_booking_content button.sb-next:disabled,
button.sb-next.btn.next:disabled,
.sb-next.btn.next:disabled {

    background: #d5c4df !important;

    color: #ffffff !important;

    border-color: #bca6c8 !important;

    box-shadow:
        2px 2px 0 #bca6c8 !important;

    opacity: 0.65 !important;

    cursor: not-allowed !important;

    transform: rotate(-0.3deg) !important;
}


/* =====================================================
   MOBILE
===================================================== */

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

    #sb_booking_content button.sb-next,
    button.sb-next.btn.next,
    .sb-next.btn.next {

        min-width: 135px !important;
        min-height: 48px !important;

        padding: 10px 24px !important;

        font-size: 16px !important;
    }
}
/* =========================================
   MOBILE SLIDE MENU — WHITE
========================================= */

#header .nav-wrapper,
#header .nav-wrapper #sb_menu,
#sb_menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Links inside menu */
#header .nav-wrapper #sb_menu a,
#sb_menu a {
    color: #5f4a6d !important;
    background: transparent !important;
    font-weight: 500 !important;
}

/* Hover */
#header .nav-wrapper #sb_menu a:hover,
#sb_menu a:hover {
    color: #8f5bb5 !important;
    background: #f9effb !important;
    border-radius: 14px 18px 13px 17px !important;
}

/* Active page — Home etc. */
#header .nav-wrapper #sb_menu .active > a,
#header .nav-wrapper #sb_menu a.active,
#sb_menu .active > a {
    color: #8f5bb5 !important;
}

/* Remove dark background from menu containers */
#header .menu-wrap,
#header .nav-wrapper,
#header .nav-wrapper::before,
#header .nav-wrapper::after {
    background-color: #ffffff !important;
}

/* Mobile */
@media (max-width: 1024px) {

    #header .nav-wrapper,
    #header .nav-wrapper #sb_menu {
        background: #ffffff !important;
    }

    #header .nav-wrapper #sb_menu {
        padding: 25px 20px !important;
    }
}
/* =====================================================
   BURGER — PURPLE HAND-DRAWN / PENCIL STYLE
===================================================== */

/* Сам контейнер бургера */
#header .nav-trigger {
    width: 52px !important;
    height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    position: relative !important;

    background: transparent !important;

    border: 3px solid #74459a !important;

    /* Неровные углы, будто нарисовано рукой */
    border-radius: 9px 14px 8px 12px !important;

    cursor: pointer !important;

    transform: rotate(-0.7deg) !important;

    box-shadow:
        2px 2px 0 rgba(116, 69, 154, 0.25),
        -1px 1px 0 rgba(116, 69, 154, 0.18) !important;

    z-index: 100 !important;

    transition: transform 0.15s ease !important;
}


/* =====================================================
   THREE PURPLE PENCIL LINES
===================================================== */

#header .nav-trigger span,
#header .nav-trigger span::before,
#header .nav-trigger span::after {
    display: block !important;

    width: 26px !important;
    height: 4px !important;

    background: #74459a !important;

    border-radius: 5px 3px 6px 4px !important;

    position: absolute !important;

    left: 50% !important;

    content: "" !important;

    box-shadow:
        0 1px 0 rgba(95, 52, 123, 0.35) !important;
}


/* Middle line */
#header .nav-trigger span {
    top: 50% !important;

    transform:
        translate(-50%, -50%)
        rotate(-1deg) !important;
}


/* Top line */
#header .nav-trigger span::before {
    left: 0 !important;

    top: -9px !important;

    transform: rotate(2deg) !important;
}


/* Bottom line */
#header .nav-trigger span::after {
    left: 0 !important;

    top: 9px !important;

    transform: rotate(-2deg) !important;
}


/* =====================================================
   HOVER
===================================================== */

#header .nav-trigger:hover {
    background: rgba(116, 69, 154, 0.07) !important;

    transform:
        rotate(0.8deg)
        scale(1.04) !important;
}


/* =====================================================
   EXTRA HAND-DRAWN OUTLINE
===================================================== */

#header .nav-trigger::after {
    content: "" !important;

    position: absolute !important;

    top: 3px !important;
    right: 2px !important;
    bottom: 2px !important;
    left: 3px !important;

    border: 1px solid rgba(116, 69, 154, 0.55) !important;

    border-radius:
        12px 8px 13px 7px !important;

    transform: rotate(1deg) !important;

    pointer-events: none !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 1024px) {

    #header .nav-trigger {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}
/* =====================================================
   FINAL BURGER FIX
   Purple hand-drawn burger
===================================================== */

/* Remove old pseudo-elements */
#header .nav-trigger::before,
#header .nav-trigger::after {
    content: none !important;
    display: none !important;
}


/* Burger button */
#header .nav-trigger {
    width: 52px !important;
    height: 48px !important;

    display: block !important;

    position: relative !important;

    padding: 0 !important;
    margin: 0 !important;

    background-color: transparent !important;

    /*
       Three purple burger lines
    */
    background-image:
        linear-gradient(#74459a, #74459a),
        linear-gradient(#74459a, #74459a),
        linear-gradient(#74459a, #74459a) !important;

    background-size:
        25px 4px,
        27px 4px,
        24px 4px !important;

    background-position:
        center calc(50% - 10px),
        center 50%,
        center calc(50% + 10px) !important;

    background-repeat: no-repeat !important;


    /* Pencil-style purple outline */
    border: 3px solid #74459a !important;

    border-radius:
        10px 15px 8px 13px !important;

    box-shadow:
        2px 2px 0 rgba(116,69,154,0.30),
        -1px 1px 0 rgba(116,69,154,0.18),
        inset 0 0 0 1px rgba(116,69,154,0.20) !important;

    transform: rotate(-0.8deg) !important;

    cursor: pointer !important;

    visibility: visible !important;
    opacity: 1 !important;

    z-index: 999 !important;

    transition:
        transform 0.15s ease,
        background-color 0.15s ease !important;
}


/* Hover */
#header .nav-trigger:hover {
    background-color: rgba(116,69,154,0.08) !important;

    transform:
        rotate(0.8deg)
        scale(1.04) !important;
}


/* Remove white box around burger */
#header .menu-wrap,
#header .menu-wrap.flex-item {
    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}


/* Keep burger visible on tablet/mobile */
@media (max-width: 1024px) {

    #header .nav-trigger {
        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;
    }

}
/* =====================================================
   LOGIN ICON — PURPLE HAND-DRAWN
===================================================== */

#header #sb_client_info,
#header button#sb_client_info,
#header .nav-item#sb_client_info {
    position: relative !important;
}

/* Login icon button */
#header #sb_client_info.avatar.item-container,
#header button#sb_client_info.avatar.item-container,
#header .login-container > button.avatar {
    width: 46px !important;
    height: 46px !important;

    background-color: #74459a !important;

    border: 3px solid #5f347b !important;

    border-radius:
        50% 46% 52% 45% !important;

    box-shadow:
        2px 2px 0 #5f347b,
        -1px 2px 0 #b88fcf !important;

    transform: rotate(-1deg) !important;

    cursor: pointer !important;

    transition: 0.15s ease !important;
}

/* Make login icon white */
#header #sb_client_info.avatar.item-container .logged-out,
#header button#sb_client_info .logged-out,
#header .login-container .avatar .logged-out {
    filter: brightness(0) invert(1) !important;
}


/* Login icon hover */

#header #sb_client_info.avatar.item-container:hover,
#header button#sb_client_info.avatar.item-container:hover,
#header .login-container > button.avatar:hover {
    background-color: #8954aa !important;

    transform:
        rotate(1deg)
        translateY(-2px) !important;
}


/* =====================================================
   LOGIN POPUP POSITION
   CENTERED UNDER HEADER
===================================================== */

#header .items-wrapper .nav-item#sb_client_info .login-container,
#header .nav-item#sb_client_info .login-container {
    position: static !important;
}


/*
   The actual popup
*/

#header #sb_client_info .full-info,
#header .login-container .full-info {

    position: fixed !important;

    /* Appears from the top */
    top: 105px !important;

    /* Center horizontally */
    left: 50% !important;
    right: auto !important;

    width: min(440px, calc(100vw - 30px)) !important;
    min-width: 0 !important;
    max-width: 440px !important;

    transform:
        translateX(-50%)
        rotate(-0.3deg) !important;

    background: #fffdfd !important;

    border: 3px solid #8f5bb5 !important;

    border-radius:
        28px 22px 31px 25px !important;

    padding: 28px !important;

    box-shadow:
        4px 5px 0 rgba(95, 52, 123, 0.18),
        -2px 3px 0 rgba(143, 91, 181, 0.12),
        0 12px 35px rgba(61, 42, 70, 0.16) !important;

    z-index: 99999 !important;

    overflow: visible !important;

    animation:
        helpmenannyLoginDrop 0.28s ease-out !important;
}


/* =====================================================
   POPUP DROP-DOWN ANIMATION
===================================================== */

@keyframes helpmenannyLoginDrop {

    from {
        opacity: 0;

        transform:
            translateX(-50%)
            translateY(-35px)
            rotate(-0.8deg);
    }

    to {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0)
            rotate(-0.3deg);
    }
}


/* =====================================================
   LOGIN INPUTS
===================================================== */

#header .login-container .full-info input[type="email"],
#header .login-container .full-info input[type="text"],
#header .login-container .full-info input[type="password"] {

    width: 100% !important;

    background: #ffffff !important;

    color: #514655 !important;

    border: 2px solid #c9b4d3 !important;

    border-radius:
        14px 18px 13px 16px !important;

    padding: 12px 14px !important;

    margin-bottom: 8px !important;

    outline: none !important;

    box-shadow:
        1px 2px 0 rgba(116,69,154,0.10) !important;
}


/* Focus */

#header .login-container .full-info input:focus {
    border-color: #8f5bb5 !important;

    box-shadow:
        0 0 0 3px rgba(143,91,181,0.12) !important;
}


/* =====================================================
   SIGN IN BUTTON
===================================================== */

#header .login-container .full-info .btn,
#header .login-container .full-info button[type="submit"] {

    background: #74459a !important;

    color: #ffffff !important;

    border: 3px solid #5f347b !important;

    border-radius:
        24px 19px 27px 21px !important;

    padding: 11px 24px !important;

    box-shadow:
        2px 2px 0 #5f347b,
        -1px 2px 0 #b88fcf !important;

    font-weight: 600 !important;

    transform: rotate(-0.5deg) !important;

    cursor: pointer !important;
}


/* Sign in hover */

#header .login-container .full-info .btn:hover,
#header .login-container .full-info button[type="submit"]:hover {

    background: #8954aa !important;

    transform:
        rotate(0.5deg)
        translateY(-1px) !important;
}


/* =====================================================
   SIGN UP BUTTON
===================================================== */

#header .login-container .full-info a.btn {

    background: #ffffff !important;

    color: #74459a !important;

    border: 2px solid #74459a !important;

    border-radius:
        20px 25px 18px 23px !important;

    box-shadow:
        2px 2px 0 rgba(116,69,154,0.18) !important;
}


/* =====================================================
   LINKS
===================================================== */

#header .login-container .full-info a:not(.btn) {
    color: #d96fb1 !important;
}

#header .login-container .full-info a:not(.btn):hover {
    color: #8f5bb5 !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    #header #sb_client_info .full-info,
    #header .login-container .full-info {

        top: 85px !important;

        left: 50% !important;
        right: auto !important;

        width: calc(100vw - 28px) !important;
        max-width: 400px !important;

        padding: 22px !important;

        transform:
            translateX(-50%)
            rotate(-0.2deg) !important;
    }

}
/* =====================================================
   HEADER / TOP MENU — PINK HAND-DRAWN STYLE
===================================================== */

/* Вся верхняя шапка */
#header,
#header.web,
#header .container-fluid,
#header .flex-box,
#header .menu-wrap,
#header .nav-wrapper,
#header .nav-wrapper #sb_menu,
#header #sb_menu {
    background: #d779b7 !important;
    background-color: #d779b7 !important;
}


/* Убираем белый фон, который был задан раньше */
#header .nav-wrapper::before,
#header .nav-wrapper::after,
#header #sb_menu::before,
#header #sb_menu::after {
    background: transparent !important;
}


/* =====================================================
   MENU TEXT
   Home / News / Gallery / My Bookings
===================================================== */

#header #sb_menu a,
#header .nav-wrapper #sb_menu a,
#header #sb_menu .menu-item a,
#header .nav-wrapper .menu-item a {
    color: #ffffff !important;

    font-weight: 700 !important;

    font-size: 16px !important;

    letter-spacing: 0.2px !important;

    text-decoration: none !important;

    background: transparent !important;

    text-shadow:
        1px 1px 0 rgba(116, 69, 154, 0.18) !important;

    transition:
        transform 0.15s ease,
        color 0.15s ease !important;
}


/* =====================================================
   MENU HOVER
===================================================== */

#header #sb_menu a:hover,
#header .nav-wrapper #sb_menu a:hover {
    color: #ffffff !important;

    background: transparent !important;

    transform: translateY(-1px) rotate(-0.5deg) !important;

    text-shadow:
        1px 1px 0 #74459a,
        -1px 0 0 rgba(255,255,255,0.20) !important;
}


/* =====================================================
   ACTIVE PAGE — HAND DRAWN UNDERLINE
===================================================== */

#header #sb_menu .active > a,
#header #sb_menu li.active a,
#header .nav-wrapper #sb_menu .active > a {
    color: #ffffff !important;

    font-weight: 700 !important;

    position: relative !important;
}


/* Белая "карандашная" линия под Home */
#header #sb_menu .active > a::after,
#header #sb_menu li.active a::after {
    content: "" !important;

    position: absolute !important;

    left: 12% !important;
    right: 8% !important;

    bottom: -5px !important;

    height: 3px !important;

    background: #ffffff !important;

    border-radius:
        60% 40% 55% 45% !important;

    transform: rotate(-1.5deg) !important;

    opacity: 0.95 !important;
}


/* =====================================================
   KEEP BURGER AREA PINK
===================================================== */

#header .menu-wrap,
#header .menu-wrap.flex-item {
    background: #d779b7 !important;
}


/* =====================================================
   LOGIN ICON AREA
===================================================== */

#header .items-wrapper,
#header .nav-item,
#header .login-container {
    background-color: transparent !important;
}


/* =====================================================
   DESKTOP
===================================================== */

@media (min-width: 1025px) {

    #header .nav-wrapper,
    #header .nav-wrapper #sb_menu {
        background: #d779b7 !important;
    }

}


/* =====================================================
   MOBILE SLIDE-OUT MENU

   На мобильном оставляем выплывающее меню БЕЛЫМ,
   как мы сделали раньше.
===================================================== */

@media (max-width: 1024px) {

    #header {
        background: #d779b7 !important;
    }

    #header .menu-wrap {
        background: #d779b7 !important;
    }

    /* Само выплывающее меню */
    #header .nav-wrapper,
    #header .nav-wrapper #sb_menu {
        background: #ffffff !important;
    }

    /* Текст выплывающего меню */
    #header .nav-wrapper #sb_menu a {
        color: #684577 !important;

        font-weight: 600 !important;

        text-shadow: none !important;
    }

    #header .nav-wrapper #sb_menu a:hover {
        color: #8f5bb5 !important;

        background: #fbf3fc !important;
    }
}
#header #sb_menu .active > a::after,
#header #sb_menu li.active a::after {
    content: "" !important;
    position: absolute !important;
    left: 12% !important;
    right: 8% !important;
    bottom: -5px !important;
    height: 3px !important;
    background: #ffffff !important;
    border-radius: 60% 40% 55% 45% !important;
    transform: rotate(-1.5deg) !important;
}
/* ACTIVE MENU ITEM — SOFT HAND-DRAWN HIGHLIGHT */

#header #sb_menu .active > a,
#header #sb_menu li.active a {
    background: rgba(255,255,255,0.14) !important;
    border-radius: 12px 16px 10px 14px !important;
    padding: 8px 12px !important;
}
/* REMOVE WHITE UNDERLINE UNDER ACTIVE MENU ITEM */

#header #sb_menu .active > a::after,
#header #sb_menu li.active a::after,
#header .nav-wrapper #sb_menu .active > a::after {
    content: none !important;
    display: none !important;
}
/* REMOVE WHITE UNDERLINE UNDER ACTIVE MENU ITEM */

#header #sb_menu .active > a::after,
#header #sb_menu li.active a::after,
#header .nav-wrapper #sb_menu .active > a::after {
    content: none !important;
    display: none !important;
}
/* REMOVE WHITE UNDERLINE UNDER ACTIVE MENU ITEM */

#header #sb_menu .active > a::after,
#header #sb_menu li.active a::after,
#header .nav-wrapper #sb_menu .active > a::after {
    content: none !important;
    display: none !important;
}
/* =====================================================
   SAFE FINAL MENU FIX
   Remove glass effect + white underline
===================================================== */

/* Normal menu links */
#header #sb_menu a,
#header .nav-wrapper #sb_menu a {
    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    color: #ffffff !important;
    font-weight: 700 !important;

    text-decoration: none !important;
}


/* Active menu item: Home */
#header #sb_menu .active > a,
#header #sb_menu li.active a,
#header #sb_menu a.active,
#header .nav-wrapper #sb_menu .active > a {
    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    color: #ffffff !important;
}


/* Remove underline / decorative lines */
#header #sb_menu .active > a::before,
#header #sb_menu .active > a::after,
#header #sb_menu li.active a::before,
#header #sb_menu li.active a::after,
#header #sb_menu a.active::before,
#header #sb_menu a.active::after,
#header .nav-wrapper #sb_menu .active > a::before,
#header .nav-wrapper #sb_menu .active > a::after {
    content: none !important;
    display: none !important;

    background: transparent !important;

    border: none !important;
    box-shadow: none !important;
}


/* Remove glass effect from li itself */
#header #sb_menu li,
#header #sb_menu li.active,
#header #sb_menu .menu-item,
#header #sb_menu .menu-item.active {
    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    box-shadow: none !important;
}


/* Hover: only subtle text movement */
#header #sb_menu a:hover,
#header .nav-wrapper #sb_menu a:hover {
    background: transparent !important;
    background-color: transparent !important;

    border: none !important;
    box-shadow: none !important;

    color: #ffffff !important;

    transform: translateY(-1px) !important;
}


/* Mobile side menu stays white */
@media (max-width: 1024px) {

    #header .nav-wrapper,
    #header .nav-wrapper #sb_menu {
        background: #ffffff !important;
        background-color: #ffffff !important;
    }

    #header .nav-wrapper #sb_menu a,
    #header .nav-wrapper #sb_menu .active > a {
        color: #684577 !important;

        background: transparent !important;
        background-color: transparent !important;

        border: none !important;
        border-radius: 0 !important;

        box-shadow: none !important;
        text-shadow: none !important;
    }
}