/* (All previous styles are included) */
.price-original, .price-real { text-decoration: line-through; color: #ef4444; opacity: 0.9; }
.modal { transition: opacity 0.3s ease; }
.modal-content { transform: translateY(-20px); transition: transform 0.3s ease; }
.modal.active { opacity: 1; pointer-events: all; }
.modal.active .modal-content { transform: translateY(0); }
.tour-card { transition: all 0.3s ease; }
.tour-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); }
.pax-btn { width: 2.5rem; height: 2.5rem; color: #374151; font-size: 1.5rem; font-weight: 300; display: flex; align-items: center; justify-content: center; border: 1px solid #d1d5db; transition: background-color 0.2s; line-height: 1; }
.pax-btn:hover { background-color: #f3f4f6; }
.pax-btn:first-child { border-radius: 0.375rem 0 0 0.375rem; }
.pax-btn:last-child { border-radius: 0 0.375rem 0.375rem 0; }
.pax-control input { height: 2.5rem; padding: 0; border-top: 1px solid #d1d5db; border-bottom: 1px solid #d1d5db; }
.pax-control input:focus { outline: none; box-shadow: none; border-color: #d1d5db; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.accordion-content.open { max-height: 1000px; transition: max-height 0.5s ease-in; }
.rotate-180 { transform: rotate(180deg); }
.timeline { position: relative; margin-left: 10px; border-left: 4px solid #3B82F6; padding: 10px 0 10px 30px; }
.timeline-item { margin-bottom: 30px; position: relative; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; left: -41px; top: 5px; width: 16px; height: 16px; background: #fff; border: 3px solid #3B82F6; border-radius: 50%; z-index: 1; }
.timeline-item:first-child::before { background: #3B82F6; }
.timeline-title { font-weight: bold; color: #1F2937; margin-bottom: 5px; }
.timeline-sub { font-size: 14px; color: #6B7280; }
.site-footer { background-color: #111827; color: #9CA3AF; padding: 2.5rem 1rem; }
.footer-content { max-width: 1280px; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
@media (min-width: 768px) { .footer-content { flex-direction: row; justify-content: space-between; align-items: flex-start; } }
.footer-contact-info { text-align: center; }
@media (min-width: 768px) { .footer-contact-info { text-align: left; } }
.footer-qr-frame { background-color: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; }
.footer-qr-frame h3 { font-weight: bold; color: #1F2937; margin-bottom: 0.5rem; }
.calendar-container { position: relative; }
.calendar-loader { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 20px; height: 20px; border: 3px solid #f3f3f3; border-top: 3px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; }
.hidden { display: none; }
@keyframes spin { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } }
.flatpickr-day.flatpickr-disabled { position: relative; cursor: not-allowed; }
.flatpickr-day.flatpickr-disabled:hover::after { content: 'Fully Booked'; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-4px); background-color: #333; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 10; }

.fab-container { position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 12px; }
.fab { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease-in-out; }
.fab:hover { transform: scale(1.1); }
.fab-whatsapp { background-color: #25D366; }
.fab-livechat { background-color: #3B82F6; }

/* --- NEW: City Filter Button Styles --- */
.filter-btn {
    padding: 0.5rem 1.25rem;
    border: 1px solid #D1D5DB; /* gray-300 */
    border-radius: 9999px; /* pill shape */
    font-weight: 500;
    color: #374151; /* gray-700 */
    background-color: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.filter-btn:hover {
    background-color: #F3F4F6; /* gray-100 */
    border-color: #9CA3AF; /* gray-400 */
}
.filter-btn.active {
    background-color: #2563EB; /* blue-600 */
    color: #FFFFFF;
    border-color: #2563EB;
}