/* ===== WRAPPER ===== */
.sbs-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: none; 
}

/* ===== CARD ===== */
.sbs-card {
    background: none; /* Card background transparent */
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.12); /* optional shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ===== GRID ===== */
.layout-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
}

/* ===== SLIDER ===== */
.layout-slider{
    cursor:grab;
    user-select:none;
}

.layout-slider:active{
    cursor:grabbing;
}

.sbs-track{
    display:flex;
    gap:16px;
    transition:transform .6s cubic-bezier(.4,0,.2,1);
    will-change:transform;
}

/* ===== CARD ===== */
.sbs-card{
    position:relative;
    flex:0 0 300px;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    transition:transform .3s ease, box-shadow .3s ease;
}

.sbs-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.2);
}

.sbs-full-link{
    position:absolute;
    top:0; left:0; width:100%; height:100%;
    z-index:1;
    text-decoration:none;
}

/* Remove focus outline / blue hover */
.sbs-full-link:focus{outline:none}

.sbs-thumb{
    aspect-ratio:16/9;
}

.sbs-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.sbs-body{
    padding:14px;
    position:relative;
    z-index:2;
}

.sbs-body h3{
    font-size:16px;
    line-height:1.4;
    margin:0 0 6px;
}

.sbs-body span{
    font-size:13px;
    color:#666;
    margin-right:10px;
}

/* ===== UPLOAD BUTTON ===== */
.sbs-upload{
    position:absolute;
    top:8px;
    right:8px;
    z-index:5;
    border:none;
    background:rgba(255,255,255,0.85);
    padding:6px;
    border-radius:50%;
    cursor:pointer;
    transition:background .3s;
}

.sbs-upload:hover{
    background:#fff;
}

/* ===== ARROWS ===== */
.sbs-prev,
.sbs-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border-radius:50%;
    border:none;
    background:#000;
    color:#fff;
    font-size:22px;
    cursor:pointer;
    z-index:10;
    opacity:.85;
    transition:opacity .3s;
}

.sbs-prev{left:10px}
.sbs-next{right:10px}

.sbs-prev:hover,
.sbs-next:hover{opacity:1}

/* ===== DOTS ===== */
.sbs-dots{
    text-align:center;
    margin-top:12px;
}

.sbs-dots span{
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#ccc;
    margin:0 4px;
    cursor:pointer;
}

.sbs-dots span.active{
    background:#333;
}



/* ===== TEMPLATE ONE ===== */
.template-one .sbs-card {
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    border-radius:14px;
}

/* ===== TEMPLATE TWO ===== */
.template-two .sbs-card {
    background:white;
    box-shadow:0 8px 25px rgba(0,0,0,.15);
    border-radius:25px;
}

/* ===== TEMPLATE THREE ===== */
.template-three .sbs-card {
    background:#eef6ff;
    box-shadow:0 12px 35px rgba(0,0,0,.2);
    border-radius:0px;
}

/* ===== TEMPLATE FOUR ===== */
.template-four .sbs-card {
    background:#fff8e1;
    box-shadow:0 6px 20px rgba(0,0,0,.1);
    border-radius:16px;
}

/* ===== REMOVE BLUE LINK EFFECT FROM CARD ===== */
.sbs-card a,
.sbs-card a:visited,
.sbs-card a:hover,
.sbs-card a:active,
.sbs-card a:focus {
    color: inherit !important;      /* blue color hatao */
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Mobile tap highlight (blue flash) remove */
.sbs-card a {
    -webkit-tap-highlight-color: transparent;
}

/* Hover par bhi koi color change na ho */
.sbs-card:hover a {
    color: inherit !important;
    
}

/* ===== REMOVE BLUE EFFECT FROM SLIDER ARROWS ===== */
.sbs-prev,
.sbs-next,
.sbs-prev:hover,
.sbs-next:hover,
.sbs-prev:active,
.sbs-next:active,
.sbs-prev:focus,
.sbs-next:focus {
    
    color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Button default styles reset */
.sbs-prev,
.sbs-next {
    border: none !important;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    
}

/* Mobile blue tap flash remove */
.sbs-prev,
.sbs-next {
    -webkit-user-select: none;
    user-select: none;
    
}