/* =====================================================================
   VENUS LOGIN — front-end styles (fully token-driven via --venus-* vars;
   defaults here = light preset; the admin inline <style> overrides them)
   ====================================================================*/

/* Fallback values — overridden by venus_appearance_css()/preview inline :root vars.
   IMPORTANT: declared on :root, NOT on .venus-box, so inline :root wins the cascade. */
:root {
	--venus-box-width: 380px;
	--venus-box-bg: #fff;
	--venus-box-text: #333;
	--venus-box-border-color: rgba(0, 0, 0, .12);
	--venus-box-border-width: 1px;
	--venus-box-radius: 10px;
	--venus-box-padding: 22px 20px;
	--venus-box-shadow: 0 6px 24px rgba(0, 0, 0, .07);
	--venus-font-size: 14px;
	--venus-title-color: #232323;
	--venus-title-size: 18px;
	--venus-title-weight: 700;
	--venus-tab-bg: #f7f7f7;
	--venus-tab-text: #555;
	--venus-tab-active-bg: #5b2d8e;
	--venus-tab-active-text: #fff;
	--venus-tab-radius: 6px;
	--venus-input-bg: #fff;
	--venus-input-text: #333;
	--venus-input-border: #ccc;
	--venus-input-border-focus: #5b2d8e;
	--venus-input-radius: 6px;
	--venus-input-padding: 9px 10px;
	--venus-btn-bg: #5b2d8e;
	--venus-btn-text: #fff;
	--venus-btn-hover-bg: #4a2573;
	--venus-btn-radius: 6px;
	--venus-btn-padding: 10px 14px;
	--venus-btn-weight: 600;
	--venus-btn2-bg: #f2ecfa;
	--venus-btn2-text: #5b2d8e;
	--venus-btn2-border: #cbb3e6;
	--venus-label-color: #444;
	--venus-link-color: #5b2d8e;
	--venus-msg-success: #1d7a34;
	--venus-msg-error: #c0392b;
	--venus-msg-info: #555;
}

.venus-box {
	max-width: var(--venus-box-width);
	width: 100%;
	margin: 20px auto;
	padding: var(--venus-box-padding);
	background: var(--venus-box-bg);
	color: var(--venus-box-text);
	border: var(--venus-box-border-width) solid var(--venus-box-border-color);
	border-radius: var(--venus-box-radius);
	box-shadow: var(--venus-box-shadow);
	font-size: var(--venus-font-size);
	position: relative;
}

.venus-box * { box-sizing: border-box; }

.venus-title {
	margin: 0 0 14px;
	font-size: var(--venus-title-size);
	font-weight: var(--venus-title-weight);
	color: var(--venus-title-color);
	text-align: center;
}

/* tabs */
.venus-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 14px;
}
.venus-tab {
	flex: 1;
	padding: 8px 4px;
	border: 1px solid var(--venus-box-border-color);
	background: var(--venus-tab-bg);
	color: var(--venus-tab-text);
	border-radius: var(--venus-tab-radius);
	cursor: pointer;
	font: inherit;
	transition: background .15s, color .15s;
}
.venus-tab.active {
	background: var(--venus-tab-active-bg);
	border-color: var(--venus-tab-active-bg);
	color: var(--venus-tab-active-text);
}

/* fields */
.venus-box p { margin: 0 0 12px; }
.venus-box label { display: block; margin-bottom: 4px; color: var(--venus-label-color); }
.venus-box input[type="tel"],
.venus-box input[type="text"],
.venus-box input[type="email"],
.venus-box input[type="password"],
.venus-box input[type="number"] {
	width: 100%;
	padding: var(--venus-input-padding);
	background: var(--venus-input-bg);
	color: var(--venus-input-text);
	border: 1px solid var(--venus-input-border);
	border-radius: var(--venus-input-radius);
	font: inherit;
	transition: border-color .15s, box-shadow .15s;
}
.venus-box input:focus {
	outline: none;
	border-color: var(--venus-input-border-focus);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--venus-input-border-focus) 20%, transparent);
}

