/* ==========================================================================
   WooCustom Commerce — Auth (login / register / account button)
   Design: modern, premium, Stripe/Shopify/Linear inspired
   ========================================================================== */

/* --------------------------------------------------------------------------
   Account Button (header)
   -------------------------------------------------------------------------- */
.cwc-account-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	transition: color 0.15s ease, background 0.15s ease;
}

.cwc-account-btn--guest {
	padding: 8px 16px;
	border-radius: 10px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	cursor: pointer;
}

.cwc-account-btn--guest:hover {
	background: #f3f4f6;
	border-color: #d1d5db;
	color: #111827;
}

.cwc-account-btn--guest svg {
	color: #6b7280;
}

.cwc-account-btn--guest:hover svg {
	color: #374151;
}

/* Emplacement du bouton "Mon compte" dans le header (voir
   woo-custom-commerce-header.js, qui déplace le <template> rendu par
   CWC_Auth::inject_header_button() juste avant l'icône panier) — remplace
   l'ancienne position:fixed flottante par un placement dans le flux normal
   de la barre, aligné avec les autres éléments. */
.cwc-header-account {
	display: inline-flex;
	align-items: center;
	margin-right: 14px;
	/* Le thème met pointer-events:none sur tout le <header> par défaut
	   (mécanisme de header "smart sticky"), avec des exceptions explicites
	   pour ses propres éléments interactifs (liens du menu, icône panier…).
	   Notre bouton, inséré dynamiquement, n'est couvert par aucune de ces
	   exceptions et hériterait donc de "none" — cliquable en apparence,
	   mais aucun événement de clic ne l'atteindrait réellement. */
	pointer-events: auto;
}

.cwc-header-account .cwc-account-btn--guest,
.cwc-header-account .cwc-account-btn__trigger {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cwc-account-btn--header:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.cwc-account-btn__trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px 6px 6px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	transition: all 0.15s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cwc-account-btn__trigger:hover {
	background: #f9fafb;
	border-color: #d1d5db;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cwc-account-btn__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: linear-gradient(135deg, #0275d8, #0056b3);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.cwc-account-btn__name {
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cwc-account-btn__chevron {
	color: #9ca3af;
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.cwc-account-btn__trigger[aria-expanded="true"] .cwc-account-btn__chevron {
	transform: rotate(180deg);
}

.cwc-account-btn__dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 220px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
	padding: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(0.97);
	transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 10000;
}

.cwc-account-btn__dropdown.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.cwc-account-btn__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	color: #374151;
	text-decoration: none;
	transition: background 0.12s ease, color 0.12s ease;
}

.cwc-account-btn__item:hover {
	background: #f3f4f6;
	color: #111827;
}

.cwc-account-btn__item svg {
	color: #9ca3af;
	flex-shrink: 0;
}

.cwc-account-btn__item:hover svg {
	color: #6b7280;
}

.cwc-account-btn__item--danger {
	color: #dc2626;
}

.cwc-account-btn__item--danger:hover {
	background: #fef2f2;
	color: #dc2626;
}

.cwc-account-btn__item--danger svg {
	color: #fca5a5;
}

.cwc-account-btn__item--danger:hover svg {
	color: #dc2626;
}

.cwc-account-btn__separator {
	height: 1px;
	background: #e5e7eb;
	margin: 4px 10px;
}

/* --------------------------------------------------------------------------
   Auth Page (login + register)
   -------------------------------------------------------------------------- */
.cwc-auth {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80vh;
	padding: 40px 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.cwc-auth__card {
	width: 100%;
	max-width: 440px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.08);
	padding: 40px 36px;
	animation: cwcAuthFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cwcAuthFadeIn {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Tabs */
.cwc-auth__tabs {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: #f3f4f6;
	border-radius: 12px;
	margin-bottom: 28px;
}

.cwc-auth__tab {
	flex: 1;
	padding: 10px 16px;
	border: none;
	border-radius: 9px;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #6b7280;
	cursor: pointer;
	transition: all 0.2s ease;
}

.cwc-auth__tab:hover {
	color: #374151;
}

.cwc-auth__tab--active {
	background: #fff;
	color: #111827;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Icon */
.cwc-auth__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	margin: 0 auto 20px;
}

.cwc-auth__icon--success {
	background: #ecfdf5;
	color: #10b981;
}

/* Title / subtitle */
.cwc-auth__title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	color: #111827;
	text-align: center;
	letter-spacing: -0.3px;
}

.cwc-auth__subtitle {
	margin: 0 0 28px;
	font-size: 14px;
	color: #6b7280;
	text-align: center;
	line-height: 1.5;
}

/* Form */
.cwc-auth__form--hidden {
	display: none !important;
}

.cwc-auth__form-inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Field */
.cwc-auth__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cwc-auth__field label {
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	letter-spacing: 0.1px;
}

.cwc-auth__input-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	border: 1.5px solid #e5e7eb;
	border-radius: 11px;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cwc-auth__input-wrap:focus-within {
	border-color: #0275d8;
	box-shadow: 0 0 0 3px rgba(2, 117, 216, 0.12);
}

.cwc-auth__input-wrap svg {
	color: #9ca3af;
	flex-shrink: 0;
	transition: color 0.15s ease;
}

.cwc-auth__input-wrap:focus-within svg {
	color: #0275d8;
}

.cwc-auth__input-wrap input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 12px 0;
	font-family: inherit;
	font-size: 14px;
	color: #111827;
	outline: none;
	min-width: 0;
}

.cwc-auth__input-wrap input::placeholder {
	color: #9ca3af;
}

/* Row (inline fields) */
.cwc-auth__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cwc-auth__row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

/* Checkbox */
.cwc-auth__check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #6b7280;
	cursor: pointer;
	user-select: none;
}

