body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Varela Round", sans-serif;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

#root {
  width: 100%;
  height: 100%;
}

code {

}


html, body, #root, .App, .join-trips-page {
  overflow-y: scroll;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE 10+ */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
#root::-webkit-scrollbar,
.App::-webkit-scrollbar,
.join-trips-page::-webkit-scrollbar {
  display: none;
  width: 0;
  background: transparent;
}


.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.MuiTooltip-tooltip {
  font-family: 'Varela Round', Arial, sans-serif !important;
}


:root {
    --red: #B51813;
    --red-opacity: #B1181330;
    --dark-red: #A2130E;
    --purple: #6C2B7C;
    --purple-opacity: #6C2B7C30;
    --green: #1B5C1C;
    --green-opacity: #1B5C1C30;
    --green-opacity-2: #1B5C1C60;
    --dark-green: #135013;
    --white: #ffffff;
    --light-green: #e7efe3;
    --light-gray: #f9f9f9;
    --gray: #f2f2f2;
    --gray-2: #888;
    --dark-gray: #333;
    --background-notification-gray: #f9f9f9;
    --notification-gray-hover: #f0f0f0;
    --whatsapp-green: #60D669;
}
.nav {
    position: fixed; /* <<< קובע שה-Navbar תמיד יישאר קבוע */
    top: 0; /* מוצמד לחלק העליון של המסך */
    left: 0;
    width: 100%;
    z-index: 100; /* שיישב מעל שאר האלמנטים בדף */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e7efe3;
    direction: rtl;
    font-family: 'Varela Round', sans-serif;
    height: 8vh;
}

.navbar,
.navbar * {
    font-family: 'Varela Round', sans-serif;
}

.links {
    display: flex;
    align-items: center;
    gap: 12px; /* קצת הקטנתי גם את הרווח */
    justify-content: flex-end;
    margin-left: auto;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    margin-right: 20px;
    margin-left: 30px;
}

.icon {
    margin-left: 5px;
}

.logo-img {
    height: 40px; /* הקטנתי מ-50px ל-40px */
}

.brand {
    font-size: 16px; /* במקום 18px */
    font-weight: bold;
    color: #2f582f;
}

.link {
    text-decoration: none;
    color: #2f2f2f;
    font-size: 15px;
    margin: 0 6px;
    position: relative;
    display: inline-flex; /* שינוי חשוב! */
    align-items: center; /* ממרכז את האייקון והטקסט אנכית */
    gap: 0px; /* רווח קבוע בין האייקון לטקסט */
    vertical-align: middle;
}

.link.active {
    color: #2f582f;
}

.link.active .link-text {
    position: relative;
}

.link.active .link-text::after {
    content: '';
    position: absolute;
    bottom: -4px; /* הקטנתי טיפה את המרחק מתחת */
    left: 0;
    right: 0;
    height: 2px;
    background-color: #2f582f;
    border-radius: 1px;
}

.link svg {
    display: block; /* מונע מהאייקון לקבל מרווח מיותר */
    font-size: 16px;
}

.user {
    display: flex;
    align-items: center;
    gap: 16px; /* הקטנתי גם פה טיפה */
    margin-left: 20px;
}

.notifications {
    position: relative;
}

.notification-icon {
    font-size: 18px; /* קטן יותר מ-22px */
    color: #2f2f2f;
}

.avatar {
    width: 36px; /* מ-46px --> ל-36px */
    height: 36px; /* מ-46px --> ל-36px */
    border-radius: 50%;
}

.avatar-link {
    display: flex;
    align-items: center;
}

.user {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 20px;
    z-index: 10;
}

.avatar {
    width: 32px;
    height: 32px;
}

.profile-dropdown-menu {
    font-family: 'Varela Round', sans-serif !important;
    font-size: 14px !important;
    padding: 4px 0;
}

.dropdown-item {
    font-family: 'Varela Round', sans-serif !important;
    font-size: 14px !important;
    padding: 8px 16px;
}

.MuiMenuItem-root:hover {
    background-color: var(--light-green) !important;
}




.about {
    background-color: #f9f9f9;
    padding: 40px 20px;
    font-family: "Varela Round", sans-serif;
    direction: rtl;
}

/* Text + Image layout */
.about-section {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align to top */
    gap: 60px;
    margin-bottom: 80px;
    flex-wrap: nowrap;
}

/* Reverse layout for alternating sections */
.about-section.reverse {
    flex-direction: row-reverse;
}

/* Text container */
.about-text {
    flex: 1 1;
    min-width: 300px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Typography */
.about-text h2 {
    color: #1B5C1C;
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 0;
}

.about-text p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 12px;
    color: #333;
}

/* Image container */
.about-image {
    flex: 1 1;
    min-width: 300px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
}

/* The image itself */
.about-image img {
    width: 100%;
    height: auto;
    max-height: 250px;       /* ✅ manually limit height */
    object-fit: cover;       /* crop if necessary */
    border-radius: 12px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.about-image3 img {
    width: 100%;
    height: auto;
    max-height: 280px;       /* ✅ manually limit height */
    object-fit: cover;       /* crop if necessary */
    border-radius: 12px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .about-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex-wrap: wrap;
    }

    .about-section.reverse {
        flex-direction: column;
    }

    .about-text {
        text-align: center;
        justify-content: center;
    }

    .about-image {
        height: auto;
        align-items: center;
    }

    .about-image img {
        height: auto;
        object-fit: contain;
    }
}

.profile-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 20px;
    font-family: "Varela Round", sans-serif;
    /*min-height: 100vh;*/
    text-align: center;
    background-color: #f2f2f2;

}


.profile-card {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 900px;
    overflow: hidden;
}

.profile-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /*So the image will be at the right and the details near to it on the left */
    position: relative;
    margin-bottom: 30px;
    line-height: 1.8;
    margin-right: 10%;
    text-align: center;
    padding: 0 10%;
}

.profile-top-row {
    display: flex;
    flex-direction: row-reverse;
    /* Image on the right */
    align-items: center;
    justify-content: flex-end;
    /* Align name next to image */
    width: 100%;
}

.profile-title-row {
    display: flex;
    justify-content: space-between;
    /* name right, button left */
    align-items: center;
    width: 100%;
}

.profile-name-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.profile-img-container {
    flex-shrink: 0;
    order: 1;
    /* Image will come first (right) in row-reverse layout) */
}

.profile-img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid white;
    background-color: white;
    position: relative;
    top: -50px;
    z-index: 10;
}

.profile-basic-info {
    flex: 1 1 auto;
    text-align: right;
    display: block;
    direction: rtl;
    margin-right: 5%;
    margin-top: -5%;
    margin-bottom: -3%;
    width: 100%;
}

.profile-basic-info h2 {
    margin-bottom: 10px;
    color: #1B5C1C;
    font-size: 28px;
}

.profile-basic-info p {
    margin: 5px 0;
    font-size: 16px;
}

.profile-label {
    font-weight: bold;
    margin-top: 0;
}

.profile-body {
    margin-top: 30px;
    text-align: right;
}

.profile-section {
    margin-bottom: 30px;
    margin-right: 5%;
    margin-left: 50px;
}

.profile-section h4 {
    margin-bottom: 10px;
    margin-top: 0;
}

.profile-section p,
.profile-trips-list {
    margin: 0;
    line-height: 1.8;
    font-size: 16px;
}

.profile-trips-list li {
    margin-bottom: 8px;
    list-style-type: disc;
    list-style-position: inside;
}

.profile-footer {
    text-align: center;
    margin-top: 30px;
}


.edit-profile-button {
    background-color: #1B5C1C;
    color: white;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    font-family: "Varela Round", sans-serif;
    transition: background-color 0.3s ease;
}

.edit-profile-button:hover {
    background-color: #145214;
}

.profile-input {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
    font-family: "Varela Round", sans-serif;
    font-size: 16px;
    border-radius: 10px;
    text-align: right;
}

