/* ============================================================
   Swatnik Solution Photo Gallery  —  Brand: #8EC556
   ============================================================ */

:root {
    --sg-green:      #8EC556;
    --sg-green-dark: #72a63e;
    --sg-green-glow: rgba(142,197,86,.22);
    --sg-gap:        16px;
    --sg-radius:     10px;
}

/* ============================================================
   PASSWORD GATE
   ============================================================ */
.swatnik-gate {
    display:flex; align-items:center; justify-content:center;
    min-height:80vh; padding:24px;
    background:linear-gradient(145deg,#f4faea 0%,#e8f5d6 100%);
}
.swatnik-gate-box {
    background:#fff; border-radius:20px;
    box-shadow:0 12px 48px var(--sg-green-glow), 0 2px 8px rgba(0,0,0,.06);
    padding:52px 44px 44px; max-width:460px; width:100%; text-align:center;
    border-top:5px solid var(--sg-green);
}
.swatnik-gate-icon  { font-size:56px; margin-bottom:16px; line-height:1; }
.swatnik-gate-box h2 { font-size:1.65rem; margin:0 0 10px; color:#1e2d0e; font-weight:700; }
.swatnik-gate-box > p { color:#6b7280; margin-bottom:28px; font-size:.97rem; line-height:1.6; }
.swatnik-gate-error {
    background:#fff3f3; color:#b91c1c; border:1px solid #fecaca;
    border-radius:8px; padding:10px 14px; margin-bottom:18px; font-size:.88rem;
}
.swatnik-gate-input {
    width:100%; padding:14px 16px; border:2px solid #e5e7eb; border-radius:12px;
    font-size:1rem; box-sizing:border-box; margin-bottom:14px; outline:none;
    transition:border-color .2s,box-shadow .2s; color:#111; background:#fafafa;
    pointer-events:auto !important;
}
.swatnik-gate-input:focus {
    border-color:var(--sg-green); background:#fff;
    box-shadow:0 0 0 4px var(--sg-green-glow);
}
.swatnik-gate-btn {
    width:100%; padding:14px; background:var(--sg-green);
    color:#fff; border:none; border-radius:12px;
    font-size:1rem; font-weight:700; cursor:pointer; letter-spacing:.3px;
    transition:background .2s,transform .1s,box-shadow .2s;
    box-shadow:0 4px 14px var(--sg-green-glow);
    pointer-events:auto !important;
}
.swatnik-gate-btn:hover { background:var(--sg-green-dark); transform:translateY(-1px); box-shadow:0 6px 20px var(--sg-green-glow); }
.swatnik-gate-btn:active { transform:translateY(0); }

/* ============================================================
   WRAPPER
   ============================================================ */
.swatnik-wrap {
    max-width:1400px; margin:0 auto; padding:28px 20px 60px;
    -webkit-user-select:none; user-select:none;
}

/* ---- Client Note ---- */
.swatnik-note {
    background:#f4faea; border-left:5px solid var(--sg-green);
    border-radius:0 12px 12px 0; padding:16px 20px;
    color:#3a5c1a; font-size:.96rem; line-height:1.65;
    margin-bottom:20px;
}

/* ============================================================
   STATUS BAR  — text left, button far right
   ============================================================ */
.swatnik-bar {
    display:flex; align-items:center; flex-wrap:wrap;
    gap:10px; padding:14px 20px; margin-bottom:24px;
    background:#fff; border-radius:12px;
    border:1px solid #dff0c8;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}
/* Left group: count + badge */
.swatnik-bar-left  { display:flex; align-items:center; gap:10px; flex:1; flex-wrap:wrap; }
/* Right group: bulk button */
.swatnik-bar-right { display:flex; align-items:center; margin-left:auto; }

.swatnik-count {
    color:#444; font-size:.9rem; font-weight:600;
    background:#f0fadf; padding:5px 14px; border-radius:20px;
    border:1px solid #c8e99a; white-space:nowrap;
}
.swatnik-badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:5px 14px; border-radius:20px;
    font-size:.82rem; font-weight:700; white-space:nowrap;
}
.swatnik-ok     { background:#e6f7d0; color:#3a6b12; border:1px solid #aedd78; }
.swatnik-locked { background:#fff9e6; color:#8a6200; border:1px solid #f0d678; }

/* Bulk download — right side */
.swatnik-bulk-dl {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--sg-green); color:#fff; border:none; border-radius:10px;
    padding:10px 22px; font-size:.88rem; font-weight:700; cursor:pointer;
    transition:background .2s,box-shadow .2s,transform .1s;
    box-shadow:0 3px 12px var(--sg-green-glow);
    pointer-events:auto !important; white-space:nowrap;
}
.swatnik-bulk-dl:hover   { background:var(--sg-green-dark); box-shadow:0 5px 18px var(--sg-green-glow); transform:translateY(-1px); }
.swatnik-bulk-dl:active  { transform:translateY(0); }
.swatnik-bulk-dl:disabled { opacity:.65; cursor:wait; transform:none; pointer-events:none; }

/* Progress bar inside bulk button */
.swatnik-bulk-dl .sg-progress { font-size:.78rem; opacity:.85; }

/* ============================================================
   GRID LAYOUT  (only layout — justified removed)
   ============================================================ */
.swatnik-layout-grid {
    display:grid !important;
    gap:var(--sg-gap);
}
/* Masonry */
.swatnik-layout-masonry { column-gap:var(--sg-gap); }
.swatnik-layout-masonry .swatnik-cell { margin-bottom:var(--sg-gap); }

/* ============================================================
   CELL  — shared for both layouts
   ============================================================ */
.swatnik-cell {
    position:relative; overflow:hidden;
    border-radius:var(--sg-radius);
    background:#ddefc5; cursor:zoom-in;
    box-shadow:0 2px 10px rgba(0,0,0,.09);
    transition:transform .22s,box-shadow .22s;
}

/* Grid cells: square via padding-top trick */
.swatnik-layout-grid .swatnik-cell { padding-top:100%; }

/* Masonry cells: natural image height */
.swatnik-layout-masonry .swatnik-cell {
    padding-top:0; break-inside:avoid; display:block;
}

.swatnik-cell:hover { transform:scale(1.025); box-shadow:0 8px 28px rgba(0,0,0,.16); z-index:2; }

/* Image inside grid (absolute, fills the padding-top box) */
.swatnik-layout-grid .swatnik-img {
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .35s; -webkit-user-drag:none; pointer-events:none;
}
.swatnik-layout-grid .swatnik-cell:hover .swatnik-img { transform:scale(1.07); }

/* Image inside masonry (natural flow) */
.swatnik-layout-masonry .swatnik-img {
    position:relative; width:100%; height:auto; display:block;
    -webkit-user-drag:none; pointer-events:none;
}

/* ============================================================
   OVERLAY  (transparent click catcher on top of image)
   ============================================================ */
.swatnik-overlay {
    position:absolute; inset:0; z-index:3;
    cursor:zoom-in; background:transparent;
    transition:background .22s;
}
.swatnik-cell:hover .swatnik-overlay { background:rgba(0,0,0,.12); }

/* Expand icon centred on hover */
.swatnik-overlay::before {
    content:'⛶';
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    font-size:2.4rem; color:#fff; opacity:0;
    transition:opacity .22s;
    text-shadow:0 2px 10px rgba(0,0,0,.5);
    pointer-events:none; line-height:1;
}
.swatnik-cell:hover .swatnik-overlay::before { opacity:1; }

/* ============================================================
   INDIVIDUAL DOWNLOAD BUTTON  — bottom-right, on hover, green
   ============================================================ */
.swatnik-dl {
    position:absolute;
    bottom:10px; right:10px;      /* always bottom-right */
    z-index:5;
    background:var(--sg-green); color:#fff;
    border-radius:8px; padding:7px 12px;
    font-size:.78rem; font-weight:700; text-decoration:none;
    display:flex; align-items:center; gap:5px;
    opacity:0; pointer-events:none;
    transition:opacity .2s,transform .15s;
    box-shadow:0 3px 10px rgba(0,0,0,.3);
    white-space:nowrap;
}
.swatnik-cell:hover .swatnik-dl { opacity:1; pointer-events:auto; }
.swatnik-dl:hover { transform:scale(1.06); color:#fff; }

/* ---- Empty ---- */
.swatnik-empty {
    padding:80px 20px; text-align:center; color:#9ca3af;
    border:2px dashed #c8e99a; border-radius:16px; background:#fafff5;
    font-size:1rem;
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.swatnik-lb {
    position:fixed; inset:0; z-index:999999;
}
.swatnik-lb-backdrop {
    position:absolute; inset:0;
    background:rgba(6,12,3,.93);
    backdrop-filter:blur(8px);
}
.swatnik-lb-stage {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    padding:72px 90px 90px; box-sizing:border-box;
    pointer-events:none;
}
.swatnik-lb-photo {
    max-width:100%; max-height:100%; object-fit:contain;
    border-radius:8px; box-shadow:0 30px 90px rgba(0,0,0,.7);
    -webkit-user-drag:none; pointer-events:none; display:block;
}
.swatnik-lb-spinner {
    position:absolute; width:44px; height:44px;
    border:3px solid rgba(142,197,86,.25);
    border-top-color:var(--sg-green); border-radius:50%;
    animation:sg-spin .7s linear infinite; pointer-events:none;
}
@keyframes sg-spin { to { transform:rotate(360deg); } }

/* Nav buttons */
.swatnik-lb-close,
.swatnik-lb-prev,
.swatnik-lb-next {
    position:absolute; border:2px solid rgba(255,255,255,.2);
    color:#fff; cursor:pointer; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transition:background .18s,border-color .18s,transform .18s;
    padding:0; z-index:2; background:rgba(0,0,0,.45);
    pointer-events:auto !important;
}
.swatnik-lb-close:hover,
.swatnik-lb-prev:hover,
.swatnik-lb-next:hover { background:var(--sg-green); border-color:var(--sg-green); }

.swatnik-lb-close { top:20px; right:20px; width:44px; height:44px; font-size:1.1rem; }
.swatnik-lb-prev  { left:20px;  top:50%; transform:translateY(-50%); width:54px; height:54px; font-size:2rem; }
.swatnik-lb-next  { right:20px; top:50%; transform:translateY(-50%); width:54px; height:54px; font-size:2rem; }
.swatnik-lb-prev:hover { transform:translateY(-50%) scale(1.08); }
.swatnik-lb-next:hover { transform:translateY(-50%) scale(1.08); }

.swatnik-lb-counter {
    position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,.65); font-size:.85rem; letter-spacing:1px; z-index:2;
    background:rgba(0,0,0,.4); padding:4px 16px; border-radius:20px; pointer-events:none;
}
.swatnik-lb-dl {
    position:absolute; bottom:22px; right:26px; z-index:2;
    background:var(--sg-green); color:#fff; padding:10px 22px;
    border-radius:10px; text-decoration:none; font-size:.88rem; font-weight:700;
    display:flex; align-items:center; gap:7px;
    transition:background .2s,box-shadow .2s;
    box-shadow:0 4px 14px var(--sg-green-glow);
    pointer-events:auto !important;
}
.swatnik-lb-dl:hover { background:var(--sg-green-dark); color:#fff; }

/* ---- Mobile ---- */
@media(max-width:600px){
    .swatnik-wrap  { padding:18px 12px 40px; }
    .swatnik-bar   { flex-direction:column; align-items:flex-start; padding:12px 14px; }
    .swatnik-bar-right { margin-left:0; width:100%; }
    .swatnik-bulk-dl   { width:100%; justify-content:center; }
    .swatnik-lb-stage  { padding:54px 14px 78px; }
    .swatnik-lb-prev   { left:6px;  width:42px; height:42px; font-size:1.5rem; }
    .swatnik-lb-next   { right:6px; width:42px; height:42px; font-size:1.5rem; }
    .swatnik-lb-dl     { font-size:.78rem; padding:8px 14px; bottom:12px; right:12px; }
    .swatnik-lb-counter { display:none; }
}