/*
Theme Name: ListingHive Child - Marketplace Servicios
Template: listinghive
Author: joliver
Description: Tema hijo de ListingHive para el marketplace de servicios profesionales". Aqui van las personalizaciones de estilo especificas del proyecto, sin modificar el tema padre.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: listinghive-child
*/

/* Fase 4.6 — Dashboard de créditos del profesional (marketplace-servicios,
   includes/credits-dashboard.php, shortcode [ms_credits_dashboard]). Estilo
   mínimo: la tabla colapsa a lista de tarjetas en móvil usando los atributos
   data-label ya presentes en cada <td> del shortcode. */
.ms-credits-dashboard-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin-bottom: 1.5em;
}

.ms-credits-dashboard-balance-label {
	display: block;
	font-size: 0.85em;
	opacity: 0.75;
}

.ms-credits-dashboard-balance-amount {
	display: block;
	font-size: 1.8em;
	font-weight: 700;
}

.ms-credits-dashboard-buy-button {
	display: inline-block;
	padding: 0.6em 1.2em;
	border-radius: 4px;
	background: #2271b1;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.ms-credits-dashboard-table-wrap {
	overflow-x: auto;
}

.ms-credits-dashboard-table {
	width: 100%;
	border-collapse: collapse;
}

.ms-credits-dashboard-table th,
.ms-credits-dashboard-table td {
	padding: 0.6em 0.8em;
	text-align: left;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ms-credits-amount-positive {
	color: #1a7f37;
}

.ms-credits-amount-negative {
	color: #c62828;
}

.ms-credits-dashboard-pagination {
	display: flex;
	justify-content: space-between;
	margin-top: 1em;
}

/* Small screens: collapse the table into a stacked card list so nothing
   overflows horizontally on mobile. */
@media (max-width: 600px) {
	.ms-credits-dashboard-table thead {
		display: none;
	}

	.ms-credits-dashboard-table,
	.ms-credits-dashboard-table tbody,
	.ms-credits-dashboard-table tr,
	.ms-credits-dashboard-table td {
		display: block;
		width: 100%;
	}

	.ms-credits-dashboard-table tr {
		margin-bottom: 1em;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		padding: 0.4em 0.8em;
	}

	.ms-credits-dashboard-table td {
		border-bottom: none;
		display: flex;
		justify-content: space-between;
		gap: 1em;
	}

	.ms-credits-dashboard-table td::before {
		content: attr(data-label);
		font-weight: 600;
		opacity: 0.7;
	}
}

/* -------------------------------------------------------------------------
 * Fase 5.6 — Proposal confirmation page (client contact details).
 * Presentation only; access control + markup live in the plugin
 * (marketplace-servicios/includes/proposal-confirmation.php).
 * ------------------------------------------------------------------------- */

.ms-proposal-confirmation-page {
	max-width: 720px;
	margin: 0 auto;
}

.ms-proposal-confirmation-header {
	margin-bottom: 1.5em;
}

.ms-proposal-confirmation-intro {
	opacity: 0.8;
}

.ms-proposal-confirmation-contact,
.ms-proposal-confirmation-proposal,
.ms-proposal-confirmation-request {
	margin-bottom: 1.5em;
	padding: 1.25em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 6px;
}

.ms-proposal-confirmation-contact {
	background: rgba(0, 0, 0, 0.02);
}

/* Fase 5.10 — "Tu propuesta" / "Your proposal": the professional's own quote
 * message + optional quoted amount, shown alongside the client contact data. */
.ms-proposal-confirmation-proposal-message {
	white-space: pre-line;
	word-break: break-word;
	margin: 0.5em 0 1em;
}

.ms-proposal-confirmation-proposal-amount {
	margin: 0;
	font-size: 0.95em;
}

.ms-proposal-confirmation-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.5em 1.25em;
	margin: 0.75em 0 1.25em;
}

.ms-proposal-confirmation-list dt {
	font-weight: 600;
	opacity: 0.7;
}

.ms-proposal-confirmation-list dd {
	margin: 0;
	word-break: break-word;
}

