:root {
  --primary: #0C1D5C;        /* Light blue main */
  --black: #000000;
  --primary-dark: #1b3175;   /* Darker blue */
  --accent: #7998f5;         /* Light blue accent */
  --text: #2c3e50;           /* Dark text */
  --bg-light: #dee5fc;       /* Very light blue-gray bg */
  --section-bg: #1b3175;     /* Light blue sections */
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  background: var(--bg-light);
  color: var(--text);
}

h1, h2 {
  margin: 0 0 15px 0;
  font-size: 2.2rem;
  color: var(--primary-dark);
  text-shadow: 1px 1px #fff;
}

sup {
  font-size: 0.7em;
  vertical-align: top;
}

#bodybox {
  width: 100%;
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 10px;
}

/* MAIN HEADER */
.header{
    width:100%;
    padding:10px 25px;
    background:#ffffff;
    border-bottom:3px solid var(--accent);  /* Light blue */
    box-shadow:0 6px 17px rgba(0,0,0,0.20);
    border-radius:10px;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:18px;
}

/* LEFT SIDE */
.left{
    display:flex;
    align-items:center;
    gap:16px;
}

.logo{
    width:100px;
}

/* COLLEGE NAME */
.left h2{
    margin:0;
    font-size:1.60rem;
    font-weight:800;
    color:var(--primary-dark);  /* Dark blue */
    line-height:1.2;
}

/* SUB TEXT */
.left p{
    margin:0;
    font-size:1.35rem;
    color:var(--primary);       /* Light blue */
    font-weight:780;
}

/* REMOVE LINK UNDERLINE */
.left a{
    text-decoration:none;
}

/* WEBSITE BADGE (Option 1) */
.website{
    padding:7px 16px;
    background:var( --section-bg);   /* Light blue */
    color: #ffffff;  /* Dark blue */
    font-size:0.99rem;
    font-weight:650;
    border-radius:8px;
    border:2px solid var(--section-bg);  /* Light blue */
    transition:0.4s;
    margin-left:250px;
    display:inline-block;
}

.website:hover{
    background:var(--section-bg);  /* Lighter blue */
    color:#4A70A9;          /* Light blue */
    border-color:var(--primary);   /* Main blue */
}

.search-time-row {
  display: flex;
  justify-content: center; 
  align-items: center;
  flex-wrap: wrap;
  gap: 100px;
  margin: 10px 0;
}

#current-time {
  text-align: center;
  margin: 10px 0;
  font-size: 1rem;
  font-weight: bold;
  background-color: var( --section-bg);  /* Light blue */
  display: inline-block;
  padding: 7px 13px;
  border-radius: 8px;
  color: #ffffff;       /* Dark blue */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.search-box {
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
}

.search-bar input[type="text"] {
  flex: 1;
  min-width: 380px;
  padding: 8px 14px;
  font-size: 1rem;
  font-weight: bold;
  border: 2px solid var(--primary);  /* Light blue */
  border-radius: 6px;
}

.search-bar button {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

.nav-scroll {
  overflow-x: auto;
}

table.date-nav {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-light);
}

table.date-nav td {
  white-space: nowrap;
}

td.date {
  background: var(--primary);
  color: #fff;
  font-weight: bold;
  font-size: 1.15rem;
  padding: 12px 18px;
  text-align: center;
  border-bottom: 1px solid var(--accent);  /* Light blue */
  transition: 0.2s;
}

td.date a {
  color: #fff;
  text-decoration: none;
}

td.date:hover,
td.date.active {
  background: var(--primary-dark);
}

a.bus-link {
  color: var(--primary-dark);
  font-weight: bold;
  text-decoration: none;
  font-size: 1.1rem;
  transition: 0.2s;
}

a.bus-link:hover {
  text-decoration: underline;
  color: var(--primary);
}

#daily-schedule,
#route-131,
#route-131-details {
  background: var(--bg-light);
  padding: 20px;
  border-radius: 10px;
  margin: 10px 0;
  color: var(--black);
}

.centered {
  text-align: center;
  font-size: 1.1rem;
  padding: 12px;
}

.date-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 4px;
  margin: 10px 0;
  flex-wrap: nowrap;
}

.date-nav .date {
  flex: 1 1 14.28%;
  background: var(--primary);
  color: white;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 10px 4px;
  text-align: center;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date-nav .date a {
  color: white;
  text-decoration: none;
  display: block;
}

.date-nav .date:hover,
.date-nav .date.active {
  background: var(--primary-dark);
}

.A1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 7px auto 10px;
  width: 95%;
  max-width: 800px;
  padding: 0 8px;
  box-sizing: border-box;
}

