/* ===== Base Reset & Fonts ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ===== Background & Layout ===== */
body {
  margin: 0;
  padding: 0;
  background: url('background-theme.jpg') no-repeat center center fixed;
  background-size: cover;
  background-color: #0a0f1f;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 10, 20, 0.5);
  z-index: -1;
}

/* ===== Header & Nav ===== */
header {
  background-color: #0b2341;
  color: white;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 4px solid #00aaff;
  position: relative;
}

.logo { max-height: 60px; }

nav ul { list-style: none; display: flex; gap: 20px; }
nav a { color: white; text-decoration: none; font-weight: bold; transition: color 0.3s ease; }
nav a:hover { color: #00aaff; }

/* ===== Ticker ===== */
.ticker {
  width: 100%;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.85);
  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
}

.ticker-text {
  display: inline-block;
  white-space: nowrap;
  font-weight: bold;
  padding: 10px 0;
  font-size: 1.2em;
  color: #003366;

  /* scrolling animation */
  animation: ticker 15s linear infinite;
  will-change: transform;
}

@keyframes ticker {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Optional: pause on hover */
.ticker:hover .ticker-text { animation-play-state: paused; }

/* ===== Main ===== */
main {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  background-color: rgba(255,255,255,0.95);
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 8px;
}

.content { padding: 30px; }

h1, h2, h3 { color: #0b2341; margin-bottom: 15px; }
p, li { margin-bottom: 10px; font-size: 16px; }
ul { padding-left: 20px; }

/* ===== Footer ===== */
footer {
  background-color: #0b2341;
  color: white;
  text-align: center;
  padding: 15px 10px;
  margin-top: 40px;
  border-top: 4px solid #00aaff;
  font-size: 14px;
}

/* ===== Responsive ===== */
@media screen and (max-width: 768px) {
  .logo { height: 70px; }
  main { margin: 20px; padding: 15px; }
  table.dataTable { width: 100% !important; }
}


/* --- Added by ChatGPT on 2025-08-19T03:31:48 ---
   Purpose: ensure the main nav shows all items (Contact Us included) by allowing wrap
   and tightening spacing on medium/smaller screens. Minimal + safe across pages. */
nav ul {
  display: flex;         /* ensure flex layout */
  flex-wrap: wrap;       /* allow wrapping instead of clipping */
}

/* Slightly reduce gaps on medium screens to avoid overflow */
@media (max-width: 1200px) {
  nav ul { gap: 12px; }
  .logo { max-width: 160px; }
}

/* Tighter spacing on smaller screens */
@media (max-width: 900px) {
  nav ul { gap: 10px; }
  header { row-gap: 8px; }
}
/* --- End patch --- */


.stars { display:inline-flex; align-items:center; gap:2px; line-height:1; vertical-align:middle; }
.stars .star { width:16px; height:16px; display:inline-block; }
.stars .star.filled { fill: currentColor; }
.stars .star.empty  { fill:#cbd5e1; }  /* subtle gray for empty slots */

.stars.green { color:#16a34a; } /* lively green for 3–7 */
.stars.red   { color:#dc2626; } /* bright red for 1–2  */

.stars .no-rating { font-size:12px; color:#64748b; margin-left:6px; }

/* === Star Rating (scoped, tuned) === */
td .stars { display:inline-flex; align-items:center; gap:1px; line-height:1; white-space:nowrap; }
td .stars .star { width:20px; height:20px; flex:0 0 20px; display:inline-block; }
td .stars .star.filled { fill: currentColor; }
td .stars .star.empty  { fill:#cbd5e1 !important; } /* subtle gray for empty slots */

/* Force colors so other CSS can't override */
td .stars.green .star.filled { fill:#16a34a !important; } /* lively green for 3–7 */
td .stars.red   .star.filled { fill:#dc2626 !important; } /* bright red for 1–2  */

td .stars .no-rating { font-size:11px; color:#64748b; margin-left:6px; }