/* Custom CSS for BeachBrief */

/* Favorite button styling */
.favorite-btn.favorited {
    color: #ef4444; /* red-500 */
}

.favorite-btn.favorited:hover {
    color: #dc2626; /* red-600 */
}

.favorite-btn.favorited [data-feather="heart"] {
    fill: #ef4444 !important; /* red-500 */
    stroke: #ef4444 !important; /* red-500 */
    color: #ef4444 !important; /* red-500 */
}

.favorite-btn.favorited:hover [data-feather="heart"] {
    fill: #dc2626 !important; /* red-600 */
    stroke: #dc2626 !important; /* red-600 */
    color: #dc2626 !important; /* red-600 */
}

/* Force SVG styling for heart icons in favorited state */
.favorite-btn.favorited svg[data-feather="heart"] {
    fill: #ef4444 !important;
    stroke: #ef4444 !important;
}

.favorite-btn.favorited:hover svg[data-feather="heart"] {
    fill: #dc2626 !important;
    stroke: #dc2626 !important;
}

/* Target path elements directly for complete fill */
.favorite-btn.favorited svg[data-feather="heart"] path {
    fill: #ef4444 !important;
    stroke: #ef4444 !important;
}

.favorite-btn.favorited:hover svg[data-feather="heart"] path {
    fill: #dc2626 !important;
    stroke: #dc2626 !important;
}

/* Override any default Feather styling */
.favorite-btn.favorited svg {
    color: #ef4444 !important;
}

.favorite-btn.favorited:hover svg {
    color: #dc2626 !important;
}

/* Toast notifications */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 12px 16px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    max-width: 300px;
    width: auto;
    min-height: auto;
    height: auto;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.success {
    border-left: 4px solid #10b981;
}

.toast.error {
    border-left: 4px solid #ef4444;
}

.toast.info {
    border-left: 4px solid #3b82f6;
}

/* Destination Photos - Instagram-Quality Beach Photography */
.destination-photo-corolla-nc {
    background: url('https://media.istockphoto.com/id/1448062221/photo/corolla-beach-nc.jpg?s=612x612&w=0&k=20&c=IstdN102vVEtvm_uXHdPNG4Lf8Lx-XGP-5C5Bmv7DrY=');
    background-size: cover;
    background-position: center;
}

.destination-photo-duck-nc {
    background: url('https://media.istockphoto.com/id/685615530/photo/pier-sunset.jpg?s=612x612&w=0&k=20&c=AHRdafaYv6_NgCb9JQpiPagD4Qi63mLFnJSVWXhZVV0=');
    background-size: cover;
    background-position: center;
}

.destination-photo-kitty-hawk-nc {
    background: url('https://media.istockphoto.com/id/1415850849/photo/kitty-hawk-beach-homes.jpg?s=612x612&w=0&k=20&c=Rcf4egXPmPi3KRbOkeUCTWkubw6c2_jD8F4wbLJwrS4=');
    background-size: cover;
    background-position: center;
}

.destination-photo-kill-devil-hills-nc {
    background: url('https://media.istockphoto.com/id/2178210958/photo/kill-devil-hills-from-the-ocean.jpg?s=612x612&w=0&k=20&c=e3D9SvNiVHOJi3gROaA-ZJOMxmUNot2FeynyU0g5HIg=');
    background-size: cover;
    background-position: center;
}

.destination-photo-nags-head-nc {
    background: url('https://media.istockphoto.com/id/1422251189/photo/aerial-view-of-nags-head-looking-south-during-the-golden-hour.jpg?s=612x612&w=0&k=20&c=QHJFFN0WCkCDOiaxhARoNgIMryzF3vBy-5gIE5xsMMg=');
    background-size: cover;
    background-position: center;
}

.destination-photo-rodanthe-nc {
    background: url('https://media.istockphoto.com/id/1498435977/photo/beautiful-beach-and-the-wooden-inns-at-rodanthe-hatteras-island-usa.jpg?s=612x612&w=0&k=20&c=VyPidiuig2wPINXbIoTeSa1Rrp3AqBhDuhWYlP8il0g=');
    background-size: cover;
    background-position: center;
}

