/* ==== Header Styles: Revised for burger menu functionality ==== */

/* Header base */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: var(--color-bg);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

/* Container flex */
.header-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.logo-link {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 40px;
    width: auto;
    transition: transform var(--transition-time) ease;
}

.logo-link:hover .logo-img,
.logo-link:focus .logo-img {
    transform: scale(1.1);
}

/* Desktop Nav */
.nav-desktop {
    display: flex;
}

.nav-list {
    display: flex;
    gap: var(--spacing-lg);
}

.nav-item a {
    position: relative;
    padding: var(--spacing-sm) 0;
}

/* Underline animation already in .link-underline */

/* Burger Button */
.burger-btn {
    display: none;
    /* shown on mobile via media query */
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
}

.burger-line {
    width: 100%;
    height: 2px;
    background-color: var(--color-text);
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease;
}

/* Optional animation of burger lines when toggled: add classes via JS if desired */
.burger-btn.open .burger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.burger-btn.open .burger-line:nth-child(2) {
    opacity: 0;
}

.burger-btn.open .burger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.burger-btn:hover .burger-line,
.burger-btn:focus .burger-line {
    background-color: var(--color-secondary);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 900;
}

/* Hidden by default */
.mobile-menu-overlay.hidden {
    display: none !important;
}

/* Mobile Nav */
.nav-mobile {
    position: fixed;
    top: 60px;
    right: 0;
    width: 75%;
    max-width: 300px;
    height: calc(100vh - 60px);
    background-color: var(--color-bg);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    padding-top: var(--spacing-lg);
    /* initial state: hidden via .hidden class */
}

.nav-mobile.hidden {
    display: none !important;
}

/* Slide-in / Slide-out animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

/* When showing nav-mobile, JS applies animation */
.nav-mobile.show {
    display: block !important;
    animation: slideInRight 0.3s forwards;
}

/* Mobile Nav List */
.nav-list-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.nav-item-mobile a {
    font-size: var(--font-size-lg);
    color: var(--color-text);
}

.nav-item-mobile a:hover,
.nav-item-mobile a:focus {
    color: var(--color-secondary);
}

/* Responsive Breakpoints */
/* Show burger and hide desktop nav under 768px */
@media (max-width: 767px) {
    .nav-desktop {
        display: none;
    }

    .burger-btn {
        display: flex;
    }
}

/* Prevent body scroll when menu open */
.body-no-scroll {
    overflow: hidden;
}

/* Ensure header does not cover content: 
     Add padding-top: 60px; to <main> to offset fixed header */
/* Prevent Body Scroll When Menu Open */
.body-no-scroll {
    overflow: hidden;
}

/* Footer Styles */
footer {
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
}

footer .footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.footer-section {
    flex: 1 1 200px;
}

.footer-section h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--color-secondary);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-links a {
    color: var(--color-text-inverse);
    transition: color var(--transition-time) ease;
}

.footer-links a:hover,
.footer-links a:focus {
    color: var(--color-accent-light);
}

/* Legal Links */
.footer-section ul:last-child {
    margin-top: var(--spacing-md);
}

/* hero.css */
/* English / Русский */

/* Hero Section Styles Without Inline Styles */

/* Container: full-screen minus header height */
.hero-slider {
    position: relative;
}

.section-fullscreen {
    position: relative;
    width: 100%;
    height: calc(100vh - 60px);
    max-height: 1400px;
    /* 60px = header height */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Swiper Overrides for Hero */
.hero-swiper {
    width: 100%;
    height: 100%;
}

.hero-swiper .swiper-slide {
    /* No extra padding/margins */
}

/* Each Slide: background images assigned via CSS classes */
.hero-slide {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slide.slide-1 {
    background-image: url('../images/hero1.jpg');
}

.hero-slide.slide-2 {
    background-image: url('../images/hero2.jpg');
}

.hero-slide.slide-3 {
    background-image: url('../images/hero3.jpg');
}

/* Overlay for contrast */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(15px);
}

/* Content wrapper: initially hidden, animate via 'animate' class */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--color-text-inverse);
    opacity: 0;
    padding: 0 10px;
}

.hero-content.animate {
    opacity: 1;
}

/* Title, subtitle, button styles */
.hero-title,
.hero-subtitle,
.hero-btn {
    color: var(--color-text-inverse);
    opacity: 0;
}

/* Animation when parent .hero-content has .animate */
.hero-content.animate .hero-title {
    animation: fadeInDown 1s ease forwards;
    animation-delay: 0.1s;
}

.hero-content.animate .hero-subtitle {
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.3s;
}

.hero-content.animate .hero-btn {
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.5s;
}



/* Responsive Typography */
@media (min-width: 480px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 3rem;
    }

    .hero-subtitle {
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: 3.5rem;
    }

    .hero-subtitle {
        font-size: 1.75rem;
    }
}

/* Swiper navigation styling for hero: overrides from common */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
    color: var(--color-text-inverse);
    transition: color var(--transition-time) ease;
}

.hero-swiper .swiper-button-prev:hover,
.hero-swiper .swiper-button-next:hover {
    color: var(--color-secondary);
}

.hero-swiper .swiper-pagination-bullet {
    background: var(--color-text-inverse);
    opacity: 0.6;
}

.hero-swiper .swiper-pagination-bullet-active {
    opacity: 1;
}

/* services.css */
/* English / Русский */

/* Section title styling */
.services .section-title {
    font-size: var(--font-size-xl);
    text-align: center;
    color: var(--color-primary);
    margin-bottom: var(--spacing-lg);
    animation: fadeInDown 1s ease forwards;
    opacity: 0;
}

.services.animate-title .section-title {
    opacity: 1;
}

/* Swiper container */
.services-swiper {
    width: 100%;
    padding-bottom: var(--spacing-xl);
}

/* Service Card Styles */
.service-card {
    background-color: var(--color-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease;
    height: 100%;
}

.service-card:hover,
.service-card:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Image wrapper to maintain aspect ratio */
.service-img-wrapper {
    width: 100%;
    padding-top: 80.25%;
    /* 16:9 ratio */
    position: relative;
}

.service-img-wrapper img.service-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-time) ease;
}

.service-card:hover .service-img,
.service-card:focus-within .service-img {
    transform: scale(1.05);
}

/* Info section */
.service-info {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.service-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--color-secondary);
    animation: fadeInDown 0.8s ease forwards;
    opacity: 0;
}

