/* Route Planner Styles - Tailwind Compatible */



/* Custom utilities that can't be done with Tailwind alone */



/* Selection checkmark - requires custom CSS */

.park-card.selected::before {

    content: "\2713";

    position: absolute;

    top: 8px;

    right: 8px;

    width: 24px;

    height: 24px;

    background: linear-gradient(135deg, #4f46e5, #6366f1);

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

    font-weight: bold;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    z-index: 10;

}



/* Selection pulse animation */

@keyframes selection-pulse {

    0%, 100% { 

        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);

    }

    50% { 

        box-shadow: 0 0 0 8px rgba(79, 70, 229, 0);

    }

}



.park-card.selected {

    animation: selection-pulse 0.6s ease-out;

}



/* Park card image hover effects */

.park-card img {

    transition: transform 0.3s ease;

}



.park-card:hover img {

    transform: scale(1.05);

}



/* Group section spacing */

.group-section + .group-section {

    margin-top: 2rem;

}



/* Timeline line (requires pseudo-element) */

.timeline-item::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    width: 2px;

    height: 100%;

    background-color: rgb(199 210 254);

}



/* Responsive park grid adjustments */

@media (max-width: 768px) {

    .mobile-no-transform {

        transform: none !important;

    }

    

    /* Stack park cards in 2 columns on mobile */

    .park-card {

        min-height: 140px;

    }

    

    /* Reduce hover effects on mobile for better performance */

    .park-card:hover img {

        transform: none;

    }

}



@media (min-width: 769px) {

    /* Ensure 4 columns on desktop */

    .park-card {

        min-height: 180px;

    }

}



/* Loading state for images */

.park-card img[src=""] {

    display: none;

}



/* Improved focus states */

.park-card:focus {

    outline: none;

    transform: translateY(-2px);

}



.park-card:focus-visible {

    ring-width: 2px;

    ring-color: rgb(99 102 241);

    ring-offset-width: 2px;

}



/* Attraction list styles remain the same */

.attraction-grid {

    max-height: 24rem;

    overflow-y: auto;

    border: 1px solid rgb(229 231 235);

    border-radius: 0.5rem;

}



