/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.travbook-page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/**
   * Layout #1
   */

.travbook-package-thumbnail img {
  border-radius: 0.7rem 0.7rem 0 0;
  width: 100%;
}

.travbook-package.travbook-grid-item {
  position: relative;
  box-shadow: 0 0 20px #7c88a040;
  border-radius: 0.7rem;
}

.travbook-tour-bottom {
  padding: 20px;
}

.travbook-tour-bottom a {
  text-decoration: none;
  font-size: 20px;
  color: #263547;
}

.travbook-tour-meta {
  margin-top: 20px;
  border-top: solid 1px #ddd;
  padding-top: 20px;
}

/**
   * Filter Styles
   */

/* Add your existing styles for the button */

#package-category {
  padding: 10px 40px;
  background: #fff;
  height: 55px;
  border-radius: 4px;
  color: #859b96;
  font-size: 15px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#package-tag,
#price-range,
#vehicle-type,
#health-requirements,
#package-type {
  padding: 10px 40px;
  height: 55px;
  border-radius: 0px;
  color: #859b96;
  font-size: 15px;
  background: #fff;
  font-size: 15px;
}

.select2-container .select2-search--inline .select2-search__field {
  margin-top: -15px;
  height: 55px;
  vertical-align: bottom;
  font-size: 15px !important;
  color: #859b96;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background-color: #d3dce0;
  border: 1px solid #fbfeff;
  border-radius: 0px;
  box-sizing: border-box;
  display: inline-block;
  margin-left: 0px;
  margin-top: 0px;
  padding: 0;
  padding-left: 20px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  background-color: transparent;
  border: none;
  border-right: 1px solid #f1eeee;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  color: #65757c;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  padding: 0 4px;
  position: absolute;
  left: 0;
  top: 0;
}

.select2-container--default.select2-container--focus
  .select2-selection--multiple {
  border: solid #b8c1c6 1px;
  outline: 0;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__display {
  cursor: default;
  padding-left: 2px;
  padding-right: 5px;
  font-size: 13px;
  color: #112233;
}

.select2-selection__arrow {
  height: 55px !important;
}
.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: solid 1px #f0f0f0;
  border-radius: 0px;
  height: 55px;
}

.select2-selection__placeholder {
  font-size: 15px;
  color: #859b96 !important;
  vertical-align: bottom;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #859b96;
  line-height: 55px;
}

.travbook_filter_checkbox {
  display: grid;
  grid-template-columns: 1fr 4fr;
  align-content: center;
  font-size: 15px;
  border: solid 1px #fff;
  grid-gap: 5px;
  justify-content: center;
  background: #eee;
  height: 55px;
}

.travbook_filter_checkbox label {
  font-size: 14px;
}
/* #package-type {
    background: #fff;
    color: #859b96;
    font-size: 15px;
  }
  
  #health-requirements {
    background: #fff;
    color: #859b96;
    font-size: 15px;
  }
  
  #vehicle-type {
    background: #fff;
    color: #859b96;
    font-size: 15px;
  } */

.tour-button {
  padding: 0 40px;
  background: #112233;
  margin-top: 10px;
}

.tour-button input {
  background: #123 !important;
}

.available-tours {
  border: solid 2px aliceblue;
  padding: 1px 8px;
  border-radius: 100%;
  background: #689590;
  color: #ffff;
  box-shadow: 1px 2px 3px #000;
}

#package-filter-form {
  background: #d3dce0;
  margin: 20px;
  padding: 10px 50px;
  border-radius: 8px;
  box-shadow: 0 0 10px #67799d40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 20px;
}

#start-date,
#end-date,
#tour-duration {
  height: 55px;
  background: #fff;
  border-radius: 5px;
}

.select2-container--default .select2-selection--multiple {
  background-color: white;
  border: 1px solid #d3dce0;
  border-radius: 0px;
  cursor: text;
  padding-bottom: 5px;
  padding-right: 5px;
  position: relative;
  height: 55px;
}

.select2-search__field {
  text-align: center;
  color: #6f7c79;
}
/* Custom styles for the datepicker */

/* Adjust the font and background color */
.ui-datepicker {
  font-family: "Arial", sans-serif;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Style the header */
.ui-datepicker-header {
  background-color: #007bff;
  color: #fff;
}

/* Style the navigation icons */
.ui-datepicker-prev,
.ui-datepicker-next {
  background-color: #007bff;
  color: #fff;
}

/* Style the weekdays */
.ui-datepicker th {
  background-color: #007bff;
  color: #fff;
}

/* Style the selected date */
.ui-state-active,
.ui-state-hover,
.ui-datepicker td a:hover {
  background-color: #007bff;
  color: #fff;
}

/* Style the today button */
.ui-datepicker-current {
  background-color: #28a745;
  color: #fff;
}

/* Style the close button */
.ui-datepicker-close {
  background-color: #dc3545;
  color: #fff;
}

/* Style the datepicker input */
.datepicker {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
  display: none;
}
/* # TO DO -1 Use this to add fontawesome :
    https://itecnote.com/tecnote/css-replace-jquery-datepicker-prev-and-next-icons-with-fontawesome-icons/
   */

.travbook_start_date,
.travbook_end_date,
.travbook_duration {
  position: relative;
  display: inline-block;
}

.clear-date {
  position: absolute;
  top: 38%;
  right: 12px;
  transform: translateY(-50%);
  cursor: pointer;
}

.trav-date-clear {
  width: 23px;
  height: 25px;
}

.clear-date {
  display: none; /* Hide the clear icon initially */
}

/***********************************************************************/
/**
   * Mobile Styles : Responsive Filter Styles Optimization 
   */

@media (max-width: 768px) {
  #package-filter-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #start-date,
  #end-date,
  #tour-duration {
    width: 100%;
  }
}

