/* =========================================================
   Profile Marketplace - Estilos do Frontend
   Design simples, moderno, com foco em UX (estilo JetEngine)
   ========================================================= */

:root {
	--pm-primary: #6c5ce7;
	--pm-primary-dark: #5a4bd1;
	--pm-premium: #f5a623;
	--pm-success: #2ecc71;
	--pm-error: #e74c3c;
	--pm-bg: #f7f7fb;
	--pm-border: #e3e3ee;
	--pm-text: #2d2d3a;
	--pm-radius: 10px;
}

.pm-notice {
	padding: 12px 16px;
	border-radius: var(--pm-radius);
	margin-bottom: 16px;
	font-size: 14px;
}
.pm-notice-success { background: #e9fbf0; color: #1a7d43; border: 1px solid #b9ecd0; }
.pm-notice-error   { background: #fdeeed; color: #b0332a; border: 1px solid #f6c7c3; }
.pm-notice-info    { background: #eef1fd; color: #3c4bb5; border: 1px solid #cfd7fa; }

/* --------- Autenticação (cadastro/login) --------- */
.pm-auth-wrapper {
	max-width: 420px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius);
	padding: 24px;
	box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.pm-auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.pm-tab-btn {
	flex: 1;
	padding: 10px;
	border: none;
	background: var(--pm-bg);
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
	color: var(--pm-text);
	transition: all .2s ease;
}
.pm-tab-btn.active { background: var(--pm-primary); color: #fff; }
.pm-tab-content { display: none; }
.pm-tab-content.active { display: block; }

.pm-form { display: flex; flex-direction: column; gap: 10px; }
.pm-form label { font-weight: 600; font-size: 13px; color: var(--pm-text); margin-top: 6px; }
.pm-form input[type="text"],
.pm-form input[type="email"],
.pm-form input[type="password"],
.pm-form input[type="number"],
.pm-form select,
.pm-form textarea {
	padding: 10px 12px;
	border: 1px solid var(--pm-border);
	border-radius: 8px;
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
}
.pm-form-hint { font-size: 12px; color: #888; margin-top: 4px; }
.pm-form-feedback { font-size: 13px; margin-left: 10px; }

.pm-btn {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 8px;
	border: 1px solid var(--pm-border);
	background: #fff;
	cursor: pointer;
	font-weight: 600;
	text-decoration: none;
	color: var(--pm-text);
	transition: transform .1s ease, box-shadow .15s ease;
}
.pm-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.pm-btn-primary { background: var(--pm-primary); border-color: var(--pm-primary); color: #fff; }
.pm-btn-primary:hover { background: var(--pm-primary-dark); }
.pm-btn-premium { background: var(--pm-premium); border-color: var(--pm-premium); color: #fff; }

/* --------- Badges --------- */
.pm-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	background: #eee;
	color: #555;
}
.pm-badge-premium { background: linear-gradient(90deg, #f5a623, #f7c14e); color: #fff; }
.pm-badge-status.pm-status-active { background: #e6fbee; color: #1a7d43; }
.pm-badge-status.pm-status-pending { background: #fff6e0; color: #a6720b; }
.pm-badge-status.pm-status-inactive { background: #fdeeed; color: #b0332a; }

/* --------- Dashboard --------- */
.pm-dashboard {
	max-width: 780px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius);
	padding: 24px;
}
.pm-dashboard-header { margin-bottom: 16px; }
.pm-status-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.pm-expiration { font-size: 13px; color: #777; }

.pm-upgrade-card {
	background: linear-gradient(135deg, #fff7e8, #fff);
	border: 1px solid #ffe2ad;
	border-radius: var(--pm-radius);
	padding: 18px;
	margin-bottom: 20px;
}
.pm-upgrade-card h3 { margin: 0 0 6px; }

.pm-media-section {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--pm-border);
}
.pm-gallery-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}
.pm-gallery-item { position: relative; }
.pm-gallery-item img { border-radius: 8px; display: block; width: 100px; height: 100px; object-fit: cover; }
.pm-remove-photo {
	position: absolute;
	top: -6px;
	right: -6px;
	background: var(--pm-error);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	cursor: pointer;
	line-height: 1;
}

/* --------- Listagem --------- */
.pm-listing-wrapper { max-width: 1100px; margin: 0 auto; }
.pm-filters {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	align-items: center;
}
.pm-filters input[type="text"], .pm-filters select {
	padding: 10px 14px;
	border-radius: 8px;
	border: 1px solid var(--pm-border);
	font-size: 14px;
}
.pm-filter-checkbox { display: flex; align-items: center; gap: 6px; font-size: 14px; }

.pm-listing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
}
.pm-card {
	background: #fff;
	border: 1px solid var(--pm-border);
	border-radius: var(--pm-radius);
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
	text-decoration: none;
	color: var(--pm-text);
	display: block;
}
.pm-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.pm-card-premium { border: 2px solid var(--pm-premium); order: -1; }
.pm-card-image { width: 100%; height: 160px; object-fit: cover; background: var(--pm-bg); }
.pm-card-body { padding: 12px; }
.pm-card-name { font-weight: 700; margin: 0 0 4px; display: flex; justify-content: space-between; align-items: center; }
.pm-card-city { font-size: 13px; color: #888; margin: 0; }
.pm-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.pm-pagination button {
	padding: 6px 12px;
	border-radius: 6px;
	border: 1px solid var(--pm-border);
	background: #fff;
	cursor: pointer;
}
.pm-pagination button.active { background: var(--pm-primary); color: #fff; }
.pm-loading { text-align: center; color: #999; grid-column: 1/-1; }

/* --------- Página individual --------- */
.pm-single-profile { max-width: 780px; margin: 0 auto; }
.pm-single-header { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.pm-single-header img { border-radius: var(--pm-radius); width: 120px; height: 120px; object-fit: cover; }
.pm-single-city { color: #888; }
.pm-single-audio { margin-bottom: 16px; }
.pm-single-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.pm-single-gallery img { width: 150px; height: 150px; object-fit: cover; border-radius: 8px; }
.pm-single-contact { margin-top: 16px; padding: 12px; background: var(--pm-bg); border-radius: 8px; }

@media (max-width: 600px) {
	.pm-single-header { flex-direction: column; align-items: flex-start; }
}