/* -------------- Styles for the entire application -------------- */
body {
    background-color: #ffffff;
}
h1 {
    margin-top: 20px;
}

/* Button styling for whole program */
.btn.btn-primary{
    background-color: #00523A; /* Change the background color */
    border-color: #00523A; /* Change the border color */
    color: #FFFADE; /* Change the text color */
    font-size: 1rem; /* Adjust the font size */
    padding: 0.5rem 1rem; /* Adjust the padding */
    border-radius: 0.5rem; /* Adjust the border radius */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Add transition for smooth effect */
}

/* Button Hover Styling for whole program (primary buttons) */
.btn.btn-primary:hover{
    background-color: #008699; /* Change the background color on hover */
    border-color: #008699; /* Change the border color on hover */
}

.btn.btn-secondary{
    background-color: #00523A; /* Change the background color */
    border-color: #00523A; /* Change the border color */
    color: #FFFADE; /* Change the text color */
    font-size: 1rem; /* Adjust the font size */
    padding: 0.5rem 1rem; /* Adjust the padding */
    border-radius: 0.5rem; /* Adjust the border radius */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Add transition for smooth effect */
}

.btn-btn-secondary:hover{
    background-color: #008699;
    border-color: #008699;
}

.btn.btn-primary:hover{
    background-color: #008699; /* Change the background color on hover */
    border-color: #008699; /* Change the border color on hover */
}

.btn.btn-danger{
    padding: 0.5rem 1rem; /* Adjust the padding */
    border-radius: 0.5rem; /* Adjust the border radius */
}

/* Card Styling for the whole application */
.card{
    background-color:#FCF7FF !important;
}

/* Styling for the google maps images */
.google-map-image{
    object-fit: cover;
    height: 100%;
    border-radius: 20px;
}



/* --------------- Styles for the Navbar ------------------ */
.navbar.navbar-light.bg-light {
    background-color: #432C91 !important; /* Replace with your desired color */
}

.navbar-brand{
    color: #FCF7FF !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: bold;
}

.navbar-nav .nav-link {
    color: #FCF7FF !important; /* Change to your desired color */
    font-family: 'Helvetica', sans-serif !important;
}

/* Hover state for navbar links */
.navbar-nav .nav-link:hover {
    color: #FFFADE !important; /* Change to your desired hover color */
}

/* Button styling in navbar */
.navbar .btn-info {
    background-color: #FCF7FF !important; /* Green background */
    border-color: #FCF7FF !important;
    color: #432C91 !important;
    font-family: 'Roboto', sans-serif !important;
    margin-right: 15px
}

/* Button hover styling in navbar */
.navbar .btn-info:hover {
    background-color: #9989B4 !important; /* Green background */
    border-color: #9989B4 !important;
    color: #FCF7FF !important;
    font-family: 'Roboto', sans-serif !important;
}

/* Dropdown toggle button */
.navbar .btn-secondary {
    background-color: #432C91 !important;
    border-color: #432C91 !important;
    color: #FCF7FF !important;
}

/* Dropdown toggle button hover */
.navbar .btn-secondary:hover{
    background-color: #432C91 !important;
    border-color: #432C91 !important;
    color: #9989B4 !important;
}



/* Dropdown menu items */
.dropdown-menu .dropdown-item {
    color: #432C91 !important;
    font-family: 'Helvetica', sans-serif !important;
}

/* Dropdown menu items on hover */
.dropdown-menu .dropdown-item:hover {
    background-color: #9989B4 !important;
    color: #FCF7FF !important;
}

/* Dropdown menu items */
.nav-item.d-lg-none {
    color: #432C91 !important;
    font-family: 'Helvetica', sans-serif !important;
}

/* Dropdown menu items on hover */
.dropdown-menu .dropdown-item:hover {
    background-color: #9989B4 !important;
    color: #FCF7FF !important;
}

.badge.badge-requests {
    background-color: #dc3545 !important; /* Red color */
    color: white;
    font-size: 0.75rem;
    border-radius: 50%;
    position: absolute;
}