/* buttons */
.venus-btn {
	display: inline-block;
	width: 100%;
	padding: var(--venus-btn-padding);
	background: var(--venus-btn-bg);
	color: var(--venus-btn-text);
	border: 0;
	border-radius: var(--venus-btn-radius);
	font: inherit;
	font-weight: var(--venus-btn-weight);
	cursor: pointer;
	transition: background .15s;
}
.venus-btn:hover { background: var(--venus-btn-hover-bg); }
.venus-btn:disabled { opacity: .6; cursor: default; }

.venus-btn-secondary {
	display: inline-block;
	padding: 7px 14px;
	background: var(--venus-btn2-bg);
	color: var(--venus-btn2-text);
	border: 1px solid var(--venus-btn2-border);
	border-radius: var(--venus-btn-radius);
	font: inherit;
	cursor: pointer;
}
.venus-btn-secondary:disabled { opacity: .5; cursor: default; }

.venus-linklike {
	background: none;
	border: 0;
	color: var(--venus-link-color);
	cursor: pointer;
	font: inherit;
	text-decoration: underline;
	padding: 0;
}

.venus-box a { color: var(--venus-link-color); }

/* states */
.venus-box .hidden { display: none !important; }

.venus-msg { min-height: 18px; font-size: 13px; }
.venus-msg.venus-success { color: var(--venus-msg-success); }
.venus-msg.venus-error { color: var(--venus-msg-error); }
.venus-msg.venus-info { color: var(--venus-msg-info); }

.venus-resend {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
}
.venus-countdown { color: var(--venus-msg-info); direction: ltr; }

.venus-foot { font-size: 12px; text-align: center; }

.venus-logged-in { text-align: center; }