.destination-photo-hatteras-nc {
    background: url('https://media.istockphoto.com/id/157308506/photo/cape-hatteras-lighthouse.jpg?s=612x612&w=0&k=20&c=zKyqhxuABoXRLVJqmfrjE-UWQ4bPrSseopYOFDAPpLw=');
    background-size: cover;
    background-position: center;
}

.destination-photo-ocracoke-nc {
    background: url('https://media.istockphoto.com/id/1401062513/photo/people-relax-on-the-beach-and-swim-in-the-surf-of-the-lifeguarded-beach-on-ocracoke-island.jpg?s=612x612&w=0&k=20&c=PInfLnDNpfER3JqDx2p1wxhU7hJrkHLszgx-ASAAOeQ=');
    background-size: cover;
    background-position: center;
}

/* Crystal Coast Destinations */
.destination-photo-atlantic-beach-nc {
    background: url('https://media.istockphoto.com/id/1478548717/photo/fort-macon-state-park-beach-atlantic-beach-north-carolina.jpg?s=612x612&w=0&k=20&c=n6Q8kIZhMBFB4a4D8qxCAOhP2vSz-CYGWZt-lG5dXE8=');
    background-size: cover;
    background-position: center;
}

.destination-photo-emerald-isle-nc {
    background: url('https://media.istockphoto.com/id/1371767263/photo/dusk-beach-scene-at-emerald-isle-north-carolina-crystal-coast-bogue-banks-waves-and-clouds.jpg?s=612x612&w=0&k=20&c=NXT98NgMzvdsOFlRZnPglRqtwuzgjsvbUfWaEHZjfW4=');
    background-size: cover;
    background-position: center;
}

.destination-photo-indian-beach-nc {
    background: url('https://media.istockphoto.com/id/1297462408/photo/aerial-view-of-emerald-isle-north-carolina-crystal-coast.jpg?s=612x612&w=0&k=20&c=0XwY8LNyNz9NqQSIj4RJp_9gVP7pRJN9h4NJo8qb7R8=');
    background-size: cover;
    background-position: center;
}

.destination-photo-pine-knoll-shores-nc {
    background: url('https://media.istockphoto.com/id/1495142436/photo/aquarium-park-sunset-pine-knoll-shores-north-carolina.jpg?s=612x612&w=0&k=20&c=g9Q3x8rYzB4R7mM2_sO5N8VhPq7L9fG2R7zR4mP6nQ8=');
    background-size: cover;
    background-position: center;
}

.destination-photo-cape-lookout-nc {
    background: url('https://media.istockphoto.com/id/1137090064/photo/cape-lookout-lighthouse-and-keeper-house-cape-lookout-national-seashore-north-carolina.jpg?s=612x612&w=0&k=20&c=5RR1JLyUjN2_YGlqN5Q9k7xJ8Q4_vL9vL6qG9k7M2yM=');
    background-size: cover;
    background-position: center;
}

/* Cape Fear Coast Destinations */
.destination-photo-wrightsville-beach-nc {
    background: url('https://media.istockphoto.com/id/1293127291/photo/aerial-sunset-view-of-wrightsville-beach-north-carolina.jpg?s=612x612&w=0&k=20&c=X8QlJ9Qo8vR5gR7X2mR2xG3W7L9K4pG2qL8M7vK9xR8=');
    background-size: cover;
    background-position: center;
}

.destination-photo-carolina-beach-nc {
    background: url('https://media.istockphoto.com/id/157308408/photo/carolina-beach-boardwalk.jpg?s=612x612&w=0&k=20&c=LgN6hK8vR9M4L7G2xR5J9K7qM8vL2gR5xM4L9K8qR7G=');
    background-size: cover;
    background-position: center;
}

.destination-photo-kure-beach-nc {
    background: url('https://media.istockphoto.com/id/1421925851/photo/kure-beach-north-carolina-panoramic-sunrise.jpg?s=612x612&w=0&k=20&c=qM8L7vK9xR8G2xM4L9K8qR7G5xM2L9K8vR7G4xM5L9K=');
    background-size: cover;
    background-position: center;
}

