/* ========================================
   PACKAGES SECTION STYLES - BASIC THEME
   OPTIMIZED: Mobile-first, Design Tokens, 4 Breakpoints
   ======================================== */

/* Import Package Card Styles */
@import url('package-card.css');

/* Packages Section - Mobile-first */
.packages-section {
    padding: var(--spacing-10) 0 0 0;
    /* 40px mobile */
    background-color: var(--color-white);
    overflow: visible;
    /* Allow tooltip to show */
}

.packages-container {
    max-width: var(--container-max-width);
    /* 1440px */
    margin: 0 auto;
    padding: 0 var(--spacing-4);
    /* 16px mobile */
    overflow: visible;
    /* Allow tooltip to show */
}

/* Section Header - Mobile-first */
.packages-header {
    text-align: center;
    margin-bottom: var(--spacing-6);
    /* 24px mobile */
}

.packages-title {
    font-size: var(--font-size-24);
    /* 24px mobile */
    font-weight: 900;
    color: var(--color-text-dark);
    line-height: var(--line-height-tight);
    /* 1.4 */
}

/* Location Highlight - Green color */
.location-highlight {
    color: var(--color-success);
    /* #40C706 */
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: var(--transition-normal);
}

.location-highlight:hover {
    color: var(--color-success-dark);
    text-decoration-thickness: 3px;
}

/* Filter Tags - Mobile-first */
.packages-filters {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
    /* 24px mobile */
    position: relative;
    padding: 0;
    /* No horizontal padding on mobile */
}

.packages-filters::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari/Opera */
}

.filter-tags {
    display: flex;
    flex-wrap: nowrap;
    /* Horizontal scroll on mobile */
    gap: var(--spacing-1);
    /* 4px - closer spacing */
    padding: var(--spacing-2);
    /* 8px mobile */
    background-color: var(--color-gray-100);
    border-radius: var(--radius-lg);
    /* 12px */
    overflow-x: auto;
    /* Enable horizontal scrolling on mobile */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
    scrollbar-width: none;
    /* Firefox */
    width: 100%;
    max-width: 100%;
    /* Allow both horizontal scroll in container AND vertical page scroll */
    touch-action: pan-x pan-y;
}

.filter-tags::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari/Opera */
}

.filter-tag {
    padding: var(--spacing-3) var(--spacing-5);
    /* 12px 20px mobile - better touch target */
    border: none;
    border-radius: var(--radius-lg);
    /* 12px */
    background-color: transparent;
    color: var(--color-gray-600);
    font-size: var(--font-size-14);
    /* 14px mobile - larger for readability */
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: var(--transition-normal);
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 44px;
    /* Minimum touch target */
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-tag:hover {
    background-color: rgba(255, 255, 255, 0.5);
    color: var(--color-gray-700);
}

.filter-tag.active {
    background-color: var(--color-white);
    color: var(--color-text-dark);
    box-shadow: var(--shadow-sm);
}

/* ========================================
   NATIVE HORIZONTAL SCROLL - MOBILE-FIRST
   ======================================== */

/* Carousel Container with Nav Buttons */
.packages-carousel {
    position: relative;
    margin-bottom: var(--spacing-8);
    /* 32px */
    overflow: visible;
    /* Allow tooltip to overflow */
}

/* Packages Grid - Native Horizontal Scroll - Simple & Smooth */
.packages-grid {
    display: flex;
    flex-wrap: nowrap !important; /* Force horizontal layout - prevent vertical stacking */
    gap: var(--spacing-3);
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    /* Allow both horizontal scroll in container AND vertical page scroll */
    touch-action: pan-x pan-y;
}

/* Active dragging state */
.packages-grid:active,
.packages-grid.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    /* Instant response when dragging */
}

/* Prevent pointer events on cards while dragging */
.packages-grid.is-dragging .package-card {
    pointer-events: none;
}

/* Hide scrollbar - Chrome, Safari, Opera */
.packages-grid::-webkit-scrollbar {
    display: none;
}

/* Package Cards - Fixed width */
.packages-grid .package-card,
.packages-grid .package-skeleton {
    flex: 0 0 310px;
    /* Fixed 310px at all breakpoints */
    min-width: 310px;
    max-width: 310px;
}

/* Navigation Buttons - Package Card Style */
.packages-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-white);
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: var(--transition-normal);
    /* Package card styling */
    flex-shrink: 0;
    border-radius: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.packages-nav-button img {
    display: block;
}

.packages-nav-button:hover {
    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-50%) scale(1.05);
}

.packages-nav-button:active {
    transform: translateY(-50%) scale(0.98);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
}

.packages-nav-prev {
    left: -24px;
}

.packages-nav-next {
    right: -24px;
}