/* Maker sure request counter stays with your trip button */
a.btn-info.nav-link {
    position: relative;
  }
  
  /* Position the badge at the top right of its parent */
  .badge-requests {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
  }


/* Adjust the collapsed navbar items (for screens below lg) */
@media (max-width: 991.98px) {
    /* Make each nav item take full width and center its contents */
    .navbar-collapse .navbar-nav .nav-item {
      width: 100%;
      text-align: center;
      margin-bottom: 10px; /* Adds vertical spacing between items */
    }
    /* Ensure nav links fill the width and are centered */
    .navbar-collapse .navbar-nav .nav-link {
      display: block;
      width: 100%;
      text-align: center;
    }
    /* For dropdown menus (if used in collapse), center items and add margin */
    .navbar-collapse .dropdown-menu .dropdown-item {
      width: 100%;
      text-align: center;
      margin: 5px 0;
    }
  }
  
  /* Change the color of the navbar toggler icon */
  .navbar-light .navbar-toggler-icon {
    /* Replace the stroke color below (rgba(0,0,255,1)) with your desired color */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(252,247,255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }

  .navbar-light .navbar-toggler-icon:hover{
    /* Replace the stroke color below (rgba(0,0,255,1)) with your desired color */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(153, 137, 180)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }
  

  
/* --------------- Styling for the signup page ---------------------- */
.signup-header {
    color: #000000;
}

.signup-form-container .form-group{
    margin-bottom: 1.5rem !important;
}


/*----------------- Styling for the login page ---------------------- */
.login-form-container .form-group{
    margin-bottom: 1.5rem !important;
}



/* -------------- Styles for homepage ---------------- */

/* Styling for the homepage header */
.fade-text {
    transition: opacity 1s ease-in-out;
    margin-top: auto;
}

/* Styling for badges at top of trip cards */
.badge.badge-primary.trip-feed.trip-provided,
.badge.badge-primary.trip-feed.trip-request{
    background-color: #9989B4;
    border-radius: .5rem;
    width: 100%;
    max-width: 400px;
    padding: .5rem 1rem;
    margin-top: 2%;

    display: inline-block;  /* or block if you want it to span the full container */
    min-width: 150px;       /* use a value that suits your design */
    text-align: center;     /* center the text within the badge */

    font-size: 1.25rem;
}

.badge.badge-primary.trip-feed.trip-provided{
    background-color: #432C91 !important;
}

.badge-title-container h3{
    margin-top: 20px !important;;
}

/* Styling for trip title at top of trip card */
.trip-info-title{
    color: #432C91 !important;
    font-weight: bold;
}

.row.trip-feed-trip{
    min-height: 300px;
    width: 100% !important;
    max-width: 4000px;
    justify-content: center;
    margin-bottom: 0px;
    margin: 0 auto;     /* centers the container */

    background-color: #FCF7FF;
    border-radius: .5rem .5rem 0rem 0rem;
    border: 1px solid #432C91; /* Add a border */
    border-bottom: none;
}

.trip-box-wrapper {
    width: 100%;
    max-width: 500px; /* The desired uniform width on large screens */
    margin: 0 auto;
    /* Do not set a min-width by default so that on small screens it can be fluid */
  }
  
  /* On viewports wider than 750px, force a minimum width */
  @media (min-width: 750px) {
    .trip-box-wrapper {
      min-width: 650px;
    }
  }
  

.trip-feed-comments-div{
    margin: 0 !important;  /* Or use margin-top:0; margin-bottom: ... if you need vertical spacing */
    background-color: #FCF7FF;
    border-radius: 0rem 0rem .5rem .5rem;
    border: 1px solid #432C91;
    border-top: none;
    text-align: center;
}

.trip-feed-comments-div p{
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

/* Container which holds each trip */
.trip-feed-container{
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.trip-feed-container + .trip-feed-container{
    margin-top: 15px !important; /* Add space between each trip */
}

/* Styling for trip feed buttons */
.btn.btn-secondary.trip-feed.ms-2,
.btn.btn-primary.trip-feed.ms-2{
    background-color: #00523A !important;
    width: 100%;
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 20px;
    margin-top: 20px;
}

.btn.btn-primary.trip-feed.ms-2:hover,
.btn.btn-secondary.trip-feed.ms-2:hover{
    background-color:#008699 !important;
}

.btn.accept-request,
.btn.request-manage-trip{
    width: 75%;
    margin-bottom: 20px;
    margin-top: 20px;
}


/*Homepage fade in styling */
.fade-in {
    opacity: 0;
    transform: translateY(20px); /* Start slightly below its final position */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0); /* Move to its final position */
}




/* --------------- Styles for profile page ---------------- */
.container.mt-4.car-info-container{
    padding-left: 0 !important; /* Remove left padding */
    padding-right: 0 !important; /* Remove right padding */
}

.username-box {
    background-color: #FCF7FF !important; /* Light gray background */
    color: #000000 !important; /* Dark gray text */
    font-family: 'Helvetica', sans-serif !important;
    border-radius: 0 5px 5px 0; /* Smooth transition to the right */
    border-left: none; /* Removes double border effect */
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
    width: 275px; /* Set a fixed width for the label and username boxes */
    height: 38px; /* Set a fixed height for the label and username boxes */
    display: inline-block;
    text-align: center;
    margin-top: 20px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */

    border: 1px solid #432C91 !important; /* Add a border */
    border-left: none !important;

    white-space: nowrap; /* Prevent text from wrapping to the next line */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis !important; /* Add ellipsis (...) for overflowing text */
}

.label-box {
    background-color:#9989B4 !important;
    color: #ffffff !important; /* White text */
    font-family: 'Helvetica', sans-serif !important;
    font-weight: bold;
    border-radius: 5px 0 0 5px; /* Smooth transition to the left */
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
    width: 250px; /* Set a fixed width for the label and username boxes */
    height: 38px; /* Set a fixed height for the label and username boxes */
    width: 300px;
    text-align: right;
    display: flex;
    margin-top: 20px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */

    border: 1px solid #432C91 !important; /* Add a border */
    border-right: none !important;
}

.verify-text{
    display: block;
    color:#000000;
    text-align:center;
    margin-top: 10px;
    max-width: 500px;
}

/* Styling for link to email verification */
.verify-text a{
    color:#008699 !important;
    cursor: pointer;
    text-decoration: underline;
}

.verify-text a:hover{
    color: #432C91 !important;
    text-decoration: underline;
}

.profile-header h2{
    color: #432C91 !important;
    font-weight: bold !important;
}

.card.ride-profile{
    margin-top: 10px;
    margin-bottom: 50px;
    height: 100%;

    border: 1px solid #432C91 !important; /* Add a border */
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: none;
}

.card .card-body .card-title{
    color: #432C91 !important;
    font-weight: bold !important;
}

/* Styling for text below ride profile card header */
.card .card-body .ride-profile-subtext p{
    color: #000000!important;
    font-style: italic !important;
}

/* Styling for profile fields in ride profile card */
.card .card-body .ride-profile-card-field p{
    color: #000000 !important;
    font-weight: italic !important;
    margin-top: 30px;
    text-align: left;
}

/*Specific styling for button on profile page */
.btn.btn-primary[data-target="#updateProfileModal"] {
    margin-top: 30px; /* adjust margin above button */
}

.btn.btn-primary[data-target="#updateCarModal"] {
    margin-top: 30px; /* adjust margin above button */
    margin-bottom: 50px;
}

.btn.btn-primary[data-target="#addCarModal"] {
    margin-top: 30px; /* adjust margin above button */
    margin-bottom: 50px;
}

.btn.btn-primary.profile-ride-profile{
    margin-top: 50px; /* adjust margin above button */
    background-color:#432C91 !important;
}

.btn.btn-primary.profile-ride-profile:hover{
    margin-top: 50px; /* adjust margin above button */
    background-color:#9989B4 !important;
    color: #432C91;
}

/* Styles for Card on Profile Page */
.row {
    min-height: 100vh; /* Set minimum height to full viewport height */
}

.col-md-6 {
    display: flex;
    flex-direction: column;
}

.card {
    flex-grow: 1; /* Allow the card to expand within the column */
    display: flex;
    flex-direction: column;
}

.card-body {
    flex-grow: 1; /* Make the body fill the card */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Ensures content is spaced evenly */
}


/* --------------- Styles for Your Trips page ---------------- */
.poster-trip-box {
    background-color: #432C91 !important; /* Background color */
    color: #FCF7FF !important; /* Text color */
    font-family: 'Helvetica', sans-serif !important;
    border: 1px solid #432C91 !important;
    overflow: hidden;
    
    /* Make the box take up a consistent width percentage */
    width: 60%; /* Adjust percentage based on design preference */
    max-width: 800px; /* Prevent it from getting too wide on large screens */
    min-width: 300px; /* Ensure it doesn’t become too small */
    
    /* Ensure height adjusts based on content */
    height: auto; 

    /* Flexbox to keep text and button in a row */
    display: flex;
    align-items: center; /* Center align items vertically */
    justify-content: space-between; /* Space items apart */
    flex-wrap: nowrap;
    
    /* Margin for responsiveness */
    margin: 40px auto; /* Center the box horizontally */
    margin-bottom: 0 !important;

    /* Padding and border radius */
    padding: 10px 20px;
    border-radius: 0.5rem;
    
    /* Ensure box-sizing includes padding and border */
    box-sizing: border-box;
}

.poster-trip-box.requesting{
    background-color: #FCF7FF !important;
    border: 1px solid #432C91 !important;
    color: #432C91 !important;
}

.passenger-trip-box {
    background-color: #432C91 !important; /* Background color */
    color: #FCF7FF !important; /* Text color */
    font-family: 'Helvetica', sans-serif !important;

    
    /* Make the box take up a consistent width percentage */
    width: 60%; /* Adjust percentage based on design preference */
    max-width: 800px; /* Prevent it from getting too wide on large screens */
    min-width: 300px; /* Ensure it doesn’t become too small */
    
    /* Ensure height adjusts based on content */
    height: auto; 

    /* Flexbox to keep text and button in a row */
    display: flex;
    align-items: center; /* Center align items vertically */
    justify-content: space-between; /* Space items apart */
    
    /* Margin for responsiveness */
    margin: 40px auto; /* Center the box horizontally */
    margin-bottom: 0 !important;

    /* Padding and border radius */
    padding: 10px 20px;
    border-radius: 0.5rem;
    
    /* Ensure box-sizing includes padding and border */
    box-sizing: border-box;
}

/* Remove bottom border radius if there is a passenger box below */
.poster-trip-box.no-bottom-radius {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Styling for passenger request box under each of your trips */
.passengers-requesting-box {
    margin: 0 auto; /* Remove top margin */
    background-color: #9989B4 !important; /* Background color */
    color: #FCF7FF !important; /* Text color */
    font-family: 'Helvetica', sans-serif !important;
    border: 1px solid #432C91 !important;
    overflow: hidden;
    
    /* Make the box take up a consistent width percentage */
    width: 60%; /* Adjust percentage based on design preference */
    max-width: 800px; /* Prevent it from getting too wide on large screens */
    min-width: 300px; /* Ensure it doesn’t become too small */
    
    /* Ensure height adjusts based on content */
    height: auto; 

    /* Center the box horizontally */


    /* Flexbox to keep text and button in a row */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    padding: 10px 20px;
    border-radius: 0 0 0.5rem 0.5rem; /* Rounded corners on bottom */
    border-top: none;
    box-sizing: border-box; /* Ensure padding and border are included in width/height */
}

.passengers-requesting-box h6 {
    font-weight: bold;
    margin-bottom: 1rem; 
    text-align: center;   
    margin-top: 1rem;
}

.passengers-requesting-box ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.passengers-requesting-box li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #ddd;
}

.passengers-requesting-box li:last-child {
    border-bottom: none; /* Remove border for the last item */
}

.passengers-requesting-box .btn {
    margin-left: 0.5rem;
}

.passenger-request-box{
    background-color: #FCF7FF;
    border: 1px solid #432C91;
    border-radius: .5rem;
    overflow: hidden;

    margin-top: 5px;
}

.passenger-request-box:not(:first-child){
    margin-top: 20px;
}

/* Ensure the text section takes up available space without pushing the button down */
#trip-box-text {
    flex-grow: 1; /* Allow text to take up remaining space */
    flex: 1;
    font-family: 'Roboto', sans-serif !important;
    text-align: center !important; /* Centers text horizontally */
    display: flex;
    justify-content: center; /* Ensures text remains centered in available space */
    align-items: center; /* Ensures text aligns with button text */
    text-align: center;
    width: 100%;
}

#trip-box-text p {
    margin: 0; /* Remove default margins */
    font-size: 1rem; /* Adjust to match button text size */
    line-height: 1.5rem; /* Match button text height */
}

