/**
 * Zhivan membership club — /my-account/ redesign.
 *
 * Styles the login/register template override and the dashboard
 * (membership card) override. Everything is scoped under .zhivan-club
 * so the site header/footer and other Elementor widgets are untouched.
 * Palette = the site's own theme colors:
 *   primary blue #17479E · secondary blue #324C97 · accent yellow #FFD400.
 *
 * Note on !important: the Elementor My Account widget on page 14 has its own
 * style settings from the old design (white form background, row margins,
 * fixed heights) which Elementor prints in post-14.css — loaded AFTER this
 * file and with higher specificity. Every form-related declaration that
 * post-14.css also sets is therefore marked !important; removing them brings
 * the white overflowing box back.
 */

/* The section is its own hero — the theme's plain page title above it is redundant. */
.woocommerce-account .page-header {
	display: none;
}

/* The Elementor container/widget must grow with whichever panel (login vs
   register) is open — otherwise the taller register form overflows it. */
.woocommerce-account .elementor-widget-woocommerce-my-account,
.woocommerce-account .elementor-widget-woocommerce-my-account > .elementor-widget-container,
.woocommerce-account .e-my-account-tab,
.woocommerce-account .e-my-account-tab > .woocommerce {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
	background: transparent !important;
}

/* ---------------------------------------------------------------- shell */

.zhivan-club,
.zhivan-club *,
.zhivan-club *::before,
.zhivan-club *::after {
	box-sizing: border-box;
}

.zhivan-club {
	position: relative;
	overflow: hidden;
	direction: rtl;
	height: auto;
	background:
		radial-gradient(900px 500px at 85% -10%, rgba(50, 76, 151, 0.85) 0%, transparent 60%),
		linear-gradient(160deg, #324c97 0%, #17479e 55%, #123a80 100%);
	border-radius: 24px;
	padding: 48px 20px 56px;
	margin: 8px 0 40px;
}

.zc-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.4;
	pointer-events: none;
}

.zc-orb-1 {
	width: 340px;
	height: 340px;
	background: #324c97;
	top: -120px;
	right: -80px;
	animation: zc-float 14s ease-in-out infinite;
}

.zc-orb-2 {
	width: 280px;
	height: 280px;
	background: #ffffff;
	opacity: 0.12;
	bottom: -100px;
	left: -60px;
	animation: zc-float 18s ease-in-out infinite reverse;
}

.zc-orb-3 {
	width: 200px;
	height: 200px;
	background: #ffd400;
	top: 40%;
	left: 15%;
	opacity: 0.14;
	animation: zc-float 22s ease-in-out infinite;
}

@keyframes zc-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(28px); }
}

.zc-container {
	position: relative;
	z-index: 1;
	max-width: 520px;
	margin: 0 auto;
}

/* --------------------------------------------------------------- header */

.zc-header {
	text-align: center;
	margin-bottom: 24px;
}

.zhivan-club .zc-header h1 {
	margin: 0;
	font-size: 30px;
	font-weight: 800;
	color: #fff;
}

.zhivan-club .zc-header h1 span {
	color: #ffd400;
}

.zhivan-club .zc-header p {
	margin: 6px 0 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.72);
}

/* ------------------------------------------------------------ form card */

.zc-form-card {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 22px;
	padding: 26px 24px;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 24px 60px rgba(11, 26, 62, 0.45);
	overflow: hidden;
}

.zc-tabs {
	display: flex;
	gap: 4px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 14px;
	padding: 4px;
	margin-bottom: 22px;
}

.zhivan-club .zc-tab {
	flex: 1;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.8);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	padding: 10px 0;
	border-radius: 11px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.zhivan-club .zc-tab.is-active {
	background: #ffd400;
	color: #17479e;
	box-shadow: 0 4px 14px rgba(11, 26, 62, 0.3);
}

.zc-panel {
	display: none;
}

.zc-panel.is-active {
	display: block;
}

/* ----------------------------------------------------------------- form */

.zhivan-club form.woocommerce-form,
.zhivan-club form.woocommerce-form.login,
.zhivan-club form.woocommerce-form.register {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 14px 12px;
	margin: 0 !important;
	border: 0 !important;
	padding: 0 !important;
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
}