.service-desc {
    flex-grow: 1;
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-muted);
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

.service-btn {
    align-self: start;
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.4s;
    opacity: 0;
}

/* Swiper navigation overrides for services */
.services-swiper .services-button-prev,
.services-swiper .services-button-next {
    color: var(--color-primary);
    transition: color var(--transition-time) ease;
}

.services-swiper .services-button-prev:hover,
.services-swiper .services-button-next:hover {
    color: var(--color-secondary);
}

/* Position nav buttons slightly inside */
.services-swiper .services-button-prev {
    left: 10px;
}

.services-swiper .services-button-next {
    right: 10px;
}

/* Pagination bullets */
.services-swiper .services-pagination .swiper-pagination-bullet {
    background: var(--color-primary);
    opacity: 0.5;
}

.services-swiper .services-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}



/* Trigger animations when JS adds a class to section */
.services.animate .section-title {
    opacity: 1;
}

.services.animate .service-title {
    opacity: 1;
}

.services.animate .service-desc {
    opacity: 1;
}

.services.animate .service-btn {
    opacity: 1;
}

/* testimonials.css */
/* English / Русский */

/* Section base */
.testimonials {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
}

/* Section title styling */
.testimonials .section-title {
    font-size: var(--font-size-xl);
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-secondary);
    opacity: 0;
    animation: fadeInDown 1s ease forwards;
}

.testimonials.animate .section-title {
    opacity: 1;
}

/* Swiper container adjustments */
.testimonials-swiper {
    width: 100%;
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}

/* Testimonial Card */
.testimonial-card {
    background-color: var(--color-bg-light);
    /* светлый фон над темной секцией */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md);
    transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease;
}

.testimonial-card:hover,
.testimonial-card:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* Avatar */
.testimonial-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
    border: 2px solid var(--color-secondary);
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content */
.testimonial-content {
    text-align: center;
}

/* Text */
.testimonial-text {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
    opacity: 0;
}

/* Author */
.testimonial-author {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-primary);
    opacity: 0;
}

/* Animations triggered when parent .testimonials has .animate */
.testimonials.animate .testimonial-text {
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.3s;
}

.testimonials.animate .testimonial-author {
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.5s;
}

/* Swiper navigation styling */
.testimonials-swiper .testimonials-button-prev,
.testimonials-swiper .testimonials-button-next {
    color: var(--color-text-inverse);
    transition: color var(--transition-time) ease;
}

.testimonials-swiper .testimonials-button-prev:hover,
.testimonials-swiper .testimonials-button-next:hover {
    color: var(--color-secondary);
}

/* Position nav buttons */
.testimonials-swiper .testimonials-button-prev {
    left: 10px;
}

.testimonials-swiper .testimonials-button-next {
    right: 10px;
}

/* Pagination bullets */
.testimonials-swiper .testimonials-pagination .swiper-pagination-bullet {
    background: var(--color-text-inverse);
    opacity: 0.5;
}

.testimonials-swiper .testimonials-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}

/* Responsive adjustments */
/* On small screens, one slide visible; Swiper breakpoints handle slidesPerView */

/* gallery.css */
/* English / Русский */

/* Gallery Section Base */
.gallery {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
    background-color: var(--color-bg-light);
    color: var(--color-text);
}

.gallery .section-title {
    font-size: var(--font-size-xl);
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-primary);
    opacity: 0;
    animation: fadeInDown 1s ease forwards;
}

/* Animate title on load: add .animate to section via JS if desired */
.gallery.animate .section-title {
    opacity: 1;
}

/* Grid container */
.gallery-grid {
    display: grid;
    gap: var(--spacing-md);
    /* Mobile-first: 1 column */
    grid-template-columns: 1fr;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* Gallery item */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    /* Optional: initial transform for hover effect */
    transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease;
}

.gallery-item:hover,
.gallery-item:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Image wrapper for aspect ratio (optional: keep uniform height) */
/* If you want fixed ratio, uncomment: */
/*
  .gallery-img-wrapper {
    position: relative;
    width: 100%;
    padding-top: 75%; // e.g., 4:3 ratio
  }
  .gallery-img-wrapper img.gallery-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  */
/* Alternatively, allow images of varying heights but max-width 100%: */
.gallery-img-wrapper {
    position: relative;
    width: 100%;
}

.gallery-img-wrapper img.gallery-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform var(--transition-time) ease;
}

.gallery-item:hover .gallery-img,
.gallery-item:focus-within .gallery-img {
    transform: scale(1.05);
}

/* Overlay: hidden by default, appears on hover */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 31, 54, 0.6);
    /* dark semi-transparent */
    opacity: 0;
    transition: opacity var(--transition-time) ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-md);
}

.gallery-item:hover .gallery-overlay,
.gallery-item:focus-within .gallery-overlay {
    opacity: 1;
}

/* Caption inside overlay */
.gallery-caption {
    color: var(--color-text-inverse);
    font-size: var(--font-size-base);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.gallery-caption .gallery-link {
    display: inline-block;
    margin-top: var(--spacing-sm);
    padding: 8px 16px;
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    border-radius: 4px;
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease;
    text-decoration: none;
}

.gallery-caption .gallery-link:hover,
.gallery-caption .gallery-link:focus {
    background-color: var(--color-accent-light);
    transform: translateY(-2px);
}

/* Lazy-loading effect (optional): */
.lazyload {
    opacity: 0;
    transition: opacity var(--transition-time) ease;
}

.lazyload-loaded {
    opacity: 1;
}

/* If you want to animate items on load, add: */
.gallery-item {
    opacity: 0;
    transform: translateY(20px);
}

.gallery.animate .gallery-item {
    animation: fadeInUp 0.8s ease forwards;
}

/* Staggered animation: */
.gallery.animate .gallery-item:nth-child(1) {
    animation-delay: 0.2s;
}

.gallery.animate .gallery-item:nth-child(2) {
    animation-delay: 0.4s;
}

.gallery.animate .gallery-item:nth-child(3) {
    animation-delay: 0.6s;
}

.gallery.animate .gallery-item:nth-child(4) {
    animation-delay: 0.8s;
}

.gallery.animate .gallery-item:nth-child(5) {
    animation-delay: 1s;
}

.gallery.animate .gallery-item:nth-child(6) {
    animation-delay: 1.2s;
}

/* Add more nth-child rules if more items */

/* Ensure focus styles for accessibility */
.gallery-item a:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* features.css */
/* English / Русский */

/* Section base */
.features {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
    background-color: var(--color-bg-light);
    color: var(--color-text);
}

/* Section title */
.features .section-title {
    font-size: var(--font-size-xl);
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-primary);
    opacity: 0;
    animation: fadeInDown 1s ease forwards;
}

