/* Custom styles to center title and reduce size by 10% */
.gallery-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gallery-title {
    font-size: 1.98rem !important; /* 10% smaller than 2.2rem */
    margin: 0 auto 15px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.title-paw-icon {
    width: 49.5px !important; /* 10% smaller than 55px */
    height: 49.5px !important; /* 10% smaller than 55px */
}

.gallery-subtitle {
    text-align: center;
    margin: 0 auto 35px;
}

/* Responsive adjustments - also reduce by 10% */
@media (max-width: 768px) {
    .gallery-title {
        font-size: 1.8rem !important; /* 10% smaller than 2rem */
        gap: 7.2px !important; /* 10% smaller than 8px */
        padding: 10.8px 14.4px !important; /* 10% smaller */
    }
    
    .title-paw-icon {
        height: 45px !important; /* 10% smaller than 50px */
        width: 45px !important; /* 10% smaller than 50px */
    }
}

@media (max-width: 480px) {
    .gallery-title {
        font-size: 1.62rem !important; /* 10% smaller than 1.8rem */
        gap: 5.4px !important; /* 10% smaller than 6px */
        padding: 9px 12.6px !important; /* 10% smaller */
    }
}

/* Mobile modal padding improvements */
@media (max-width: 768px) {
    .modal-overlay {
        padding: 15px !important;
    }
    
    .modal-content {
        border-radius: 12px !important;
        max-height: calc(100vh - 30px) !important;
        max-width: calc(100vw - 30px) !important;
    }
}

@media (max-width: 480px) {
    .modal-overlay {
        padding: 10px !important;
    }
    
    .modal-content {
        border-radius: 8px !important;
        max-height: calc(100vh - 20px) !important;
        max-width: calc(100vw - 20px) !important;
    }
}

/* Photo dots improvements - smaller and perfectly circular */
.photo-dot,
.photo-dot-modal {
    width: 6.4px !important; /* 40% smaller total (8px - 20% = 6.4px) */
    height: 6.4px !important; /* 40% smaller total (8px - 20% = 6.4px) */
    border-radius: 50% !important; /* Ensure perfect circles */
    flex-shrink: 0 !important; /* Prevent elliptical distortion */
}

/* Move modal dots to bottom of image container */
.modal-photos {
    position: relative !important;
}

.photo-dots-modal {
    position: absolute !important;
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
}

/* Adjust modal layout to accommodate repositioned dots */
.modal-info {
    margin-top: 0 !important;
}

/* Touch/Swipe enhancements for mobile */
@media (max-width: 768px) {
    /* Improve touch targets for image containers */
    .animal-card__image-container {
        touch-action: pan-y pinch-zoom !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    .modal-photos img {
        touch-action: pan-y pinch-zoom !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
    
    /* Hide navigation arrows on mobile completely */
    .photo-nav {
        display: none !important;
    }
    
    /* Add subtle visual feedback for swipeable areas */
    .animal-card__image-container[data-swipe-setup="true"]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        z-index: 2;
    }
    
    .modal-photos img[data-swipe-setup="true"] {
        position: relative;
    }
    
    /* Show swipe indicator briefly when touching */
    .animal-card__image-container[data-swipe-setup="true"]:active::after {
        opacity: 1;
    }
    
    /* Adjust modal dots positioning for mobile */
    .photo-dots-modal {
        bottom: 10px !important;
    }
}

/* Additional mobile optimizations */
@media (max-width: 480px) {
    /* Ensure images are properly sized for swiping */
    .animal-card__image {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
    
    .modal-photos img {
        max-width: 100% !important;
        max-height: 70vh !important;
        object-fit: contain !important;
    }
    
    /* Further adjust modal dots for small screens */
    .photo-dots-modal {
        bottom: 8px !important;
    }
}