/* ===== Widget Drawers ===== */

/* CSS custom properties used by drawer styles */
:root{
    --blue:#0047FF;
    --blue-h:#3c73ff;
    --ink:#001240;
    --gray:#475476;
    --muted:#858DA3;
    --bg:#F5F6F7;
    --line:#EDEEF3;
    --field:#F0F4FF;
}

/* Trigger cards — make them look clickable */
[data-widget]{cursor:pointer}

/* Badges */
.badge{font-size:12px;font-weight:500;line-height:1;padding:5px 8px;border-radius:8px}
.badge.new{background:#FFF3A3;color:#6B5500}
.badge.free{background:#1FCC6E;color:#fff}
.badge.ch{background:#E3ECFF;color:#0047FF}

/* Backdrop */
.dw-backdrop{position:fixed;inset:0;z-index:200;background:rgba(0,18,64,.5);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.3s}
.dw-backdrop.is-open{opacity:1;visibility:visible}

/* Drawer panel */
.dw{position:fixed;top:0;right:0;height:100%;width:min(820px,100%);background:#fff;z-index:201;
    transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.3,1);display:flex;flex-direction:column;overflow-y:auto}
.dw.is-open{transform:none}

/* Close button */
.dw-close{position:absolute;top:18px;right:18px;z-index:5;width:44px;height:44px;border-radius:50%;border:none;background:#fff;box-shadow:0 4px 14px rgba(0,18,64,.18);cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center}
.dw-close:hover{background:var(--bg)}

/* Gallery area */
.dw-gallery{background:var(--bg);padding:26px 26px 18px;position:relative}
.dw-stage{height:390px;border-radius:18px;overflow:hidden;position:relative;box-shadow:0 16px 32px -10px rgba(0,18,64,.22)}
.dw-stage .slick-list,.dw-stage .slick-track{height:100%}
.dw-slide img{width:100%;height:390px;object-fit:cover;display:block}

/* Arrows */
.dw-arrow{position:absolute;top:calc(26px + 195px);z-index:4;width:46px;height:46px;border-radius:50%;border:none;background:#fff;box-shadow:0 5px 16px rgba(0,18,64,.22);cursor:pointer;font-size:20px;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.dw-arrow:hover{background:var(--blue);color:#fff}
.dw-arrow.prev{left:26px;transform:translate(-50%,-50%)}
.dw-arrow.next{right:26px;transform:translate(50%,-50%)}

/* Dots */
.dw-dots{margin-top:12px;display:flex;gap:7px;justify-content:center}
.dw-dot{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:#C8CBD4;cursor:pointer}
.dw-dot.dw-dot-active{background:#0047FF;width:22px;border-radius:5px}

/* Caption */
.dw-cap{text-align:center;font-size:13px;color:var(--gray);margin-top:14px;min-height:18px}

/* Info block */
.dw-info{padding:28px 30px 36px}
.dw-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.dw-info h2{font-size:28px;font-weight:700;letter-spacing:-.02em; color: var(--ink);}
.dw-tagline{margin-top:10px;font-size:16px;color:var(--gray);line-height:1.45}

/* Stats */
.dw-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:20px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dw-stat b{display:block;font-size:20px;font-weight:700;color:var(--blue)}
.dw-stat span{font-size:12px;color:var(--muted);line-height:1.25}

/* Features list */
.dw-feat{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-bottom:26px; color: var(--ink);}
.dw-feat li{display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.4}
.dw-feat .ic{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:#0047FF}
.dw-feat .ic svg{width:22px;height:22px;display:block}

/* ── Isolation: reset inherited global styles inside drawer ── */
.dw *,.dw *::before,.dw *::after{box-sizing:border-box}

/* CTA button — overrides common.css .btn via higher specificity */
.dw .btn{display:flex;align-items:center;justify-content:center;float:none;position:static;height:60px;padding:0;border-radius:16px;background:var(--blue);color:#fff;font-size:18px;font-weight:500;width:100%;text-decoration:none;cursor:pointer}
.dw .btn:hover{background:var(--blue-h)}
.dw .btn .plus{margin-right:12px;font-size:22px;line-height:0}

/* Footer note */
.dw-foot{margin-top:12px;text-align:center;font-size:13px;color:var(--muted)}

/* Responsive */
@media(max-width:560px){
    .dw-gallery{padding:18px 16px 14px}
    .dw-stage{height:190px}
    .dw-slide img{height:190px}
    .dw-arrow{display:none}
    .dw-info{padding:24px 20px 32px}
    .dw-feat{grid-template-columns:1fr;gap:13px}
    .dw-info h2{font-size:24px}
    .dw-stats{gap:10px}
    .dw-stat{text-align:center}
    .dw-stat b{font-size:18px}
}