/* ============================================================
   Loco Language Switcher — lls-style.css v2.0
   ListingPro header-aware styles
   ============================================================ */

/* ---- Base ------------------------------------------------ */
.lls-switcher {
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    font-size: 14px;
    position: relative;
    z-index: 9999;
    box-sizing: border-box;
    top: 0;          /* reset any inherited offset */
    vertical-align: middle;
}
.lls-switcher * { box-sizing: border-box; }
.lls-switcher.lls-align-right  { float: right; }
.lls-switcher.lls-align-center { margin: 0 auto; }

/* ============================================================
   HEADER WRAPPER (injected by JS)
   ============================================================ */
.lls-header-wrap {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
    margin-right: 4px;
    height: 100%;
}

/* ---- ListingPro Header Integration ----------------------- */
/* Makes the switcher look native in the LP header bar */
#lls-in-header {
    height: 100%;
    display: flex;
    align-items: center;
}

#lp-header .lls-header-wrap,
#header .lls-header-wrap {
    margin: 0 8px;
}

/* DoctorMedLink specific header integration */
.header-right-panel .lls-header-wrap {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    margin-right: 2px;
    vertical-align: middle;
    order: 1;
}

.header-right-panel .pull-right .lls-header-wrap {
    float: right;
    margin-right: 10px;
}

/* Position language switcher between buttons */
.header-right-panel .pull-right > div:nth-child(2) + .lls-header-wrap {
    order: 2;
    margin-left: 0px;
    margin-right: 10px;
}

#lp-header .lls-current,
#header .lls-current {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    height: 36px;
    padding: 0 12px;
    border-radius: 4px;
    font-size: 13px;
}

#lp-header .lls-current:hover,
#header .lls-current:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
}

/* DoctorMedLink specific header styling - higher specificity */
.header-right-panel .lls-current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 8px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    font-family: inherit;
}

.header-right-panel .lls-current:hover,
.header-right-panel .lls-current:focus {
    background: #f5f5f5;
    border-color: #aaa;
    outline: none;
}

/* Dark/light header variants */
.lp-header-light .lls-current,
.header-light .lls-current,
#lp-header.lp-light .lls-current {
    color: #333;
    border-color: rgba(0, 0, 0, 0.2);
}
.lp-header-light .lls-current:hover,
.header-light .lls-current:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Dropdown list inside header */
#lls-in-header .lls-dropdown-list {
    top: calc(100% + 8px);
    min-width: 160px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

/* ============================================================
   DROPDOWN STYLE
   ============================================================ */
.lls-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.lls-current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    font-family: inherit;
}
.lls-current:hover,
.lls-current:focus {
    background: #f5f5f5;
    border-color: #aaa;
    outline: none;
}
.lls-arrow {
    font-size: 9px;
    color: inherit;
    opacity: 0.7;
    transition: transform 0.2s ease;
    margin-left: 2px;
}
.lls-dropdown.lls-open .lls-arrow {
    transform: rotate(180deg);
}

/* Dropdown list */
.lls-dropdown-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    min-width: 155px;
    display: none;
    z-index: 100000;
}
.lls-rtl .lls-dropdown-list {
    left: auto;
    right: 0;
}
.lls-dropdown.lls-open .lls-dropdown-list {
    display: block;
    animation: lls-pop 0.12s ease;
}
@keyframes lls-pop {
    from { opacity: 0; transform: translateY(-5px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.lls-dropdown-list li a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    color: #333;
    text-decoration: none !important;
    white-space: nowrap;
    font-size: 13px;
    transition: background 0.12s;
}
.lls-dropdown-list li a:hover {
    background: #f3f4f6;
    color: #111;
}
.lls-dropdown-list li.lls-active a {
    background: #eef6ff;
    color: #0073aa;
    font-weight: 600;
}

/* ============================================================
   LIST STYLE
   ============================================================ */
.lls-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.lls-list li a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    text-decoration: none !important;
    font-size: 13px;
    transition: background 0.15s, border-color 0.15s;
}
.lls-list li a:hover       { background: #f5f5f5; border-color: #aaa; }
.lls-list li.lls-active a  { background: #0073aa; border-color: #0073aa; color: #fff; }

/* ============================================================
   FLAGS STYLE
   ============================================================ */
.lls-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}
.lls-flag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    font-size: 20px;
    text-decoration: none !important;
    transition: border-color 0.2s, transform 0.15s;
}
.lls-flag-btn:hover      { border-color: #0073aa; transform: scale(1.15); }
.lls-flag-btn.lls-active { border-color: #0073aa; background: #eef6ff; }

/* ============================================================
   FLOATING BUTTON (position = 'floating')
   ============================================================ */
#lls-floating {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999999;
}
#lls-floating .lls-current {
    background: #0073aa;
    border-color: #0073aa;
    color: #fff;
    box-shadow: 0 3px 12px rgba(0, 115, 170, 0.4);
    border-radius: 50px;
    padding: 8px 16px;
}
#lls-floating .lls-current:hover {
    background: #006291;
    border-color: #006291;
}
#lls-floating .lls-dropdown-list {
    bottom: calc(100% + 8px);
    top: auto;
    left: auto;
    right: 0;
}