/* Footer */
.packages-footer {
    text-align: center;
    padding-top: var(--spacing-5);
    /* 20px */
}

.show-more-packages {
    background: var(--color-success-gradient);
    /* Green gradient */
    color: var(--color-white);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-3) var(--spacing-6);
    /* 12px 24px mobile */
    border: none;
    border-radius: var(--radius-md);
    /* 8px */
    cursor: pointer;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-button);
}

.show-more-packages:hover {
    background: var(--color-success-gradient-hover);
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-1px);
}

.show-more-packages:active {
    transform: translateY(0);
}

.packages-count {
    color: var(--color-gray-600);
    font-size: var(--font-size-14);
    margin-top: var(--spacing-3);
    /* 12px */
}

.packages-count strong {
    color: var(--color-success);
    font-weight: var(--font-weight-bold);
}

/* ========================================
   SHIMMER LOADING SKELETON
   ======================================== */

.package-skeleton {
    flex: 0 0 auto;
    width: 100%;
    /* Mobile: full width */
    height: 450px;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    /* 16px */
    border: 1px solid var(--color-gray-200);
    overflow: hidden;
    position: relative;
}

.package-skeleton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent);
    animation: shimmer 1.5s infinite;
}

.skeleton-header {
    min-height: 60px;
    background: var(--color-navy-medium, #002391);
    /* Match package-card-header */
    padding: var(--spacing-4);
    /* 16px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    /* Match card header */
}

.skeleton-badge {
    width: 80px;
    height: var(--spacing-5);
    /* 20px */
    background: var(--color-gray-300);
    border-radius: var(--radius-sm);
    /* 4px */
    margin-bottom: var(--spacing-2);
    /* 8px */
}

.skeleton-title {
    width: 60%;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    /* Semi-transparent white bar */
    border-radius: var(--radius-sm);
    margin: 0 auto;
}

.skeleton-body {
    padding: var(--spacing-5);
    /* 20px */
}

.skeleton-price {
    width: 120px;
    height: var(--spacing-8);
    /* 32px */
    background: var(--color-gray-200);
    border-radius: var(--radius-md);
    /* 8px */
    margin-bottom: var(--spacing-4);
    /* 16px */
}

.skeleton-feature {
    width: 100%;
    height: var(--spacing-3);
    /* 12px */
    background: var(--color-gray-100);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-2);
    /* 8px */
}

.skeleton-feature:nth-child(2) {
    width: 90%;
}

.skeleton-feature:nth-child(3) {
    width: 85%;
}

.skeleton-feature:nth-child(4) {
    width: 95%;
}

