/**
 * Provatic header buttons — front-end styling.
 *
 * Scoped under .provatic-header-btn so theme conflicts are minimized. No
 * dependency on .provatic-wrap admin tokens (admin variables don't resolve
 * on the public front-end).
 */

.provatic-header-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid currentColor;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.2;
	font-family: inherit;
	cursor: pointer;
	transition: opacity 0.15s ease, background 0.15s ease;
	white-space: nowrap;
	/* Anchor for the cart count badge — its absolute positioning targets
	   the button as the containing block so it floats at the corner
	   without expanding the button's inline width. */
	position: relative;
}

.provatic-header-btn:hover { opacity: 0.85; }

.provatic-header-btn-primary {
	background: #497ae8;
	color: #fff;
	border-color: #497ae8;
}
.provatic-header-btn-primary:hover { background: #3a63ba; border-color: #3a63ba; opacity: 1; }

.provatic-header-btn-icon-only {
	padding: 8px;
	border-color: transparent;
}
.provatic-header-btn-icon-only .provatic-btn-label { display: none; }

.provatic-header-btn .provatic-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.provatic-header-btn-cart .provatic-count {
	/* Float at the button's top-right corner — does NOT affect the
	   button's inline width, so all three widgets (Login/Cart/Search)
	   share identical box dimensions when given identical padding values. */
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	padding: 2px 6px;
	background: #497ae8;
	color: #fff;
	border-radius: 9999px;
	font-size: 11px;
	line-height: 1.4;
	font-weight: 600;
	text-align: center;
	box-shadow: 0 0 0 2px var(--provatic-page-bg, #fff);
}

.provatic-header-btn-cart .provatic-count[data-empty="true"] {
	display: none;
}

/* ---- Login modal ---- */

.provatic-login-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
}

.provatic-login-modal.is-open { display: flex; }

.provatic-login-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
	cursor: pointer;
}

/* The dialog is now just a positioning shell — the inner
   `.provatic-members-login-card` (rendered by Login_Form_Renderer) provides
   the visible card (background, radius, padding, shadow). Keeping the
   dialog visual-less means the page surface, modal surface, and admin Live
   Preview all show the SAME card. The close button is positioned over the
   dialog so it lands at the card's top-right corner. */
.provatic-login-modal-dialog {
	position: relative;
	color: #1a202c;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* The "X" close button. We override `!important` because page builders
   (Elementor in particular) inject high-specificity button rules that turn
   our subtle ghost button into a blue circle. Aggressive override is the
   cost of running inside arbitrary themes. */
.provatic-login-modal-close {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 50% !important;
	font-size: 22px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	color: #9ca3af !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.15s ease, color 0.15s ease !important;
	box-shadow: none !important;
	text-shadow: none !important;
	font-weight: 400 !important;
}

.provatic-login-modal-close:hover,
.provatic-login-modal-close:focus {
	background: rgba(15, 23, 42, 0.06) !important;
	color: #111827 !important;
	outline: none !important;
}

/* Fallback form styles — only used when the Members addon is inactive and
   render_login_modal_fallback() renders a minimal wp-login.php form using
   the legacy `.provatic-login-modal-*` classes. With Members active, the
   shared Login_Form_Renderer outputs a `.provatic-members-login-card` and
   these rules don't apply. */
.provatic-login-modal-title {
	margin: 0 0 18px;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
}

.provatic-login-modal-label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 500;
	color: #374151;
}

.provatic-login-modal-dialog > form input[type="text"],
.provatic-login-modal-dialog > form input[type="email"],
.provatic-login-modal-dialog > form input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	margin-bottom: 14px;
	border: 1px solid #e2e4e9;
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
}

.provatic-login-modal-submit {
	width: 100%;
	padding: 12px;
	background: #497ae8;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	margin-top: 4px;
}

.provatic-login-modal-submit:hover { background: #3a63ba; }

.provatic-login-modal-links {
	margin-top: 14px;
	text-align: center;
	font-size: 13px;
	color: #6b7280;
}

.provatic-login-modal-links a {
	color: #497ae8;
	text-decoration: none;
}

.provatic-login-modal-links .sep { margin: 0 6px; }

/* ---- Search overlay ---- */

.provatic-search-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 32px 24px;
	background: rgba(15, 23, 42, 0.92);
	z-index: 100000;
}

.provatic-search-overlay.is-open { display: block; }

.provatic-search-overlay-backdrop {
	position: fixed;
	inset: 0;
	z-index: -1;
}

.provatic-search-overlay-form {
	display: flex;
	gap: 8px;
	align-items: center;
	max-width: 720px;
	margin: 0 auto;
}

.provatic-search-overlay-form input[type="search"] {
	flex: 1;
	padding: 12px 16px;
	font-size: 16px;
	border: none;
	border-radius: 8px;
	background: #fff;
}

.provatic-search-overlay-form button[type="submit"] {
	padding: 12px 22px;
	background: #497ae8;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	cursor: pointer;
}

.provatic-search-overlay-close {
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	font-size: 22px;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	cursor: pointer;
}