/* =========================================================
   MDRx Clean Mobile Header
   ========================================================= */

.mdrx-mobile-header {
    display: none;
}

@media (max-width: 767px) {
    body .cp11-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        background: #ffffff !important;
        border-bottom: 1px solid #dbe3eb !important;
        box-shadow: 0 7px 22px rgba(21, 39, 73, 0.08) !important;
    }

    body .cp11-header > .cp11-header__main,
    body .cp11-header > .cp11-mobile-search-row {
        display: none !important;
    }

    body .mdrx-mobile-header {
        display: block !important;
        width: 100% !important;
        background: #ffffff !important;
    }

    .mdrx-mobile-header__top {
        min-height: 66px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 9px 14px 7px;
        background: #ffffff;
    }

    .mdrx-mobile-header__logo {
        min-width: 0;
        max-width: 160px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
    }

    .mdrx-mobile-header__logo img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 150px !important;
        max-height: 48px !important;
        object-fit: contain !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
    }

    .mdrx-mobile-header__actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 9px;
        flex-shrink: 0;
    }

    .mdrx-mobile-header__icon-button {
        position: relative;
        width: 43px;
        height: 43px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid #dbe3eb;
        border-radius: 13px;
        background: #ffffff;
        color: #152749;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(21, 39, 73, 0.05);
    }

    .mdrx-mobile-header__icon-button svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mdrx-mobile-header__icon-button:active {
        transform: scale(0.97);
    }

    .mdrx-mobile-header__cart {
        border-color: #c91322;
        background: #c91322;
        color: #ffffff;
    }

    .mdrx-mobile-header__cart strong {
        position: absolute;
        top: -7px;
        right: -6px;
        min-width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        border: 2px solid #ffffff;
        border-radius: 999px;
        background: #152749;
        color: #ffffff;
        font-size: 10px;
        font-weight: 900;
        line-height: 1;
    }

    .mdrx-mobile-header__bottom {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        align-items: center;
        gap: 9px;
        padding: 6px 14px 12px;
        background: #ffffff;
    }

    .mdrx-mobile-header__menu {
        width: 46px;
        height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 13px;
        background: #152749;
        color: #ffffff;
        box-shadow: 0 6px 15px rgba(21, 39, 73, 0.18);
    }

    .mdrx-mobile-header__menu svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }

    .mdrx-mobile-header__search {
        position: relative;
        height: 46px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 48px;
        overflow: visible;
        border: 1px solid #cfd9e3;
        border-radius: 13px;
        background: #ffffff;
    }

    .mdrx-mobile-header__search:focus-within {
        border-color: #168ca8;
        box-shadow: 0 0 0 3px rgba(22, 140, 168, 0.12);
    }

    .mdrx-mobile-header__search input {
        width: 100%;
        height: 44px;
        min-width: 0;
        margin: 0 !important;
        padding: 0 14px;
        border: 0 !important;
        border-radius: 13px 0 0 13px !important;
        background: transparent !important;
        color: #152749 !important;
        font-size: 14px;
        outline: 0 !important;
        box-shadow: none !important;
    }

    .mdrx-mobile-header__search input::placeholder {
        color: #7a8795;
    }

    .mdrx-mobile-header__search > button {
        width: 48px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 0 12px 12px 0;
        background: #168ca8 !important;
        color: #ffffff !important;
    }

    .mdrx-mobile-header__search > button svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mdrx-mobile-header__search .cp-search-results {
        position: absolute;
        top: calc(100% + 7px);
        left: 0;
        right: 0;
        z-index: 1100;
        overflow: hidden;
        border: 1px solid #dbe3eb;
        border-radius: 13px;
        background: #ffffff;
        box-shadow: 0 15px 35px rgba(21, 39, 73, 0.15);
    }
}

@media (max-width: 390px) {
    .mdrx-mobile-header__top {
        padding-left: 11px;
        padding-right: 11px;
    }

    .mdrx-mobile-header__bottom {
        padding-left: 11px;
        padding-right: 11px;
    }

    .mdrx-mobile-header__logo {
        max-width: 135px;
    }

    .mdrx-mobile-header__logo img {
        max-width: 130px !important;
        max-height: 43px !important;
    }

    .mdrx-mobile-header__icon-button {
        width: 40px;
        height: 40px;
    }
}

@media (min-width: 768px) {
    .mdrx-mobile-header {
        display: none !important;
    }
}