.cwc-auth__check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	border: 1.5px solid #d1d5db;
	accent-color: #0275d8;
	cursor: pointer;
}

/* Link */
.cwc-auth__link {
	font-size: 13px;
	font-weight: 600;
	color: #0275d8;
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-family: inherit;
	transition: color 0.12s ease;
}

.cwc-auth__link:hover {
	color: #0056b3;
}

/* Hint */
.cwc-auth__hint {
	margin: 0;
	font-size: 12px;
	color: #9ca3af;
	line-height: 1.4;
}

/* Buttons */
.cwc-auth__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 11px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
	border: none;
	text-decoration: none;
}

.cwc-auth__btn--full {
	width: 100%;
}

.cwc-auth__btn--primary {
	background: linear-gradient(135deg, #0275d8, #0056b3);
	color: #fff;
	box-shadow: 0 2px 8px rgba(2, 117, 216, 0.3);
}

.cwc-auth__btn--primary:hover {
	background: linear-gradient(135deg, #0056b3, #004094);
	box-shadow: 0 4px 16px rgba(2, 117, 216, 0.4);
	transform: translateY(-1px);
}

.cwc-auth__btn--primary:active {
	transform: translateY(0);
	box-shadow: 0 1px 4px rgba(2, 117, 216, 0.2);
}

.cwc-auth__btn--google {
	background: #fff;
	color: #374151;
	border: 1.5px solid #e5e7eb;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cwc-auth__btn--google:hover {
	background: #f9fafb;
	border-color: #d1d5db;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}

.cwc-auth__btn--google:active {
	transform: translateY(0);
}

.cwc-auth__btn--loading {
	pointer-events: none;
	opacity: 0.7;
}

.cwc-auth__btn--loading .cwc-auth__btn-text {
	visibility: hidden;
}

.cwc-auth__btn--loading .cwc-auth__btn-spinner {
	display: block;
	position: absolute;
}

/* Spinner */
.cwc-auth__btn-spinner {
	display: none;
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: cwcAuthSpin 0.6s linear infinite;
}

.cwc-auth__btn--google .cwc-auth__btn-spinner {
	border-color: rgba(0, 0, 0, 0.15);
	border-top-color: #374151;
}

@keyframes cwcAuthSpin {
	to {
		transform: rotate(360deg);
	}
}

/* Divider */
.cwc-auth__divider {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 24px 0;
}

.cwc-auth__divider::before,
.cwc-auth__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e5e7eb;
}

.cwc-auth__divider span {
	font-size: 12px;
	font-weight: 500;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Alert */
.cwc-auth__alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.5;
	margin-bottom: 20px;
}

.cwc-auth__alert svg {
	flex-shrink: 0;
	margin-top: 1px;
}

.cwc-auth__alert--error {
	background: #fef2f2;
	color: #dc2626;
	border: 1px solid #fecaca;
}

.cwc-auth__alert--success {
	background: #ecfdf5;
	color: #059669;
	border: 1px solid #a7f3d0;
}

/* Footer link */
.cwc-auth__footer-link {
	text-align: center;
	margin: 24px 0 0;
	font-size: 14px;
	color: #6b7280;
}

/* Messages container */
.cwc-auth__messages {
	margin-top: 16px;
}

/* --------------------------------------------------------------------------
   Google button on legacy login form
   -------------------------------------------------------------------------- */
.cwc-verify__google-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 12px 24px;
	border: 1.5px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	cursor: pointer;
	transition: all 0.15s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cwc-verify__google-btn:hover {
	background: #f9fafb;
	border-color: #d1d5db;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}

.cwc-verify__google-btn:active {
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
    Google Identity Services button containers
    -------------------------------------------------------------------------- */
#cwc-google-btn-login,
#cwc-google-btn-register,
#cwc-verify-google-btn {
	margin: 0;
}

#cwc-google-btn-login > div,
#cwc-google-btn-register > div,
#cwc-verify-google-btn > div {
	width: 100%;
}

/* --------------------------------------------------------------------------
    Responsive
    -------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.cwc-auth__card {
		padding: 28px 20px;
		border-radius: 16px;
	}

	.cwc-auth__row-2 {
		grid-template-columns: 1fr;
	}

	.cwc-auth__tabs {
		margin-bottom: 24px;
	}

	.cwc-account-btn__name {
		display: none;
	}

	.cwc-header-account {
		margin-right: 8px;
	}
}

/* --------------------------------------------------------------------------
    Account button dropdown (position relative for dropdown)
    -------------------------------------------------------------------------- */
.cwc-account-btn {
	position: relative;
}

/* --------------------------------------------------------------------------
    Google divider on register form
    -------------------------------------------------------------------------- */
.cwc-register__divider {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 24px 0;
}

.cwc-register__divider::before,
.cwc-register__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e5e7eb;
}

.cwc-register__divider span {
	font-size: 12px;
	font-weight: 500;
	color: #9ca3af;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

#cwc-google-btn-register-form > div {
	width: 100%;
}