/* ==================================================
   Ship4Trip Brand Color & Gradient Palette (2026 Edition)
   Author: Madjid Shafiee
   Company: Path Access Tech Hub Corp.
   Website: https://www.ship4trip.com
   Slogan: "Share the journey, share the benefits."
   ================================================== */


:root {
   /* === Core Brand Colors === */
   /* Sender (Blue) */
   --sender-blue-darker: #084CB5; /* ~15–20% darker */
   --sender-blue-dark: #0A63E0; /* Primary */
   --sender-blue-light: #4C8CF0; /* ~15% lighter */
   --sender-blue-lighter: #DDEBFF; /* ~35% lighter pastel */
   /* Traveler (Green) */
   --traveler-green-darker: #15734B; /* ~15–20% darker */
   --traveler-green-dark: #1B9460; /* Primary */
   --traveler-green-light: #47B686; /* ~15% lighter */
   --traveler-green-lighter: #E6FFF0; /* ~35% lighter pastel */
   /* === Supporting Accents === */
   --muted-green: #B3D7C5; /* Muted accent */
   --muted-blue: #B3CCF2; /* Muted accent (soft pastel blue) */

   --light-blue: #E1EEFF; /* Info background */
   --dark-navy: #0B2D4B; /* Text/contrast */
   --neutral-gray: #F7F9FB; /* Base background */
   /* === Status Colors === */
   /* Danger (Red) */
   --danger-darker: #A3141F; /* Deep red for hover or borders */
   --danger-dark: #C71F2A; /* Primary danger red */
   --danger-light: #E85B65; /* Light red accent */
   --danger-lighter: #FFE5E7; /* Soft pastel red background */
   /* Update / Warning (Amber-Orange) */
   --update-darker: #C27A00; /* Deep amber */
   --update-dark: #E09E00; /* Primary amber */
   --update-light: #F7C14D; /* Light amber */
   --update-lighter: #FFF6E0; /* Pastel amber background */
   /* Other / Neutral (Gray) */
   --label-gray-darker: #545B62; /* ~20% darker neutral */
   --label-gray-dark: #6C757D; /* Primary neutral gray label */
   --label-gray-light: #9CA3A9; /* ~20% lighter */
   --label-gray-lighter: #E4E7EA; /* Soft pastel neutral background */
   /* === Layout === */
   --radius: 14px;
}


/* ==================================================
   Background Gradients
   ================================================== */
/* Sender (Blue Theme) */
.sender-gradient {
   background: linear-gradient(135deg, var(--sender-blue-dark), var(--sender-blue-xlight));
   color: #ffffff;
   border-radius: var(--radius);
}

/* Traveler (Green Theme) */
.traveler-gradient {
   background: linear-gradient(135deg, var(--traveler-green-dark), var(--traveler-green-xlight));
   color: #ffffff;
   border-radius: var(--radius);
}

/* Unified Ship4Trip Gradient (Blue → Green) */
.ship4trip-gradient-darker {
   background: linear-gradient(90deg, var(--sender-blue-darker), var(--traveler-green-darker));
   color: #ffffff;
   border-radius: var(--radius);
}
.ship4trip-gradient-dark {
   background: linear-gradient(90deg, var(--sender-blue-dark), var(--traveler-green-dark));
   color: #ffffff;
   border-radius: var(--radius);
}
.ship4trip-gradient-light {
   background: linear-gradient(90deg, var(--sender-blue-light), var(--traveler-green-light));
   color: #ffffff;
   border-radius: var(--radius);
}
.ship4trip-gradient-lighter {
   background: linear-gradient(90deg, var(--sender-blue-lighter), var(--traveler-green-lighter));
   color: #ffffff;
   border-radius: var(--radius);
}
/* ==================================================
   Utility Styles
   ================================================== */

.text-sender {
  color: var(--sender-blue-dark);
}

.text-traveler {
  color: var(--traveler-green-dark);
}

.bg-sender {
  background-color: var(--sender-blue-dark);
  color: #ffffff;
}

.bg-traveler {
  background-color: var(--traveler-green-dark);
  color: #ffffff;
}

.bg-muted-green {
  background-color: var(--muted-green);
}

.bg-muted-blue {
   background-color: var(--muted-blue);
}

.border-sender {
  border: 2px solid var(--sender-blue-dark);
}

.border-traveler {
  border: 2px solid var(--traveler-green-dark);
}

/* Buttons */
.btn-sender {
  background: var(--sender-blue-dark);
  color: #fff;
  border-radius: var(--radius);
  border: none;
  transition: 0.3s;
}
   .btn-sender:hover {
      background: linear-gradient(135deg, var(--sender-blue-dark), var(--sender-blue-light));
   }

.btn-traveler {
  background: var(--traveler-green-dark);
  color: #fff;
  border-radius: var(--radius);
  border: none;
  transition: 0.3s;
}
   .btn-traveler:hover {
      background: linear-gradient(135deg, var(--traveler-green-dark), var(--traveler-green-light));
   }

/* Card & Panel Base */
.card {
  background-color: var(--neutral-gray);
  border-radius: var(--radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  padding: 20px;
  color: var(--dark-navy);
}

.panel {
  background: var(--light-blue);
  border-radius: var(--radius);
  padding: 20px;
  color: var(--dark-navy);
}


.path-meta-label {
   width: 160px;
   color: var(--label-gray-dark);
}