/* Design Style System - Shared by demo.html and index.html */

/* ===== SWISS MINIMALIST ===== */
.style-swiss main * { letter-spacing: -0.01em; }
/* Swiss nav — the cleanest possible top edge.
   • No drop-shadow (Tailwind's shadow-md): keep the page edge crisp.
   • No bottom border: a hairline rule reads as "design", Swiss reads as
     "absence of design".
   • Solid 100% surface-card background (defeats the v6 glass-nav rule
     which is "color-mix surface-card 80% transparent" + backdrop-blur —
     that translucency reads modern but not minimal).
   Higher-specificity selector (body class + nav.shadow-md / body[data-v6])
   is needed to beat both Tailwind's .shadow-md and the v6 glass-nav rule
   that ships with !important. */
.style-swiss nav,
.style-swiss nav.shadow-md,
body.style-swiss nav.shadow-md,
body[data-v6="true"].style-swiss nav,
body[data-v6="true"].style-swiss nav.bg-white,
body[data-v6="true"].style-swiss nav.shadow-md {
    box-shadow: none !important;
    border-bottom: none !important;
    background: var(--surface-card, #ffffff) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.style-swiss section:not(.hero-pattern):not(#google-reviews) { border-radius: 0 !important; border: none !important; border-top: 1px solid rgba(0,0,0,0.1) !important; padding: 60px 0 !important; }
.style-swiss h1, .style-swiss h2, .style-swiss h3 { font-weight: 300; line-height: 1.1; margin: 0; letter-spacing: -0.03em; }
.style-swiss h1 { font-size: 3.5rem; }
.style-swiss #hero-logo, .style-swiss #nav-logo { background: none !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; }

.style-swiss .hero-pattern a[href="#contact"],
.style-swiss .hero-pattern a[href="#action"] {
    border-radius: 0 !important;
    border: 2px solid currentColor !important;
    font-weight: 600;
    /* Padding NOT overridden — let Tailwind's px-4 py-3 from the markup
       carry. Earlier override (14px 20px) was way too wide for the CTA copy. */
    transition: all 0.2s;
    box-shadow: none !important;
}
.style-swiss .hero-pattern a[href="#contact"]:hover,
.style-swiss .hero-pattern a[href="#action"]:hover { 
    opacity: 0.8;
}

.style-swiss #hero-phone {
    border-radius: 0 !important;
    border: 2px solid currentColor !important;
    font-weight: 600;
    /* Padding NOT overridden — let Tailwind's px-4 py-3 from the markup carry. */
    transition: all 0.2s;
    box-shadow: none !important;
}
.style-swiss #hero-phone:hover { 
    opacity: 0.8;
}