/* 2FA overlay on wp-login */
.venus-2fa-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.venus-2fa-card {
	background: var(--venus-box-bg, #fff);
	color: var(--venus-box-text, #333);
	padding: 24px;
	border-radius: var(--venus-box-radius, 10px);
	width: 320px;
	text-align: center;
}
.venus-2fa-card input {
	width: 100%;
	padding: 10px;
	font-size: 18px;
	letter-spacing: 6px;
	text-align: center;
	background: var(--venus-input-bg, #fff);
	color: var(--venus-input-text, #333);
	border: 1px solid var(--venus-input-border, #ccc);
	border-radius: var(--venus-input-radius, 6px);
}
.venus-2fa-card .venus-btn { margin-top: 8px; }

.venus-login-notice {
	padding: 10px;
	background: var(--venus-btn2-bg, #f2ecfa);
	border-right: 4px solid var(--venus-btn-bg, #5b2d8e);
	margin: 0 0 10px;
}

/* ---------- pattern modal (admin) ---------- */
#venusModalWrap {
	position: fixed;
	z-index: 100000;
	top: 50px;
	bottom: 50px;
	right: 15vw;
	left: 15vw;
	background: #fff;
	color: #333;
	box-shadow: 0 0 12px rgba(0, 0, 0, .5);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
@media (max-width: 782px) {
	#venusModalWrap { right: 16px; left: 16px; top: 40px; bottom: 40px; }
}
.venus-modal-title {
	padding: 10px 14px;
	border-bottom: 1px solid #ddd;
	background: #f9f9f9;
	font-size: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.venus-modal-title .close { cursor: pointer; color: #aaa; font-weight: bold; }
.venus-modal-title .close:hover { color: #333; }
.venus-modal-body {
	flex: 1;
	overflow: auto;
	padding: 14px;
	text-align: justify;
}
.venus-modal-footer {
	padding: 10px 14px;
	border-top: 1px solid #ddd;
	background: #f9f9f9;
	font-size: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.venus-pattern-box label { display: inline-block; min-width: 110px; }
.venus-pattern-box .venus-pattern-status {
	background: #f4f4f4;
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 8px 12px;
	margin: 8px 0;
}
.venus-pattern-box .venus-param-row { margin: 6px 0; }
.venus-pattern-tools { margin: 6px 0 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* admin modal (venuslogin-admin.js) */
.vm-overlay {
	position: fixed; inset: 0; background: rgba(0,0,0,.55);
	z-index: 100000; display: flex; align-items: center; justify-content: center;
}
.vm-box {
	background: #fff; width: min(720px, 92vw); max-height: 82vh;
	border-radius: 8px; display: flex; flex-direction: column; overflow: hidden;
}
.vm-head {
	display: flex; justify-content: space-between; align-items: center;
	padding: 12px 16px; background: #f6f6f6; border-bottom: 1px solid #ddd;
	font-weight: 600;
}
.vm-x { cursor: pointer; color: #999; font-size: 18px; }
.vm-x:hover { color: #333; }
.vm-body { padding: 16px; overflow: auto; }

/* =====================================================================
   WooCommerce / wp-login integrations
   ====================================================================*/
.venus-wplogin-otp { margin: 16px 0; }
.venus-wplogin-otp .venus-box { margin: 0 auto; max-width: 320px; background: transparent; border: 0; box-shadow: none; }

form.venus-native-hidden > *:not(.venus-wc-otp) { display: none !important; }
.venus-wc-otp {
	border: 1px dashed #cbb3e6;
	border-radius: 8px;
	padding: 14px;
	margin: 0 0 16px;
	background: #faf7ff;
}
.venus-wc-toggle { margin-top: 8px; }
.venus-wc-msg { min-height: 16px; font-size: 13px; }

.venus-checkout-otp {
	border: 1px solid #e2d5f5;
	background: #faf7ff;
	border-radius: 8px;
	padding: 10px 16px 2px;
	margin: 16px 0;
}
.venus-checkout-otp h3 { margin-top: 8px; font-size: 15px; }
.venus-co-status { margin-inline-start: 10px; font-size: 13px; color: #1d7a34; }

/* =====================================================================
   Admin helpers
   ====================================================================*/
.venus-wrap .venus-ver { font-size: 12px; color: #888; font-weight: normal; }
.venus-wrap .venus-note {
	background: #fff;
	border: 1px solid rgba(0,0,0,.1);
	border-right: 4px solid #5b2d8e;
	padding: 8px 14px;
}
.venus-wrap .venus-shortcodes {
	margin-top: 24px;
	background: #fff;
	border: 1px solid #dcdcde;
	padding: 12px 16px;
	max-width: 900px;
}
.venus-wrap .venus-shortcodes code { font-size: 13px; }

.venus-badge {
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	background: #eee;
}
.venus-badge-success { background: #d5f5dc; color: #1d7a34; }
.venus-badge-failed { background: #fde0de; color: #c0392b; }
.venus-badge-blocked { background: #fff3cd; color: #856404; }

.venus-booklist-result { margin-top: 8px; }
.venus-booklist-result .widefat { max-width: 480px; }

/* ---------- appearance page ---------- */
.vp-swatch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.vp-swatch input[type="color"] {
	padding: 0;
	width: 42px;
	height: 30px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: none;
	cursor: pointer;
	vertical-align: middle;
}
.vp-swatch input[type="text"] {
	width: 110px;
	direction: ltr;
	text-align: left;
	font-family: Consolas, Monaco, monospace;
}
.vp-appearance-grid {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 24px;
	align-items: start;
}
@media (max-width: 960px) {
	.vp-appearance-grid { grid-template-columns: 1fr; }
}
#venus-preview-pane {
	position: sticky;
	top: 40px;
	background: #f0f0f1;
	border: 1px dashed #b0b0b5;
	border-radius: 8px;
	padding: 24px;
}
#venus-preview-pane .venus-box { margin: 0 auto; }
.vp-presets button { margin: 0 4px 4px 0; }
.vp-opt-pane { background: #fff; border: 1px solid #dcdcde; border-top: none; padding: 4px 16px 16px; }
.nav-tab-wrapper .nav-tab.vp-opt-tab.active { border-bottom-color: #fff; }
.vp-adv { margin-top: 10px; }
.vp-adv textarea { width: 100%; min-height: 140px; font-family: Consolas, Monaco, monospace; direction: ltr; }
.vp-custom-only, .vp-needs-auth { /* toggled by JS */ }