.destination-photo-bald-head-island-nc {
    background: url('https://media.istockphoto.com/id/1325054463/photo/bald-head-island-lighthouse-old-baldy-north-carolina.jpg?s=612x612&w=0&k=20&c=R8G5xM2L9K8vR7G4xM5L9K8qR7G2xM4L9K8vR5G3xM=');
    background-size: cover;
    background-position: center;
}

/* Brunswick Islands Destinations */
.destination-photo-ocean-isle-beach-nc {
    background: url('https://media.istockphoto.com/id/1417015535/photo/sandy-pathway-going-to-the-ocean-isle-beach-in-nc.jpg?s=612x612&w=0&k=20&c=U52vg_yrUgHUgJ0iVQeobUSm5QdRUbSWr4M02Z_8juc=');
    background-size: cover;
    background-position: center;
}

.destination-photo-holden-beach-nc {
    background: url('https://media.istockphoto.com/id/2178377400/photo/beach-front-houses-in-holden-beach-brunswick-county-north-carolina.jpg?s=612x612&w=0&k=20&c=mXnQO5Cq4O5HvOcXwaU4BRkypPIdQkulU1DcW5jRztE=');
    background-size: cover;
    background-position: center;
}

.destination-photo-sunset-beach-nc {
    background: url('https://media.istockphoto.com/id/497268979/photo/wooden-path-to-the-beach-north-carolina.jpg?s=612x612&w=0&k=20&c=DV_BT_uX3wrpMmUtm3t4azNdowU82FPcC49vxL7erQI=');
    background-size: cover;
    background-position: center;
}

.destination-photo-caswell-beach-nc {
    background: url('https://media.istockphoto.com/id/970399094/photo/oak-island-lighthouse-in-north-carolina.jpg?s=612x612&w=0&k=20&c=8eC-xXQC4w9Rh-ZpcmAqk8XkmMxhJGX7B0QJyTFRtXE=');
    background-size: cover;
    background-position: center;
}

/* Destination photo hover effects */
[class*="destination-photo-"] {
    transition: transform 0.3s ease, filter 0.3s ease;
}

[class*="destination-photo-"]:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Responsive photo sizing */
@media (max-width: 768px) {
    [class*="destination-photo-"] {
        min-height: 192px; /* h-48 equivalent */
    }
}

@media (min-width: 768px) {
    [class*="destination-photo-"] {
        min-height: 160px;
    }
}

/* Fix destination card equal heights on desktop */
@media (min-width: 1024px) {
    .grid.lg\\:grid-cols-2 > div {
        min-height: 280px;
    }
}

/* Filter tags styling */
.filter-tag {
    @apply px-3 py-2 rounded-full text-sm font-medium transition duration-200;
    @apply bg-gray-100 text-gray-600 hover:bg-gray-200;
}

.filter-tag.active {
    @apply bg-ocean-500 text-white hover:bg-ocean-600;
}

/* Favorite button animations */
.favorite-btn {
    transition: all 0.2s ease;
}

.favorite-btn:hover {
    transform: scale(1.1);
}

.favorite-btn.favorited {
    color: #ef4444; /* red-500 */
}

.favorite-btn.favorited:hover {
    color: #dc2626; /* red-600 */
}

/* Mobile optimizations */
@media (max-width: 768px) {
    /* Ensure touch targets are at least 44px */
    .favorite-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Improve tap targets for filter tags */
    .filter-tag {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1rem;
    }
    
    /* Better spacing for mobile cards */
    .destination-card {
        margin-bottom: 1rem;
    }
    
    /* Sticky elements spacing */
    .sticky-bottom-padding {
        padding-bottom: 5rem;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.3s ease-out;
}

/* Loading states */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Enhanced focus states for accessibility */
.focus-visible:focus {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px;
}

/* Card hover effects */
.card-hover {
    transition: all 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Search results styling */
#search-results {
    max-height: 300px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
}

#search-results a:last-child {
    border-bottom: none;
}

/* Price badge styling */
.price-badge {
    @apply inline-block px-2 py-1 text-xs font-semibold rounded;
}

.price-badge-1 {
    @apply bg-green-100 text-green-800;
}