.features.animate .section-title {
    opacity: 1;
}

/* Features grid */
.features-grid {
    display: grid;
    gap: var(--spacing-lg);
    /* Mobile: one column */
    grid-template-columns: 1fr;
}

/* Tablet: two columns */
@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Feature card */
.feature-card {
    background-color: var(--color-bg);
    border-radius: 8px;
    padding: var(--spacing-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease;
    opacity: 0;
    transform: translateY(20px);
}

.features.animate .feature-card {
    /* Animate in with stagger */
    animation: fadeInUp 0.8s ease forwards;
}

/* Staggered delays */
.features.animate .feature-card:nth-child(1) {
    animation-delay: 0.3s;
}

.features.animate .feature-card:nth-child(2) {
    animation-delay: 0.5s;
}

.features.animate .feature-card:nth-child(3) {
    animation-delay: 0.7s;
}

.features.animate .feature-card:nth-child(4) {
    animation-delay: 0.9s;
}

/* Hover effect */
.feature-card:hover,
.feature-card:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Icon wrapper */
.feature-icon-wrapper {
    width: 60px;
    height: 60px;
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--transition-time) ease;
}

.feature-card:hover .feature-icon,
.feature-card:focus-within .feature-icon {
    transform: scale(1.1);
}

/* Feature title */
.feature-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: var(--spacing-sm);
}

/* Feature description */
.feature-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
    flex-grow: 1;
}

/* Feature link button */
.feature-link {
    margin-top: auto;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease;
}

.feature-link.btn-secondary {
    background-color: transparent;
    color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
}

.feature-link.btn-secondary:hover,
.feature-link.btn-secondary:focus {
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    transform: translateY(-2px);
}

.feature-link.btn-primary {
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    border: 2px solid var(--color-secondary);
}

.feature-link.btn-primary:hover,
.feature-link.btn-primary:focus {
    background-color: var(--color-accent-light);
    color: var(--color-text-inverse);
    transform: translateY(-2px);
}

/* Accessibility: focus outline */
.feature-link:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.feature-card:focus-within {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* cta.css */
/* English / Русский */

/* CTA Section Base */
.cta {
    position: relative;
    overflow: hidden;
    /* padding top/bottom: ensure sufficient height */
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
    background-color: var(--color-bg-dark);
    /* fallback if image fails */
    color: var(--color-text-inverse);
}

/* Background image */
.cta-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/cta-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Overlay for contrast */
.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 31, 54, 0.7);
    /* dark semi-transparent */
    z-index: 2;
}

/* Content wrapper */
.cta-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
}

/* Title */
.cta-title {
    font-size: var(--font-size-xxl);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-inverse);
    opacity: 0;
    transform: translateY(20px);
}

/* Subtitle */
.cta-subtitle {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-inverse);
    opacity: 0;
    transform: translateY(20px);
}

/* Button */
.cta-btn {
    display: inline-block;
    padding: 14px 28px;
    font-size: var(--font-size-base);
    border-radius: 6px;
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease;
    opacity: 0;
    transform: translateY(20px);
}

.cta-btn:hover,
.cta-btn:focus {
    background-color: var(--color-accent-light);
    transform: translateY(-2px);
}

/* Animate content when .animate class added */
.cta.animate .cta-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.cta.animate .cta-title {
    animation: fadeInDown 0.8s ease forwards;
    animation-delay: 0.3s;
}

.cta.animate .cta-subtitle {
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.6s;
}

.cta.animate .cta-btn {
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.9s;
}

/* Responsive Typography */
@media (min-width: 480px) {
    .cta-title {
        font-size: 2.5rem;
    }

    .cta-subtitle {
        font-size: 1.25rem;
    }
}

@media (min-width: 768px) {
    .cta-title {
        font-size: 3rem;
    }

    .cta-subtitle {
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .cta-title {
        font-size: 3.5rem;
    }

    .cta-subtitle {
        font-size: 1.75rem;
    }
}

/* Ensure focus outline */
.cta-btn:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .cta-overlay {
        background-color: rgba(0, 0, 0, 0.6);
    }

    /* fallback background color is already dark */
}

/* about-hero.css */
/* English / Русский */

/* Section base */
.about-hero {
    padding-top: 100px;
    padding-bottom: var(--spacing-xxl);
    background-color: var(--color-bg-light);
    color: var(--color-text);
}

/* Grid/Flex layout: text and image side by side on desktop, stacked on mobile */
.about-hero-grid {
    display: grid;
    gap: var(--spacing-lg);
    /* Mobile: single column */
    align-items: center;
    grid-template-columns: 1fr;
}



/* Text content */
.about-hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    opacity: 0;
    transform: translateY(20px);
}

/* Heading */
.about-hero-title {
    font-size: var(--font-size-xxl);
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
    opacity: 0;
    transform: translateY(20px);
}

/* Subtitle */
.about-hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
    opacity: 0;
    transform: translateY(20px);
}

/* Description */
.about-hero-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-base);
    opacity: 0;
    transform: translateY(20px);
}

/* Button */
.about-hero-btn {
    align-self: start;
    padding: 12px 24px;
    font-size: var(--font-size-base);
    border-radius: 6px;
    text-decoration: none;
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease;
    opacity: 0;
    transform: translateY(20px);
}

.about-hero-btn:hover,
.about-hero-btn:focus {
    background-color: var(--color-accent-light);
    transform: translateY(-2px);
}

/* Image wrapper */
.about-hero-image-wrapper {
    width: 100%;
    /* Maintain aspect ratio if desired; here allow auto height */
}

.about-hero-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    object-fit: cover;
    transition: transform var(--transition-time) ease;
}

.about-hero-image-wrapper:hover .about-hero-image,
.about-hero-image-wrapper:focus-within .about-hero-image {
    transform: scale(1.03);
}

/* Responsive typography */
@media (min-width: 480px) {
    .about-hero-title {
        font-size: 2.5rem;
    }

    .about-hero-subtitle {
        font-size: 1.25rem;
    }
}

