/* ==========================================================================
   Drawer menu (phones / tablets) — slides in from the menu-button side.
   ========================================================================== */

.dw {
    --dw-accent: #dea8e4;
    --dw-accent-strong: #c996d2;
    --dw-bg: #2a1140;
    --dw-line: rgba(255, 255, 255, 0.08);
    --dw-muted: rgba(255, 255, 255, 0.62);
    position: fixed;
    inset: 0;
    z-index: 100000000;
    visibility: hidden;
    pointer-events: none;
}

.dw--open {
    visibility: visible;
    pointer-events: auto;
}

html.dw-lock,
html.dw-lock body {
    overflow: hidden !important;
}

.dw__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 4, 22, 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dw--open .dw__backdrop {
    opacity: 1;
}

.dw__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: min(88vw, 390px);
    display: flex;
    flex-direction: column;
    color: #fff;
    background:
        radial-gradient(120% 60% at 100% 0%, rgba(222, 168, 228, 0.18) 0%, rgba(222, 168, 228, 0) 60%),
        linear-gradient(180deg, #3b185a 0%, var(--dw-bg) 100%);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
    overscroll-behavior: contain;
}

[dir="rtl"] .dw__panel {
    transform: translateX(-100%);
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.35);
}

.dw--open .dw__panel {
    transform: translateX(0);
}

/* ---------- head ---------- */

.dw__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    padding-top: max(16px, env(safe-area-inset-top));
    border-bottom: 1px solid var(--dw-line);
}

.dw__logo img {
    display: block;
    width: 126px;
    height: auto;
}

.dw__head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dw__close {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 19px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.dw__close:hover,
.dw__close:focus-visible {
    background: rgba(222, 168, 228, 0.22);
    outline: none;
}

.dw__close:active {
    transform: scale(0.94);
}

/* ---------- body ---------- */

.dw__body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 18px;
    -webkit-overflow-scrolling: touch;
}

.dw__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dw__link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 54px;
    padding: 8px 12px;
    border-radius: 14px;
    color: #fff !important;
    font-size: 16.5px;
    font-weight: 600;
    text-decoration: none;
    list-style: none;
    cursor: pointer;
    transition: background 0.2s ease;
    opacity: 0;
    transform: translateY(8px);
}

.dw__link::-webkit-details-marker {
    display: none;
}

.dw--open .dw__link {
    opacity: 1;
    transform: none;
    transition: background 0.2s ease, opacity 0.35s ease, transform 0.35s ease;
}

.dw--open .dw__nav > :nth-child(1) .dw__link, .dw--open .dw__nav > .dw__link:nth-child(1) { transition-delay: 0.06s; }
.dw--open .dw__nav > :nth-child(2) .dw__link, .dw--open .dw__nav > .dw__link:nth-child(2) { transition-delay: 0.10s; }
.dw--open .dw__nav > :nth-child(3) .dw__link, .dw--open .dw__nav > .dw__link:nth-child(3) { transition-delay: 0.14s; }
.dw--open .dw__nav > :nth-child(4) .dw__link, .dw--open .dw__nav > .dw__link:nth-child(4) { transition-delay: 0.18s; }
.dw--open .dw__nav > :nth-child(5) .dw__link, .dw--open .dw__nav > .dw__link:nth-child(5) { transition-delay: 0.22s; }
.dw--open .dw__nav > :nth-child(6) .dw__link, .dw--open .dw__nav > .dw__link:nth-child(6) { transition-delay: 0.26s; }

.dw__link:hover,
.dw__link:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    outline: none;
}

.dw__ico {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 15px;
    color: var(--dw-accent);
    background: rgba(222, 168, 228, 0.12);
    transition: background 0.2s ease, color 0.2s ease;
}

.dw__text {
    flex: 1;
}

.dw__chev {
    font-size: 12px;
    color: var(--dw-muted);
    transition: transform 0.25s ease;
}

[dir="rtl"] .dw__chev--side,
[dir="rtl"] .dw__arrow {
    transform: scaleX(-1);
}

.dw__link.is-active {
    background: linear-gradient(90deg, rgba(222, 168, 228, 0.2), rgba(222, 168, 228, 0.06));
    color: var(--dw-accent) !important;
}

[dir="rtl"] .dw__link.is-active {
    background: linear-gradient(270deg, rgba(222, 168, 228, 0.2), rgba(222, 168, 228, 0.06));
}

.dw__link.is-active .dw__ico {
    background: var(--dw-accent);
    color: #3b185a;
}

/* services accordion */

.dw__group[open] > .dw__link .dw__chev {
    transform: rotate(180deg);
}

.dw__sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 8px;
    margin-inline-start: 30px;
    padding-inline-start: 14px;
    border-inline-start: 1px dashed rgba(222, 168, 228, 0.35);
}

.dw__sub-all,
.dw__service {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 10px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.86) !important;
    font-size: 14.5px;
    line-height: 1.35;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.dw__sub-all {
    justify-content: space-between;
    color: var(--dw-accent) !important;
    font-weight: 700;
}

.dw__sub-all i {
    font-size: 12px;
}

.dw__service img {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    object-fit: contain;
}

.dw__sub-all:hover,
.dw__service:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff !important;
}

/* WhatsApp CTA */

.dw__cta {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 12px 18px;
    border-radius: 14px;
    color: #2a1140 !important;
    font-size: 15.5px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(135deg, #f1cdf4 0%, var(--dw-accent) 55%, var(--dw-accent-strong) 100%);
    box-shadow: 0 10px 24px rgba(222, 168, 228, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dw__cta i {
    font-size: 21px;
}

.dw__cta:active {
    transform: scale(0.98);
}

/* phones */

.dw__contacts {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.dw__contact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    color: #fff !important;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--dw-line);
    transition: background 0.2s ease;
}

.dw__contact:hover {
    background: rgba(255, 255, 255, 0.09);
}

.dw__contact-ico {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 19px;
    color: #fff;
    background: #25d366;
}

.dw__contact-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.dw__contact-body small {
    display: block;
    font-size: 12.5px;
    line-height: 1.25;
    color: var(--dw-muted);
    font-weight: 600;
}

.dw__contact-body span {
    font-size: 15.5px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: start;
}

/* ---------- foot ---------- */

.dw__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--dw-line);
    background: rgba(0, 0, 0, 0.12);
}

.dw__social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.dw__social a {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff !important;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.dw__social a:hover {
    background: var(--dw-accent);
    color: #3b185a !important;
    transform: translateY(-2px);
}

.dw__lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 12px;
    border-radius: 999px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.dw__lang img {
    width: 28px;
    height: 19px;
    border-radius: 4px;
    object-fit: cover;
}

@media (min-width: 1200px) {
    .dw {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dw__panel,
    .dw__backdrop,
    .dw__link {
        transition: none !important;
    }
}