/* shared */
.calendar-controls-numbertwo {
  display: none;
}
.calendar-controls-numbertheree {
  display: none;
}
.calendar-controls-numberfour {
  display: none;
}
#prevMonthBtn,
#nextMonthBtn,
#prevMonthBtnNumberTwo,
#nextMonthBtnNumberTwo,
#prevMonthBtnNumberThree,
#nextMonthBtnNumberThree,
#prevMonthBtnNumberFour,
#nextMonthBtnNumberFour {
  border: 1px solid #334f7a70;
  cursor: pointer;
  border-radius: 4px;
  padding: 4px;
  transition: all 0.3s ease-in;
}
#nextMonthBtn:hover,
#nextMonthBtnNumberTwo:hover,
#prevMonthBtn:hover,
#prevMonthBtnNumberTwo:hover,
#nextMonthBtnNumberThree:hover,
#nextMonthBtnNumberFour:hover,
#prevMonthBtnNumberThree:hover,
#prevMonthBtnNumberFour:hover {
  color: white !important;
  background-color: #334f7a;
}

#prevMonthBtn svg,
#nextMonthBtn svg,
#prevMonthBtnNumberTwo svg,
#nextMonthBtnNumberTwo svg,
#prevMonthBtnNumberThree svg,
#nextMonthBtnNumberThree svg,
#prevMonthBtnNumberFour svg,
#nextMonthBtnNumberFour svg {
  color: #334f7a !important;
}

#nextMonthBtn:hover svg,
#prevMonthBtn:hover svg,
#nextMonthBtnNumberTwo:hover svg,
#prevMonthBtnNumberTwo:hover svg,
#nextMonthBtnNumberThree:hover svg,
#prevMonthBtnNumberThree:hover svg,
#nextMonthBtnNumberFour:hover svg,
#prevMonthBtnNumberFour:hover svg {
  color: white !important;
}

