:root {
    --navy: #0d2b45;
    --blue: #1f5f8b;
    --blue-2: #2f7eb5;
    --gold: #d7a928;
    --gold-dark: #b58810;
    --light: #f4f7fb;
    --border: #d8e2ec;
    --text: #20364a;
    --muted: #62788c;
    --danger: #b42318;
    --success: #067647;
    --shadow: 0 14px 40px rgba(13, 43, 69, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: #fff;
    line-height: 1.55;
}
body.embed-mode { background: transparent; }
a { color: var(--blue); }
img { max-width: 100%; }
.container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.site-header { background: rgba(13,43,69,.98); color: #fff; position: sticky; top: 0; z-index: 50; }
.header-row { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 24px; }
.brand { color: #fff; font-weight: 900; font-size: 1.45rem; text-decoration: none; letter-spacing: .02em; }
nav { display: flex; flex-wrap: wrap; gap: 18px; }
nav a { color: #fff; text-decoration: none; font-weight: 800; }
.hero { background: radial-gradient(circle at top right, #347fb3 0, #1f5f8b 28%, #0d2b45 76%); color: #fff; padding: 74px 0 112px; overflow: hidden; }
.hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  line-height: 1.04;
  margin: 18px auto;
  max-width: 980px;
  text-align: center;
  color: #b6d0fa;
}

.hero p {
  max-width: 900px;
  font-size: 1.2rem;
  margin: 0 auto;
  color: rgba(255,255,255,.9);
  text-align: center;
}
.embed-mode .hero { display: none; }

.search-wrap { margin-top: -58px; position: relative; z-index: 5; }
.embed-mode .search-wrap { margin-top: 0; }
.search-panel, .card, .form-card, .admin-card {
    background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
}
.search-panel { padding: 26px; }
.search-main { display: block; }
.search-field label { font-size: 1.08rem; margin-bottom: 10px; }
.search-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: stretch;
}
.search-input-row input {
    font-size: 1.08rem;
    padding: 15px 16px;
    min-width: 0;
}
.search-primary {
    min-width: 190px;
    padding-inline: 24px;
    white-space: nowrap;
}
.search-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.secondary-action {
    background: #eef4f8;
    border: 1px solid #c7d7e3;
    color: var(--navy);
    box-shadow: none;
}
.secondary-action:hover {
    background: #e3edf4;
}
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.filter-panel[hidden] { display: none; }
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
label { display: block; font-weight: 800; margin-bottom: 7px; }
input, select, textarea {
    width: 100%; padding: 12px 13px; border: 1px solid #b9c9d7;
    border-radius: 10px; font: inherit; background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(47,126,181,.18); border-color: var(--blue-2); }
textarea { min-height: 130px; resize: vertical; }
button, .button {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 0; border-radius: 10px; padding: 12px 18px;
    font-weight: 900; cursor: pointer; text-decoration: none;
    background: var(--gold); color: #17212b;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
button:hover, .button:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(13,43,69,.12); }
.button.secondary { background: var(--blue); color: #fff; }
.button.ghost { background: #eef4f8; color: var(--navy); }
.button.danger { background: var(--danger); color: #fff; }
.button.small { padding: 9px 12px; font-size: .9rem; }
.section { padding: 48px 0; }
.results-head { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom: 20px; }
.results-head h2 { margin:0; font-size:1.9rem; }
.card { overflow: hidden; position: relative; display:flex; flex-direction:column; }
.card.featured { border: 2px solid var(--gold); }
.featured-ribbon { position:absolute; top:14px; left:14px; z-index:3; background:var(--gold); color:#17212b; border-radius:999px; padding:6px 11px; font-size:.78rem; font-weight:900; }
.favorite-button { position:absolute; top:14px; right:14px; z-index:3; width:40px; height:40px; border-radius:50%; padding:0; background:rgba(255,255,255,.94); color:#9a1b1b; font-size:1.2rem; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.card-media { height: 210px; background: linear-gradient(145deg, #eef4f8, #dbe8f1); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media.logo-only img { width:auto; height:auto; max-width:72%; max-height:72%; object-fit:contain; }
.card-body { padding: 20px; display:flex; flex-direction:column; flex:1; }
.card h3 { margin: 0 0 8px; font-size:1.32rem; }
.badges { display:flex; flex-wrap:wrap; gap:7px; margin: 11px 0; }
.badge { background:#e8f2f9; color:var(--navy); border-radius:999px; padding:5px 9px; font-size:.76rem; font-weight:800; }
.badge.gold { background:#fff5d6; color:#6b4f00; }
.meta { color:var(--muted); font-size:.92rem; }
.actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:auto; padding-top:16px; }
.form-card { padding: 26px; }
.form-row { margin-bottom: 17px; }
.checkbox-row { display:flex; align-items:center; gap:8px; }
.checkbox-row input { width:auto; }
.alert { margin:18px 0; padding:14px 16px; border-radius:10px; font-weight:800; }
.alert.success { background:#ecfdf3; color:var(--success); }
.alert.error { background:#fef3f2; color:var(--danger); }
.site-footer { margin-top: 54px; background: var(--navy); color:#fff; padding:28px 0; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { border-bottom:1px solid var(--border); padding:12px; text-align:left; vertical-align:top; }
th { background:var(--light); }
.kpi { padding:20px; }
.kpi strong { display:block; font-size:2rem; color:var(--navy); }
.inline-form { display:inline; }
.notice { background:#fff8e6; border-left:4px solid var(--gold); padding:18px; margin:18px 0; border-radius:0 10px 10px 0; }
.empty-state { text-align:center; padding:42px 24px; background:linear-gradient(180deg,#fff,#f7fafc); border:1px dashed #b9c9d7; border-radius:16px; }
.empty-state h2 { margin-top:0; font-size:2rem; color:var(--navy); }
.photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0; }
.photo-grid img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; }
.business-hero { display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:start; }
.business-logo { background:#f2f6f9; border-radius:14px; padding:24px; text-align:center; }
.business-logo img { max-height:220px; object-fit:contain; }
@media (max-width: 900px) {
    .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .business-hero { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
    .grid-2, .grid-3, .filter-grid, .photo-grid { grid-template-columns: 1fr; }
    .header-row { align-items:flex-start; flex-direction:column; padding:16px 0; }
    .hero { padding:52px 0 88px; }
    .search-input-row { grid-template-columns: 1fr; }
    .search-primary { width:100%; min-width:0; }
    .search-secondary-actions { display:grid; grid-template-columns:1fr 1fr; }
    .secondary-action { width:100%; }
}

.pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:28px}.details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin:24px 0}.details-grid>div{padding:10px 0;border-bottom:1px solid var(--border)}@media(max-width:680px){.details-grid{grid-template-columns:1fr}}

/* WHY VOB FINDER BRIDGE — CREATE LISTING PAGE */
.submit-intro-section{padding-top:38px}
.why-vob-bridge{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:34px;
    align-items:center;
    margin:0 0 42px;
    padding:38px 42px;
    overflow:hidden;
    position:relative;
    border:1px solid rgba(215,169,40,.58);
    border-radius:26px;
    color:#fff;
    background:
        radial-gradient(circle at 92% 10%,rgba(74,157,220,.28),transparent 28%),
        radial-gradient(circle at 7% 100%,rgba(215,169,40,.15),transparent 28%),
        linear-gradient(135deg,#071726,#103c61 62%,#095f9f);
    box-shadow:0 22px 55px rgba(13,43,69,.20);
}
.why-vob-bridge:after{
    content:"";
    position:absolute;
    right:-90px;
    bottom:-120px;
    width:280px;
    height:280px;
    border:36px solid rgba(255,255,255,.045);
    border-radius:50%;
}
.why-vob-bridge-copy,.why-vob-bridge-button{position:relative;z-index:2}
.why-vob-bridge-kicker{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:10px;
    color:#f2d66b;
    font-size:.78rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.why-vob-bridge-kicker:before{content:"";width:40px;height:2px;background:#d7a928}
.why-vob-bridge h1{
    max-width:760px;
    margin:0 0 12px;
    color:#fff;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(2rem,4vw,3.35rem);
    line-height:1.02;
    letter-spacing:-.035em;
}
.why-vob-bridge p{max-width:780px;margin:0;color:#dceaf5;font-size:1.05rem}
.why-vob-bridge-points{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.why-vob-bridge-points span{
    padding:7px 11px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:.8rem;
    font-weight:800;
}
.why-vob-bridge-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:240px;
    min-height:60px;
    padding:14px 22px;
    border-radius:14px;
    color:#17212b!important;
    background:linear-gradient(135deg,#f2d66b,#d7a928);
    box-shadow:0 15px 30px rgba(215,169,40,.24);
    font-weight:900;
    text-align:center;
    text-decoration:none;
}
.why-vob-bridge-button span{margin-left:10px;font-size:1.35rem}
.submit-page-title{margin-top:0}
@media(max-width:850px){
    .why-vob-bridge{grid-template-columns:1fr;padding:30px 24px}
    .why-vob-bridge-button{width:100%}
}