/* Arabicaward RAG — header trigger + modal search + answer styling. */

/* ---- Compact header trigger (replaces the inline search box) ---- */
.aw-rag-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: inherit;
	font: 600 15px 'Cairo', system-ui, sans-serif;
	padding: 8px 12px;
	border-radius: 999px;
	line-height: 1;
	white-space: nowrap;
}
.aw-rag-trigger:hover { opacity: .75; }
.aw-rag-trigger svg { flex: 0 0 auto; }

/* icon-only variant (round button matching the header icons) */
.aw-rag-trigger--icon {
	width: 44px;
	height: 44px;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.12);
}
.aw-rag-trigger--icon:hover { background: rgba(255,255,255,.22); opacity: 1; }

/* ---- Account dropdown (Register + Login combined) ---- */
.aw-account { position: relative; display: inline-block; }
.aw-account__toggle { cursor: pointer; }
.aw-account__caret { font-size: 12px; margin-inline-start: 4px; }
.aw-account__menu {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-end: 0;
	min-width: 180px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 34px rgba(0,0,0,.18);
	padding: 6px;
	display: none;
	z-index: 9999;
}
.aw-account:hover .aw-account__menu,
.aw-account:focus-within .aw-account__menu { display: block; }
.aw-account__menu a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 12px;
	color: #2a2a2a;
	text-decoration: none;
	border-radius: 8px;
	white-space: nowrap;
	font-size: 14px;
}
.aw-account__menu a:hover { background: #f4eede; color: #8D6828; }

/* ---- Compact language toggle ---- */
.aw-lang-toggle { text-transform: uppercase; font-weight: 700; letter-spacing: .5px; }

/* ---- Uniform circular header icon buttons (search, accessibility, AR, account) ---- *
 * Shape only — the theme keeps its own background/colour (glass on hero, solid on sticky). */
.my-header-buttons a.custom-btn.icon,
.my-header-buttons .aw-lang-toggle,
.my-header-buttons .aw-account__toggle,
.my-header-buttons #searchfield-container .aw-rag-trigger {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	line-height: 1 !important;
	font-weight: 700;
	box-sizing: border-box;
}
.my-header-buttons #searchfield-container,
.my-header-buttons .aw-account { display: inline-flex; align-items: center; }
/* keep the <button> icons (search, account) matching the <a> icons on the sticky header */
header.sticky .my-header-buttons button { background-color: #f1f2f5 !important; color: var(--font-dark-color) !important; }

/* unify hover — apply the language switcher's hover (grey bg + shadow + dark icon) to ALL circle buttons */
.my-header-buttons a.custom-btn.icon:hover,
.my-header-buttons .aw-lang-toggle:hover,
.my-header-buttons .aw-account__toggle:hover,
.my-header-buttons #searchfield-container .aw-rag-trigger:hover {
	background-color: #d3d3d3 !important;
	box-shadow: 0 5px 9px -3px #00000040 !important;
	color: #000 !important;
	opacity: 1 !important;
}
.my-header-buttons a.custom-btn.icon:hover img { filter: brightness(0); }

/* ---- Dropdown hover bridge: fill the gap so the menu doesn't vanish
 * when the mouse slides from the icon down to Login/Register. ---- */
.aw-account__menu::before {
	content: "";
	position: absolute;
	top: -12px;
	inset-inline-start: 0;
	inset-inline-end: 0;
	height: 12px;
}

/* ---- Modal ---- */
.aw-rag-modal[hidden] { display: none; }
.aw-rag-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 8vh 16px 16px;
}
.aw-rag-modal__backdrop {
	position: fixed;
	inset: 0;
	height: 100vh;
	height: 100dvh;
	background: rgba(20,16,10,.6);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.aw-rag-modal__panel {
	position: relative;
	z-index: 1;
	width: min(760px, 100%);
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 70px rgba(0,0,0,.35);
	padding: 26px 28px 30px;
	font-family: 'Cairo', system-ui, sans-serif;
	animation: aw-rag-pop .18s ease-out;
}
@keyframes aw-rag-pop { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.aw-rag-modal[dir="rtl"] .aw-rag-modal__panel { text-align: right; }
.aw-rag-modal[dir="ltr"] .aw-rag-modal__panel { text-align: left; }

.aw-rag-modal__close {
	position: absolute;
	top: 14px;
	inset-inline-end: 16px;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	color: #8a8578;
}
.aw-rag-modal__close:hover { color: #2a2a2a; }

.aw-rag-modal__head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding-inline-end: 28px; }
.aw-rag-modal__spark { color: #b6935a; font-size: 20px; }
.aw-rag-modal__title { margin: 0; font-size: 19px; font-weight: 800; color: #2a2a2a; }

.aw-rag-modal__form { display: flex; gap: 10px; align-items: stretch; }
.aw-rag-modal__inputwrap {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 2px solid #e6ddca;
	border-radius: 12px;
	padding: 0 14px;
	color: #b6935a;
	transition: border-color .15s, box-shadow .15s;
}
.aw-rag-modal__inputwrap:focus-within { border-color: #b6935a; box-shadow: 0 0 0 3px rgba(182,147,90,.15); }
.aw-rag-modal__input {
	width: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	padding: 15px 4px;
	font: 16px 'Cairo', system-ui, sans-serif;
	color: #2a2a2a;
}
.aw-rag-modal__input::placeholder { color: #9b917f; }
.aw-rag-modal__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	border: 0;
	cursor: pointer;
	background: #b6935a;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	border-radius: 12px;
	padding: 0 22px;
	font-family: 'Cairo', system-ui, sans-serif;
}
.aw-rag-modal__btn:disabled { opacity: .6; cursor: default; }

.aw-rag-modal__hint { margin-top: 14px; color: #8a8578; font-size: 14px; }

.aw-rag-modal__answer {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid #efe9dc;
	max-height: 50vh;
	overflow-y: auto;
	line-height: 1.75;
	color: #2a2a2a;
}
.aw-rag-modal__answer[hidden] { display: none; }

body.aw-rag-lock { overflow: hidden; }

/* ---- Answer content (shared) ---- */
.arabicaward-rag__loading { padding: 8px 0; color: #7a746a; font-style: italic; }
.arabicaward-rag__error   { padding: 8px 0; color: #b23; }
.arabicaward-rag__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.arabicaward-rag__badge { color: #b6935a; }
.arabicaward-rag__title { font-weight: 700; color: #8D6828; }
.arabicaward-rag__disc  { font-size: 12px; color: #a99e86; }
.arabicaward-rag__answer p { margin: 0 0 10px; }
.arabicaward-rag__answer p:last-child { margin-bottom: 0; }
.arabicaward-rag__sources { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e6ddca; }
.arabicaward-rag__sources-label { font-size: 12px; font-weight: 700; color: #8a8578; margin-bottom: 6px; }
.arabicaward-rag__source { display: block; font-size: 14px; color: #8D6828; text-decoration: none; padding: 2px 0; }
.arabicaward-rag__source:hover { text-decoration: underline; }

/* ---- Header desktop nav layout safeguard (kept; harmless with the real menu) ---- */
@media (min-width: 922px) {
	.ast-desktop ul.main-header-menu {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: flex-start;
		width: auto !important;
		max-width: none !important;
	}
	.ast-desktop ul.main-header-menu > li.menu-item {
		width: auto !important;
		max-width: none !important;
		flex: 0 0 auto !important;
		float: none !important;
		position: relative;
	}
}