#prevMonthBtn[disabled],
#prevMonthBtnNumberTwo[disabled],
#prevMonthBtnNumberThree[disabled],
#prevMonthBtnNumberFour[disabled] {
  opacity: 0.5;
  user-select: none;
  cursor: default;
  pointer-events: none; 
}
#modeToggleBtn,
#modeToggleBtnNumberTwo,
#modeToggleBtnNumberThree,
#modeToggleBtnNumberFour {
  color: #334f7a !important;
  font-size: 14px;
  border: 1px solid #334f7a70;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease-in;
}
#modeToggleBtn:hover,
#modeToggleBtnNumberTwo,
#modeToggleBtnNumberThree,
#modeToggleBtnNumberFour:hover {
  color: white !important;
  background-color: #334f7a;
}
.selected-numbertwo,
.selected-numberthree,
.selected-numberfour {
  background-color: #334f7a;
  color: white;
}
#calendarWrapper .selected,
#calendarWrapperNumberTwo .selected,
#calendarWrapperNumberThree .selected,
#calendarWrapperNumberFour .selected {
  background-color: #334f7a;
  color: white;
}
.calendar-month-year,
.calendar-month-year-numbertwo,
.calendar-month-year-numberthree,
.calendar-month-year-numberfour {
  font-size: 14px;
  font-weight: 500;
  color: #17171dcc;
}
.day:hover:not(.disabled) {
  background-color: #41568333;
  cursor: pointer;
}
.weekday {
  background: #ededed;
}
.disabled {
  color: #aaa;
  cursor: default;
}
select {
  padding: 5px 10px;
  font-size: 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
  min-width: 120px;
}
/* =======================
   تقویم 1 - calendarWrapper
========================== */
#calendarDaysCurrent .day.disabled,
#calendarDaysCurrentNumberTwo .day.disabled,
#calendarDaysCurrentNumberThree .day.disabled,
#calendarDaysCurrentNumberFour .day.disabled{
  position: relative;
}
#calendarDaysCurrent .day.disabled:before,
#calendarDaysCurrentNumberTwo .day.disabled:before,
#calendarDaysCurrentNumberThree .day.disabled:before,
#calendarDaysCurrentNumberFour .day.disabled:before{
position: absolute;
background-color: hwb(358 11% 7% / 0.3);
content: "";
width: 50%;
height: 1px;
transform: rotate(45deg);
top: 40%;
left: 25%;
}
@media (min-width: 1px) and (max-width: 575px) {
  #DatePickerDepartureForForeignFlight {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
    width: 100%;
  }
  #calendarWrapper {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    width: 100%;
    margin: auto;
    background: white;
    user-select: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
  }

  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-controls {
    margin-bottom: 15px;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    display: none;
  }

  .calendar-months {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }

  #toggleCalendarBtn {
    display: block;
    margin: 0 auto 20px;
  }
}
@media (min-width: 576px) {
  #DatePickerDepartureForForeignFlight {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapper {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    width: 100%;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    z-index: 99;
  }

  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-controls {
    margin-bottom: 15px;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    display: none;
  }

  .calendar-months {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar {
    flex: 1;
    max-width: 600px;
    width: 500px;
  }

  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }

  #toggleCalendarBtn {
    display: block;
    margin: 0 auto 20px;
  }
}
@media (min-width: 768px) {
  #DatePickerDepartureForForeignFlight {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapper {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    max-width: 700px;
    width: 700px;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    z-index: 99;
  }

  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-controls {
    margin-bottom: 15px;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    display: none;
  }

  .calendar-months {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }

  #toggleCalendarBtn {
    display: block;
    margin: 0 auto 20px;
  }
}
@media (min-width: 992px) {
  #DatePickerDepartureForForeignFlight {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapper {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    max-width: 700px;
    width: 700px;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    z-index: 99;
  }

  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-controls {
    margin-bottom: 15px;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    display: none;
  }

  .calendar-months {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }

  #toggleCalendarBtn {
    display: block;
    margin: 0 auto 20px;
  }
}
@media (min-width: 1200px) {
  #DatePickerDepartureForForeignFlight {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapper {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    max-width: 700px;
    width: 700px;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    z-index: 99;
    left: 50%;
    transform: translateX(-50%);
  }

  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-controls {
    margin-bottom: 15px;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    display: none;
  }

  .calendar-months {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }

  #toggleCalendarBtn {
    display: block;
    margin: 0 auto 20px;
  }
}
@media (min-width: 1400px) {
  #DatePickerDepartureForForeignFlight {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapper {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    max-width: 700px;
    width: 700px;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    z-index: 99;
    left: 50%;
    transform: translateX(-50%);
  }

  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-controls {
    margin-bottom: 15px;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    display: none;
  }

  .calendar-months {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }

  #toggleCalendarBtn {
    display: block;
    margin: 0 auto 20px;
  }
}
/* =======================
   تقویم 2 - calendarWrapper
========================== */
@media (min-width: 1px) and (max-width: 575px) {
  #DatePickerDepartureForForeignFlightReturn {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberTwo {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    width: 100%;
    margin: auto;
    background: white;
    user-select: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
  }

  .calendar-header-numbertwo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-months-numbertwo {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar-numbertwo {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid-numbertwo {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }
}
@media (min-width: 576px) {
 #DatePickerDepartureForForeignFlightReturn {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberTwo {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    width: 100%;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    z-index: 99;
  }
  .calendar-header-numbertwo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }
    .calendar-controls-numbertwo {
    margin-bottom: 15px;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    display: none;
  }
  .calendar-months-numbertwo {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .calendar-numbertwo {
    flex: 1;
    max-width: 600px;
    width: 500px;
  }

  .calendar-grid-numbertwo {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }
}
@media (min-width: 768px) {
  #DatePickerDepartureForForeignFlightReturn {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberTwo {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    max-width: 700px;
    width: 700px;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    left: -35px;
    z-index: 99;
  }
  .calendar-header-numbertwo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .calendar-months-numbertwo {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .calendar-numbertwo {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid-numbertwo {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }
}
@media (min-width: 992px) {
  #DatePickerDepartureForForeignFlightReturn {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberTwo {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    max-width: 700px;
    width: 700px;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    z-index: 99;
  }

  .calendar-header-numbertwo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-months-numbertwo {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar-numbertwo {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid-numbertwo {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }
}
@media (min-width: 1200px) {
  #DatePickerDepartureForForeignFlightReturn {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberTwo {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    max-width: 700px;
    width: 700px;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    z-index: 99;
    left: 50%;
    transform: translateX(-50%);
  }

  .calendar-header-numbertwo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-months-numbertwo {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar-numbertwo {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid-numbertwo {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }
}
@media (min-width: 1400px) {
  #DatePickerDepartureForForeignFlightReturn {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberTwo {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    max-width: 700px;
    width: 700px;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    z-index: 99;
    left: 50%;
    transform: translateX(-50%);
  }

  .calendar-header-numbertwo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-months-numbertwo {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar-numbertwo {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid-numbertwo {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }
}
/* =======================
   تقویم 3 - calendarWrapper
========================== */
@media (min-width: 1px) and (max-width: 575px) {
  #DatePickerDepartureForDomesticFlight {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberThree {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    width: 100%;
    margin: auto;
    background: white;
    user-select: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
  }

  .calendar-header-numberthree {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-months-numberthree {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar-numberthree {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid-numberthree {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }
}

@media (min-width: 576px) {
  #DatePickerDepartureForDomesticFlight {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberThree {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    width: 100%;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    z-index: 99;
  }

  .calendar-header-numberthree {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-months-numberthree {
    margin-bottom: 15px;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    display: none;
  }

  .calendar-months {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar-numberthree {
    flex: 1;
    max-width: 600px;
    width: 500px;
  }

  .calendar-grid-numberthree {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }

  #toggleCalendarBtn {
    display: block;
    margin: 0 auto 20px;
  }
}

@media (min-width: 768px) {
  #DatePickerDepartureForDomesticFlight {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberThree {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    max-width: 700px;
    width: 700px;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    z-index: 99;
  }
  .calendar-header-numberthree {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .calendar-months-numberthree {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .calendar-numberthree {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid-numberthree {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }
}

@media (min-width: 992px) {
  #DatePickerDepartureForDomesticFlight {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberThree {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    max-width: 700px;
    width: 700px;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    z-index: 99;
  }

  .calendar-header-numberthree {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-months-numberthree {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar-numberthree {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid-numberthree {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }
}

@media (min-width: 1200px) {
  #DatePickerDepartureForDomesticFlight {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberThree {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    max-width: 700px;
    width: 700px;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    z-index: 99;
    left: 50%;
    transform: translateX(-50%);
  }

  .calendar-header-numberthree {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-months-numberthree {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar-numberthree {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid-numberthree {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }
}

@media (min-width: 1400px) {
  #DatePickerDepartureForDomesticFlight {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberThree {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    max-width: 700px;
    width: 700px;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    z-index: 99;
    left: 50%;
    transform: translateX(-50%);
  }

  .calendar-header-numberthree {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-months-numberthree {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar-numberthree {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid-numberthree {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }
}
/* =======================
   تقویم 4 - calendarWrapper
========================== */
@media (min-width: 1px) and (max-width: 575px) {
  #DatePickerDepartureForDomesticFlightReturn {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberFour {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    width: 100%;
    margin: auto;
    background: white;
    user-select: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
  }

  .calendar-header-numberfour {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-months-numberfour {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar-numberfour {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid-numberfour {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }
}

@media (min-width: 576px) {
  #DatePickerDepartureForDomesticFlightReturn {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberFour {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    width: 100%;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    z-index: 99;
  }

  .calendar-header-numberfour {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-months-numberfour {
    margin-bottom: 15px;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    display: none;
  }

  .calendar-months {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar-numberfour {
    flex: 1;
    max-width: 600px;
    width: 500px;
  }

  .calendar-grid-numberfour {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }

  #toggleCalendarBtn {
    display: block;
    margin: 0 auto 20px;
  }
}

@media (min-width: 768px) {
  #DatePickerDepartureForDomesticFlightReturn {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberFour {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    max-width: 700px;
    width: 700px;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    left: -35px;
    z-index: 99;
  }
  .calendar-header-numberfour {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .calendar-months-numberfour {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }
  .calendar-numberfour {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid-numberfour {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }
}

@media (min-width: 992px) {
  #DatePickerDepartureForDomesticFlightReturn {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberFour {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    max-width: 700px;
    width: 700px;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    z-index: 99;
  }

  .calendar-header-numberfour {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-months-numberfour {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar-numberfour {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid-numberfour {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }
}

@media (min-width: 1200px) {
  #DatePickerDepartureForDomesticFlightReturn {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberFour {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    max-width: 700px;
    width: 700px;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    z-index: 99;
    left: 50%;
    transform: translateX(-50%);
  }

  .calendar-header-numberfour {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-months-numberfour {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar-numberfour {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid-numberfour {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }
}

@media (min-width: 1400px) {
  #DatePickerDepartureForDomesticFlightReturn {
    font-family: inherit;
    font-size: 16px;
    margin-top: 0.5rem;
    cursor: pointer;
        width: 100%;
  }
  #calendarWrapperNumberFour {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    max-width: 700px;
    width: 700px;
    margin: auto;
    background: white;
    user-select: none;
    position: absolute;
    z-index: 99;
    left: 50%;
    transform: translateX(-50%);
  }

  .calendar-header-numberfour {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .calendar-months-numberfour {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .calendar-numberfour {
    flex: 1;
    min-width: 300px;
    max-width: 340px;
  }

  .calendar-grid-numberfour {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }

  .day,
  .weekday {
    text-align: center;
    padding: 8px 0;
    border-radius: 5px;
    user-select: none;
    font-size: 14px;
  }
}