/* ===========================
   BASE
=========================== */
.qbse-studio-shell{
    background:#043927;
    color:#ffffff;
    font-family:Inter,system-ui;
    padding-bottom:80px;
}

.qbse-shell{
    max-width:1200px;
    margin:auto;
    overflow-x:hidden;
}

/* ===========================
   HERO SLIDER
=========================== */
.qbse-hero{
    position:relative;
    width:100%;
    overflow:hidden;
}

.qbse-slider{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
}
.qbse-slider::-webkit-scrollbar{display:none}

.qbse-slider img{
    width:100%;
    min-width:100%;
    height:420px;
    object-fit:cover;
    flex-shrink:0;
    scroll-snap-align:center;
}

/* Swipe hint */
.qbse-hero:after{
    content:"⇆ Swipe";
    position:absolute;
    bottom:15px;
    right:15px;
    background:rgba(0,0,0,.65);
    color:#ff8c2a;
    font-size:13px;
    padding:6px 14px;
    border-radius:20px;
    z-index:10;
    animation:pulse 1.8s infinite;
}

/* ===========================
   VERIFIED BADGE
=========================== */
.qbse-verified{
    position:absolute;
    top:16px;
    right:16px;
    background:#ff8c2a;
    color:#062e22;
    padding:8px 16px;
    border-radius:20px;
    font-weight:700;
    z-index:10;
    box-shadow:0 0 0 4px rgba(255,140,42,.15),0 12px 30px rgba(255,140,42,.4);
}

/* ===========================
   HEADER
=========================== */
.qbse-header{
    text-align:center;
    padding:40px 20px 20px;
}

.qbse-header h1{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    font-size:36px;
    margin:0;
    color:#ffffff;
}

.qbse-sub{
    color:#eaf6f2;
    margin:15px auto 0;
    max-width:720px;
    text-align:left;
    line-height:1.6;
}

/* ===========================
   MAP BUTTON
=========================== */
.qbse-map-btn{
    display:inline-block;
    margin-top:12px;
    padding:8px 16px;
    background:linear-gradient(135deg,#ff8c2a,#ffc36a);
    color:#062e22 !important;
    font-weight:700;
    border-radius:20px;
    text-decoration:none;
    box-shadow:0 6px 18px rgba(255,140,42,.5);
}

/* ===========================
   SECTIONS
=========================== */
.qbse-section{
    padding:40px 20px;
}

.qbse-section h2{
    color:#ff8c2a;
    font-size:28px;
    border-bottom:2px solid #ff8c2a;
    display:inline-block;
    margin-bottom:20px;
}

/* ===========================
   DANCE STYLES
=========================== */
.qbse-style-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:20px;
}

.qbse-style span{
    display:block;
    text-align:center;
    margin-top:10px;
    font-weight:700;
    color:#ffffff;
}

/* ===========================
   BATCH GRID
=========================== */
.qbse-batch-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:15px;
}

.qbse-batch-card{
    background:#0e4a37;
    padding:14px;
    border-radius:12px;
    color:#ffffff;
}

.qbse-batch-card strong{
    color:#ff8c2a;
    font-size:18px;
}

.qbse-batch-card div{
    color:#e6f5f0;
}

.qbse-fee{
    color:#ffd97a;
    font-weight:700;
}

/* ===========================
   INSTRUCTORS
=========================== */
.qbse-instructors{
    display:flex;
    gap:15px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    position:relative;
}
.qbse-instructors::-webkit-scrollbar{display:none}

.qbse-instructor{
    min-width:220px;
    background:#0b3b2c;
    padding:12px;
    border-radius:12px;
    text-align:center;
    scroll-snap-align:start;
}

.qbse-instructor img{
    width:100%;
    height:200px;
    object-fit:cover;
    border-radius:10px;
}

.qbse-instructor strong{
    display:block;
    margin-top:10px;
    color:#ff8c2a;
}

/* ===========================
   GALLERY (3 images only)
=========================== */
.qbse-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.qbse-gallery img{
    width:100%;
    border-radius:10px;
}

/* ===========================
   MODAL GALLERY
=========================== */
#qbseModal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.95);
    z-index:99999;
    padding:20px;
}

.qbse-modal-inner{
    display:flex;
    gap:16px;
    overflow-x:auto;
    padding-bottom:20px;
}

.qbse-modal-inner img{
    height:320px;
    width:auto;
    flex-shrink:0;
    border-radius:12px;
}

/* ===========================
   RECOMMENDED
=========================== */
.qbse-reco{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.qbse-reco-card{
    background:#0b3b2c;
    padding:18px;
    border-radius:12px;
    color:#ff8c2a;
    font-weight:700;
    text-align:center;
}

/* ===========================
   LAZY LOAD
=========================== */
.qbse-lazy{opacity:0;transition:.4s ease}
.qbse-lazy.loaded{opacity:1}

/* ===========================
   MOBILE
=========================== */
@media(max-width:768px){
    .qbse-slider img{height:240px}
    .qbse-header h1{font-size:26px}
}

/* ===========================
   SWIPE PULSE
=========================== */
@keyframes pulse{
    0%{opacity:.5}
    50%{opacity:1}
    100%{opacity:.5}
}