/* =================================================
   0. TOKENS & BRANDING
   ================================================= */
:root {
	--burgundy: #7a3b47;
	--burgundyD: #3d0e12;
	--paper: #fffaf7;
	--rose: #f4e7ea;
	--ink: #1b1b1b;
	--gold: #d4b483;

	--radius: 16px;
	--card-gap: 10px;
	--cart-gap: 10px;
	--thumb: 48px;
	--pad-x-right: 40px;
	--pad-x-left: 10px;
	--pad-y: 8px;
}

/* =================================================
   1. PREMIUM MOBILE MENU UI
   ================================================= */
/* Bezpieczne czyszczenie rzymskiej ramki z kropek (czerwony outline na close buttonie) */
.main-header-menu-toggle:focus,
.main-header-menu-toggle:focus-visible,
.ast-mobile-popup-drawer button:focus,
.ast-mobile-popup-drawer a:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* Schludne, luksusowe tło kontenera menu rozwijanego */
.ast-mobile-header-content,
.ast-mobile-popup-drawer .ast-mobile-popup-inner {
	background: #FFFAF4 !important; /* Kremowy papier */
	border-radius: 0 0 24px 24px !important;
	padding: 30px 20px 40px !important;
	box-shadow: 0 24px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(122,59,71,0.06) !important;
	border-bottom: 2px solid rgba(122,59,71,0.1) !important;
	margin: 0 !important;
}

/* Profil Użytkownika - Okrągły awatar wyrównany na szczycie */
.ast-mobile-header-content .ast-header-account-link.ast-header-account-type-avatar {
	display: flex !important;
	margin: 0 auto 24px !important;
	width: 64px !important;
	height: 64px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	background: #fff !important;
	border: 2px solid #EAE3D9 !important;
	box-shadow: 0 8px 16px rgba(0,0,0,0.08) !important;
}

