sup {
    color: red !important;
}

.form-errors {
    color: red !important;
    font-size: 13px !important;
    margin-top: .4rem !important;
    display: block !important;
}

.swal2-toast h2:where(.swal2-title) {
    margin: 0px 0px 3px 5px !important;
    font-size: 0.9rem !important;
    padding: 0px !important;
}

.swal2-toast {
    padding: 0.9rem !important;
}

.a-text-primary a {
    color: #0d6efd !important; /* Example primary text color */
}

.trip-list a {
    text-decoration: none !important;
    color: var(--muted) !important;
}

.trip-list a:hover {
    text-decoration: none !important;
    color: #2563eb !important;
}

.d-none {
    display: none !important;
}

.editor-content iframe {
    width: 100% !important;
    height: 606px !important;
}

.regions-simple {
    max-width: 900px !important;
    text-align: left !important;
}

.region-group {
    padding: 22px 10px 22px 0px !important
}

.region-group ul {
    padding-left: 1.5rem !important;
}

.region-group ul a {
    /*color: #0d6efd !important;*/
    font-size: 17px !important;
    text-decoration: none !important;
}

/* ===============================
   SEARCH TOGGLE BUTTON
================================= */
.search-toggle {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	padding: 6px;
}

.search-toggle svg {
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.search-toggle:hover svg {
	transform: scale(1.1);
	opacity: 0.8;
}

/* ===============================
   NAV CONTAINER (IMPORTANT)
================================= */
.nav {
	position: relative;
}

/* ===============================
   FULL WIDTH SEARCH DROPDOWN
================================= */
.search-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	padding: 20px 20px;

	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.76),
		rgba(0, 0, 0, 0.7)
	);

	backdrop-filter: blur(8px);
	box-shadow: 0 20px 50px rgba(0,0,0,0.5);
	z-index: 999;
	border-top: 1px solid rgba(255,255,255,0.08);
}

/* ===============================
   FORM LAYOUT
================================= */
.search-form {
	max-width: 1414px;
	margin: 0 auto;
}


/* ===============================
   INPUT + INSIDE BUTTON
================================= */
.search-field {
	position: relative;
	width: 100%;
}

.search-field input {
	width: 100%;
	padding: 18px 60px 18px 22px;
	border-radius: 50px;
	border: 1px solid rgba(255,255,255,0.25);
	background: rgba(255,255,255,0.08);
	color: #ffffff;
	font-size: 16px;
	outline: none;
	transition: all 0.25s ease;
}

.search-field input::placeholder {
	color: rgba(255,255,255,0.6);
}

.search-field input:focus {
	border-color: rgba(255,255,255,0.6);
	background: rgba(255,255,255,0.12);
	box-shadow: 0 0 0 4px rgba(255,255,255,0.08);
}


/* Button Inside Input */
.search-field button {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	height: 44px;
	width: 44px;
	border-radius: 50%;
	border: none;
	cursor: pointer;

	background: linear-gradient(
		135deg,
		#ffffff,
		#d1d5db
	);

	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.25s ease;
}

.search-field button:hover {
	transform: translateY(-50%) scale(1.05);
	box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}


/* ===============================
   DESKTOP / MOBILE VISIBILITY
================================= */
.mobile-search {
	display: none;
}

@media (max-width: 768px) {

	.desktop-search {
		display: none;
	}

	.mobile-search {
		display: flex;
	}

	.search-dropdown {
		padding: 16px 16px;
	}
}

/* ===============================
   SEARCH SUGGESTIONS
================================= */
.search-suggestions {
	max-width: 1414px;
	margin: 14px auto 0;
	border-top: 1px solid rgba(255,255,255,0.08);
}


/* Remove default list styling */
.search-suggestions ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}


/* Make suggestion link flex so text + icon align */
.search-suggestions a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-radius: 2rem;
	text-decoration: none;
	font-size: 15px;

	background: #ffffff;
	color: #111111;
	border: 1px solid #e5e5e5;

	transition: all 0.25s ease;
}


/* Arrow icon */
.arrow-icon {
	opacity: 0.6;
	transition: transform 0.25s ease, opacity 0.25s ease;
}


/* Hover animation */
.search-suggestions a:hover {
	background: #f5f5f5;
	border-color: #d4d4d4;
	box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.search-suggestions a:hover .arrow-icon {
	transform: translateX(6px);
	opacity: 1;
}

/* Optional: subtle animated appearance */
.search-suggestions li {
	opacity: 0;
	transform: translateY(6px);
	animation: fadeInUp 0.4s ease forwards;
}

.search-suggestions li:nth-child(1) { animation-delay: 0.05s; }
.search-suggestions li:nth-child(2) { animation-delay: 0.1s; }
.search-suggestions li:nth-child(3) { animation-delay: 0.15s; }

@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* ===============================
   MOBILE ADJUSTMENTS
================================= */
@media (max-width: 768px) {
	.search-suggestions {
		margin-top: 14px;
	}
}

.collections-grid {
	display: grid !important;
	gap: 24px !important;
}

.collections-grid--2 {
	grid-template-columns: repeat(2, 1fr) !important; /* like col-6 */
}

.collections-grid--3 {
	grid-template-columns: repeat(3, 1fr) !important; /* like col-4 */
}

.collections-grid--4 {
	grid-template-columns: repeat(4, 1fr) !important; /* like col-3 */
}

@media (max-width: 991px) {
	.collections-grid,
	.collections-grid--2,
	.collections-grid--3,
	.collections-grid--4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 576px) {
	.collections-grid,
	.collections-grid--2,
	.collections-grid--3,
	.collections-grid--4 {
		grid-template-columns: 1fr !important;
	}
}

/* Thumbnail hover hint */
.zoom-container {
    cursor: pointer;
}
.zoom-container img {
    transition: transform .2s ease, filter .2s ease;
}
.zoom-container:hover img {
    filter: brightness(0.88);
}
.zoom-hint {
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.zoom-container:hover .zoom-hint {
    opacity: 1;
}

/* Lightbox overlay */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    flex-direction: column;
}
.lightbox-overlay.open {
    display: flex;
}

/* Toolbar */
.lightbox-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: rgba(0,0,0,0.5);
    flex-shrink: 0;
}
.lightbox-hint-text {
    color: #ccc;
    font-size: 13px;
    transition: opacity .2s;
}
.lightbox-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.lightbox-close:hover {
    color: #f88;
}

/* Stage — scrollable area */
.lightbox-stage {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Zoom container inside lightbox */
.lightbox-zoom-container {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 6px;
}
.lightbox-zoom-container.zoomed {
    cursor: zoom-out;
}
.lightbox-zoom-container img {
    display: block;
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    transition: transform .15s ease;
    pointer-events: none;
    user-select: none;
}