.A2 {
  width: 55%;
  background-color: var(--accent);  /* Light blue */
  color: #fff;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  padding: 12px 0;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.A3{    
  display: flex;
  background-color: var(--bg-light);  /* Light bg */
  border: 1px solid var(--accent);    /* Light blue */
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  max-width: 720px;
  margin: 10px auto;
  padding: 10px 0;
  width: 100%;
  text-align: center;
  overflow-x: auto;
  box-sizing: border-box;
}

@keyframes glow {
  0% { background-position: 0%; }
  100% { background-position: 450%; }
}





.date-box {
    font-family: Arial;
    font-size: 16px;
    color: #26399c;
    font-weight: bold;
    padding: 15px 22px;
    text-shadow: 2px 2px 6px rgba(147, 51, 234, 0.3);
    text-align: center;
    width: fit-content;
    margin: 0 auto;
}

.date-box sup {
    font-size: 10px;
    vertical-align: super;
    margin-left: 2px;
}

.day-badge {
    background: #26399c;
    color: white;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-left: 8px;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.7);
    font-weight: bold;
}

.day-tag {
    font-size: 12px;
    margin-top: 4px;
    color:#26399c;
    font-weight: bold;
}




.simple-footer {
  position: relative;      /* IMPORTANT */
  width: 100%;
  clear: both;             /* FLOAT FIX */
  float: none !important;  /* FORCE RESET */
margin-top: -20px;
  
  bottom: 10px;
}

.simple-footer .footer-bottom {
  width: 100%;
  background: #0C1D5C;
  color: #ffffff;
  text-align: center;
  padding: 12px 5px;
      border-radius: 10px;
  font-size: 13px;
}


















/* Tablet mode (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .search-time-row {
    display: flex;
    justify-content: center; 
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;    
  }
  
  .header{
    flex-direction: row;
    align-items: center;
    gap:10px;
    padding:10px 18px;
  }

  .left{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .logo{
    width:55px;
    margin-left:0;
  }

  .left h2{
    font-size:1.20rem;
    white-space:nowrap;
  }

  .left p{
    font-size:0.98rem;
    white-space:nowrap;
  }

  .website{
    margin-left:150px;
    margin-top:0;
    font-size:0.80rem;
    padding:6px 12px;
    align-self:center;
  } 
}

/* Mobile view */
@media (max-width: 768px) {
  body {
    font-size: 12px;
    font-weight: bold;
    padding: 0;
    margin: 0;
   
  }

  h1, h2 {
    font-size: 1.2rem;
    margin: 6px 0;
    text-align: center;
    font-weight: bold;
  }
  
  /* Current time box */
  #current-time {
    font-size: 0.83rem;
    padding: 3px 8px;
    margin: 2px auto;
    display: block;
    width: 93%;
    background-color: var(--section-bg);  /* Light blue */
    color:  #ffffff;       /* Dark blue */
    border-radius: 5px;
  }

  /* Search bar wrapper */
  .search-bar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 3px;
    padding: 1px;
    margin: 2px auto;
    width: 50%;
    max-width: 200px;
    box-sizing: border-box;
  }

  /* Search input */
  .search-bar input[type="text"] {
    font-size: 0.55rem;
    padding: 6px 8px;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Search button */
  .search-bar button {
    font-size: 0.75rem;
    padding: 6px 8px;
    white-space: nowrap;
    cursor: pointer;
  }

  table {
    width: 100%;
    table-layout: fixed;
    word-break: break-word;
    border-collapse: collapse;
  }

  th, td {
    font-size: 0.8rem;
    padding: 6px;
    font-weight: bold;
    text-align: center;
    word-break: break-word;
  }

  td.date {
    font-size: 0.7rem;
    padding: 6px 4px;
    text-align: center;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .date-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 2px;
    margin: 6px 0;
    flex-wrap: wrap;
  }

  .date-nav .date {
    flex: 1 1 9%;
    background: var(--primary);  /* Light blue */
    color: white;
    font-weight: bold;
    font-size: 0.6rem;
    padding: 8px 4px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    box-sizing: border-box;
    white-space: normal;
    overflow: wrap;
    text-overflow: ellipsis;
  }

  .date-nav .date a {
    color: white;
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: center;
  }

  .date-nav .date:hover,
  .date-nav .date.active {
    background: var(--primary-dark);
  }

  .table {
    font-size: 14px;
  }
  
  div[style*="Quick View"], div[style*="Route Details"] {
    padding: 10px 0 !important;
    font-size: 16px !important;
  }

  .A1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 7px auto 10px;
    width: 95%;
    max-width: 800px;
    padding: 0 8px;
    box-sizing: border-box;
  }

  .A2 {
    width: 80%;
    background-color: var(--accent);  /* Light blue */
    color: #fff;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding: 10px 0;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }
    
  .A3{    
    display: flex;
    background-color: var(--bg-light);  /* Light bg */
    border: 1px solid var(--accent);    /* Light blue */
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    max-width: 720px;
    min-width: 320px;
    margin: 5px 0;
    padding: 7px 0;
    width: 95%;
    text-align: center;
    overflow-x: auto;
    box-sizing: border-box;
  }

  .search-time-row {
    gap: 05px;  
  }




  #bodybox {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1px;
  }

  #daily-schedule,
  #route-131,
  #route-131-details {
    padding: 15px;
    width: 95%;
    margin: 10px auto;
    box-sizing: border-box;
    color: var(--black);
  }
  
  
      .simple-footer {
  position: relative;      /* IMPORTANT */
  width: 100%;
  clear: both;             /* FLOAT FIX */
  float: none !important;  /* FORCE RESET */
margin-top: -20px;
  
  bottom: 10px;
}