/***********************************************************************/

/*** Grid Library to be Moved to SASS **/

.travbook-page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Grid with Basic Columns */

.travbook-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal-width columns */
  grid-gap: 10px; /* Gap between columns */
}

.travbook-grid-item {
  position: relative; /* Required for height: 100% to work */
}

.travbook-grid-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

@media (max-width: 768px) {
  .travbook-grid-container {
    grid-template-columns: 1fr;
  }
}

/* Grid with 2 Columns */

.travbook-grid-2-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Three equal-width columns */
  grid-gap: 10px; /* Gap between columns */
}

.travbook-grid-2-col .travbook-grid-item {
  position: relative; /* Required for height: 100% to work */
}

.travbook-grid-2-col .travbook-grid-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* Grid with 3 Columns */

.travbook-grid-3-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal-width columns */
  grid-gap: 10px; /* Gap between columns */
  grid-gap: 3%;
  row-gap: 10%;
}

.travbook-grid-3-col .travbook-grid-item {
  position: relative; /* Required for height: 100% to work */
}

.travbook-grid-3-col .travbook-grid-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

@media (max-width: 768px) {
  .travbook-grid-3-col {
    grid-template-columns: 1fr;
  }
}

/* Grid with 4 Columns */

.travbook-grid-4-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Four equal-width columns */
  grid-gap: 10px; /* Gap between columns */
}

.travbook-grid-4-col .travbook-grid-item {
  position: relative; /* Required for height: 100% to work */
}

.travbook-grid-4-col .travbook-grid-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* Grid with 5 Columns */

.travbook-grid-5-col {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* Five equal-width columns */
  grid-gap: 10px; /* Gap between columns */
}

.travbook-grid-5-col .travbook-grid-item {
  position: relative; /* Required for height: 100% to work */
}

.travbook-grid-5-col .travbook-grid-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* Grid with 6 Columns */

.travbook-grid-6-col {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* Six equal-width columns */
  grid-gap: 10px; /* Gap between columns */
}

.travbook-grid-6-col .travbook-grid-item {
  position: relative; /* Required for height: 100% to work */
}

.travbook-grid-6-col .travbook-grid-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* Grid with 7 Columns */

.travbook-grid-7-col {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* Seven equal-width columns */
  grid-gap: 10px; /* Gap between columns */
}

.travbook-grid-7-col .travbook-grid-item {
  position: relative; /* Required for height: 100% to work */
}

.travbook-grid-7-col .travbook-grid-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* Grid with 8 Columns */

.travbook-grid-8-col {
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* Eight equal-width columns */
  grid-gap: 10px; /* Gap between columns */
}

.travbook-grid-8-col .travbook-grid-item {
  position: relative; /* Required for height: 100% to work */
}

.travbook-grid-8-col .travbook-grid-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* Grid with 9 Columns */

.travbook-grid-9-col {
  display: grid;
  grid-template-columns: repeat(9, 1fr); /* Nine equal-width columns */
  grid-gap: 10px; /* Gap between columns */
}

.travbook-grid-9-col .travbook-grid-item {
  position: relative; /* Required for height: 100% to work */
}

.travbook-grid-9-col .travbook-grid-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* Grid with 10 Columns */

.travbook-grid-10-col {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* Ten equal-width columns */
  grid-gap: 10px; /* Gap between columns */
}

.travbook-grid-10-col .travbook-grid-item {
  position: relative; /* Required for height: 100% to work */
}

.travbook-grid-10-col .travbook-grid-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* Grid with 11 Columns */

.travbook-grid-11-col {
  display: grid;
  grid-template-columns: repeat(11, 1fr); /* Eleven equal-width columns */
  grid-gap: 10px; /* Gap between columns */
}

.travbook-grid-11-col .travbook-grid-item {
  position: relative; /* Required for height: 100% to work */
}

.travbook-grid-11-col .travbook-grid-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* Grid with 12 Columns */

.travbook-grid-12-col {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* Twelve equal-width columns */
  grid-gap: 10px; /* Gap between columns */
}

.travbook-grid-12-col .travbook-grid-item {
  position: relative; /* Required for height: 100% to work */
}

.travbook-grid-12-col .travbook-grid-item img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}