.clik-drawer[hidden] { display: none; }
.clik-drawer { position: fixed; inset: 0; z-index: 1300; }
.clik-drawer__overlay {
    position: absolute; inset: 0;
    background: rgba(12, 27, 46, .42);
    backdrop-filter: blur(6px);
}
.clik-drawer__panel {
    position: absolute; top: .75rem; bottom: .75rem; right: .75rem;
    width: min(23rem, calc(100% - 1.5rem));
    display: flex; flex-direction: column;
    background: var(--surface-elevated, #fff);
    color: var(--text, #12263c);
    border: 1px solid var(--line, rgba(12, 28, 46, .12));
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(12, 27, 46, .18);
    overflow: hidden;
    transform: translateX(12px);
    transition: transform .22s ease;
}
html[dir="rtl"] .clik-drawer__panel { right: auto; left: .75rem; transform: translateX(-12px); }
.clik-drawer.is-open .clik-drawer__panel { transform: none; }
.clik-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.1rem .7rem;
}
.clik-drawer__kicker {
    margin: 0; font-size: .68rem; letter-spacing: .14em; font-weight: 700;
    color: var(--primary, #0d7a72);
}
.clik-drawer__head strong {
    display: block; font-size: 1.35rem; letter-spacing: -.03em; line-height: 1.15;
}
.clik-drawer__close {
    width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 1px solid var(--line, rgba(12, 28, 46, .12));
    background: transparent; color: inherit; display: grid; place-items: center;
}
.clik-drawer__body { overflow: auto; padding: .2rem .85rem 1rem; }
.clik-drawer__group { padding: .35rem 0 .2rem; }
.clik-drawer__group summary {
    list-style: none; cursor: pointer; padding: .45rem .35rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted, #5c6b7a);
}
.clik-drawer__group summary::-webkit-details-marker { display: none; }
.clik-drawer__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.clik-drawer__group a {
    display: flex; gap: .75rem; align-items: center;
    padding: .55rem .6rem; border-radius: 14px;
    color: inherit; text-decoration: none;
}
.clik-drawer__group a:hover { background: var(--surface, #f4f1ea); }
.clik-drawer__group i {
    width: 2.15rem; height: 2.15rem; border-radius: 12px; flex: none;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--primary, #0d7a72) 14%, transparent);
    color: var(--primary, #0d7a72);
}
.clik-drawer__group small { display: block; font-weight: 500; color: var(--muted, #5c6b7a); }
.clik-drawer__foot {
    display: flex; flex-wrap: wrap; gap: .5rem; padding: .85rem;
    border-top: 1px solid var(--line, rgba(12, 28, 46, .12));
}
.clik-drawer__foot form { flex: 1; display: flex; margin: 0; }
.clik-drawer__foot a, .clik-drawer__foot button { color: inherit; text-decoration: none; }
.clik-drawer__pill {
    flex: 1; text-align: center; border-radius: 999px; padding: .62rem .8rem;
    border: 1px solid var(--line, rgba(12, 28, 46, .12)); background: transparent; color: inherit;
}
.clik-drawer__pill--solid {
    background: var(--primary, #0d7a72); border-color: transparent; color: #fff;
}
html[data-color-scheme="dark"] .clik-drawer__panel {
    background: var(--surface-elevated, #171b24);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
@media (max-width: 700px) {
    .clik-drawer__panel { top: 0; bottom: 0; right: 0; width: 100%; border-radius: 0; }
    html[dir="rtl"] .clik-drawer__panel { left: 0; }
    .clik-drawer__group summary { display: flex; justify-content: space-between; }
    .clik-drawer__group summary::after { content: "+"; font-size: 1rem; letter-spacing: 0; }
    .clik-drawer__group[open] summary::after { content: "–"; }
}
@media (min-width: 900px) {
    .clik-drawer__group summary { pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
    .clik-drawer__panel { transition: none; transform: none; }
}
body.clik-drawer-open { overflow: hidden; }