.style-swiss section:not(#google-reviews) .bg-white { border: none !important; border-top: 1px solid rgba(0,0,0,0.1) !important; border-radius: 0 !important; box-shadow: none !important;}
.style-swiss section:not(#google-reviews) button:not(.demo-panel button) { border-radius: 0 !important; border: 1px solid currentColor !important; font-weight: 400; padding: 14px 20px; transition: all 0.2s; }
.style-swiss section:not(#google-reviews) button:not(.demo-panel button):hover { opacity: 0.8; }
.style-swiss section > .container { max-width: 1200px; }

/* ===== ANTI-DESIGN / IMPERFECT ===== */
.style-antidesign section:not(.hero-pattern):not(#google-reviews) { transform: rotate(-0.5deg); border: 3px solid currentColor; border-radius: 0; }
.style-antidesign section:not(#google-reviews) .bg-white { transform: rotate(0.3deg); border: 2px dashed currentColor !important; box-shadow: 5px 5px 0 rgba(0,0,0,0.2) !important; }
.style-antidesign h2 { font-family: 'Courier New', monospace !important; text-decoration: underline wavy; }
.style-antidesign h1 { font-family: 'Courier New', monospace !important; position: relative; }
.style-antidesign section:not(#google-reviews) button:not(.demo-panel button) { border-radius: 0 !important; border: 3px solid currentColor !important; transform: skew(-2deg); box-shadow: 4px 4px 0 #ff6; font-weight: 700; }
.style-antidesign main img { filter: contrast(1.2) saturate(1.3); }

/* ===== BRUTALIST / BOLD BLOCKS ===== */
.style-brutalist section:not(.hero-pattern):not(#google-reviews) { border: 4px solid currentColor !important; border-radius: 0 !important; box-shadow: 8px 8px 0 currentColor !important; }
.style-brutalist section:not(#google-reviews) .bg-white { border: 3px solid currentColor !important; border-radius: 0 !important; box-shadow: 6px 6px 0 currentColor !important; }
.style-brutalist h1, .style-brutalist h2, .style-brutalist h3 { font-weight: 900; text-transform: uppercase; letter-spacing: -1px; line-height: 0.9; }

/* Hero section buttons - consistent vertical alignment */
.style-brutalist .hero-pattern a[href="#contact"],
.style-brutalist .hero-pattern a[href="#action"],
.style-brutalist #hero-phone,
.style-brutalist .hero-pattern button,
.style-brutalist .hero-pattern a.cc_loylopen { 
    border: 4px solid currentColor !important; 
    border-radius: 0 !important; 
    font-weight: 900; 
    font-size: 18px; 
    padding: 20px 20px !important; 
    box-shadow: 6px 6px 0 rgba(0,0,0,0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.style-brutalist section:not(#google-reviews) button:not(.demo-panel button) { border: 4px solid currentColor !important; border-radius: 0 !important; font-weight: 900; font-size: 18px; padding: 20px 20px; box-shadow: 6px 6px 0 rgba(0,0,0,0.3); }
.style-brutalist .bg-purple-600, .style-brutalist .bg-purple-700 { filter: brightness(0.9) contrast(1.2); }

/* ===== MOTION & ANIMATIONS ===== */
.style-motion section:not(.hero-pattern):not(#google-reviews) { transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.style-motion section:not(.hero-pattern):not(#google-reviews):hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.style-motion section:not(#google-reviews) .bg-white { transition: all 0.3s ease; animation: float 3s ease-in-out infinite; }
.style-motion section:not(#google-reviews) .bg-white:hover { transform: scale(1.05) rotate(1deg); box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important; }
.style-motion section:not(#google-reviews) button:not(.demo-panel button) { transition: all 0.3s ease; position: relative; overflow: hidden; }
.style-motion section:not(#google-reviews) button:not(.demo-panel button):hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ===== ACTIVE SPORTS / OUTDOOR ===== */
.style-active section:not(.hero-pattern):not(#google-reviews) {
    position: relative;
    /* Let theme control background color - design style only adds shape/borders */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
    padding-bottom: 60px !important;
    border-left: 6px solid var(--theme-primary, #4a5568);
    box-shadow: 12px 12px 0 var(--theme-shadow, rgba(0, 0, 0, 0.1));
}

.style-active section:not(#google-reviews) .bg-white:not(button):not(a) {
    /* Let theme control background and text color - design style only adds borders/transforms */
    border-left: 4px solid var(--theme-primary, #4a5568) !important;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 var(--theme-shadow, rgba(0, 0, 0, 0.1)) !important;
    transform: skew(-2deg);
    transition: all 0.3s ease;
}
.style-active section:not(#google-reviews) .bg-white:not(button):not(a):hover {
    transform: skew(-2deg) translateX(4px);
    box-shadow: 12px 12px 0 var(--theme-shadow, rgba(0, 0, 0, 0.15)) !important;
}

.style-active h1 { 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 2px;
    line-height: 0.95;
    position: relative;
    display: inline-block;
}
.style-active h1::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100px;
    height: 6px;
    background: var(--theme-primary, #4a5568);
    transform: skew(-20deg);
}

.style-active h2, .style-active h3 { 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 1.5px;
    text-shadow: 2px 2px 0 var(--theme-shadow, rgba(0, 0, 0, 0.1));
}

.style-active section:not(#google-reviews) button:not(.demo-panel button),
.style-active .hero-pattern a[href="#contact"],
.style-active .hero-pattern a[href="#action"],
.style-active #hero-phone,
.style-active #action,
.style-active .faq-question {
    border-radius: 0 !important;
    border: 3px solid var(--theme-primary, #4a5568) !important;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 32px;
    box-shadow: 6px 6px 0 var(--theme-shadow, rgba(0, 0, 0, 0.15));
    transition: all 0.2s ease;
    transform: skew(-2deg);
    /* Use CSS variables so themes can override button colors */
    background: var(--active-sports-button-bg, white) !important;
    color: var(--active-sports-button-color, var(--theme-primary, #4a5568)) !important;
}

.style-active section:not(#google-reviews) button:not(.demo-panel button):hover,
.style-active .hero-pattern a[href="#contact"]:hover,
.style-active .hero-pattern a[href="#action"]:hover,
.style-active #action:hover,
.style-active .faq-question:hover {
    transform: skew(-2deg) translateX(2px) translateY(-2px);
    box-shadow: 8px 8px 0 var(--theme-shadow, rgba(0, 0, 0, 0.2));
}

/* Yext post read more buttons - ensure dark text */
.style-active .yext-post-card button,
.style-active .yext-post-card button * {
    color: #000 !important;
}

/* ============================================
   GOOGLE REVIEWS CAROUSEL — universal Google look
   Theme-agnostic by design: Google reviews are the trust factor
   and must render the same regardless of which color theme or
   design style is active. Hence !important throughout to win
   over theme overrides in theme-runtime.js.
   ============================================ */

#google-reviews {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    color: #202124 !important;
    background: #fff !important;
    padding: 48px 0 !important;
}

/* Header bar */
#google-reviews-header {
    background: #f8f9fa !important;
    border: 1px solid #ebebeb !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    margin-bottom: 24px !important;
    box-shadow: none !important;
}
#google-reviews-header-inner,
#google-reviews-header > div:first-child {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
}
@media (min-width: 768px) {
    #google-reviews-header-inner,
    #google-reviews-header > div:first-child {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
    }
}
#google-reviews-header h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #202124 !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: 0 !important;
}
.google-reviews-rating-row {
    display: flex !important;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
#google-rating-value {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #202124 !important;
    line-height: 1 !important;
}
#google-rating-stars {
    display: inline-flex !important;
    color: #fbbc04 !important;
    font-size: 20px;
    gap: 1px;
}
#google-rating-stars i {
    color: #fbbc04 !important;
}
#google-rating-count {
    color: #5f6368 !important;
    font-size: 14px !important;
}

/* Write a Review button — Google-style dark CTA */
#google-write-review {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #1a1a1a !important;
    color: #fff !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.15s !important;
    flex-shrink: 0;
    font-size: 14px !important;
    border: none !important;
}
#google-write-review:hover {
    background: #2d2d2d !important;
}

/* Carousel wrap, track, arrows */
.google-reviews-carousel-wrap {
    position: relative;
}
.google-reviews-track {
    display: flex !important;
    gap: 16px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 4px 12px 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.google-reviews-track::-webkit-scrollbar {
    display: none;
}
#google-reviews-prev,
#google-reviews-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 9999px !important;
    background: rgba(218, 220, 224, 0.95) !important;
    color: #5f6368 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
    transition: background 0.15s !important;
    z-index: 10;
}
#google-reviews-prev { left: -10px !important; }
#google-reviews-next { right: -10px !important; }
#google-reviews-prev:hover,
#google-reviews-next:hover {
    background: rgba(189, 193, 198, 1) !important;
}
#google-reviews-prev svg,
#google-reviews-next svg {
    width: 16px !important;
    height: 16px !important;
}

/* Cards — Google review look */
.google-reviews-card {
    flex: 0 0 320px !important;
    width: 320px !important;
    max-width: 320px !important;
    background: #fff !important;
    border: 1px solid #ebebeb !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: none !important;
    scroll-snap-align: start !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    color: #202124 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
@media (max-width: 640px) {
    .google-reviews-card {
        flex: 0 0 280px !important;
        width: 280px !important;
        max-width: 280px !important;
    }
}

.google-reviews-card-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.google-reviews-avatar {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}
.google-reviews-avatar-img,
.google-reviews-avatar-fallback {
    width: 44px !important;
    height: 44px !important;
    border-radius: 9999px !important;
    object-fit: cover;
    display: block !important;
}
.google-reviews-avatar-fallback {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    background: #c0c2c8 !important;  /* neutral, theme-agnostic */
    text-transform: uppercase;
}
.google-reviews-google-badge {
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    background: #fff !important;
    border-radius: 9999px !important;
    padding: 2px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
    width: 18px;
    height: 18px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: content-box !important;
}
.google-reviews-google-badge svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
}

.google-reviews-meta {
    flex: 1;
    min-width: 0;
}
.google-reviews-name-row {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap;
}
.google-reviews-name {
    font-weight: 600 !important;
    color: #202124 !important;
    font-size: 14px !important;
}
.google-reviews-verified {
    width: 16px !important;
    height: 16px !important;
    color: #1a73e8 !important;
    flex-shrink: 0;
}
.google-reviews-time {
    font-size: 12px !important;
    color: #5f6368 !important;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.google-reviews-stars {
    display: flex !important;
    color: #fbbc04 !important;
    font-size: 14px !important;
    gap: 1px;
    margin-bottom: 10px !important;
}
.google-reviews-stars i {
    color: #fbbc04 !important;
}

.google-reviews-text {
    font-size: 14px !important;
    color: #3c4043 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.google-reviews-text.expanded {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible;
}

.google-review-readmore {
    color: #1a73e8 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
    align-self: flex-start;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    font-family: inherit;
}
.google-review-readmore:hover {
    text-decoration: underline;
}

/* Multi-color Google wordmark */
.google-reviews-wordmark {
    font-weight: 500;
    color: #5f6368;
}
.google-reviews-wordmark .g-o1 { color: #4285F4 !important; }
.google-reviews-wordmark .g-o2 { color: #FBBC05 !important; }
.google-reviews-wordmark .g-g  { color: #34A853 !important; }
.google-reviews-wordmark .g-l  { color: #EA4335 !important; }
.google-reviews-wordmark .g-e  { color: #4285F4 !important; }

/* Pagination dots */
#google-reviews-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
}
#google-reviews-dots button {
    width: 8px !important;
    height: 8px !important;
    border-radius: 9999px !important;
    background: #dadce0 !important;
    border: none !important;
    cursor: pointer;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}
#google-reviews-dots button:hover {
    background: #9aa0a6 !important;
}
#google-reviews-dots button[aria-current="true"] {
    background: #1a73e8 !important;
    width: 24px !important;
}

/* Skeleton loading state */
.google-reviews-skeleton {
    flex: 0 0 320px !important;
    width: 320px !important;
    background: #fff !important;
    border: 1px solid #ebebeb !important;
    border-radius: 12px !important;
    padding: 20px !important;
    scroll-snap-align: start !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    animation: googleReviewsSkeletonPulse 1.6s ease-in-out infinite !important;
}
@media (max-width: 640px) {
    .google-reviews-skeleton {
        flex: 0 0 280px !important;
        width: 280px !important;
    }
}
.google-reviews-skeleton-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}
.google-reviews-skeleton-avatar {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: #e8eaed;
    flex-shrink: 0;
}
.google-reviews-skeleton-meta {
    flex: 1;
}
.google-reviews-skeleton-bar {
    background: #e8eaed;
    border-radius: 4px;
    height: 12px;
}
.google-reviews-skeleton-bar.gr-w-32 { width: 128px; }
.google-reviews-skeleton-bar.gr-w-24 { width: 96px; }
.google-reviews-skeleton-bar + .google-reviews-skeleton-bar {
    margin-top: 6px;
}
.google-reviews-skeleton-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.google-reviews-skeleton-star {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: #e8eaed;
}
.google-reviews-skeleton-text {
    height: 12px;
    background: #e8eaed;
    border-radius: 4px;
    margin-bottom: 6px;
}
.google-reviews-skeleton-text.gr-short { width: 70%; }

@keyframes googleReviewsSkeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Override any design-style rules that try to theme the cards */
.style-brutalist .google-reviews-card,
.style-swiss .google-reviews-card,
.style-antidesign .google-reviews-card,
.style-motion .google-reviews-card,
.style-active .google-reviews-card,
.style-futuristic .google-reviews-card,
.style-brutalist #google-reviews-header,
.style-swiss #google-reviews-header,
.style-antidesign #google-reviews-header,
.style-motion #google-reviews-header,
.style-active #google-reviews-header,
.style-futuristic #google-reviews-header {
    border-radius: 12px !important;
    border: 1px solid #ebebeb !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #202124 !important;
}
.style-brutalist #google-reviews-header,
.style-swiss #google-reviews-header,
.style-antidesign #google-reviews-header,
.style-motion #google-reviews-header,
.style-active #google-reviews-header,
.style-futuristic #google-reviews-header {
    background: #f8f9fa !important;
    border-radius: 16px !important;
}

/* Hard-reset all design-style/theme overrides for Google Reviews buttons.
   These selectors win over any future design-style additions because they
   pair the design-style class with a high-specificity ID/descendant chain. */
[class*="style-"] #google-reviews-prev,
[class*="style-"] #google-reviews-next {
    border-radius: 9999px !important;
    border: none !important;
    background: rgba(218, 220, 224, 0.95) !important;
    color: #5f6368 !important;
    padding: 0 !important;
    width: 36px !important;
    height: 36px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
    transform: translateY(-50%) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: normal !important;
    clip-path: none !important;
    filter: none !important;
    animation: none !important;
}
[class*="style-"] #google-reviews-prev:hover,
[class*="style-"] #google-reviews-next:hover {
    background: rgba(189, 193, 198, 1) !important;
    transform: translateY(-50%) !important;
}
[class*="style-"] #google-reviews .google-review-readmore {
    border-radius: 0 !important;
    border: none !important;
    background: none !important;
    color: #1a73e8 !important;
    padding: 0 !important;
    margin-top: 8px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    font-family: inherit !important;
}
[class*="style-"] #google-reviews-dots button {
    width: 8px !important;
    height: 8px !important;
    border-radius: 9999px !important;
    background: #dadce0 !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: normal !important;
    clip-path: none !important;
    filter: none !important;
}
[class*="style-"] #google-reviews-dots button[aria-current="true"] {
    background: #1a73e8 !important;
    width: 24px !important;
}
[class*="style-"] #google-write-review {
    background: #1a1a1a !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: none !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
}
[class*="style-"] #google-write-review:hover {
    background: #2d2d2d !important;
    transform: none !important;
}

/* ===== Section user-hidden (drives the bizsiteconfig hiddenSections list) =====
   Set when a section is dragged into the "Hidden" bin in the demo panel, or
   listed in theme.hiddenSections of the loaded bizsiteconfig. Wins over the
   data-driven `.hidden` class because of !important. */
.section-user-hidden {
    display: none !important;
}

/* Hide nav <a> tags whose href targets a user-hidden section. Layered with the
   existing data-driven `.hidden` (e.g. #menus-nav-link, #faq-nav-link) — either
   trigger keeps the link off-screen. */
.nav-link-user-hidden {
    display: none !important;
}