/* *
 * Propstack Gallery Styles
 *
 * CSS for property gallery with Swiper integration, lightbox,
 * thumbnail navigation, and responsive design.
 *
 * @package    Propstack_Api_V1
 * @since      1.0.0
 */

/* ==========================================================================
   Property Gallery Main Container
   ========================================================================== */

.propstack-property-gallery {
	position: relative;
	margin: 2rem 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--propstack-background);
	box-shadow: 0 4px 20px var(--greyVeryLight, rgba(0,0,0,0.2));

	.propstack-gallery-main {
		position: relative;
		background: var(--greyVeryLight, rgba(0,0,0,0.2));
	}

	.propstack-gallery-main .swiper {
		width: 100%;
		height: 100%;
		border-radius: 12px 12px 0 0;
		aspect-ratio: 4 / 3 ;
		max-width: 920px;
		position: unset;
	}

	@media (max-width: 768px) {
		.propstack-gallery-main .swiper {
			height: 350px;
		}
	}

	/* ==========================================================================
	   Gallery Images
	   ========================================================================== */

	.gallery-image-container {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.gallery-main-image {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
		transition: transform 0.3s ease;
		cursor: pointer;
	}

	.gallery-main-image:hover {
		transform: scale(1.05);
	}

	/* Lazy Loading Styles */
	.swiper-lazy {
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.swiper-lazy.swiper-lazy-loaded {
		opacity: 1;
	}

	.swiper-lazy-preloader {
		width: 42px;
		height: 42px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -21px;
		margin-top: -21px;
		z-index: 10;
		transform-origin: 50%;
		animation: swiper-preloader-spin 1s infinite linear;
		box-sizing: border-box;
		border: 4px solid var(--propstack-primary);
		border-radius: 50%;
		border-top: 4px solid transparent;
	}

	.swiper-lazy-preloader-white {
		border-color: rgba(255, 255, 255, 0.6);
		border-top-color: transparent;
	}

	@keyframes swiper-preloader-spin {
		100% {
			transform: rotate(360deg);
		}
	}

	/* ==========================================================================
	   Image Overlay
	   ========================================================================== */

	.gallery-image-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0.1) 50%,
			rgba(0, 0, 0, 0.7) 100%
		);
		opacity: 0;
		transition: opacity 0.3s ease;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 1.5rem;
	}

	.gallery-image-container:hover .gallery-image-overlay {
		opacity: 1;
	}

	.image-info {
		align-self: flex-start;
	}

	.image-title {
		color: white;
		font-size: 1.25rem;
		font-weight: 600;
		margin: 0 0 0.5rem 0;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	}

	.image-caption {
		color: rgba(255, 255, 255, 0.9);
		font-size: 0.9rem;
		margin: 0;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	}

	.image-actions {
		align-self: flex-end;
		display: flex;
		gap: 0.5rem;
	}

	.image-actions button {
		background: rgba(255, 255, 255, 0.5);
		border: 1px solid var(--mainColor, orange);
		border-radius: 50%;
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.2s ease;
		backdrop-filter: blur(10px);
	}

	.image-actions button:hover {
		background: white;
		transform: scale(1.1);
	}

	.image-actions button:active {
		transform: scale(0.95);
	}

	/* ==========================================================================
	   Swiper Navigation
	   ========================================================================== */

	.swiper-button-next,
	.swiper-button-prev {
		color: var(--mainColor, orange);
		background: rgba(255, 255, 255, .8);
		border-radius: 50%;
		width: 50px;
		height: 50px;
		margin-top: -25px;
		backdrop-filter: blur(10px);
		transition: all 0.3s ease;
		border: 1px solid var(--mainColor, orange);
	}

	.swiper-button-next:after,
	.swiper-button-prev:after {
		display: none;
	}

	.swiper-button-next:hover,
	.swiper-button-prev:hover {
		background: rgba(255, 255, 255, 1);
		transform: scale(1.1);
	}

	.nav-icon {
		font-size: 1.5rem;
		font-weight: bold;
		line-height: 1;
	}

	/* Pagination */
	.swiper-pagination {
		bottom: 20px !important;
	}

	.swiper-pagination-bullet {
		background: rgba(255, 255, 255, 0.8);
		opacity: 1;
		transition: all 0.3s ease;
	}

	.swiper-pagination-bullet-active {
		background: white;
		transform: scale(1.2);
	}

	/* ==========================================================================
	   Gallery Counter
	   ========================================================================== */

	.gallery-counter {
		position: absolute;
		bottom: 20px;
		right: 20px;
		background: rgba(255, 255, 255, .8);
		color: var(--mainColor, orange);
		padding: 0.5rem 1rem;
		border-radius: 20px;
		font-size: 0.875rem;
		font-weight: 700;
		backdrop-filter: blur(10px);
		z-index: 10;
		border: 1px solid var(--mainColor, orange)
	}

	.separator {
		margin: 0 0.5rem;
		opacity: 0.7;
	}

	/* ==========================================================================
	   Thumbnail Gallery
	   ========================================================================== */

	.propstack-gallery-thumbs {
		position: relative;
		background: var(--propstack-backgroundm);
		padding: 1rem;
		border-top: 1px solid var(--propstack-border);
	}

	.propstack-gallery-thumbs .swiper {
		height: 80px;
	}

	.thumb-slide {
		cursor: pointer;
		opacity: 0.6;
		transition: opacity 0.3s ease;
		flex-shrink: 1;
	}

	.thumb-slide.swiper-slide-thumb-active {
		opacity: 1;
	}

	.thumb-container {
		position: relative;
		width: 100%;
		height: 100%;
		border-radius: 8px;
		overflow: hidden;
		border: 2px solid transparent;
		transition: border-color 0.3s ease;
	}

	.thumb-slide.swiper-slide-thumb-active .thumb-container {
		border-color: var(--propstack-primary);
	}

	/* .propstack-gallery-thumbs{
		.swiper-wrapper {
			transform: translateX(0) !important
		}
		.swiper-slide{
			max-width: 200px
		}

	} */
	.thumb-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.thumb-overlay {
		position: absolute;
		top: 4px;
		left: 4px;
		background: rgba(255, 255, 255, .8);
		color: var(--mainColor, orange);
		padding: 2px 6px;
		border-radius: 4px;
		font-size: 0.75rem;
		line-height: 1;
		font-weight: 700
	}

	.thumb-navigation {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		transform: translateY(-50%);
		display: flex;
		justify-content: space-between;
		pointer-events: none;
		z-index: 10;
	}

	.thumb-prev,
	.thumb-next {
		background: rgba(255, 255, 255, 0.8);
		border: 1px solid var(--mainColor, orange);
		border-radius: 50%;
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.2s ease;
		pointer-events: auto;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		color: var(--mainColor, orange);
	}

	.thumb-prev:hover,
	.thumb-next:hover {
		background: white;
		transform: scale(1.1);
	}

	/* ==========================================================================
	   Gallery Controls
	   ========================================================================== */

	.gallery-controls {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1rem;
		background: var(--propstack-background);
		border-top: 1px solid var(--propstack-border);
	}

	.controls-left,
	.controls-right {
		display: flex;
		gap: 0.5rem;
	}

	.controls-center {
		flex: 1;
		display: flex;
		justify-content: center;
		padding: 0 1rem;
	}

	.current-image-info {
		text-align: center;
	}

	.info-title {
		display: block;
		font-weight: 600;
		color: var(--propstack-text);
		font-size: 0.9rem;
	}

	.info-caption {
		display: block;
		color: var(--propstack-text-muted);
		font-size: 0.8rem;
		margin-top: 0.25rem;
	}

	.gallery-controls button {
		background: var(--mainColor, orange);
		border: 1px solid var(--mainColor, orange);
		border-radius: 8px;
		padding: 0.5rem;
		cursor: pointer;
		transition: all 0.2s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		height: 40px;
		font-size: 25px;
		line-height: 1;
		color: var(--contrastColorInverted, white);
        &.btn-fullscreen{
            display: none;
        }
	}

	.gallery-controls button:hover {
		background: var(--contrastColorInverted, white);
		color: var(--mainColor, orange);
	}

	/* ==========================================================================
	   Gallery Grid View
	   ========================================================================== */

	.propstack-gallery-grid {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.95);
		z-index: 10000;
		padding: 2rem;
		overflow-y: auto;
	}

	.grid-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 2rem;
		color: white;
	}

	.grid-header h3 {
		margin: 0;
		font-size: 1.5rem;
	}

	.btn-close-grid {
		background: rgba(255, 255, 255, 0.1);
		border: none;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		color: white;
		cursor: pointer;
		transition: background 0.2s ease;
	}

	.btn-close-grid:hover {
		background: rgba(255, 255, 255, 0.2);
	}

	.grid-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 1rem;
	}

	.grid-item {
		position: relative;
		aspect-ratio: 4/3;
		border-radius: 8px;
		overflow: hidden;
		cursor: pointer;
		transition: transform 0.2s ease;
	}

	.grid-item:hover {
		transform: scale(1.05);
	}

	.grid-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.grid-item-overlay {
		position: absolute;
		top: 8px;
		left: 8px;
		background: rgba(0, 0, 0, 0.7);
		color: white;
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 0.875rem;
	}

	/* ==========================================================================
	   Lightbox
	   ========================================================================== */

	.propstack-lightbox {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10001;
		background: rgba(0, 0, 0, 0.95);
	}

	.lightbox-backdrop {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		cursor: pointer;
	}

	.lightbox-container {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.lightbox-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem 2rem;
		background: rgba(0, 0, 0, 0.8);
		color: white;
	}

	.lightbox-info h4 {
		margin: 0 0 0.25rem 0;
		font-size: 1.25rem;
	}

	.lightbox-info p {
		margin: 0;
		opacity: 0.8;
		font-size: 0.9rem;
	}

	.lightbox-actions {
		display: flex;
		gap: 0.5rem;
	}

	.lightbox-actions button {
		background: rgba(255, 255, 255, 0.1);
		border: none;
		border-radius: 8px;
		padding: 0.5rem;
		color: white;
		cursor: pointer;
		transition: background 0.2s ease;
	}

	.lightbox-actions button:hover {
		background: rgba(255, 255, 255, 0.2);
	}

	.lightbox-content {
		flex: 1;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 2rem;
	}

	.lightbox-image {
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
		border-radius: 8px;
	}

	.lightbox-nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(255, 255, 255, 0.1);
		border: none;
		border-radius: 50%;
		width: 60px;
		height: 60px;
		color: white;
		cursor: pointer;
		transition: all 0.2s ease;
		backdrop-filter: blur(10px);
	}

	.lightbox-nav:hover {
		background: rgba(255, 255, 255, 0.2);
		transform: translateY(-50%) scale(1.1);
	}

	.lightbox-prev {
		left: 2rem;
	}

	.lightbox-next {
		right: 2rem;
	}

	.lightbox-footer {
		display: flex;
		justify-content: center;
		padding: 1rem;
		background: rgba(0, 0, 0, 0.8);
	}

	.lightbox-counter {
		color: white;
		font-size: 1rem;
	}

	/* ==========================================================================
	   Gallery Grid (Archive Pages)
	   ========================================================================== */

	.propstack-gallery-grid.columns-1 {
		display: grid;
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.propstack-gallery-grid.columns-2 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}

	.propstack-gallery-grid.columns-3 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}

	.propstack-gallery-grid.columns-4 {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 2rem;
	}

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

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

	@media (max-width: 480px) {
		.propstack-gallery-grid.columns-2,
		.propstack-gallery-grid.columns-3,
		.propstack-gallery-grid.columns-4 {
			grid-template-columns: 1fr;
		}
	}

	/* ==========================================================================
	   Grid Property Items
	   ========================================================================== */

	.grid-property-item {
		position: relative;
		background: white;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.grid-property-item:hover {
		transform: translateY(-4px);
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
	}

	.property-image-container {
		position: relative;
		aspect-ratio: 4/3;
		overflow: hidden;
	}

	.property-image-link {
		display: block;
		width: 100%;
		height: 100%;
	}

	.property-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		transition: transform 0.3s ease;
	}

	.property-image.lazy {
		opacity: 0;
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.property-image.lazy.loaded {
		opacity: 1;
	}

	.property-image-container:hover .property-image {
		transform: scale(1.05);
	}

	.lazy-placeholder {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--propstack-background-alt);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--propstack-text-muted);
	}

	.placeholder-icon {
		font-size: 3rem;
		opacity: 0.5;
	}

	/* Property Image Placeholder */
	.property-image-placeholder {
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.placeholder-content {
		text-align: center;
		color: var(--propstack-text-muted);
	}

	.placeholder-content .placeholder-icon {
		display: block;
		font-size: 2.5rem;
		margin-bottom: 0.5rem;
		opacity: 0.6;
	}

	.placeholder-text {
		font-size: 0.875rem;
		font-weight: 500;
	}

	/* Image Counter */
	.image-counter {
		position: absolute;
		top: 12px;
		right: 12px;
		background: rgba(0, 0, 0, 0.8);
		color: white;
		padding: 0.25rem 0.5rem;
		border-radius: 20px;
		font-size: 0.75rem;
		display: flex;
		align-items: center;
		gap: 0.25rem;
		z-index: 2;
	}

	.counter-icon {
		font-size: 0.875rem;
	}

	/* Property Overlay */
	.property-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0.1) 50%,
			rgba(0, 0, 0, 0.8) 100%
		);
		opacity: 0;
		transition: opacity 0.3s ease;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 1.5rem;
		color: white;
	}

	.property-image-container:hover .property-overlay {
		opacity: 1;
	}

	.overlay-content .property-title {
		margin: 0 0 1rem 0;
		font-size: 1.25rem;
		font-weight: 600;
	}

	.overlay-content .property-title a {
		color: white;
		text-decoration: none;
	}

	.property-info {
		margin-bottom: 1rem;
	}

	.property-info > div {
		margin-bottom: 0.5rem;
	}

	.property-info span {
		font-size: 0.875rem;
	}

	.price-value,
	.area-value,
	.rooms-value {
		font-weight: 600;
		margin-left: 0.5rem;
	}

	.property-location {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		margin-top: 0.5rem;
	}

	.property-actions {
		display: flex;
		gap: 0.5rem;
		flex-wrap: wrap;
	}

	/* Property Hover Effects */
	.property-hover-effects {
		position: absolute;
		top: 12px;
		left: 12px;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		opacity: 0;
		transition: opacity 0.3s ease;
		z-index: 3;
	}

	.property-image-container:hover .property-hover-effects {
		opacity: 1;
	}

	.property-hover-effects button {
		background: rgba(255, 255, 255, 0.9);
		border: none;
		border-radius: 50%;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.2s ease;
		backdrop-filter: blur(10px);
	}

	.property-hover-effects button:hover {
		background: white;
		transform: scale(1.1);
	}

	.btn-gallery-hover {
		position: relative;
	}

	.image-count {
		position: absolute;
		top: -4px;
		right: -4px;
		background: var(--propstack-primary);
		color: white;
		border-radius: 50%;
		width: 18px;
		height: 18px;
		font-size: 0.75rem;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}

	/* Property Status & Type Badges */
	.property-status-badge,
	.property-type-badge {
		position: absolute;
		top: 12px;
		padding: 0.25rem 0.75rem;
		border-radius: 20px;
		font-size: 0.75rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		z-index: 2;
	}

	.property-status-badge {
		left: 12px;
		background: var(--propstack-primary);
		color: white;
	}

	.property-type-badge {
		right: 12px;
		background: rgba(255, 255, 255, 0.9);
		color: var(--propstack-text);
	}

	.property-status-badge.status-verkauf {
		background: #e74c3c;
	}

	.property-status-badge.status-vermietung {
		background: #3498db;
	}

	.property-status-badge.status-verkauft {
		background: #95a5a6;
	}

	.property-status-badge.status-vermietet {
		background: #95a5a6;
	}

	/* Property Info Footer */
	.property-info-footer {
		padding: 1.5rem;
	}

	.property-info-footer .property-title {
		margin: 0 0 1rem 0;
		font-size: 1.25rem;
		font-weight: 600;
	}

	.property-info-footer .property-title a {
		color: var(--propstack-text);
		text-decoration: none;
	}

	.property-info-footer .property-title a:hover {
		color: var(--propstack-primary);
	}

	.property-details {
		margin-bottom: 1rem;
	}

	.propstack-gallery-main .property-price {
		font-size: 1.25rem;
		font-weight: 700;
		color: var(--propstack-primary);
		margin-bottom: 0.5rem;
	}

	.property-meta {
		display: flex;
		gap: 1rem;
		margin-bottom: 0.5rem;
		color: var(--propstack-text-muted);
		font-size: 0.875rem;
	}

	.property-info-footer .property-location {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		color: var(--propstack-text-muted);
		font-size: 0.875rem;
	}

	.property-actions-footer {
		margin-top: 1rem;
	}

	/* ==========================================================================
	   Gallery Preview Modal
	   ========================================================================== */

	.propstack-gallery-preview-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10000;
		background: rgba(0, 0, 0, 0.9);
	}

	.preview-backdrop {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		cursor: pointer;
	}

	.preview-container {
		position: relative;
		width: 90%;
		max-width: 1200px;
		height: 90%;
		margin: 5vh auto;
		background: white;
		border-radius: 12px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.preview-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem 2rem;
		background: var(--propstack-background);
		border-bottom: 1px solid var(--propstack-border);
	}

	.preview-title {
		margin: 0;
		font-size: 1.25rem;
		color: var(--propstack-text);
	}

	.btn-close-preview {
		background: none;
		border: none;
		font-size: 1.5rem;
		cursor: pointer;
		color: var(--propstack-text-muted);
		transition: color 0.2s ease;
	}

	.btn-close-preview:hover {
		color: var(--propstack-text);
	}

	.preview-content {
		flex: 1;
		position: relative;
		overflow: hidden;
	}

	.preview-loading {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		color: var(--propstack-text-muted);
	}

	.loading-spinner {
		width: 40px;
		height: 40px;
		border: 3px solid var(--propstack-border);
		border-top: 3px solid var(--propstack-primary);
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin: 0 auto 1rem;
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.preview-gallery-container {
		width: 100%;
		height: 100%;
	}

	.preview-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem 2rem;
		background: var(--propstack-background);
		border-top: 1px solid var(--propstack-border);
	}

	/* ==========================================================================
	   No Images Placeholder
	   ========================================================================== */

	.propstack-no-images {
		text-align: center;
		padding: 4rem 2rem;
		color: var(--propstack-text-muted);
		background: var(--propstack-background-alt);
		border-radius: 12px;
	}

	.no-images-icon {
		font-size: 4rem;
		margin-bottom: 1rem;
		opacity: 0.5;
	}

	.propstack-no-images h4 {
		margin: 0 0 1rem 0;
		font-size: 1.25rem;
		color: var(--propstack-text);
	}

	.propstack-no-images p {
		margin: 0;
		font-size: 0.875rem;
	}

	/* ==========================================================================
	   Zoom Functionality
	   ========================================================================== */

	.zoom-container {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.9);
		z-index: 100;
		cursor: move;
		overflow: hidden;
	}

	.zoom-image {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: none;
		max-height: none;
		transition: transform 0.2s ease;
		cursor: move;
	}

	/* ==========================================================================
	   Responsive Design
	   ========================================================================== */

	@media (max-width: 768px) {
		.propstack-property-gallery {
			margin: 1rem 0;
		}

		.propstack-gallery-main .swiper {
			border-radius: 8px 8px 0 0;
		}

		.gallery-image-overlay {
			padding: 1rem;
		}

		.image-title {
			font-size: 1.125rem;
		}

		.gallery-counter {
			top: 15px;
			right: 15px;
			padding: 0.375rem 0.75rem;
			font-size: 0.8125rem;
			height: fit-content;
		}

		.gallery-controls {
			padding: 0.75rem;
			flex-wrap: wrap;
			gap: 0.5rem;
		}

		.controls-center {
			order: -1;
			width: 100%;
			padding: 0 0 0.5rem 0;
		}

		.lightbox-header,
		.lightbox-footer {
			padding: 1rem;
		}

		.lightbox-content {
			padding: 1rem;
		}

		.lightbox-nav {
			width: 50px;
			height: 50px;
		}

		.lightbox-prev {
			left: 1rem;
		}

		.lightbox-next {
			right: 1rem;
		}

		.propstack-gallery-grid {
			padding: 1rem;
		}

		.grid-container {
			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
			gap: 0.75rem;
		}

		.preview-container {
			width: 95%;
			height: 95%;
			margin: 2.5vh auto;
		}

		.preview-header,
		.preview-footer {
			padding: 1rem;
		}
	}

	@media (max-width: 480px) {
		.propstack-gallery-thumbs .swiper {
			height: 60px;
		}

		.thumb-navigation {
			display: none !important;
		}

		.gallery-controls {
			justify-content: center;
		}

		.controls-left,
		.controls-right {
			flex: 1;
			justify-content: center;
		}

		.current-image-info {
			display: none;
		}

		.property-overlay {
			padding: 1rem;
		}

		.overlay-content .property-title {
			font-size: 1.125rem;
		}

		.property-actions {
			flex-direction: column;
		}

		.btn {
			width: 100%;
			justify-content: center;
		}
	}


	/* ==========================================================================
	   Print Styles
	   ========================================================================== */

	@media print {
		.propstack-property-gallery {
			break-inside: avoid;
			box-shadow: none;
			border: 1px solid #ddd;
		}

		.gallery-image-overlay,
		.gallery-controls,
		.propstack-gallery-thumbs,
		.gallery-counter,
		.swiper-pagination,
		.swiper-button-next,
		.swiper-button-prev {
			display: none !important;
		}

		.gallery-main-image {
			max-height: 400px;
			object-fit: contain;
		}
	}
}