.zhivan-club form.woocommerce-form > * {
	min-width: 0; /* grid items must be allowed to shrink, or long content overflows the card */
}

.zhivan-club form .form-row,
.zhivan-club form .woocommerce-form-row {
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	width: auto !important;
	max-width: 100% !important;
	min-height: 0 !important;
	background: transparent !important;
	grid-column: 1 / -1;
}

/* Paired name fields sit side by side. */
.zhivan-club form .form-row-first,
.zhivan-club form .form-row-last {
	grid-column: auto;
}

.zhivan-club form .clear {
	display: none;
}

.zhivan-club form label {
	display: block !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: rgba(255, 255, 255, 0.85) !important;
	line-height: 1.6 !important;
}

.zhivan-club form .required {
	color: #ffd400 !important;
	text-decoration: none !important;
	border: 0 !important;
}

.zhivan-club form .input-text,
.zhivan-club form input[type="text"],
.zhivan-club form input[type="email"],
.zhivan-club form input[type="tel"],
.zhivan-club form input[type="password"],
.zhivan-club form select {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 12px !important;
	padding: 12px 14px !important;
	font-family: inherit;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #fff !important;
	outline: none;
	box-shadow: none !important;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.zhivan-club form .input-text:focus,
.zhivan-club form input:focus,
.zhivan-club form select:focus {
	border-color: #ffd400 !important;
	background: rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 0 0 3px rgba(255, 212, 0, 0.22) !important;
}

.zhivan-club form ::placeholder {
	color: rgba(255, 255, 255, 0.4) !important;
	opacity: 1;
}

/* Native dropdown list renders on white — keep the options readable. */
.zhivan-club form select option {
	color: #17479e;
	background: #fff;
}

/* WooCommerce's show/hide password wrapper. */
.zhivan-club .password-input {
	display: block;
	position: relative;
	max-width: 100%;
}

.zhivan-club .show-password-input {
	color: rgba(255, 255, 255, 0.85);
}

.zhivan-club .woocommerce-form-login__rememberme {
	display: flex !important;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 13px !important;
	margin: 0 0 12px !important;
	cursor: pointer;
}

.zhivan-club input[type="checkbox"] {
	accent-color: #ffd400;
	width: 16px !important;
	height: 16px !important;
	min-height: 0 !important;
}

.zhivan-club form .button,
.zhivan-club form button[type="submit"] {
	display: block;
	width: 100% !important;
	margin: 4px 0 0 !important;
	border: 0 !important;
	cursor: pointer;
	border-radius: 14px !important;
	padding: 14px 18px !important;
	font-family: inherit;
	font-size: 16px !important;
	font-weight: 800 !important;
	color: #17479e !important;
	background: #ffd400 !important;
	box-shadow: 0 10px 26px rgba(11, 26, 62, 0.35) !important;
	transition: transform 0.15s, box-shadow 0.2s;
}

.zhivan-club form .button:hover,
.zhivan-club form button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(11, 26, 62, 0.45) !important;
	background: #ffd400 !important;
	color: #17479e !important;
}

.zhivan-club .lost_password {
	text-align: center;
	margin: 4px 0 0 !important;
	font-size: 13px;
}

.zhivan-club a {
	color: #ffd400;
	text-decoration: none;
}

.zhivan-club a:hover {
	color: #ffe566;
}

.zhivan-club .woocommerce-privacy-policy-text,
.zhivan-club .zc-note {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.65);
}

.zc-privacy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 16px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.65);
}

.zc-privacy svg {
	width: 14px;
	height: 14px;
	flex: none;
}

/* Password strength meter (WooCommerce) on the dark card. */
.zhivan-club .woocommerce-password-strength {
	font-size: 12px;
	padding: 4px 0 0;
	background: transparent !important;
	color: rgba(255, 255, 255, 0.85);
}

.zhivan-club .woocommerce-password-hint {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.65);
}

/* --------------------------------------------------- OTP (FarazSMS) field */

.zc-otp-input-row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.zc-otp-input-row .input-text {
	flex: 1;
	min-width: 0;
}

/* The send/verify buttons are inline helpers, not the big submit CTA. */
.zhivan-club form .zc-otp-send,
.zhivan-club form .zc-otp-verify {
	display: inline-block;
	width: auto !important;
	flex: none;
	margin: 0 !important;
	padding: 0 16px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, 0.14) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	box-shadow: none !important;
	white-space: nowrap;
}

