/* Cashify Gold — logowanie i rejestracja (Figma: login 7219:5053, rejestracja 7230:4168).
 *
 * Style dla markupu już napisanego w woocommerce/myaccount/form-login.php (klasy
 * `cg-auth*`, `cg-field*`, `cg-input*`, `cg-check*`, `cg-btn*`, `cg-infobar--muted`).
 * Ładowany TYLKO na stronie Moje konto (gate `is_account_page()` w inc/moje-konto.php),
 * niezależnie od pages.css — świadomie SAMOWYSTARCZALNY (nie polega na `.cg-field` z
 * pages.css, które ma inne wartości dla Kontaktu), żeby zmiana jednego nie ruszała drugiego.
 * Wszystko pod przedrostkiem `.cg-auth`, żeby specyficzność zawsze wygrywała z pages.css
 * niezależnie od kolejności ładowania arkuszy (oba mają `array('cg-main')` jako zależność —
 * WordPress NIE gwarantuje kolejności między rodzeństwem o tej samej zależności).
 *
 * Wymiary/kolory zdjęte z Figmy przez MCP (get_design_context na konkretnych węzłach), nie
 * z oka: input 56px/pill/border black-20, label 12px, tytuł 32px/tracking -1.28px,
 * checkbox 24px/border gold/radius 4px, infobar zielony rgba(0,77,43,.1)/#004D2B.
 *
 * @package cashify-gold
 */

.cg-auth {
	padding-block: 64px 96px;
}

.cg-auth__cols {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 32px;
	flex-wrap: wrap;
}

.cg-auth__cols--single {
	justify-content: center;
}

.cg-auth__card {
	flex: 1 1 480px;
	max-width: 512px;
	width: 100%;
	padding: 32px;
	background: var(--cg-white);
	border: 1px solid var(--cg-black-10);
	border-radius: var(--cg-r-card);
	box-shadow: var(--cg-shadow-card);
}

.cg-auth__title {
	margin: 0 0 24px;
	font: var(--cg-fw-medium) 32px/1 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	color: var(--cg-black);
}

.cg-auth__form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ── Pola ──────────────────────────────────────────────────────────── */

.cg-auth .cg-field {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.cg-auth .cg-field__label {
	font: var(--cg-fw-medium) 12px/1 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	color: var(--cg-black);
}

.cg-auth .cg-field__req {
	color: #F44336;
}

.cg-auth .cg-input,
.cg-auth .cg-input-wrap {
	width: 100%;
}

.cg-auth .cg-input {
	appearance: none;
	-webkit-appearance: none;
	height: 56px;
	padding-inline: 20px;
	border: 1px solid var(--cg-black-20);
	border-radius: 56px;
	background: var(--cg-white);
	font: var(--cg-fw-medium) 14px/1 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	color: var(--cg-black);
}

.cg-auth .cg-input::placeholder {
	color: var(--cg-black-30);
}

.cg-auth .cg-input:focus {
	outline: none;
	border-color: var(--cg-gold);
}

.cg-auth .cg-input:invalid:not(:placeholder-shown) {
	border-color: #F44336;
}

.cg-auth .cg-input-wrap {
	position: relative;
}

.cg-auth .cg-input-wrap .cg-input {
	padding-right: 52px;
}

.cg-auth .cg-input-eye {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: var(--cg-black-30);
	cursor: pointer;
}

.cg-auth .cg-input-eye:hover,
.cg-auth .cg-input-eye.is-visible {
	color: var(--cg-text);
}

.cg-auth .cg-input-eye:focus-visible {
	outline: 2px solid var(--cg-gold);
	outline-offset: 2px;
	border-radius: 4px;
}

/* „Nie pamiętasz hasła? Zresetuj hasło" — cały ciąg to jeden link, tylko druga część
   wygląda jak CTA (Figma: prawa strona, pod polem hasła). */
.cg-auth__forgot {
	display: block;
	margin-top: 8px;
	text-align: right;
	font: 400 13px/1.4 var(--cg-font);
	color: var(--cg-black-30);
	text-decoration: none;
}

.cg-auth__forgot strong {
	font-weight: var(--cg-fw-medium);
	color: var(--cg-gold);
	text-decoration: underline;
}

.cg-auth__forgot:hover strong {
	color: var(--cg-gold-grad-from);
}

/* ── Checkboxy (Zapamiętaj mnie / zgody rejestracji) ──────────────────
   Figma: box 24px, border gold, tło gold-10%, radius 4px (NIE --cg-r-label=6px —
   węzeł 7230:4232 mierzy dokładnie 4px). Checkmark rysowany obramowaniem, bez SVG. */

.cg-auth .cg-check {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	cursor: pointer;
	font: 400 14px/1.56 var(--cg-font);
	letter-spacing: var(--cg-tracking-body);
	color: var(--cg-text);
}

.cg-auth .cg-check__box {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	margin: 0;
	border: 1px solid var(--cg-black-20);
	border-radius: 4px;
	background: var(--cg-white);
	position: relative;
	cursor: pointer;
}

.cg-auth .cg-check__box:checked {
	border-color: var(--cg-gold);
	background: var(--cg-gold-10);
}

.cg-auth .cg-check__box:checked::after {
	content: '';
	position: absolute;
	left: 8px;
	top: 3px;
	width: 6px;
	height: 11px;
	border: solid var(--cg-gold);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.cg-auth .cg-check__box:focus-visible {
	outline: 2px solid var(--cg-gold);
	outline-offset: 2px;
}

.cg-auth .cg-check a {
	color: var(--cg-gold);
	text-decoration: underline;
}

/* ── Przyciski ─────────────────────────────────────────────────────── */

.cg-auth .cg-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--cg-btn-h);
	border: 0;
	border-radius: var(--cg-r-pill);
	font: var(--cg-fw-medium) 16px/1 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	cursor: pointer;
	text-decoration: none;
}

