/* ==========================================================================
   SG Lobang Club — brand styles
   Layered on top of Bootstrap 5.3. Singapore-inspired red + gold accents.
   All custom classes are namespaced sglc-* to avoid clashing with Bootstrap.
   ========================================================================== */

:root {
  --sglc-red:      #d7263d;   /* Singapore red          */
  --sglc-red-dark: #b51d31;
  --sglc-gold:     #f4b400;   /* "lobang" / value gold  */
  --sglc-ink:      #1f2733;   /* headings / strong text */
  --sglc-bg:       #f7f8fa;   /* page background        */
}

body {
  background: var(--sglc-bg);
  color: var(--sglc-ink);
}

a { color: var(--sglc-red); }
a:hover { color: var(--sglc-red-dark); }

/* ---- Navbar ------------------------------------------------------------- */
.sglc-nav {
  background: #ffffff;
  border-bottom: 3px solid var(--sglc-red);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
}
.sglc-nav .navbar-brand { color: var(--sglc-ink); }
.sglc-nav .nav-link { color: #455; font-weight: 500; }
.sglc-nav .nav-link:hover,
.sglc-nav .nav-link:focus { color: var(--sglc-red); }

/* "SG" mark used in the brand + footer */
.sglc-logo {
  display: inline-block;
  background: var(--sglc-red);
  color: #fff;
  font-weight: 700;
  border-radius: 6px;
  padding: 0 .35em;
  letter-spacing: .5px;
}

/* Points pill in the navbar */
.sglc-points {
  background: rgba(244, 180, 0, .15);
  color: #8a6d00;
  border: 1px solid rgba(244, 180, 0, .5);
  border-radius: 999px;
  padding: .15rem .6rem;
  font-weight: 600;
  font-size: .85rem;
}

/* ---- Primary button ----------------------------------------------------- */
.btn-sglc {
  background: var(--sglc-red);
  border-color: var(--sglc-red);
  color: #fff;
  font-weight: 600;
}
.btn-sglc:hover,
.btn-sglc:focus {
  background: var(--sglc-red-dark);
  border-color: var(--sglc-red-dark);
  color: #fff;
}
.btn-sglc:active { background: var(--sglc-red-dark) !important; }

/* ---- Hero --------------------------------------------------------------- */
.sglc-hero {
  background: linear-gradient(135deg, var(--sglc-red) 0%, #e8556b 100%);
  color: #fff;
}
.sglc-hero .lead { color: rgba(255, 255, 255, .92); }
.sglc-hero-link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .6);
}
.sglc-hero-link:hover { color: var(--sglc-gold); }

/* ---- Cards -------------------------------------------------------------- */
.sglc-card {
  border: 1px solid #eceef1;
  transition: transform .12s ease, box-shadow .12s ease;
}
.sglc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1) !important;
}

/* ---- Filters panel ------------------------------------------------------ */
.sglc-filters {
  border: 1px solid #eceef1;
  position: sticky;
  top: 84px;
}
@media (max-width: 991.98px) {
  .sglc-filters { position: static; }
}

/* ---- Admin sub-nav ------------------------------------------------------ */
.sglc-admin-nav .nav-link {
  color: #455;
  background: #fff;
  border: 1px solid #e3e6ea;
}
.sglc-admin-nav .nav-link.active {
  background: var(--sglc-red);
  border-color: var(--sglc-red);
  color: #fff;
}

/* ---- Footer ------------------------------------------------------------- */
.sglc-footer {
  background: var(--sglc-ink);
  color: #cfd6df;
}
.sglc-footer .sglc-logo { background: var(--sglc-gold); color: var(--sglc-ink); }
.sglc-foot-link { color: #fff; text-decoration: none; }
.sglc-foot-link:hover { color: var(--sglc-gold); }

/* ---- Misc --------------------------------------------------------------- */
.text-warning { color: var(--sglc-gold) !important; }

/* Make sticky navbar offset anchor jumps (e.g. #tag42 on admin/tags.php) */
:target { scroll-margin-top: 90px; }

/* ---- Card meta (hearts / views) ---------------------------------------- */
.sglc-card-meta { white-space: nowrap; }

/* ---- Share: floating button, overlay, toast ---------------------------- */
.sglc-share-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1045;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .95rem;
  border: 0;
  border-radius: 999px;
  background: var(--sglc-red);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  cursor: pointer;
}
.sglc-share-fab:hover,
.sglc-share-fab:focus { background: var(--sglc-red-dark); }
.sglc-share-fab svg { display: block; }

body.sglc-noscroll { overflow: hidden; }

.sglc-share-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 20, 28, .55);
}
.sglc-share-overlay[hidden] { display: none; }
.sglc-share-panel {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.sglc-share-list { display: flex; flex-direction: column; gap: .6rem; }
.sglc-share-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  background: #fff;
  color: var(--sglc-ink);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.sglc-share-item:hover,
.sglc-share-item:focus { border-color: var(--sglc-red); color: var(--sglc-ink); }
.sglc-share-item svg { width: 22px; height: 22px; flex: 0 0 22px; }
.sglc-share-item.is-copied { border-color: #198754; color: #198754; }

.sglc-share-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1060;
  max-width: 340px;
  background: #fff;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}
.sglc-share-toast[hidden] { display: none; }
.sglc-share-toast.is-shown { opacity: 1; transform: translateY(0); }

/* ---- Opening hours ------------------------------------------------------ */
.sglc-hours-editor .sglc-hours-row { min-height: 38px; }
.sglc-hours-editor input[type="time"] { max-width: 150px; }
.sglc-hours .d-flex { padding: 1px 0; }
.sglc-hours .d-flex + .d-flex { border-top: 1px solid #eef0f3; }