@media (min-width: 768px) {
    .about-hero-title {
        font-size: 3rem;
    }

    .about-hero-subtitle {
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .about-hero-title {
        font-size: 3.5rem;
    }

    .about-hero-subtitle {
        font-size: 1.75rem;
    }
}

/* Animation when .animate class is added */
.about-hero.animate .about-hero-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Staggered animations for child elements */
.about-hero.animate .about-hero-title {
    animation: fadeInDown 0.8s ease forwards;
    animation-delay: 0.3s;
}

.about-hero.animate .about-hero-subtitle {
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.6s;
}

.about-hero.animate .about-hero-desc {
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.9s;
}

.about-hero.animate .about-hero-btn {
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 1.2s;
}

/* Ensure focus styles */
.about-hero-btn:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.about-hero-image-wrapper:focus-within .about-hero-image {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* about-team.css */
/* English / Русский */

/* Section base */
.about-team {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
    background-color: var(--color-bg-light);
    color: var(--color-text);
}

/* Section title */
.about-team .section-title {
    font-size: var(--font-size-xl);
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-primary);
    opacity: 0;
    animation: fadeInDown 1s ease forwards;
}

.about-team.animate .section-title {
    opacity: 1;
}

/* Team grid: responsive columns */
.team-grid {
    display: grid;
    gap: var(--spacing-lg);
    /* Mobile: 1 column */
    grid-template-columns: 1fr;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Team card */
.team-card {
    background-color: var(--color-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md);
    text-align: center;
    transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease;
    opacity: 0;
    transform: translateY(20px);
}

.about-team.animate .team-card {
    animation: fadeInUp 0.8s ease forwards;
}

/* Staggered animation delays */
.about-team.animate .team-card:nth-child(1) {
    animation-delay: 0.3s;
}

.about-team.animate .team-card:nth-child(2) {
    animation-delay: 0.5s;
}

.about-team.animate .team-card:nth-child(3) {
    animation-delay: 0.7s;
}

.about-team.animate .team-card:nth-child(4) {
    animation-delay: 0.9s;
}

.about-team.animate .team-card:nth-child(5) {
    animation-delay: 1.1s;
}

.about-team.animate .team-card:nth-child(6) {
    animation-delay: 1.3s;
}

/* If more members added, extend nth-child rules accordingly */

/* Hover and focus effect */
.team-card:hover,
.team-card:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Photo wrapper and image */
.team-photo-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
    border: 2px solid var(--color-secondary);
}

.team-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-time) ease;
}

.team-card:hover .team-photo,
.team-card:focus-within .team-photo {
    transform: scale(1.05);
}

/* Name */
.team-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

/* Role */
.team-role {
    font-size: var(--font-size-base);
    color: var(--color-secondary);
    margin-bottom: var(--spacing-sm);
}

/* Bio */
.team-bio {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
    margin-bottom: var(--spacing-md);
}

/* Optional Contact button inside card */
/*
  .team-contact-btn {
    margin-top: auto;
    padding: 8px 16px;
    font-size: var(--font-size-base);
    border-radius: 6px;
    text-decoration: none;
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease;
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
  }
  .team-contact-btn:hover,
  .team-contact-btn:focus {
    background-color: var(--color-accent-light);
    transform: translateY(-2px);
  }
  */

/* Accessibility: focus outline */
.team-card:focus-within {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* If using .team-contact-btn */
.team-contact-btn:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* about-process-alt.css */
/* English / Русский */

/* Section base */
.about-process-alt {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
    background-color: var(--color-bg-light);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

/* Section title */
.about-process-alt .section-title {
    font-size: var(--font-size-xl);
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-primary);
    opacity: 0;
    animation: fadeInDown 1s ease forwards;
}

.about-process-alt.animate .section-title {
    opacity: 1;
}

/* Steps wrapper */
.process-steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* Each step: alternating layout and background */
.process-step {
    display: flex;
    align-items: center;
    padding: var(--spacing-lg);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.6s ease, opacity 0.6s ease;
}

/* When animate class added to section, reveal each step with stagger */
.about-process-alt.animate .process-step {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays */
.about-process-alt.animate .process-step:nth-child(1) {
    transition-delay: 0.3s;
}

.about-process-alt.animate .process-step:nth-child(2) {
    transition-delay: 0.5s;
}

.about-process-alt.animate .process-step:nth-child(3) {
    transition-delay: 0.7s;
}

.about-process-alt.animate .process-step:nth-child(4) {
    transition-delay: 0.9s;
}

.about-process-alt.animate .process-step:nth-child(5) {
    transition-delay: 1.1s;
}

.about-process-alt.animate .process-step:nth-child(6) {
    transition-delay: 1.3s;
}

/* Zigzag: alternate flex-direction and background */
.process-step:nth-child(odd) {
    flex-direction: row;
    background-color: var(--color-bg);
}

.process-step:nth-child(even) {
    flex-direction: row-reverse;
    background-color: var(--bg-light);
    /* slightly different light shade; ensure var defined or use a lighter tone */
}

/* If var --bg-light used for section, for even steps use a tinted background:
     You may define in common.css: --color-step-bg-alt: #fafafa; 
     Then use background-color: var(--color-step-bg-alt);
  */

/* Decorative pseudo-element per step for variety */
/* For step 1 */
.process-step:nth-child(1)::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: var(--color-accent);
    border-radius: 50%;
    top: -20px;
    left: -20px;
    opacity: 0.2;
    transform: rotate(15deg);
}

/* For step 2 */
.process-step:nth-child(2)::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px dashed var(--color-secondary);
    bottom: -30px;
    right: -30px;
    opacity: 0.15;
    transform: rotate(-10deg);
}

/* For step 3 */
.process-step:nth-child(3)::before {
    content: '';
    position: absolute;
    width: 120px;
    height: 40px;
    background-color: var(--color-secondary);
    top: 10%;
    right: -60px;
    opacity: 0.1;
    transform: skewY(-15deg);
}

/* For step 4 */
.process-step:nth-child(4)::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 120px;
    background-color: var(--accent);
    bottom: 10%;
    left: -40px;
    opacity: 0.15;
    transform: skewX(15deg);
}

/* For step 5 */
.process-step:nth-child(5)::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border: 2px solid var(--color-primary);
    top: -40px;
    right: 20%;
    opacity: 0.1;
    border-radius: 8px;
    transform: rotate(25deg);
}

