/*
 * Panourile din antet: „Contact” (desktop și tabletă) și „Contul meu” (`parts/header.php`). Butoanele sunt unelte obișnuite
 * (`gt-header__tool`); aici doar panoul. Foaie separată, încărcată după `core.css` (`inc/assets.php`); închiderea la click în
 * afară o face `header-pop.js`.
 */

.gt-pop {
	position: relative;
}

.gt-pop > summary {
	list-style: none;
	cursor: pointer;
}

.gt-pop > summary::-webkit-details-marker {
	display: none;
}

.gt-pop__panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: var(--gt-z-mega);
	width: 320px;
	padding: 22px 22px 0;
	background: var(--gt-bg);
	border: 1px solid var(--gt-line);
	border-top: 2px solid var(--gt-gold);
	box-shadow: var(--gt-shadow-mega);
}

.gt-pop__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-top: 1px dotted var(--gt-line-dotted);
	color: var(--gt-ink);
}

.gt-pop__row .gt-icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--gt-gold-dark);
}

.gt-pop__row small {
	display: block;
	font: 600 10px / 1.3 var(--gt-font-sans);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gt-gold-dark);
}

.gt-pop__row b {
	font: 500 15px / 1.4 var(--gt-font-sans);
}

.gt-pop__row small + b {
	display: block;
}

.gt-pop__row .gt-badge {
	margin-left: auto;
}

.gt-pop__row:hover b,
.gt-pop__foot:hover {
	color: var(--gt-gold-dark);
}

.gt-pop__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 10px -22px 0;
	padding: 15px 22px;
	background: var(--gt-cream);
	border-top: 1px solid var(--gt-line);
	font: 600 11.5px var(--gt-font-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gt-ink);
}

.gt-pop__foot .gt-icon {
	width: 16px;
	height: 16px;
}

@media (max-width: 720px) {
	.gt-pop--contact {
		display: none;
	}
}

/* Pe telefon panoul contului ia lățimea ecranului, sub antet: lângă marginea dreaptă n-ar încăpea cei 320 px. */
@media (max-width: 720px) {
	.gt-pop__panel {
		position: fixed;
		top: var(--gt-header-h);
		right: var(--gt-container-pad);
		left: var(--gt-container-pad);
		width: auto;
	}
}