.profile-textarea {
    width: 100%;
    padding: 8px;
    min-height: 100px;
    font-family: "Varela Round", sans-serif;
    font-size: 16px;
    resize: vertical;
    border-radius: 10px;
    text-align: right;
}

.profile-input-wrapper {
    display: flex;
    /*align-items: center; !*So the input ane the label will be at the same height *!*/
    gap: 10px;
    margin-bottom: 15px;
    text-align: right;
    flex-direction: column;
    /* Make it vertical: label on top, input underneath */
    align-items: flex-start;
    /* Align everything to the right */
}

.profile-label {
    min-width: 100px;
    font-weight: bold;
}

.profile-input {
    flex: 1 1;
    /* To make the input to be on the remaining space*/
    padding: 8px;
    border: 2px solid #999;
    border-radius: 10px;
    font-family: "Varela Round", sans-serif;
    font-size: 16px;
}

.modal-overlay-profile {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 100px 20px;
}

.modal-content-profile {
    background: #F8F5F5;
    padding: 2rem;
    border-radius: 16px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    direction: rtl;
    transform: none !important;
}

.modal-footer {
    text-align: center;
    margin-top: 20px;
}

.save-profile-button {
    background-color: #1B5C1C !important;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 12px 30px;
    font-size: 16px;
    cursor: pointer;
    font-family: "Varela Round", sans-serif;
}

.save-profile-button:hover {
    background-color: #145014;
}

.close-button-profile {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 24px;
    background: transparent;
    border: none;
    color: #333;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    z-index: 10;
}


.cover-photo-container {
    width: 100%;
    height: 200px;
    /* adjust the height you want */
    overflow: hidden;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    position: relative;
}

.cover-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info-flex {
    display: flex;
    /*justify-content: space-between;*/
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin-top: -70px;
    /* pull up into the cover */
}


.profile-summary-line {
    line-height: 1.8;
    white-space: normal;
    word-break: break-word;
    direction: rtl;
    text-align: right;
    display: block;
    /* Ensure it's block-level and takes full width */
    max-width: 100%;
    width: 100%;
    margin-bottom: 0.5em;
}

.profile-section,
.profile-summary-wrapper {
    width: 100%;
    text-align: right;
    direction: rtl;
    padding-left: 10%;
    box-sizing: border-box;

}

.profile-name {
    font-size: 28px;
    color: #1B5C1C;
    margin: 0;
    text-align: right;
    line-height: 1;
}

.edit-profile-heading {
    color: #1B5C1C;
    font-weight: bold !important;
    text-align: center;
    margin-bottom: 16px;
    font-family: "Varela Round", sans-serif;
}

/* Style for profile trips list */
.profile-trips-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
}

/* Style for individual trip items in profile */
.profile-trips-list .trip-preview {
    width: 100%;
    max-width: 800px;
    margin: 5px 10px 5px 20px;
}

/* Style for trip image in profile */
.profile-trips-list .trip-preview-img {
    width: 150px;
    height: 120px;
    object-fit: cover;
    border-radius: 0 8px 8px 0;
}

/* Style for trip content in profile */
.profile-trips-list .trip-preview-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    font-family: "Varela Round", sans-serif;
    padding: 0 20px;
    margin-top: -5px;
    /* Reduced top margin */
    margin-bottom: -5px;
    /* Reduced bottom margin */
    margin-right: -20px;
}

/* Style for trip title in profile */
.profile-trips-list .trip-title {
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    padding: 2px;
    color: #1B5C1C;
    line-height: 1.2;
}

/* Style for trip details in profile */
.profile-trips-list .trip-cat,
.profile-trips-list .trip-details {
    font-size: 13px;
    padding: 2px;
    margin: 0;
    color: #444;
    line-height: 1.6
}

/* Style for participants count in profile */
.profile-trips-list .trip-participants {
    margin-top: 5px;
    display: flex;
    position: absolute;
    left: 10px;
    direction: ltr;
}

/* Style for cancel button in profile */
.profile-trips-list .cancel-button-preview {
    --md-sys-color-secondary-container: #1B5C1C;
    --md-sys-color-on-secondary-container: white;
    font-weight: normal;
    display: flex;
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 80px;
    font-family: "Varela Round", sans-serif;
}

/* Style for trip category in profile */
.profile-trips-list .trip-category {
    font-weight: bold;
}

/* Style for rating in profile */
.profile-trips-list .trip-rating {
    margin-top: 10px;
    display: flex;
    text-align: right;
    position: absolute;
    bottom: 10px;
    left: 10px;
    direction: ltr;
}

.MuiPopover-root {
    z-index: 1301 !important;
}

.MuiSelect-select {
    direction: rtl;
}

.MuiPaper-root.MuiPopover-paper {
    transform: none !important;
    /* overrides incorrect transform due to modal nesting */
}

.swal2-confirm-green {
    background-color: #1B5C1C !important;
    color: white !important;
    border: none !important;
    padding: 8px 20px;
    border-radius: 4px;
    font-family: 'Varela Round', sans-serif;
}

.swal2-deny-default {
    background-color: var(--red) !important;
    color: white !important;
    border: none !important;
    padding: 8px 20px;
    border-radius: 4px;
    font-family: 'Varela Round', sans-serif;
}

.trip-photo-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

.trip-photo-remove-button {
    position: absolute;
    top: -6px;
    right: -6px;
    background: white;
    color: #1B5C1C;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 14px;
    line-height: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trip-photos-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-gap: 12px;
    gap: 12px;
    margin-top: 12px;
}

.profile-trip-photo {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    justify-content: flex-start;
}

.trip-photo-user {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.2s;
}

.trip-photo-user:hover {
    transform: scale(1.05);
}

.view-all-photos-button {
    width: 150px;
    height: 150px;
    border: 1px dashed #1B5C1C;
    border-radius: 10px;
    background-color: white;
    color: #1B5C1C;
    cursor: pointer;
    font-family: "Varela Round", sans-serif;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background-color 0.2s;
}

.view-all-photos-button:hover {
    background-color: #f0f0f0;
}

.all-trip-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 12px;
    gap: 12px;
    margin: 16px;
    padding: 0 20px;
}

.trip-photo-full {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.trip-photo-full:hover {
    transform: scale(1.05);
}


/*Creates the popup window*/
.modal-overlay-TripCard {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    /* background shadow */
    display: block;
    align-items: center;
    justify-content: center;
    padding: 5% 3%;
    /* push downward */
    z-index: 2000;
    overflow-y: auto;
}


.modal-content-TripCard {
    position: relative;
    background-color: #F8F5F5;
    border-radius: 10px;
    border: 3px solid var(--green);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    /* responsive height */
    height: auto;
    overflow: hidden;
    padding: clamp(16px, 3vw, 24px);
    /* responsive padding */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    direction: rtl;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    margin: auto;
}

/*Make sure the scroll bar won't change the radius boarder of the popup*/
.modal-scroll {
    overflow-y: auto;
    max-height: 80vh;
    /* slightly less than modal height */
    padding-inline: 0 5px;
}

/*Make sure the close bottom will appear inside the popup on the left top corner*/
.close-button-TripCard {
    background: none;
    border: none;
    font-size: 24px;
    position: absolute;
    top: 16px;
    left: 45px;
    cursor: pointer;
    /*Change the cursor to pointer why standing on the close bottom*/
}

.button-TripCard {

    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    font-family: "Varela Round", sans-serif;
}

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

.cancel {
    background-color: var(--red);
}

.modal-button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}


/*Arrange the Space between the text lines and between the paragraphs*/
.trip-text {
    line-height: 2;
    font-family: "Varela Round", sans-serif;
}

.trip-text h4 {
    margin-bottom: 0;
    margin-top: 0;
}

.trip-text h2 {
    margin-bottom: 15px;
    margin-top: -10px;
    color: var(--green);
}

.trip-text p {
    margin-top: 0;
}


.trip-header-layout {
    display: flex;
    flex-direction: row;
    /* RTL – image on right */
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
    margin-top: 1px;
}