/* For step 6 */
.process-step:nth-child(6)::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 50px;
    background-color: var(--color-secondary);
    bottom: -25px;
    left: 20%;
    opacity: 0.1;
    transform: skewY(10deg);
}

/* Inner wrapper: align icon and text */
.step-inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
}

/* Icon styling */
.step-icon {
    flex: 0 0 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    transition: transform var(--transition-time) ease;
}

/* On hover/focus of the step, slightly scale icon */
.process-step:hover .step-icon img,
.process-step:focus-within .step-icon img {
    transform: scale(1.1);
}

/* Text styling */
.step-text {
    flex: 1;
}

.step-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.step-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
}

/* Responsive adjustments */
/* Mobile: stack icon over text, remove zigzag */
@media (max-width: calc(768px - 1px)) {
    .process-step {
        flex-direction: column !important;
        text-align: center;
    }

    .step-inner {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .step-icon {
        margin-bottom: var(--spacing-sm);
    }
}

/* Final CTA wrapper */
.process-cta-wrapper {
    margin-top: var(--spacing-xxl);
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.about-process-alt.animate .process-cta-wrapper {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.5s;
}

/* CTA button */
.process-cta-btn {
    padding: 12px 24px;
    font-size: var(--font-size-base);
    border-radius: 6px;
    text-decoration: none;
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease;
}

.process-cta-btn:hover,
.process-cta-btn:focus {
    background-color: var(--color-accent-light);
    transform: translateY(-2px);
}

/* Accessibility */
.process-step:focus-within {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.process-cta-btn:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* about-faq.css */
/* English-only FAQ & CTA styling */

/* Section base */
.about-faq {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
    background-color: var(--color-bg-light);
    color: var(--color-text);
}

/* Section title */
.about-faq .section-title {
    font-size: var(--font-size-xl);
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-primary);
    opacity: 0;
    animation: fadeInDown 1s ease forwards;
}

.about-faq.animate .section-title {
    opacity: 1;
}

/* FAQ list wrapper */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* FAQ item styling */
.faq-item details {
    border: 1px solid var(--color-secondary);
    border-radius: 6px;
    padding: var(--spacing-md);
    background-color: var(--color-bg);
    transition: background-color var(--transition-time) ease;
}

.faq-item details[open] {
    background-color: var(--bg-light);
    /* slightly different shade when open */
}

/* Question summary */
.faq-question {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-secondary);
    cursor: pointer;
    position: relative;
    padding-right: var(--spacing-lg);
}

/* Hide default marker */
.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::marker {
    font-size: 0;
}

.faq-question::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-lg);
    color: var(--color-secondary);
    transition: transform var(--transition-time) ease;
}

/* When open, show minus */
.faq-item details[open]>.faq-question::after {
    content: '–';
}

/* Answer styling */
.faq-answer {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity var(--transition-time) ease, max-height var(--transition-time) ease;
}

.faq-item details[open] .faq-answer {
    opacity: 1;
    max-height: 500px;
    /* adjust if needed for longer answers */
}

/* Links inside answer */
.faq-link {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-time) ease;
}

.faq-link:hover,
.faq-link:focus {
    color: var(--color-secondary);
}

/* Final CTA wrapper */
.faq-cta-wrapper {
    text-align: center;
    margin-top: var(--spacing-xxl);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.about-faq.animate .faq-cta-wrapper {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1s;
}

/* CTA title */
.faq-cta-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInDown 0.8s ease forwards;
    animation-delay: 1.2s;
}

.about-faq.animate .faq-cta-title {
    opacity: 1;
    transform: translateY(0);
}

/* CTA subtitle */
.faq-cta-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 1.4s;
}

.about-faq.animate .faq-cta-subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* CTA button */
.faq-cta-btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: var(--font-size-base);
    border-radius: 6px;
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease, opacity var(--transition-time) ease;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 1.6s;
}

.about-faq.animate .faq-cta-btn {
    opacity: 1;
    transform: translateY(0);
}

.faq-cta-btn:hover,
.faq-cta-btn:focus {
    background-color: var(--color-accent-light);
    transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: calc(768px - 1px)) {
    .faq-list {
        gap: var(--spacing-sm);
    }

    .faq-question::after {
        right: var(--spacing-md);
    }
}

/* Accessibility: focus outline */
.faq-question:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.faq-cta-btn:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* shop-hero.css */
/* Hero section for Shop page with English-only content */

/* Section base */
.shop-hero {
    position: relative;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: var(--spacing-xxl);
    background-color: var(--color-bg-light);
    /* fallback */
    color: var(--color-text);
}

/* Background image */
.shop-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/about-hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Overlay for contrast */
.shop-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 31, 54, 0.6);
    z-index: 2;
}

/* Content wrapper */
.shop-hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
}

/* Title */
.shop-hero-title {
    font-size: var(--font-size-xxl);
    margin-bottom: var(--spacing-md);
    color: var(--color-bg-light);
    opacity: 0;
    transform: translateY(20px);
}

/* Subtitle */
.shop-hero-subtitle {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-lg);
    color: var(--color-bg-light);
    opacity: 0;
    transform: translateY(20px);
}

/* Button */
.shop-hero-btn {
    display: inline-block;
    padding: 14px 28px;
    font-size: var(--font-size-base);
    border-radius: 6px;
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease;
    opacity: 0;
    transform: translateY(20px);
}

.shop-hero-btn:hover,
.shop-hero-btn:focus {
    background-color: var(--color-bg-lightt);
    transform: translateY(-2px);
}

/* Animate content when .animate class is added */
.shop-hero.animate .shop-hero-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.shop-hero.animate .shop-hero-title {
    animation: fadeInDown 0.8s ease forwards;
    animation-delay: 0.3s;
}

.shop-hero.animate .shop-hero-subtitle {
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.6s;
}

.shop-hero.animate .shop-hero-btn {
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.9s;
}

/* Responsive Typography */
@media (min-width: 480px) {
    .shop-hero-title {
        font-size: 2.5rem;
    }

    .shop-hero-subtitle {
        font-size: 1.25rem;
    }
}