/* Make sure the button does not shrink and remains aligned */
.poster-button {
    white-space: nowrap; /* Prevent text wrapping inside button */
    flex-shrink: 0; /* Prevent button from shrinking */
}

.btn.btn-info.manage-button{
    background-color:#FCF7FF;;
    border-color: #FCF7FF;
    color: #432C91;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif !important;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Add transition for smooth effect */
    max-width: 150px;
    max-height: 50px;
    width: 100%;
}

.btn.btn-info.manage-button:hover{
    background-color: #9989B4; /* Change the background color on hover */
    border-color: #9989B4; /* Change the border color on hover */
    color: #FCF7FF;
    font-family: 'Roboto', sans-serif !important;
}

.btn.btn-info.view-trip-button{
    background-color: #432C91;
    border-color: #432C91;
    color: #FCF7FF;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif !important;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Add transition for smooth effect */
    max-width: 150px;
    max-height: 50px;
    width: 100%;
}

.btn.btn-info.view-trip-button:hover{
    background-color: #9989B4; /* Change the background color on hover */
    border-color: #9989B4; /* Change the border color on hover */
    color: #FCF7FF;
    font-family: 'Roboto', sans-serif !important;
}


/* STYLES FOR YOUR TRIPS PAGE BADGES */
.trip-badge {
    display: flex;
    flex-direction: column; /* Stack badges vertically */
    align-items: center; /* Center badges horizontally */
    gap: 1rem; /* Add spacing between badges */
    max-width: 300px; /* Optional: Set a max width for the container */
    margin: 0 auto; /* Center the container horizontally */
}


