/**
 * Animation Builders Custom Plugin — PrintMode header refinement
 * Version 1.2.0
 * Scoped header/UI refinements after client review.
 */

/* Replace the header logo with the updated client-supplied SVG. */
#Top_bar .logo {
    flex: 0 0 228px !important;
}
#Top_bar #logo {
    display: block !important;
    width: 228px !important;
    height: 62px !important;
    max-height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-image: url('../images/printmode-logo.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center left !important;
    background-size: contain !important;
}
#Top_bar #logo img {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Keep the existing WhatsApp button styling and tighten icon/label spacing. */
#Top_bar .top_bar_right .action_button,
#Top_bar .top_bar_right_wrapper .action_button {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    border: 2px solid rgba(16, 150, 68, 0.88) !important;
    box-shadow: 0 8px 18px rgba(37, 211, 102, 0.16) !important;
}
#Top_bar .top_bar_right .action_button i,
#Top_bar .top_bar_right .action_button svg,
#Top_bar .top_bar_right .action_button .icon-whatsapp,
#Top_bar .top_bar_right_wrapper .action_button i,
#Top_bar .top_bar_right .action_button::before {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Prominent inline search field with a cleaner stroke. */
#Top_bar .top_bar_right_wrapper form.pm-header-search {
    border: 2px solid rgba(195, 8, 113, 0.9) !important;
    box-shadow: 0 8px 18px rgba(233, 6, 134, 0.14) !important;
}

@media (min-width: 1240px) {
    #Top_bar .column.one {
        display: flex !important;
        align-items: center !important;
        column-gap: 12px !important;
    }
    #Top_bar .top_bar_left {
        display: flex !important;
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        align-items: center !important;
        gap: 10px !important;
    }
    #Top_bar .menu_wrapper {
        display: flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        align-items: center !important;
    }
    #Top_bar .top_bar_right {
        float: none !important;
        display: flex !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    #Top_bar .top_bar_right_wrapper {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 8px !important;
    }
    /* Slightly narrower search and nudged right. */
    #Top_bar .top_bar_right_wrapper form.pm-header-search {
        flex: 0 0 235px !important;
        width: 235px !important;
        max-width: 235px !important;
        min-width: 235px !important;
        margin: 0 0 0 8px !important;
    }
    #Top_bar .top_bar_right_wrapper .action_button {
        flex: 0 0 auto !important;
    }
    #Top_bar #menu > ul.menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        align-items: center !important;
    }
    #Top_bar #menu > ul.menu > li {
        position: relative !important;
        flex: 0 0 auto !important;
    }
    #Top_bar #menu > ul.menu > li > a,
    #Top_bar #menu > ul.menu > li > a > span,
    #Top_bar #menu > ul.menu > li.current-menu-item > a,
    #Top_bar #menu > ul.menu > li.current-menu-item > a > span {
        font-size: 21px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }
    #Top_bar #menu > ul.menu > li > a {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* Replace diamond separators with classy micro rounded bars. */
    #Top_bar #menu > ul.menu > li + li::before {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: -5px !important;
        top: 50% !important;
        width: 3px !important;
        height: 14px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: #e90686 !important;
        box-shadow: none !important;
        opacity: 1 !important;
        transform: translateY(-50%) !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }
    #Top_bar #menu > ul.menu > li:nth-child(3n)::before {
        background: #fdcb0a !important;
    }
    #Top_bar #menu > ul.menu > li:nth-child(3n + 1)::before {
        background: #19aae2 !important;
    }
    #Top_bar #menu > ul.menu > li:first-child::before {
        content: none !important;
    }
}

@media (min-width: 1240px) and (max-width: 1499px) {
    #Top_bar .logo {
        flex-basis: 210px !important;
    }
    #Top_bar #logo {
        width: 210px !important;
        height: 58px !important;
        max-height: 58px !important;
    }
    #Top_bar .column.one { column-gap: 9px !important; }
    #Top_bar .top_bar_left { gap: 7px !important; }
    #Top_bar .top_bar_right_wrapper { gap: 8px !important; padding-left: 6px !important; }
    #Top_bar #menu > ul.menu > li > a,
    #Top_bar #menu > ul.menu > li > a > span,
    #Top_bar #menu > ul.menu > li.current-menu-item > a,
    #Top_bar #menu > ul.menu > li.current-menu-item > a > span {
        font-size: 20px !important;
    }
    #Top_bar #menu > ul.menu > li > a {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
    #Top_bar .top_bar_right_wrapper form.pm-header-search {
        flex-basis: 220px !important;
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
    }
}

@media (max-width: 1239px) {
    #Top_bar .logo {
        flex-basis: 188px !important;
    }
    #Top_bar #logo {
        width: 188px !important;
        height: 54px !important;
        max-height: 54px !important;
    }
}

@media (max-width: 767px) {
    #Top_bar .top_bar_right_wrapper {
        gap: 9px !important;
        padding-left: 0 !important;
    }
    #Top_bar .top_bar_right_wrapper form.pm-header-search {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-left: 0 !important;
    }
    #Top_bar .top_bar_right .action_button,
    #Top_bar .top_bar_right_wrapper .action_button {
        gap: 2px !important;
        box-shadow: 0 6px 14px rgba(37, 211, 102, 0.13) !important;
    }
}