@media (min-width: 768px) {
    .shop-hero-title {
        font-size: 3rem;
    }

    .shop-hero-subtitle {
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .shop-hero-title {
        font-size: 3.5rem;
    }

    .shop-hero-subtitle {
        font-size: 1.75rem;
    }
}

/* Ensure focus outline for accessibility */
.shop-hero-btn:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .shop-hero-overlay {
        background-color: rgba(0, 0, 0, 0.6);
    }
}

/* shop-categories.css */
/* Categories section styling (English-only content) */

/* Section base */
.shop-categories {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
    background-color: var(--color-bg-light);
    color: var(--color-text);
}

/* Section title */
.shop-categories .section-title {
    font-size: var(--font-size-xl);
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-primary);
    opacity: 0;
    animation: fadeInDown 1s ease forwards;
}

.shop-categories.animate .section-title {
    opacity: 1;
}

/* Categories grid */
.categories-grid {
    display: grid;
    gap: var(--spacing-lg);
    /* Mobile: 1 column */
    grid-template-columns: 1fr;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Category card */
.category-card {
    background-color: var(--color-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease;
    opacity: 0;
    transform: translateY(20px);
}

.shop-categories.animate .category-card {
    animation: fadeInUp 0.8s ease forwards;
}

/* Staggered delays */
.shop-categories.animate .category-card:nth-child(1) {
    animation-delay: 0.3s;
}

.shop-categories.animate .category-card:nth-child(2) {
    animation-delay: 0.5s;
}

.shop-categories.animate .category-card:nth-child(3) {
    animation-delay: 0.7s;
}

.shop-categories.animate .category-card:nth-child(4) {
    animation-delay: 0.9s;
}

.shop-categories.animate .category-card:nth-child(5) {
    animation-delay: 1.1s;
}

.shop-categories.animate .category-card:nth-child(6) {
    animation-delay: 1.3s;
}

/* Extend nth-child rules if more cards */

/* Hover/focus effect */
.category-card:hover,
.category-card:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Image wrapper */
.category-image-wrapper {
    width: 100%;
    /* Optionally maintain a fixed aspect ratio, e.g., 16:9: */
    position: relative;
    padding-top: 56.25%;
    /* 16:9 aspect ratio */
    overflow: hidden;
}

.category-image-wrapper img.category-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-time) ease;
}

.category-card:hover .category-image,
.category-card:focus-within .category-image {
    transform: scale(1.05);
}

/* Card content */
.category-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-primary);
    margin: var(--spacing-md) var(--spacing-md) 0 var(--spacing-md);
}

.category-desc {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin: var(--spacing-sm) var(--spacing-md) var(--spacing-md) var(--spacing-md);
    flex-grow: 1;
}

/* Button */
.category-btn {
    display: inline-block;
    margin: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md);
    padding: 10px 20px;
    font-size: var(--font-size-base);
    border-radius: 6px;
    text-decoration: none;
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    align-self: start;
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease;
}

.category-btn:hover,
.category-btn:focus {
    background-color: var(--color-accent-light);
    transform: translateY(-2px);
}

/* Accessibility: focus outline */
.category-card:focus-within {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.category-btn:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Responsive adjustments if needed */
/* For narrower cards on small desktop: */
@media (max-width: 1024px) and (min-width: 768px) {
    /* Optionally adjust padding or font-size */
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .shop-categories {
        background-color: var(--bg-dark);
        color: var(--white);
    }

    .category-card {
        background-color: #1e1e1e;
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.05);
    }

    .category-title {
        color: var(--white);
    }

    .category-desc {
        color: var(--color-text);
    }

    .category-btn {
        background-color: var(--color-secondary);
        color: var(--color-text-inverse);
    }

    .category-btn:hover,
    .category-btn:focus {
        background-color: var(--color-accent-light);
    }
}

/* shop-featured.css */
/* Featured Products slider styling (English-only content) */

.shop-featured {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
    background-color: var(--color-bg-light);
    color: var(--color-text);
}

/* Section title */
.shop-featured .section-title {
    font-size: var(--font-size-xl);
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-primary);
    opacity: 0;
    animation: fadeInDown 1s ease forwards;
}

.shop-featured.animate .section-title {
    opacity: 1;
}

/* Swiper container adjustments */
.featured-swiper {
    position: relative;
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}

/* Product card (each slide) */
.product-card {
    background-color: var(--color-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* margin: 0 var(--spacing-sm); */
    /* Ensure slide content centered vertically if needed */
    /* No initial hidden state here; Swiper handles slide visibility */
}

/* Image wrapper: maintain aspect ratio */
.product-image-wrapper {
    width: 100%;
    position: relative;
    padding-top: 75%;
    /* e.g., 4:3 ratio; adjust as needed */
    overflow: hidden;
}

.product-image-wrapper img.product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-time) ease;
}

.product-card:hover .product-image,
.product-card:focus-within .product-image {
    transform: scale(1.05);
}

/* Product title */
.product-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-primary);
    margin: var(--spacing-md) var(--spacing-md) var(--spacing-sm) var(--spacing-md);
}

/* Product price */
.product-price {
    font-size: var(--font-size-base);
    color: var(--color-secondary);
    margin-bottom: var(--spacing-md);
}

/* View Details button */
.product-btn {
    margin-bottom: var(--spacing-md);
    padding: 10px 20px;
    font-size: var(--font-size-base);
    border-radius: 6px;
    text-decoration: none;
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease;
}

.product-btn:hover,
.product-btn:focus {
    background-color: var(--color-accent-light);
    transform: translateY(-2px);
}

/* Swiper navigation buttons styling overrides if needed */
.swiper-button-prev,
.swiper-button-next {
    color: var(--color-primary);
    /* Optionally adjust size or background */
}

.swiper-button-prev:hover,
.swiper-button-next:hover,
.swiper-button-prev:focus,
.swiper-button-next:focus {
    color: var(--color-secondary);
}

.shop-featured .swiper-pagination {
    bottom: -7px;
}

/* Responsive: control number of slides per view via Swiper config in JS */

/* Accessibility: focus outline */
.product-card:focus-within {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.product-btn:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .shop-featured {
        background-color: var(--bg-dark);
        color: var(--white);
    }

    .product-card {
        background-color: #1e1e1e;
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.05);
    }

    .product-title {
        color: var(--white);
    }

    .product-price {
        color: var(--color-secondary);
    }

    .product-btn {
        background-color: var(--color-secondary);
        color: var(--color-text-inverse);
    }

    .swiper-button-prev,
    .swiper-button-next {
        color: var(--white);
    }

    .swiper-pagination-bullet {
        background-color: var(--color-secondary);
    }

    .swiper-pagination-bullet-active {
        background-color: var(--color-primary);
    }
}