/*Change the image location and size*/
.trip-main-img {
    width: 230px;
    height: auto;
    border-radius: 5px;
    object-fit: cover;
    margin-top: 0;
}

.trip-info {
    flex: 1 1;
    text-align: right;
}

.trip-body {
    text-align: right;
}

.trip-data p {
    margin: 4px 0;
}

.trip-section {
    margin-bottom: 20px;
}

/*Change the participants images size*/
.participant img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* עיגול */
    object-fit: cover;
    margin-left: 8px;
}

/*Make sure the participants image's will appear one next to another in a row*/
.participants {
    display: flex;
    align-items: center !important;
    gap: 12px;
}

.participant {
    display: flex;
    align-items: center !important;
    cursor: pointer;
}

.trip-category {
    font-weight: bold;
}

* {
    box-sizing: border-box;
}

.participant .MuiAvatar-root {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin-left: 8px !important;
}

.trip-preview {
    position: relative;
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 16px;
    /* gap between image and the text */
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    transition: background-color 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 74%;
    margin-bottom: 1%;
}

.trip-preview:hover {
    background-color: #f8f8f8;
}

.trip-preview-img {
    width: 150px;
    height: 120px;
    object-fit: cover;
    border-radius: 0 8px 8px 0;
}

.trip-preview-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    font-family: "Varela Round", sans-serif;
}

.trip-title {
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    padding: 2px;
    color: var(--green);
    font-family: "Varela Round", sans-serif;
}

.trip-cat,
.trip-details {
    font-size: 13px;
    padding: 2px;
    margin: 0;
    color: #444;
}

.trip-participants {
    margin-top: 5px;
    display: flex;
    position: absolute;
    top: 10px;
    left: 10px;
    direction: ltr;
}

.cancel-button-preview {
    --md-sys-color-secondary-container: var(--red) !important;
    /* the color of the button */
    --md-sys-color-on-secondary-container: white;
    /* the color of the text */
    font-weight: normal;

    display: flex;
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 80px;
    font-family: "Varela Round", sans-serif;
}

.trip-category {
    font-weight: bold;
}

.trips-list {
    align-items: center;
}

.trip-rating {
    margin-top: 10px;
    display: flex;
    text-align: right;
    position: absolute;
    bottom: 10px;
    left: 10px;
    direction: ltr;
}

.trip-more-details {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--light-gray);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.85rem;
    text-decoration: underline;
    z-index: 2;
    font-family: Varela Round, sans-serif;
    display: inline-block;
    margin-top: 6px;
    margin-right: 12px;
    color: var(--green);
    font-weight: 500;
    cursor: pointer;
}

.trip-preview.suggestion {
    width: 95%;
    /*max-width: 780px;*/
    margin-bottom: 2%;
}

.select-button-inside {
    position: absolute;
    bottom: 20px;
    left: 8px;
}
.button {
    margin: 1% 0 2% 0;
    cursor: pointer;
    background-color: var(--green);
    color: var(--white);
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    font-family: "Varela Round", sans-serif;
    transition: background-color 0.3s ease;

    border: none;
}

.button:hover {
    background-color: var(--dark-green);
}


/*.floating {*/
/*    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);*/
/*}*/

/*.floating:hover {*/
/*    transform: translateY(-5px);*/
/*    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4);*/
/*}*/
.search-button {
    --md-sys-color-secondary-container: var(--green); /* the color of the button */
    --md-sys-color-on-secondary-container: var(--white); /* the color of the text */
    font-weight: bold;
    font-family: Varela Round, sans-serif;
    width: 10%;
}

.search {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 16px auto;
    position: relative;
    box-sizing: border-box;
}

.search-input {
    flex: 1 1;
    padding: 10px 40px;
    border: 1px solid #D9D9D9;
    border-radius: 24px;
    font-size: 12px;
    outline: none;
    /*outline-width: thin;*/
    /*outline-color: #1B5C1C;*/
    font-family: Varela Round, sans-serif;
    background-color: var(--light-gray);
}

.search-icon {
    position: absolute;
    right: 20px;
    font-size: 20px;
    color: #1B5C1C;
    pointer-events: none;
    margin: 7px;
}

/* Default (large screens) */
.trip-filter-wrapper {
    width: 80%;
    max-width: 900px;
    margin: 0 auto;
    margin-top: 5vh;
}

.trip-filter-bar {
    background-color: #ffffff;
    border-radius: 40px;
    padding: 8px 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 20px;
}

/* Medium screens */
@media (max-width: 1200px) {
  .search {
    max-width: 700px;
    padding: 10px;
  }
  .trip-filter-wrapper {
    width: 95%;
    max-width: 700px;
  }
  .trip-filter-bar {
    padding: 8px 10px;
    border-radius: 28px;
  }
}

/* Small screens */
@media (max-width: 800px) {
  .search {
    max-width: 99vw;
    padding: 2px 1vw;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    min-height: initial;
  }
  .search-input {
    font-size: 11px !important;
    padding: 6px 32px !important;
    border-radius: 16px !important;
    min-height: 32px !important;
  }
  .search-button {
    font-size: 13px;
    width: auto;
    min-width: 60px;
    padding: 4px 12px;
    border-radius: 16px;
  }
  .search-icon {
    font-size: 16px;
    right: 12px;
    margin: 2px;
  }
  .trip-filter-wrapper {
    width: 99%;
    max-width: 99vw;
    margin-top: 2vh;
  }
  .trip-filter-bar {
    flex-direction: column;
    gap: 10px;
    padding: 6px 2vw;
    border-radius: 18px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .trip-filter-bar {
    padding: 2px 4px !important;
    border-radius: 10px !important;
    gap: 2px !important;
    min-height: 0 !important;
    height: auto !important;
  }
}


.trips-status {
    margin: 2% 14.5% 1% 0;
    display: flex;
    justify-content: flex-start;
    height: 35px;
    padding: 2px;


    --border-width: 1.4px;

    .chip-cancelled {
        outline-color: var(--green);
        font-family: Varela Round, sans-serif;

        &.clicked {
            background-color: var(--green-opacity) !important;
            color: var(--green) !important;
            border: var(--border-width) solid var(--green) !important;


        }
    }

    .chip-past {
        outline-color: var(--green);
        font-family: Varela Round, sans-serif;

        &.clicked {
            background-color: var(--green-opacity) !important;
            color: var(--green) !important;
            border: var(--border-width) solid var(--green) !important;

        }

    }

    .chip-planned {
        outline-color: var(--green);
        font-family: Varela Round, sans-serif;

        &.clicked {
            background-color: var(--green-opacity) !important;
            color: var(--green) !important;
            border: var(--border-width) solid var(--green) !important;

        }
    }

    .chip-in-process {
        outline-color: var(--green);
        font-family: Varela Round, sans-serif;

        &.clicked {
            background-color: var(--green-opacity) !important;
            color: var(--green) !important;
            border: var(--border-width) solid var(--green) !important;

        }
    }

    .filter-menu-icon {
        height: 1rem !important;
    }
}

.popup-overlay {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    overflow-y: auto;
}

.popup-content {
    background-color: var(--light-gray);
    padding-right: 30px;
    border-radius: 20px;
    width: 68%;
    height: 88%;
    text-align: right;
    position: relative;
    direction: rtl;
    margin: auto;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.close-button {
    position: absolute;
    top: 10px;
    left: 10px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.trip-process-participants {
    margin-top: 5px;
    margin-left: 60px;
    display: flex;
    position: absolute;
    top: 10px;
    left: 10px;
    direction: ltr;
}

.trips-list-suggestions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
}

.trip-suggestion {
    position: relative;
    margin-bottom: 16px;
    width: 85%;
}

/*icons*/
.call-icon {
    margin-right: 5px;
}

.whatsapp-icon {
    color: var(--whatsapp-green);
    margin-right: 20px;
}

.trip-suggestions-header {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 10px;
}

.gemini-icon {
    width: 80px;
    height: 28px;
    margin-bottom: 6px;
}

.loadings {
    margin-top: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.suggest-dialog .MuiPaper-root {
    width: 100%;
    max-width: 600px;
    border-radius: 16px;
    padding: 24px;
    background-color: white;
}

.suggest-title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: var(--green);
    margin-bottom: 16px;
}

.suggest-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.suggest-actions {
    display: flex;
    justify-content: space-between;
    padding: 16px 24px;
}

.MuiInputLabel-root {
    right: auto;
    left: 0;
}

.MuiInputBase-root {
    direction: rtl;
}

.suggest-btn {
    width: 48%;
    padding: 12px 0;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    direction: rtl;
    box-shadow: none;
}

.suggest-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    /* adds spacing between the buttons */
    padding: 16px 24px;
}

/* Confirm button: filled dark green */
.suggest-btn.confirm {
    background-color: var(--green);
    color: white;
    border: none;
    font-family: "Varela Round", sans-serif;
}

/* Cancel button: green border only */
.suggest-btn.cancel {
    background-color: transparent;
    color: var(--green);
    border: 2px solid var(--green);
    font-family: "Varela Round", sans-serif;
}

/* Hover effect for confirm */
.suggest-btn.confirm:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}


