/*
Theme Name: Oasis Event Hall
Theme URI: https://oasis-hall.com.ua
Author: Oasis Team
Author URI: https://oasis-hall.com.ua
Description: Сучасна тема WordPress для OASIS Event Hall - простір для конференцій, концертів та банкетів у Києві
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oasis
Tags: event, hall, conference, concert, catering, responsive, modern
*/

/* 
 * Tailwind CSS завантажується через локальний файл /css/tailwind.min.css
 * або через Play CDN як fallback
 */

/* Базові стилі теми */
:root {
    --color-primary: #D4AF37;
    --color-secondary: #3D2817;
    --color-dark: #2C1810;
    --color-bg: #F5F1E8;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Додаткові стилі для теми */

/* Scroll animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Hero specific animations */
.hero-content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.hero-content.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.hero-cta {
    transition: transform 0.3s ease;
}

.hero-cta button:hover {
    transform: scale(1.05);
}

.hero-cta button:active {
    transform: scale(0.95);
}

.hero-scroll-indicator {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.hero-scroll-indicator.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.animate-slide-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.animate-slide-up.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Smooth transitions for hover effects */
.group {
    transition: transform 0.3s ease;
}

/* Pulse animation for decorative elements */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Testimonials Slider Styles with Splide.js */
.testimonials-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 1rem; /* Add padding so shadows don't get clipped */
}

@media (min-width: 640px) {
    .testimonials-slider {
        padding: 1.5rem; /* More padding on larger screens */
    }
}

.testimonials-track.splide {
    padding: 0;
}

.testimonials-track .splide__list {
    gap: 0;
    display: flex;
    align-items: stretch; /* Make all slides the same height */
}

.testimonial-slide {
    height: 100%;
    display: flex; /* Make slide a flex container */
}

/* Inner card container - flex column to push footer to bottom */
.testimonial-slide > div {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    min-height: 100%; /* Ensure minimum height */
}

/* Text content - takes available space */
.testimonial-slide > div > p.text-gray-700 {
    flex: 1; /* Take available space, pushing footer down */
    min-height: 0; /* Allow text to shrink if needed */
}

/* Footer - always at bottom */
.testimonial-slide > div > .flex.items-center.space-x-4 {
    margin-top: auto !important; /* Push to bottom */
}

/* Custom Splide arrows - override default styles */
.testimonials-slider .splide__arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    pointer-events: none;
    z-index: 10;
}

.testimonials-slider .splide__arrow {
    position: absolute;
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer;
    pointer-events: all;
    transition: all 0.3s ease;
    z-index: 10;
    opacity: 1 !important;
}

.testimonials-slider .splide__arrow:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    transform: scale(1.05);
    border-color: #D4AF37 !important;
}

.testimonials-slider .splide__arrow svg {
    width: 20px;
    height: 20px;
    fill: #3D2817 !important;
}

.testimonials-slider .splide__arrow:hover svg {
    fill: #D4AF37 !important;
}

.testimonials-slider .splide__arrow--prev {
    left: 5px !important;
}

.testimonials-slider .splide__arrow--next {
    right: 5px !important;
}

@media (min-width: 768px) {
    .testimonials-slider .splide__arrow {
        width: 48px !important;
        height: 48px !important;
    }
    
    .testimonials-slider .splide__arrow svg {
        width: 24px;
        height: 24px;
    }
    
    .testimonials-slider .splide__arrow--prev {
        left: -20px !important;
    }
    
    .testimonials-slider .splide__arrow--next {
        right: -20px !important;
    }
}

/* Custom Splide pagination dots */
.testimonials-slider .splide__pagination {
    display: flex !important;
    justify-content: center !important;
    gap: 8px;
    margin-top: 32px !important;
    list-style: none;
    padding: 0 !important;
    position: relative !important;
    bottom: auto !important;
}

.testimonials-slider .splide__pagination__page {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #d1d5db !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
}