.badge.badge-primary.your-trips.passenger{
    background-color: #432C91 !important;
    border-radius: .5rem;
    font-size: 1.25rem;
    padding: .5rem 1rem;
    display: inline-block;
    min-width: 200px; /* Set a minimum width */
    max-width: 200px !important;
    width: 75% !important;
}

.badge.badge-primary.your-trips.poster{
    background-color: #9989B4 !important;
    border-radius: .5rem;
    font-size: 1.25rem;
    padding: .5rem 1rem;
    display: inline-block;
    min-width: 200px; /* Set a minimum width */
    max-width: 300px !important;
    width: 75% !important;
}

.badge.badge-primary.trip-card.trip-provided{
    background-color: #432C91;
    border-radius: .5rem;
    width: 100%;
    padding: .5rem 1rem;
}

.badge.badge-primary.trip-card.trip-request{
    background-color: #9989B4;
    border-radius: .5rem;
    width: 100%;
    padding: .5rem 1rem;
}


/* styles for your trips page buttons */
.accept-decline-button-box{
    display: flex;
    justify-content: center; /* Center the buttons */
    align-items: center; /* Center the buttons vertically */
    gap: 1rem;
}


/* Responsive styling for medium screens */
@media (max-width: 768px) {
    .poster-trip-box {
      flex-wrap: wrap;  /* Allow children to wrap onto a new line */
      justify-content: center;
    }
  
    /* Force the badge to take up the full width and remain centered */
    #trip-badge {
      flex: 0 0 100%;      /* Make the badge occupy the full row */
      display: flex;       /* Use flex for inner centering */
      justify-content: center; /* Center the badge horizontally */
      text-align: center;  /* Center any inline content inside */
      margin-bottom: 10px; /* Add space below the badge */
    }
    
    /* Optional: Adjust the title and button if necessary */
    #trip-box-text,
    .manage-button {
      flex: 1;  /* They can share remaining space on the same row if desired */
    }
  }
  
  