.zhivan-club form .zc-otp-send:hover,
.zhivan-club form .zc-otp-verify:hover {
	transform: none;
	background: #ffd400 !important;
	color: #17479e !important;
	box-shadow: none !important;
}

.zhivan-club form .zc-otp-send:disabled,
.zhivan-club form .zc-otp-verify:disabled {
	opacity: 0.55;
	cursor: default;
	background: rgba(255, 255, 255, 0.14) !important;
	color: #fff !important;
}

.zhivan-club .zc-otp-status {
	display: block;
	grid-column: 1 / -1;
	min-height: 1em;
	margin: -4px 0 0 !important;
	font-size: 12px;
	color: #ffb4b4;
}

.zhivan-club .zc-otp-status.is-ok {
	color: #9df3b1;
}

.zhivan-club form .input-text.zc-otp-verified {
	border-color: #9df3b1 !important;
}

/* ------------------------------------------------------ membership card */

.zc-card {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	padding: 26px 24px;
	background: linear-gradient(135deg, #324c97 0%, #17479e 55%, #123a80 100%);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 24px 60px rgba(11, 26, 62, 0.5);
	color: #fff;
	margin-bottom: 16px;
}

.zc-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 90px);
	pointer-events: none;
}

.zc-card::after {
	content: "";
	position: absolute;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: rgba(255, 212, 0, 0.16);
	filter: blur(60px);
	top: -80px;
	left: -60px;
	pointer-events: none;
}

.zc-card-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 26px;
}

.zc-card-brand-name {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.5px;
}

.zc-card-brand-sub {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.75);
}

.zc-chip {
	width: 46px;
	height: 34px;
	border-radius: 8px;
	background: linear-gradient(135deg, #ffe566, #ffd400);
	box-shadow: inset 0 0 0 1px rgba(11, 26, 62, 0.2);
	flex: none;
}

.zc-card-name {
	font-size: 22px;
	font-weight: 800;
	margin-bottom: 4px;
	position: relative;
}

.zc-card-id {
	font-family: "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 13px;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.75);
	direction: ltr;
	text-align: right;
	position: relative;
}

.zc-card-bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 26px;
	position: relative;
}

.zc-points-label {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.75);
}

.zc-points-value {
	font-size: 28px;
	font-weight: 800;
	color: #ffd400;
	line-height: 1.1;
}

.zc-points-unit {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.75);
}

.zc-level {
	text-align: left;
}

.zc-level-badge {
	display: inline-block;
	background: rgba(255, 212, 0, 0.14);
	border: 1px solid rgba(255, 212, 0, 0.4);
	color: #ffd400;
	font-size: 12px;
	font-weight: 700;
	border-radius: 999px;
	padding: 5px 12px;
	margin-bottom: 6px;
}

.zc-level-date {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.75);
}

/* ------------------------------------------------- points & info blocks */

.zc-glass {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 18px;
	padding: 18px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.zc-progress-head {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 10px;
}

.zc-progress-track {
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	overflow: hidden;
}

.zc-progress-fill {
	height: 100%;
	width: 4%;
	border-radius: 999px;
	background: #ffd400;
}

.zc-progress-labels {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.65);
	margin-top: 8px;
}

.zc-info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 14px;
}

.zc-info-item {
	text-align: center;
	padding: 16px 10px;
}

.zc-info-icon {
	font-size: 22px;
	margin-bottom: 6px;
}

.zc-info-label {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 4px;
}

.zc-info-value {
	font-size: 14px;
	font-weight: 800;
	color: #fff;
}

.zc-actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 14px;
}

.zhivan-club .zc-actions a {
	display: block;
	text-align: center;
	padding: 12px 8px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.06);
	transition: background 0.2s;
}

.zhivan-club .zc-actions a:hover {
	background: #ffd400;
	color: #17479e;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 560px) {
	.zhivan-club {
		padding: 32px 12px 40px;
		border-radius: 16px;
	}

	.zc-form-card {
		padding: 20px 14px;
	}

	.zhivan-club .zc-header h1 {
		font-size: 24px;
	}

	.zc-actions {
		grid-template-columns: 1fr;
	}
}