/* Bride of the Year: betel-leaf green, kumkum red, turmeric gold, on top of Bootstrap 5 */
:root {
  --leaf: #0f3b2a;
  --leaf-2: #17543b;
  --leaf-dark: #0a2a1e;
  --kumkum: #a8201a;
  --gold: #edaa1f;
  --gold-hover: #ffc03d;
  --ink: #1d2a24;
  --muted: #66736c;
  --page: #f4f6f3;
  --display: "Yeseva One", Georgia, serif;

  --bs-body-font-family: "Nunito Sans", "Noto Sans Sinhala", system-ui, sans-serif;
  --bs-body-bg: var(--page);
  --bs-body-color: var(--ink);
  --bs-link-color: var(--leaf-2);
  --bs-link-hover-color: var(--kumkum);
  --bs-border-radius: .6rem;
}
h1, h2, h3, .display-3, .display-6, .brand-text, .name { font-family: var(--display); font-weight: 400; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Zigzag border, a nod to traditional Sinhala lace patterns */
.lace {
  height: 10px;
  background:
    linear-gradient(135deg, var(--gold) 25%, transparent 25%) 0 0 / 20px 20px,
    linear-gradient(225deg, var(--gold) 25%, transparent 25%) 0 0 / 20px 20px;
  background-color: var(--leaf-dark);
}

/* Navbar */
.site-nav { background: var(--leaf); border-bottom: 3px solid var(--gold); }
.brand-text { font-size: 1.2rem; letter-spacing: .2px; }
.brand-mark {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold); color: var(--leaf-dark); font-weight: 700; font-size: 1.1rem;
}
.site-nav .nav-link { color: rgba(255,255,255,.8); border-bottom: 2px solid transparent; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: #fff; border-bottom-color: var(--gold); }

/* Buttons */
.btn-gold { background: var(--gold); border-color: var(--gold); color: #2b1a00; font-weight: 700; }
.btn-gold:hover, .btn-gold:focus { background: var(--gold-hover); border-color: var(--gold-hover); color: #2b1a00; }
.btn-leaf { background: var(--leaf-2); border-color: var(--leaf-2); color: #fff; font-weight: 700; }
.btn-leaf:hover, .btn-leaf:focus { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.btn-outline-leaf { border-color: var(--leaf-2); color: var(--leaf-2); font-weight: 600; }
.btn-outline-leaf:hover { background: var(--leaf-2); color: #fff; }

/* Home hero */
.hero { background: var(--leaf); color: #fff; }
.hero .si { color: var(--gold); font-size: 1.4rem; }
.status-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem; border-radius: 99px; background: rgba(255,255,255,.1); font-size: .9rem; font-weight: 600; }
.status-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: #5ee08f; }
.status-pill.closed .dot { background: #ff8b84; }
.stat { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07); border-radius: var(--bs-border-radius); padding: 1rem 1.25rem; height: 100%; }
.stat .value { font: 2.2rem/1 var(--display); color: var(--gold); }
.stat .label { font-size: .9rem; opacity: .85; }

/* Inner page banner */
.page-hero { background: var(--leaf); padding: 2.25rem 0 1.75rem; }

/* Contestant cards */
.col { scroll-margin-top: 90px; }
.col:target .contestant { outline: 3px solid var(--gold); }
.contestant { border-radius: .8rem; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .contestant { transition: transform .15s ease, box-shadow .15s ease; }
  .contestant:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.5rem rgba(15,59,42,.18) !important; }
}
.contestant .name { font-size: 1.15rem; line-height: 1.25; }
.num-badge {
  position: absolute; top: .75rem; left: .75rem; z-index: 2;
  min-width: 42px; height: 42px; padding: 0 .4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--kumkum); color: #fff; font-weight: 800; border: 3px solid var(--gold);
}
.votes-pill {
  position: absolute; top: .75rem; right: .75rem; z-index: 2;
  background: rgba(10,42,30,.88); color: #fff; font-size: .85rem; font-weight: 700;
  padding: .2rem .65rem; border-radius: 99px;
}
.votes-pill .bi { color: #ff8b84; }

/* Detail / vote modal */
#dmPhoto { min-height: 320px; background: #dfe4e0; }

/* Forms */
.form-control:focus, .form-select:focus { border-color: var(--leaf-2); box-shadow: 0 0 0 .2rem rgba(23,84,59,.18); }
.form-check-input:checked { background-color: var(--leaf-2); border-color: var(--leaf-2); }
.hp { position: absolute; left: -9999px; }
.photo-preview { max-height: 220px; border-radius: .5rem; }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps li { counter-increment: s; display: flex; gap: .85rem; margin-bottom: 1rem; }
.steps li::before {
  content: counter(s); flex: 0 0 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--leaf-2); color: #fff; font-weight: 700; font-size: .9rem;
}

/* Results */
.rank { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #e9ece8; color: var(--muted); }
.rank-1 { background: var(--gold); color: #2b1a00; }
.rank-2 { background: #cfd4d1; color: #26302b; }
.rank-3 { background: #c98b52; color: #fff; }
.progress { height: .6rem; background: #e9ece8; }
.progress-bar { background: var(--gold); }
.rank-row.first .progress-bar { background: var(--leaf-2); }

/* Admin */
.nav-tabs .nav-link { color: var(--muted); font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--leaf); border-bottom-color: #fff; }
.thumb { width: 48px; height: 60px; object-fit: cover; border-radius: .35rem; background: #dfe4e0; }

/* Footer */
.site-footer { background: var(--leaf); color: #fff; }
.site-footer a { color: var(--gold); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Share buttons */
.btn-whatsapp { background: #25d366; border-color: #25d366; color: #08331a; font-weight: 700; }
.btn-whatsapp:hover { background: #1fba59; border-color: #1fba59; color: #08331a; }
.btn-facebook { background: #1877f2; border-color: #1877f2; color: #fff; font-weight: 700; }
.btn-facebook:hover { background: #1463cc; border-color: #1463cc; color: #fff; }
.btn-telegram { background: #229ed9; border-color: #229ed9; color: #fff; font-weight: 700; }
.btn-telegram:hover { background: #1b87ba; border-color: #1b87ba; color: #fff; }
.profile-photo { border-radius: .8rem; overflow: hidden; position: relative; }

/* Member ID tag */
.member-id {
  display: inline-block; font-weight: 700; font-size: .78rem; letter-spacing: .3px;
  color: var(--leaf-2); background: #e6efe9; border-radius: .3rem; padding: .1rem .5rem;
}