@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}

:root{
    --bg:#060610;
    --s1:rgba(12,12,24,0.99);
    --s2:rgba(18,18,36,0.97);
    --s3:rgba(26,26,48,0.94);
    --b1:rgba(255,255,255,0.05);
    --b2:rgba(255,255,255,0.09);
    --b3:rgba(255,255,255,0.14);
    --t1:#f4f4ff;
    --t2:#9090b8;
    --t3:#50507a;
    --t4:#2a2a48;
    --p:#8b5cf6;
    --p2:#7c3aed;
    --p3:#6d28d9;
    --pl:#c4b5fd;
    --pg:rgba(139,92,246,0.4);
    --pg2:rgba(139,92,246,0.12);
    --ok:#34d399;
    --warn:#fbbf24;
    --err:#f87171;
    --hh:64px;
    --pw:400px;
    --r:18px;
    --r2:12px;
    --r3:8px;
    --drawer-peek:88px;
}

body{
    width:100vw;height:100vh;overflow:hidden;
    background:var(--bg);
    font-family:'Inter',sans-serif;
    color:var(--t1);
    touch-action:none;
    -webkit-font-smoothing:antialiased;
}

.material-icons-round{
    font-family:'Material Icons Round';
    font-weight:normal;font-style:normal;
    line-height:1;letter-spacing:normal;
    text-transform:none;display:inline-block;
    white-space:nowrap;word-wrap:normal;direction:ltr;
    -webkit-font-feature-settings:'liga';
    font-feature-settings:'liga';
    -webkit-font-smoothing:antialiased;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DESKTOP GRID
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page{
    display:grid;
    grid-template-rows:var(--hh) 1fr;
    grid-template-columns:1fr var(--pw);
    grid-template-areas:"hdr hdr" "map pnl";
    width:100vw;height:100vh;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HEADER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hdr{
    grid-area:hdr;
    display:flex;align-items:center;
    padding:0 28px;gap:24px;
    background:var(--s1);
    border-bottom:1px solid var(--b1);
    z-index:30;position:relative;
}

.hdr::after{
    content:'';
    position:absolute;bottom:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(139,92,246,.6) 25%,rgba(196,181,253,.9) 50%,rgba(139,92,246,.6) 75%,transparent);
}

.back-btn{
    width:40px;height:40px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--b1);border:1px solid var(--b2);
    border-radius:50%;color:var(--t2);
    text-decoration:none;
    transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.back-btn:hover{
    background:var(--pg2);border-color:rgba(139,92,246,.5);
    color:var(--pl);transform:scale(1.1);
    box-shadow:0 0 20px var(--pg);
}
.back-btn .material-icons-round{font-size:20px}

.hdr-center{
    flex:1;min-width:0;
    display:flex;flex-direction:column;
    align-items:center;gap:6px;
}

.hdr-venue{
    font-family:'Outfit',sans-serif;
    font-size:clamp(.95rem,2vw,1.1rem);
    font-weight:900;letter-spacing:-.02em;
    background:linear-gradient(135deg,#fff 30%,var(--pl) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:100%;
}

.legend{
    display:flex;align-items:center;flex-wrap:nowrap;
    gap:5px;overflow-x:auto;scrollbar-width:none;
}
.legend::-webkit-scrollbar{display:none}

.leg{
    display:flex;align-items:center;gap:6px;
    background:var(--b1);border:1px solid var(--b1);
    border-radius:100px;padding:5px 11px;
    white-space:nowrap;flex-shrink:0;
    transition:all .2s;cursor:default;
}
.leg:hover{background:var(--b2)}
.leg-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.leg-dot.sel{
    background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9);
    outline:2px solid rgba(0,0,0,.6);outline-offset:1px;
}
.leg-txt{font-size:.7rem;font-weight:600;color:var(--t2)}

.hdr-spacer{width:40px;flex-shrink:0}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MAP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.map-area{
    grid-area:map;
    position:relative;overflow:hidden;
    background:
        radial-gradient(ellipse 60% 60% at 15% 50%,rgba(139,92,246,.06) 0%,transparent 100%),
        radial-gradient(ellipse 40% 40% at 85% 20%,rgba(196,181,253,.04) 0%,transparent 100%),
        linear-gradient(160deg,#0e0e1c 0%,#060610 100%);
}

.map-grid-bg{
    position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:
        linear-gradient(rgba(139,92,246,.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(139,92,246,.03) 1px,transparent 1px);
    background-size:48px 48px;
}

#konvaFrontend{position:relative;z-index:1}
.map-area canvas{display:block;touch-action:none}

.zoom-dock{
    position:absolute;right:18px;bottom:28px;
    display:flex;flex-direction:column;gap:3px;
    z-index:10;
    background:rgba(8,8,20,.88);
    backdrop-filter:blur(20px);
    border:1px solid var(--b2);
    border-radius:var(--r2);
    padding:4px;
    box-shadow:0 8px 32px rgba(0,0,0,.5);
}

.zoom-btn{
    width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;
    background:transparent;border:none;
    border-radius:var(--r3);color:var(--t3);
    cursor:pointer;
    transition:all .2s cubic-bezier(.34,1.56,.64,1);
}
.zoom-btn:hover{background:var(--pg2);color:var(--pl);transform:scale(1.12)}
.zoom-btn:active{transform:scale(.9)}
.zoom-btn .material-icons-round{font-size:20px}
.zoom-sep{height:1px;background:var(--b1);margin:0 6px}

.map-hint{
    position:absolute;bottom:32px;left:50%;
    transform:translateX(-50%) translateY(16px);
    background:rgba(8,8,20,.92);
    backdrop-filter:blur(20px);
    border:1px solid rgba(139,92,246,.4);
    border-radius:100px;
    padding:9px 20px;
    display:flex;align-items:center;gap:8px;
    font-size:.76rem;font-weight:500;color:var(--pl);
    opacity:0;pointer-events:none;
    transition:all .35s cubic-bezier(.34,1.56,.64,1);
    white-space:nowrap;z-index:10;
    box-shadow:0 4px 24px var(--pg);
}
.map-hint.show{opacity:1;transform:translateX(-50%) translateY(0)}
.map-hint .material-icons-round{font-size:16px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DESKTOP PANEL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pnl{
    grid-area:pnl;
    display:flex;flex-direction:column;
    background:var(--s1);
    border-left:1px solid var(--b1);
    overflow:hidden;position:relative;
}

.pnl-aura{
    position:absolute;top:-80px;right:-80px;
    width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle,rgba(139,92,246,.1) 0%,transparent 65%);
    pointer-events:none;z-index:0;
}

.pnl-stripe{
    height:3px;flex-shrink:0;
    background:linear-gradient(90deg,var(--p3),var(--p),var(--pl),var(--p),var(--p3));
    background-size:200% 100%;
    animation:stripe 4s linear infinite;
}
@keyframes stripe{
    0%{background-position:0% 0%}
    100%{background-position:200% 0%}
}

.pnl-hdr{
    padding:20px 22px 16px;
    border-bottom:1px solid var(--b1);
    flex-shrink:0;position:relative;z-index:1;
}

.pnl-hdr-row{
    display:flex;align-items:center;
    justify-content:space-between;margin-bottom:10px;
}

.pnl-title{
    display:flex;align-items:center;gap:11px;
    font-family:'Outfit',sans-serif;
    font-size:1.05rem;font-weight:900;letter-spacing:-.02em;
}

.pnl-ico{
    width:38px;height:38px;border-radius:11px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,rgba(139,92,246,.3),rgba(196,181,253,.12));
    border:1px solid rgba(139,92,246,.4);
    box-shadow:0 0 24px rgba(139,92,246,.2);
}
.pnl-ico .material-icons-round{font-size:20px;color:var(--pl)}

.cnt-badge{
    display:flex;align-items:center;justify-content:center;
    min-width:30px;height:30px;
    background:linear-gradient(135deg,var(--p2),var(--pl));
    border-radius:100px;padding:0 9px;
    font-size:.78rem;font-weight:800;color:#fff;
    box-shadow:0 2px 14px var(--pg);
    transition:all .2s;
}
.cnt-badge.pop{animation:badge-pop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes badge-pop{
    0%{transform:scale(1)}
    40%{transform:scale(1.45)}
    100%{transform:scale(1)}
}

.pnl-sub{
    font-size:.72rem;font-weight:500;color:var(--t3);
    display:flex;align-items:center;gap:8px;
}
.pnl-sub-line{
    flex:1;height:1px;
    background:linear-gradient(90deg,rgba(139,92,246,.3),transparent);
}

.pnl-body{
    flex:1;overflow-y:auto;overflow-x:hidden;
    padding:16px 18px;
    position:relative;z-index:1;
    scrollbar-width:thin;
    scrollbar-color:rgba(139,92,246,.2) transparent;
}
.pnl-body::-webkit-scrollbar{width:3px}
.pnl-body::-webkit-scrollbar-thumb{background:rgba(139,92,246,.25);border-radius:4px}

/* Empty */
.empty{
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:16px;height:100%;padding:40px 20px;text-align:center;
}
.empty-orb{
    position:relative;width:96px;height:96px;
    display:flex;align-items:center;justify-content:center;
}
.empty-orb::before,.empty-orb::after{
    content:'';position:absolute;border-radius:50%;
    border:1px solid rgba(139,92,246,.12);
    animation:orb 3.5s ease-in-out infinite;
}
.empty-orb::before{inset:-14px}
.empty-orb::after{inset:-28px;animation-delay:.6s;border-color:rgba(139,92,246,.06)}
@keyframes orb{
    0%,100%{transform:scale(1);opacity:.5}
    50%{transform:scale(1.06);opacity:1}
}
.empty-core{
    width:96px;height:96px;border-radius:26px;
    background:linear-gradient(135deg,rgba(139,92,246,.1),rgba(196,181,253,.04));
    border:1px solid rgba(139,92,246,.2);
    display:flex;align-items:center;justify-content:center;
    position:relative;z-index:1;
    box-shadow:0 8px 32px rgba(139,92,246,.12);
}
.empty-core .material-icons-round{
    font-size:2.4rem;
    background:linear-gradient(135deg,var(--t4),var(--pl));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
}
.empty-ttl{
    font-family:'Outfit',sans-serif;
    font-size:.98rem;font-weight:800;
    color:rgba(244,244,255,.28);
}
.empty-txt{font-size:.75rem;line-height:1.8;color:var(--t4);max-width:200px}

/* Seat cards */
.seat-list{display:flex;flex-direction:column;gap:9px}

.scard{
    display:flex;align-items:center;gap:12px;
    background:var(--b1);border:1px solid var(--b1);
    border-radius:var(--r2);
    padding:13px 14px 13px 10px;
    position:relative;overflow:hidden;
    transition:all .22s;
    animation:card-in .24s cubic-bezier(.34,1.56,.64,1);
}
.scard::before{
    content:'';
    position:absolute;left:0;top:0;bottom:0;width:4px;
    background:var(--cc,var(--p));
    border-radius:0 4px 4px 0;
    box-shadow:2px 0 12px var(--cc,var(--p));
}
@keyframes card-in{
    from{opacity:0;transform:translateX(14px) scale(.97)}
    to{opacity:1;transform:none}
}
.scard:hover{background:var(--b2);transform:translateX(-3px)}

.scard-clr{
    width:11px;height:11px;border-radius:50%;
    flex-shrink:0;margin-left:2px;
    box-shadow:0 0 10px currentColor;
}
.scard-info{flex:1;min-width:0}
.scard-lbl{
    font-size:.88rem;font-weight:700;letter-spacing:-.01em;
    color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.scard-cat{
    display:flex;align-items:center;gap:5px;
    font-size:.7rem;font-weight:500;color:var(--t3);margin-top:3px;
}
.scard-cat .material-icons-round{font-size:14px}
.scard-price{
    font-family:'Outfit',sans-serif;
    font-size:.94rem;font-weight:900;
    letter-spacing:-.02em;color:var(--pl);flex-shrink:0;
}
.scard-del{
    background:none;border:none;cursor:pointer;
    color:var(--t4);border-radius:6px;
    display:flex;align-items:center;padding:5px;
    transition:all .18s;flex-shrink:0;margin-left:2px;
}
.scard-del:hover{color:var(--err);background:rgba(248,113,113,.1);transform:scale(1.15) rotate(90deg)}
.scard-del .material-icons-round{font-size:16px}

/* Panel footer */
.pnl-ftr{
    padding:16px 20px 22px;
    border-top:1px solid var(--b1);
    flex-shrink:0;
    display:flex;flex-direction:column;gap:14px;
    position:relative;z-index:1;
    background:var(--s1);
}
.pnl-ftr::before{
    content:'';position:absolute;top:0;left:20px;right:20px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(139,92,246,.4),rgba(196,181,253,.5),rgba(139,92,246,.4),transparent);
}

.total-row{
    display:flex;align-items:flex-end;justify-content:space-between;padding:0 2px;
}
.total-l{display:flex;flex-direction:column;gap:3px}
.total-cap{font-size:.68rem;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.08em}
.total-sub{font-size:.72rem;color:var(--t4)}
.total-val{
    font-family:'Outfit',sans-serif;
    font-size:1.5rem;font-weight:900;letter-spacing:-.03em;line-height:1;
    background:linear-gradient(135deg,#fff 20%,var(--pl) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.buy-btn{
    width:100%;height:52px;
    display:flex;align-items:center;justify-content:center;gap:10px;
    background:linear-gradient(135deg,var(--p3),var(--p),var(--pl));
    background-size:200% 200%;background-position:left center;
    border:none;color:#fff;border-radius:var(--r2);
    font-family:'Outfit',sans-serif;font-size:.92rem;font-weight:800;
    cursor:pointer;letter-spacing:.01em;
    position:relative;overflow:hidden;
    transition:all .3s;
    box-shadow:0 4px 28px var(--pg),0 1px 0 rgba(255,255,255,.12) inset;
}
.buy-btn::before{
    content:'';position:absolute;
    top:-50%;left:-60%;width:40%;height:200%;
    background:linear-gradient(105deg,transparent,rgba(255,255,255,.18),transparent);
    transform:skewX(-20deg);transition:left .6s;
}
.buy-btn:hover:not(:disabled)::before{left:120%}
.buy-btn:hover:not(:disabled){
    background-position:right center;
    transform:translateY(-3px);
    box-shadow:0 12px 40px rgba(139,92,246,.65);
}
.buy-btn:active:not(:disabled){transform:translateY(-1px)}
.buy-btn:disabled{
    background:rgba(255,255,255,.04);color:rgba(255,255,255,.18);
    box-shadow:none;cursor:not-allowed;
}
.buy-btn .material-icons-round,.buy-btn-txt{position:relative;z-index:1}
.buy-btn .material-icons-round{font-size:20px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOAST
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#toast{
    position:fixed;top:20px;left:50%;
    transform:translateX(-50%) translateY(-100px);
    z-index:9999;
    display:flex;align-items:center;gap:12px;
    background:rgba(6,6,16,.97);
    backdrop-filter:blur(40px);
    border:1px solid var(--b3);border-radius:var(--r);
    padding:12px 22px 12px 14px;
    font-size:.83rem;font-weight:500;color:var(--t1);
    box-shadow:0 24px 80px rgba(0,0,0,.8);
    transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s;
    opacity:0;pointer-events:none;white-space:nowrap;
}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast-ic{
    width:30px;height:30px;border-radius:9px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
#toast.info    .toast-ic{background:rgba(139,92,246,.18)}
#toast.success .toast-ic{background:rgba(52,211,153,.15)}
#toast.warning .toast-ic{background:rgba(251,191,36,.15)}
#toast.error   .toast-ic{background:rgba(248,113,113,.15)}
#toast.info    .toast-ic .material-icons-round{color:var(--pl)}
#toast.success .toast-ic .material-icons-round{color:var(--ok)}
#toast.warning .toast-ic .material-icons-round{color:var(--warn)}
#toast.error   .toast-ic .material-icons-round{color:var(--err)}
.toast-ic .material-icons-round{font-size:18px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE — DRAWER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:768px){
    :root{--hh:54px}

    .page{
        display:flex;flex-direction:column;
        width:100vw;height:100vh;
        position:relative;overflow:hidden;
    }

    /* Header mobilde sadece back + venue adı */
    .hdr{
        flex:0 0 var(--hh);
        padding:0 16px;gap:12px;
    }
    .hdr-center{flex-direction:row;justify-content:flex-start;gap:0}
    .hdr-venue{font-size:.95rem;text-align:left}
    .legend{display:none}
    .hdr-spacer{display:none}

    /* Map tam ekran */
    .map-area{
        flex:1;min-height:0;
        /* drawer peek kadar padding-bottom bırak */
        padding-bottom:var(--drawer-peek);
    }

    .zoom-dock{
        right:14px;
        bottom:calc(var(--drawer-peek) + 14px);
    }

    .map-hint{
        bottom:calc(var(--drawer-peek) + 16px);
    }

    /* Panel → bottom drawer */
    .pnl{
        position:fixed;
        left:0;right:0;bottom:0;
        height:90vh;
        border-left:none;
        border-top:1px solid var(--b2);
        border-radius:24px 24px 0 0;
        z-index:100;
        transform:translateY(calc(100% - var(--drawer-peek)));
        transition:transform .4s cubic-bezier(.32,.72,0,1);
        background:var(--s1);
        box-shadow:0 -16px 60px rgba(0,0,0,.7),0 -1px 0 rgba(139,92,246,.3);
        will-change:transform;
    }

    .pnl.open{
        transform:translateY(0);
    }

    /* Drawer handle */
    .drawer-handle{
        display:flex;flex-direction:column;
        align-items:center;
        padding:10px 0 2px;
        cursor:grab;flex-shrink:0;
        touch-action:none;
        -webkit-user-select:none;user-select:none;
    }
    .drawer-handle:active{cursor:grabbing}
    .drawer-pill{
        width:40px;height:4px;border-radius:100px;
        background:rgba(255,255,255,.15);
        transition:background .2s;
    }
    .pnl:hover .drawer-pill,
    .pnl.open .drawer-pill{background:rgba(139,92,246,.5)}

    /* Drawer peek bar — bilet sayısı + fiyat */
    .drawer-peek-bar{
        display:flex;align-items:center;
        padding:8px 20px 12px;gap:10px;
        flex-shrink:0;
    }

    .dpb-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}

    .dpb-icon{
        width:36px;height:36px;border-radius:10px;flex-shrink:0;
        display:flex;align-items:center;justify-content:center;
        background:linear-gradient(135deg,rgba(139,92,246,.3),rgba(196,181,253,.12));
        border:1px solid rgba(139,92,246,.35);
    }
    .dpb-icon .material-icons-round{font-size:18px;color:var(--pl)}

    .dpb-info{display:flex;flex-direction:column;gap:2px;min-width:0}
    .dpb-title{
        font-family:'Outfit',sans-serif;
        font-size:.88rem;font-weight:800;letter-spacing:-.01em;
        color:var(--t1);
    }
    .dpb-sub{font-size:.68rem;color:var(--t3)}

    .dpb-badge{
        display:flex;align-items:center;justify-content:center;
        min-width:26px;height:26px;
        background:linear-gradient(135deg,var(--p2),var(--pl));
        border-radius:100px;padding:0 8px;
        font-size:.74rem;font-weight:800;color:#fff;
        box-shadow:0 2px 12px var(--pg);
        transition:all .2s;flex-shrink:0;
    }
    .dpb-badge.pop{animation:badge-pop .35s cubic-bezier(.34,1.56,.64,1)}

    .dpb-price{
        font-family:'Outfit',sans-serif;
        font-size:1.1rem;font-weight:900;letter-spacing:-.02em;
        background:linear-gradient(135deg,#fff,var(--pl));
        -webkit-background-clip:text;-webkit-text-fill-color:transparent;
        background-clip:text;flex-shrink:0;
    }

    /* Hide desktop-only elements in drawer */
    .pnl-aura{display:none}
    .pnl-stripe{display:none}
    .pnl-hdr{display:none}

    .pnl-body{
        flex:1;padding:4px 18px 12px;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    /* Mobile footer inside drawer */
    .pnl-ftr{
        padding:12px 18px 32px;
        gap:10px;
    }
    .pnl-ftr::before{left:16px;right:16px}

    .total-val{font-size:1.3rem}
    .buy-btn{height:50px;font-size:.9rem}

    /* Legend moved to map area on mobile as a scrollable chip row */
    .mob-legend{
        position:absolute;top:10px;left:50%;
        transform:translateX(-50%);
        display:flex;align-items:center;gap:5px;
        overflow-x:auto;scrollbar-width:none;
        padding:0 16px;
        z-index:5;
        max-width:100%;
        -webkit-overflow-scrolling:touch;
    }
    .mob-legend::-webkit-scrollbar{display:none}
    .mob-leg{
        display:flex;align-items:center;gap:5px;
        background:rgba(8,8,20,.85);
        backdrop-filter:blur(16px);
        border:1px solid var(--b2);
        border-radius:100px;padding:5px 11px;
        white-space:nowrap;flex-shrink:0;
    }
    .mob-leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
    .mob-leg-dot.sel{
        background:#fff;box-shadow:0 0 6px rgba(255,255,255,.9);
        outline:2px solid rgba(0,0,0,.5);outline-offset:1px;
    }
    .mob-leg-txt{font-size:.68rem;font-weight:600;color:var(--t2)}

    /* Overlay when drawer open */
    .drawer-overlay{
        display:none;
        position:fixed;inset:0;
        background:rgba(0,0,0,.5);
        z-index:99;
        backdrop-filter:blur(2px);
        opacity:0;
        transition:opacity .3s;
    }
    .drawer-overlay.show{display:block;opacity:1}
}

@media(max-width:480px){
    .hdr-venue{font-size:.85rem}
    .buy-btn{height:48px}
    .total-val{font-size:1.2rem}
    .dpb-price{font-size:1rem}
}

@media(min-width:769px){
    .drawer-handle,
    .drawer-peek-bar,
    .drawer-overlay,
    .mob-legend{display:none}
}

@media(min-width:769px) and (max-width:1100px){
    :root{--pw:330px}
}