/* vendor-styles.css - clean business look (white/blue/grey) */
:root{
    --bg:#f6f8fb;
    --accent:#0b6b63;    /* teal-ish business color */
    --accent-dark:#065147;
    --muted:#6b6f76;
    --card:#ffffff;
    --radius:10px;
    --max-w:1100px;
    --gap:18px;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background:linear-gradient(180deg,#f6f8fb 0%, #eef2f6 100%);
    color:#222;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.4;
  }
  
  /* Layout */
  .container{
    width: min(1180px, 94%);
    margin: 0 auto;
  }
  
  /* Header */
  .site-header{
    background:var(--accent-dark);
    color:#fff;
    padding:12px 0;
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .brand-logo{height:56px; width:auto; display:block}
  .main-nav a{
    color: #f5f7f8;
    text-decoration:none;
    margin-left:20px;
    font-weight:600;
  }
  .main-nav a:hover{opacity:.9}
  .btn-vendor{
    background: #1a0b0b;
    color: var(--accent-dark);
    padding:8px 14px;
    border-radius:24px;
    margin-left:18px;
    font-weight:700;
    text-decoration:none;
    box-shadow: 0 6px 18px rgba(11,107,99,0.12);
  }
  .btn-vendor:hover{transform: translateY(-2px); transition: all .18s}
  
  /* Hero */
  .hero-compact{
    background: linear-gradient(180deg,#ffffff 0%, #f1f6f8 100%);
    padding:30px 0;
  }
  .hero-inner h1{
    margin:6px 0 8px;
    font-size:28px;
    color:var(--accent-dark);
  }
  .lead{color:var(--muted); margin:0 0 6px}
  
  /* Vendor card */
  .vendor-card{
    background:var(--card);
    margin: 20px auto 48px;
    padding:22px;
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(20,35,45,0.06);
    max-width: var(--max-w);
  }
  .vendor-card h2{margin:0 0 6px; color:var(--accent-dark)}
  .muted{color:var(--muted); font-size:14px}
  
  /* Form layout */
  .vendor-form .grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
    margin-top:16px;
  }
  .field{display:flex; flex-direction:column}
  .field span{font-weight:600; margin-bottom:8px; color:#263238}
  .field input, .field select, .field textarea{
    padding:12px 14px;
    border:1px solid #dde6ea;
    border-radius:8px;
    font-size:15px;
    outline:none;
    background:#fff;
  }
  .field input:focus, .field textarea:focus, .field select:focus{
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(11,107,99,0.06);
  }
  .field.full{grid-column: 1 / -1}
  .file-field .muted{font-size:12px; margin-top:6px; color:var(--muted)}
  .req{color:#d9534f; margin-left:6px}
  
  /* Actions */
  .form-actions{
    display:flex;
    gap:12px;
    margin-top:18px;
    align-items:center;
  }
  .btn{
    padding:10px 16px;
    border-radius:8px;
    border:0;
    cursor:pointer;
    font-weight:700;
  }
  .btn.primary{ background:var(--accent); color:#fff }
  .btn.primary:hover{ background: #07574a; transform: translateY(-2px) }
  .btn.ghost{ background: transparent; color:var(--muted); border: 1px solid #e6eef0 }
  
  /* message */
  .form-msg{ margin-top:12px; color:var(--muted); font-weight:600 }
  
  /* Responsive */
  @media (max-width:900px){
    .vendor-form .grid{ grid-template-columns: 1fr }
    .main-nav{ display:flex; gap:12px; align-items:center}
    .header-inner{gap:12px}
    .brand-logo{height:48px}
  }