.attraction-item {

    padding: 0.75rem;

    border-bottom: 1px solid rgb(243 244 246);

    cursor: pointer;

    transition: all 0.2s ease;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.attraction-item:last-child {

    border-bottom: none;

}



.attraction-item:hover {

    background-color: rgb(249 250 251);

    transform: translateX(4px);

}



.attraction-item.selected {

    background-color: rgb(240 253 250);

    border-left: 4px solid rgb(20 184 166);

    transform: translateX(8px);

}



.attraction-item.selected:hover {

    background-color: rgb(204 251 241);

}



/* Selected attractions styles */

.selected-item {

    padding: 0.75rem;

    background-color: rgb(249 250 251);

    border: 1px solid rgb(229 231 235);

    border-radius: 0.5rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    transition: all 0.2s ease;

}



.selected-item:hover {

    background-color: rgb(243 244 246);

}



.remove-btn {

    padding: 0.25rem 0.75rem;

    background-color: rgb(254 226 226);

    color: rgb(185 28 28);

    font-size: 0.75rem;

    border-radius: 0.375rem;

    transition: colors 0.2s ease;

}



.remove-btn:hover {

    background-color: rgb(252 165 165);

    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

}



/* Route display styles */

.route-stats {

    display: grid;

    grid-template-columns: 1fr;

    gap: 0.75rem;

}



.stat-card {

    background-color: rgb(249 250 251);

    padding: 0.75rem;

    border-radius: 0.5rem;

    text-align: center;

    transition: all 0.2s ease;

}



.stat-card:hover {

    background-color: rgb(243 244 246);

    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

}



.stat-value {

    font-size: 1.125rem;

    font-weight: 700;

    color: rgb(79 70 229);

    display: block;

}



.stat-label {

    font-size: 0.75rem;

    color: rgb(107 114 128);

    margin-top: 0.25rem;

}



/* Timeline styles */

.route-timeline {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.timeline-item {

    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

    padding: 0.75rem;

    border-left: 2px solid rgb(199 210 254);

    position: relative;

    transition: all 0.2s ease;

}



.timeline-item:hover {

    background-color: rgb(249 250 251);

    border-left-color: rgb(129 140 248);

}



.timeline-marker {

    width: 2rem;

    height: 2rem;

    background-color: rgb(79 70 229);

    color: white;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.75rem;

    font-weight: 700;

    flex-shrink: 0;

    transition: all 0.2s ease;

}



.timeline-item:hover .timeline-marker {

    background-color: rgb(67 56 202);

    transform: scale(1.1);

}



.timeline-content {

    flex: 1;

    min-width: 0;

}



.timeline-time {

    font-size: 0.75rem;

    font-weight: 600;

    color: rgb(79 70 229);

    margin-bottom: 0.25rem;

}



.timeline-attraction {

    font-size: 0.875rem;

    font-weight: 600;

    color: rgb(17 24 39);

    margin-bottom: 0.25rem;

}



.timeline-details {

    font-size: 0.75rem;

    color: rgb(107 114 128);

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

}



.timeline-walking {

    font-size: 0.75rem;

    color: rgb(147 51 234);

    font-style: italic;

    margin-top: 0.5rem;

}



/* Loading states */

.loading-state {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 2rem;

}



.error-state {

    text-align: center;

    padding: 2rem;

}



.empty-attractions {

    text-align: center;

    padding: 2rem;

    color: rgb(107 114 128);

}



/* Responsive adjustments */

@media (max-width: 1024px) {

    .route-stats {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 768px) {

    .timeline-details {

        flex-direction: column;

        gap: 0.25rem;

    }

    

    .attraction-item {

        flex-direction: column;

        align-items: flex-start;

        gap: 0.5rem;

    }

    

    .attraction-meta {

        display: flex;

        flex-direction: row;

        align-items: center;

        gap: 0.5rem;

        margin-top: 0;

    }

    

    /* Reduce transform effects on mobile for better performance */

    .park-card:hover,

    .attraction-item:hover {

        transform: none;

    }

    

    .park-card.selected {

        transform: none;

    }

    

    .attraction-item.selected {

        transform: none;

    }

}



/* Animation utilities */

.route-results {

    transition: all 0.3s ease-in-out;

}



.route-results.show {

    opacity: 1;

    transform: translateY(0);

}



/* Ensure consistent spacing */

.space-y-6 > * + * {

    margin-top: 1.5rem;

}



.space-y-4 > * + * {

    margin-top: 1rem;

}



.space-y-3 > * + * {

    margin-top: 0.75rem;

}



.space-y-2 > * + * {

    margin-top: 0.5rem;

}



.space-y-8 > * + * {

    margin-top: 2rem;

}

/* Fixed CSS for Unicode Characters */

.park-card.selected::before {
  content: '\2713'; /* Unicode checkmark */
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: #10b981;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

/* Alternative: Use HTML entities in your HTML instead of CSS */
.park-card.selected .checkmark {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: #10b981;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.park-card.selected .checkmark::after {
  content: '\2713';
}





/* NEW STYLING */

/* ============================================
   MODAL DROPDOWN STYLING - ENHANCED
   ============================================ */

/* Enhanced Select Dropdown Styling for Modals */
select#activity-arrival-hour,
select#activity-arrival-minute,
select#activity-duration-hour,
select#activity-duration-minute,
select#activity-show-time,
select#start-time-hour,
select#start-time-minute,
select#mobile-start-time-hour,
select#mobile-start-time-minute,
select#custom-break-type,
select#custom-break-hour,
select#custom-break-minute,
select#custom-break-duration-hour,
select#custom-break-duration-minute,
select#custom-break-walk-to,
select#custom-break-walk-from {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1.25rem !important;
    padding: 0.6rem 2.5rem 0.6rem 1rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    color: #111827 !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
}

/* Hover state */
select#activity-arrival-hour:hover,
select#activity-arrival-minute:hover,
select#activity-duration-hour:hover,
select#activity-duration-minute:hover,
select#activity-show-time:hover,
select#start-time-hour:hover,
select#start-time-minute:hover,
select#mobile-start-time-hour:hover,
select#mobile-start-time-minute:hover,
select#custom-break-type:hover,
select#custom-break-hour:hover,
select#custom-break-minute:hover,
select#custom-break-duration-hour:hover,
select#custom-break-duration-minute:hover,
select#custom-break-walk-to:hover,
select#custom-break-walk-from:hover {
    border-color: #9ca3af !important;
}

/* Focus state */
select#activity-arrival-hour:focus,
select#activity-arrival-minute:focus,
select#activity-duration-hour:focus,
select#activity-duration-minute:focus,
select#activity-show-time:focus,
select#start-time-hour:focus,
select#start-time-minute:focus,
select#mobile-start-time-hour:focus,
select#mobile-start-time-minute:focus,
select#custom-break-type:focus,
select#custom-break-hour:focus,
select#custom-break-minute:focus,
select#custom-break-duration-hour:focus,
select#custom-break-duration-minute:focus,
select#custom-break-walk-to:focus,
select#custom-break-walk-from:focus {
    outline: none !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* Disabled state */
select#activity-arrival-hour:disabled,
select#activity-arrival-minute:disabled,
select#activity-duration-hour:disabled,
select#activity-duration-minute:disabled,
select#activity-show-time:disabled,
select#start-time-hour:disabled,
select#start-time-minute:disabled,
select#mobile-start-time-hour:disabled,
select#mobile-start-time-minute:disabled,
select#custom-break-type:disabled,
select#custom-break-hour:disabled,
select#custom-break-minute:disabled,
select#custom-break-duration-hour:disabled,
select#custom-break-duration-minute:disabled,
select#custom-break-walk-to:disabled,
select#custom-break-walk-from:disabled {
    background-color: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

/* Number input for break time */
input#break-time-minutes,
input#custom-break-name {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    padding: 0.6rem 0.875rem !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
}

input#break-time-minutes:hover,
input#custom-break-name:hover {
    border-color: #9ca3af !important;
    box-shadow: none !important;
}

