/**
 * widgets.css - Stili Widget Manager
 * Template: epcstore
 * Version: 1.1.1
 *
 * Stili personalizzati per tutti i widget dinamici del CMS
 * Utilizza variabili CSS centralizzate da theme.default.css
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* ========================================
   WIDGET TYPOGRAPHY - Stili Centralizzati
   ======================================== */

/* Titolo widget - utilizza variabili CSS */
.widget-title {
    color: var(--heading-color, #1e2022);
    font-size: var(--widget-heading-size, 2.25rem);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--heading-line-height, 1.2);
    margin-bottom: var(--widget-spacing-md, 1.5rem);
}

/* Sottotitolo widget */
.widget-subtitle {
    color: var(--text-muted, #677788);
    font-size: var(--widget-subheading-size, 1.25rem);
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--body-line-height, 1.6);
    margin-bottom: var(--widget-spacing-sm, 1rem);
}

/* Contenuto widget - padding per migliore leggibilità */
.widget-content {
    color: var(--body-color, #1e2022);
    font-size: var(--widget-font-size, 1rem);
    line-height: var(--body-line-height, 1.6);
    padding-top: var(--widget-spacing-xs, 0.5rem);
}

.widget-content p {
    margin-bottom: var(--widget-spacing-sm, 1rem);
}

.widget-content p:last-child {
    margin-bottom: 0;
}

/* Responsive Typography */
@media (max-width: 768px) {
    .widget-title {
        font-size: var(--widget-heading-size-mobile, 1.75rem);
    }
    
    .widget-subtitle {
        font-size: var(--widget-subheading-size-mobile, 1.1rem);
    }
    
    .widget-content {
        font-size: var(--widget-font-size-mobile, 0.95rem);
    }
}

/* ========================================
   WIDGET SPACING - Margini sezioni
   ======================================== */

/* 
 * NOTA: Il padding delle sezioni è ora gestito con classi Bootstrap (py-4 py-lg-5) 
 * direttamente sui tag <section> dei widget per permettere background colorati seamless.
 * Non usare più margin-bottom sui widget container.
 */

/* ========================================
   LATEST ARTICLES/PROJECTS SWIPER WIDGET
   ======================================== */

/* Swiper center mode end - maschera che mostra solo 2 cards - rispetta larghezza layout */
.swiper-center-mode-end {
    overflow: hidden !important;
    margin-right: 0 !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
}

/* Container swiper articles/projects */
.js-swiper-card-grid,
.js-swiper-project-grid {
    overflow: visible !important;
    padding: 10px 0 !important;
}

/* Frecce statiche posizionate sotto le cards - IN RIGA ORIZZONTALE */
.swiper-static-button-next,
.swiper-static-button-prev {
    position: static !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    display: inline-flex !important;
    margin-top: 1rem !important;
}

.swiper-static-button-prev {
    margin-right: 0.5rem !important;
}

/* Frecce Articles/Projects Swiper - TRASPARENTI come Hero Swiper */
.js-swiper-card-grid .swiper-button-prev,
.js-swiper-card-grid .swiper-button-next,
.js-swiper-project-grid .swiper-button-prev,
.js-swiper-project-grid .swiper-button-next {
    width: 48px !important;
    height: 48px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.js-swiper-card-grid .swiper-button-prev:hover,
.js-swiper-card-grid .swiper-button-next:hover,
.js-swiper-project-grid .swiper-button-prev:hover,
.js-swiper-project-grid .swiper-button-next:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transform: scale(1.05) !important;
}

.js-swiper-card-grid .swiper-button-prev::after,
.js-swiper-card-grid .swiper-button-next::after,
.js-swiper-project-grid .swiper-button-prev::after,
.js-swiper-project-grid .swiper-button-next::after {
    font-size: 20px !important;
    font-weight: bold !important;
    color: #377dff !important;
}

.js-swiper-card-grid .swiper-button-prev.swiper-button-disabled,
.js-swiper-card-grid .swiper-button-next.swiper-button-disabled,
.js-swiper-project-grid .swiper-button-prev.swiper-button-disabled,
.js-swiper-project-grid .swiper-button-next.swiper-button-disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    transform: scale(1) !important;
}