/* Hover effect for cancel */
.suggest-btn.cancel:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.gender-checkboxes {
    display: flex;
    flex-direction: row;
    gap: 10%;
    /* space between the two checkboxes */
    align-items: center;
    margin-right: -25px;
}

.suggest-popup-wrapper {
    font-family: "Varela Round", sans-serif;
}

.suggest-dialog .MuiPickersSectionList-root {
    direction: rtl !important;
    text-align: right !important;
}

.MuiPickersSectionList-section {
    direction: rtl !important;
    text-align: right !important;
    justify-content: flex-end !important;
}

.MuiFormControl-root,
.MuiInputLabel-root {
    direction: rtl !important;
    text-align: right !important;
}

.MuiPopover-root[dir="rtl"] .MuiPaper-root {
    right: 0 !important;
    left: auto !important;
    direction: rtl !important;
}

/* Force the dropdown to LTR so hours are on the left, minutes on the right */
.MuiMultiSectionDigitalClock-root {
    direction: rtl !important;
    text-align: right !important;
}

body {
    font-family: 'Varela Round', sans-serif;
}

.modal-overlay-travel-preferences.no-scroll {
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content-travel-preferences {
    background-color: #f8f5f5;
    border-radius: 10px;
    border: 3px solid #1B5C1C;
    width: 90%;
    max-width: 700px;
    padding: 24px;
    font-family: 'Varela Round', sans-serif;
    direction: rtl;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    position: relative;
}

.modal-title {
    color: #1B5C1C;
    text-align: center;
    margin-bottom: 24px;
}

.close-button {
    position: absolute;
    top: 16px;
    left: 16px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.preferences-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.preference-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.preference-row label {
    width: 220px;
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
}

.preference-row .wide-select {
    flex: 1 1;
    min-width: 200px;
    max-width: 320px;
    font-size: 14px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ccc;
    direction: rtl;
}

.wide-select .css-13cymwt-control {
    min-height: 40px;
    font-size: 14px;
    direction: rtl;
}

.checkbox-row.horizontal-checkboxes {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 20px;
}

.checkbox-row label {
    font-size: 14px;
    white-space: nowrap;
    flex: 1 1;
}

.submit-button-wrapper {
    text-align: center;
    margin-top: 24px;
}

.confirm-button {
    background-color: #1B5C1C;
    color: #f8f5f5;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Varela Round', sans-serif;
    transition: background-color 0.3s ease;
}

.confirm-button:hover {
    background-color: #174d17;
}

/* ===================== */
/* תוספות ללוח השנה (tp-*) */
/* ===================== */

.tp-date-picker-outer {
    flex: 1 1;
    min-width: 200px;
    max-width: 320px;
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f8f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-sizing: border-box;
    position: relative;
}

.tp-date-picker-inner {
    background-color: white;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
}

.tp-date-input-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: 'Varela Round', sans-serif;
    font-size: 14px;
    direction: rtl;
}

.tp-date-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    flex: 1 1;
}

.tp-date-tag {
    background-color: #ececec;
    border: 1px solid #ccc;
    border-radius: 16px;
    padding: 4px 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
    color: #2f2f2f;
    font-family: 'Varela Round', sans-serif;
    line-height: 1;
}

.tp-remove-date {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    margin-right: 6px;
    padding: 0;
}

.tp-remove-date:hover {
    color: #333;
}

.tp-date-arrow-icon {
    font-size: 14px;
    color: #2f2f2f;
    margin-right: auto;
}

.tp-placeholder {
    color: #888;
    font-size: 14px;
}


.react-datepicker__day--highlighted {
    border: 2px solid #1B5C1C !important;
    background-color: white !important;
    color: #1B5C1C !important;
    border-radius: 50% !important;
    font-weight: bold;
}

.react-datepicker-popper {
    z-index: 1600 !important;
}

/* Make the calendar container tighter */
.MuiDateCalendar-root {
    margin: 0 !important;
    padding: 0 !important;
}

/* Reduce spacing between week rows */
.MuiDayCalendar-weekContainer {
    margin-bottom: 1px !important;
}

/* Optional: reduce calendar header spacing */
.MuiPickersCalendarHeader-root {
    margin-bottom: 0 !important;
}

/* Reduce day cell size */
.MuiPickersDay-root {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.875rem !important;
    margin: 0 2px !important;
}

/* Selected day color */
.MuiPickersDay-root.Mui-selected {
    background-color: #1B5C1C !important;
    color: #fff !important;
}

/* Hover state */
.MuiPickersDay-root:hover {
    background-color: #e7efe3 !important;
}

/* Today's circle (default blue override) */
.MuiPickersDay-root.MuiPickersDay-today {
    border: 1px solid #1B5C1C !important;
    background-color: transparent !important;
}


.popup-description {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
    margin-bottom: 16px;
}

.content {
    display: flex;
    gap: 40px;
    margin-right: 14%;
    flex-grow: 1;
    padding-bottom: 32px; /* enough space to scroll below the last trip */
}

.trips-list {
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: flex-start;
    width: 100%;
}

.in-process-profile-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: flex-start;
    margin-right: 27%;
}


.horizontal-scroll-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.scroll-arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    border-radius: 50%;
    padding: 8px;
    cursor: pointer;
    z-index: 10;
    display: block; /* show when rendered */
    transition: background 0.3s;
}

.scroll-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
}

.scroll-arrow.left {
    left: 8px; /* RTL: right side */
}

.scroll-arrow.right {
    right: 8px; /* RTL: left side */
}


.horizontal-scroll {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 16px;
    scroll-snap-type: x mandatory;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    padding-bottom: 16px;
    max-width: 100%;
    position: relative;
    direction: rtl;
    scroll-behavior: smooth;
    white-space: nowrap;
    box-sizing: border-box;
}

.horizontal-scroll > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.scroll-wrapper {
    width: 100%;
    padding-inline-end: 95px;
    margin-bottom: 24px;
    box-sizing: border-box;
    position: relative; /* needed for absolute positioned arrows */
}
.join-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px; /* gap between image and the text */
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    transition: background-color 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 250px; /* Fixed width */
    height: 350px; /* Fixed height - VERY IMPORTANT */
    align-self: flex-start;
    overflow: hidden; /* Good practice for a fixed-size container */
}

.join-preview:hover {
    background-color: #f8f8f8;
}

.join-preview-img {
    width: 100%;
    height: 175px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

.join-preview-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    /*align-items: start;*/
    font-family: "Varela Round", sans-serif;
    width: 100%;
    flex-grow: 1; /* Takes remaining vertical space in .join-preview */
    /*height: 100%;*/
    padding: 10px;
    overflow: hidden; /* Important for this container too */
    white-space: normal;
    word-break: break-word;
}

.join-title {
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    padding: 2px;
    color: #1B5C1C;
    font-family: "Varela Round", sans-serif;
    width: 100%;
}


