:root { --primary: #007777; --primary-light: #e0f7fa; --accent: #34a853; --danger: #ea4335; --warning: #fbbc05; --bg: #f8f9fa; --card-bg: #fff; --border: #e0e0e0; --text: #222; --muted: #888; --radius: 8px; --shadow: 0 2px 8px rgba(0,0,0,0.06); --sticky-bg: #f5f5f5;
 --primary-color: #2c6eb5; --primary-color2: teal; --light-grey: #f0f2f5; --dark-grey: #65676b; --text-color: #050505; --background-color: #ffffff; --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            --success-green: #34a853; --warning-orange: #fbbc05; --error-red: #ea4335; }

body {font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";background: var(--bg);color: var(--text);margin:0; font-size: 16px; line-height: 1.5; }

header { position:sticky; top: -36px; z-index: 1000; background: #fff; box-shadow: 3px 2px 4px rgb(0 0 0 / 7%);    display:none;  }
header,h1,h2,h3,h4 { text-align: center; padding:0; margin:0 0 8px; text-transform:capitalize;  } h1 { font-size: 1.2rem; }  h2,h3 { font-size: 1.1rem; }
header h1 { margin: 0; font-size: 1.5rem; letter-spacing: 1px; font-weight: 600; }
a { color: var(--primary-color); text-decoration: none; } img,video,.yt { object-fit: contain; height: auto; max-width: 100%; }
.header-content { display: flex; justify-content: space-between; align-items: center; }

.main-nav { overflow: overlay hidden; white-space: nowrap; scrollbar-width: thin; padding:7px 2px; }  main>section { margin:auto }
.main-nav a { font-weight: 500; padding: 0 10px; border-right:1px solid #ccc; }

/* loading progress */
.active, button, .fdt input:checked + label, input[type="submit"], label:has(input[type="radio"]:checked) { color:white; background-color:var(--primary-color); font-weight:500; }
.loading button { pointer-events: none; background-image: linear-gradient(90deg, teal 0%,  #209dd5 100%) !important;background-repeat: no-repeat  !important; background-color:teal !important; animation-timing-function: ease-out; }
button.loading, input[type="submit"].loading, .loading button { animation: hLoading 7s infinite; } li.loading { animation: vLoading 3s infinite;  }
@keyframes hLoading { 0% { background-size:0% 100%; }  100% { background-size:100% 100%; } }
@keyframes vLoading { 0% { background-size:0% 100%; }  100% { background-size:100% 100%; } }


#app-container>section {max-width: 700px; margin-bottom:10px; padding:12px;background-color: white;}
form {  * {padding:5px;margin-bottom:10px;}  #trainSuggestions { display:none; } 
  label { padding: 8px 20px; cursor: pointer; background: #f5f5f5; } label>input { display:none }
  #date-container { overflow-x: overlay; scrollbar-width:thin; display: flex; column-gap: 5px; text-wrap:nowrap; flex-direction: row-reverse; justify-content:space-between; }
} #input button {cursor:pointer;color: white;background-color: var(--primary-color);font-weight:bold; width:98%; font-size:16px; border:0; padding: 10px 20px !important;}

.history-items {display: flex;gap: 20px;white-space: nowrap;overflow-x: overlay;scrollbar-width: thin; padding-bottom: 5px;}
.card {border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 12px; margin-bottom: 10px; border: 1px solid var(--border); }

table { max-height:60vh; border-spacing:0; border-width: 1px 0 0 1px; margin: 0 0 1.5em; display:block; overflow:overlay; scrollbar-width:thin; padding-bottom:7px; white-space: nowrap; border-collapse: collapse;background-color: #f0f0f0;}

#output {
  #popup table { max-height:75vh; }
  table th, table td { border-right: 1px solid #ccc; border-bottom: 1px solid #ddd; padding: 4px 8px; text-align: center; }
  table td.transition-occupied-onboard { border-top: 2px solid #aaa; }
  table td.occupied.transition-from-empty { background: linear-gradient(to bottom, #fff 50%, #e0e0e0 50%); }
  table td.empty.transition-from-occupied { background: linear-gradient(to bottom, #eee 25%, #fff 50%); }
  table td.empty { background: #fff; }  table td:first-child { text-align:left; }
  table thead th, table tbody td:first-child, #popup tbody tr:first-child { position: sticky; border: 1px solid #ddd; top: 0; left: 0; z-index: 30; background-color: #eee; }
  .chart-table { th, td { border-bottom-color: #f5f5f5; } }
}

/* CP page first 2; CV page: coach-btn only  */
.coach-layout {display: flex;row-gap: 14px; flex-wrap: wrap; justify-content: space-between; list-style-type: none; margin:0; padding:0; }
.coach-layout>*, .coach {text-align:center;padding: 8px 0px;border-radius: 4px;border: 1px solid #ccc;background: #fafafa;cursor: pointer;color: black;min-width: 23%;box-sizing: border-box;}
.coach-layout button, .coach-list button, .coach-btn { width: calc(20% - 22px); text-align:center; margin: 4px; padding: 6px 12px; border-radius: 4px; border: 1px solid #ccc;background: #fafafa;cursor: pointer;color: black;}

/* homepage */
.feature-card { text-align:center; display:flex; flex-direction: row-reverse; gap:12px;}
.feature-card p { margin: 0 } .feature-card img, #meta img { width:100px; min-width: 100px; min-height: 100px;}
#input a h3,#input a h2 { color: var(--primary-color); }
.feature-card a { display: block; color: var(--primary-color); font-size: 1.1em; font-weight: bold; margin: 0 0 8px; }


/* Pages */
#meta { display: flex; flex-wrap: wrap; align-items: center; } #meta h1, #meta h2 { flex-basis: 100%; margin: 0; } 
#meta img { margin-right: 20px; } #meta p { flex: 1 1 0; margin: 0; }


/*   TrainChart.in   customization        */

h1 { border-bottom: 1px solid #eee; padding-bottom: 5px; }  .ads { min-height:30px !important; } span.ezoic-ad { min-height: 25px !important; }
#input+div:after{ content: ""; clear: both; display: table; }
#trainNumber { min-width:78%; }
div,section { scrollbar-width: none !important; -ms-overflow-style: none; }  div::-webkit-scrollbar, section::-webkit-scrollbar { width: 0; height: 0; display: none; }

#history { min-height:30px; max-width: 93vw; overflow: overlay;   }

ul.slinks, nav.slinks, .slinks>ul, .slinks>div, .slinks nav {
  display: flex; overflow-x: overlay; align-items: center; justify-content: space-around; list-style-type:none; padding:0; margin:0;
  span { display: block; } a { min-width:60px; margin:0; text-align: center; text-transform: capitalize; } img { display:block; width:130px; height:100px; }
}

#popup {
    position: fixed; top: 10px; left: 10px; right: 10px; height: 99vh;  padding: 10px; overflow: overlay;
    background-color: #fff;  box-shadow: 0 0 10px #ccc;  z-index: 1000;
    table { max-height:unset;  } button { float:right; }
}

footer button, #output .collapse-btn, #live-eta-refresh  {border-width: 0;padding: 4px 12px;margin: 0 12px;font-weight: bold; }

.pnr-chart-links { display:none; }



.hide { display:none; }






/* The Blue User GPS Pulsar */
.gps-pulsar .dot {
    width: 12px; height: 12px;
    background: #2196F3;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(33, 150, 243, 0.4);
    animation: pulse-gps 2s infinite;
}

@keyframes pulse-gps {
    0% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(33, 150, 243, 0); }
    100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
}

/* The Next Station Orange Glow */
.next-stn-glow {
    filter: drop-shadow(0 0 8px rgba(255, 171, 0, 0.8));
    animation: glow-next 1.5s ease-in-out infinite alternate;
}

@keyframes glow-next {
    from { filter: drop-shadow(0 0 4px rgba(255, 171, 0, 0.6)); transform: scale(1); }
    to { filter: drop-shadow(0 0 12px rgba(255, 171, 0, 1)); transform: scale(1.1); }
}

/* Station Tooltip Labels */
.stn-label {
    background: rgba(0, 0, 0, 0.7) !important;
    border: none !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 10px !important;
    border-radius: 4px !important;
    padding: 2px 5px !important;
}