/*
 * Sana Baghdad Pharmacy — Global Header + Footer v1.16
 */

:root {
    --sana-teal: #0DA8A8;
    --sana-teal-dark: #078989;
    --sana-deep: #085858;
    --sana-mint: #E5F6F6;
    --sana-ink: #17202A;
    --sana-muted: #667673;
    --sana-line: #DCECEC;
    --sana-white: #FFFFFF;
}

/* =========================
   Header
   ========================= */

.sana-store-header-shell {
    background: rgba(255,255,255,.97) !important;
    border-bottom: 1px solid var(--sana-line) !important;
    box-shadow: 0 8px 28px -26px rgba(8,88,88,.55);
    color: var(--sana-ink) !important;
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 90;
    backdrop-filter: blur(12px);
}

.sana-store-header-shell,
.sana-store-header-shell .wp-block-group {
    background-color: rgba(255,255,255,.97) !important;
}

.sana-store-header-shell .wp-block-site-title {
    margin: 0 !important;
    line-height: 1 !important;
}

.sana-store-header-shell .sana-header-brand {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    color: var(--sana-ink) !important;
    min-height: 50px;
}

.sana-store-header-shell .sana-header-brand-fallback {
    display: flex;
    flex-direction: column;
    gap: 4px;
    direction: rtl;
    text-align: right;
    min-width: 170px;
}

.sana-store-header-shell .sana-header-brand-fallback strong {
    color: var(--sana-deep);
    font-size: 1.22rem;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
}

.sana-store-header-shell .sana-header-brand-fallback small {
    color: var(--sana-muted);
    font-size: .74rem;
    line-height: 1.25;
    font-weight: 550;
    white-space: nowrap;
}

.sana-store-header-shell .wp-block-navigation {
    direction: rtl;
}

.sana-store-header-shell .wp-block-navigation__container {
    direction: rtl;
    align-items: center !important;
    gap: clamp(14px, 2vw, 26px) !important;
}

.sana-store-header-shell .wp-block-navigation-item__content {
    color: #31413E !important;
    font-size: .95rem;
    font-weight: 650;
    text-decoration: none !important;
    transition: color .18s ease;
}

.sana-store-header-shell .wp-block-navigation-item__content:hover {
    color: var(--sana-teal) !important;
}

.sana-store-header-shell a,
.sana-store-header-shell svg {
    color: var(--sana-ink);
}

.sana-store-header-shell .wp-block-woocommerce-customer-account,
.sana-store-header-shell .wp-block-woocommerce-mini-cart,
.sana-store-header-shell .wc-block-mini-cart {
    color: var(--sana-deep) !important;
}

.sana-store-header-shell img[hidden],
.sana-store-header-shell .sana-header-logo[hidden] {
    display: none !important;
}

/* =========================
   Product search
   ========================= */

.sana-search-toggle {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--sana-line);
    border-radius: 12px;
    background: var(--sana-mint);
    color: var(--sana-deep);
    cursor: pointer;
    padding: 0;
    transition: .18s ease;
}

.sana-search-toggle:hover {
    background: var(--sana-teal);
    border-color: var(--sana-teal);
    color: var(--sana-white);
}

.sana-search-toggle svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
}

.sana-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: start center;
    padding: min(18vh, 150px) 18px 30px;
    background: rgba(8,48,48,.38);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}

.sana-search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

html.sana-search-open {
    overflow: hidden;
}

.sana-search-dialog {
    width: min(680px, 100%);
    position: relative;
    background: var(--sana-white);
    border: 1px solid var(--sana-line);
    border-radius: 20px;
    box-shadow: 0 24px 70px -28px rgba(8,88,88,.45);
    padding: 28px;
    color: var(--sana-ink);
}

.sana-search-dialog > strong {
    display: block;
    margin-bottom: 14px;
    font-size: 1.25rem;
    color: var(--sana-deep);
}

.sana-search-close {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #F5F8F8;
    color: #52635F;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.sana-product-search {
    display: flex;
    gap: 10px;
}

.sana-product-search input[type="search"] {
    flex: 1;
    min-width: 0;
    border: 1.5px solid var(--sana-line);
    border-radius: 12px;
    padding: 13px 15px;
    background: #FFFFFF;
    color: var(--sana-ink);
    font: inherit;
    outline: none;
}

.sana-product-search input[type="search"]:focus {
    border-color: var(--sana-teal);
    box-shadow: 0 0 0 3px rgba(13,168,168,.11);
}