.price-badge-2 {
    @apply bg-yellow-100 text-yellow-800;
}

.price-badge-3 {
    @apply bg-red-100 text-red-800;
}

/* Custom scrollbar for webkit browsers */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break-inside-avoid {
        break-inside: avoid;
    }
    
    /* Ensure good contrast for printing */
    .text-gray-600 {
        color: #374151 !important;
    }
    
    .text-gray-500 {
        color: #6b7280 !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .filter-tag {
        border: 2px solid currentColor;
    }
    
    .card-hover {
        border: 1px solid #374151;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
    .dark-mode-support {
        /* Placeholder for dark mode styles */
    }
}

/* Crystal Coast destination images */
.destination-photo-atlantic-beach-nc {
    background: url('https://media.istockphoto.com/id/1314992628/photo/drone-view-of-oceanana-pier-in-atlantic-beach-north-carolina-at-sunset.jpg?s=612x612&w=0&k=20&c=2Xa4GQsw96hSvgsVbLxlXyJgncvUCEmwUb5GbulMyRo=');
    background-size: cover;
    background-position: center;
}

.destination-photo-emerald-isle-nc {
    background: url('https://media.istockphoto.com/id/1371767263/photo/dusk-beach-scene-at-emerald-isle-north-carolina-crystal-coast-bogue-banks-waves-and-clouds.jpg?s=612x612&w=0&k=20&c=NXT98NgMzvdsOFlRZnPglRqtwuzgjsvbUfWaEHZjfW4=');
    background-size: cover;
    background-position: center;
}

.destination-photo-indian-beach-nc {
    background: url('https://media.istockphoto.com/id/172173264/photo/atlantic-beach.jpg?s=612x612&w=0&k=20&c=sG21eJcsw9Hvmledzo-fEajAmsV-HgvtN8sSVFnhPXs=');
    background-size: cover;
    background-position: center;
}

.destination-photo-pine-knoll-shores-nc {
    background: url('https://media.istockphoto.com/id/1397933903/photo/blue-waves-and-coastal-cottages-on-an-outer-banks-beach.jpg?s=612x612&w=0&k=20&c=EnCYlIw9_Zex9LyC9ZvF3q0gdZEN8SBsnx2GvR2rcus=');
    background-size: cover;
    background-position: center;
}

.destination-photo-cape-lookout-nc {
    background: url('https://media.istockphoto.com/id/1294052524/photo/cape-lookout-lighthouse-north-carolina.jpg?s=612x612&w=0&k=20&c=zCDh3IoVL8aQDZxHITUrgYsfN1q2xRiHgUuqY0myg2E=');
    background-size: cover;
    background-position: center;
}

/* Cape Fear Coast destination images */
.destination-photo-wrightsville-beach-nc {
    background: url('https://media.istockphoto.com/id/1481542812/photo/wrightsville-beach-north-carolina-at-sunset.jpg?s=612x612&w=0&k=20&c=UC9j1fJTvnH8jA6Yk0hES5T00MP1Zd-4fSo-5V_jY1U=');
    background-size: cover;
    background-position: center;
}

.destination-photo-carolina-beach-nc {
    background: url('https://media.istockphoto.com/id/1039226478/photo/sunset-over-wrightsville-beach-nc.jpg?s=612x612&w=0&k=20&c=G2IdgAGRaCHw7MzwVV-Xs-L3s4wyQsu5izQdiVcHaK8=');
    background-size: cover;
    background-position: center;
}

.destination-photo-kure-beach-nc {
    background: url('https://media.istockphoto.com/id/1039225900/photo/access-40-wrightsville-beach-nc.jpg?s=612x612&w=0&k=20&c=idllgU4i71BhKXTYW5Wok4PYcoy9cqy-qovL9ylU1fc=');
    background-size: cover;
    background-position: center;
}

.destination-photo-bald-head-island-nc {
    background: url('https://media.istockphoto.com/id/525983832/photo/first-light.jpg?s=612x612&w=0&k=20&c=aBiE5QgIyZ4Wi_Qww40K17AmdC4x-lwwue7u5Fqfwz0=');
    background-size: cover;
    background-position: center;
}

/* Custom utility classes */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}