
/* Scoped to wrapper to avoid theme conflicts */
.mn-box-wards-wrapper, .mn-box-wards-wrapper *,
.mn-box-wards-wrapper *::before, .mn-box-wards-wrapper *::after {
  box-sizing: border-box;
}

/* Variables */
.mn-box-wards-wrapper:root,
.mn-box-wards-wrapper {
  --card-radius:20px;--card-padding:14px;--gap:14px;
  --ink:#0b1f3a;--ink-soft:#51627a;--brand:#3b5bfd;
  --bg-a:#e9f0ff;--bg-b:#eaf8f1;--bg-c:#fff2e2;--bg-d:#ffe9f5;--bg-e:#efe9ff;
}

/* Header and search */
.mn-box-wards-wrapper .mn-box-hero-head h1{margin:0 0 18px;font-size:clamp(28px,4.5vw,30px);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.mn-box-wards-wrapper .mn-box-search-wrap{display:flex;justify-content:center}
.mn-box-wards-wrapper .mn-box-search-bar{
  background:#fff;border:1.5px solid #d8dcf0;border-radius:999px;
  width:min(920px,92%);display:flex;align-items:center;gap:12px;
  padding:12px 14px;box-shadow:0 10px 30px rgba(59,91,253,.07);transition:.2s
}
.mn-box-wards-wrapper .mn-box-icon{font-size:22px;opacity:.75;margin-left:6px;line-height:1}
/* Reset input/button to avoid theme styles */
.mn-box-wards-wrapper .mn-box-search-input{
  all: unset;
  -webkit-appearance: none;
  appearance: none;
  flex:1;
  display:block;
  width:100%;
  font-size:18px;
  line-height:1.4;
  color:var(--ink);
  background:transparent;
  caret-color: var(--brand);
  padding:10px 8px;
}
.mn-box-wards-wrapper .mn-box-search-input::placeholder{opacity:.6;color:var(--ink-soft)}
.mn-box-wards-wrapper .mn-box-search-btn{
  all: unset;
  display:grid;place-items:center;
  width:44px;height:44px;
  margin-left:auto; /* keep at far right */
  border-radius:50%;
  border:1px solid #e3e6f3;
  background:#f4f5ff;
  cursor:pointer;
}
.mn-box-wards-wrapper .mn-box-search-btn:hover{filter:brightness(1.03)}
.mn-box-wards-wrapper .mn-box-search-bar:focus-within{border:1.5px solid var(--brand);box-shadow:0 0 0 3px rgba(59,91,253,.15),0 10px 30px rgba(59,91,253,.1)}
.mn-box-wards-wrapper .mn-box-search-note{margin-top:10px;color:var(--ink-soft);font-size:14px;text-align:center}

/* Grid */
.mn-box-wards-wrapper .mn-box-landing-wards{max-width:1200px;margin:0 auto;padding:24px 16px 56px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink)}
.mn-box-wards-wrapper .mn-box-ward-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:18px}
@media (min-width:1024px){.mn-box-wards-wrapper .mn-box-ward-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:768px){.mn-box-wards-wrapper .mn-box-ward-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.mn-box-wards-wrapper .mn-box-ward-grid{grid-template-columns:1fr}}

/* Cards */
.mn-box-wards-wrapper .mn-box-ward-card{
  position:relative;display:flex;align-items:center;gap:12px;padding:7px;border-radius:22px;
  text-decoration:none;color:var(--ink);border:1px solid #e5e7f0;background:var(--bg-a);
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;min-height:50px;overflow:hidden
}
.mn-box-wards-wrapper .mn-box-ward-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120px 80px at 10% 10%, rgba(255,255,255,.7), transparent 60%);
  opacity:.7;transition:opacity .25s ease
}
.mn-box-wards-wrapper .mn-box-ward-card:hover{transform:translateY(-3px);box-shadow:0 14px 26px rgba(10,35,66,.10)}
.mn-box-wards-wrapper .mn-box-ward-card:hover::after{opacity:1}
.mn-box-wards-wrapper .mn-box-num{font-weight:800;font-size:18px;background:#fff;border:2px solid var(--brand);border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center}
.mn-box-wards-wrapper .mn-box-name{font-weight:500;font-size:14px;letter-spacing:.2px;transition:color .22s ease, text-shadow .22s ease}
.mn-box-wards-wrapper .mn-box-ward-card:hover .mn-box-name{color:var(--brand);text-shadow:0 0 8px rgba(59,91,253,.25)}
.mn-box-wards-wrapper .mn-box-ward-card:nth-child(5n+1){background:var(--bg-a)}
.mn-box-wards-wrapper .mn-box-ward-card:nth-child(5n+2){background:var(--bg-b)}
.mn-box-wards-wrapper .mn-box-ward-card:nth-child(5n+3){background:var(--bg-c)}
.mn-box-wards-wrapper .mn-box-ward-card:nth-child(5n+4){background:var(--bg-d)}
.mn-box-wards-wrapper .mn-box-ward-card:nth-child(5n+5){background:var(--bg-e)}
.mn-box-wards-wrapper .mn-box-ward-card.match{border-color:rgba(59,91,253,.45);box-shadow:0 6px 18px rgba(59,91,253,.10)}

/* Softer highlight */
.mn-box-wards-wrapper mark{
  background: rgba(255, 214, 102, 0.28);
  color: inherit;
  padding: 0 .35em;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}
