/* amg-subscriptions: інлайновий календар власної дати (PDP + кабінет).
 * Живе поруч з intake.css і account.css, тому токени беремо з ЧУЖОГО шару з
 * фолбеками: на PDP оголошені --amgs-*, у кабінеті --state/--ink/--line-strong,
 * а в дровері/попапі теми може не бути жодних.
 * --amgs-state — синій стан вибору #1c49c2 (24.08; історично тут був фіолет під іменем amber).
 * ⛔ Усі селектори кнопок — з подвоєним скоупом: «GLOBAL BUTTON DESIGN SYSTEM»
 * дитячої теми XTS роздає button свій вигляд (44px, бордер, width:100%) і при
 * рівній специфічності виграє порядком каскаду. */

.amgsubs-cal {
	--cal-accent: var(--amgs-state, var(--state, #1c49c2));
	--cal-soft: var(--amgs-state-wash, var(--state-wash, #f0f6fc));
	--cal-deep: var(--amgs-state-deep, var(--state-deep, #143795));
	--cal-line: var(--amgs-line, var(--line-strong, #d4d4d4));
	--cal-ink: var(--amgs-ink, var(--ink, #190a03));
	--cal-gray: var(--amgs-gray, var(--gray-500, #6b7280));
	/* Розкриття тією ж механікою, що .amgsubs-plandetail: шелл тягне grid-rows
	 * 0fr→1fr, внутрішній шар кліпає. Height:auto так не анімується. */
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	width: 100%;
	max-width: 100%;
	align-self: stretch;
	margin-top: 8px;
	background: #ffffff;
	border: 1px solid #d9e6f4;
	border-radius: 12px;
	transition: grid-template-rows .3s cubic-bezier(.2, .7, .3, 1), opacity .22s ease-out;
}
.amgsubs-cal.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
}
.amgsubs-cal-in {
	overflow: hidden;
	min-height: 0;
}
.amgsubs-cal[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
	.amgsubs-cal { transition: none !important; }
}
.amgsubs-cal-pad {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
}

/* Швидкі відповіді над сіткою: «Найраніше, 27 серп» і «За частотою».
 * Довільних дат-чипів не робимо: список виправданий до ~10 варіантів, у нас 174. */
.amgsubs-cal-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.amgsubs-cal .amgsubs-cal-quick-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 32px;
	margin: 0;
	padding: 5px 12px;
	position: relative;
	background: #ffffff;
	border: 1px solid var(--cal-line);
	border-radius: 99px;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--cal-ink);
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
/* Зона тапу доростає до 44px невидимим псевдоелементом — той самий прийом,
 * що в чипів частоти (intake.css): пігулка лишається низькою, палець влучає. */
.amgsubs-cal .amgsubs-cal-quick-btn::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 44px;
	transform: translateY(-50%);
}
.amgsubs-cal .amgsubs-cal-quick-btn:hover {
	background: var(--cal-soft);
	border-color: var(--cal-accent);
	color: var(--cal-ink);
}
.amgsubs-cal .amgsubs-cal-quick-btn:focus-visible {
	outline: 2px solid var(--cal-deep);
	outline-offset: 2px;
}

/* Шапка: стрілки 44×44 по краях, назва місяця по центру */
.amgsubs-cal-head {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
}
.amgsubs-cal-title {
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--cal-ink);
}
.amgsubs-cal .amgsubs-cal-nav {
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	color: var(--cal-ink);
	cursor: pointer;
}
.amgsubs-cal .amgsubs-cal-nav svg { display: block; }
.amgsubs-cal .amgsubs-cal-nav:hover { background: var(--cal-soft); color: var(--cal-ink); }
.amgsubs-cal .amgsubs-cal-nav:focus-visible {
	outline: 2px solid var(--cal-deep);
	outline-offset: 2px;
}
.amgsubs-cal .amgsubs-cal-nav[disabled] {
	color: var(--cal-gray);
	opacity: .4;
	cursor: default;
	background: none;
}

.amgsubs-cal-dow {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	font-size: 11px;
	line-height: 1.2;
	color: var(--cal-gray);
	text-align: center;
}
.amgsubs-cal-grid [role="row"] {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.amgsubs-cal-grid [role="row"] + [role="row"] { margin-top: 4px; }
/* Мобілка 390: віджет 374 → 12×2 падінги + 6×4 гепи = клітинка ≈46px.
 * Без внутрішніх скролів: сітка цілком вміщається в рядок віджета. */
.amgsubs-cal .amgsubs-cal-day {
	min-height: 44px;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	border-radius: 10px;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--cal-ink);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background .12s, color .12s;
}
.amgsubs-cal .amgsubs-cal-day:hover:not([disabled]) {
	background: var(--cal-soft);
	color: var(--cal-ink);
}
/* І :focus теж: панель відкривається кліком, а фокус ми одразу ставимо в
 * сітку — без цього людина не бачить, звідки поїдуть стрілки. */
.amgsubs-cal .amgsubs-cal-day:focus,
.amgsubs-cal .amgsubs-cal-day:focus-visible {
	outline: 2px solid var(--cal-deep);
	outline-offset: 2px;
}
/* Сьогодні ≠ обране: обведення проти заливки (інакше людина плутає їх щоразу). */
.amgsubs-cal .amgsubs-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--cal-accent); }
/* ⚠️ Білим по синьому свідомо: ink на #1c49c2 ≈2,6:1 (провал AA), #fff = 7,6:1. */
.amgsubs-cal .amgsubs-cal-day.is-sel,
.amgsubs-cal .amgsubs-cal-day.is-sel:hover {
	background: var(--cal-accent);
	color: #ffffff;
}
.amgsubs-cal .amgsubs-cal-day[disabled] {
	color: var(--cal-gray);
	opacity: .45;
	cursor: default;
	background: none;
}
.amgsubs-cal .amgsubs-cal-day.is-out { opacity: .25; }

/* Телефон: віджет 374px мінус падінги картки лишає під сітку ~346px, тож
 * підтискаємо падінги й гепи — клітинка виходить ≈44px, як тап-таргет. */
@media (max-width: 479px) {
	.amgsubs-cal-pad { padding: 10px 8px; gap: 8px; }
	.amgsubs-cal-dow,
	.amgsubs-cal-grid [role="row"] { gap: 3px; }
	.amgsubs-cal-grid [role="row"] + [role="row"] { margin-top: 3px; }
	.amgsubs-cal .amgsubs-cal-day { border-radius: 9px; }
}

.amgsubs-cal-hint {
	margin: 0;
	font-size: 12px;
	line-height: 1.35;
	color: var(--cal-gray);
}
.amgsubs-cal .amgsubs-datemsg {
	margin: 0;
	font-size: 12px;
	line-height: 1.35;
	color: var(--cal-ink);
}
.amgsubs-cal [hidden] { display: none !important; }

/* --- пігулка з обраною датою (замість нативного інпута) ------------------
 * Той самий вигляд, що був у пігулки-лейбла, але це кнопка-тогл панелі:
 * скоуп подвоєний і на PDP (.amgsubs-ownrow), і в кабінеті (.amgsubs-acc). */
.amgsubs-ownrow .amgsubs-datepill.amgsubs-datepill,
.amgsubs-acc .amgsubs-acc-daterow .amgsubs-datepill.amgsubs-datepill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	position: relative;
	min-height: 32px;
	margin: 0;
	padding: 4px 10px;
	background: #ffffff;
	border: 1px solid var(--amgs-line, var(--line-strong, #d4d4d4));
	border-radius: 99px;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--amgs-ink, var(--ink, #190a03));
	cursor: pointer;
}
.amgsubs-ownrow .amgsubs-datepill.amgsubs-datepill::before,
.amgsubs-acc .amgsubs-acc-daterow .amgsubs-datepill.amgsubs-datepill::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 44px;
	transform: translateY(-50%);
}
.amgsubs-ownrow .amgsubs-datepill.amgsubs-datepill:focus-visible,
.amgsubs-acc .amgsubs-acc-daterow .amgsubs-datepill.amgsubs-datepill:focus-visible {
	outline: 2px solid var(--amgs-state-deep, var(--state-deep, #143795));
	outline-offset: 2px;
}
/* Підпис для зчитувача. Копія .amgsubs-sr з intake.css: у кабінеті свого
 * такого класу немає, а пігулка там та сама. */
.amgsubs-datepill .amgsubs-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.amgsubs-datepill-ico {
	display: inline-flex;
	align-items: center;
	color: var(--amgs-state-deep, var(--state-deep, #143795));
}
.amgsubs-datepill-ico svg { display: block; }
.amgsubs-datepill-lab { white-space: nowrap; }

/* Обрана дата фарбує пігулку — як активний чип частоти поруч.
 * На PDP клас is-custom вішає paintDate (intake.js); у кабінеті дата є завжди. */
.amgsubs-when.is-custom .amgsubs-ownrow .amgsubs-datepill.amgsubs-datepill,
.amgsubs-acc .amgsubs-acc-daterow .amgsubs-datepill.amgsubs-datepill {
	background: var(--amgs-state-wash, var(--state-wash, #f0f6fc));
	border-color: var(--amgs-state, var(--state, #1c49c2));
}
/* Кабінет: пігулка займає місце колишнього поля в сітці рядка ±7. */
.amgsubs-acc .amgsubs-acc-daterow .amgsubs-datepill.amgsubs-datepill {
	grid-column: 1 / -1;
	order: -1;
	justify-content: center;
	min-height: 44px;
	padding: 9px 14px;
	font-size: 14px;
}
.amgsubs-acc .amgsubs-cal { margin-top: 10px; }
@media (min-width: 768px) {
	.amgsubs-acc .amgsubs-acc-daterow .amgsubs-datepill.amgsubs-datepill {
		order: 0;
		flex: 0 0 auto;
		width: auto;
		min-width: 170px;
	}
	/* Панель ширша за рядок кнопок, але не ширша за картку плану. */
	.amgsubs-acc .amgsubs-cal { max-width: 360px; }
}