/**
 * 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;
	/* Match the theme's core button box metrics (theme.json styles.elements.button:
	   0.7em/1.4em padding, small font, weight 500) so this header button lines up in
	   size with the neighbouring core-button CTAs. The `- 1px` compensates for this
	   button's 1px border so its outer height equals the border-less solid CTA. */
	padding: calc(0.7em - 1px) calc(1.4em - 1px);
	border: 1px solid currentColor;
	border-radius: 6px;
	background: transparent;
	color: inherit;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small, 0.9rem);
	line-height: 1.5;
	font-weight: 500;
	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;
}

/* Login CTA (shortcode variant="cta") — a real core block button rendered
   outline, so its box (padding/font/height) comes from the theme's button
   element and matches the neighbouring solid CTAs everywhere, including the
   mobile navigation overlay. Only the outline look is set here; the size is
   NOT touched. */
.provatic-login-cta .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--contrast, #111827);
	border: 1px solid currentColor;
}
.provatic-login-cta .wp-block-button__link:hover { opacity: 0.85; }

.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;
	/* Monochrome, from the palette — it was the one blue badge on a black/white UI. */
	background: var(--wp--preset--color--contrast, #0a0a0a);
	color: var(--wp--preset--color--base, #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;
}

/* Results, in the overlay. No separate results page: there is no search template in
   the theme, and a preview has no route to send one to. */
.provatic-search-overlay-panel {
	max-width: 720px;
	margin: 0 auto;
}

.provatic-search-results {
	max-width: 720px;
	margin: 16px auto 0;
	max-height: min(60vh, 520px);
	overflow-y: auto;
	background: #fff;
	border-radius: 12px;
}

.provatic-search-results:empty { display: none; }

.provatic-search-hint {
	margin: 0;
	padding: 18px 20px;
	color: #6b7280;
	font-size: 14px;
}

.provatic-search-group + .provatic-search-group { border-top: 1px solid #e2e4e9; }

.provatic-search-group__label {
	margin: 0;
	padding: 14px 20px 6px;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6b7280;
}

.provatic-search-list { list-style: none; margin: 0; padding: 0 0 8px; }

.provatic-search-item a {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px 20px;
	color: #1a202c;
	text-decoration: none;
}

.provatic-search-item a:hover,
.provatic-search-item a:focus { background: #f7f8fa; }

.provatic-search-thumb {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: #f1f2f5 center / cover no-repeat;
}

.provatic-search-text { display: flex; flex-direction: column; min-width: 0; }
.provatic-search-title { font-size: 15px; font-weight: 600; }

.provatic-search-excerpt {
	font-size: 13px;
	color: #6b7280;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}