.sana-product-search button[type="submit"] {
    border: 0;
    border-radius: 12px;
    padding: 0 22px;
    background: var(--sana-teal);
    color: #FFFFFF;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* =========================
   Footer
   ========================= */

/* Hide the theme's own footer so there is only one footer. */
body.sana-has-footer footer.wp-block-template-part,
body.sana-has-footer .wp-site-blocks > footer,
body.sana-has-footer footer.site-footer {
    display: none !important;
}

.sana-site-footer {
    width: 100%;
    margin-top: 72px;
    background: #063F3F !important;
    color: rgba(255,255,255,.86) !important;
    border-top: 1px solid rgba(255,255,255,.08);
}

.sana-footer-inner {
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto;
    padding: 48px 0 38px;
    display: grid;
    grid-template-columns: 1.35fr .8fr .8fr .9fr;
    gap: 42px;
}

.sana-footer-brand__name {
    display: inline-block;
    color: #FFFFFF !important;
    font-size: 1.35rem;
    line-height: 1.3;
    font-weight: 850;
    text-decoration: none !important;
}

.sana-footer-brand p {
    margin: 10px 0 8px;
    color: #9FE3E1 !important;
    font-size: .9rem;
}

.sana-footer-brand > span {
    color: rgba(255,255,255,.62) !important;
    font-size: .82rem;
}

.sana-footer-links,
.sana-footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.sana-footer-links strong,
.sana-footer-contact > strong {
    color: #FFFFFF !important;
    font-size: .93rem;
    margin-bottom: 4px;
}

.sana-footer-links a,
.sana-footer-social {
    color: rgba(255,255,255,.68) !important;
    font-size: .84rem;
    text-decoration: none !important;
    transition: color .18s ease;
}

.sana-footer-links a:hover,
.sana-footer-social:hover {
    color: #FFFFFF !important;
}

.sana-footer-social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sana-footer-social > span:first-child {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 9px;
    color: #9FE3E1 !important;
    font-size: 1rem;
}

.sana-footer-search {
    margin-top: 5px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    background: transparent;
    color: #FFFFFF;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
}

.sana-footer-search:hover {
    background: rgba(255,255,255,.08);
}

.sana-footer-bottom {
    width: min(1180px, calc(100% - 36px));
    min-height: 58px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.5) !important;
    font-size: .75rem;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 900px) {
    .sana-site-footer {
        margin-top: 58px;
    }

    .sana-footer-inner {
        grid-template-columns: 1.35fr 1fr 1fr;
        gap: 32px 24px;
    }

    .sana-footer-contact {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .sana-footer-contact > strong {
        width: 100%;
    }
}

@media (max-width: 780px) {
    .sana-store-header-shell .sana-header-brand-fallback strong {
        font-size: 1rem;
    }

    .sana-store-header-shell .sana-header-brand-fallback small {
        display: none;
    }

    .sana-search-toggle {
        width: 39px;
        height: 39px;
    }

    .sana-product-search {
        flex-direction: column;
    }

    .sana-product-search button[type="submit"] {
        min-height: 46px;
    }
}

@media (max-width: 620px) {
    .sana-site-footer {
        margin-top: 48px;
    }

    .sana-footer-inner {
        width: calc(100% - 28px);
        padding: 38px 0 30px;
        grid-template-columns: 1fr 1fr;
        gap: 30px 18px;
    }

    .sana-footer-brand,
    .sana-footer-contact {
        grid-column: 1 / -1;
    }

    .sana-footer-bottom {
        width: calc(100% - 28px);
        padding: 16px 0;
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

@media (max-width: 390px) {
    .sana-footer-inner {
        grid-template-columns: 1fr;
    }

    .sana-footer-brand,
    .sana-footer-contact {
        grid-column: auto;
    }
}


/* =========================================================
   v1.17 — Mobile final pass
   ========================================================= */

/* Prevent the horizontal overflow visible on the phone. */
html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
}

/* Compact footer on phone: keep quick links in two columns. */
@media (max-width: 620px) {
    .sana-footer-inner {
        width: calc(100% - 24px);
        padding: 30px 0 24px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px 16px !important;
    }

    .sana-footer-brand {
        grid-column: 1 / -1 !important;
    }

    .sana-footer-contact {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 10px;
    }

    .sana-footer-contact > strong {
        grid-column: 1 / -1;
        margin-bottom: 2px;
    }

    .sana-footer-social,
    .sana-footer-search {
        min-height: 42px;
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
        margin: 0;
    }

    .sana-footer-links {
        gap: 8px;
    }

    .sana-footer-links strong,
    .sana-footer-contact > strong {
        font-size: .88rem;
    }

    .sana-footer-links a,
    .sana-footer-social,
    .sana-footer-search {
        font-size: .78rem;
    }

    .sana-footer-bottom {
        width: calc(100% - 24px);
    }
}

/* Do NOT collapse the footer to one very tall column on 360px phones. */
@media (max-width: 390px) {
    .sana-footer-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .sana-footer-brand,
    .sana-footer-contact {
        grid-column: 1 / -1 !important;
    }
}

/* More compact header controls on phones. */
@media (max-width: 780px) {
    .sana-store-header-shell .wp-block-group {
        gap: 8px !important;
    }

    .sana-store-header-shell .sana-header-brand-fallback {
        min-width: 0 !important;
    }

    .sana-store-header-shell .sana-header-brand-fallback strong {
        font-size: .95rem;
        white-space: nowrap;
    }

    .sana-search-toggle {
        width: 40px;
        height: 40px;
        border-radius: 11px;
    }
}


/* =========================================================
   v1.18 — final mobile spacing + cookie control
   ========================================================= */

@media (max-width: 620px) {
    /* CookieYes revisit button was covering product/content text. */
    .cky-btn-revisit-wrapper,
    .cky-revisit-bottom-left,
    .cky-revisit-bottom-right {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        bottom: 10px !important;
    }

    .cky-revisit-bottom-left {
        left: 10px !important;
    }

    .cky-revisit-bottom-right {
        right: 10px !important;
    }

    .cky-btn-revisit-wrapper img,
    .cky-btn-revisit-wrapper svg {
        width: 27px !important;
        height: 27px !important;
        max-width: 27px !important;
        max-height: 27px !important;
    }
}


/* =========================================================
   v1.20 — SAFE mobile menu fix (no MutationObserver)
   ========================================================= */
@media (max-width: 780px) {
    .wp-block-navigation__responsive-container.is-menu-open {
        background: #fff !important;
        color: #17202A !important;
        padding: 18px 20px 28px !important;
        overflow-y: auto !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
        top: 16px !important;
        left: 16px !important;
        right: auto !important;
        width: 42px !important;
        height: 42px !important;
        padding: 8px !important;
        border-radius: 12px !important;
        background: #F4FAFA !important;
        color: #17202A !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        padding-top: 8px !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .sana-mobile-menu-brand {
        display: flex !important;
        flex-direction: column;
        gap: 4px;
        width: calc(100% - 64px);
        margin: 2px 0 24px auto;
        padding: 4px 0 16px;
        border-bottom: 1px solid #DCECEC;
        color: #085858 !important;
        text-decoration: none !important;
        text-align: right;
    }

    .sana-mobile-menu-brand strong {
        font-size: 1.05rem;
        line-height: 1.25;
        font-weight: 850;
        color: #085858 !important;
    }

    .sana-mobile-menu-brand small {
        font-size: .72rem;
        color: #667673 !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > ul {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        direction: rtl !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid #EDF3F3 !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        display: flex !important;
        width: 100% !important;
        min-height: 56px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 2px !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        color: #2F403D !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        text-align: right !important;
        text-decoration: none !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
        color: #0DA8A8 !important;
        background: transparent !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }
}


/* =========================================================
   v1.21 SAFE — hide mobile-menu brand on desktop
   ========================================================= */

/* The mobile menu identity must never appear in the desktop header. */
.sana-mobile-menu-brand {
    display: none !important;
}

@media (max-width: 780px) {
    .wp-block-navigation__responsive-container.is-menu-open .sana-mobile-menu-brand {
        display: flex !important;
    }
}


/* =========================================================
   v1.22 SAFE — Verified pharmacy contact channels
   Google Maps + WhatsApp Business + Facebook + Instagram
   ========================================================= */

.sana-footer-location {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 3px;
    color: rgba(255,255,255,.68) !important;
    font-size: .82rem;
    line-height: 1.5;
    text-decoration: none !important;
}

.sana-footer-location:hover {
    color: #FFFFFF !important;
}

.sana-footer-location__icon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 8px;
    color: #9FE3E1 !important;
    font-size: .82rem;
}

.sana-footer-contact-links {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sana-footer-contact-link {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 9px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.74) !important;
    font-size: .76rem;
    font-weight: 650;
    text-decoration: none !important;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.sana-footer-contact-link:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.28);
    color: #FFFFFF !important;
}

.sana-footer-contact-icon {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(159,227,225,.08);
    color: #9FE3E1 !important;
    font-size: .8rem;
    font-weight: 850;
}

.sana-contact-whatsapp .sana-footer-contact-icon {
    font-size: .7rem;
}

.sana-footer-contact .sana-footer-search {
    width: 100%;
    justify-content: center;
}

@media (max-width: 900px) {
    .sana-footer-contact {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .sana-footer-contact-links {
        max-width: 430px;
    }

    .sana-footer-contact .sana-footer-search {
        width: auto;
        min-width: 150px;
    }
}

@media (max-width: 620px) {
    .sana-footer-contact {
        display: block !important;
    }

    .sana-footer-contact > strong {
        display: block;
        margin-bottom: 10px;
    }

    .sana-footer-contact-links {
        max-width: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .sana-footer-contact-link {
        min-height: 43px;
        justify-content: center;
        padding-inline: 6px;
        font-size: .74rem;
    }

    .sana-footer-contact .sana-footer-search {
        width: 100%;
        margin-top: 9px;
    }

    .sana-footer-location {
        font-size: .78rem;
    }
}