/* WebziVende+ — estilos del frontend (panel de vendedor, tienda, registro)
 * Paleta basada en la identidad de marca (logo e icono de WebziVende+). */

:root {
	--wvp-brand: #2FA854;
	--wvp-brand-dark: #146B36;
	--wvp-brand-darker: #0E4326;
	--wvp-brand-light: #E8F7EC;
	--wvp-gold: #E8C97A;
	--wvp-gold-dark: #C79A3E;
	--wvp-ink: #16241C;
	--wvp-ink-soft: #4B5A50;
	--wvp-line: #DCE8E0;
	--wvp-bg-soft: #F3FAF5;
}

.wvp-alert {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 14px;
}
.wvp-alert-success { background: var(--wvp-brand-light); border: 1px solid #b7ebc6; color: var(--wvp-brand-darker); }
.wvp-alert-error   { background: #fdecea; border: 1px solid #f5c2c0; color: #a12622; }

.wvp-notice { padding: 12px 16px; background: var(--wvp-bg-soft); border-radius: 6px; }

/* Formularios */
.wvp-form-wrap { max-width: 560px; margin: 0 auto; }
.wvp-form p { margin-bottom: 14px; }
.wvp-form label { display: block; font-weight: 600; margin-bottom: 4px; color: var(--wvp-ink); }
.wvp-form input[type="text"],
.wvp-form input[type="email"],
.wvp-form input[type="password"],
.wvp-form input[type="number"],
.wvp-form input[type="file"],
.wvp-form textarea,
.wvp-form select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--wvp-line);
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 14px;
}
.wvp-form input:focus,
.wvp-form textarea:focus,
.wvp-form select:focus {
	outline: none;
	border-color: var(--wvp-brand);
	box-shadow: 0 0 0 2px var(--wvp-brand-light);
}
.wvp-form-row { display: flex; gap: 16px; }
.wvp-form-row > span { flex: 1; }
.wvp-checkbox-inline { display: inline-block; margin-right: 12px; font-weight: 400; }

.wvp-btn {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
	font-weight: 600;
	cursor: pointer;
	border: none;
}
.wvp-btn-primary { background: var(--wvp-brand); color: #fff; }
.wvp-btn-primary:hover { background: var(--wvp-brand-dark); color: #fff; }

/* Marca: logo dentro del panel/tienda/registro en el frontend */
.wvp-brand-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}
.wvp-brand-header img { height: 40px; width: auto; display: block; }

/* Panel del vendedor */
.wvp-panel-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-bottom: 2px solid var(--wvp-line);
	margin-bottom: 24px;
}
.wvp-panel-tabs a {
	padding: 10px 18px;
	text-decoration: none;
	color: #50575e;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
}
.wvp-panel-tabs a.active,
.wvp-panel-tabs a:hover {
	color: var(--wvp-brand-dark);
	border-bottom-color: var(--wvp-brand);
}

.wvp-cards { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.wvp-card {
	flex: 1 1 200px;
	background: var(--wvp-bg-soft);
	border: 1px solid var(--wvp-line);
	border-radius: 8px;
	padding: 16px;
	border-top: 3px solid var(--wvp-brand);
}
.wvp-card-label { display: block; font-size: 13px; color: var(--wvp-ink-soft); margin-bottom: 6px; }
.wvp-card-value { display: block; font-size: 22px; font-weight: 700; color: var(--wvp-ink); }

.wvp-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.wvp-table th, .wvp-table td {
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--wvp-line);
	font-size: 14px;
}
.wvp-table th { background: var(--wvp-bg-soft); color: var(--wvp-ink); }

/* Directorio de vendedores */
.wvp-vendor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 20px;
}
.wvp-vendor-card {
	text-align: center;
	text-decoration: none;
	color: var(--wvp-ink);
	border: 1px solid var(--wvp-line);
	border-radius: 10px;
	padding: 20px 10px;
	transition: box-shadow .15s ease;
}
.wvp-vendor-card:hover { box-shadow: 0 4px 14px rgba(20,107,54,.14); border-color: var(--wvp-brand); }
.wvp-vendor-card-logo {
	width: 72px; height: 72px; margin: 0 auto 10px;
	border-radius: 50%;
	background: var(--wvp-brand);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
	font-size: 26px; font-weight: 700;
	border: 3px solid var(--wvp-gold);
}
.wvp-vendor-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.wvp-vendor-card-name { font-weight: 600; }

/* Tienda individual */
.wvp-store-banner {
	height: 220px;
	background-size: cover;
	background-position: center;
	background-color: var(--wvp-brand-darker);
	border-radius: 10px;
	margin-bottom: -50px;
}
.wvp-store-header {
	display: flex;
	gap: 20px;
	align-items: flex-end;
	background: #fff;
	padding: 16px;
	border-radius: 10px;
	margin-bottom: 24px;
}
.wvp-store-logo {
	width: 90px; height: 90px;
	border-radius: 50%;
	border: 4px solid var(--wvp-gold);
	object-fit: cover;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.wvp-store-description { color: var(--wvp-ink-soft); }
.wvp-store-rating { font-weight: 600; color: var(--wvp-gold-dark); }

.wvp-pagination { margin-top: 20px; }
.wvp-pagination .page-numbers {
	display: inline-block;
	padding: 6px 12px;
	margin-right: 4px;
	border: 1px solid var(--wvp-line);
	border-radius: 4px;
	text-decoration: none;
}
.wvp-pagination .page-numbers.current { background: var(--wvp-brand); color: #fff; border-color: var(--wvp-brand); }

/* ================= Admin (wp-admin) ================= */
.wvp-admin-wrap .form-table th { width: 240px; }

.wvp-admin-header {
	display: flex;
	align-items: center;
	gap: 14px;
	background: linear-gradient(120deg, var(--wvp-brand-darker) 0%, var(--wvp-brand-dark) 100%);
	border-radius: 10px;
	padding: 16px 20px;
	margin: 16px 0 20px;
	box-shadow: 0 2px 10px rgba(14,67,38,.18);
}
.wvp-admin-header img { height: 46px; width: auto; display: block; }
.wvp-admin-header .wvp-admin-header-text { color: #fff; }
.wvp-admin-header .wvp-admin-header-text strong { display: block; font-size: 15px; }
.wvp-admin-header .wvp-admin-header-text span { font-size: 12px; color: var(--wvp-gold); }

.wvp-admin-wrap .button-primary,
.wvp-admin-wrap input[type="submit"].button-primary {
	background: var(--wvp-brand);
	border-color: var(--wvp-brand-dark);
}
.wvp-admin-wrap .button-primary:hover {
	background: var(--wvp-brand-dark);
	border-color: var(--wvp-brand-dark);
}