.ms-proposal-confirmation-chat-button {
	display: inline-block;
	padding: 0.6em 1.4em;
	border-radius: 4px;
	background: #2271b1;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}

.ms-proposal-confirmation-chat-button:hover,
.ms-proposal-confirmation-chat-button:focus {
	background: #185a8c;
	color: #fff;
}

.ms-proposal-confirmation-cost {
	margin-top: 1em;
	font-size: 0.95em;
	opacity: 0.8;
}

.ms-proposal-confirmation-denied,
.ms-proposal-confirmation-error {
	padding: 1em 1.25em;
	border-radius: 6px;
	background: rgba(200, 0, 0, 0.06);
	border: 1px solid rgba(200, 0, 0, 0.2);
}

@media (max-width: 600px) {
	.ms-proposal-confirmation-list {
		grid-template-columns: 1fr;
		gap: 0.15em 0;
	}

	.ms-proposal-confirmation-list dd {
		margin-bottom: 0.75em;
	}
}

/* -------------------------------------------------------------------------
 * Fase 5.7 — Professional dashboard: sent proposals ("Mis propuestas").
 * Presentation only; access control + markup live in the plugin
 * (marketplace-servicios/includes/proposals-dashboard.php). Read-only page:
 * no form styling beyond the simple status filter.
 * ------------------------------------------------------------------------- */

.ms-proposals-dashboard-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin-bottom: 1.5em;
}

