:root{ --bg:#f6f7f8; --card:#fff; --muted:#666; --accent:#111; --gap:18px }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:#111}
.wrap{max-width:1280px;margin:28px auto;padding:18px}
.light_box_active {
	height: 100vh;
	overflow: hidden;
}
.light_box_active .smooth-scroll { 
	z-index: 9999;
	height: 100vh;
}

.light_box_active .smooth-scroll .scroll-content,
.light_box_active .smooth-scroll .page-wrapper__content {
	height: 100vh;
}
.light_box_active .smooth-scroll .bg-light {
	height: 0;
}

.light_box_active .smooth-scroll .bg-light + div {
	overflow: visible;
    max-height: 45vh;
}
.light_box_active .scroll-content .footer {
	display: none;
}
.light_box_active .smooth-scroll .bg-light.footer {
	height: auto;
}
/* .light_box_active .smooth-scroll div {
	height: 100%;
	overflow: hidden;
} */
.light_box_active .smooth-scroll .lb {
	height: 100vh;
	overflow: hidden;
    position: fixed;
    inset: 0;
}
#categoryFilter {
    width: 250px;
}
/* Controls */
.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.search{flex:3;min-width:200px;padding:10px 12px;border-radius:10px;border:1px solid #ddd;background:#fff}

/* Select2 Customization to match original style */
.select2-container {
    flex:1;
    min-width: 250px !important;
}
.select2-selection--multiple {
    min-height: 42px !important;
    border-radius: 10px !important;
}
.select2-selection {
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    padding: 7px 35px 7px 12px !important;
    height: auto !important;
    min-height: 40px !important;
    background: #fff !important;
}
.select2-selection__rendered {
    line-height: 1.4 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.select2-selection__arrow {
    display: none !important;
}

.select2-selection {
	min-height: 48px !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
	margin-top: 0 !important;
    height: 25px !important;
}

.wrap .select2-container .select2-selection ul li {
	flex-direction: row-reverse;
    display: inline-flex;
	border: none;
}

.wrap .select2-container .select2-selection ul li .select2-selection__choice__remove {
	position: static;
	background: transparent;
	border: none;
}

/* .select2-container.select2-container--default.select2-container--open {
	top:  270px !important;
}

.wrap .select2-container.select2-container--default.select2-container--open {
	top:  0 !important;
}
 */
/* Custom clear button - transparent background */
.select2-selection__clear {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    font-size: 20px !important;
    color: #999 !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
}
.select2-selection__clear:hover {
    color: #666 !important;
    background: transparent !important;
}

/* Custom dropdown arrow */
/* .select2-selection:after {
    content: '⌄';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #999;
    pointer-events: none;
} */

.select2-selection__choice {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    margin-right: 6px !important;
    margin-bottom: 4px !important;
}
.select2-selection__choice__remove {
    color: #fff !important;
    /* margin-right: 5px !important; */
    font-size: 14px !important;
}
.select2-dropdown {
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    margin-top: 4px !important;
}
.select2-results__option {
    padding: 8px 12px !important;
}
.select2-results__option--highlighted {
    background-color: #f0f0f0 !important;
    color: #111 !important;
}
.select2-results__option[aria-selected="true"] {
    background-color: var(--accent) !important;
    color: #fff !important;
}

/* Hide "All Categories" option from dropdown */
.select2-results__option[data-select2-id*="all"] {
    display: none !important;
}

/* Desktop layout: 75% search, 25% select2 */
@media (min-width: 769px) {
    .controls {
    flex-wrap: nowrap;
    }
    .search {
    flex: 3; /* 75% */
    min-width: 0;
    }
    .select2-container {
    flex: 1; /* 25% */
    min-width: 0;
    }
}

/* Responsive grid */
.gallery-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    /* gap:var(--gap); */
    gap: 20px 20px;
}

.gallery_height {
    width: 100% !important;
}

@media (max-width:1024px){
    .gallery-grid{
    grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width:640px){
    .gallery-grid{
    grid-template-columns:1fr;
    }
}

.card{
    background:var(--card);
    border-radius:12px;
    overflow:hidden;
    position:relative;
    cursor:pointer;
    transition:transform .3s ease, opacity .3s ease;
    opacity:1;
}

/* Image container */
.image-container{
    position:relative;
    width:100%;
    height:0;
    padding-bottom:75%; /* 4:3 aspect ratio */
    overflow:hidden;
}

.image-container img {
	height: 100%;
	object-fit: cover;
}
.thumb{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .35s ease;
}
.card:hover .thumb{transform:scale(1.05);}

/* Hover title - slides up from bottom */
.meta{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    background:linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 70%, transparent 100%);
    color:#fff;
    padding:20px 16px 14px;
    transform:translateY(100%);
    transition:transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-size:14px;
    line-height:1.4;
    pointer-events:none;
    opacity:1;
}
.card:hover .meta{transform:translateY(0);}

/* Cards without meta info - hide overlay */
.card.no-meta .meta {
    display: none !important;
}

/* Title styling inside meta */
.meta-title{
    font-weight:600;
    font-size:15px;
    margin-bottom:6px;
    display:block;
}
.meta-tags{
    font-size:12px;
    opacity:0.9;
    display:block;
}

/* Pagination area */
.pager{
    display:flex;
    gap:8px;
    justify-content:center;
    margin-top:24px;
    flex-wrap:wrap;
}
.page-btn{
    padding:8px 12px;
    border-radius:8px;
    border:1px solid #ddd;
    background:#fff;
    cursor:pointer;
    transition:all .2s;
}
.page-btn:hover{
    border-color:#999;
}
.page-btn.active{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
}

/* Lightbox */
.lb{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.92);
    z-index:9999;
}
.lb.open{
    display:flex;
    animation:fadeIn .25s;
}