/* ============================================================
   NAV MENU INTEGRATION
   ============================================================ */
.lls-nav-item { list-style: none; display: flex; align-items: center; }
.lls-nav-item > .lls-switcher { margin: 0; }

/* ============================================================
   SHARED ELEMENT STYLES
   ============================================================ */
.lls-flag  { font-size: 1.1em; line-height: 1; flex-shrink: 0; }
.lls-label { line-height: 1; }

/* ============================================================
   RTL SUPPORT
   ============================================================ */
.lls-rtl .lls-list              { direction: rtl; }
.lls-rtl .lls-flags             { direction: rtl; }
.lls-rtl .lls-current           { flex-direction: row-reverse; }
.lls-rtl .lls-dropdown-list li a { flex-direction: row-reverse; }
.lls-rtl .lls-dropdown-list     { left: auto; right: 0; }

/* ============================================================
   MOBILE HEADER BAR INTEGRATION
   .lp-menu-bar.header-bg-color-class
   ============================================================ */

/* Hidden on desktop — only shown at the mobile breakpoint */
.lls-mobile-header-wrap {
    display: none;
    align-items: center;
    margin-left: 6px;
    margin-right: 6px;
    vertical-align: middle;
    position: relative;   /* own stacking context — keeps dropdown above page content */
    z-index: 10000;
    flex-shrink: 0;
}

#lls-in-mobile-header {
    display: none;
    align-items: center;
}

/* -------------------------------------------------------
   Visual pill button — clearly tappable on mobile
------------------------------------------------------- */
.lls-mobile-header-wrap .lls-current {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;       /* pill shape — clearly a button */
    height: 32px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
    /* Subtle text-shadow to keep legible on both light & dark headers */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.lls-mobile-header-wrap .lls-current:hover,
.lls-mobile-header-wrap .lls-current:focus {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.9);
    outline: none;
}

/* Arrow indicator */
.lls-mobile-header-wrap .lls-arrow {
    font-size: 8px;
    opacity: 0.85;
    margin-left: 1px;
}

/* Dropdown opens downward; right-aligned to avoid overflow on small screens */
.lls-mobile-header-wrap .lls-dropdown-list {
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    min-width: 150px;
    /* Extra shadow so it floats clearly above the page */
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

/* On very small screens keep only the flag emoji — no text label.
   Samsung Galaxy S/A series are 360–412px so keep label visible down to 320px. */
@media (max-width: 320px) {
    .lls-mobile-header-wrap .lls-label,
    .lls-mobile-header-wrap .lls-arrow {
        display: none;
    }

    .lls-mobile-header-wrap .lls-current {
        padding: 5px 8px;
        border-radius: 50%;
        width: 32px;
        justify-content: center;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
    /* Hide desktop header switcher on mobile */
    #lls-in-header { display: none !important; }
    .lls-header-wrap { display: none; }

    /* Show the mobile bar switcher */
    #lls-in-mobile-header { display: inline-flex !important; }
    .lls-mobile-header-wrap {
        display: inline-flex !important;
        align-items: center;
    }

    /* -------------------------------------------------------
       Make .mobile-nav-icon a flex row so the language pill
       and hamburger sit neatly side-by-side.
       Scoped to ≤980px only — desktop layout is untouched.
    ------------------------------------------------------- */
    .lp-menu-bar .mobile-nav-icon {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }

    /* Hide floating when mobile bar injection succeeded */
    body:has(.lp-menu-bar.header-bg-color-class #lls-in-mobile-header) #lls-floating {
        display: none !important;
    }
    /* Fallback for browsers without :has() — floating stays visible */
    #lls-floating { display: block !important; }
}

@media (max-width: 600px) {
    #lls-floating {
        bottom: 16px;
        right: 16px;
    }
    #lls-floating .lls-current {
        padding: 7px 12px;
        font-size: 13px;
    }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .lls-switcher, #lls-floating { display: none !important; }
}