/**
 * Filter Gallery Pro - Frontend Stylesheet
 * Custom prefixed CSS replacing Bootstrap dependency
 * Version: 6.0.1
 * All classes are prefixed with 'ufg-' to avoid theme conflicts
 */

/* ============================================
   1. Reset & Box Model
   ============================================ */
.fg-content-wrapper,
.fg-content-wrapper *,
.fg-content-wrapper *::before,
.fg-content-wrapper *::after {
	box-sizing: border-box;
}

/* Prevent FOUC (Flash of Unstyled Content) during initial page load */
.fg-content-wrapper .ufg-filter-container,
.fg-content-wrapper .ufg-search-container,
.fg-content-wrapper .ufg-combined-row,
.fg-content-wrapper .ufg-uncombined-search {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.fg-content-wrapper .filter-group.ufg-hide-group,
.fg-content-wrapper .ufg-filter-container .filter-group.ufg-hide-group,
.fg-content-wrapper .ufg-filter-style-atelier-luxury .filter-group.ufg-hide-group {
	display: none !important;
}

/* ============================================
   2. Layout - Flexbox Row
   ============================================ */
.fg-content-wrapper .ufg-row {
	display: flex;
	flex-wrap: wrap;
	margin-right: 0;
	margin-left: 0;
}

/* ============================================
   3. Gallery Grid (Isotope-compatible)
   ============================================ */
.fg-content-wrapper .ufg-gallery {
	display: block !important; /* Disable flexbox to let Isotope handle positioning */
}

.fg-content-wrapper .ufg-gallery::after {
	content: '';
	display: block;
	clear: both;
}

/* ============================================
   4. Image Utilities
   ============================================ */
.fg-content-wrapper .ufg-img-responsive {
	display: block;
	max-width: 100%;
	width: 100%;
	height: auto;
}

/* ============================================
   5. Visibility Utilities
   ============================================ */
.fg-content-wrapper .ufg-hidden {
	display: none !important;
}

.fg-content-wrapper .ufg-visible-block {
	display: block !important;
}

/* ============================================
   6. Text Utilities
   ============================================ */
.fg-content-wrapper .ufg-text-center {
	text-align: center;
}

.fg-content-wrapper .ufg-no-underline {
	text-decoration: none;
}

.fg-content-wrapper .ufg-no-underline:hover {
	text-decoration: none;
}

/* ============================================
   7. Filter Container Layout
   ============================================ */
.fg-content-wrapper .ufg-filter-container {
	margin-bottom: 20px;
	width: 100%;
}
.fg-content-wrapper .ufg-uncombined-filter {
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}

.fg-content-wrapper .ufg-filter-container .filter-group {
	margin-top: 0;
	margin-bottom: 15px;
}
.fg-content-wrapper .ufg-filter-container .filter-group:last-child {
	margin-bottom: 0;
}

.fg-content-wrapper .ufg-filter-container .filter-group button {
	margin-right: 0.3rem;
	margin-bottom: 0.3rem;
}

.fg-content-wrapper .ufg-filter-group-inner > button:first-of-type {
	margin-left: 0 !important;
}

.fg-content-wrapper .ufg-filter-group-inner {
	width: 100%;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

/* Filter heading labels */
.fg-content-wrapper .parent-filters-label {
	margin-bottom: 0.75rem;
}

.fg-content-wrapper .level-one-filters-label,
.fg-content-wrapper .level-two-filters-label,
.fg-content-wrapper .level-three-filters-label,
.fg-content-wrapper .level-four-filters-label,
.fg-content-wrapper .level-five-filters-label {
	margin-top: 0.75rem;
}

/* ============================================
   8. Gallery Thumbnail Layout
   ============================================ */
.fg-content-wrapper .ufg-thumbnail {
	float: left;
	padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 30px;
}

.fg-content-wrapper .ufg-thumbnail-border {
	border-radius: 0.25rem;
	overflow: hidden;
}

.fg-content-wrapper .ufg-thumbnail-border a {
	display: block;
	overflow: hidden;
	position: relative;
}

/* ============================================
   9. Image Content (Title, Description, Button)
   ============================================ */
.fg-content-wrapper .ufg-image-content {
	padding: 5px;
}

.fg-content-wrapper .ufg-image-title {
	padding: 5px 8px;
	word-wrap: break-word;
}

.fg-content-wrapper .ufg-image-description {
	padding: 5px 8px;
	word-wrap: break-word;
}

/* ============================================
   10. Read More Button
   ============================================ */
.fg-content-wrapper .ufg-read-more-button {
	display: block;
	width: 100%;
	padding: 6px 12px;
	font-size: 0.875rem;
	line-height: 1.5;
	border: 1px solid transparent;
	border-radius: 0.25rem;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.fg-content-wrapper .ufg-read-more-button:hover {
	text-decoration: none;
	opacity: 0.85;
}

.fg-content-wrapper .ufg-read-more-button i {
	margin-right: 5px;
}

/* ============================================
   11. Image Wrap & Fade-in
   ============================================ */
.fg-content-wrapper .ufg-img-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.05);
	min-height: 100px;
	transition: background-color 0.3s ease;
}

.fg-content-wrapper .ufg-img-wrap img {
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
	display: block;
	width: 100%;
	height: auto;
}

.fg-content-wrapper .ufg-img-wrap.loaded img {
	opacity: 1;
}

.fg-content-wrapper .ufg-img-wrap.loaded {
	background-color: transparent;
}

/* ============================================
   12. Image Hover Effect - Border Overlay
   ============================================ */
.fg-content-wrapper .ufg-thumbnail img {
	transition: transform 0.5s, filter 1.5s ease-in-out;
	background: #000;
}

/* ============================================
   13. Filter Button Base Styles
   ============================================ */
.fg-content-wrapper .ufg-btn.filters {
	position: relative;
	border: none;
	font-size: inherit;
	color: #333333;
	background: none;
	cursor: pointer;
	padding: 12px 15px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	display: inline-block;
	line-height: 1.5;
	vertical-align: middle;
}

.fg-content-wrapper .ufg-btn > :first-child:not(.ufg-active-dot) {
	margin-right: 7px;
}

.fg-content-wrapper .ufg-btn .ufg-active-dot {
	display: none !important;
	vertical-align: middle;
	margin-left: 8px;
	width: 8px;
	height: 8px;
	background-color: currentColor;
	border-radius: 50%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0;
}

/* Fallback for multiple variations of active class JS might use */
.fg-content-wrapper .active-filter .ufg-active-dot,
.fg-content-wrapper .active .ufg-active-dot,
.fg-content-wrapper .current .ufg-active-dot {
	opacity: 1;
}

.fg-content-wrapper .ufg-btn:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.fg-content-wrapper .ufg-btn-3:before {
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
	line-height: 3;
	font-size: 140%;
	width: 60px;
}

/* ============================================
   14. Load More Button
   ============================================ */
.fg-content-wrapper .fg-load-more {
	display: inline-block !important;
	text-align: center;
	padding: 25px 0;
	width: 100%;
}

.fg-content-wrapper .fg-load-more button {
	text-align: center;
	position: relative;
	padding: 12px 25px;
}

.fg-content-wrapper #fg-load-btn i {
	opacity: 0;
	position: absolute;
	right: 15px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.fg-content-wrapper #fg-load-btn.load i {
	opacity: 1;
	margin-right: 0;
}

