:root {
  --primary-color: #00bfa6; /* Vibrant teal */
  --primary-hover: #008c7a; /* Darker teal for hover */
  --background-light: #f0f7f7; /* Light aqua */
  --background-light: ##fefefe; 
  --text-color: #2c3e50; /* Deep gray-blue */
  --text-secondary: #607d8b; /* Muted gray-blue for secondary text */
  --text-error: #e53935; /* Bright red for errors */
  --border-color: #b0bec5; /* Light gray-blue for borders */
  --list-item-bg: #ffffff; /* Crisp white for list items */

  --first-green: #008475;
  --second-green: #087b6d;
  --third-green: #0e7266;
}


* {
  padding: 0;
  margin: 0;
  font-family: "Oxygen", sans-serif;
  box-sizing: border-box;
}

body {
  background-color: var(--background-light);
  color: var(--text-color);
  padding: 20px;
}

.control {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
}

.control .label {
  margin-bottom: 5px;
}

.txt, .txt-small {
  width: 100%;
  padding: 10px 5px;
  border: 1px #ccc solid;
  border-radius: 5px;
}

.control .txt {
  margin-bottom: 10px;
}

.control label {
  font-size: 16px;
  margin-bottom: 10px;
  display: block;
}

.new-trip-panel {
  padding: 10px;
  background: var(--list-item-bg, #fff);
  margin: 10px 0;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: none;
}

/* Card Container */
.list-item {
  display: flex;
  flex-direction: column;
  background: var(--list-item-bg, #fff);
  margin: 10px 0;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.list-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Travel Route Section */
.travel-route {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #ddd);
  margin-bottom: 12px;
}

.travel-line {
  font-size: 14px;
  color: var(--text-color, #333);
}

.middle-arrow {
  font-size: 18px;
  color: var(--primary-color, #00bfa6);
  padding: 0 8px;
}

.travel-datetime {
  font-size: 14px;
  color: var(--text-secondary, #777);
  min-width: 110px;
  text-align: center;
}

/* Travel Info Section */
.travel-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Travel Details */
.travel-details {
  flex: 1;
  margin-right: 16px;
}

.travel-vehicle {
  font-size: 16px;
  font-weight: bold;
  color: var(--primary-hover, #008c7a);
}

.travel-description {
  font-size: 13px;
  color: var(--text-secondary, #777);
  margin: 6px 0;
}

.trip-details {
  margin: 10px 0px;
}

.travel-contact {
  font-size: 12px;
  color: var(--primary-color, #004e43);
  margin-top: 5px;
}

.contact-link {
  color: var(--primary-color, #004e43);
  text-decoration: none;
}

.contact-link:hover {
  text-decoration: underline;
}

/* Travel Pricing Section */
.travel-specs {
  text-align: center;
  min-width: 150px;
  background: var(--primary-color, #00bfa6);
  color: #fff;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.travel-price {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.icons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.icons i {
  font-size: 18px;
  color: #fff;
}

input[type="button"], .btn, input[type="submit"] {
  background: var(--primary-color, #00bfa6);
  border-radius: 4px;
  padding: 8px;
  border: none;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 1px #00ba6d;
}
.fl {float: left;}
.fr {float: right;}
.cl {clear: both;}

a.anchor-btn {
  display: inline-block;
  padding: 8px 10px;
  color: #000;
}



.list-item.disabled {
  background-color: #f5f5f5; /* Light gray background */
  color: #b0b0b0; /* Muted text color */
  border: 1px solid #e0e0e0; /* Subtle border */
  pointer-events: none; /* Disable all interactions */
  opacity: 0.7; /* Make it semi-transparent */
}

.list-item.disabled .travel-specs {
  background: #dedede;
}

.list-item.disabled .travel-route,
.list-item.disabled .travel-info {
  opacity: 0.7; /* Dim the content further */
}

.list-item.disabled .travel-contact a,
.list-item.disabled .icons i {
  color: #636363; /* Lighter muted color for links and icons */
  pointer-events: none; /* Ensure links are non-clickable */
  text-decoration: none; /* Remove any link underline */
}

.list-item.disabled .travel-vehicle span {
  color: #636363; /* Muted color for additional text */
}

.list-item.disabled .travel-price {
  font-weight: bold;
  color: #636363; /* Slightly darker gray for emphasis */
}

.validateOTP-block {
  display: none;
}

.logo {
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  margin: 20px auto;
  font-family: 'faster one';
  letter-spacing: 10px;
  text-transform: uppercase;
  color: var(--third-green);
  /* color: #999; */
}

.logo span {
  font-size: 18px;
  display: block;
  letter-spacing: 8px;
  margin-left: -10px;
  color: #000;
  /* color: #f0f0f0; */
}

.login-form {
  margin-top: 50px;
}

.service {
  text-align: center;
}


.service a i {
  margin-right: 5px;
  display: inline-block;
}


.logo-placeholder {
  text-align: center;
}
.logo-placeholder img {
  width: 400px;
  max-width: 90%;
}

.home-center {
  display: grid;
  place-items: center; /* Centers both vertically & horizontally */
  height: 100vh;
}

.lbmrgn {
  margin-bottom: 10px;
}


input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

.aligncenter {
 text-align: center;
}

.gray-btn {
  background: #ddd !important;
  color: #535353 !important;
  text-shadow: none !important;
}


/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1.154;
  position: fixed;
  display: none;
  background: conic-gradient(from 120deg at 50% 64%,#0000, #25b09b 1deg 120deg,#0000 121deg);
  animation: l27-0 1.5s infinite cubic-bezier(0.3,1,0,1);
}
.loader:before,
.loader:after {
  content:'';
  position: absolute;
  inset:0;
  background:inherit;
  transform-origin: 50% 66%;
  animation: l27-1 1.5s infinite;
}
.loader:after {
  --s:-1;
}
@keyframes l27-0 {
   0%,30%      {transform: rotate(0)}
   70%         {transform: rotate(120deg)}
   70.01%,100% {transform: rotate(360deg)}
}
@keyframes l27-1 {
   0%      {transform: rotate(calc(var(--s,1)*120deg)) translate(0)}
   30%,70% {transform: rotate(calc(var(--s,1)*120deg)) translate(calc(var(--s,1)*-5px),10px)}
   100%    {transform: rotate(calc(var(--s,1)*120deg)) translate(0)}
}



.services {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 10px;  */
  padding-top: 30px;
}

.service {
  text-align: center;
}

a.btn i {
  display: block;
  font-size: 30px;
  margin-bottom: 5px;
  color:#41bbae;
  padding: 15px;
  background-color: var(--third-green);
  border-radius: 10px 10px 0px 0px;
  width: 100%;
}

a.btn {
  display: block;
  align-items: center;
  justify-content: center;
  /* padding: 20px 15px; */
  text-decoration: none;
  background-color: var(--first-green);
  /* background-color: #fff; */
  padding: 0px;
  /* color: #000; */
  border-radius: 10px;
  padding: 10px 0px;
  font-size: 18px;
  text-shadow: none;
  border: 1px #ddd solid;
  box-shadow: 0px 0px 5px -1px #25b09b;
  width: 200px;
  margin: 10px 0px;
}


.mini-logo {
  width: 100%;
  text-align: right;
}

.mini-logo img {
  width: 150px;
}

.single-line .control {
  width: 48%;
}

.create-request {
  display: none;
}

.list-item .t_from, .list-item .t_to {
  font-size: 14px;
}