/* Datasky Redesign: floating language button above the Side Cart basket.
   The sizes below match the basket's defaults (Side Cart settings: 60px, 14px corners). lang-float.js copies
   the live basket's size, corners, colours, shadow and position, so changing those in Side Cart moves this too. */
.dsr-lang {
    --dsr-lang-size: 60px;
    --dsr-lang-gap: 12px;
    position: fixed;
    right: 11px;
    bottom: calc(22px + var(--dsr-lang-size) + var(--dsr-lang-gap));
    z-index: 99998;
    width: var(--dsr-lang-size);
    height: var(--dsr-lang-size);
    font-family: 'Plus Jakarta Sans', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: opacity .2s ease, transform .2s ease;
}
.dsr-lang.is-alone { bottom: 22px; }

@media (max-width: 768px) {
    /* the basket sits above the bottom menu on phones */
    .dsr-lang { bottom: calc(95px + env(safe-area-inset-bottom, 0px) + var(--dsr-lang-size) + var(--dsr-lang-gap)); }
    .dsr-lang.is-alone { bottom: calc(95px + env(safe-area-inset-bottom, 0px)); }
}

/* Out of the way while the side cart is open */
.xoo-wsc-cart-active .dsr-lang { opacity: 0; pointer-events: none; transform: scale(.9); }

.dsr-lang__btn {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    background: #fff;
    color: #1E73BE;
    box-shadow: 0 0 15px 2px rgba(0, 0, 0, .1);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease;
}
.dsr-lang__btn:hover { transform: translateY(-1px); }
.dsr-lang__btn:active { transform: scale(.96); }
.dsr-lang__btn:focus-visible { outline: 3px solid #FFD23F; outline-offset: 2px; }

.dsr-lang__flag {
    display: block;
    width: 34px;
    height: 23px;
    border-radius: 5px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(11, 22, 64, .12);
}
.dsr-lang__code {
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
}

/* Menu opens beside the button, towards the middle of the screen */
.dsr-lang__menu {
    position: absolute;
    right: calc(100% + 10px);
    bottom: 0;
    min-width: 176px;
    padding: 6px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(11, 22, 64, .18), 0 0 0 1px rgba(11, 22, 64, .06);
    animation: dsr-lang-in .16s ease-out;
}
.dsr-lang.is-left .dsr-lang__menu { right: auto; left: calc(100% + 10px); }
.dsr-lang__menu[hidden] { display: none; }
@keyframes dsr-lang-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.dsr-lang__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    color: #0B1640 !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
}
.dsr-lang__opt span[lang="ar"] { font-family: 'Tajawal', Tahoma, sans-serif; font-size: 16px; }
.dsr-lang__opt img { flex: none; width: 28px; height: 19px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgba(11, 22, 64, .12); }
.dsr-lang__opt:focus { outline: none; }
.dsr-lang__opt:hover, .dsr-lang__opt:focus-visible { background: #EEF4FF; }
.dsr-lang__opt:focus-visible { box-shadow: inset 0 0 0 2px #0A7BFC; }
.dsr-lang__check { margin-inline-start: auto; color: #0A7BFC; visibility: hidden; }
.dsr-lang__opt.is-current { background: #F4F7FC; }
.dsr-lang__opt.is-current .dsr-lang__check { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
    .dsr-lang, .dsr-lang__btn, .dsr-lang__menu { transition: none; animation: none; }
}