.simple-footer .footer-bottom {
  width: 100%;
  background: #0C1D5C;
  color: #ffffff;
  text-align: center;
  padding: 10px 2px;
  font-size: 10px;
}

  
  
  
  
}








/* 320px → 480px (Small Mobiles) */
@media (min-width:320px) and (max-width:480px) {
  .header{
    flex-direction: column;
    align-items:flex-start;
    gap:3px;
    padding:6px 10px;
  }

  .left{
    gap:4px;
  }

  .logo{
    width:44px;
  }

  .left h2{
    font-size:0.83rem;
    white-space: nowrap;
  }

  .left p{
    font-size:0.74rem;
    white-space: nowrap;
  }
  
  
  
   #daily-schedule,
  #route-131,
  #route-131-details {
    color: var(--black);
    
    
    
  }

  .website{
    font-size:0.60rem;
    padding:4px 5px;
    margin-left:0.5rem;
    margin-top:6px;
    font-weight:720;
    align-self:flex-start;
  }
}

/* 481px → 600px (Medium Mobiles) */
@media (min-width:481px) and (max-width:600px){
  .header{
    flex-direction: column;
    align-items:flex-start;
    gap:6px;
    padding:8px 12px;
  }

  .left{
    gap:7px;
  }

  .logo{
    width:53px;
  }

  .left h2{
    font-size:0.85rem;
    white-space: nowrap;
  }

  .left p{
    font-size:0.65rem;
    white-space: nowrap;
  }
  
     #daily-schedule,
  #route-131,
  #route-131-details {
    color: var(--black);
  }

  .website{
    font-size:0.62rem;
    padding:4px 9px;
    margin-left:1px;
    margin-top:4px;
    
  }
}

/* 601px → 768px (Large Mobiles & Small Tablets) */
@media (min-width:601px) and (max-width:768px){
  .header{
    flex-direction: row;
    align-items:center;
    gap:10px;
    padding:10px 18px;
  }

  .left{
    gap:12px;
  }

  .logo{
    width:58px;
  }

  .left h2{
    font-size:1.20rem;
    white-space: nowrap;
  }

  .left p{
    font-size:0.90rem;
    white-space: nowrap;
  }
  
     #daily-schedule,
  #route-131,
  #route-131-details {
    color: var(--black);
  }

  .website{
    margin-left: 75px;
    margin-top:0;
    font-size:0.80rem;
    padding:6px 12px;
    align-self:center;
  }
}

/* SMART WATCH (160px – 200px) */
@media (max-width:200px){
  .header{
    flex-direction: column;
    align-items:flex-start;
    gap:3px;
    padding:3px 5px;
  }

  .left{
    gap:4px;
  }

  .logo{
    width:28px;
  }

  .left h2{
    font-size:0.33rem;
    white-space: nowrap;
    line-height:1;
  }

  .left p{
    font-size:0.22rem;
    white-space: nowrap;
    line-height:1;
  }

  .website{
    font-size:0.21rem;
    padding:2px 4px;
    margin:2px 0 0 0;
    align-self:flex-start;
    border-radius:4px;
  }
  
     #daily-schedule,
  #route-131,
  #route-131-details {
    color: var(--black);
  }
}

/* SMALL DEVICES (200px → 320px) */
@media (min-width:200px) and (max-width:320px){
  .header{
    flex-direction: column;
    align-items:flex-start;
    gap:6px;
    padding:6px 10px;
  }

  .left{
    gap:6px;
  }

  .logo{
    width:35px;
  }

  .left h2{
    font-size:0.55rem;
    white-space: nowrap;
    line-height:1.1;
  }

  .left p{
    font-size:0.50rem;
    white-space: nowrap;
    line-height:1.1;
  }
  
     #daily-schedule,
  #route-131,
  #route-131-details {
    color: var(--black);
  }

  .website{
    font-size:0.50rem;
    padding:3px 7px;
    align-self:flex-start;
    margin:3px 0 0 0;
    border-radius:6px;
  }
}