.ms-proposals-dashboard-filter {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.ms-proposals-dashboard-filter select {
	padding: 0.4em 0.6em;
}

.ms-proposals-dashboard-filter-submit {
	padding: 0.4em 1em;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: transparent;
	cursor: pointer;
}

.ms-proposals-dashboard-table-wrap {
	overflow-x: auto;
}

.ms-proposals-dashboard-table {
	width: 100%;
	border-collapse: collapse;
}

.ms-proposals-dashboard-table th,
.ms-proposals-dashboard-table td {
	padding: 0.6em 0.8em;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.ms-proposals-dashboard-request-title {
	display: block;
}

.ms-proposals-dashboard-request-meta {
	display: block;
	font-size: 0.85em;
	opacity: 0.75;
}

.ms-proposals-dashboard-status {
	display: inline-block;
	padding: 0.2em 0.6em;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 600;
	background: rgba(0, 0, 0, 0.06);
}

.ms-proposals-dashboard-status-ms_vista {
	background: rgba(26, 127, 55, 0.12);
	color: #1a7f37;
}

.ms-proposals-dashboard-actions {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.ms-proposals-dashboard-action-link {
	white-space: nowrap;
}

.ms-proposals-dashboard-pagination {
	display: flex;
	justify-content: space-between;
	margin-top: 1em;
}

.ms-proposals-dashboard-denied {
	padding: 1em 1.25em;
	border-radius: 6px;
	background: rgba(200, 0, 0, 0.06);
	border: 1px solid rgba(200, 0, 0, 0.2);
}

/* Small screens: collapse the table into a stacked card list, same
   data-label technique as ms-credits-dashboard-table. */
@media (max-width: 600px) {
	.ms-proposals-dashboard-table thead {
		display: none;
	}

	.ms-proposals-dashboard-table,
	.ms-proposals-dashboard-table tbody,
	.ms-proposals-dashboard-table tr,
	.ms-proposals-dashboard-table td {
		display: block;
		width: 100%;
	}

	.ms-proposals-dashboard-table tr {
		margin-bottom: 1em;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 4px;
		padding: 0.4em 0.8em;
	}

	.ms-proposals-dashboard-table td {
		border-bottom: none;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 1em;
	}

	.ms-proposals-dashboard-table td::before {
		content: attr(data-label);
		font-weight: 600;
		opacity: 0.7;
	}

	.ms-proposals-dashboard-actions {
		align-items: flex-end;
	}
}

/* Fase 5.12 — mensaje de "Detectar ubicación" cuando la geolocalización no
   puede funcionar (contexto no seguro / API no soportada), inyectado por
   marketplace-servicios/assets/js/geolocation-fixes.js dentro del wrapper
   data-component="location" del formulario de búsqueda de solicitudes. */
.ms-geolocation-message {
	width: 100%;
	margin: 0.4em 0 0;
	font-size: 0.85em;
	color: #c0392b;
}

/* Fase 5.15 — resumen de valoración del profesional (estrellas + media + nº
   de reviews), compartido por (M2) el bloque "Propuestas recibidas" del
   autor y (M3) el bloque "Profesionales que han enviado propuesta" para
   terceros/anónimos. Estrellas propias en <span> (no depende del componente
   JS "rating" de HivePress, que no está registrado en este sitio — ver
   includes/vendor-rating.php), pero reutiliza los nombres de clase
   hp-rating/hp-rating__details para heredar look-and-feel del perfil
   público. */
.ms-vendor-rating {
	display: inline-flex;
	align-items: center;
	margin-left: 0.5em;
	color: inherit;
	text-decoration: none;
	vertical-align: middle;
}

.ms-vendor-rating:hover,
.ms-vendor-rating:focus {
	text-decoration: underline;
}

.ms-vendor-rating--empty {
	font-size: 0.85em;
	opacity: 0.7;
}

.ms-vendor-rating-inner {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.ms-vendor-rating-stars {
	display: inline-flex;
	line-height: 1;
}

.ms-vendor-rating-star {
	position: relative;
	display: inline-block;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.15);
}

.ms-vendor-rating-star:not(:first-child) {
	margin-left: 2px;
}

.ms-vendor-rating-star::before {
	content: "\2605"; /* ★ */
}

.ms-vendor-rating-star--full {
	color: #ffc107;
}

.ms-vendor-rating-star--half .ms-vendor-rating-star-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	overflow: hidden;
	color: #ffc107;
}

.ms-vendor-rating-star--half .ms-vendor-rating-star-fill::before {
	content: "\2605"; /* ★ */
}

.ms-vendor-rating-details {
	white-space: nowrap;
	font-size: 0.9em;
}

.ms-vendor-rating-value {
	font-weight: 600;
	margin-right: 0.25em;
}

.ms-vendor-rating-count {
	opacity: 0.75;
}

/* M3 — bloque de terceros/anónimos: solo nombre + valoración, sin contenido
   de propuesta ni contacto. */
.ms-proposal-vendors {
	margin: 1.5em 0;
}

.ms-proposal-vendors-heading {
	margin-bottom: 0.75em;
}

.ms-proposal-vendors-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.ms-proposal-vendors-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3em;
	padding: 0.6em 0.8em;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 6px;
}

.ms-proposal-vendors-name {
	font-weight: 600;
}

@media (max-width: 600px) {
	.ms-proposal-vendors-item {
		flex-direction: column;
		align-items: flex-start;
	}

	.ms-vendor-rating {
		margin-left: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Fase 5.17 — Incomplete-vendor onboarding banner (persistent).
 * Rendered from the plugin on wp_body_open; sits at the very top of the page.
 * ------------------------------------------------------------------------- */

.ms-vendor-onboarding-banner {
	background: #fff4e5;
	border-bottom: 1px solid #f0c98a;
	color: #6a4b12;
	font-size: 0.95em;
}

.ms-vendor-onboarding-banner__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.7em 1em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6em 1em;
	text-align: center;
}

.ms-vendor-onboarding-banner__text {
	line-height: 1.35;
}

.ms-vendor-onboarding-banner__button {
	flex: none;
	display: inline-block;
	padding: 0.45em 1.1em;
	background: #d98c1f;
	color: #fff;
	border-radius: 5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.ms-vendor-onboarding-banner__button:hover,
.ms-vendor-onboarding-banner__button:focus {
	background: #b8720f;
	color: #fff;
}

.ms-proposal-action--incomplete-vendor {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6em;
}

@media (max-width: 600px) {
	.ms-vendor-onboarding-banner__inner {
		flex-direction: column;
	}
}

/* ---------------------------------------------------------------------------
 * Fase 5.19 — Published-vendor-without-categories banner (persistent).
 * Same layout as the fase-5.17 onboarding banner, distinct (info/blue) tone
 * so the two are visually distinguishable; they never render at the same time
 * (mutually exclusive by vendor status, see includes/vendor-categories.php).
 * ------------------------------------------------------------------------- */

.ms-vendor-categories-banner {
	background: #e5f1fb;
	border-bottom: 1px solid #a9cdec;
	color: #123a5e;
	font-size: 0.95em;
}

.ms-vendor-categories-banner__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.7em 1em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6em 1em;
	text-align: center;
}

.ms-vendor-categories-banner__text {
	line-height: 1.35;
}

.ms-vendor-categories-banner__button {
	flex: none;
	display: inline-block;
	padding: 0.45em 1.1em;
	background: #1f6fb8;
	color: #fff;
	border-radius: 5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.ms-vendor-categories-banner__button:hover,
.ms-vendor-categories-banner__button:focus {
	background: #16548c;
	color: #fff;
}

@media (max-width: 600px) {
	.ms-vendor-categories-banner__inner {
		flex-direction: column;
	}
}

/* ---------------------------------------------------------------------------
 * Fase 5.19 (fix UX) — Scroll jump when ticking checkboxes (categories field).
 *
 * Root cause: a CSS cascade conflict between HivePress and the parent theme,
 * NOT the cascade script. Both style the same selector:
 *
 *   hivepress/assets/css/frontend.min.css   (loads first)
 *     .hp-field input[type=checkbox] { visibility: visible !important; ... }
 *   listinghive/vendor/.../frontend.min.css (loads LAST)
 *     .hp-field input[type=checkbox] { opacity:0; position:absolute; ... }
 *
 * The theme wins on `opacity`/`position` (it loads later, same specificity)
 * but HivePress wins on `visibility` (!important beats a later normal
 * declaration). The native input therefore ends up INVISIBLE (opacity:0) and
 * OUT OF FLOW (position:absolute) yet still FOCUSABLE (visibility:visible) —
 * with no left/top of its own. Clicking a label focuses that control, and the
 * browser scrolls to bring the focused element into view, which is why the
 * page jumps and the category block leaves the viewport (worse the further
 * down the list the checkbox is: the further the browser has to scroll).
 *
 * Fix: anchor the invisible input exactly on top of the fake checkbox its
 * sibling <span> draws (span::before is 18x18 at left:0/top:3px), making the
 * label its containing block. Focusing it then scrolls nowhere, because it is
 * already where the user just clicked. Deliberately NOT hiding it with
 * visibility/display: keeping it focusable preserves keyboard navigation and
 * screen-reader behaviour for every HivePress checkbox on the site.
 *
 * Only sets properties neither stylesheet declares for the input itself
 * (left/top/width/height) plus `position` on the label, so no !important is
 * needed even though this file loads before the parent theme's CSS.
 * --------------------------------------------------------------------------- */

.hp-field--checkbox {
	position: relative;
}

.hp-field input[type="checkbox"],
.hp-field input[type="radio"] {
	left: 0;
	top: 3px;
	width: 18px;
	height: 18px;
}

/* ---------------------------------------------------------------------------
 * Fase 5.22 (punto 4) — Sidebar menu on our own account pages (Notificaciones,
 * Mis créditos, Mis propuestas). Markup rendered by
 * ms_render_account_page_with_sidebar() (includes/account-sidebar.php) reuses
 * HivePress's own `.hp-row` / `.hp-col-sm-*` grid classes (already loaded
 * sitewide by hivepress/assets/css/grid.min.css), so only spacing/responsive
 * behaviour is needed here — same collapse-to-stack breakpoint HivePress's
 * own grid uses for `hp-col-sm-*`.
 * --------------------------------------------------------------------------- */

.ms-account-page-row {
	align-items: flex-start;
}

.ms-account-page-row .hp-page__sidebar {
	margin-bottom: 2em;
}

@media (max-width: 767px) {
	.ms-account-page-row {
		flex-direction: column;
	}

	.ms-account-page-row .hp-page__sidebar,
	.ms-account-page-row .hp-page__content {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Fase 5.22 (punto 3) — Lead cost shown to every visitor on the requests
 * listing card and the request detail page.
 * --------------------------------------------------------------------------- */

.ms-lead-price {
	font-weight: 600;
	margin: 0 0 0.5em;
}

/* ---------------------------------------------------------------------------
 * Fase 5.22 (punto 2) — Anonymous visitor CTA on the request detail page
 * (replaces the previously-empty proposal action block).
 * --------------------------------------------------------------------------- */

.ms-proposal-action--anonymous {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.ms-proposal-anonymous-hint {
	margin: 0;
}

@media (max-width: 480px) {
	.ms-proposal-action--anonymous .hp-button {
		width: 100%;
		text-align: center;
	}
}