.join-cat,
.join-details {
    /*The font size of the details inside each card*/
    font-size: 13px;
    padding: 2px;
    margin: 0;
    color: #444;
    /* LINE CLAMPING - This is key for consistent description height */
    display: -webkit-box;
    -webkit-line-clamp: 5; /* ADJUST: Number of lines you want to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
}

.image-container {
    position: relative;
    width: 100%;
    height: 175px;
    direction: ltr;
}

.join-participants {
    position: absolute;
    top: 65%;
    display: flex;
    justify-content: center;
}

.single-participants {
    left: 33%;
}

.two-participants {
    left: 22%;
}

.three-participants {
    left: 8%;
}

.high-participants {
    left: 20%;
}

.cancel-button-preview {
    --md-sys-color-secondary-container: #1B5C1C;
    /* the color of the button */
    --md-sys-color-on-secondary-container: white;
    /* the color of the text */
    font-weight: normal;

    display: flex;
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 80px;
    font-family: "Varela Round", sans-serif;
}

.join-category {
    font-weight: bold;
}

.join-list {
    align-items: center;
}

.join-rating {
    margin-top: 10px;
    display: flex;
    text-align: right;
    position: absolute;
    bottom: 10px;
    left: 10px;
    direction: ltr;
}


.trip-description-wrapper {
    display: -webkit-box;
    -webkit-line-clamp: 5; /* בדיוק 5 שורות */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 7.5em; /* 5 שורות * גובה שורה 1.5em */
    line-height: 1.5em;
}

.join-subtitle {
    font-size: 0.9em;
    color: black;
    margin-top: 1px;
    margin-bottom: 4px;
    white-space: pre-line;
}

.favorites-list {
  font-size: 14px;
  color: #333;
}

.favorites-line {
  font-size: 14px;
  color: #333;
  margin-top: 16px;
}
/* === IndividualTripModal.css === */

.individual-trip-dialog {
    border: 3px solid #1B5C1C;
    border-radius: 15px !important;
    /* ✅ even more rounded corners */
    font-family: 'Varela Round', sans-serif;
    background-color: #fafafa;
}

.individual-trip-close {
    position: absolute;
    top: 24px;
    /* היה קודם 8px או 16px */
    left: 24px;
    /* היה קודם 8px או 16px */
    font-size: 26px;
    color: black;
    font-weight: bold;
    cursor: pointer;
}

.individual-trip-content {
    direction: rtl;
    /*padding-top: 48px;*/
    padding-bottom: 24px;
    font-family: 'Varela Round', sans-serif;
    color: #333;
    padding-top: 60px;
}

.individual-trip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

}

.individual-trip-title {
    font-weight: bold;
    font-size: 1.3rem;
    color: #1B5C1C;
    margin: 0;
}

.individual-trip-location {
    font-size: 0.9rem;
    color: #777;
}

.individual-trip-avatar {
    width: 100px !important;
    /* היה 70px או 90px */
    height: 100px !important;
    margin-right: 12px;
    /* ריווח מהשוליים */
    margin-left: 30px;
}

.individual-trip-detail {
    margin-bottom: 10px;
    line-height: 1.6;
}

.individual-trip-button {
    margin-top: 24px;
    background-color: var(--green) !important;
    font-family: 'Varela Round', sans-serif !important;
    padding: 5px 20px !important;
    color: white !important;
    border-radius: 30px !important;
    transition: background-color 0.3s;
    font-size: 15px;
    font-weight: bold;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.5px;
}

.individual-trip-button:hover {
    background-color: #174d17 !important;
}

.individual-trip-button.sent {
    background-color: var(--green-opacity-2) !important;
    border: 1px solid var(--green-opacity);
    cursor: not-allowed;
}

.profile-text-button {
    font-family: 'Varela Round', sans-serif !important;
    background: none !important;
    border: none !important;
    color: black !important;
    font-size: 14px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    padding: 4px 0 !important;
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
}



.profile-text-button:hover {
    background: none !important;
}

.individual-trip-label {
    font-weight: bold !important;
    font-size: 1rem !important;
    margin: 20px 0 10px !important;
    color: #333 !important;
    font-family: 'Varela Round', sans-serif !important;
}

/*trip-filter-bar.css*/
/* === Wrapper ראשי === */
.trip-filter-wrapper {
    width: 80%;
    max-width: 900px;
    margin: 0 ;
    margin-top: 5vh;
    font-family: 'Varela Round', sans-serif;
    direction: rtl;

}

/* === בר הסינון === */
.trip-filter-bar {
    background-color: #ffffff;
    border-radius: 40px;
    padding: 8px 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 20px;
}

/* === כפתור חיפוש === */
.trip-filter-button {
    background-color: #1B5C1C;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 4px;
}

.trip-filter-button:hover {
    background-color: #174d17;
}

/* === סקשן לכל קטגוריה === */
.trip-filter-section {
    display: flex;
    font-weight: bold;
    flex-direction: column;
    align-items: flex-start; /* מצמיד לימין בלוגיקה של RTL */
    text-align: right;
    flex: 1 1;
}

.trip-filter-section div {
    font-size: 14px;
    font-weight: bold;
    color: #2f2f2f;
}

.trip-filter-divider {
    height: 30px;
    width: 1px;
    background-color: #d0d0d0;
}

/* === React Select === */
.wide-select {
    width: 100%;
    font-size: 14px;
    font-family: 'Varela Round', sans-serif;
    direction: rtl;
    text-align: right;
}

.wide-select .react-select__control {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 36px;
    padding: 0;
}

.wide-select .react-select__multi-value,
.wide-select .react-select__multi-value__remove,
.wide-select .react-select__multi-value__label,
.wide-select .react-select__indicator-separator {
    display: none !important;
}

.wide-select .react-select__placeholder {
    font-size: 14px;
    color: #888;
}

.wide-select .react-select__indicators {
    gap: 4px;
}

.wide-select .react-select__value-container {
    justify-content: center;
}

/* === סיכום בחירה אחיד === */

.summary-label {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    justify-content: center;

}

.summary-label,
.custom-date-input .summary-label {
    font-size: 14px;
    font-weight: normal !important;  /* ! חשוב */
    color: #2f2f2f;
    display: flex;
    align-items: center;
    gap: 15px;
    white-space: nowrap;
    justify-content: flex-end; /* שינוי קריטי: מצמיד לימין */
    text-align: right; /* מוודא שהטקסט עצמו מיושר */
}

/* === תאריך – מעטפת שדה === */
.custom-datepicker-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* === תאריך – קומפוננטת תצוגה מותאמת === */
.custom-date-input {
    display: flex;
    align-items: center;
    justify-content: center; /* <- center the label like Select */
    height: 40px;
    cursor: pointer;
    font-family: 'Varela Round', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #1B5C1C;
}

/* === תאריך – כפתור ניקוי === */
.clear-dates-btn {
    background: none;
    border: none;
    color: #2f2f2f;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.clear-dates-btn svg {
    width: 14px;
    height: 14px;
    font-weight: bold;
}

.clear-dates-btn:hover {
    color: darkgray;
}

/* === תאריך – חץ ▼ */
.date-arrow-icon {
    font-size: 14px;
    font-weight: bold;
    color: #2f2f2f;
}

/* === לוח שנה === */
.react-datepicker {
    border-radius: 16px !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background-color: #ffffff !important;
    font-family: 'Varela Round', sans-serif !important;
    direction: rtl !important;
}

.react-datepicker__header {
    background-color: #1B5C1C !important;
    color: white !important;
    border: none !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    padding: 12px 0 8px !important;
}

.react-datepicker__current-month {
    font-size: 16px !important;
    font-weight: bold !important;
    color: white !important;
}

.react-datepicker__day-name,
.react-datepicker__day {
    font-size: 14px !important;
    color: #2f2f2f !important;
}

.react-datepicker__day--outside-month {
    color: #b0b0b0 !important;
}

.react-datepicker__day {
    margin: 4px !important;
    border-radius: 50% !important;
    transition: background-color 0.2s ease !important;
}

