/* ═══════════════════════════════════════════════════════════
   ASAR – Doctors & Hospitals Dropdown
   Pixel-accurate match to Figma Variant4
   Nav tokens: primary #004750 · accent #D5992D · beige #FFF8F0
═══════════════════════════════════════════════════════════ */

/* ── Parent <li> ── */
.asar-nav-list .asar-dh-parent {
    position: relative !important;
    list-style: none;
}

/* ══════════════════════════════════════════════════════════
   TRIGGER LINK
   Exact same values as .asar-nav-list li a in style.css:
   font-size 13px · font-weight 500 · font-family var(--font-body) · padding 6px
══════════════════════════════════════════════════════════ */
.asar-nav-list .asar-dh-parent > a.asar-dh-trigger,
.asar-nav-list .asar-dh-parent > a.asar-dh-trigger:link,
.asar-nav-list .asar-dh-parent > a.asar-dh-trigger:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #ffffff !important;
    font-size: 13px !important;              /* same as .asar-nav-list li a */
    font-weight: 500 !important;             /* same as .asar-nav-list li a */
    font-family: var(--font-body) !important; /* same as .asar-nav-list li a */
    line-height: normal !important;
    padding: 6px !important;                 /* same as .asar-nav-list li a */
    text-decoration: none !important;
    white-space: nowrap !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    cursor: pointer;
    text-shadow: 0 4px 4px rgba(0,0,0,0.25);
}

.asar-nav-list .asar-dh-parent > a.asar-dh-trigger:hover {
    color: #ffffff !important;
    opacity: 0.8 !important;               /* same hover as .asar-nav-list li a:hover */
    text-decoration: none !important;
}

/* Chevron */
.asar-dh-chevron {
    width: 10px;
    height: 6px;
    flex-shrink: 0;
    stroke: #ffffff;
    transition: transform 0.2s ease;
}

.asar-dh-parent:hover .asar-dh-chevron,
.asar-dh-parent.is-open .asar-dh-chevron {
    transform: rotate(180deg);
}

/* ══════════════════════════════════════════════════════════
   DROPDOWN PANEL
   Figma: bg #FFF8F0, padding 32px, border-radius 32px
   Positioned below the nav pill, aligned left of trigger
══════════════════════════════════════════════════════════ */
.asar-dh-dropdown {
    position: absolute !important;
    top: calc(100% + 12px) !important;  /* gap below trigger */
    left: 0 !important;
    z-index: 99999 !important;

    /* Figma exact values */
    background: #FFF8F0 !important;
    border-radius: 32px !important;
    padding: 20px 24px !important;
    min-width: 220px !important;

    /* Show/hide */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease,
                transform 0.2s ease,
                visibility 0s linear 0.2s;
    pointer-events: none;

    /* Shadow for depth */
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
}

/* Open state */
.asar-dh-parent:hover .asar-dh-dropdown,
.asar-dh-parent.is-open .asar-dh-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition: opacity 0.2s ease,
                transform 0.2s ease,
                visibility 0s linear 0s;
}

/* ══════════════════════════════════════════════════════════
   DROPDOWN ITEMS
   Figma: Satoshi Regular, 18px, black text
   Active: bg rgba(213,153,45,0.2), border-radius 8px
══════════════════════════════════════════════════════════ */
.asar-dh-item {
    display: block !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    font-family: 'Satoshi', 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.15s ease !important;
    line-height: 1.4 !important;
}

.asar-dh-item:hover {
    background: rgba(244, 166, 35, 0.15) !important;
    color: #000000 !important;
    text-decoration: none !important;
}

/* Active / first item highlight — Figma: rgba(244,166,35,0.2) */
.asar-dh-item--active {
    background: rgba(244, 166, 35, 0.2) !important;
}

.asar-dh-item--active:hover {
    background: rgba(244, 166, 35, 0.3) !important;
}

/* ══════════════════════════════════════════════════════════
   MOBILE — hide dropdown, let mobile nav handle it
══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .asar-dh-dropdown {
        display: none !important;
    }
    .asar-dh-chevron {
        display: none !important;
    }
}