/* Responsive styling for small screens */
@media (max-width: 576px) {
    .poster-trip-box {
      flex-direction: column;  /* Stack children vertically */
      align-items: center;       /* Center align items */
      text-align: center;        /* Center text if needed */
    }

    .accept-decline-button-box{
        flex-direction: column;  
        align-items: center;    
        text-align: center;  
    }
  
    /* Optional: add spacing between the elements */
    #trip-badge,
    #trip-box-text,
    .manage-button {
      margin-bottom: 10px;
    }
  
    /* Optional: Ensure the button takes up full width on smaller screens */
    .manage-button {
      width: 100%;
      max-width: 250px; /* Adjust this width as needed */
    }

    .btn.btn-primary.accept-passenger{
        margin-right: 0px;
    }
    
    .btn.btn-danger.decline-passenger{
        margin-right: 0px;
    }

  }



/* ----------------- Styling for trip page ----------------------- */
/* Button styling */
.btn.btn-primary.trip-info-delete{
    background-color: #FF0000;
    border-color: #FF0000;
    width: 75%;
    margin-left: 5%;
    margin-right: 5%;
}

.btn.btn-primary.trip-info-delete:hover{
    background-color: #ff5a5a;
}

.btn.btn-primary.trip-info-join{
    width: 75% !important;
}