.react-datepicker__day:hover {
    background-color: #eaf5ea !important;
}

.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected {
    background-color: #1B5C1C !important;
    color: #ffffff !important;
    font-weight: bold !important;
}

.react-datepicker__day--today {
    background-color: transparent !important;
    color: #2f2f2f !important;
}

.react-datepicker__close-icon {
    display: none !important;
}

.react-datepicker__navigation--previous {
    right: 10px !important;
    left: auto !important;
    background: none !important;
}

.react-datepicker__navigation--previous .react-datepicker__navigation-icon::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(45deg);
    position: absolute;
    top: 12px;
    right: 10px;
}

.react-datepicker__navigation--next {
    left: 10px !important;
    right: auto !important;
    background: none !important;
}

.react-datepicker__navigation--next .react-datepicker__navigation-icon::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(225deg);
    position: absolute;
    top: 12px;
    left: 10px;
}

.custom-clear-icon {
    font-size: 18px;
    font-weight: bold;
    color: #2f2f2f;
}

.wide-select .react-select__option {
    font-weight: normal !important;
}

/*תוספת חדשה*/


/* התאמה לצבע רקע נבחר */
.wide-select .react-select__option--is-selected {
    background-color: #1B5C1C !important;
    color: #fff !important;
}

.wide-select .react-select__option--is-focused {
    background-color: #e7efe3 !important;
}

/* === לוח שנה לפי TravelPreferencesPage === */
/* Make the calendar container tighter */
.MuiDateCalendar-root {
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 800px) {
  .trip-filter-wrapper {
    width: 99%;
    max-width: 99vw;
    margin-top: 2vh;
  }
  .trip-filter-bar {
    flex-direction: column;
    gap: 4px;
    padding: 2px 1vw;
    border-radius: 12px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .trip-filter-section {
    padding: 0;
    margin: 0;
    min-height: 0;
  }
  .trip-filter-section div {
    font-size: 11px;
    margin-bottom: 2px;
    padding: 0;
  }
  .wide-select,
  .wide-select .react-select__control {
    min-height: 28px !important;
    font-size: 11px !important;
    padding: 0 !important;
  }
  .custom-date-input {
    font-size: 11px;
    height: 28px;
    border-radius: 12px;
    padding: 0 8px;
  }
  .summary-label {
    font-size: 11px;
    gap: 4px;
    padding: 0;
  }
  .trip-filter-button, .clear-dates-btn {
    font-size: 11px;
    min-width: 40px;
    padding: 2px 8px;
    border-radius: 12px;
  }
  .date-arrow-icon {
    font-size: 12px;
    margin: 0 1px;
  }
  .trip-filter-divider {
    height: 18px;
  }
}
.join-trips-page {
    background-color: #faf8f8;
    min-height: 100vh;
    font-family: 'Varela Round', sans-serif;
    direction: rtl;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    overflow-x: hidden;
    width: 100%;
}

.filter-bar-with-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 12px;
    width: 100%;
    max-width: 1000px;
    padding: 0 16px; /* Add some horizontal padding for small screens */
}

@media (max-width: 900px) {
  .filter-bar-with-button {
    max-width: 600px;
    padding: 0 8px;
  }
}

@media (max-width: 600px) {
  .filter-bar-with-button {
    max-width: 98vw;
    padding: 0 2vw;
    flex-direction: column;
    gap: 8px;
  }
}

/* כפתור הפתיחה של הפופאפ */
.open-popup-button {
    background-color: #1B5C1C;
    color: white;
    font-family: 'Varela Round', sans-serif;
    font-size: 14px;
    padding: 7px 30px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    white-space: pre-line;
    line-height: 1.3;
    text-align: center;
    height: fit-content;
    transition: background-color 0.3s ease;
    direction: rtl;
    margin-top: 5vh;
    margin-right: 0;
    margin-left: 0;
}

.open-popup-button:hover {
    background-color: #174d17;
}

.content {
    display: flex;
    gap: 40px;
}

.join-trips-list {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-content: start;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-right: 4%;
    margin-top: 3px;
    flex-grow: 1;
}

.fixed-bar-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding-right: 250px; /* Match the sidebar width */
    gap: 20px;
}

@media (max-width: 900px) {
  .fixed-bar-container {
    padding-right: 0;
    flex-direction: column;
    gap: 12px;
  }
}

.join-trips-content {
    display: flex;
    flex-direction: row-reverse; /* ✅ sidebar on the right in RTL */
    width: 100%;
    box-sizing: border-box;
    padding-right: 250px; /* ➕ This pushes the content left so it doesn't go under the sidebar */
    padding-top: 4vh;
}


.sidebar-container {
    position: sticky;
    align-self: flex-start;
    right: 0;
    height: fit-content;
    z-index: 1;
    padding: 16px;
    box-sizing: border-box;
    margin-top: 160px;
}

* {
    box-sizing: border-box;
}

body {
    direction: rtl;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #faf8f8; /* your site background */
    overflow-y: scroll; /* keep scroll space reserved */
    scrollbar-width: none; /* Firefox */
}

/* Chrome, Edge, Safari */
body::-webkit-scrollbar {
    display: none;
}

.join-trips-lists-horizontal {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
    box-sizing: border-box; /* Ensure padding/border don't add to width */
}

.section-title {
    font-size: 22px;
    color: #2e7d32;
    margin: -8px 8px -24px -8px;  /* Reduced bottom space */
}

.horizontal-scroll {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 16px;
    scroll-snap-type: x mandatory;
    padding: 0 0 16px 0;
    max-width: 100%;
    position: relative;
    direction: rtl;
    scroll-behavior: smooth;
    white-space: nowrap;
}

.horizontal-scroll > * {
    flex: 0 0 auto; /* Prevent shrinking or wrapping */
    scroll-snap-align: start;
}


.horizontal-scroll::-webkit-scrollbar {
    height: 8px;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    direction: rtl;
    flex-wrap: wrap;
}

.title-with-subtitle {
    display: flex;
    flex-direction: column;
    max-width: 80%;
}

.section-subtitle {
    margin-top: 32px;
    font-size: 14px;
    margin-bottom: -16px;
    color: #555;
    line-height: 1.4;
}


.show-all-button {
    background-color: transparent;
    color: #1B5C1C;
    font-size: 14px;
    font-family: 'Varela Round', sans-serif;
    border: none;
    cursor: pointer;
    font-weight: bold;
    padding: 4px 8px;
    position: sticky;
    left: 40px; /* In RTL layout, 0 = left edge */
    z-index: 10;
    margin-inline-start: 40px;
    white-space: nowrap;
    align-self: flex-start;
}

.show-all-button:hover {
    text-decoration: underline;
}

.full-list-section {
    width: 100%;
    box-sizing: border-box;
}

.full-list-section h3 {
    font-size: 22px;
    margin: 0 0 24px 0;
    color: #2e7d32;
}

.grid-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* same as horizontal-scroll */
}

.travel-preferences-wrapper {
    margin-top: 140px;
    width: 100%;
}

.close-section-button {
    background: transparent;
    border: none;
    font-size: 20px;
    color: black;
    cursor: pointer;
    margin-right: auto;
    margin-left: 16px;
    font-weight: bold;
}

.close-section-button:hover {
    color: #000;
}


.full-list-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.trip-card {
    font-size: 1rem; /* ✅ lock font size */
    width: 270px;     /* ✅ prevent stretching in grid */
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


.grid-list > .trip-card {
    font-size: 1rem;       /* ✅ match horizontal scroll */
    width: 270px;
}

.section-title,
.full-list-section h3 {
    font-size: 22px;
    color: #2e7d32;
}

.section-header,
.full-list-section .section-header {
    /*padding: 0 8px;*/
    margin: 0; /* no vertical spacing */
}

.horizontal-scroll,
.grid-list {
    margin: 0;
    padding-top: 0; /* optional small space */
}

.join-preview {
    margin: 0 !important;
    padding: 0 !important;
}

.grid-list h3 { /* A generic rule for h3s inside the grid */
    font-size: 18px; /* Larger than your 18px */
    margin-bottom: 4px; /* Larger than your 4px */
}

.horizontal-scroll-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.scroll-arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    border-radius: 50%;
    padding: 8px;
    cursor: pointer;
    z-index: 10;
    display: none; /* hide by default */
    transition: background 0.3s;
}