.lbimg{
    max-width:600px !important;
    max-height:85%;
    border-radius:8px;
    box-shadow:0 25px 50px rgba(0,0,0,.3);
}

/* Transparent close button */
.lb-close{
    position:fixed;
    top:24px;
    right:24px;
    color:#fff;
    font-size:32px;
    cursor:pointer;
    z-index:10000;
    background:none;
    border:none;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0.8;
    transition:opacity .2s;
}
.lb-close:hover{
    opacity:1;
}

/* Transparent arrow buttons */
.lb-nav{
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    color:#fff;
    font-size:42px;
    cursor:pointer;
    padding:20px;
    user-select:none;
    z-index:10000;
    background:none;
    border:none;
    opacity:0.7;
    transition:opacity .2s, transform .2s;
    display:flex;
    align-items:center;
    justify-content:center;
}
.lb-nav:hover{
    opacity:1;
    transform:translateY(-50%) scale(1.1);
}
.lb-prev{left:20px}
.lb-next{right:20px}

/* Lightbox info overlay */
.lb-info{
    position:fixed;
    bottom:32px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(0,0,0,0.7);
    color:#fff;
    padding:14px 24px;
    border-radius:8px;
    max-width:80%;
    text-align:center;
    font-size:15px;
    backdrop-filter:blur(8px);
    z-index:10000;
    border:1px solid rgba(255,255,255,0.1);
}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Mobile touch support */
.touch-active .meta{
    transform:translateY(0);
}

/* Responsive controls */
@media (max-width:768px){
    .controls{
        flex-direction:column;
        align-items:stretch;
    }
    .search{
        max-width:100%;
    }
    .select2-container {
        min-width: 100% !important;
        max-width: 100% !important;
    }
    .lb-nav{
        font-size:36px;
        padding:16px;
    }
    .lb-close{
        top:16px;
        right:16px;
        font-size:28px;
    }
    .lb-info{
        bottom:24px;
        font-size:14px;
        padding:12px 18px;
    }
    .lbimg {
        width: 90vw;          /* responsive width */
        max-width: 100%;      /* prevent overflow */
        max-height: 80vh;     /* fit inside screen height */
        height: auto;
        object-fit: contain;  /* keep aspect ratio */
    }
}

/* Empty state */
.empty-state{
    text-align:center;
    padding:60px 20px;
    color:#666;
    font-size:16px;
    grid-column:1/-1;
    display:none;
}

/* Stats */
.stats{
    margin-bottom:18px;
    color:var(--muted);
    font-size:14px;
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

body.light_box_active {
    overflow: hidden;
}