* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); color: #333; min-height: 100vh; padding: 20px; } .container { max-width: 1400px; margin: 0 auto; background-color: white; border-radius: 20px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); padding: 30px; overflow: hidden; } header { text-align: center; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 2px solid #f0f0f0; } header h1 { color: #2c3e50; font-size: 2.8rem; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 15px; } .subtitle { color: #7f8c8d; font-size: 1.2rem; } .controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; padding: 25px; background-color: #f8f9fa; border-radius: 15px; } .filters { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; } .filter-group { display: flex; flex-direction: column; gap: 8px; } .filter-group label { font-weight: 600; color: #2c3e50; font-size: 0.9rem; display: flex; align-items: center; gap: 5px; } .filter-select { padding: 10px 15px; border: 2px solid #ddd; border-radius: 10px; background-color: white; font-size: 1rem; min-width: 180px; transition: all 0.3s; cursor: pointer; } .filter-select:focus { border-color: #3498db; outline: none; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); } .btn-secondary { padding: 10px 20px; background-color: #95a5a6; color: white; border: none; border-radius: 10px; cursor: pointer; font-weight: 600; transition: all 0.3s; display: flex; align-items: center; gap: 8px; align-self: flex-end; height: 42px; } .btn-secondary:hover { background-color: #7f8c8d; } .view-controls { display: flex; gap: 10px; } .view-btn { padding: 10px 20px; background-color: #ecf0f1; border: 2px solid #bdc3c7; border-radius: 10px; cursor: pointer; font-weight: 600; transition: all 0.3s; display: flex; align-items: center; gap: 8px; } .view-btn.active { background-color: #3498db; color: white; border-color: #2980b9; } .view-btn:hover:not(.active) { background-color: #d5dbdb; } .calendar-container { margin-bottom: 40px; min-height: 600px; } /* Стили для месячного календаря */ .month-calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 30px; } .calendar-header { background-color: #2c3e50; color: white; padding: 15px; text-align: center; font-weight: 600; border-radius: 10px; font-size: 1.1rem; } .calendar-day { border: 1px solid #eee; border-radius: 10px; padding: 15px; min-height: 120px; background-color: #fafafa; transition: all 0.3s; position: relative; } .calendar-day:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .calendar-day.empty { background-color: #f5f5f5; border-color: #eee; } .day-number { font-weight: 700; font-size: 1.3rem; color: #2c3e50; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } .day-tours { display: flex; flex-direction: column; gap: 8px; } .tour-event { padding: 8px 10px; border-radius: 8px; color: white; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; padding-left: 25px; } .tour-event:hover { filter: brightness(110%); transform: translateX(3px); } .tour-event::before { content: "•"; position: absolute; left: 10px; font-size: 1.5rem; top: 4px; } /* Стили для списка туров */ .tours-list { display: flex; flex-direction: column; gap: 20px; } .tour-card { display: flex; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); transition: all 0.3s; background-color: white; border-left: 5px solid #3498db; } .tour-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .tour-image { width: 200px; height: 200px; object-fit: cover; flex-shrink: 0; } .tour-info { padding: 25px; flex-grow: 1; } .tour-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; } .tour-title { font-size: 1.5rem; color: #2c3e50; margin-bottom: 5px; } .tour-dates { color: #7f8c8d; font-size: 1rem; margin-bottom: 10px; display: flex; align-items: center; gap: 5px; } .tour-type { display: inline-block; padding: 5px 15px; border-radius: 20px; color: white; font-weight: 600; font-size: 0.9rem; } .tour-description { color: #555; line-height: 1.6; margin-bottom: 15px; } .tour-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; } .tour-price { font-size: 1.8rem; font-weight: 700; color: #2c3e50; } .tour-status { padding: 8px 15px; border-radius: 20px; font-weight: 600; font-size: 0.9rem; } .btn-book { padding: 10px 25px; background-color: #2ecc71; color: white; border: none; border-radius: 10px; cursor: pointer; font-weight: 600; transition: all 0.3s; } .btn-book:hover { background-color: #27ae60; } .btn-disabled { background-color: #95a5a6; cursor: not-allowed; } .btn-disabled:hover { background-color: #7f8c8d; } /* Легенда */ .legend { background-color: #f8f9fa; padding: 20px; border-radius: 15px; margin-top: 30px; } .legend h3 { margin-bottom: 15px; color: #2c3e50; display: flex; align-items: center; gap: 10px; } .legend-items { display: flex; flex-wrap: wrap; gap: 20px; } .legend-item { display: flex; align-items: center; gap: 10px; } .legend-color { width: 20px; height: 20px; border-radius: 5px; } /* Модальное окно */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); animation: fadeIn 0.3s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-content { background-color: white; margin: 5% auto; padding: 0; width: 90%; max-width: 800px; border-radius: 20px; position: relative; animation: slideIn 0.4s; overflow: hidden; } @keyframes slideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .close-modal { position: absolute; top: 20px; right: 25px; font-size: 28px; font-weight: bold; color: #2c3e50; cursor: pointer; z-index: 10; background-color: rgba(255, 255, 255, 0.8); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .close-modal:hover { background-color: white; } /* Адаптивность */ @media (max-width: 1200px) { .calendar-day { min-height: 100px; padding: 10px; } .tour-event { font-size: 0.75rem; padding: 5px 8px; } } @media (max-width: 992px) { .controls { flex-direction: column; align-items: stretch; } .filters { justify-content: center; } .view-controls { align-self: center; } .tour-card { flex-direction: column; } .tour-image { width: 100%; height: 250px; } } @media (max-width: 768px) { .container { padding: 15px; } header h1 { font-size: 2rem; flex-direction: column; gap: 10px; } .month-calendar { grid-template-columns: repeat(7, 1fr); gap: 5px; } .calendar-header { padding: 10px 5px; font-size: 0.9rem; } .calendar-day { min-height: 80px; padding: 5px; } .day-number { font-size: 1rem; margin-bottom: 5px; } .tour-event { font-size: 0.65rem; padding: 3px 5px; padding-left: 15px; } .tour-event::before { left: 5px; font-size: 1rem; top: 2px; } } @media (max-width: 576px) { .month-calendar { grid-template-columns: repeat(1, 1fr); } .calendar-day.empty { display: none; } }