.testimonials-slider .splide__pagination__page.is-active {
    background: #D4AF37 !important;
    transform: scale(1.2);
}

.testimonials-slider .splide__pagination__page:hover {
    background: #D4AF37 !important;
    transform: scale(1.2);
}

/* Equal height for grid testimonials (when 3 or fewer) */
.testimonials-section .grid {
    display: grid;
    align-items: stretch; /* Make all grid items the same height */
}

.testimonials-section .grid > div {
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
}

/* Text content in grid - takes available space */
.testimonials-section .grid > div > p.text-gray-700 {
    flex: 1;
    min-height: 0;
}

/* Footer in grid - always at bottom */
.testimonials-section .grid > div > .flex.items-center.space-x-4 {
    margin-top: auto !important; /* Push to bottom */
}

/* Technical Features Section - Abstract Background with Golden Light */
.technical-features-section {
    background: #1a0f08; /* Darker brown/black background */
    position: relative;
}

/* Golden horizontal light streak in the center */
/*.technical-features-section::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 0;*/
/*    right: 0;*/
/*    height: 200px; !* Height of the light streak *!*/
/*    transform: translateY(-50%);*/
/*    background: linear-gradient(*/
/*        to right,*/
/*        transparent 0%,*/
/*        rgba(212, 175, 55, 0.1) 10%,*/
/*        rgba(212, 175, 55, 0.4) 20%,*/
/*        rgba(212, 175, 55, 0.6) 30%,*/
/*        rgba(212, 175, 55, 0.8) 40%,*/
/*        rgba(212, 175, 55, 0.95) 50%,*/
/*        rgba(212, 175, 55, 0.8) 60%,*/
/*        rgba(212, 175, 55, 0.6) 70%,*/
/*        rgba(212, 175, 55, 0.4) 80%,*/
/*        rgba(212, 175, 55, 0.1) 90%,*/
/*        transparent 100%*/
/*    );*/
/*    pointer-events: none;*/
/*    z-index: 0;*/
/*}*/

/* Additional glow effect for more depth */
.technical-features-section::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 150px;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        ellipse at center,
        rgba(212, 175, 55, 0.3) 0%,
        rgba(212, 175, 55, 0.15) 30%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    filter: blur(20px);
}

/* Optional decorative text at the top (like "CONFERENCE & CONCERT HALL") */
.technical-features-section .decorative-text {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(212, 175, 55, 0.3);
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 300;
    z-index: 1;
    pointer-events: none;
}

/* Ensure content is above background effects */
.technical-features-section > * {
    position: relative;
    z-index: 2;
}

/* Fix date input width in Safari */
input[type="date"] {
    max-width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

/* Safari-specific fix for date input */
@supports (-webkit-appearance: none) {
    input[type="date"] {
        width: 100%;
        min-width: 0;
    }
}

.testimonials-prev,
.testimonials-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonials-prev:hover:not(:disabled),
.testimonials-next:hover:not(:disabled) {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-50%) scale(1.05);
    border-color: #D4AF37;
}

.testimonials-prev:disabled,
.testimonials-next:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    background: #f3f4f6;
}

.testimonials-prev svg,
.testimonials-next svg {
    width: 20px;
    height: 20px;
}

@media (min-width: 768px) {
    .testimonials-prev,
    .testimonials-next {
        padding: 12px;
        width: 48px;
        height: 48px;
    }
    
    .testimonials-prev svg,
    .testimonials-next svg {
        width: 24px;
        height: 24px;
    }
}

.testimonials-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

.testimonials-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.testimonials-dot:hover {
    transform: scale(1.2);
}

@media (max-width: 767px) {
    .testimonials-prev {
        left: 5px;
    }
    
    .testimonials-next {
        right: 5px;
    }
}

/* Form validation styles */
input.border-red-500 {
    border-color: #ef4444 !important;
}

input.border-red-500:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

li.splide__slide{
    margin-bottom: 15px;
}