.ast-mobile-header-content .ast-header-account-link img.avatar {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* Siatka Menu */
.ast-mobile-header-content #ast-hf-mobile-menu {
	display: flex !important;
	flex-wrap: wrap !important;
	flex-direction: row !important;
	justify-content: center !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Główny kontener przycisków KLINIKA, SZKOLENIA... rozciągnięty do linii brzegu */
.ast-mobile-header-content #ast-hf-mobile-menu > li:not(.wpml-ls-item) {
	flex: 0 0 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.ast-mobile-header-content #ast-hf-mobile-menu > li:not(.wpml-ls-item) > .menu-link {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	padding: 16px 24px !important;
	border-radius: 12px !important;
	font-family: "Montserrat", system-ui, -apple-system, sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
	background: #FDFBF8 !important;
	border: 1px solid #EAE3D9 !important;
	color: #111 !important;
	box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Efekt "Wow" dla Aktywnego Elementu Menu (Bordowy) */
.ast-mobile-header-content #ast-hf-mobile-menu > li:not(.wpml-ls-item).current-menu-item > .menu-link,
.ast-mobile-header-content #ast-hf-mobile-menu > li:not(.wpml-ls-item).current_page_item > .menu-link,
.ast-mobile-header-content #ast-hf-mobile-menu > li:not(.wpml-ls-item) > .menu-link:hover {
	background: var(--burgundy, #7a3b47) !important;
	color: #ffffff !important;
	border-color: var(--burgundy, #7a3b47) !important;
	box-shadow: 0 8px 20px rgba(122, 59, 71, 0.25) !important;
	transform: translateY(-2px) !important;
}

/* Poziome rozstawienie kulek z Flagami (Language Switcher) */
.ast-mobile-header-content #ast-hf-mobile-menu > li.wpml-ls-item {
	flex: 0 0 auto !important;
	margin: 16px 12px 0 !important;
	padding: 0 !important;
}

.ast-mobile-header-content #ast-hf-mobile-menu > li.wpml-ls-item .menu-link {
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.ast-mobile-header-content #ast-hf-mobile-menu > li.wpml-ls-item .wpml-ls-flag {
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
	border: 1px solid rgba(0, 0, 0, 0.05) !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.ast-mobile-header-content #ast-hf-mobile-menu > li.wpml-ls-item:hover .wpml-ls-flag {
	transform: translateY(-2px) scale(1.05) !important;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Płynne otwieranie szuflady - animacja wejścia */
@keyframes spSlideDownMenu {
	0% { opacity: 0; transform: translateY(-10px); }
	100% { opacity: 1; transform: translateY(0); }
}

body.ast-main-header-nav-open .ast-mobile-header-content {
	animation: spSlideDownMenu 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

/* =================================================
   2. SCROLL TO TOP DISABLED
   ================================================= */
#ast-scroll-top {
	display: none !important;
}

/* =================================================
   3. OTHER FIXES
   ================================================= */
.sp-edit.button.button-secondary.button-small {
	line-height: 1.2;
	padding: 2px 8px;
	margin-left: 8px;
}

.sp-nip-info {
	margin-top: 6px;
	font-size: 0.9em;
}

/* =================================================
   3b. AUTH PAGES — PAGE-LEVEL PREMIUM SHELL
   Background parity + vertical centering for all auth entry points.
   ================================================= */

/* Cream paper background on all auth/dashboard pages */
.page-id-23968,
.page-id-26349,
.page-id-22458,
.page-id-22462,
.page-id-22460 {
	background: var(--paper, #fffaf7) !important;
}

/* Vertical centering for auth pages (login/register — not full dashboard) */
.page-id-23968 .site-content,
.page-id-26349 .site-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
}

/* Prevent flex shrinkage — ensure child containers take full available width */
.page-id-23968 .site-content > .ast-container,
.page-id-26349 .site-content > .ast-container {
	width: 100%;
}

/* =================================================
   4. SP ACADEMY — STUDENT DASHBOARD (panel-studenta)
   Premium layout overrides for the .sp-dash tree.
   These AUGMENT the base styles from sp-academy.css.
   ================================================= */

/* ── 4.1 Dashboard Shell ──
   Override the base flex layout with a premium grid when on desktop.
   sp-academy.css sets flex-direction:column (mobile-first).
   We add the grid ONLY at 768px+. */

/* ── 4.2 Dashboard Card Surface ──
   Premium card treatment — white bg, subtle shadow, rounded */
.sp-dash__sidebar,
.sp-dash__main {
	background: #fff;
	border-radius: var(--radius, 16px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
	            0 2px 8px rgba(122, 59, 71, 0.04);
	border: 1px solid rgba(122, 59, 71, 0.06);
	overflow: hidden;
}

/* ── 4.3 Sidebar — Premium override ── */
.sp-dash__sidebar {
	padding: 1.25rem 0;
}

/* ── 4.4 Sidebar Navigation ──
   Match actual HTML: <a class="sp-dash__nav-link"> */
.sp-dash__nav-link {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem 1.25rem;
	color: var(--ink, #1b1b1b);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	border-radius: 8px;
	margin: 0 0.5rem;
	transition: color 0.2s ease, background 0.2s ease;
}

.sp-dash__nav-link:hover {
	color: var(--burgundy, #7a3b47);
	background: var(--rose, #f4e7ea);
}

/* Active nav item — matches .sp-dash__nav-link--active from Dashboard.php */
.sp-dash__nav-link--active {
	color: var(--burgundy, #7a3b47) !important;
	background: var(--rose, #f4e7ea) !important;
	font-weight: 600;
}

/* Nav item icons */
.sp-dash__nav-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	opacity: 0.7;
	text-align: center;
}

.sp-dash__nav-link:hover .sp-dash__nav-icon,
.sp-dash__nav-link--active .sp-dash__nav-icon {
	opacity: 1;
}

/* ── 4.5 Main Content Pane ── */
.sp-dash__main {
	padding: 2rem;
	min-height: 400px;
}

/* Section headings inside dashboard */
.sp-dash__main h2 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--ink, #1b1b1b);
	margin: 0 0 1.25rem;
}

/* ── 4.6 Profile Header ── */
.sp-dash__profile {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid rgba(122, 59, 71, 0.08);
	background: var(--paper, #fffaf7);
}

/* Avatar — circular with gold ring on hover */
.sp-dash__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(122, 59, 71, 0.12);
	transition: border-color 0.3s ease;
	flex-shrink: 0;
}

.sp-dash__avatar:hover {
	border-color: var(--gold, #d4b483);
}

/* User display name next to avatar */
.sp-dash__profile-name {
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink, #1b1b1b);
	line-height: 1.3;
}

.sp-dash__profile-role {
	font-size: 0.8125rem;
	color: #888;
	margin-top: 2px;
}

/* ── 4.7 Dashboard Responsive ── */
@media (min-width: 769px) {
	.sp-dash {
		display: grid;
		grid-template-columns: 260px 1fr;
		gap: 1.5rem;
		align-items: start;
	}

	.sp-dash__sidebar {
		position: sticky;
		top: 100px;
	}

	.sp-dash__nav {
		flex-direction: column;
	}
}

@media (max-width: 768px) {
	.sp-dash {
		padding: 0 1rem;
	}

	.sp-dash__sidebar {
		padding: 0.75rem 0;
	}

	.sp-dash__nav-link {
		padding: 0.625rem 1rem;
		font-size: 13px;
	}

	.sp-dash__main {
		padding: 1.25rem;
	}

	.sp-dash__profile {
		padding: 1rem 1.25rem;
	}

	.sp-dash__avatar {
		width: 44px;
		height: 44px;
	}
}

@media (max-width: 480px) {
	.sp-dash__main {
		padding: 1rem;
		border-radius: 12px;
	}

	.sp-dash__sidebar {
		border-radius: 12px;
	}
}


/* =================================================
   5. SP ACADEMY — LOGIN (via WooCommerce My Account)
   Premium styling for the WC login form.
   ================================================= */

/* ── 5.1 Login Card Container ── */
.woocommerce-form-login {
	max-width: 440px !important;
	margin: 40px auto !important;
	padding: 40px 36px 36px !important;
	background: #fff !important;
	border-radius: var(--radius, 16px) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06),
	            0 2px 8px rgba(122, 59, 71, 0.04) !important;
	border: 1px solid rgba(122, 59, 71, 0.06) !important;
}

/* ── 5.2 Login Form Inputs ── */
.woocommerce-form-login .input-text,
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-login input[type="email"] {
	background: var(--paper, #fffaf7) !important;
	border: 1px solid #e2ddd8 !important;
	border-radius: 10px !important;
	padding: 14px 16px !important;
	font-size: 15px !important;
	color: var(--ink, #1b1b1b) !important;
	width: 100% !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.woocommerce-form-login .input-text:focus,
.woocommerce-form-login input[type="text"]:focus,
.woocommerce-form-login input[type="password"]:focus,
.woocommerce-form-login input[type="email"]:focus {
	border-color: var(--burgundy, #7a3b47) !important;
	box-shadow: 0 0 0 3px rgba(122, 59, 71, 0.1) !important;
	outline: none !important;
}

.woocommerce-form-login .input-text::placeholder {
	color: #999 !important;
}

/* ── 5.3 Login Form Labels ── */
.woocommerce-form-login label {
	font-weight: 500 !important;
	color: var(--ink, #1b1b1b) !important;
	margin-bottom: 6px !important;
	display: block;
}

/* ── 5.4 Primary Login Button ── */
.woocommerce-form-login .woocommerce-button,
.woocommerce-form-login button[type="submit"] {
	background: var(--burgundy, #7a3b47) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 14px 24px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0.5px !important;
	width: 100% !important;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}

.woocommerce-form-login .woocommerce-button:hover,
.woocommerce-form-login button[type="submit"]:hover {
	background: var(--burgundyD, #3d0e12) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 16px rgba(122, 59, 71, 0.25) !important;
}

.woocommerce-form-login .woocommerce-button:active,
.woocommerce-form-login button[type="submit"]:active {
	transform: translateY(0) !important;
}

/* ── 5.5 "Remember Me" Checkbox ── */
.woocommerce-form-login .woocommerce-form-login__rememberme input[type="checkbox"] {
	accent-color: var(--burgundy, #7a3b47) !important;
}

/* ── 5.6 Lost Password Link ── */
.woocommerce-form-login .woocommerce-LostPassword a,
.woocommerce-form-login .lost_password a {
	color: var(--burgundy, #7a3b47) !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	transition: color 0.2s ease !important;
}

.woocommerce-form-login .woocommerce-LostPassword a:hover,
.woocommerce-form-login .lost_password a:hover {
	color: var(--burgundyD, #3d0e12) !important;
}

/* ── 5.7 Login Responsive ── */
@media (max-width: 480px) {
	.woocommerce-form-login {
		padding: 28px 20px 24px !important;
		margin: 20px 12px !important;
		border-radius: 12px !important;
	}
}


/* =================================================
   6. SP ACADEMY — SOCIAL LOGIN BUTTONS
   Rendered by SocialLogin.php — .sp-social-btn tree.
   ================================================= */

/* ── 6.1 Social Section Wrapper ──
   SocialLogin.php generates class "sp-social-login-area" */
.sp-social-login,
.sp-social-login-area {
	position: relative;
	margin-top: 24px;
	padding-top: 24px;
}

/* "lub" separator — gradient line */
.sp-social-login::after,
.sp-social-login-area::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, #e2ddd8 20%, #e2ddd8 80%, transparent);
}

/* "lub" separator — text label */
.sp-social-login::before,
.sp-social-login-area::before {
	content: "lub";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	background: #fff;
	padding: 0 16px;
	font-size: 13px;
	font-weight: 500;
	color: #999;
	letter-spacing: 1px;
	text-transform: lowercase;
	z-index: 1;
}

/* ── 6.2 Shared Button Base ── */
.sp-social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.sp-social-btn + .sp-social-btn {
	margin-top: 10px;
}

.sp-social-btn:hover {
	transform: translateY(-1px);
}

.sp-social-btn:active {
	transform: translateY(0);
}

/* ── 6.3 Google Button ── */
.sp-social-btn--google {
	background: #fff;
	color: var(--ink, #1b1b1b);
	border: 1.5px solid #dadce0;
}

.sp-social-btn--google:hover {
	border-color: #c4c7cc;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Google icon sizing */
.sp-social-btn--google svg,
.sp-social-btn--google img {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* ── 6.4 Facebook Button ── */
.sp-social-btn--facebook {
	background: #1877f2;
	color: #fff;
	border: 1.5px solid #1877f2;
}

.sp-social-btn--facebook:hover {
	background: #166fe5;
	border-color: #166fe5;
	box-shadow: 0 2px 8px rgba(24, 119, 242, 0.3);
}

/* Facebook icon sizing */
.sp-social-btn--facebook svg,
.sp-social-btn--facebook img {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* ── 6.5 Social Responsive ── */
@media (max-width: 480px) {
	.sp-social-login,
	.sp-social-login-area {
		margin-top: 20px;
		padding-top: 20px;
	}

	.sp-social-btn {
		height: 44px;
		font-size: 13px;
	}
}