.skeleton-button {
    width: 100%;
    height: 44px;
    background: var(--color-gray-200);
    border-radius: var(--radius-lg);
    /* 12px */
    margin-top: var(--spacing-5);
    /* 20px */
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* ========================================
   RESPONSIVE BREAKPOINTS - MOBILE-FIRST
   ======================================== */

/* Mobile: max-width 767px */
@media (max-width: 767px) {

    /* Make location highlight display on new line on mobile */
    .location-highlight {
        display: block;
        margin-top: var(--spacing-1);
        /* 4px spacing from title */
    }
}

/* Tablet: 768px+ */
@media (min-width: 768px) {
    .packages-section {
        padding: var(--spacing-12) 0 0 0;
        /* 48px tablet */
    }

    .packages-container {
        padding: 0 var(--spacing-5);
        /* 20px tablet */
    }

    .packages-header {
        margin-bottom: var(--spacing-8);
        /* 32px */
    }

    .packages-title {
        font-size: var(--font-size-32);
        /* 32px tablet */
        line-height: var(--line-height-tight);
    }

    /* Keep location highlight inline on tablet+ */
    .location-highlight {
        display: inline;
    }

    .packages-filters {
        margin-bottom: 28px;
        /* 32px */
        padding: 0;
        /* Remove horizontal padding on tablet+ */
    }

    .filter-tags {
        padding: var(--spacing-1);
        /* 4px tablet */
        flex-wrap: nowrap;
        /* No wrapping on tablet+ */
        gap: var(--spacing-1);
        /* 4px - closer spacing */
        width: auto;
        /* Auto width on tablet+ */
        max-width: none;
    }

    .filter-tag {
        padding: var(--spacing-3) var(--spacing-6);
        /* 12px 24px tablet */
        font-size: var(--font-size-14);
        /* 14px */
        letter-spacing: 0.5px;
    }

    /* Increase gap on tablet */
    .packages-grid,
    .embla__container {
        gap: var(--spacing-4);
        /* 16px */
    }

    .show-more-packages {
        padding: var(--spacing-3) var(--spacing-8);
        /* 12px 32px */
    }
}

/* Desktop: 1024px+ (show nav buttons) */
@media (min-width: 1024px) {
    .packages-section {
        padding: var(--spacing-16) 0 0 0;
        /* 64px desktop */
    }

    .packages-container {
        padding: 0 var(--spacing-6);
        /* 24px desktop */
    }

    .packages-header {
        margin-bottom: var(--spacing-10);
        /* 40px */
    }

    .packages-title {
        font-size: var(--font-size-36);
        /* 36px desktop */
    }

    .packages-filters {
        margin-bottom: 28px;
        /* 40px */
    }

    .filter-tags {
        gap: var(--spacing-1);
        /* 4px - closer spacing */
    }

    .filter-tag {
        padding: var(--spacing-3) var(--spacing-7);
        /* 12px 28px desktop */
        font-size: var(--font-size-14);
        /* 14px desktop */
    }

    /* Larger gap on desktop */
    .packages-grid,
    .embla__container {
        gap: var(--spacing-5);
        /* 20px */
    }

    /* Show navigation buttons on desktop when needed */
    .packages-nav-button.show {
        display: flex;
    }
}

/* Wide: 1440px+ (max-width container) */
@media (min-width: 1440px) {
    .packages-container {
        padding: 0 76px;
        /* 76px padding each side */
        max-width: 1440px;
        /* Lock at 1440px */
        margin: 0 auto;
        /* Center container */
    }

    /* Adjust gap for better spacing */
    .packages-grid,
    .embla__container {
        gap: var(--spacing-4);
        /* 16px */
    }
}

/* Small Mobile: < 375px (adjust for very small screens) */
@media (max-width: 374px) {
    .filter-tag {
        padding: var(--spacing-2) var(--spacing-4);
        /* 8px 16px - smaller on very small screens */
        font-size: var(--font-size-13);
        /* 13px - slightly smaller */
        letter-spacing: 0.2px;
    }

    .filter-tags {
        gap: var(--spacing-1);
        /* 4px - closer spacing (same as default) */
        padding: var(--spacing-1);
        /* 4px */
    }
}

/* ========================================
   ACCESSIBILITY & FOCUS STATES
   ======================================== */

.filter-tag:focus-visible,
.show-more-packages:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.packages-nav-button:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.location-highlight:focus-visible {
    outline: 2px solid var(--color-success);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

    .filter-tag,
    .show-more-packages,
    .packages-nav-button,
    .location-highlight {
        transition: none;
    }

    .package-skeleton::before {
        animation: none;
    }
}

/* ========================================
   EMPTY STATE
   ======================================== */

.packages-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-16) var(--spacing-4);
    /* 64px 16px */
    text-align: center;
    min-height: 60vh;
    /* Take 60% of viewport height */
    width: 100%;
    /* Full width to center properly */
    flex: 1;
    /* Take all available space */
}

/* Mobile: Increase height */
@media (max-width: 767px) {
    .packages-empty-state {
        min-height: 50vh;
        padding: var(--spacing-12) var(--spacing-4);
        /* 48px 16px */
    }
}

.empty-state-icon {
    margin-bottom: var(--spacing-6);
    /* 24px */
    opacity: 0.8;
}

.empty-state-title {
    font-size: var(--font-size-20);
    /* 20px */
    font-weight: var(--font-weight-bold);
    /* 700 */
    line-height: 28px;
    color: var(--color-text-dark);
    margin: 0 0 var(--spacing-2) 0;
    /* 0 0 8px 0 */
}

.empty-state-description {
    font-size: var(--font-size-16);
    /* 16px */
    font-weight: var(--font-weight-regular);
    /* 400 */
    color: var(--color-gray-600);
    margin: 0;
    max-width: 400px;
}

/* ========================================
   PACKAGE CARD FEATURES LIST
   Styles for features inside package cards
   ======================================== */

.package-card__features {
    padding: var(--spacing-4) 0;
    /* 16px vertical padding */
}

.package-card__features .features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    /* 8px gap between items */
}

.package-card__features .feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    /* 8px gap between icon and text */
    font-size: var(--font-size-14);
    /* 14px */
    color: var(--color-text-dark);
    line-height: 1.5;
}

.package-card__features .feature-icon {
    flex-shrink: 0;
    margin-top: 6px;
    /* Align with first line of text */
}

.package-card__features .feature-item span {
    flex: 1;
}

/* Features More - Hidden by default */
.package-card__features .features-more {
    display: none;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}

.package-card__features .features-more li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    font-size: var(--font-size-14);
    color: var(--color-text-dark);
    line-height: 1.5;
}

/* Show More Button */
.package-card__features .show-more-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    /* 4px */
    background: none;
    border: none;
    padding: var(--spacing-2) 0;
    /* 8px 0 */
    color: var(--color-secondary, #F75296);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-normal);
    margin-top: var(--spacing-2);
}

