/*
 * Radiotalaat Header Manager
 * Header redesign matching dubaiphone.net
 * Structure: Promo / Ticker (marquee + contact cluster) / Sticky header
 *            (row 1: logo, search pill, action pills; row 2: category pills)
 *            + Mobile bottom bar.
 */

/* ===================================================================
   Promo banner (full-width image, scrolls away)
   =================================================================== */
.rh-promo {
    position: relative;
    overflow: hidden;
    background: var(--rh-header-bg, #fff);
}

.rh-promo .wp,
.rh-promo .widget {
    margin-block: 0;
}

.rh-promo .widget,
.rh-promo .widget img,
.rh-promo a.rh-promo-link,
.rh-promo .rh-promo-link {
    display: block;
}

.rh-promo .widget img {
    width: 100%;
    height: 80px;
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .rh-promo .widget img {
        height: 60px;
    }
}

/* ===================================================================
   Ticker strip
   =================================================================== */
.rh-ticker {
    background: var(--rh-ticker-bg, #e6f1f9);
    overflow: hidden;
}

.rh-ticker-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.75rem;
    padding-inline: 1rem;
    max-width: var(--container-max-width, 1280px);
    margin-inline: auto;
}

.rh-ticker-track {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    width: max-content;
    white-space: nowrap;
    direction: ltr;
    animation: rh-marquee 22s linear infinite;
    will-change: transform;
}

.rh-ticker:hover .rh-ticker-track {
    animation-play-state: paused;
}

.rh-ticker-group {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.rh-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--rh-text, #111);
    font-size: 0.8125rem;
}

.rh-ticker-item + .ticker-dot {
    margin-inline: 0.75rem;
}

.ticker-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 999px;
    background: var(--rh-accent, #2b7ab9);
    flex: none;
}

.rh-ticker-badge {
    background: var(--rh-accent, #2b7ab9);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.3125rem 0.5rem;
    border-radius: 999px;
}

.rh-ticker-cluster {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-inline-start: auto;
    flex: none;
    padding-inline-start: 0.75rem;
    border-inline-start: 1px solid var(--rh-text, #111);
    white-space: nowrap;
}

.rh-ticker-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: var(--rh-text, #111);
    text-decoration: none;
}

.rh-ticker-link svg {
    flex: none;
}

.rh-ticker-link:hover {
    opacity: 0.8;
}

.rh-ticker-phone {
    color: var(--rh-accent, #2b7ab9);
}

.rh-ticker-whatsapp {
    color: var(--rh-wa, #25d366);
}

/* language switcher at the end of the ticker (always visible) */
.rh-ticker-lang {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 1rem;
    flex: none;
}

.rh-ticker-lang .switcher.language {
    position: relative;
    margin: 0;
    display: inline-block;
}

.rh-ticker-lang .switcher.language .switcher-label {
    display: none;
}

.rh-ticker-lang .switcher.language .switcher-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--rh-text, #111);
    text-decoration: none;
    cursor: pointer;
}

.rh-ticker-lang .switcher.language .switcher-trigger strong {
    font-weight: 400;
}

.rh-ticker-lang .switcher.language .switcher-trigger strong span {
    display: none;
}

.rh-ticker-lang .switcher.language .switcher-trigger strong::after {
    content: "العربية";
}

.rh-ticker-lang .switcher.language .switcher-trigger::before {
    content: "";
    width: 1.5625rem;
    height: 1.5625rem;
    flex: none;
    border: 2px solid var(--rh-accent, #2b7ab9);
    border-radius: 999px;
    background:
        linear-gradient(180deg, #ce1126 0 25%, #fff 25% 50%, #fff 50% 78%, #000 78%);
}

.rh-ticker-lang .switcher.language .switcher-trigger::after {
    content: "";
    width: 1rem;
    height: 1rem;
    flex: none;
    margin-inline-start: 0.25rem;
    background-color: var(--rh-text, #111);
    -webkit-mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m6 9 6 6 6-6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat 50% 50%;
    -webkit-mask-size: 1rem 1rem;
    display: block;
}

.rh-ticker-lang .switcher.language .switcher-trigger.active::after {
    transform: rotate(180deg);
}

.rh-ticker-lang .switcher.language .switcher-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    inset-inline-end: 0;
    min-width: 9rem;
    padding: 0.375rem;
    background: #fff;
    border: 1px solid var(--rh-surface, #f3f5f6);
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.08);
    display: none;
    list-style: none;
    z-index: 70;
}

.rh-ticker-lang .switcher.language .switcher-dropdown[aria-hidden="false"] {
    display: block;
}

.rh-ticker-lang .switcher.language .switcher-dropdown li {
    margin: 0;
}

.rh-ticker-lang .switcher.language .switcher-dropdown a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--rh-text, #111);
    text-decoration: none;
}

.rh-ticker-lang .switcher.language .switcher-dropdown a:hover {
    background: var(--rh-surface, #f3f5f6);
}

@keyframes rh-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rh-ticker-track {
        animation: none;
        white-space: normal;
        width: 100%;
    }
    .rh-ticker-group {
        display: none;
    }
    .rh-ticker-group:first-child {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .rh-ticker-cluster,
    .rh-ticker .rh-ticker-cluster {
        display: none;
    }
}

/* ===================================================================
   Sticky header
   =================================================================== */
.radiotalaat-header-manager .header.content {
    background: var(--rh-header-bg, #fff);
    color: var(--rh-text, #111);
}

@media (max-width: 1023.98px) {
    .radiotalaat-header-manager .header.content {
        box-shadow: 0 4px 12px rgba(17, 17, 17, 0.05);
        border-bottom: 1px solid var(--rh-surface, #f3f5f6);
    }
}

.radiotalaat-header-manager .header-group {
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
}

/* ===================================================================
   Row 1: logo / search / action pills
   =================================================================== */
/* neutralise the theme's reserved space for the hidden hamburger */
.radiotalaat-header-manager .header-group {
    width: auto;
    margin-inline-start: 0;
    flex-wrap: wrap;
    row-gap: 0.75rem;
}

.radiotalaat-header-manager .header-group .logo {
    max-width: 191px;
    flex-shrink: 0;
    order: 1;
}

.radiotalaat-header-manager .header-group .logo img {
    max-width: 191px;
    height: auto;
}

.radiotalaat-header-manager .block-search {
    flex: 1 1 auto;
    max-width: 42rem;
    min-width: 0;
    order: 2;
}

/* Search pill */
.radiotalaat-header-manager .block-search .control {
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--rh-surface, #f3f5f6);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.radiotalaat-header-manager .block-search .control:focus-within {
    border-color: var(--rh-accent, #2b7ab9);
    background: linear-gradient(180deg, var(--rh-tint-1, #deecf7), var(--rh-tint-2, #eef6fb));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rh-accent, #2b7ab9) 18%, transparent);
}

.radiotalaat-header-manager .block-search input.input-text {
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: 0.875rem;
    padding-block: 0.625rem;
    min-width: 0;
}

/* "All categories" chip inside the search pill (desktop only) */
.rh-search-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: 0;
    padding: 0.25rem 0.75rem;
    margin-inline-end: 0.5rem;
    border-inline-end: 1px solid rgba(17, 17, 17, 0.18);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--rh-text, #111);
    cursor: pointer;
    white-space: nowrap;
}

.rh-search-cat:hover,
.rh-search-cat:focus {
    color: var(--rh-accent, #2b7ab9);
}

.rh-search-cat .rh-search-cat-chevron {
    flex: none;
}

.radiotalaat-header-manager .block-search .action.search {
    right: auto;
}

/* ===================================================================
   Action pills (wishlist / account / cart)
   =================================================================== */
.radiotalaat-header-manager .header-group .switcher-wishlist,
.radiotalaat-header-manager .header-group .switcher-account {
    display: flex;
    margin-inline-start: 0;
}

.radiotalaat-header-manager .header-group .switcher-wishlist {
    order: 3;
}

.radiotalaat-header-manager .header-group .switcher-account {
    order: 4;
}

.radiotalaat-header-manager .minicart-wrapper {
    order: 5;
}

.radiotalaat-header-manager .switcher-wishlist .switcher-trigger,
.radiotalaat-header-manager .switcher-account .switcher-trigger,
.radiotalaat-header-manager .minicart-wrapper .showcart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 120px;
    height: 40px;
    border-radius: 999px;
    background: var(--rh-surface, #f3f5f6);
    padding-inline: 1.25rem;
    color: var(--rh-text, #111);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
}

.radiotalaat-header-manager .switcher-wishlist .switcher-trigger:hover,
.radiotalaat-header-manager .switcher-wishlist .switcher-trigger.active,
.radiotalaat-header-manager .switcher-account .switcher-trigger:hover,
.radiotalaat-header-manager .switcher-account .switcher-trigger.active,
.radiotalaat-header-manager .minicart-wrapper .showcart:hover,
.radiotalaat-header-manager .minicart-wrapper .showcart.active {
    color: var(--rh-accent, #2b7ab9);
}

.radiotalaat-header-manager .switcher-wishlist .switcher-trigger::before,
.radiotalaat-header-manager .switcher-account .switcher-trigger::before {
    width: 1.5rem;
    height: 1.5rem;
    -webkit-mask-size: 1.5rem 1.5rem;
    flex: none;
}

/* reveal + localise the dropdown pill labels (icon forces srOnly=true) */
.radiotalaat-header-manager .header-group .switcher-wishlist .switcher-trigger strong.abs-visually-hidden,
.radiotalaat-header-manager .header-group .switcher-account .switcher-trigger strong.abs-visually-hidden {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 700;
    color: currentColor;
}

.radiotalaat-header-manager .header-group .switcher-wishlist .switcher-trigger strong.abs-visually-hidden span {
    display: none;
}

.radiotalaat-header-manager .header-group .switcher-account .switcher-trigger strong.abs-visually-hidden span {
    display: none;
}

.radiotalaat-header-manager .header-group .switcher-wishlist .switcher-trigger strong.abs-visually-hidden::after {
    content: "قائمة الرغبات";
}

.radiotalaat-header-manager .header-group .switcher-account .switcher-trigger strong.abs-visually-hidden::after {
    content: "حسابي";
}

.radiotalaat-header-manager .minicart-wrapper .showcart::before {
    width: 1.5rem;
    height: 1.5rem;
    -webkit-mask-size: 1.5rem 1.5rem;
    flex: none;
}

.radiotalaat-header-manager .minicart-wrapper .showcart .text {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    padding: 0;
}

/* localise the cart pill label */
.radiotalaat-header-manager .minicart-wrapper .showcart .text {
    font-size: 0;
}

.radiotalaat-header-manager .minicart-wrapper .showcart .text::after {
    content: "عربه التسوق";
    font-size: 0.8125rem;
    font-weight: 700;
}

.radiotalaat-header-manager .minicart-wrapper .showcart .counter.qty {
    position: relative;
    order: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--rh-danger, #e02a55);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    min-width: 1.25rem;
    height: 1.25rem;
    line-height: 1;
    border-radius: 999px;
    padding-inline: 0.25rem;
}

/* ===================================================================
   Row 2: category nav pills (desktop only)
   =================================================================== */
.radiotalaat-header-manager .header-group > .navigation-wrapper {
    width: 100%;
    order: 9;
    flex-basis: 100%;
    margin-block: 0.25rem 0;
    margin-inline: 0;
    border-block-start: 1px solid var(--rh-surface, #f3f5f6);
    padding-block-start: 0.5rem;
}

.radiotalaat-header-manager .header-group > .navigation-wrapper .navpro-menu {
    margin: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.radiotalaat-header-manager .header-group > .navigation-wrapper .navpro-menu > li {
    margin-inline-end: 0.5rem;
}

.radiotalaat-header-manager .header-group > .navigation-wrapper .navpro-menu > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 120px;
    height: 40px;
    border-radius: 999px;
    background: transparent;
    border: 0;
    padding-inline: 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.25px;
    color: var(--rh-text, #111);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}

.radiotalaat-header-manager .header-group > .navigation-wrapper .navpro-menu > li:first-child > a {
    background: var(--rh-danger, #e02a55);
    color: #fff;
}

.radiotalaat-header-manager .header-group > .navigation-wrapper .navpro-menu > li > a:hover,
.radiotalaat-header-manager .header-group > .navigation-wrapper .navpro-menu > li > a:focus {
    color: var(--rh-accent, #2b7ab9);
    background: transparent;
}

/* keep navpro dropdowns above other content */
.radiotalaat-header-manager .header-group > .navigation-wrapper .navpro li:hover > .navpro-dropdown {
    z-index: 70;
}

/* hide the second row entirely on mobile */
@media (max-width: 1023.98px) {
    .radiotalaat-header-manager .header-group > .navigation-wrapper {
        display: none;
    }
}

/* ===================================================================
   Mobile header: centered logo + full-width search pill
   =================================================================== */
@media (max-width: 1023.98px) {
    .radiotalaat-header-manager .header-group {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .radiotalaat-header-manager .header-group .logo {
        max-width: 140px;
        margin-inline: auto;
    }

    .radiotalaat-header-manager .header-group .logo img {
        max-width: 140px;
    }

    .radiotalaat-header-manager .block-search {
        order: 10;
        flex-basis: 100%;
        max-width: none;
    }

.radiotalaat-header-manager .switcher-wishlist,
    .radiotalaat-header-manager .switcher-account {
        display: none !important;
    }

    /* keep the minicart wrapper in the DOM (its slide-out drawer must
       still open from the mobile bottom bar); hide only the pill */
    .radiotalaat-header-manager .minicart-wrapper {
        order: 5;
        flex: none;
        width: 0;
        margin-inline: 0;
        overflow: visible !important;
    }

    .radiotalaat-header-manager .minicart-wrapper .showcart {
        display: none !important;
    }

    .rh-search-cat {
        display: none;
    }
}

/* ===================================================================
   Hide hamburger + legacy nav toggle when the bottom bar is active
   =================================================================== */
.radiotalaat-header-manager .page-header .action.nav-toggle,
.radiotalaat-header-manager [data-action="toggle-nav"] {
    display: none !important;
}

/* ===================================================================
   Mobile bottom navigation bar
   =================================================================== */
.rh-mobilebar {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 98;
    background: var(--rh-header-bg, #fff);
    box-shadow: 0 -4px 16px rgba(17, 17, 17, 0.06);
}

.rh-mobilebar-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    color: var(--rh-inactive, #989898);
    background: none;
    border: 0;
    border-top: 1.5px solid transparent;
    cursor: pointer;
    min-height: 4.375rem;
    position: relative;
    text-decoration: none;
}

.rh-mobilebar-item:hover,
.rh-mobilebar-item:focus {
    color: var(--rh-label, #4d4d4d);
}

.rh-mobilebar-item.is-active {
    color: var(--rh-accent, #2b7ab9);
    border-top-color: var(--rh-accent, #2b7ab9);
    background: linear-gradient(180deg, var(--rh-tint-1, #deecf7), var(--rh-tint-2, #eef6fb));
}

.rh-mobilebar-item.is-active .rh-mobilebar-label {
    color: var(--rh-accent, #2b7ab9);
}

.rh-mobilebar-icon {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
}

.rh-mobilebar-icon svg {
    width: 100%;
    height: 100%;
}

.rh-mobilebar-count {
    position: absolute;
    top: -0.25rem;
    inset-inline-end: -0.5rem;
    background: var(--rh-danger, #e02a55);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    min-width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    border-radius: 999px;
    padding-inline: 0.25rem;
    text-align: center;
}

.rh-mobilebar-label {
    font-size: 0.625rem;
    line-height: 1;
    color: var(--rh-label, #4d4d4d);
}

.rh-mobilebar-ask .rh-mobilebar-icon svg {
    color: var(--rh-wa, #25d366);
}

/* room for the fixed bottom bar */
@media (max-width: 1023.98px) {
    body.radiotalaat-header-manager .page-wrapper {
        padding-bottom: 4.75rem;
    }
}

@media (max-width: 1023.98px) {
    .rh-mobilebar {
        display: flex;
    }
}