.fg-content-wrapper #fg-load-btn.load {
	padding: 12px 40px 12px 15px;
}

/* ============================================
   15. Gallery Container Clearfix
   ============================================ */
.fg-content-wrapper .ufg-gallery-container::after {
	content: '';
	display: block;
	clear: both;
}

/* ============================================
   16. Search Box Styles
   ============================================ */
.fg-content-wrapper .ufg-search-container {
	margin-top: 0;
	margin-bottom: 20px;
	text-align: center;
	width: 100%;
}

.fg-content-wrapper .ufg-search-input {
	width: 100%;
	max-width: 75%;
	padding: 10px 15px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #fff;
	color: #374151;
	font-size: 14px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	outline: none;
	transition: all 0.2s ease-in-out;
}

.fg-content-wrapper .ufg-search-input:focus {
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ============================================
   17. Admin and Visitor Notice Boxes
   ============================================ */
.fg-content-wrapper .ufg-admin-notice-box {
	background: rgba(239, 68, 68, 0.08);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(239, 68, 68, 0.2);
	border-left: 5px solid #ef4444;
	color: #9b2c2c;
	padding: 16px;
	margin: 20px 0;
	border-radius: 8px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	font-size: 15px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	animation: ufgFadeIn 0.4s ease-out;
}

.fg-content-wrapper .ufg-admin-notice-box .ufg-notice-flex {
	display: flex;
	align-items: flex-start;
}

.fg-content-wrapper .ufg-admin-notice-box .ufg-notice-icon {
	font-size: 20px;
	margin-right: 12px;
	line-height: 1;
	color: #ef4444;
	margin-top: 2px;
}

.fg-content-wrapper .ufg-admin-notice-box .ufg-notice-content {
	flex: 1;
}

.fg-content-wrapper .ufg-admin-notice-box .ufg-notice-title {
	display: block;
	margin-bottom: 4px;
	font-size: 16px;
	color: #742a2a;
}

.fg-content-wrapper .ufg-admin-notice-box .ufg-notice-text {
	line-height: 1.5;
	color: #742a2a;
}

.fg-content-wrapper .ufg-admin-notice-box .ufg-notice-actions {
	margin-top: 12px;
}

.fg-content-wrapper .ufg-admin-notice-box .ufg-notice-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ef4444;
	color: #fff !important;
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 13px;
	transition: background 0.2s, transform 0.1s;
	box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.fg-content-wrapper .ufg-admin-notice-box .ufg-notice-btn:hover {
	background: #dc2626;
	transform: translateY(-1px);
	text-decoration: none;
}

.fg-content-wrapper .ufg-admin-notice-box .ufg-notice-btn:active {
	transform: translateY(0);
}

/* Visitor notice style */
.fg-content-wrapper .ufg-visitor-notice-box {
	background: rgba(243, 244, 246, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(209, 213, 219, 0.4);
	color: #4b5563;
	padding: 24px;
	margin: 20px 0;
	border-radius: 8px;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	font-size: 16px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	animation: ufgFadeIn 0.4s ease-out;
}

.fg-content-wrapper .ufg-visitor-notice-box .ufg-visitor-icon {
	font-size: 32px;
	margin-bottom: 12px;
	display: block;
	color: #9ca3af;
}

.fg-content-wrapper .ufg-visitor-notice-box .ufg-visitor-text {
	font-weight: 500;
	color: #4b5563;
}

@keyframes ufgFadeIn {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}