.fade-in-section {

  opacity: 0;

  transform: translateY(30px);

  transition: opacity 1s ease-out, transform 1s ease-out;

}

.fade-in-section.visible {

  opacity: 1;

  transform: translateY(0);

}







/* Date Selection Bar Styles */

.date-selection-bar {

  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);

  position: relative;

  overflow: hidden;

}



.date-selection-bar::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23ffffff" opacity="0.05"/><circle cx="10" cy="50" r="0.5" fill="%23ffffff" opacity="0.05"/><circle cx="90" cy="30" r="0.5" fill="%23ffffff" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');

  pointer-events: none;

}



.date-selection-content {

  background: rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(10px);

  border-radius: 12px;

  padding: 16px 20px;

  margin: 16px auto;

  max-width: 800px;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

  border: 1px solid rgba(255, 255, 255, 0.2);

}



.date-selection-group {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.date-selection-label {

  font-size: 12px;

  font-weight: 600;

  color: #374151;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.date-selection-value {

  font-size: 14px;

  font-weight: 500;

  color: #1f2937;

  background: white;

  padding: 8px 12px;

  border-radius: 8px;

  border: 1px solid #e5e7eb;

  transition: all 0.2s ease;

}



.date-selection-value:hover {

  border-color: #3b82f6;

  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

}



.edit-stay-btn {

  background: #3b82f6;

  color: white;

  padding: 8px 16px;

  border-radius: 8px;

  font-size: 12px;

  font-weight: 500;

  border: none;

  cursor: pointer;

  transition: all 0.2s ease;

  display: flex;

  align-items: center;

  gap: 6px;

}



.edit-stay-btn:hover {

  background: #2563eb;

  transform: translateY(-1px);

  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);

}



/* Member Rates Banner */

.date-selection-bar .py-3 {

  position: relative;

  z-index: 2;

}



@media (max-width: 768px) {

  .date-selection-content {

    margin: 12px;

    padding: 12px 16px;

  }



  .date-selection-group {

    flex-direction: column;

    align-items: stretch;

  }



  .date-selection-value {

    font-size: 13px;

    padding: 6px 10px;

  }

}



/* Modal Navigation Button Styles */

.modal-nav-btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 10;

}



.modal-nav-left {

  left: 20px;

}



.modal-nav-right {

  right: 20px;

}



@media (max-width: 768px) {

  .modal-nav-btn {

    left: 10px;

    right: 10px;

  }

}