.scroll-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
}

.scroll-arrow.left {
    left: 8px; /* in RTL: right edge */
}

.scroll-arrow.right {
    right: 8px;  /* in RTL: left edge */
}

.horizontal-scroll-container:hover .scroll-arrow {
    display: block; /* show on hover */
}



.filter-sidebar {
    position: fixed;
    top: 60px;
    right: 0; /* adjust to match layout, or use left: 0 if sidebar is on the left */
    width: 230px;
    height: calc(100vh - 60px); /* ✅ So it doesn't overflow the screen */
    /*height: 100%;*/
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 16px 16px 0;
    box-sizing: border-box;
    background-color:  #f9f9f9; /* ensure it's not transparent */
    z-index: 1000; /* to make sure it's above other elements */
}


.filter-sidebar label,
.filter-sidebar legend,
.filter-sidebar .MuiFormControlLabel-label {
    font-family: Varela Round, sans-serif;
    font-size: 15px;

}

.MuiFormLabel-root.Mui-focused {
    color: var(--green) !important;
}

.filter-categories {
    display: flex;
    justify-content: right;
    align-items: start;
    flex-direction: column;
    margin-right: -10%;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    flex-grow: 1;
    overflow-y: auto;
}

.filter-categories::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}
/* Main container styling (optional) */
.register-form-container {
    padding: 2%;
    background-color: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    margin-top: 10%;
}


/* Force input direction and alignment */
.MuiInputBase-input {
    direction: rtl !important;
    text-align: right !important;
}

/* Multiline textareas */
.MuiInputBase-inputMultiline {
    direction: rtl !important;
    text-align: right !important;
}

/* RTL for labels */
.MuiInputLabel-root {
    direction: rtl;
    text-align: right;
}

/* Select dropdown text */
.MuiSelect-select {
    direction: rtl;
    text-align: right;
}

/* Menu items inside Select dropdowns */
.MuiMenu-paper {
    direction: rtl;
}

/* Ensure file upload button text aligns RTL */
button.register-button {
    direction: rtl;
    text-align: center;
}

/* Title styling */
.register-title {
    text-align: center;
    margin-bottom: 16px;
    font-weight: bold;
}

/* Already-have-account section */
.already-have-account {
    text-align: center;
    margin-top: 16px;
}

/* Placeholder text alignment fix */
.MuiInputBase-input::placeholder,
.MuiInputBase-inputMultiline::placeholder {
    direction: rtl !important;
    text-align: right !important;
    color: #ccc !important;
}

input::placeholder, textarea::placeholder {
    direction: rtl !important;
    text-align: right !important;
}


/* Responsive tweaks (optional) */
@media (max-width: 600px) {
    .register-form-container {
        padding: 4%;
    }
}

/* Header color */
.register-title {
    color: #1B5C1C !important;
    font-weight: bold !important;
}


/*Force rtl in the TextField*/
[dir="rtl"] .MuiFormLabel-root {
    left: auto;
    right: auto;
    transform-origin: top right;
    text-align: right;
    margin-right: 25px;
}

/*Force rtl in the TextField*/
[dir="rtl"] .MuiOutlinedInput-notchedOutline {
    text-align: right;
}

/*Move the select arrows to the left*/
[dir="rtl"] .MuiSelect-icon {
    right: auto;
    left: 10px;
}

/* Button color */
.register-button {
    background-color: #1B5C1C !important;
    color: white !important;
}

.register-button:hover {
    background-color: #155a1a !important;
}

.register-button:active {
    background-color: #0f4d0f !important;
}

/* Radio buttons color */
.MuiRadio-root {
    color: #1B5C1C !important;
}

.MuiRadio-root.Mui-checked {
    color: #1B5C1C !important;
}

/* Radio button focus color */
.MuiRadio-root.Mui-focused {
    color: #1B5C1C !important;
}

/* Register bottom text color */
.already-have-account {
    color: #1B5C1C !important;
}

/* File upload button styling */
.upload-button {
    border: 2px solid #1B5C1C !important;
    background-color: transparent !important;
    color: #1B5C1C !important;
    margin-top: 2px !important;
}

.upload-button:hover {
    border: 2px solid #155a1a !important;
    background-color: rgba(27, 92, 28, 0.1) !important;
}

.upload-button:active {
    border: 2px solid #0f4d0f !important;
}

/* Selected item in dropdown menu (default is light blue) */
.MuiMenuItem-root.Mui-selected {
    background-color: #e7efe3 !important; /* light green */
    color: #1B5C1C !important;           /* optional: text color */
}

/* Optional: keep light green on hover over selected */
.MuiMenuItem-root.Mui-selected:hover {
    background-color: #e7efe3 !important;
}


/* Full screen background wrapper for register page */
.register-page-background {
    background-image: url(/static/media/signup-backgroung-image-without.398fcc3dd7f0b8d15126.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* or center if you want it vertically centered */
}

.google-login-button {
    background-color: #1B5C1C !important;
    color: white !important;
    font-family: 'Varela Round', sans-serif !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 6px !important;
    text-transform: none !important;
}

.google-login-button:hover {
    background-color: #155a1a !important;
}

.google-login-button img {
    width: 24px;
    height: 24px;
}

.MuiInputBase-root,
.MuiInputBase-input {
    font-family: 'Varela Round', sans-serif !important;
}

.MuiInputBase-root,
.MuiInputBase-input,
.MuiOutlinedInput-input {
    font-family: 'Varela Round', sans-serif !important;
}

.MuiTypography-root {
    font-family: 'Varela Round', sans-serif !important;
}

.MuiButton-root {
    font-family: 'Varela Round', sans-serif !important;
}

.register-title {
    text-align: right;
    font-family: 'Varela Round', sans-serif;
    font-weight: bold;
    margin-bottom: 16px;
}

.register-button {
    background-color: #1B5C1C;
    color: white;
    border-radius: 12px;
    font-family: 'Varela Round', sans-serif;
    padding: 10px;
    transition: 0.3s;
}

.register-button:hover {
    background-color: #144614;
}
    /* 
    /* Calendar styling to fix upside-down arrows and match profile */
    .MuiPickersCalendarHeader-root {
        direction: rtl !important;
        font-family: 'Varela Round', sans-serif !important;
    }

    .MuiPickersArrowSwitcher-root {
        direction: rtl !important;
    }


    .MuiPickersCalendarHeader-label {
        font-family: 'Varela Round', sans-serif !important;
    } */

.MuiPickersDay-root {
    font-family: 'Varela Round', sans-serif !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 0.875rem !important;
    margin: 0 2px !important;
}

.MuiPickersDay-root.Mui-selected {
    background-color: #1B5C1C !important;
    color: #fff !important;
}

.MuiPickersDay-root:hover {
    background-color: #e7efe3 !important;
}

.MuiPickersDay-root.MuiPickersDay-today {
    border: 1px solid #1B5C1C !important;
    background-color: transparent !important;
}

.MuiDateCalendar-root {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Varela Round', sans-serif !important;
}

.MuiDayCalendar-weekContainer {
    margin-bottom: 1px !important;
}

.MuiPickersCalendarHeader-root {
    margin-bottom: 0 !important;
}

/* Fix for RTL calendar navigation */
.MuiPickersArrowSwitcher-spacer {
    direction: rtl !important;
}

.MuiPickersCalendarHeader-labelContainer {
    direction: rtl !important;
}

/* Fix fonts in selection options and dropdowns */
.MuiSelect-select {
    font-family: 'Varela Round', sans-serif !important;
    direction: rtl;
    text-align: right;
}

.MuiMenuItem-root {
    font-family: 'Varela Round', sans-serif !important;
    direction: rtl !important;
    text-align: right !important;
}

.MuiFormLabel-root {
    font-family: 'Varela Round', sans-serif !important;
}

.MuiInputLabel-root {
    font-family: 'Varela Round', sans-serif !important;
    direction: rtl;
    text-align: right;
}

.MuiMenu-paper {
    direction: rtl;
    font-family: 'Varela Round', sans-serif !important;
}

.MuiList-root {
    font-family: 'Varela Round', sans-serif !important;
}

.MuiFormControlLabel-root {
    font-family: 'Varela Round', sans-serif !important;
}

.MuiFormControlLabel-label {
    font-family: 'Varela Round', sans-serif !important;
}

.MuiRadio-root {
    color: #1B5C1C !important;
}

.MuiRadio-root.Mui-checked {
    color: #1B5C1C !important;
}

.MuiRadio-root.Mui-focused {
    color: #1B5C1C !important;
}

/* Ensure all form elements use the correct font */
.MuiTextField-root .MuiInputBase-input {
    font-family: 'Varela Round', sans-serif !important;
}

.MuiFormHelperText-root {
    font-family: 'Varela Round', sans-serif !important;
}

.MuiTypography-root {
    font-family: 'Varela Round', sans-serif !important;
}

/* Select dropdown MenuProps styling */
.MuiMenu-paper {
    max-height: 200px !important; /* Show only ~4-5 options */
    width: auto !important;
    direction: rtl;
    font-family: 'Varela Round', sans-serif !important;
}

/* Ensure dropdown opens beneath the text box */
.MuiPopover-root .MuiPaper-root {
    margin-top: 4px !important;
}

/* RTL support for dropdown positioning */
[dir="rtl"] .MuiMenu-paper {
    transform-origin: top right !important;
}

/** FollowRequestCard.css
 *  Styling for a single join request card inside the notifications popover.
 */

/* Single notification block */
.notification-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-radius: 12px;
    background-color: var(--background-notification-gray);
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s;
}

