/**
 * Mobile Header Redesign
 * Clean mobile header with logo, search, and wishlist
 */

/* ============================================
   desktop Header Restructure
   ============================================ */

.page-header .main-panel-top,
.page-header.type1 .main-panel-top,
header .main-panel-top,
header.page-header .main-panel-top {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

div#switcher-language-trigger {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

div#switcher-language-trigger strong {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.page-header.type1 .header-contact .my-account {
    display: flex !important;
    justify-content: center;
    align-items: center;
    background: #878787;
    padding: 5px !important;
    color: #fff;
    border-radius: 2px;
    gap: 5px;
    font-size: 18px !important;
}

.page-header.type1 .header-contact {
    gap: 10px;
}

.header-main .header-left {
    min-width: fit-content !important;
}

.header-contact a.my-account i {
    font-size: 18px;
}

a .porto-icon-user-2:before {
    color: #fff !important
}

.header.content.header-row {
    gap: 15px !important;
}

/* ============================================
   Mobile Header Restructure
   ============================================ */
@media (max-width: 991px) {



    .search-area.show-icon-tablet .block.block-search {
        border: none !important;
        outline: none !important;
    }

    /* Restructure main header */
    .page-header .header-main {
        padding: 12px 0 !important;
        background: #fff !important;
        border-bottom: 1px solid #e0e0e0 !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .page-header .header-main .header-row,
    .page-header .header-main .header.content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 12px !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Logo styling */
    .page-header .header-main .header-left {
        flex: 0 0 70px !important;
        display: flex !important;
        align-items: center !important;
        margin-right: 6px !important;
        min-width: 70px !important;
        max-width: 70px !important;
    }

    .page-header .header-main .logo {
        max-width: 70px !important;
        margin: 0 !important;
        width: 70px !important;
    }

    .page-header .header-main .logo img {
        max-height: 32px !important;
        width: auto !important;
    }

    /* Search area - controlled width */
    .page-header .header-main .header-center {
        flex: 1 1 0 !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 6px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        max-width: calc(100% - 130px) !important;
    }

    .page-header .header-main .search-area {
        flex: 1 1 0 !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }



    /* Hide search toggle icon on mobile - search is always visible */
    .page-header .header-main .search-area .search-toggle-icon,
    .page-header .header-main a.search-toggle-icon {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Search form styling */
    .page-header .header-main .block-search {
        width: 100% !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        transform: none !important;
        margin: 0 !important;
    }

    .page-header .header-main .block-search .block-content {
        margin: 0;
        width: 100%;
    }

    .page-header .header-main .block-search .form.minisearch {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
    }

    .page-header .header-main .block-search .field.search {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        display: block !important;
    }

    .page-header .header-main .block-search .control {
        width: 100% !important;
        max-width: 100% !important;
        border: none !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        display: block !important;
    }

    /* Force hide any elements before or after search input */
    .page-header .header-main .form.minisearch>*:not(.field.search) {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .page-header .header-main .block-search input#search,
    .page-header .header-main .block-search input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
        height: 40px !important;
        padding: 0 40px 0 15px !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 20px !important;
        font-size: 14px !important;
        background: #f5f5f5 !important;
        color: #333 !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .page-header .header-main .block-search input#search::placeholder,
    .page-header .header-main .block-search input[type="text"]::placeholder {
        color: #999 !important;
        font-size: 14px !important;
    }

    .page-header .header-main .block-search input#search:focus,
    .page-header .header-main .block-search input[type="text"]:focus {
        outline: none !important;
        border-color: #e91e63 !important;
        background: #fff !important;
    }

    .page-header .header-main .block-search .action.search {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        padding: 0;
        border: none;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .page-header .header-main .block-search .action.search:before,
    .page-header .header-main .block-search .action.search span {
        display: none;
    }

    .page-header .header-main .block-search .action.search:after {
        content: '';
        width: 20px;
        height: 20px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='M21 21l-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* Header right - only wishlist visible */
    .page-header .header-main .header-right {
        flex: 0 0 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-width: 40px !important;
        max-width: 40px !important;
        margin-left: 6px !important;
    }

    .page-header .header-main .header-contact {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        width: 40px !important;
    }

    /* Show only wishlist on mobile header */
    .page-header .header-main .wishlist {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        color: #e91e63 !important;
        font-size: 22px !important;
        -webkit-tap-highlight-color: transparent !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .page-header .header-main .header-right .wishlist i {
        font-size: 22px !important;
    }

    /* Keep hiding cart and account from header (they're in bottom nav) */
    .page-header .header-main .minicart-wrapper {
        display: none !important;
    }

    .page-header .header-main .my-account {
        display: none !important;
    }

    /* Hide custom blocks on mobile header */
    .page-header .header-main .custom-block {
        display: none !important;
    }

    /* Hide navigation from header (it's in bottom nav) */
    .page-header .navigation.sections,
    .page-header .nav-sections {
        display: none !important;
    }

    /* Hide header bottom sections on mobile */
    .page-header .header-bottom,
    .page-header .main-menu-wrap {
        display: none !important;
    }


    body.rtl .search-area.show-icon-tablet a.search-toggle-icon {
        position: absolute;
        top: 0;
        left: 0 !important;
        z-index: 10;
        background: #EE3E54;
    }

    .search-area i.porto-icon-magnifier {
        color: #ffffff;
    }

    .page-header.type1 .control .search-category {
        left: 0 !important;
    }

    /* Ensure search autocomplete works properly */
    .page-header .block-search .search-autocomplete {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 5px;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        max-height: 400px;
        overflow-y: auto;
        z-index: 100;
    }
}

/* Small mobile devices - even more compact */
@media (max-width: 375px) {
    .page-header .header-main {
        padding: 10px 0;
    }

    .page-header .header-main .header-row {
        padding: 0 12px;
    }

    .page-header .header-main .header-left {
        flex: 0 0 70px;
        min-width: 70px;
        margin-right: 6px;
    }

    .page-header .header-main .logo {
        max-width: 70px;
    }

    .page-header .header-main .logo img {
        max-height: 30px;
    }

    .page-header .header-main .header-center,
    .page-header .header-main .search-area {
        margin: 0 6px;
        max-width: calc(100% - 150px);
        border: none !important;
    }

    .page-header .header-main .block-search input#search {
        height: 36px;
        font-size: 13px;
        padding: 0 35px 0 12px;
    }

    .page-header .header-main .header-right {
        flex: 0 0 40px;
        min-width: 40px;
    }

    .page-header .header-main .wishlist {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .page-header .header-main .wishlist i {
        font-size: 20px;
    }
}

/* Specific fixes for Porto theme header types */
@media (max-width: 991px) {

    /* Header Type specific overrides */
    .page-header.type1 .header-main .header-row,
    .page-header.type2 .header-main .header-row,
    .page-header.type3 .header-main .header-row,
    .page-header.type4 .header-main .header-row,
    .page-header.type5 .header-main .header-row,
    .page-header.type6 .header-main .header-row,
    .page-header.type7 .header-main .header-row,
    .page-header.type8 .header-main .header-row,
    .page-header.type9 .header-main .header-row,
    .page-header.type10 .header-main .header-row,
    .page-header.type11 .header-main .header-row,
    .page-header.type12 .header-main .header-row,
    .page-header.type13 .header-main .header-row,
    .page-header.type14 .header-main .header-row,
    .page-header.type15 .header-main .header-row,
    .page-header.type16 .header-main .header-row,
    .page-header.type17 .header-main .header-row,
    .page-header.type18 .header-main .header-row,
    .page-header.type19 .header-main .header-row,
    .page-header.type20 .header-main .header-row,
    .page-header.type21 .header-main .header-row,
    .page-header.type22 .header-main .header-row,
    .page-header.type23 .header-main .header-row,
    .page-header.type24 .header-main .header-row,
    .page-header.type25 .header-main .header-row,
    .page-header.type26 .header-main .header-row,
    .page-header.type27 .header-main .header-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* Ensure separators are hidden */
    .page-header .header-main .separator {
        display: none !important;
    }

    /* Hide all panel headers on mobile */
    .page-header .header-main .panel.header {
        display: none !important;
    }
}

/* Fix for sticky header on mobile */
@media (max-width: 991px) {
    .page-header.sticky .header-main {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
        from {
            transform: translateY(-100%);
        }

        to {
            transform: translateY(0);
        }
    }

    body.sticky-header-active {
        padding-top: 64px;
    }
}

/* Animation for search focus */
@media (max-width: 991px) {
    .page-header .header-main .block-search input#search {
        transition: all 0.3s ease;
    }

    .page-header .header-main .block-search input#search:focus {
        transform: scale(1.02);
    }
}