/* =============================================================
   Owambe Connect — Vendor Dashboard Styles
   Absorbed from plugin into theme for full visual ownership.
   ============================================================= */

.oc-vd {
	background: #FAF7F2;
	min-height: 70vh;
	padding: 32px 24px 64px;
	position: relative;
	box-shadow: 0 0 0 100vmax #FAF7F2;
	clip-path: inset(0 -100vmax);
}
.oc-vd__container { max-width: 1200px; margin: 0 auto; padding: 0 22px; }
@media (max-width: 600px) { .oc-vd__container { padding: 0 6px; } }
@media (max-width: 480px) { .oc-vd__container { padding: 0 2px; } }
.oc-vd, .oc-vd * { box-sizing: border-box; }

/* Breadcrumb + alerts */
.oc-vd__crumbs { font-size: 13px; color: #6B6361; margin: 0 0 18px; display: flex; gap: 6px; align-items: center; }
.oc-vd__crumbs a { color: #6B6361; text-decoration: none; }
.oc-vd__crumbs a:hover { color: #6E0F2C; text-decoration: underline; }
.oc-vd__crumb-current { color: #1F1B1A; font-weight: 500; }
.oc-vd__alert { padding: 12px 16px; border-radius: 8px; margin: 0 0 16px; border-left: 4px solid; font-size: 14px; }
.oc-vd__alert--success { background: #E9F5EF; border-color: #2E7D5B; color: #1F4D3A; }
.oc-vd__alert--error   { background: #FBECEF; border-color: #B0354F; color: #4A0A1E; }

/* Layout */
.oc-vd__layout { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .oc-vd__layout { grid-template-columns: 280px 1fr; gap: 24px; } }

/* Sidebar */
.oc-vd__sidebar { background: #fff; border: 1px solid #E4DDD2; border-radius: 14px; padding: 20px 16px; align-self: start; }
@media (min-width: 900px) { .oc-vd__sidebar { position: sticky; top: 24px; } }

.oc-vd__profile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid #EFEAE2; margin-bottom: 14px; text-align: center; }
.oc-vd__avatar-wrap { position: relative; width: 84px; height: 84px; flex-shrink: 0; cursor: pointer; }
.oc-vd__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.oc-vd__ring-bg { fill: none; stroke: #EFEAE2; stroke-width: 2.4; }
.oc-vd__ring-fg { fill: none; stroke-width: 2.8; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.oc-vd__avatar { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 14px; overflow: hidden; background: #FAF7F2; border: 1px solid #E4DDD2; }
.oc-vd__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-vd__avatar-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-size: 2rem; color: #6E0F2C; font-weight: 700; }
.oc-vd__avatar-star { position: absolute; top: -2px; right: -2px; width: 22px; height: 22px; border-radius: 50%; background: #C9A961; color: #1F1B1A; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.oc-vd__profile-meta { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.oc-vd__profile-meta strong { font-size: 15px; line-height: 1.25; color: #1F1B1A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; font-family: Georgia, serif; }
.oc-vd__profile-meta small { font-size: 12px; color: #6B6361; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.oc-vd__profile-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }
.oc-vd__status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c); background: color-mix(in srgb, var(--c) 12%, white); border: 1px solid color-mix(in srgb, var(--c) 25%, white); }
.oc-vd__cmp-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--c); background: color-mix(in srgb, var(--c) 10%, white); border: 1px solid color-mix(in srgb, var(--c) 30%, white); cursor: pointer; font-family: inherit; transition: all .15s; }
.oc-vd__cmp-pill:hover { background: var(--c); color: #fff; }

.oc-vd__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.oc-vd__menu-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: transparent; border: 1px solid transparent; border-radius: 10px; color: #1F1B1A; font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; transition: all .15s; }
.oc-vd__menu-btn:hover { background: #FAF7F2; }
.oc-vd__menu-btn.is-active { background: #6E0F2C; color: #fff; }
.oc-vd__menu-btn .dashicons { font-size: 18px; width: 18px; height: 18px; flex-shrink: 0; }

.oc-vd__menu-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid #EFEAE2; display: flex; flex-direction: column; gap: 4px; }
.oc-vd__menu-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: #6B6361; font-size: 13px; font-weight: 500; transition: all .15s; }
.oc-vd__menu-link:hover { background: #FAF7F2; color: #6E0F2C; }
.oc-vd__menu-link--logout:hover { color: #B0354F; }
.oc-vd__menu-link .dashicons { font-size: 15px; width: 15px; height: 15px; }

/* Content area */
.oc-vd__content { min-width: 0; }
.oc-vd__panel { display: none; }
.oc-vd__panel.is-active { display: block; animation: oc-fade .25s ease; }
@keyframes oc-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.oc-vd__panel-head { margin: 0 0 18px; }
.oc-vd__panel-head h1 { font-family: Georgia, serif; font-size: 1.8rem; color: #1F1B1A; margin: 0 0 4px; }
.oc-vd__panel-head p { color: #6B6361; margin: 0; font-size: 14px; }

.oc-vd__card { background: #fff; border: 1px solid #E4DDD2; border-radius: 12px; padding: 22px 24px; margin-bottom: 14px; }
.oc-vd__card h2 { font-family: Georgia, serif; color: #6E0F2C; font-size: 1.05rem; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid #C9A961; }
.oc-vd__card h2 small { display: inline-block; vertical-align: middle; margin-left: 6px; }

/* Overview specifics */
.oc-vd__status-card { background: #fff; border: 1px solid #E4DDD2; border-left: 4px solid var(--c, #6B6361); border-radius: 12px; padding: 18px 22px; display: flex; gap: 16px; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.oc-vd__status-card--draft    { --c: #6B6361; }
.oc-vd__status-card--pending  { --c: #B8860B; }
.oc-vd__status-card--publish  { --c: #2E7D5B; }
.oc-vd__status-card--rejected { --c: #B0354F; }
.oc-vd__btn:disabled { opacity: .55; cursor: not-allowed; }
.oc-vd__btn:disabled:hover { background: #6E0F2C; }
.oc-vd__status-card small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6B6361; margin-bottom: 4px; }
.oc-vd__status-card strong { font-family: Georgia, serif; font-size: 1.3rem; color: #1F1B1A; }
.oc-vd__status-card p { margin: 4px 0 0; color: #6B6361; font-size: 13px; }
.oc-vd__status-card em { color: #1F1B1A; font-style: italic; }

.oc-vd__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 14px; }
.oc-vd__stat { background: #fff; border: 1px solid #E4DDD2; border-radius: 12px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; }
.oc-vd__stat .dashicons { font-size: 22px; width: 22px; height: 22px; color: #C9A961; opacity: .8; }
.oc-vd__stat strong { display: block; font-family: Georgia, serif; font-size: 1.3rem; color: #1F1B1A; line-height: 1.1; }
.oc-vd__stat small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #6B6361; margin-top: 2px; }

.oc-vd__quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.oc-vd__action { background: #fff; border: 1px solid #E4DDD2; border-radius: 12px; padding: 16px 18px; display: flex; gap: 12px; align-items: center; cursor: pointer; text-align: left; transition: all .15s; font-family: inherit; }
.oc-vd__action:hover { border-color: #6E0F2C; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(110,15,44,.08); }
.oc-vd__action .dashicons { font-size: 22px; width: 22px; height: 22px; color: #6E0F2C; flex-shrink: 0; }
.oc-vd__action strong { display: block; font-family: Georgia, serif; color: #1F1B1A; font-size: 1rem; line-height: 1.2; }
.oc-vd__action small { display: block; color: #6B6361; font-size: 12px; margin-top: 3px; }

/* Forms */
.oc-vd__field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.oc-vd__field:last-child { margin-bottom: 0; }
.oc-vd__field label { font-weight: 600; font-size: 13px; color: #1F1B1A; }
.oc-vd__field input[type="text"], .oc-vd__field input[type="email"], .oc-vd__field input[type="tel"], .oc-vd__field input[type="url"], .oc-vd__field input[type="password"], .oc-vd__field input[type="file"], .oc-vd__field select, .oc-vd__field textarea { width: 100%; padding: 10px 12px; border: 1px solid #ccd0d4; border-radius: 8px; font-size: 14px; background: #fff; font-family: inherit; }
.oc-vd__field input:focus, .oc-vd__field select:focus, .oc-vd__field textarea:focus { outline: 0; border-color: #6E0F2C; box-shadow: 0 0 0 3px rgba(110,15,44,.1); }
.oc-vd__field small { color: #6B6361; font-size: 12px; }
.oc-vd__row-2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.oc-vd__row-3 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 600px) { .oc-vd__row-2 { grid-template-columns: 1fr 1fr; } .oc-vd__row-3 { grid-template-columns: 1fr 1fr 1fr; } }

.oc-vd__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.oc-vd__chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: #FAF7F2; border: 1px solid #E4DDD2; border-radius: 999px; cursor: pointer; font-size: 13px; transition: all .15s; }
.oc-vd__chip input { margin: 0; }
.oc-vd__chip:hover { border-color: #C9A961; }
.oc-vd__chip:has(input:checked) { background: #6E0F2C; border-color: #6E0F2C; color: #fff; font-weight: 600; }

.oc-vd__chip-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 12px; align-items: center; }
.oc-vd__btn--mini { padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: 8px; }
/* "Select all cities" = filled burgundy so it clearly reads as the primary action. */
.oc-vd__chip-actions [data-oc-areas-action="select"] { background: #6E0F2C; color: #fff; border: 1px solid #6E0F2C; }
.oc-vd__chip-actions [data-oc-areas-action="select"]:hover { background: #4A0A1E; border-color: #4A0A1E; }
/* "Clear" = gold-outline ghost. */
.oc-vd__chip-actions [data-oc-areas-action="clear"] { background: #fff; color: #6E0F2C; border: 1px solid #C9A961; }
.oc-vd__chip-actions [data-oc-areas-action="clear"]:hover { background: #FAF7F2; border-color: #6E0F2C; }
/* "Show all cities" = a clear bordered toggle-pill, not faint grey text. */
.oc-vd__chip-showall { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #6E0F2C; cursor: pointer; padding: 7px 14px; border: 1px dashed #C9A961; border-radius: 8px; background: #FFFDF7; transition: all .15s; }
.oc-vd__chip-showall:hover { border-color: #6E0F2C; background: #FAF7F2; }
.oc-vd__chip-showall input { margin: 0; width: 16px; height: 16px; accent-color: #6E0F2C; }
.oc-vd__chip-showall:has(input:checked) { background: #6E0F2C; color: #fff; border-style: solid; border-color: #6E0F2C; }

.oc-vd__img-preview { background: #FAF7F2; border: 2px dashed #E4DDD2; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #6B6361; font-size: 12px; transition: border-color .2s; }
.oc-vd__img-preview--square { aspect-ratio: 1; max-width: 140px; }
.oc-vd__img-preview--wide   { aspect-ratio: 16 / 9; width: 100%; }
.oc-vd__img-preview--has-image { border-color: #C9A961; border-style: solid; }
.oc-vd__img-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-vd__img-hint { display: block; margin-top: 7px; color: #6B6361; font-size: 12px; line-height: 1.55; }
.oc-vd__img-hint strong { color: #6E0F2C; font-weight: 600; }

/* Photos tab — always-visible upload guidance callout */
.oc-vd__photo-guide { background: #FAF7F2; border: 1px solid #EFE6D6; border-left: 4px solid #C9A961; border-radius: 10px; padding: 14px 18px; margin: 0 0 14px; }
.oc-vd__photo-guide p { margin: 0 0 8px; color: #4A3F2E; font-size: 13.5px; line-height: 1.6; }
.oc-vd__photo-guide p:last-child { margin-bottom: 0; }
.oc-vd__photo-guide-icon { margin-right: 6px; }

.oc-vd__gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin: 0 0 14px; }
.oc-vd__gallery-item { position: relative; padding: 8px; border: 1px solid #E4DDD2; border-radius: 10px; background: #FAF7F2; cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: center; transition: all .15s; }
.oc-vd__gallery-img { width: 100%; height: 100px; object-fit: cover; border-radius: 6px; }
.oc-vd__gallery-rm { font-size: 11px; color: #6B6361; display: flex; gap: 4px; align-items: center; }
.oc-vd__gallery-item:has(input:checked) { background: #FBECEF; border-color: #B0354F; }
.oc-vd__gallery-item:has(input:checked) .oc-vd__gallery-img { opacity: .35; }

.oc-vd__sticky-bar { background: #fff; border: 1px solid #E4DDD2; border-radius: 12px; padding: 12px 16px; display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 16px; box-shadow: 0 4px 18px rgba(0,0,0,.06); margin-top: 14px; z-index: 20; }
.oc-vd__sticky-bar--inline { position: static; box-shadow: none; padding: 0; border: 0; background: transparent; margin-top: 16px; }

.oc-vd__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 8px; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; border: 1px solid transparent; font-family: inherit; transition: all .15s; }
.oc-vd__btn--primary { background: #6E0F2C; color: #fff; }
.oc-vd__btn--primary:hover { background: #4A0A1E; }

/* Profile completion card */
.oc-vd__cmp { background: #fff; border: 1px solid #E4DDD2; border-left: 4px solid var(--c); border-radius: 12px; padding: 18px 22px; margin: 0 0 14px; }
.oc-vd__cmp-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.oc-vd__cmp-head small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6B6361; margin-bottom: 4px; }
.oc-vd__cmp-head strong { font-family: Georgia, serif; font-size: 1.8rem; color: var(--c); display: flex; align-items: baseline; gap: 10px; line-height: 1.1; }
.oc-vd__cmp-tier { font-family: Inter, sans-serif; font-size: 12px; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 12%, white); padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.oc-vd__cmp-head p { color: #6B6361; font-size: 13px; margin: 6px 0 0; max-width: 480px; }
.oc-vd__cmp-count { text-align: right; flex-shrink: 0; }
.oc-vd__cmp-count strong { font-family: Georgia, serif; font-size: 1.3rem; color: #1F1B1A; display: block; line-height: 1.1; }
.oc-vd__cmp-count small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #6B6361; margin-top: 2px; }
.oc-vd__cmp-bar { height: 8px; background: #EFEAE2; border-radius: 999px; overflow: hidden; margin: 14px 0; }
.oc-vd__cmp-bar span { display: block; height: 100%; border-radius: 999px; transition: width .6s ease; }
.oc-vd__cmp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 700px) { .oc-vd__cmp-list { grid-template-columns: 1fr 1fr; } }
.oc-vd__cmp-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #FAF7F2; border: 1px solid #E4DDD2; border-radius: 8px; cursor: pointer; text-align: left; font-family: inherit; font-size: 13px; color: #1F1B1A; transition: all .15s; }
.oc-vd__cmp-item:hover { background: #fff; border-color: var(--c); transform: translateX(2px); }
.oc-vd__cmp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, white); }
.oc-vd__cmp-label { flex: 1; min-width: 0; }
.oc-vd__cmp-arrow { color: #6B6361; font-size: 14px; flex-shrink: 0; }
.oc-vd__cmp-item:hover .oc-vd__cmp-arrow { color: var(--c); }
.oc-vd__cmp-done { margin-top: 12px; font-size: 12px; }
.oc-vd__cmp-done summary { cursor: pointer; color: #6B6361; font-weight: 500; padding: 4px 0; user-select: none; }
.oc-vd__cmp-done summary:hover { color: #2E7D5B; }
.oc-vd__cmp-done ul { margin: 6px 0 0; padding: 0 0 0 18px; color: #6B6361; }
.oc-vd__cmp-done li { padding: 2px 0; }

/* Focus flash on jump */
.oc-vd__field--flash { animation: oc-flash 1.6s ease; }
@keyframes oc-flash {
	0%   { box-shadow: 0 0 0 0 rgba(110,15,44,.0); }
	30%  { box-shadow: 0 0 0 6px rgba(110,15,44,.18); }
	100% { box-shadow: 0 0 0 0 rgba(110,15,44,.0); }
}

/* ───────────────────────────────────────────────────────────
   Tablet portrait (≤720px) — horizontally scrollable tabs
   ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
	.oc-vd__tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.oc-vd__tab { white-space: nowrap; }
}

/* ───────────────────────────────────────────────────────────
   Toast notifications — slide-in stack, top-right
   ─────────────────────────────────────────────────────────── */
.oc-toast-stack {
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 420px;
	pointer-events: none;
}
.oc-toast {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #fff;
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: 0 12px 32px rgba(31, 27, 26, 0.18), 0 2px 6px rgba(31, 27, 26, 0.08);
	border-left: 4px solid #6E0F2C;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	color: #1F1B1A;
	min-width: 280px;
	max-width: 420px;
	opacity: 0;
	transform: translateX(120%);
	transition: opacity .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
	pointer-events: auto;
}
.oc-toast.is-in { opacity: 1; transform: translateX(0); }
.oc-toast--success { border-left-color: #2E7D5B; }
.oc-toast--error   { border-left-color: #B0354F; }
.oc-toast--info    { border-left-color: #C9A961; }
.oc-toast__icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: #fff;
	background: #6E0F2C;
}
.oc-toast--success .oc-toast__icon { background: #2E7D5B; }
.oc-toast--error   .oc-toast__icon { background: #B0354F; }
.oc-toast--info    .oc-toast__icon { background: #C9A961; color: #1F1B1A; }
.oc-toast__msg { flex: 1; min-width: 0; word-wrap: break-word; }
.oc-toast__close {
	flex-shrink: 0;
	background: transparent;
	border: 0;
	font-size: 22px;
	line-height: 1;
	color: #6B6361;
	cursor: pointer;
	padding: 0 4px;
	margin-top: -2px;
}
.oc-toast__close:hover { color: #1F1B1A; }
@media (max-width: 540px) {
	.oc-toast-stack { top: auto; bottom: 16px; left: 16px; right: 16px; max-width: none; }
	.oc-toast { min-width: 0; transform: translateY(120%); }
	.oc-toast.is-in { transform: translateY(0); }
}

/* ───────────────────────────────────────────────────────────
   Mobile (≤600px) — prevent iOS input zoom (font-size must be ≥16px)
   ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.oc-vd__field input[type="text"],
	.oc-vd__field input[type="email"],
	.oc-vd__field input[type="tel"],
	.oc-vd__field input[type="url"],
	.oc-vd__field input[type="password"],
	.oc-vd__field input[type="search"],
	.oc-vd__field input[type="number"],
	.oc-vd__field select,
	.oc-vd__field textarea { font-size: 16px; }
}

/* ───────────────────────────────────────────────────────────
   Mobile (≤480px) — tight phone layout
   ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.oc-vd { padding: 16px 4px 56px; }
	.oc-vd__panel { padding: 12px 6px; }
	.oc-vd__panel-head { margin-bottom: 14px; }
	.oc-vd__field { margin-bottom: 12px; }
	.oc-vd__card { padding: 16px 12px; border-radius: 10px; }
	.oc-vd__card h2 { margin-bottom: 12px; padding-bottom: 8px; }
	.oc-vd__gallery-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)) !important; gap: 8px; }
	.oc-vd__sticky-bar {
		padding: 10px 12px;
		bottom: 0;
		border-radius: 12px 12px 0 0;
		margin-left: -12px;
		margin-right: -12px;
		width: calc(100% + 24px);
	}
	.oc-vd__sticky-bar .oc-btn { padding: 10px 14px; font-size: 14px; }
	body.oc-vendor-context { padding-bottom: 90px; }
	.oc-vd__img-preview { aspect-ratio: 3 / 1; }
}

/* ───────────────────────────────────────────────────────────
   Email-verification lock — covers the dashboard until the
   vendor clicks the link in their verification email. The
   inner content is blurred + non-interactive, and a single
   centered card prompts them to check their inbox.
   ─────────────────────────────────────────────────────────── */
.oc-vd { position: relative; }
.oc-vd--locked .oc-vd__container {
	filter: blur(6px);
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	transform: translateZ(0); /* GPU hint, prevents text jitter */
}

.oc-vd__lock-overlay {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(40px, 8vh, 96px) 20px;
	background: rgba(250, 247, 242, 0.55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.oc-vd__lock-card {
	background: #fff;
	border: 1px solid var(--oc-border, #E4DDD2);
	border-radius: 16px;
	padding: 40px clamp(24px, 4vw, 44px) 32px;
	box-shadow: 0 24px 48px rgba(31, 27, 26, .14), 0 4px 10px rgba(31, 27, 26, .05);
	max-width: 480px;
	width: 100%;
	text-align: center;
	position: sticky;
	top: 24px;
}

.oc-vd__lock-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--oc-burgundy, #6E0F2C), #8B1538);
	color: #fff;
	margin: 0 auto 18px;
}

.oc-vd__lock-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(1.4rem, 2.4vw, 1.7rem);
	color: var(--oc-burgundy, #6E0F2C);
	margin: 0 0 12px;
	line-height: 1.25;
}

.oc-vd__lock-lead {
	color: #3D3735;
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0 0 22px;
}
.oc-vd__lock-lead strong { color: #1F1B1A; word-break: break-all; }

.oc-vd__lock-form { margin: 0 0 18px; }
.oc-vd__lock-cta { width: 100%; }

.oc-vd__lock-help {
	color: #6B6361;
	font-size: 0.82rem;
	line-height: 1.55;
	margin: 0 0 16px;
	padding-top: 16px;
	border-top: 1px solid #EFEAE2;
}
.oc-vd__lock-help strong { color: var(--oc-burgundy, #6E0F2C); }

.oc-vd__lock-logout { margin: 0; font-size: 0.85rem; }
.oc-vd__lock-logout a { color: #6B6361; text-decoration: underline; text-decoration-color: rgba(107, 99, 97, .35); text-underline-offset: 2px; }
.oc-vd__lock-logout a:hover { color: var(--oc-burgundy, #6E0F2C); text-decoration-color: var(--oc-burgundy, #6E0F2C); }

@media (max-width: 480px) {
	.oc-vd__lock-overlay { padding: 24px 16px; align-items: center; }
	.oc-vd__lock-card { padding: 32px 22px 24px; border-radius: 14px; position: static; }
	.oc-vd__lock-icon { width: 56px; height: 56px; }
}

/* ───────────────────────────────────────────────────────────
   AJAX gallery uploader — per-file tiles with progress.
   Replaces the old multi-file form post that was 404'ing on
   shared hosting because the bundled multipart POST exceeded
   PHP post_max_size.
   ─────────────────────────────────────────────────────────── */
/* Persistent rules pill above the picker — sets expectations BEFORE the
   user clicks, so the inline error banner below stays clean for genuine
   problems instead of restating the rules. */
.oc-vd__uploader-rules {
	display: inline-block;
	background: #FFF8E6;
	border: 1px solid #E4DDD2;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12.5px;
	color: #3D3735;
	margin: 6px 0 10px;
	line-height: 1.4;
}

/* Inline error banner — appears only when the JS pushes an error to it.
   Auto-clears after 6s. Replaces the modal alert() popups. */
.oc-vd__uploader-errors {
	background: #FBE5E6;
	border: 1px solid #B0354F;
	border-left: 4px solid #B0354F;
	border-radius: 8px;
	padding: 8px 12px;
	margin: 10px 0;
	color: #4A0A1E;
	font-size: 13px;
	line-height: 1.45;
}
.oc-vd__uploader-error + .oc-vd__uploader-error {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px dashed rgba(176, 53, 79, .3);
}

.oc-vd__uploader-queue {
	display: grid;
	/* Fixed column counts at each breakpoint — feels predictable and
	   keeps tiles evenly sized regardless of count. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 12px;
}
@media (max-width: 780px) { .oc-vd__uploader-queue { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .oc-vd__uploader-queue { grid-template-columns: 1fr; } }
.oc-vd__uploader-tile {
	position: relative;
	display: flex;
	gap: 10px;
	padding: 10px;
	background: #fff;
	border: 1px solid #E4DDD2;
	border-radius: 10px;
	align-items: center;
	min-height: 76px;
}
.oc-vd__uploader-tile.is-uploading { border-color: #C9A961; background: #FFF8E6; }
.oc-vd__uploader-tile.is-done      { border-color: #2E7D5B; background: #E9F5EF; }
.oc-vd__uploader-tile.is-error     { border-color: #B0354F; background: #FBE5E6; }
.oc-vd__uploader-thumb {
	flex-shrink: 0;
	width: 56px; height: 56px;
	border-radius: 8px;
	background-size: cover; background-position: center;
	background-color: #FAF7F2;
	border: 1px solid #EFEAE2;
}
.oc-vd__uploader-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.oc-vd__uploader-name {
	font-size: 13px; font-weight: 600; color: #1F1B1A;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oc-vd__uploader-status { font-size: 12px; color: #6B6361; line-height: 1.3; }
.oc-vd__uploader-tile.is-done .oc-vd__uploader-status  { color: #1F4D3A; }
.oc-vd__uploader-tile.is-error .oc-vd__uploader-status { color: #B0354F; }
.oc-vd__uploader-bar { height: 4px; background: #EFEAE2; border-radius: 999px; overflow: hidden; }
.oc-vd__uploader-bar span {
	display: block; height: 100%; width: 0%;
	background: linear-gradient(90deg, #6E0F2C, #C9A961);
	transition: width .25s ease;
}
.oc-vd__uploader-tile.is-done .oc-vd__uploader-bar span  { background: #2E7D5B; width: 100% !important; }
.oc-vd__uploader-tile.is-error .oc-vd__uploader-bar span { background: #B0354F; width: 100% !important; }
.oc-vd__uploader-remove {
	flex-shrink: 0; width: 28px; height: 28px;
	border: 0; background: transparent; color: #6B6361;
	cursor: pointer; font-size: 20px; line-height: 1; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
}
.oc-vd__uploader-remove:hover { background: rgba(176, 53, 79, .12); color: #B0354F; }
@media (max-width: 480px) {
	.oc-vd__uploader-queue { grid-template-columns: 1fr; }
}

/* Save + Save & Continue button group */
.oc-vd__sticky-bar .oc-vd__btn--ghost {
	background: transparent;
	color: var(--oc-burgundy, #6E0F2C);
	border: 1px solid currentColor;
	margin-left: 8px;
}
.oc-vd__sticky-bar .oc-vd__btn--ghost:hover { background: rgba(110,15,44,.08); }

/* Single-image uploaders (logo, banner) — inline status under the preview. */
.oc-vd__single-uploader-status {
	margin: 6px 0 0;
	font-size: 12px;
	color: #6B6361;
	line-height: 1.4;
	min-height: 16px;
}
.oc-vd__single-uploader-status.is-uploading { color: #B8860B; }
.oc-vd__single-uploader-status.is-done      { color: #1F4D3A; }
.oc-vd__single-uploader-status.is-error     { color: #B0354F; }

/* Quick filter input above the cities/areas chip grid. */
.oc-vd__areas-search {
	width: 100%;
	max-width: 360px;
	padding: 9px 14px;
	margin: 4px 0 12px;
	border: 1px solid #E4DDD2;
	border-radius: 999px;
	font-size: 14px;
	background: #fff;
	color: #1F1B1A;
}
.oc-vd__areas-search:focus {
	outline: none;
	border-color: var(--oc-burgundy, #6E0F2C);
	box-shadow: 0 0 0 3px rgba(110, 15, 44, .12);
}