/* shop-cta.css */
/* Simple CTA section styling (English-only content) */

.shop-cta {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
    background-color: var(--color-bg-light);
    color: var(--color-text);
    text-align: center;
    position: relative;
}

.shop-cta .cta-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInDown 0.8s ease forwards;
}

.shop-cta.animate .cta-title {
    opacity: 1;
    transform: translateY(0);
}

.shop-cta .cta-text {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-muted);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.3s;
}

.shop-cta.animate .cta-text {
    opacity: 1;
    transform: translateY(0);
}

.shop-cta .cta-btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: var(--font-size-base);
    border-radius: 6px;
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.6s;
}

.shop-cta.animate .cta-btn {
    opacity: 1;
    transform: translateY(0);
}

.shop-cta .cta-btn:hover,
.shop-cta .cta-btn:focus {
    background-color: var(--color-accent-light);
    transform: translateY(-2px);
}

/* Focus outline for accessibility */
.shop-cta .cta-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: calc(var(--breakpoint-md) - 1px)) {
    .shop-cta .cta-title {
        font-size: 1.5rem;
    }

    .shop-cta .cta-text {
        font-size: var(--font-size-base);
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .shop-cta {
        background-color: var(--bg-dark);
        color: var(--white);
    }

    .shop-cta .cta-title {
        color: var(--white);
    }

    .shop-cta .cta-text {
        color: var(--color-text);
    }

    .shop-cta .cta-btn {
        background-color: var(--color-secondary);
        color: var(--color-text-inverse);
    }

    .shop-cta .cta-btn:hover,
    .shop-cta .cta-btn:focus {
        background-color: var(--color-accent-light);
    }
}

/* contacts-hero.css */
/* Hero/Intro section for Contacts page with English-only content */

/* Section base */
.contacts-hero {
    position: relative;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: var(--spacing-xxl);
    background-color: var(--color-bg-light);
    /* fallback if image fails */
    color: var(--color-text);
}

/* Background image */
.contacts-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/contact-hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Overlay for contrast */
.contacts-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* semi-transparent dark overlay */
    z-index: 2;
}

/* Content wrapper */
.contacts-hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
}

/* Title */
.contacts-hero-title {
    font-size: var(--font-size-xxl);
    margin-bottom: var(--spacing-md);
    color: var(--color-bg-light);
    opacity: 0;
    transform: translateY(20px);
}

/* Subtitle */
.contacts-hero-subtitle {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-lg);
    color: var(--color-bg-light);
    opacity: 0;
    transform: translateY(20px);
}

/* Button */
.contacts-hero-btn {
    display: inline-block;
    padding: 14px 28px;
    font-size: var(--font-size-base);
    border-radius: 6px;
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    text-decoration: none;
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease;
    opacity: 0;
    transform: translateY(20px);
}

.contacts-hero-btn:hover,
.contacts-hero-btn:focus {
    background-color: var(--color-accent-light);
    transform: translateY(-2px);
}

/* Animate content when .animate class is added */
.contacts-hero.animate .contacts-hero-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.contacts-hero.animate .contacts-hero-title {
    animation: fadeInDown 0.8s ease forwards;
    animation-delay: 0.3s;
}

.contacts-hero.animate .contacts-hero-subtitle {
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.6s;
}

.contacts-hero.animate .contacts-hero-btn {
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.9s;
}

/* Responsive Typography */
@media (min-width: 480px) {
    .contacts-hero-title {
        font-size: 2.5rem;
    }

    .contacts-hero-subtitle {
        font-size: 1.25rem;
    }
}

@media (min-width: 768px) {
    .contacts-hero-title {
        font-size: 3rem;
    }

    .contacts-hero-subtitle {
        font-size: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .contacts-hero-title {
        font-size: 3.5rem;
    }

    .contacts-hero-subtitle {
        font-size: 1.75rem;
    }
}

/* Ensure focus outline for accessibility */
.contacts-hero-btn:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .contacts-hero-overlay {
        background-color: rgba(0, 0, 0, 0.6);
    }

    .contacts-hero {
        background-color: var(--bg-dark);
        color: var(--white);
    }

    .contacts-hero-title {
        color: var(--white);
    }

    .contacts-hero-btn {
        background-color: var(--color-secondary);
        color: var(--color-text-inverse);
    }

    .contacts-hero-btn:hover,
    .contacts-hero-btn:focus {
        background-color: var(--color-accent-light);
    }
}

/* contacts-info.css */
/* Contact Details & Form section styling (English-only content) */

.contacts-info {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
    background-color: var(--color-bg-light);
    color: var(--color-text);
}

/* Grid layout: two columns on desktop, single column on mobile */
.contacts-info-grid {
    display: grid;
    gap: var(--spacing-lg);
    /* Mobile: single column */
    grid-template-columns: 1fr;
}

/* Desktop: two columns */
@media (min-width: 768px) {
    .contacts-info-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/* Section titles */
.contacts-info .section-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInDown 0.8s ease forwards;
}

/* When animate class added on section */
.contacts-info.animate .section-title {
    opacity: 1;
    transform: translateY(0);
}

/* Contact details styling */
.contact-details {
    /* optional padding-right on desktop */
}

.contact-address {
    font-style: normal;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

.contact-item {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
}

.contact-item strong {
    color: var(--color-primary);
}

.contact-link {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--transition-time) ease;
}

.contact-link:hover,
.contact-link:focus {
    color: var(--color-accent-light);
}

/* Map wrapper */
.contact-map-wrapper {
    margin-top: var(--spacing-md);
    width: 100%;
    height: auto;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact-map-wrapper iframe {
    width: 100%;
    height: 250px;
    border: 0;
}

/* Contact form styling */
.contact-form-wrapper {
    /* optional padding-left on desktop */
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Animate form wrapper when section in view */
.contacts-info.animate .contact-form {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

/* Visually hidden label */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Inputs and textarea */
.contact-input,
.contact-textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: var(--font-size-base);
    border: 1px solid #ccc;
    border-radius: 6px;
    transition: border-color var(--transition-time) ease, box-shadow var(--transition-time) ease;
    font-family: var(--font);
}

.contact-input:focus,
.contact-textarea:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 255, 87, 34), 0.2);
}