.btn.btn-link-passenger{
    color: #432C91 !important;
    font-family: 'Helvetica', sans-serif !important;
    text-decoration: underline;
}

.btn.btn-link-passenger:hover{
    color: #9989B4 !important;
    font-family: 'Helvetica', sans-serif !important;
}

/* Card styling */
.card.trip-information{
    margin-bottom: 25px;
    background-color: #FCF7FF;

    border: 1px solid #432C91 !important; /* Add a border */
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: none;
}

.card.trip-information .card-body .card-title-passengers{
    color: #432C91 !important;
    font-weight: bold !important;
    margin-top: 30px;
}

.trip-page-label-box {
    background-color:#9989B4 !important;
    color: #ffffff !important; /* White text */
    font-family: 'Helvetica', sans-serif !important;
    font-weight: bold;
    border-radius: 5px 0 0 5px; /* Smooth transition to the left */
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
    width: 250px; /* Set a fixed width for the label and username boxes */
    height: 38px; /* Set a fixed height for the label and username boxes */
    display: flex;
    margin-top: 20px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    margin-left: 5%;

    border: 1px solid #432C91 !important; /* Add a border */
    border-right: none !important;
}

.trip-page-info-box {
    background-color: #FCF7FF !important; /* Light gray background */
    color: #000000 !important; /* Dark gray text */
    font-family: 'Helvetica', sans-serif !important;
    border-radius: 0 5px 5px 0; /* Smooth transition to the right */
    border-left: none; /* Removes double border effect */
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
    width: 275px; /* Set a fixed width for the label and username boxes */
    height: 38px; /* Set a fixed height for the label and username boxes */
    display: flex;
    margin-top: 20px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    margin-right: 5%;

    border: 1px solid #432C91 !important; /* Add a border */
    border-left: none !important;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; /* Center the passenger name */
}

/* Wrapper for box with passenger info */
.passenger-box-wrapper {
    width: 275px !important;          /* Match the driver box width */
    max-width: 275px !important;      /* Ensure it never grows wider */
    box-sizing: border-box;/* Include padding/border in the total width */
    overflow: hidden;      /* Hide any content that might overflow */
}

.passenger-name {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }

.trip-page-info-box button {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}


/* Modal Styling */
.modal-content.ride-profile{
    background-color: #FCF7FF !important;
}

.modal-header.ride-profile{
    background-color:#FCF7FF; 
    color:#432C91;
}

.modal-body-ride-profile{
    text-align: left;
}

.modal-body-ride-profile b{
    font-weight: bold !important;
}
.modal-body-ride-profile p{
    color: #000000 !important;
    margin-left: 10px;
}
.modal-body-ride-profile p+p{
    color: #000000 !important;
    margin-top: 30px;
}

