/* templates/components/blog_cta.html */

.blog-cta-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}

.blog-cta-container a:hover {
    text-decoration: none;
}


/* ===== contact_cta.html ===== */

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
}

.contact-cta .card {
    cursor: pointer;
}


/* ===== google_reviews.html ===== */

.google-reviews-widget {
        background: linear-gradient(180deg, var(--brand-surface, #e2e8f0) 0%, #ffffff 100%);
        padding: 1.5rem 0 !important;
    }

    #reviews-container.row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-behavior: smooth !important;
        gap: 1rem !important;
        padding: 0.5rem 0 !important;
        -ms-overflow-style: none;
        scrollbar-width: thin;
        scrollbar-color: var(--brand-primary, #800020) #f0f0f0;
    }

    #reviews-container.row::-webkit-scrollbar {
        height: 6px;
    }

    #reviews-container.row::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 10px;
    }

    #reviews-container.row::-webkit-scrollbar-thumb {
        background: var(--brand-primary, #800020);
        border-radius: 10px;
    }

    #reviews-container>div[class*="col"] {
        flex: 0 0 auto !important;
        width: 280px !important;
        max-width: 280px !important;
    }

    .review-card {
        background: white;
        border-radius: 12px;
        padding: 1.25rem;
        height: 280px;
        box-shadow: 0 2px 10px rgba(11, 17, 32, 0.08);
        transition: transform 0.2s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow 0.2s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
        border: 1px solid var(--brand-surface, #e2e8f0);
        border-top: 3px solid var(--brand-primary, #800020);
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }

    .review-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 18px rgba(11, 17, 32, 0.12);
    }

    .review-author {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .review-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--brand-primary, #800020);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .review-author-info h5 {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--brand-ink, #1e293b);
    }

    .review-date {
        font-size: 0.75rem;
        color: var(--brand-muted, #5c6570);
    }

    .review-rating {
        color: #ffc107;
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .review-text {
        color: var(--brand-ink, #1e293b);
        line-height: 1.6;
        font-size: 0.875rem;
        flex-grow: 1;
        margin-bottom: 0;
        /* Truncar con elipsis en vez de scroll anidado dentro de un
           carrusel de scroll horizontal (critique 2026-07-16, P2): el
           usuario ya tiene "Ver todas las reseñas en Google" para el
           texto completo. */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        overflow: hidden;
    }

    /* Botones de navegación */
    .scroll-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: var(--brand-primary, #800020);
        color: white;
        border: none;
        border-radius: 50%;
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: background 0.2s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform 0.2s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
        box-shadow: 0 2px 8px rgba(11, 17, 32, 0.15);
    }

    .scroll-btn:hover {
        background: var(--brand-secondary, #ff6b35);
        transform: translateY(-50%) scale(1.05);
    }

    .scroll-btn-left {
        left: -16px;
    }

    .scroll-btn-right {
        right: -16px;
    }

    @media (max-width: 768px) {
        .scroll-btn {
            width: 36px;
            height: 36px;
            font-size: 0.9rem;
        }

        .scroll-btn-left {
            left: 4px;
        }

        .scroll-btn-right {
            right: 4px;
        }

        #reviews-container>div[class*="col"] {
            width: 260px !important;
            max-width: 260px !important;
        }

        .review-card {
            /* padding-inline-end extra para que el texto nunca renderice bajo
               .scroll-btn-right (right: 4px en este breakpoint) -- antes
               el botón cortaba visualmente el texto de la última reseña
               visible (critique 2026-07-16, P2). */
            padding: 1.25rem 2.5rem 1.25rem 1.25rem;
            height: 260px;
        }

        .google-reviews-widget {
            padding: 1rem 0 !important;
        }

        .rating-summary-compact {
            gap: 1rem !important;
            padding: 0.5rem 1rem !important;
        }

        #average-rating {
            font-size: 2rem !important;
        }

        .review-author-info h5 {
            font-size: 0.85rem !important;
        }

        .review-text {
            font-size: 0.8rem !important;
        }
    }

/* === Utility classes to replace inline styles across site === */

/* Barra de acento superior en degradado (misma formula que
   .home-hero__service-bar) para cards de contenido fuera del home --
   reutilizable en vez de repetir shadow-sm/border-0 sin diferenciar. */
.card-accent-top {
    position: relative;
    overflow: hidden;
}
.card-accent-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-primary, #800020) 0%, var(--brand-primary, #800020) 55%, var(--brand-secondary, #ff6b35) 100%);
}

/* Variante dorada para diferenciar tarjetas de precio dentro del mismo
   grupo (ej. Particulares vs Colectivas) sin volver a bordes Bootstrap
   genéricos de color plano. */
.card-accent-top--gold::before {
    background: linear-gradient(90deg, #FFD700 0%, var(--brand-secondary, #ff6b35) 100%);
}

.text-brand-primary { color: var(--brand-primary, #800020); }
.text-brand-secondary { color: var(--brand-secondary, #ff6b35); }
.text-gold { color: #FFD700; }
.text-whatsapp { color: #25D366; }
.text-sky { color: #4FC3F7; }
.text-white-95 { color: rgba(255, 255, 255, 0.95); }
.text-gold-dark { color: #333; }

.bg-brand-secondary { background-color: var(--brand-secondary, #ff6b35); }
.bg-whatsapp { background-color: #25D366; }

.btn-brand-solid {
    background-color: var(--brand-primary, #800020);
    color: #fff;
    border-color: var(--brand-primary, #800020);
}

.btn-brand-solid:hover {
    background-color: color-mix(in srgb, var(--brand-primary, #800020) 85%, black);
    border-color: color-mix(in srgb, var(--brand-primary, #800020) 85%, black);
    color: #fff;
}

.btn-whatsapp-solid {
    background-color: #25D366;
    color: #fff;
    border-color: #25D366;
}

.btn-whatsapp-solid:hover {
    background-color: #1fb855;
    border-color: #1fb855;
    color: #fff;
}

.icon-box {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.icon-xl {
    font-size: 3rem;
    color: var(--brand-secondary, #ff6b35);
}

.icon-lg {
    font-size: 2.5rem;
    color: var(--brand-secondary, #ff6b35);
}

.icon-md {
    font-size: 1.5rem;
}

.photo-frame {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.photo-frame--sm {
    border-radius: 12px;
}

.photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.photo-frame:hover img {
    transform: scale(1.04);
}

.photo-caption-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    color: #fff;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
}

.photo-caption-overlay--brand {
    background: linear-gradient(0deg, rgba(128, 0, 32, 0.9) 0%, transparent 100%);
}

.photo-caption-overlay--orange {
    background: linear-gradient(0deg, rgba(255, 107, 53, 0.9) 0%, transparent 100%);
}

.photo-caption-overlay--green {
    background: linear-gradient(0deg, rgba(37, 211, 102, 0.9) 0%, transparent 100%);
}

.section-heading {
    color: var(--brand-primary, #800020);
}

.lead-lg {
    font-size: 1.5rem;
}

.banner-sticky {
    position: sticky;
    top: 76px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.progress-thin {
    height: 5px;
}

.check-icon-md {
    font-size: 1.5rem;
}

.info-icon-lg {
    font-size: 2rem;
}

/* Icons */
.icon-15x { font-size: 1.5rem; }
.icon-2x { font-size: 2rem; }
.icon-3x { font-size: 3rem; }
.icon-4x { font-size: 4rem; }

/* Images */
.img-cover { object-fit: cover; }
.object-position-center { object-position: center; }
.object-fit-contain { object-fit: contain; }
.img-fixed-200 { height: 200px; }
.img-fixed-350 { height: 350px; }
.img-fixed-280 { height: 280px; }
.img-fixed-167 { height: 167px; }
.img-fixed-400 { height: 400px; }
.img-max-h-500 { max-height: 500px; }

/* Sticky offsets */
.sticky-offset-100 { top: 100px; }
.sticky-offset-140 { top: 140px; }

/* Shadows */
.shadow-whatsapp { box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4); }
.shadow-dark { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); }
.shadow-warm { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(255, 107, 53, 0.15); }

/* Typography utilities */
.text-shadow-hero { text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.9); }
.text-shadow-subtitle { text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8); }
.text-shadow-highlight { text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); }
.fs-clamp-title { font-size: clamp(2rem, 5vw, 3.5rem); }
.fs-clamp-subtitle { font-size: clamp(1rem, 3vw, 1.5rem); }
.fs-clamp-highlight { font-size: clamp(0.9rem, 2vw, 1.1rem); }
.fs-clamp-btn { font-size: clamp(0.95rem, 2vw, 1.1rem); }
.fs-clamp-btn-sm { font-size: clamp(0.85rem, 1.5vw, 1rem); }
.fs-80 { font-size: 0.8em; }

/* Border radius */
.rounded-12 { border-radius: 12px; }

/* Borders */
.border-brand-secondary { border: 2px solid var(--brand-secondary, #ff6b35) !important; }
.border-separator-light { border-color: rgba(255, 255, 255, 0.3) !important; }

/* Widths */
.w-10 { width: 10% !important; }
.w-14 { width: 14% !important; }
.w-15 { width: 15% !important; }
.w-18 { width: 18% !important; }
.w-29 { width: 29% !important; }
.w-35 { width: 35% !important; }
.w-39 { width: 39% !important; }
.w-40 { width: 40% !important; }

/* Max width */
.max-w-800 { max-width: 800px; }

/* Table header */
.thead-brand { background-color: var(--brand-primary, #800020); color: white; }

/* Hero backgrounds (hardcoded /static paths) */
.page-hero-bg-alquiler {
    padding: 100px 0 70px;
    background: linear-gradient(135deg, rgba(128, 0, 32, 0.9) 0%, rgba(255, 107, 53, 0.85) 100%), url("/static/images/blog/equipo-esqui.f2e7565f73a7.webp") center/cover no-repeat;
}
.page-hero-bg-forfaits {
    margin-top: var(--navbar-h, 76px);
    padding: 120px 0 80px;
    background: linear-gradient(135deg, rgba(128, 0, 32, 0.85) 0%, rgba(255, 107, 53, 0.85) 100%), url("/static/images/estaciones/candanchu-tobazo.d14abcebdad1.webp") center/cover no-repeat;
}
.hero-clases-bg,
.hero-clases-snowboard-bg {
    margin-top: 0;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(128, 0, 32, 0.8) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(128, 0, 32, 0.75) 100%), url("/static/images/club/club-page5-img1.809ea0db2f68.webp") center/cover no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

/* Hero layout */
.hero-clases-content { max-width: 900px; z-index: 10; }
.hero-section.hero-section-spacing,
.hero-section-spacing {
    margin-top: var(--navbar-h, 76px);
    padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(2rem, 4vw, 4rem);
}
.hero-overlay-brand {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(128, 0, 32, 0.85) 0%, rgba(255, 107, 53, 0.85) 100%);
    z-index: 1;
}
.bg-brand-overlay-light { background: linear-gradient(135deg, rgba(128, 0, 32, 0.3) 0%, transparent 60%); }

/* Photo frames fixed heights */
.photo-frame--fixed-167 { height: 167px; }
.photo-frame--fixed-200 { height: 200px; }
.photo-frame--fixed-280 { height: 280px; }
.photo-frame--fixed-350 { height: 350px; }

/* Transforms */
.transition-transform-3 { transition: transform 0.3s; }
.transition-transform-4 { transition: transform 0.4s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)); }

/* Position helpers */
.pos-top-right { position: absolute; top: 20px; right: 20px; }
.pos-bottom-left { position: absolute; bottom: 20px; left: 20px; }

/* Opacity */
.opacity-15 { opacity: 0.15; }

/* Animations */
.animate-float-6 { animation: float 6s ease-in-out infinite; }
.animate-float-8 { animation: float 8s ease-in-out infinite; }

/* Breadcrumb: clearance canónico en site-shell.css (.page-breadcrumb / -alt) */

/* Light backgrounds */
.bg-light-soft { background: #f8f9fa; }
.bg-success-soft { background: #f0fdf4; }

.bg-light-gradient {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.photo-frame--tall {
    height: 400px;
}

.photo-frame--short {
    height: 192px;
}

.photo-frame--md {
    height: 220px;
}

.photo-brand-wash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(128, 0, 32, 0.35) 0%, rgba(128, 0, 32, 0.08) 45%, transparent 70%);
    transform: translateZ(0);
    backface-visibility: hidden;
}

.photo-frame--ski img {
    object-position: center 28%;
}

/* ===== contact_cta.html — Alpine Commercial UI tokens ===== */

.contact-cta {
    background: var(--brand-primary, #800020);
}

.contact-cta__card {
    transition: transform 0.2s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow 0.2s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
    cursor: pointer;
}

.contact-cta__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(11, 17, 32, 0.12);
}

.contact-cta__card--whatsapp {
    background: #25D366;
}

.contact-cta__card--phone {
    background: var(--brand-ink, #1e293b);
}

.contact-cta__icon {
    font-size: 2.75rem;
    color: var(--brand-primary, #800020);
}

.contact-cta__card--whatsapp .contact-cta__icon,
.contact-cta__card--phone .contact-cta__icon {
    color: #fff;
}

.contact-cta .text-white-50 {
    color: rgba(255, 255, 255, 0.75) !important;
}

@media (max-width: 767px) {
    .contact-cta__card {
        margin-bottom: 0.5rem;
    }
}

/* ===== blog_cta.html — Alpine Commercial UI tokens ===== */

.blog-cta-container {
    background: var(--brand-primary, #800020);
    position: relative;
    overflow: hidden;
}

.blog-cta-primary {
    background: #fff;
    color: var(--brand-primary, #800020);
    border: none;
    border-radius: 10px;
    font-weight: 700;
    transition: transform 0.2s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow 0.2s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.blog-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.blog-cta-primary i {
    color: #25D366;
}

.blog-cta-container .btn-outline-light {
    border-radius: 10px;
    border-width: 2px;
    font-weight: 600;
    transition: transform 0.2s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow 0.2s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.blog-cta-container .btn-outline-light:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.12);
}

.blog-cta-container a:hover {
    text-decoration: none;
}

/* ===== Public refactor utilities (replaces inline hard-coded colors) ===== */

.text-brand-primary { color: var(--brand-primary, #800020); }
.text-brand-secondary { color: var(--brand-secondary, #ff6b35); }
.text-gold { color: #FFD700; }
.text-mejor-escuela { color: var(--brand-primary, #800020); }

.bg-brand-gradient {
    background: linear-gradient(135deg, var(--brand-primary, #800020) 0%, var(--brand-secondary, #ff6b35) 100%);
}

.btn-brand-solid {
    background-color: var(--brand-primary, #800020);
    color: #fff;
    border-color: var(--brand-primary, #800020);
}

.btn-brand-solid:hover {
    background-color: color-mix(in srgb, var(--brand-primary, #800020) 85%, black);
    border-color: color-mix(in srgb, var(--brand-primary, #800020) 85%, black);
    color: #fff;
}

.btn-whatsapp-solid {
    background: linear-gradient(135deg, #25D366 0%, #20c55c 100%);
    color: #fff;
    border: none;
}

.btn-whatsapp-solid:hover {
    background: linear-gradient(135deg, #20c55c 0%, #1aa84e 100%);
    color: #fff;
}

/* Tecnificación */
.hero-tecnificacion-bg {
    margin-top: var(--navbar-h, 76px);
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 120px 0 80px;
    background: linear-gradient(135deg, rgba(128, 0, 32, 0.85) 0%, rgba(255, 107, 53, 0.85) 100%), url("/static/images/club/club-page5-img1.809ea0db2f68.webp") center/cover no-repeat;
}

/* Snowpark */
.hero-snowpark {
    margin-top: var(--navbar-h, 76px);
    padding: 120px 0 80px;
    background: linear-gradient(135deg, #EA580C 0%, #1F2937 100%);
}

/* Bootstrap's .badge fuerza white-space: nowrap, pensado para etiquetas
   cortas tipo contador. Con un aviso largo ("SOLO NIVEL INTERMEDIO-
   AVANZADO") a fs-5, eso desborda el viewport en móvil en vez de envolver. */
.hero-snowpark .badge {
    white-space: normal;
    max-width: 100%;
}

.bg-snowboard-orange {
    background: linear-gradient(135deg, #EA580C 0%, #1F2937 100%);
}

.btn-snowboard-orange {
    background-color: #EA580C;
    color: white;
}

.btn-snowboard-orange:hover {
    background-color: #c74a0b;
    color: white;
}

.border-top-beginner { border-top: 5px solid #10B981; }
.border-top-intermediate { border-top: 5px solid #3B82F6; }
.border-top-advanced { border-top: 5px solid #EF4444; }

.icon-circle-80 {
    width: 80px;
    height: 80px;
}

.icon-circle-60 {
    width: 60px;
    height: 60px;
}

.bg-video-analysis {
    background: linear-gradient(135deg, #DC2626 0%, #1F2937 100%);
}

/* Mejor escuela */
.bg-mejor-escuela {
    background: linear-gradient(
        135deg,
        var(--brand-primary, #800020) 0%,
        var(--brand-dark, #0f172a) 55%,
        #1a0a10 100%
    );
}
.bg-mejor-escuela-alt {
    background: linear-gradient(135deg, var(--brand-primary, #800020) 0%, var(--brand-dark, #0f172a) 100%);
}

.hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><path d="M30 0L60 30L30 60L0 30z" fill="white" fill-opacity="0.3"/></svg>');
}

/* Checkout result wrapper */
.checkout-result {
    max-width: 620px;
    margin: 3rem auto;
    padding: 2rem;
    text-align: center;
}

.checkout-result__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    font-size: 2rem;
}

.checkout-result--success .checkout-result__icon {
    background: rgba(16, 185, 129, 0.12);
    color: var(--brand-success);
}

.checkout-result--cancel .checkout-result__icon {
    background: rgba(92, 101, 112, 0.12);
    color: var(--brand-muted);
}

.checkout-result > p {
    max-width: 480px;
    margin-inline-start: auto;
    margin-inline-end: auto;
}

.checkout-result__summary {
    text-align: start;
    max-width: 480px;
    margin: 2rem auto;
    background: #fff;
    border: 1px solid var(--brand-surface);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}

.checkout-result__summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.checkout-result__summary-item {
    border-bottom: 1px solid var(--brand-surface);
    padding: 0.75rem 0;
}

.checkout-result__summary-item:last-child {
    border-bottom: none;
}

.checkout-result__summary-total {
    text-align: end;
    font-weight: 700;
    margin: 0.75rem 0 0;
}

.checkout-result__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 320px;
    margin: 1.5rem auto 0;
}

/* Form disabled state consistent with public theme */
.form-control:disabled,
.form-control[readonly] {
    background-color: #f1f5f9;
}

/* Footer social link (replaces inline styles in base.html) */
.footer-social-link {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
    background: rgba(255, 107, 53, 0.2);
}

.footer-social-link:hover {
    background: rgba(255, 107, 53, 0.35);
    transform: scale(1.1);
}

.footer-divider {
    border-color: rgba(255, 255, 255, 0.15);
}

.footer-bottom-link {
    transition: all 0.3s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.footer-bottom-link:hover {
    color: var(--brand-secondary, #ff6b35);
}

/* Reduce redundant !important in legacy components where specificity allows */
.blog-cta-primary:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.google-reviews-widget {
    background: linear-gradient(180deg, var(--brand-surface, #e2e8f0) 0%, #ffffff 100%);
    padding: 1.5rem 0;
}

#reviews-container.row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 1rem;
    padding: 0.5rem 0;
    -ms-overflow-style: none;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-primary, #800020) #f0f0f0;
}

#reviews-container>div[class*="col"] {
    flex: 0 0 auto;
    width: 280px;
    max-width: 280px;
}

@media (max-width: 768px) {
    #reviews-container>div[class*="col"] {
        width: 260px;
        max-width: 260px;
    }

    .google-reviews-widget {
        padding: 1rem 0;
    }

    .rating-summary-compact {
        gap: 1rem;
        padding: 0.5rem 1rem;
    }

    #average-rating {
        font-size: 2rem;
    }

    .review-author-info h5 {
        font-size: 0.85rem;
    }

    .review-text {
        font-size: 0.8rem;
    }
}