/* Checkbox group */
.contact-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.contact-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.contact-label {
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.contact-label a.contact-link {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--transition-time) ease;
}

.contact-label a.contact-link:hover,
.contact-label a.contact-link:focus {
    color: var(--color-accent-light);
}

/* Submit button */
.contact-submit-btn {
    align-self: start;
    padding: 12px 24px;
    font-size: var(--font-size-base);
    border-radius: 6px;
    background-color: var(--color-secondary);
    color: var(--color-text-inverse);
    text-decoration: none;
    border: 2px solid var(--color-secondary);
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease;
}

.contact-submit-btn:hover,
.contact-submit-btn:focus {
    background-color: var(--color-accent-light);
    transform: translateY(-2px);
}

/* Focus outline */
.contact-submit-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: calc(768px - 1px)) {
    .contact-map-wrapper iframe {
        height: 200px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .contacts-info {
        background-color: var(--bg-dark);
        color: var(--white);
    }

    .contacts-info .section-title {
        color: var(--white);
    }

    .contact-address,
    .contact-item,
    .contact-label {
        color: var(--color-text);
    }

    .contact-link {
        color: var(--color-secondary);
    }

    .contact-link:hover,
    .contact-link:focus {
        color: var(--color-accent-light);
    }

    .contact-input,
    .contact-textarea {
        background-color: #222;
        color: #fff;
        border: 1px solid #444;
    }

    .contact-input:focus,
    .contact-textarea:focus {
        border-color: var(--color-secondary);
        box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 255, 87, 34), 0.2);
    }

    .contact-submit-btn {
        background-color: var(--color-secondary);
        color: var(--color-text-inverse);
        border-color: var(--color-secondary);
    }

    .contact-submit-btn:hover,
    .contact-submit-btn:focus {
        background-color: var(--color-accent-light);
    }

    .contact-map-wrapper {
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.05);
    }
}

/* Animate children stagger if desired */
.contacts-info.animate .contact-details .section-title {
    /* title animates immediately */
}

.contacts-info.animate .contact-form-wrapper .section-title {
    animation-delay: 0.2s;
}

/* contacts-testimonials.css */
/* Testimonials slider styling (English-only content) */

.contacts-testimonials {
    padding-top: var(--spacing-xxl);
    padding-bottom: var(--spacing-xxl);
    background-color: var(--color-bg-light);
    color: var(--color-text);
}

/* Section title */
.contacts-testimonials .section-title {
    font-size: var(--font-size-xl);
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-primary);
    opacity: 0;
    animation: fadeInDown 1s ease forwards;
}

.contacts-testimonials.animate .section-title {
    opacity: 1;
}

/* Swiper container adjustments */
.contacts-testimonials .testimonials-swiper {
    position: relative;
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}

/* Testimonial card */
.contacts-testimonials .testimonial-card {
    background-color: var(--color-bg);
    border-radius: 8px;
    padding: var(--spacing-lg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Avatar */
.contacts-testimonials .testimonial-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.contacts-testimonials .testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Name */
.contacts-testimonials .testimonial-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

/* Role */
.contacts-testimonials .testimonial-role {
    font-size: var(--font-size-base);
    color: var(--color-secondary);
    margin-bottom: var(--spacing-md);
}

/* Text */
.contacts-testimonials .testimonial-text {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    line-height: 1.6;
    /* Italic style for quote */
    font-style: italic;
    opacity: 1;
}


/* Responsive: adjust slidesPerView in JS, but ensure card width auto */
.contacts-testimonials .testimonial-card {
    /* max-width to avoid overly wide cards on large screens */
    max-width: 400px;
}

/* Accessibility: focus outline on card if needed */
.contacts-testimonials .testimonial-card:focus-within {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .contacts-testimonials {
        background-color: var(--bg-dark);
        color: var(--white);
    }

    .contacts-testimonials .section-title {
        color: var(--white);
    }

    .contacts-testimonials .testimonial-card {
        background-color: #1e1e1e;
        box-shadow: 0 4px 8px rgba(255, 255, 255, 0.05);
    }

    .contacts-testimonials .testimonial-name {
        color: var(--white);
    }

    .contacts-testimonials .testimonial-role {
        color: var(--color-secondary);
    }

    .contacts-testimonials .testimonial-text {
        color: var(--color-text);
    }
}

/* thanks.css */
/* Styling for the Thank You page section */

/* Base for the thank-you section */
.thanks {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ensure it fills viewport minus header/footer heights if known */
    height: calc(100vh);
    padding: var(--spacing-xxl) var(--spacing-md);
    background-color: var(--color-bg-light);
    color: var(--color-text);
    text-align: center;
}

/* Dark mode override if using section-dark or prefers-color-scheme */
@media (prefers-color-scheme: dark) {
    .thanks {
        background-color: var(--bg-dark);
        color: var(--white);
    }
}

/* Content wrapper */
.thanks-content {
    max-width: 600px;
    width: 100%;
    /* Flex column to stack title and button */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    /* Animate opacity/slide if desired */
    opacity: 1;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* When animate class is added via JS or server-side, show content */
.thanks.animate .thanks-content {
    opacity: 1;
    transform: translateY(0);
}

/* Title styling */
.thanks-title {
    font-size: 2rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-primary);
    line-height: 1.3;
}

/* Responsive title size */
@media (min-width: 768px) {
    .thanks-title {
        font-size: 2.5rem;
    }
}

/* Button styling override if needed; relies on .btn and .btn-primary from common.css */
.thanks-btn {
    padding: 12px 24px;
    font-size: 1rem;
    border-radius: 6px;
    transition: background-color var(--transition-time) ease, transform var(--transition-time) ease;
}

.thanks-btn:hover,
.thanks-btn:focus {
    background-color: var(--color-accent-light);
    transform: translateY(-2px);
}

/* Focus outline for accessibility */
.thanks-btn:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* If you want a background illustration or pattern, you can add it via a pseudo-element */
/*
 
  */

/* Responsive padding adjustments */
@media (max-width: 480px) {
    .thanks {
        padding: var(--spacing-lg) var(--spacing-sm);
    }

    .thanks-title {
        font-size: 1.5rem;
    }
}

/* If you want to add an animation on load/scroll: 
     In js/scripts.js, add a small snippet to add the 'animate' class when .thanks is in view.
     (See next section.) */