.notification-item:hover {
    background-color: var(--notification-gray-hover);
}

/* Content inside each notification */
.notification-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1;
}

/* Sender image */
.notification-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    cursor: pointer;
}

/* Text */
.notification-text {
    font-size: 0.9rem;
    color: var(--dark-gray);
    line-height: 1.4;
    padding-left: 20%;
}


/* ====== Custom Buttons Styling ====== */

.notification-actions {
    display: flex;
    gap: 6px;
}

.notification-actions .MuiButton-root {
    font-size: 0.75rem;
    padding: 4px 8px;
    min-width: 60px;
    display: flex;
    gap: 6px;
}

/* Highlight for unread items */
/* Apply fade animation only to new (unread) notifications */
.notification-item.unread {
    animation: fadeIn 0.4s ease-out;
    background-color: var(--light-green);
    border-left: 4px solid var(--green);
    padding-left: 8px;
}

.notification-actions button {
    font-size: 0.75rem;
    padding: 6px 10px;
    border-radius: 8px;
    text-transform: none;
    box-shadow: none;
    font-family: Varela Round, sans-serif;
}


/* Approve button */
.notification-approve {
    background-color: var(--green); /* Green */
    color: White;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.notification-approve:hover {
    background-color: var(--dark-green); /* Darker green */
}

/* Reject button */
.notification-reject {
    background-color: var(--red); /* Red */
    color: White;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.notification-reject:hover {
    background-color: var(--dark-red); /* Darker red */
}
/** NotificationBell.css
 *  Styling for the notification bell icon and the popover container.
 */

/* Notification bell icon */
.notification-bell {
    position: relative;
}

/* Popover container */
.notification-popover {
    padding: 16px;
    min-width: 340px;
    max-width: 400px;
    direction: rtl;
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Title */
.notification-title {
    margin-bottom: 15px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: black;
    font-family: Varela Round, sans-serif !important;
}

/* Empty state */
.notification-empty {
    font-size: 0.95rem;
    color: var(--gray-2);
    text-align: center;
    font-family: Varela Round, sans-serif;
}

/* ========== Animations ========== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.custom-snackbar {
    font-family: "varela", sans-serif;
    font-size: 18px;
    background-color: var(--light-green) !important;
    color: black !important;
    border-radius: 8px;
    padding: 10px 15px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.trip-message {
    padding-left: 10px;
}

.snackbar-content {
    display: flex;
    align-items: center;
}

.snackbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 0 10px;
    object-fit: cover;
}

.signin-box {
    margin-top: -7vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--white);
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: "Varela Round", sans-serif !important;
}

.signin-box h1 {
    color: var(--green);
    font-family: "Varela Round", sans-serif;
}

.signin-form {
    margin-top: 8px;
    width: 100%;
}


.signin-form a {
    color: var(--green);
    font-family: "Varela Round", sans-serif !important;
}

.signIn-button {
    margin-top: 24px;
    margin-bottom: 16px;
    background-color: var(--green) !important;
    color: white !important;
    font-family: "Varela Round", sans-serif !important;
}

.signIn-button:hover {
    background-color: #1a4724 !important;
}

.signIn-button {
    font-family: "Varela Round", sans-serif;
    color: var(--green);
    font-size: 13px !important;
}

/* Changing the color of the outline of text boxes when there is focus */
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: var(--green) !important;
}

/* Changing the color of the label when there is focus */
.MuiInputLabel-root.Mui-focused {
    color: var(--green) !important;
}

/* Changing the color of the checkbox when there is focus */
.MuiCheckbox-root.Mui-checked {
    color: var(--green) !important;
}

.remember-me-container {
    display: flex;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-right: -9px !important;
}

.sign-up-links{
    width: fit-content;
}

.sign-up-links-container{
    margin-top: 4vh;
}

.sign-up-links-container {
    align-content: center !important;
    justify-content: center !important;
    flex-direction: column !important;
}

.sign-up-link-item{
    width: fit-content;
    margin-bottom: 2vh;
}


.signin-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 90%;
    max-width: 1400px;
    margin: 0 auto; /* Center the layout horizontally */
    padding-top: 8vh;
    position: relative;
    z-index: 1;
}

.signin-background {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.signin-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(/static/media/signup-backgroung-image-without.398fcc3dd7f0b8d15126.png);
    background-size: 120%;
    background-position: 150% 40%; /* customize as needed */
    background-repeat: no-repeat;
    opacity: 0.3; /* make image more transparent */
    z-index: 0;
    pointer-events: none;
}


.signin-panel {
    margin-right: 12vh;
    margin-top: 35vh;
    position: relative;
    z-index: 1;
}

.signin-text {
    text-align: right;
    margin-top: 14vh;
    margin-right: 13vh;
    position: relative;
    z-index: 1;
}

.signin-headline-1 {
    margin-bottom: 10px;
    max-width: 500px;
}

.signin-headline-2 {
    padding-right: 25vh;
    margin-top: 0;
    max-width: 500px;
}

.intro-body-1 {
    max-width: 600px;
    padding-top: 10px;
    line-height: 1.5;
}

.intro-body-2 {
    max-width: 620px;
    line-height: 1.5;
}

.intro-body-4 {
    font-weight: bold;
    line-height: 3;
}

.signin-logo {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: -23px;
    height: 13vh;
}

/* adjusting the font of 'remember me' */
.MuiTypography-root.MuiTypography-body1.MuiFormControlLabel-label.muirtl-rizt0-MuiTypography-root {
    font-family: "Varela Round", sans-serif !important;
}

/* adjusting the font of the text field labels */
.MuiInputLabel-root {
    font-family: "Varela Round", sans-serif !important;
}

/* adjusting the text field labels when it is on focus */
.MuiInputLabel-shrink {
    transform: translate(0, -1.1em) scale(0.85) !important; /* פחות גבוה, קצת פחות מוקטן */
    right: -0.8em !important;
}

.remember-me-container .MuiFormControlLabel-label {
    font-size: 14px !important; /* או גודל אחר לפי הצורך */
}

/*# sourceMappingURL=main.cf783b92.css.map*/