/* Card dimensioni e hover effects */
.js-swiper-card-grid .card,
.js-swiper-project-grid .card {
    min-height: 320px !important;
    max-width: 400px !important;
    width: 100% !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.js-swiper-card-grid .card:hover,
.js-swiper-project-grid .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Mobile: frecce più piccole e cards full-width */
@media (max-width: 768px) {
    .js-swiper-card-grid .swiper-button-prev,
    .js-swiper-card-grid .swiper-button-next,
    .js-swiper-project-grid .swiper-button-prev,
    .js-swiper-project-grid .swiper-button-next {
        width: 40px !important;
        height: 40px !important;
    }
    
    .js-swiper-card-grid .card,
    .js-swiper-project-grid .card {
        min-height: 280px !important;
        max-width: 100% !important;
    }
}

/* ========================================
   HERO SWIPER WIDGET
   ======================================== */

/* 
 * Hero Swiper Container
 * NOTA: Nessun margin-bottom - lo spacing è gestito dal padding della section successiva
 */

/* Reset margin-bottom che potrebbe essere ereditato da altri CSS (es. Unify theme) */
.js-swiper-hero {
    margin-bottom: 0 !important;
}

/* Vertical centering utility */
.min-vh-75 {
    min-height: 75vh;
}

@media (max-width: 767px) {
    .min-vh-75 {
        min-height: 60vh;
    }
}

/* Fix background image centrata e cover */
.js-swiper-hero .swiper-slide {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 550px;
}

@media (min-width: 768px) {
    .js-swiper-hero .swiper-slide {
        min-height: 650px;
    }
}

/* Overlay scuro per migliore leggibilità testo */
.js-swiper-hero .swiper-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 0;
}

.js-swiper-hero .swiper-slide .container {
    position: relative;
    z-index: 1;
}

/* Hero text container - Responsive width and padding */
.js-swiper-hero .swiper-slide h1 {
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.2;
}

.js-swiper-hero .swiper-slide .lead {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.6;
}

@media (max-width: 767px) {
    .js-swiper-hero .swiper-slide .col-12 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .js-swiper-hero .swiper-slide .col-12 {
        max-width: 90%;
    }
}

/* Frecce Hero Swiper - Stile Professionale */
.swiper-hero-button-prev,
.swiper-hero-button-next {
    width: 56px !important;
    height: 56px !important;
    background: rgba(255, 255, 255, 0.7) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.swiper-hero-button-prev:hover,
.swiper-hero-button-next:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25) !important;
    transform: scale(1.1) !important;
}

.swiper-hero-button-prev::after,
.swiper-hero-button-next::after {
    font-size: var(--widget-heading-size, 24px) !important;
    font-weight: var(--font-weight-bold, bold) !important;
    color: #377dff !important;
}

.swiper-hero-button-prev.swiper-button-disabled,
.swiper-hero-button-next.swiper-button-disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

/* Remove hover underline from lead text */
.js-swiper-hero .swiper-slide .lead:hover,
.js-swiper-hero .swiper-slide .text-white-70:hover {
    text-decoration: none !important;
}

/* Hero swiper button transparency */
.js-swiper-hero .swiper-slide .btn-light {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease !important;
}

