/* Custom resets & base improvements */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}

.bg-slate-50 {
    background-color: #F8FAFC;
}

/* ---------------------------------------------------
   Gallery Aspect Ratio Fix
--------------------------------------------------- */
/* Задает правильные пропорции главному блоку, чтобы он не схлопывался */
.gallery-view-box {
    aspect-ratio: 1 / 1;
}
@media (min-width: 768px) {
    .gallery-view-box {
        aspect-ratio: 4 / 3;
    }
}
@media (min-width: 1024px) {
    .gallery-view-box {
        aspect-ratio: 1 / 1;
    }
}

/* ---------------------------------------------------
   Pure CSS Gallery Logic (No JavaScript required) 
--------------------------------------------------- */

/* Скрываем все слайды по умолчанию и уводим их на задний план */
.gallery-slide {
    opacity: 0;
    z-index: 1;
    visibility: hidden;
    transform: scale(0.98);
}

/* Логика показа слайда при выбранном radio input */
#img1:checked ~ .main-image-wrapper .slide-1,
#img2:checked ~ .main-image-wrapper .slide-2,
#img3:checked ~ .main-image-wrapper .slide-3,
#img4:checked ~ .main-image-wrapper .slide-4 {
    opacity: 1;
    z-index: 10;
    visibility: visible;
    transform: scale(1);
}

/* Логика стилизации активной миниатюры */
#img1:checked ~ .thumbnails-wrapper .thumb-1,
#img2:checked ~ .thumbnails-wrapper .thumb-2,
#img3:checked ~ .thumbnails-wrapper .thumb-3,
#img4:checked ~ .thumbnails-wrapper .thumb-4 {
    border-color: #1E3A8A; /* border-blue-900 */
    box-shadow: 0 10px 15px -3px rgba(30, 58, 138, 0.3);
    transform: translateY(-4px);
    opacity: 1;
}

/* Эффекты при наведении на неактивные миниатюры */
.thumb-label {
    opacity: 0.7;
    filter: grayscale(20%);
}
.thumb-label:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: translateY(-2px);
}
#img1:checked ~ .thumbnails-wrapper .thumb-1,
#img2:checked ~ .thumbnails-wrapper .thumb-2,
#img3:checked ~ .thumbnails-wrapper .thumb-3,
#img4:checked ~ .thumbnails-wrapper .thumb-4 {
    filter: grayscale(0%);
}

/* ---------------------------------------------------
   UI Enhancements & Animations
--------------------------------------------------- */

/* Mega CTA Button */
.mega-btn {
    box-shadow: 0 20px 40px -10px rgba(251, 191, 36, 0.6), inset 0 -4px 0 rgba(217, 119, 6, 0.2);
    animation: gentle-pulse 3s infinite;
}
.mega-btn:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: 0 10px 20px -5px rgba(251, 191, 36, 0.4);
}

@keyframes gentle-pulse {
    0% { box-shadow: 0 20px 40px -10px rgba(251, 191, 36, 0.6); }
    50% { box-shadow: 0 25px 50px -5px rgba(251, 191, 36, 0.8); }
    100% { box-shadow: 0 20px 40px -10px rgba(251, 191, 36, 0.6); }
}

/* Reviews Styling */
.review-card {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}
.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
}

/* Text Selection styling */
::-moz-selection {
    background: #1E3A8A;
    color: #FFF;
}
::selection {
    background: #1E3A8A;
    color: #FFF;
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(7 37 140);
}