.cg-auth .cg-btn--gold {
	background-image: var(--cg-gold-gradient);
	color: var(--cg-text);
}

.cg-auth .cg-btn--gold:hover {
	filter: brightness(1.06);
}

.cg-auth .cg-btn--gold:focus-visible {
	outline: 2px solid var(--cg-gold);
	outline-offset: 3px;
}

/* ── Info-paski ────────────────────────────────────────────────────── */

.cg-auth .cg-infobar {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	width: 100%;
	padding: 16px;
	border-radius: var(--cg-r-card);
	background: rgba(0, 77, 43, .1);
	color: #004D2B;
	font: 400 14px/1.5 var(--cg-font);
	letter-spacing: var(--cg-tracking-body);
}

/* Wariant „muted" — zastrzeżenie RODO pod checkboxami rejestracji, świadomie mniej
   wyraziste niż zielony info-pasek nad polami (Figma: ten sam kształt, przygaszony ton). */
.cg-auth .cg-infobar--muted {
	background: var(--cg-black-05);
	color: var(--cg-text);
	font-size: 12px;
}

.cg-auth__social-note {
	margin: 0;
	text-align: center;
	font-size: 13px;
	color: var(--cg-black-30);
}

/* ── Responsywność ─────────────────────────────────────────────────────────
   Uwaga „w Figmie brak widoku mobilnego" była nieaktualna: klatki są —
   logowanie 8026:5617 i rejestracja 8026:5821. Wartości poniżej pochodzą z nich. */
@media (max-width: 900px) {
	.cg-auth__cols {
		flex-direction: column;
		align-items: stretch;
	}
	.cg-auth__card {
		max-width: none;
	}
}

@media (max-width: 900px) {
	/* Figma 8026:5617: karta 358 z wyściółką 16 → wnętrze 326. Było 24 (wnętrze 308). */
	.cg-auth__card {
		padding: 16px;
	}
	/* Figma: pola co 16 px (pole 1 kończy się na 76, pole 2 zaczyna na 92). Było 24.
	   ⚠️ Rozstaw robi `gap` FORMULARZA, nie margines pola — margines dołożyłby się
	   do gapu zamiast go zastąpić. */
	.cg-auth__form {
		gap: 16px;
	}
	.cg-auth__title {
		font-size: 26px;
	}
}

/* MOB-100/101: stopki przełączania ekranów — tylko telefon (desktop ma obie
   kolumny obok siebie, stopka prowadziłaby do karty widocznej obok). */
.cg-auth__switch { display: none; }
@media (max-width: 900px) {
	.cg-auth__switch {
		display: block;
		margin: 24px 0 0;
		text-align: center;
		font-size: 14px;
		color: var(--cg-black-70, rgba(0, 0, 0, .7));
	}
	.cg-auth__switch a {
		color: var(--cg-gold, #C18C21);
		font-weight: var(--cg-fw-medium, 500);
	}
}