.js-swiper-hero .swiper-slide .btn-light:hover {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.95) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Thumbs navigation style */
.swiper-step-pagination .swiper-slide {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.swiper-step-pagination .swiper-slide-thumb-active {
    opacity: 1;
}

.swiper-step-pagination-title {
    font-weight: var(--widget-font-weight, 500);
    color: var(--search-widget-contrast, #fff);
    font-size: var(--widget-font-size, 0.875rem);
}

/* ========================================
   LATEST ARTICLES SWIPER WIDGET
   ======================================== */

/* Container swiper articles */
.js-swiper-card-grid {
    overflow: visible !important;
    padding: 10px 0 !important;
}

/* Frecce Articles Swiper - Stile Professionale */
.js-swiper-card-grid .swiper-button-prev,
.js-swiper-card-grid .swiper-button-next {
    width: 48px !important;
    height: 48px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    top: 50% !important;
}

.js-swiper-card-grid .swiper-button-prev {
    left: -24px !important;
}

.js-swiper-card-grid .swiper-button-next {
    right: -24px !important;
}

.js-swiper-card-grid .swiper-button-prev:hover,
.js-swiper-card-grid .swiper-button-next:hover {
    background: #fff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    transform: scale(1.15) !important;
}

.js-swiper-card-grid .swiper-button-prev::after,
.js-swiper-card-grid .swiper-button-next::after {
    font-size: var(--widget-subheading-size, 20px) !important;
    font-weight: var(--font-weight-bold, bold) !important;
    color: #377dff !important;
}

.js-swiper-card-grid .swiper-button-prev.swiper-button-disabled,
.js-swiper-card-grid .swiper-button-next.swiper-button-disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    transform: scale(1) !important;
}

/* Card hover effect */
.js-swiper-card-grid .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.js-swiper-card-grid .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

/* Mobile: nascondi frecce se troppo vicine */
@media (max-width: 768px) {
    .swiper-hero-button-prev,
    .swiper-hero-button-next {
        width: 44px !important;
        height: 44px !important;
    }
    
    .js-swiper-card-grid .swiper-button-prev,
    .js-swiper-card-grid .swiper-button-next {
        width: 40px !important;
        height: 40px !important;
    }
    
    .js-swiper-card-grid .swiper-button-prev {
        left: 5px !important;
    }
    
    .js-swiper-card-grid .swiper-button-next {
        right: 5px !important;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .js-swiper-card-grid .swiper-button-prev {
        left: -16px !important;
    }
    
    .js-swiper-card-grid .swiper-button-next {
        right: -16px !important;
    }
}

/* ========================================
   WIDGET LAYOUT HELPERS
   ======================================== */

/* Ensure images fit properly in cards */
.widget-img-container {
    overflow: hidden;
    border-radius: 0.5rem;
}

.widget-img-container img {
    transition: transform 0.3s ease;
}

.widget-img-container:hover img {
    transform: scale(1.05);
}

/* Text truncation helpers */
.widget-text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.widget-text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/**
 * ============================================
 * WIDGET ANIMATIONS - CSS (Shared)
 * Animation keyframes for page widgets
 * Used by: front/widgets/layout/*.php
 * ============================================
 */

/* Widget Animation Classes */
.widget-animate {
    opacity: 0;
}

.widget-animate.animate-fade {
    animation: widget-fade 1000ms ease-out forwards;
}

.widget-animate.animate-slide-up {
    animation: widget-slide-up 1000ms ease-out forwards;
}

.widget-animate.animate-slide-down {
    animation: widget-slide-down 1000ms ease-out forwards;
}

.widget-animate.animate-slide-left {
    animation: widget-slide-left 1000ms ease-out forwards;
}

.widget-animate.animate-slide-right {
    animation: widget-slide-right 1000ms ease-out forwards;
}

.widget-animate.animate-zoom {
    animation: widget-zoom 1000ms ease-out forwards;
}

.widget-animate.animate-bounce {
    animation: widget-bounce 1000ms ease-out forwards;
}

/* Animation Keyframes */
@keyframes widget-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes widget-slide-up {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes widget-slide-down {
    from { 
        opacity: 0; 
        transform: translateY(-30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes widget-slide-left {
    from { 
        opacity: 0; 
        transform: translateX(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

@keyframes widget-slide-right {
    from { 
        opacity: 0; 
        transform: translateX(-30px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

@keyframes widget-zoom {
    from { 
        opacity: 0; 
        transform: scale(0.9); 
    }
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}

@keyframes widget-bounce {
    0% { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    60% { 
        opacity: 1; 
        transform: translateY(-10px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Animation Delay Utilities */
.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-400 { animation-delay: 400ms; }
.animate-delay-500 { animation-delay: 500ms; }
.animate-delay-600 { animation-delay: 600ms; }
.animate-delay-700 { animation-delay: 700ms; }
.animate-delay-800 { animation-delay: 800ms; }
.animate-delay-900 { animation-delay: 900ms; }
.animate-delay-1000 { animation-delay: 1000ms; }

/* Animation Duration Utilities */
.animate-duration-fast { animation-duration: 500ms; }
.animate-duration-normal { animation-duration: 1000ms; }
.animate-duration-slow { animation-duration: 1500ms; }
.animate-duration-slower { animation-duration: 2000ms; }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .widget-animate {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
/**
 * ═══════════════════════════════════════════════════════════════════════════
 * WIDGET MAGAZINE MODERN STYLES
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * Typography: Outfit (titles) + Inter (body)
 * Style: Modern, clean, high-impact
 * 
 * Used by:
 * - text_over_image.php (widget layout)
 * - hero_swiper.php (widget content)
 * 
 * @version 1.0.0
 * @date 2025-12-17
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* Google Fonts Import moved to the top of this file (CSS @import must precede all rules) */


/* ═══════════════════════════════════════════════════════════════════════════
   HERO SWIPER - MAGAZINE MODERN
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero Swiper Magazine Variables */
.js-swiper-hero {
    --hero-font-title: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --hero-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --hero-shadow-text: 0 2px 8px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.2);
    --hero-shadow-text-subtle: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Hero Slide Background with Gradient Overlay */
.js-swiper-hero .swiper-slide {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 70vh;
}

.js-swiper-hero .swiper-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.3) 40%,
        rgba(0, 0, 0, 0.1) 70%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Hero Content Container */
.js-swiper-hero .hero-content-wrapper {
    position: relative;
    z-index: 2;
}

/* Category Badge - Magazine Style */
.js-swiper-hero .hero-badge {
    font-family: var(--hero-font-body);
    display: inline-block;
    padding: 0.35rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 50px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Title - Outfit, Modern Style */
.js-swiper-hero .hero-title {
    font-family: var(--hero-font-title);
    color: #ffffff;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    text-shadow: var(--hero-shadow-text);
    max-width: 900px;
}

/* Subtitle - Inter, Clean & Modern */
.js-swiper-hero .hero-subtitle {
    font-family: var(--hero-font-body);
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.01em;
    margin-bottom: 0;
    text-shadow: var(--hero-shadow-text-subtle);
    max-width: 700px;
}

/* CTA Button - Magazine Modern */
.js-swiper-hero .hero-btn {
    font-family: var(--hero-font-body);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 2rem;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a2e;
    text-decoration: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-swiper-hero .hero-btn:hover {
    background: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    color: #1a1a2e;
}

.js-swiper-hero .hero-btn::after {
    content: '→';
    transition: transform 0.3s ease;
}

.js-swiper-hero .hero-btn:hover::after {
    transform: translateX(4px);
}

/* Swiper Navigation - Premium Style */
.js-swiper-hero .swiper-button-prev,
.js-swiper-hero .swiper-button-next {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.js-swiper-hero .swiper-button-prev:hover,
.js-swiper-hero .swiper-button-next:hover {
    background: rgba(255, 255, 255, 0.3);
}

.js-swiper-hero .swiper-button-prev::after,
.js-swiper-hero .swiper-button-next::after {
    font-size: 18px;
    color: #fff;
    font-weight: bold;
}

/* Pagination Bullets - Premium */
.js-swiper-hero .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4);
    opacity: 1;
    transition: all 0.3s ease;
}

.js-swiper-hero .swiper-pagination-bullet-active {
    background: #fff;
    width: 36px;
    border-radius: 6px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   TEXT OVER IMAGE - MAGAZINE MODERN
   ═══════════════════════════════════════════════════════════════════════════ */

/* Text Over Image Variables (set per-widget via inline style) */
.widget-text-over-image {
    --toi-font-title: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --toi-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --toi-shadow-text: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
    --toi-shadow-text-subtle: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Card Container */
.widget-text-over-image .toi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: var(--toi-height-mobile, 20rem);
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: #1a1a2e;
    text-decoration: none !important;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.widget-text-over-image .toi-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

/* Background Image */
.widget-text-over-image .toi-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.widget-text-over-image .toi-card:hover .toi-card-bg {
    transform: scale(1.08);
}

/* Overlay with Gradient Enhancement */
.widget-text-over-image .toi-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to top,
        var(--toi-overlay, rgba(0,0,0,0.5)) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        transparent 100%
    );
    z-index: 1;
}

/* Content Container */
.widget-text-over-image .toi-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: var(--toi-height-mobile, 20rem);
    padding: 2rem;
    flex-grow: 1;
}

/* Remove underline from all text inside link */
.widget-text-over-image .toi-card,
.widget-text-over-image .toi-card *,
.widget-text-over-image .toi-card:hover,
.widget-text-over-image .toi-card:hover * {
    text-decoration: none !important;
}

/* Title - Outfit, Modern Style */
.widget-text-over-image .toi-title {
    font-family: var(--toi-font-title);
    color: #ffffff;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
    text-shadow: var(--toi-shadow-text);
}

/* Subtitle - Inter, Clean & Modern */
.widget-text-over-image .toi-subtitle {
    font-family: var(--toi-font-body);
    color: rgba(255, 255, 255, 0.95);
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.01em;
    margin-bottom: 0.5rem;
    text-shadow: var(--toi-shadow-text-subtle);
    text-transform: uppercase;
    opacity: 0.9;
}

/* Body Text */
.widget-text-over-image .toi-text {
    font-family: var(--toi-font-body);
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(0.9rem, 1.5vw, 1.05rem);
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 0;
    text-shadow: var(--toi-shadow-text-subtle);
}

/* CTA Button - Refined */
.widget-text-over-image .toi-btn {
    font-family: var(--toi-font-body);
    margin-top: 1.25rem;
    padding: 0.75rem 1.75rem;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.widget-text-over-image .toi-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero Swiper Responsive */
@media (max-width: 768px) {
    .js-swiper-hero .swiper-slide {
        min-height: 60vh;
    }
    
    .js-swiper-hero .hero-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }
    
    .js-swiper-hero .hero-subtitle {
        font-size: 1rem;
    }
    
    .js-swiper-hero .hero-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .js-swiper-hero .swiper-slide {
        min-height: 50vh;
    }
    
    .js-swiper-hero .hero-title {
        font-size: 1.5rem;
        line-height: 1.25;
    }
}

/* Text Over Image Responsive */
@media (min-width: 992px) {
    .widget-text-over-image .toi-card { 
        min-height: var(--toi-height-desktop, 25rem); 
    }
    .widget-text-over-image .toi-content { 
        min-height: var(--toi-height-desktop, 25rem); 
        padding: 3.5rem; 
    }
    .widget-text-over-image .toi-title { 
        font-size: clamp(2rem, 3.5vw, 3rem); 
    }
}

@media (max-width: 576px) {
    .widget-text-over-image .toi-content { 
        padding: 1.5rem; 
    }
    .widget-text-over-image .toi-title { 
        font-size: 1.5rem; 
    }
    .widget-text-over-image .toi-subtitle { 
        font-size: 0.9rem; 
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   WIDGET ANIMATIONS (shared keyframes)
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes toi-fade { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

@keyframes toi-slide-up { 
    from { opacity: 0; transform: translateY(30px); } 
    to { opacity: 1; transform: translateY(0); } 
}

@keyframes toi-slide-down { 
    from { opacity: 0; transform: translateY(-30px); } 
    to { opacity: 1; transform: translateY(0); } 
}

@keyframes toi-zoom { 
    from { opacity: 0; transform: scale(0.9); } 
    to { opacity: 1; transform: scale(1); } 
}
/**
 * 🔍 SEARCH WIDGET - Navbar Integration
 * Design elegante con espansione animata
 */

/* ========================================
   SEARCH ICON BUTTON
   ======================================== */
.search-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--search-widget-color, var(--primary-color));
    color: var(--search-widget-color, var(--primary-color));
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--search-icon-size, 18px);
}

.search-icon-btn:hover {
    background: var(--search-widget-color, var(--primary-color));
    color: var(--search-widget-contrast, white);
    transform: scale(1.05);
    box-shadow: 0 4px 12px var(--search-widget-shadow, rgba(0, 0, 0, 0.15));
}

.search-icon-btn:active {
    transform: scale(0.95);
}

/* ========================================
   SEARCH CONTAINER (Expandable)
   ======================================== */
.navbar-search-container {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
}

/* Desktop: Espansione inline */
@media (min-width: 992px) {
    .navbar-search-container {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ========================================
   SEARCH INPUT (Expandable Inline)
   ======================================== */
.navbar-search-input {
    position: absolute;
    right: 50px;
    width: 0;
    height: 40px;
    padding: 0;
    border: 2px solid var(--search-widget-color, var(--primary-color));
    border-radius: 20px;
    background: var(--search-input-bg, white);
    font-size: var(--search-input-font-size, 15px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.navbar-search-input.expanded {
    width: 280px;
    padding: 8px 45px 8px 20px;
    opacity: 1;
    pointer-events: all;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.navbar-search-input:focus {
    outline: none;
    border-color: var(--search-widget-color, var(--primary-color));
    box-shadow: 0 4px 20px rgba(230, 103, 42, 0.25);
}

.navbar-search-input::placeholder {
    color: var(--search-placeholder-color, #999);
    font-size: var(--search-font-size-14px, 14px);
}

/* ========================================
   SEARCH BUTTON (Inside Input)
   ======================================== */
.navbar-search-submit {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--search-widget-color, var(--primary-color));
    border: none;
    color: var(--search-widget-contrast, white);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--search-font-size-14px, 14px);
}

.navbar-search-input.expanded ~ .navbar-search-submit {
    opacity: 1;
    pointer-events: all;
}

.navbar-search-submit:hover {
    background: var(--search-widget-color-dark, #d55a22);
    transform: translateY(-50%) scale(1.1);
}

.navbar-search-submit:active {
    transform: translateY(-50%) scale(0.95);
}

/* ========================================
   AUTOCOMPLETE DROPDOWN
   ======================================== */
.search-autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 50px;
    width: 280px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--search-input-bg, white);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1050;
}

.search-autocomplete-dropdown.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.search-autocomplete-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s ease;
    text-decoration: none;
    color: var(--widget-text-color, #333);
}

.search-autocomplete-item:last-child {
    border-bottom: none;
}

.search-autocomplete-item:hover {
    background: var(--search-bg-hover, #f8f9fa);
}

.search-autocomplete-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 12px;
    flex-shrink: 0;
}

.search-autocomplete-content {
    flex: 1;
    min-width: 0;
}

.search-autocomplete-title {
    font-size: var(--search-font-size-14px, 14px);
    font-weight: var(--search-font-weight-600, 600);
    color: var(--widget-text-color, #333);
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-autocomplete-type {
    font-size: var(--search-font-size-12px, 12px);
    color: var(--search-widget-color, var(--primary-color));
    font-weight: var(--search-font-weight-500, 500);
}

.search-autocomplete-footer {
    padding: 12px 16px;
    text-align: center;
    border-top: 2px solid #f0f0f0;
    background: var(--search-bg-hover, #f8f9fa);
    border-radius: 0 0 12px 12px;
}

.search-autocomplete-footer a {
    color: var(--search-widget-color, var(--primary-color));
    text-decoration: none;
    font-weight: var(--search-font-weight-600, 600);
    font-size: var(--search-font-size-13px, 13px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s ease;
}

.search-autocomplete-footer a:hover {
    opacity: 0.8;
}

.search-no-results {
    padding: 24px 16px;
    text-align: center;
    color: var(--search-placeholder-color, #999);
    font-size: var(--search-font-size-14px, 14px);
}

/* Loading State */
.search-autocomplete-loading {
    padding: 24px 16px;
    text-align: center;
    color: var(--search-placeholder-color, #999);
    font-size: var(--search-font-size-14px, 14px);
}

.search-loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(230, 103, 42, 0.2);
    border-top-color: var(--search-widget-color, var(--primary-color));
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   RESPONSIVE MOBILE
   ======================================== */
@media (max-width: 991px) {
    .navbar-search-container {
        order: 1;
        margin-left: 0;
        margin-right: auto;
        margin-top: 1rem;
        width: 100%;
    }

    .navbar-search-input.expanded {
        width: calc(100% - 50px);
        right: 0;
        position: relative;
    }

    .search-autocomplete-dropdown {
        right: 0;
        width: 100%;
    }
    
    .search-icon-btn {
        margin-left: auto;
    }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */
@media (prefers-color-scheme: dark) {
    [data-theme="dark"] .navbar-search-input {
        background: #2d2d2d;
        color: #fff;
        border-color: var(--search-widget-color, var(--primary-color));
    }

    [data-theme="dark"] .search-autocomplete-dropdown {
        background: #2d2d2d;
        border: 1px solid #444;
    }

    [data-theme="dark"] .search-autocomplete-item {
        color: #fff;
        border-bottom-color: #444;
    }

    [data-theme="dark"] .search-autocomplete-item:hover {
        background: #3d3d3d;
    }

    [data-theme="dark"] .search-autocomplete-title {
        color: #fff;
    }

    [data-theme="dark"] .search-autocomplete-footer {
        background: #252525;
        border-top-color: #444;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
.search-icon-btn:focus,
.navbar-search-input:focus,
.navbar-search-submit:focus {
    outline: 2px solid var(--search-widget-color, var(--primary-color));
    outline-offset: 2px;
}

.search-autocomplete-item:focus {
    background: var(--search-bg-footer, #f0f0f0);
    outline: 2px solid var(--search-widget-color, var(--primary-color));
    outline-offset: -2px;
}
/* =========================================
   5. EXTRACTED HERO PRO STYLES
   ========================================= */

/* Hero Section PRO Styles */
.hero-section-pro {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  min-height: var(--hero-height-desktop, 100vh);
  display: flex;
  overflow: hidden;
}

/* Background Media - Common */
.hero-section-pro .hero-image-bg,
.hero-section-pro .hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-section-pro .hero-video-bg video,
.hero-section-pro .hero-youtube-bg iframe,
.hero-section-pro .hero-vimeo-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.hero-section-pro .hero-youtube-bg,
.hero-section-pro .hero-vimeo-bg {
  pointer-events: none;
  overflow: hidden;
}

/* Overlay */
.hero-section-pro .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Content Wrapper - Flexbox positioning */
.hero-section-pro .hero-content-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: var(--hero-height-desktop, 100vh);
  padding: 2rem;
  box-sizing: border-box;
}

.hero-section-pro .hero-content {
  max-width: 900px;
  color: #fff;
}

.hero-section-pro .hero-subtitle {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bs-warning, #f6a711);
}

.hero-section-pro .hero-title {
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.hero-section-pro .hero-description {
  line-height: 1.6;
  text-shadow: 0 1px 5px rgba(0,0,0,0.2);
}

/* Scroll Indicator */
.hero-section-pro .hero-scroll-indicator {
  z-index: 3;
  animation: bounce 2s infinite;
}

.hero-section-pro .scroll-mouse {
  width: 24px;
  height: 36px;
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 12px;
  position: relative;
}

.hero-section-pro .scroll-wheel {
  width: 4px;
  height: 8px;
  background: rgba(255,255,255,0.7);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll 2s infinite;
}

/* Animations */
.animate-on-scroll {
  opacity: 0;
}
.animate-on-scroll.animated {
  opacity: 1;
}
.animate-on-scroll[data-animation="fade"].animated {
  animation: heroFadeIn var(--anim-duration, 1s) ease-out forwards;
}
.animate-on-scroll[data-animation="slide-up"].animated {
  animation: heroSlideUp var(--anim-duration, 1s) ease-out forwards;
}
.animate-on-scroll[data-animation="slide-down"].animated {
  animation: heroSlideDown var(--anim-duration, 1s) ease-out forwards;
}
.animate-on-scroll[data-animation="slide-left"].animated {
  animation: heroSlideLeft var(--anim-duration, 1s) ease-out forwards;
}
.animate-on-scroll[data-animation="slide-right"].animated {
  animation: heroSlideRight var(--anim-duration, 1s) ease-out forwards;
}
.animate-on-scroll[data-animation="zoom"].animated {
  animation: heroZoom var(--anim-duration, 1s) ease-out forwards;
}
.animate-on-scroll[data-animation="bounce"].animated {
  animation: heroBounce var(--anim-duration, 1s) ease-out forwards;
}

@keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroSlideUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroSlideDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroSlideLeft { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }
@keyframes heroSlideRight { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } }
@keyframes heroZoom { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes heroBounce { 
  0% { opacity: 0; transform: translateY(-30px); }
  50% { transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}

@keyframes scroll {
  0% { opacity: 0; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(8px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(16px); }
}

/* Parallax */
.parallax-hero .hero-image-bg,
.parallax-hero .hero-video-bg {
  will-change: transform;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-section-pro {
    min-height: var(--hero-height-mobile, 100vh);
  }
  
  .hero-section-pro .hero-content-wrapper {
    min-height: var(--hero-height-mobile, 100vh);
    padding: 1.5rem;
  }

  .hero-section-pro .hero-title {
    font-size: 2.5rem;
  }

  .hero-section-pro .hero-description {
    font-size: 1.1rem;
  }

  .hero-section-pro .hero-scroll-indicator {
    display: none;
  }
  
  .hero-section-pro .hero-cta-buttons {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 576px) {
  .hero-section-pro .hero-title {
    font-size: 2rem;
  }

  .hero-section-pro .hero-subtitle {
    font-size: 1.1rem;
  }
}

/* =========================================
   Widget Text Over Image Styles
   ========================================= */
.widget-text-over-image {
    --toi-height-desktop: 25rem;
    --toi-height-mobile: 20rem;
    --toi-overlay: rgba(0,0,0,0.5);
    --toi-font-title: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --toi-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --toi-shadow-text: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
    --toi-shadow-text-subtle: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.widget-text-over-image .toi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: var(--toi-height-mobile, 20rem);
    border-radius: 0.75rem;
    overflow: hidden;
    background-color: #1a1a2e;
    text-decoration: none !important;
    color: inherit;
}

.widget-text-over-image .toi-card-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
}

.widget-text-over-image .toi-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, var(--toi-overlay) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    z-index: 1;
}

.widget-text-over-image .toi-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: var(--toi-height-mobile, 20rem);
    padding: 2rem;
    flex-grow: 1;
}

.widget-text-over-image .toi-title {
    font-family: var(--toi-font-title);
    color: #fff;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-shadow: var(--toi-shadow-text);
}

.widget-text-over-image .toi-subtitle {
    font-family: var(--toi-font-body);
    color: rgba(255,255,255,0.95);
    font-size: clamp(1rem, 2vw, 1.25rem);
    text-shadow: var(--toi-shadow-text-subtle);
}

.widget-text-over-image .toi-text {
    font-family: var(--toi-font-body);
    color: rgba(255,255,255,0.85);
    text-shadow: var(--toi-shadow-text-subtle);
}

.widget-text-over-image .toi-animate {
    opacity: 0;
}

.widget-text-over-image .toi-animate.animated {
    opacity: 1;
}

/* Animations */
@keyframes toi-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes toi-slide-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toi-slide-down { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toi-zoom { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

@media (min-width: 992px) {
    .widget-text-over-image .toi-card { min-height: var(--toi-height-desktop, 25rem); }
    .widget-text-over-image .toi-content { min-height: var(--toi-height-desktop, 25rem); padding: 3rem; }
}