/**
 * themes/advaithhomes_new/assets/css/common_utils.css
 * Styles for common_utils.js components
 */

/* ==========================================
   ALERT NOTIFICATIONS
   ========================================== */
.adn-alert {
	position: fixed;
	top: 20px;
	right: 20px;
	max-width: 400px;
	padding: 16px 20px;
	border-radius: var(--radius-tag);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 9999;
	opacity: 0;
	transform: translateX(400px);
	transition: all 0.3s ease;
	font-size: 14px;
	line-height: 1.5;
}

.adn-alert--visible {
	opacity: 1;
	transform: translateX(0);
}

.adn-alert__content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-3);
}

.adn-alert__message {
	flex: 1;
}

.adn-alert__close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: inherit;
	opacity: 0.7;
	padding: 0;
	line-height: 1;
	transition: opacity 0.2s;
}

.adn-alert__close:hover {
	opacity: 1;
}

/* Alert types */
.adn-alert-success {
	background-color: var(--color-success-bg);
	color: var(--color-success-text);
	border-left: 4px solid var(--color-success);
}

.adn-alert-error {
	background-color: var(--color-error-bg);
	color: var(--color-error-text);
	border-left: 4px solid var(--color-danger);
}

.adn-alert-warning {
	background-color: var(--color-warning-bg);
	color: var(--color-warning-text);
	border-left: 4px solid var(--color-warning);
}

.adn-alert-info {
	background-color: var(--color-info-bg);
	color: var(--color-info-dark);
	border-left: 4px solid var(--color-info);
}

/* Mobile responsive */
@media (max-width: 640px) {
	.adn-alert {
		right: 10px;
		left: 10px;
		max-width: none;
		transform: translateY(-100px);
	}

	.adn-alert--visible {
		transform: translateY(0);
	}
}

/* ==========================================
   MODAL DIALOGS
   ========================================== */
.adn-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9998;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.adn-modal--visible {
	opacity: 1;
}

.adn-modal__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
}

.adn-modal__content {
	position: relative;
	background: white;
	border-radius: var(--radius-sm);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	max-height: 90vh;
	overflow-y: auto;
	animation: slideUp 0.3s ease;
}

@keyframes slideUp {
	from {
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Size variants */
.adn-modal--small .adn-modal__content {
	max-width: 400px;
	width: 90vw;
}

.adn-modal--medium .adn-modal__content {
	max-width: 600px;
	width: 90vw;
}

.adn-modal--large .adn-modal__content {
	max-width: 800px;
	width: 90vw;
}

.adn-modal__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 24px 16px;
	border-bottom: 1px solid var(--color-border);
}

.adn-modal__title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.adn-modal__close {
	background: none;
	border: none;
	font-size: 28px;
	cursor: pointer;
	color: var(--color-black);
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-xs);
	transition: all 0.2s;
	flex-shrink: 0;
}

.adn-modal__close:hover {
	background-color: var(--color-surface);
	color: var(--color-black);
}

.adn-modal__body {
	padding: var(--space-6);
	color: var(--color-text);
	line-height: 1.6;
}

.adn-modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-3);
	padding: 16px 24px 24px;
	border-top: 1px solid var(--color-border);
}

.adn-modal__footer .btn {
	min-width: 100px;
}

/* Mobile responsive */
@media (max-width: 640px) {
	.adn-modal--small .adn-modal__content,
	.adn-modal--medium .adn-modal__content,
	.adn-modal--large .adn-modal__content {
		max-width: 100%;
		width: 95vw;
		max-height: 95vh;
	}

	.adn-modal__header {
		padding: var(--space-4);
	}

	.adn-modal__body {
		padding: var(--space-4);
	}

	.adn-modal__footer {
		padding: 12px 16px 16px;
		flex-direction: column;
	}

	.adn-modal__footer .btn {
		width: 100%;
	}
}

/* ==========================================
   LOADER / SPINNER
   ========================================== */
.adn-loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	gap: var(--space-4);
}

