:root{ --brand:#d9152b; --ink:#141414; --muted:#616161; --line:#ececef; --bg:#fafafb; --card:#ffffff; }
*{box-sizing:border-box} body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
.header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:10}
.logo{font-weight:800}
.kicker{font-size:12px;color:var(--muted)}
.container{max-width:1200px;margin:0 auto;padding:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.policy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.meta-pill{padding:4px 8px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;color:#444}
.btn{background:var(--brand);color:#fff;border:none;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:280px 1fr;gap:20px}
.menu a{display:block;padding:10px 12px;border-radius:10px;color:#141414;border:1px solid transparent}
.menu a.active{background:#fff3f4;border-color:#ffdadd;color:#8a0f1f}
.label{display:block;font-weight:600;margin:10px 0 6px}
.input, select, textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.stepper{display:flex;gap:8px;margin:8px 0 16px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#fff}
.step.active{border-color:#ffdadd;background:#fff3f4}
.policy-banner{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}
.policy-meta{display:flex;gap:8px;flex-wrap:wrap}

/* --- Spacing improvements --- */
.label{display:block;font-weight:600;margin:14px 0 6px}
.input, select, textarea{margin-bottom:12px}
.btn-row{margin-top:12px}

/* --- Logo styling to match theunlimited.co.za brand look --- */
.logo{font-weight:900; letter-spacing:.2px; color:var(--brand); font-size:20px}
.logo small{font-weight:700; opacity:.9}

/* --- Side menu visual parity --- */
.menu{display:flex;flex-direction:column;gap:8px}
.menu a{
  display:block;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  text-decoration:none;
  transition:.15s ease-in-out;
}
.menu a:hover{border-color:#ffdadd; background:#fff9f9}
.menu a.active{background:#fff3f4;border-color:#ffdadd;color:#8a0f1f}

/* Policy chips */
.chip{display:inline-block;font-size:12px;line-height:1;padding:6px 8px;border-radius:999px;border:1px solid var(--line);background:#f9fafb}
.chip-active{color:#065f46;background:#ecfdf5;border-color:#a7f3d0}
.chip-cancelled{color:#374151;background:#f3f4f6;border-color:#e5e7eb}


/* --- Update Your Details form grid (2 columns x 3 rows, match height with Customer Details) --- */
#custForm .form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  gap: 12px 20px;
  align-items: start;
}
#custForm .field {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.grid-2 {
  display: grid;
  grid-template-columns: 2fr 3fr; /* 40/60 split */
  gap: 20px;
  align-items: stretch;
}
.grid-2 > .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.grid-2 > .card .card-body {
  flex: 1;
}
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  #custForm .form-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}


/* --- Equal height baseline for dashboard cards --- */
.grid-2 > .card { min-height: 420px; } /* fallback; JS will override to match tallest */