input#break-time-minutes:focus,
input#custom-break-name:focus {
    outline: none !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* Mobile FAB */
#mobile-fab {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* Mobile modal slide up animation */
#mobile-route-prefs-modal > div {
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Hide desktop sticky sidebar on mobile
@media (max-width: 1023px) {
    #route-preferences-section {
        display: none !important;
    }
}
/*

/* Make all modals scrollable on mobile */
.fixed.inset-0 > div {
    max-height: 90vh;
}

/* Specific fix for activity timing modal */
#activity-timing-modal > div {
    max-height: 90vh;
}

/* Only make the content scrollable, not the buttons */
#activity-timing-modal [data-modal-content] {
    max-height: 90vh;
    overflow-y: auto;
}

/* MY MOBILISATION */
.timeline-item:before { display:none; }
.timeline-item { border: 1px solid #e5e7eb !important; }
.attraction-card { border-width:1px !important; }
#route-results .grid-cols-2 .bg-gray-50.p-4.rounded-lg.text-center { border: 1px solid #e5e7eb; }


@media (max-width: 768px) {
	.main-title { padding:0 !important; }
	#park-selection-section, #attraction-selection-section, #route-results-section, #route-preferences-section { background-color:transparent; box-shadow:none; padding:0; border-radius:0; }
	#route-preferences-section, #attraction-selection-section, #route-results-section { border-top: 1px solid #e5e7eb; padding-top: 20px; }
	
	#park-selector .grid-cols-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	#park-selector .w-20 { width: 4rem; }
	#park-selector .h-20 { height: 4rem; }
	.park-card.selected { background-color:#fff; }
	#route-results .grid-cols-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	#route-results .grid-cols-2 .bg-gray-50.p-4.rounded-lg.text-center { background-color:#fff; }
	.timeline-details { flex-direction: row; }
}

@media (max-width: 550px) {
	#park-selector .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#attractions-grid.gap-4 { gap: 0.5rem; }
	#route-results .grid-cols-2 .bg-gray-50.p-4.rounded-lg.text-center  { padding: 0.5rem; }
	#route-results .grid-cols-2 .bg-gray-50.p-4.rounded-lg.text-center .text-2xl { font-size: 1rem; line-height: 1rem; }
	.route-header.mb-6 { margin-bottom: 1rem; }
	.route-timeline.mt-6 { margin-top: 1rem; }
	.timeline-marker-container.w-16 { width: 3.5rem; }
	.timeline-marker-container.h-16 { height: 3.5rem; }
	.timeline-content { margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); }
}

@media (max-width: 420px) {
	#route-results .grid-cols-2.gap-4 { gap: 0.5rem; }
	#route-results .grid-cols-2 .bg-gray-50.p-4.rounded-lg.text-center .text-2xl { font-size: 0.9rem; }
}

@media (max-width: 360px) {
	#route-results .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 320px) {
	#park-selector .grid-cols-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* Print-specific styles */
@media print {
    .timeline-item {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    
    /* Also prevent breaking inside the route header */
    .route-header {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    
    /* Keep timeline markers with their content */
    .timeline-marker {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}


/* Enhanced timeline marker with images */
.timeline-marker-container {
    position: relative;
    transition: transform 0.2s ease;
}

.timeline-item:hover .timeline-marker-container {
    transform: scale(1.05);
}

.timeline-marker-container img {
    transition: opacity 0.2s ease;
}

.timeline-marker-container:hover img {
    opacity: 0.9;
}

/* Number badge animation */
.timeline-marker-container .absolute {
    animation: badge-pop 0.3s ease-out;
}

@keyframes badge-pop {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Print styles for new marker */
@media print {
    .timeline-marker-container {
        transform: none !important;
        position: relative !important;
        overflow: visible !important;
    }
    
    .timeline-marker-container img {
        opacity: 1 !important;
    }
    
    /* Ensure number badges are visible in print */
    .print-badge {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
        display: flex !important;
        visibility: visible !important;
        position: absolute !important;
        bottom: -0.25rem !important;
        right: -0.25rem !important;
        width: 1.75rem !important;
        height: 1.75rem !important;
        border-radius: 9999px !important;
        border: 2px solid white !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #4f46e5 !important; /* Default indigo */
    }
    
    /* Amber background for custom break badges */
    .print-badge.bg-amber-600 {
        background-color: #d97706 !important;
    }
    
    /* Ensure SVG icons are visible in print for custom break placeholders */
    .print-placeholder svg {
        display: block !important;
        visibility: visible !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        stroke: white !important;
        color: white !important;
    }
    
    /* Custom break placeholder styling for print - only for elements with print-placeholder class */
    .print-placeholder {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
        display: flex !important;
        visibility: visible !important;
        background-color: #f59e0b !important;
    }
    
    /* Ensure all timeline backgrounds print correctly */
    .timeline-item {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Ensure waiting connectors print correctly */
    .bg-purple-50, .bg-amber-50 {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}