.package-card__features .show-more-btn:hover {
    opacity: 0.8;
}

.package-card__features .show-more-btn svg {
    transition: transform var(--transition-normal);
}

.package-card__features .show-more-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* Package Card Price Label */
.package-card__price-label {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-600);
}

/* ========================================
   CAMERA SECTION OVERRIDES
   Ensure horizontal scroll layout works
   ======================================== */

/* Camera packages section - full width */
.packages-section--camera {
    width: 100%;
    overflow: visible;
}

.packages-section--camera .packages-container {
    max-width: 100%;
    padding: 0 var(--spacing-6);
    overflow: visible;
}

/* Force horizontal layout in camera grid */
.packages-section--camera .packages-grid,
#content-swiper-content-camera {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: var(--spacing-4);
    width: 100%;
    padding-bottom: var(--spacing-2); /* Space for shadow */
    /* Allow horizontal scroll AND vertical page scroll */
    touch-action: pan-x pan-y !important;
}

/* Fixed width cards - 4 visible on desktop (1440px - 76px*2 padding - 3*16px gaps) / 4 = ~310px */
.packages-section--camera .package-card,
#content-swiper-content-camera .package-card {
    flex: 0 0 310px !important;
    min-width: 310px !important;
    max-width: 310px !important;
    width: 310px !important;
}

/* Responsive adjustments for camera section */
@media (max-width: 1439px) {
    .packages-section--camera .packages-container {
        padding: 0 var(--spacing-5);
    }
}

@media (max-width: 767px) {
    .packages-section--camera .packages-container {
        padding: 0 var(--spacing-4);
    }

    /* Slightly smaller cards on mobile */
    .packages-section--camera .package-card,
    #content-swiper-content-camera .package-card {
        flex: 0 0 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        width: 280px !important;
    }
}

/* Override legacy CSS conflicts from layout_v1.3.css and others */
.main-wrapper.package_camera .packages-grid,
.main-wrapper.package_combo_camera .packages-grid,
.main-wrapper .packages-section--camera .packages-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    width: auto !important;
    max-width: none !important;
}

/* Camera card name - inside content area (dark text on white bg) */
.packages-section--camera .package-card__name,
#content-swiper-content-camera .package-card__name {
    font-size: var(--font-size-18, 18px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-text-dark, #3D3D3D);
    text-transform: none;
    margin: 0 0 var(--spacing-3, 12px) 0;
    text-align: left;
    line-height: 1.3;
}

.packages-section--camera .package-card__name a,
#content-swiper-content-camera .package-card__name a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-normal, 0.3s ease);
}

.packages-section--camera .package-card__name a:hover,
#content-swiper-content-camera .package-card__name a:hover {
    color: var(--color-primary, #4564ED);
}

/* ========================================
   COMBO CAMERA / PACKAGE-SECTION OVERRIDES
   Ensure horizontal carousel layout works
   ======================================== */

/* Force horizontal flex layout for package-section carousel */
.package-section__carousel-track,
#comboCameraTrack,
#packages-combo-camera .package-section__carousel-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 24px;
    width: max-content !important;
    /* Allow horizontal scroll AND vertical page scroll */
    touch-action: pan-x pan-y !important;
}

/* Fixed width cards in carousel - 342px as designed */
.package-section__carousel-track .package-card,
#comboCameraTrack .package-card,
#packages-combo-camera .package-card {
    flex: 0 0 342px !important;
    min-width: 342px !important;
    max-width: 342px !important;
    width: 342px !important;
}

/* Native horizontal scroll for smooth drag experience */
.package-section__carousel-viewport,
#comboCameraCarousel .package-section__carousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    cursor: grab;
    user-select: none;
    /* Allow horizontal scroll AND vertical page scroll */
    touch-action: pan-x pan-y;
}

.package-section__carousel-viewport:active,
#comboCameraCarousel .package-section__carousel-viewport:active {
    cursor: grabbing;
}

/* Hide scrollbar - Chrome/Safari */
.package-section__carousel-viewport::-webkit-scrollbar,
#comboCameraCarousel .package-section__carousel-viewport::-webkit-scrollbar {
    display: none;
}

/* Mobile: smaller cards but still horizontal */
@media (max-width: 767px) {
    .package-section__carousel-track .package-card,
    #comboCameraTrack .package-card,
    #packages-combo-camera .package-card {
        flex: 0 0 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
        width: 300px !important;
    }

    /* Fix: Ensure carousel starts from first item, not centered */
    .package-section__carousel-track,
    #comboCameraTrack,
    #packages-combo-camera .package-section__carousel-track {
        justify-content: flex-start !important;
    }
}