.modal-body-ride-profile p+p{
    color: #000000 !important;
    margin-top: 30px;
}

.modal-footer.ride-profile .btn.btn-secondary{
    background-color: #432C91; /* Change the background color */
    border-color: #432C91; /* Change the border color */
    color: #FCF7FF; /* Change the text color */
    font-size: 1rem; /* Adjust the font size */
    padding: 0.5rem 1rem; /* Adjust the padding */
    border-radius: 0.5rem; /* Adjust the border radius */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Add transition for smooth effect */
}

.modal-footer.ride-profile .btn.btn-secondary:hover{
    background-color: #9989B4; /* Change the background color */
    border-color: #9989B4; /* Change the border color */
    color: #432C91;
}

/* Box that holds the map & trip info on trip page */
.row.map-trip-info{
    min-height: 300px;
    margin-top: 25px;
    justify-content: center;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 0px;

    background-color: #FCF7FF;
    border-radius: .5rem .5rem 0rem 0rem;
    border: 1px solid #432C91; /* Add a border */
    border-bottom: none;
}

/* Container for google image to give rounded corners */
.google-image-container-trip-page {
    max-width: 100%; 
    height: 100%; 
    border-radius: .5rem; 
    overflow: hidden;
    background-color: #432C91;
    margin-top: 20px;
    margin-bottom: 10px;
    min-height: 200px;
    border: .25px solid #432C91; /* Add a border */

    overflow:none;

}

/* DIV that holds trip comments */
.trip-info-comments-div{
    margin-left: 20px;
    margin-top: 0px;
    margin-right: 20px;
    background-color: #FCF7FF;
    border-radius: 0rem 0rem .5rem .5rem;
    border: 1px solid #432C91; /* Add a border */
    border-top: none;

    text-align: center;
}

.trip-info-comments-div p{
    margin-top: 15px;
    margin-right: 15px;
    margin-left: 15px;
}

.trip-info-column{
    margin-top: 20px;
}
/*Styling for trip info text */
.trip-info-column .trip-info-card-field{
    color: #000000 !important;
    font-weight: italic !important;
    text-align: left !important;
}

.trip-info-button-div{
    margin-top: 25px;
    margin-bottom: 25px;
}

/*Column that holds just the map */
.trip-map-column{
    justify-content: center;
    align-items: center;
}


/* Badge styling */
.trip-info-badge{
    margin-top: 20px;
}

/*Button for removing a passenger */
.btn.btn-sm.remove-passenger{
    background-color: #FF0000;
    border-color: #FF0000;
    border-radius: .5rem;
    color:#FCF7FF;
    margin-left: 5px;
    padding: 1px !important;
    margin-left: 10px !important;
    width: 40%;
}

.btn.btn-sm.remove-passenger:hover{
    background-color: #ff5a5a;
}

/* Special formatting for phone screen */
@media (max-width: 576px) {
    /* Ensure both driver and passenger boxes stay at 100% width */
    .trip-page-label-box,
    .trip-page-info-box,
    .passenger-box-wrapper {
      width: 100% !important;
      max-width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    
    /* Override the remove button on small screens */
    .btn.btn-sm.remove-passenger {
      width: auto !important;  /* Let its content define the width */
      margin-left: 0 !important;
      padding: 0.2rem 0.3rem !important;
    }
  }



  /* ---------------- Styles for the email verification page ---------------- */
.btn.btn-primary.verify-email{
    width: 75% !important;
    margin-left: 3%;
    margin-right: 2%;
    margin-top: 5%;
}

.btn.btn-primary.skip-for-now{
    background-color: #432C91;
    color:#FCF7FF;
    border-color: #432C91;
    width: 75% !important;
    margin-right: 3%;
    margin-left: 2%;
    margin-top: 5%;
}

.btn.btn-primary.skip-for-now:hover{
    background-color: #9989B4;
    color:#FCF7FF;
}



/* --------------------- Styling for POST A TRIP page ------------------------ */
.trip-posting-form .form-group,
.trip-posting-form .form-check{
    margin-bottom: 2rem !important;
}