/* =============================================================
   Vendor Places — Front-end styles
   ============================================================= */

:root {
    --vp-accent:        #2563eb;
    --vp-accent-hover:  #1d4ed8;
    --vp-danger:        #dc2626;
    --vp-muted:         #6b7280;
    --vp-border:        #e5e7eb;
    --vp-bg-card:       #ffffff;
    --vp-bg-form:       #f9fafb;
    --vp-radius:        8px;
    --vp-star-color:    #f59e0b;
    --vp-gap:           1.25rem;
}

/* ── Layout ───────────────────────────────────────────────── */
.vp-wrap        { max-width: 900px; margin: 0 auto; padding: 1rem 0; }
.vp-divider     { border: none; border-top: 1px solid var(--vp-border); margin: 2rem 0; }

/* ── Filter bar ───────────────────────────────────────────── */
/* .vp-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-bottom: 1.5rem;
} */
.vp-filters label  { font-weight: 600; font-size: .85rem; color: var(--vp-muted); }
.vp-filters select { padding: .4rem .6rem; border: 1px solid var(--vp-border); border-radius: var(--vp-radius); }

.vp-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.vp-filters__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    flex: 1;
}

/* ── Cards grid ───────────────────────────────────────────── */
.vp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--vp-gap);
}
.vp-card {
    background: var(--vp-bg-card);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius);
    padding: 1.25rem;
    transition: box-shadow .2s;
}
.vp-card:hover         { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.vp-card__meta         { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.vp-card__title        { margin: 0 0 .5rem; font-size: 1.1rem; }
.vp-card__title a      { text-decoration: none; color: inherit; }
.vp-card__title a:hover{ color: var(--vp-accent); }
.vp-card__desc         { color: var(--vp-muted); font-size: .9rem; margin: 0 0 .75rem; }

/* ── Badges ───────────────────────────────────────────────── */
.vp-badge {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 99px;
    background: #eff6ff;
    color: var(--vp-accent);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vp-type-badge {
    display: inline-block;
    padding: .2rem .55rem;
    border-radius: 99px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vp-type-badge--place  { background: #ecfdf5; color: #065f46; }
.vp-type-badge--vendor { background: #fef3c7; color: #92400e; }

/* ── Stars ────────────────────────────────────────────────── */
.vp-stars      { color: var(--vp-star-color); font-size: 1rem; letter-spacing: .05em; }
.vp-avg-label  { color: var(--vp-muted); font-size: .85rem; }

.vp-star-picker { display: inline-flex; gap: 2px; }
.vp-star-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    color: var(--vp-border);
    padding: 0;
    line-height: 1;
    transition: color .15s;
}
.vp-star-btn.active,
.vp-star-btn:hover { color: var(--vp-star-color); }

/* ── Buttons ──────────────────────────────────────────────── */
.vp-btn {
    display: inline-block;
    padding: .5rem 1.1rem;
    background: var(--vp-accent);
    color: #fff;
    border: none;
    border-radius: var(--vp-radius);
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}
.vp-btn:hover            { background: var(--vp-accent-hover); color: #fff; }
.vp-btn--ghost           { background: transparent; color: var(--vp-accent); border: 1px solid var(--vp-accent); }
.vp-btn--ghost:hover     { background: #eff6ff; color: var(--vp-accent); }
.vp-btn--danger          { background: var(--vp-danger); }
.vp-btn--sm              { padding: .35rem .8rem; font-size: .8rem; }
.vp-btn--xs              { padding: .2rem .5rem; font-size: .75rem; }

/* ── Links ────────────────────────────────────────────────── */
.vp-link       { color: var(--vp-accent); font-size: .85rem; text-decoration: none; }
.vp-link:hover { text-decoration: underline; }
.vp-back       { color: var(--vp-muted); font-size: .85rem; text-decoration: none; display: inline-block; margin-bottom: 1rem; }
.vp-back:hover { color: var(--vp-accent); }

/* ── Empty state ──────────────────────────────────────────── */
.vp-empty { color: var(--vp-muted); font-style: italic; }

/* ── Single view ──────────────────────────────────────────── */
.vp-single__header      { margin-bottom: 1rem; }
.vp-single__title       { margin: 0 0 .5rem; font-size: 1.8rem; }
.vp-single__meta        { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.vp-single__details     { margin: 1rem 0; }
.vp-detail-row          { display: flex; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--vp-border); }
.vp-detail-label        { font-weight: 600; min-width: 90px; color: var(--vp-muted); font-size: .9rem; }
.vp-single__description { line-height: 1.7; margin: 1.25rem 0; }
.vp-admin-actions       { display: flex; gap: .5rem; margin: 1rem 0; }

/* ── Forms ────────────────────────────────────────────────── */
.vp-form-box {
    background: var(--vp-bg-form);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.vp-form-box h3    { margin-top: 0; }
.vp-form-box p     { margin: .75rem 0; }

.vp-input {
    width: 100%;
    padding: .5rem .7rem;
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius);
    font-size: .95rem;
    box-sizing: border-box;
    transition: border-color .15s;
}
.vp-input:focus { outline: none; border-color: var(--vp-accent); }
.vp-textarea    { min-height: 100px; resize: vertical; }
.vp-required    { color: var(--vp-danger); }

/* ── Notices ──────────────────────────────────────────────── */
.vp-notice {
    padding: .75rem 1rem;
    border-radius: var(--vp-radius);
    margin-bottom: 1rem;
    font-size: .9rem;
}
.vp-notice--success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.vp-notice--error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* ── Reviews ──────────────────────────────────────────────── */
.vp-reviews h2      { margin-top: 0; }
.vp-review-list     { margin-top: 1.5rem; }
.vp-review          { border-bottom: 1px solid var(--vp-border); padding: 1rem 0; }
.vp-review:last-child { border-bottom: none; }
.vp-review__header  { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .4rem; }
.vp-review__author  { font-weight: 700; }
.vp-review__date    { color: var(--vp-muted); font-size: .8rem; margin-left: auto; }
.vp-review__body    { margin: 0; line-height: 1.6; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
    .vp-grid           { grid-template-columns: 1fr; }
    .vp-filters        { flex-direction: column; align-items: flex-start; }
    .vp-single__meta   { flex-direction: column; align-items: flex-start; }
}

.save-button {
    background-color: var(--main-color);
	&:hover {
		@media (hover: hover) {
			background-color: var(--secondary-color);
			text-decoration: none;
		}
	}
	color: var(--color-white);
	padding-block: calc(var(--spacing) * 2);
	padding-inline: calc(var(--spacing) * 4);
	border-radius: 0.25rem;
	margin-top:15px;
}

.cancel-button {
    background-color: white;
	&:hover {
		@media (hover: hover) {
			text-decoration: underline;
		}
	}
	color: var(--main-color);
    border: 1px solid var(--main-color);
	padding-block: calc(var(--spacing) * 1);
	padding-inline: calc(var(--spacing) * 4);
	border-radius: 0.25rem;
	
}

.filter-button {
    background-color: var(--main-color);
	&:hover {
		@media (hover: hover) {
			background-color: var(--secondary-color);
			text-decoration: none;
		}
	}
	color: var(--color-white);
    border: 1px solid var(--main-color);
	padding-block: calc(var(--spacing) * 1);
	padding-inline: calc(var(--spacing) * 4);
	border-radius: 0.25rem;
}