/* BODY */
body {
  font-family: Arial;
 
   background: transparent;
 
  margin: 0;
  padding: 10px;
   zoom: 1.;   /* 🔥 110% zoom */
   font-size: 15px;
}
body {
  background-color: #999;
}

/* CONTAINER WIDTH */
body {
  width: 900px;
  margin: auto;
}

/* SECTION BOX */
.section {
  border: 1px solid #ffff;
  background: #91CFDE;
  background: transparent;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
}
/* 🔥 Label white */
label {
  color: white;
}

/* 🔥 Input + Select */
.col input,
.col select {
  color: white !important;
  border: 1px solid white !important;
  background: rgba(255,255,255,0.1);
}

/* 🔥 Placeholder */
.col input::placeholder {
  color: rgba(255,255,255,0.8);
}

/* 🔥 Focus effect */
.col input:focus,
.col select:focus {
  outline: none;
  border: 1px solid #00eaff;
  box-shadow: 0 0 8px #00eaff;
}


/* 🔥 Label white */
label {
  color: white;
}

/* 🔥 Input + Select */
.row input,
.row select {
  color: white !important;
  border: 1px solid white !important;
  background: rgba(255,255,255,0.1);
}

/* 🔥 Placeholder */
.row input::placeholder {
  color: rgba(255,255,255,0.8);
}

/* 🔥 Focus effect */
.row input:focus,
.row select:focus {
  outline: none;
  border: 1px solid #00eaff;
  box-shadow: 0 0 8px #00eaff;
}



/* TITLE */
.section-title {
  font-weight: bold;
  margin-bottom: 8px;
  color: #fdfdfd;
}

/* ROW */
.row {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #fdfdfd;
}
.col,input{
  border-radius: 5px;
}
/* LABEL */
label {
  font-size: 15px;
  width: 90px;
  color: #fdfdfd;
}

/* INPUT */
input, select {
  padding: 4px;
  border: 1px solid #999;
  font-size: 14px;
  background: white;
   background: transparent;
   color: #fdfdfd;
}

/* WIDTH CONTROL */
#irctc-login,
#irctc-password {
  width: 250px;
  color: #fdfdfd;
}

#from, #to {
  width: 250px;
  border-radius: 5px;
}

#journey-date,
#train-no {
  width: 160px;
  border-radius: 5px;

}

#journey-class-input {
  width: 150px;
  margin-right: 70px;   /* Class er pore gap */
  border-radius: 5px;
  color: #fdfdfd;
}

#quota-input,
#mobile {
  width: 150px;
  border-radius: 5px;
}

/* TABLE */
.passenger-table {
  width: 100%;
  border-collapse: collapse;
  color: #fdfdfd;
}

.passenger-table th {
  text-align: left;
  font-size: 13px;
  color: #fdfdfd;
  width: 80px;
}

.passenger-table td {
  padding: 4px;
  
  
}

/* PASSENGER INPUT */
.passenger-table input {
  width: 150px;
  border-radius: 5px;
  color: #fdfdfd;
  
}

/* 🔥 Label white */
label {
  color: white;
}

/* 🔥 Input + Select */
.col input,
.col select {
  color: white !important;
  border: 1px solid white !important;
  background: rgba(255,255,255,0.1);
}

/* 🔥 Placeholder */
.col input::placeholder {
  color: rgba(255,255,255,0.8);
}

/* 🔥 Focus effect */
.col input:focus,
.col select:focus {
  outline: none;
  border: 1px solid #00eaff;
  box-shadow: 0 0 8px #00eaff;
}
.col select option {
 
  color: black;

}


.passenger-table select {
  width: 110px;
  border-radius: 5px;
  color: #fdfdfd;
}

/* BUTTON */
button {
  padding: 8px 20px;
  border: none;
  color: white;
  font-weight: bold;
  cursor: pointer;
  border-radius: 10px;
}

/* BUTTON COLORS */
.save {
  background: green;
  color: white;
}
.save1 {
  background: rgb(217, 4, 255);
  
}
.start {
  background: orange;
}

/* BUTTON ROW FIX */
.row button {
  width: auto;
  color: black;
}
.row option{
  color: black;
}
/* DATE PICKER */
.date-picker-container {
  position: relative;
  margin-right: 40px;   /* Date er pore gap */
  margin-top: 0.3px;
}
.date{
  margin-right: 25px;
}
.calendar-icon {
  position: absolute;
  left: 180px;

  top: 0.2px;
  cursor: pointer;
}

.calendar-container {
  display: none;
  position: absolute;
  top: 25px;
  left: 0;
  width: 125%;
  background: white;
  color: black;
  border-radius: 6px;
  padding: 10px;
  z-index: 999;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  
}

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(30px, 1fr));
  text-align: center;
  font-size: 13px;
  gap: 8px;
  cursor: pointer;
}

.calendar-weekdays div {
  font-weight: bold;
  padding: 8px;
  color: black;
}

.calendar-days div:hover {
  background: #3972cd;
  color: rgb(9, 242, 172);
}

/* 🔥 PERFECT ALIGN */
.right-checkbox {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* checkbox size fix */
.right-checkbox input {
  margin: 0;
}

/* 🔥 OUTER BORDER */
.main-wrapper {
  border: 5px solid  #91CFDE;
  padding: 15px;
  background: #eaeaea;
  background: transparent;
  border-radius: 10px;
}
#train-suggestions:empty {
  display: none;
}


/* 🔥 Passenger table text white */
.passenger-table th,
.passenger-table td {
  color: white;
}

/* 🔥 Input fields inside table */
.passenger-table input {
  color: white !important;
  border: 1px solid white !important;
  background: rgba(255,255,255,0.1);
  
}

/* 🔥 Select inside table */
.passenger-table select {
  color: white !important;
  border: 1px solid white !important;
  background: rgba(255,255,255,0.1);
}

/* 🔥 Placeholder */
.passenger-table input::placeholder {
  color: rgba(255,255,255,0.8);
}

/* 🔥 Focus glow */
.passenger-table input:focus,
.passenger-table select:focus {
  outline: none;
  border: 1px solid #00eaff;
  box-shadow: 0 0 8px #00eaff;
}
.passenger-table select option {
  color: black;
}

.train-icon {
  width: 120px;
  height: 70px;
  vertical-align: middle;
  margin-right: 8px;
}

.header {
  font-size: 25px;
  font-weight: 700;

  background: linear-gradient(45deg, #368ffd, #ff0202);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-align: center;
}




.swap-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #A53098;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
}

.swap-btn:hover {
  transform: rotate(180deg);
  transition: 0.3s;
}