.adn-loader__spinner {
	width: 40px;
	height: 40px;
	border: 4px solid var(--color-border);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.adn-loader__text {
	margin: 0;
	color: var(--color-black);
	font-size: 14px;
	font-weight: 500;
}

/* ==========================================
   FORM ERRORS
   ========================================== */
.adn-form-error {
	background-color: var(--color-error-bg);
	color: var(--color-error-text);
	padding: 12px 16px;
	border-radius: var(--radius-xs);
	border-left: 4px solid var(--color-danger);
	margin: 16px 0;
	font-size: 14px;
	line-height: 1.5;
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */
@media (prefers-reduced-motion: reduce) {
	.adn-alert,
	.adn-modal,
	.adn-modal__content,
	.adn-loader__spinner {
		animation: none !important;
		transition: none !important;
	}

	.adn-alert {
		opacity: 1;
		transform: none;
	}

	.adn-modal--visible {
		opacity: 1;
	}
}

/* Focus styles for keyboard navigation */
.adn-alert__close:focus-visible,
.adn-modal__close:focus-visible,
.adn-modal__footer .btn:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* ── Full Screen Dialog ──────────────────────────────────────── */
.adn-fsd {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

.adn-fsd--open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: all;
}

/* Top bar */
.adn-fsd__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 48px;
	padding: 0 16px;
	background: var(--color-primary, #1d4ed8);
	color: var(--color-white);
	flex-shrink: 0;
	gap: var(--space-3);
}

.adn-fsd__title {
	font-size: 0.95rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.adn-fsd__close {
	width: 32px;
	height: 32px;
	border: none;
	background: rgba(255,255,255,0.15);
	color: var(--color-white);
	border-radius: var(--radius-tag);
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	flex-shrink: 0;
	transition: background 0.15s;
}

.adn-fsd__close:hover { background: rgba(255,255,255,0.28); }

/* Loading spinner */
.adn-fsd__spinner {
	position: absolute;
	inset: 48px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: var(--slate-50);
	z-index: 1;
}

.adn-fsd__spin-ring {
	width: 40px;
	height: 40px;
	border: 3px solid #e5e7eb;
	border-top-color: var(--color-primary, #1d4ed8);
	border-radius: 50%;
	animation: adn-fsd-spin 0.7s linear infinite;
}

@keyframes adn-fsd-spin { to { transform: rotate(360deg); } }

.adn-fsd__spin-label {
	font-size: 0.85rem;
	color: var(--color-black);
}

/* iframe */
.adn-fsd__frame {
	flex: 1;
	width: 100%;
	border: none;
	display: block;
}

/* ==========================================
   PAGE LOADER
   ========================================== */
.adn-page-loader {
	position: fixed;
	inset: 0;
	background: #fff;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.4s ease;
}
.adn-page-loader.adn-loader-done {
	opacity: 0;
	pointer-events: none;
}
.adn-loader-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.adn-loader-logo {
	height: 48px;
	width: auto;
	animation: adn-loader-pulse 1.6s ease-in-out infinite;
}
.adn-loader-bar-track {
	width: 160px;
	height: 3px;
	background: var(--color-border, #e5e7eb);
	border-radius: 99px;
	overflow: hidden;
}
.adn-loader-bar {
	height: 100%;
	width: 40%;
	background: var(--color-primary, #1d4ed8);
	border-radius: 99px;
	animation: adn-loader-slide 1.2s ease-in-out infinite;
}
@keyframes adn-loader-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.5; }
}
@keyframes adn-loader-slide {
	0%   { transform: translateX(-100%); }
	50%  { transform: translateX(150%); }
	100% { transform: translateX(300%); }
}

/* ==========================================
   404 PAGE SEARCH FORM
   ========================================== */
.adn-404-search-field-wrap {
	display: flex;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
}
.adn-404-search-input {
	flex: 1;
	padding: 11px 14px;
	border: 1px solid var(--color-border, #e5e7eb);
	border-right: none;
	border-radius: var(--radius-sm, 8px) 0 0 var(--radius-sm, 8px);
	font-size: 0.95rem;
	outline: none;
	background: var(--color-bg, #f9fafb);
}
.adn-404-search-btn {
	background: var(--color-primary, #1d4ed8);
	color: #fff;
	border: none;
	padding: 11px 16px;
	border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: filter 0.2s;
}
.adn-404-search-btn:hover { filter: brightness(0.9); }
.adn-404-search-btn svg { color: #fff; stroke: #fff; }

/* ==========================================
   MOBILE: PAGE SECTION TITLE 100% WIDTH
   ========================================== */
@media (max-width: 768px) {
	.page-hero-title,
	.hero-title,
	.ph-title,
	.section-title,
	h1.gpg-name {
		width: 100%;
		word-break: break-word;
		overflow-wrap: break-word;
	}
}

/* ==========================================
   HERO BANNER: DIM BACKGROUND IMAGE
   ========================================== */
/* .phb-bg img {
	filter: brightness(0.62);
} */

/* ==========================================
   HOME HERO: RESTRICT DESC SIZE ON MOBILE
   ========================================== */
@media (max-width: 768px) {
	.hero-desc {
		font-size: 0.95rem;
		line-height: 1.3;
		display: -webkit-box;
		/* -webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden; */
	}
	.phb-bg img{
filter: brightness(0.92);
	}
}

/* ==========================================
   HOME CIRCLE ICONS: PREVENT OVERFLOW
   ========================================== */
.hero-visual svg,
.hero-visual circle,
.hero-home-diagram {
	overflow: hidden;
}
.phb-circle {
	overflow: hidden;
}

/* ==========================================
   SIDEBAR MOBILE: HORIZONTAL SCROLL
   ========================================== */
@media (max-width: 900px) {
	.guides-sidebar,
	.article-sidebar {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 12px;
		padding-bottom: 12px;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
	}
	.guides-sidebar > *,
	.article-sidebar > * {
		min-width: 240px;
		flex-shrink: 0;
		scroll-snap-align: start;
	}
}

/* ==========================================
   CATEGORY RESOURCES: MOBILE LINK FIT
   ========================================== */
@media (max-width: 600px) {
	.res-grid {
		grid-template-columns: 1fr !important;
	}
	.res-card {
		min-width: 0;
		width: 100%;
		flex-wrap: wrap;
	}
	.res-card-title {
		word-break: break-word;
		overflow-wrap: break-word;
	}
}

/* ==========================================
   SEARCH PAGE: MOBILE LAYOUT FIX
   ========================================== */
@media (max-width: 900px) {
	.search-results-layout {
		display: flex !important;
		flex-direction: column !important;
		gap: 24px;
	}
	.search-main {
		width: 100%;
		min-width: 0;
	}
	.search-refine-bar {
		flex-wrap: wrap;
		gap: 8px;
	}
	.search-refine-form {
		width: 100%;
		flex-wrap: wrap;
		gap: 8px;
	}
	.search-refine-input {
		min-width: 0;
		flex: 1;
	}
	.guides-grid.search-results-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ── Pre-header announcement bar ───────────────────────────────── */
.adn-preheader {
    width: 100%;
    overflow: hidden;
    background: var(--color-primary, #1d4ed8);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    position: relative;
    z-index: 1000;
}
body.nav-open .adn-preheader
,body.nav-open .short-news-ticker {
    display: none !important;
}

.adn-preheader-text {
    display: inline-block;
    padding: 0 24px;
    white-space: nowrap;
}

/* Marquee mode: activated by JS when text overflows viewport */
.adn-preheader.is-marquee .adn-preheader-text {
    animation: adn-preheader-scroll 18s linear infinite;
    padding: 0 48px;
}

@keyframes adn-preheader-scroll {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}

/* Mobile: always scroll, regardless of overflow */
@media (max-width: 768px) {
    .adn-preheader { justify-content: flex-start; }
    .adn-preheader-text {
        animation: adn-preheader-scroll 16s linear infinite;
        padding: 0 48px;
    }
}