/**
 * Spirit Collective Homepage Styles  
 * Minimal unique styles with utility classes
 * File location: /wp-content/plugins/spirit-collective/pages/homepage.css
 */

/* #region Global Homepage Styles */
#primary { padding: 0; }
.entry-content > p { margin: 0; }
body, #page {overflow-x: unset;}
/* #endregion */

/* #region Washi Tape Section */
.sc-washi-links {
    padding: 0;
}

.sc-washi-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 100%;
    padding: 30px;
}

.washi-tape-link {
    flex: 1;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.washi-tape-link:hover {
    transform: scale(1.05);
    z-index: 10;
}

.washi-tape {
    position: relative;
    width: 100%;
    padding-top: 18.58%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.washi-tape--birds { background-image: url('https://d14k2hea4spico.cloudfront.net/wp-content/uploads/2025/05/07011950/Washi-Tape-3-birds.png'); }
.washi-tape--market { background-image: url('https://d14k2hea4spico.cloudfront.net/wp-content/uploads/2025/05/07011950/Washi-Tape-2.png'); }
.washi-tape--courses { background-image: url('https://d14k2hea4spico.cloudfront.net/wp-content/uploads/2025/05/07011953/Washi-Tape-1.png'); }

.washi-text {
    font-size: clamp(16px, calc(16px + (var(--content-width) - 768px) * 0.0134), 24px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #6B6965;
    padding: 0 10px;
    width: 100%;
    font-family: var(--sc-font-heading);
    transition: var(--sc-transition);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.washi-text:hover { color: var(--sc-color-primary); }

/* Responsive layouts for washi container */
@media (min-width: 1248px) {
    body.buddypanel-open:has(#custom-subnav:not(.collapsed)) .sc-washi-container { flex-direction: row; }
}
@media (min-width: 1086px) {
    body:not(.buddypanel-open):has(#custom-subnav:not(.collapsed)) .sc-washi-container { flex-direction: row; }
}
@media (min-width: 1066px) {
    body.buddypanel-open:has(#custom-subnav.collapsed) .sc-washi-container { flex-direction: row; }
}
@media (min-width: 1051px) {
    body:not(.buddypanel-open):has(#custom-subnav.collapsed) .sc-washi-container,
    body:not(.buddypanel-open):not(:has(#custom-subnav)) .sc-washi-container { flex-direction: row; }
}
@media (min-width: 998px) {
    body.buddypanel-open:not(:has(#custom-subnav)) .sc-washi-container { flex-direction: row; }
    @media (max-width: 1050px) {
        body.buddypanel-open .sc-washi-container { flex-direction: row; }
    }
}
@media (min-width: 836px) and (max-width: 1050px) {
    body:not(.buddypanel-open) .sc-washi-container { flex-direction: row; }
}
@media (min-width: 769px) {
    body:not(.buddypanel-open):not(:has(#custom-subnav)) .sc-washi-container { flex-direction: row; }
}
@media (max-width: 768px) {
    .sc-washi-container { flex-direction: column; padding: 20px; gap: 20px; }
}
/* #endregion */

/* #region Hero Slider */
.sc-hero-slider {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    padding-bottom: 20px;
}

.slider-container {
    position: relative;
    width: 100%;
    padding-bottom: 42.057%;
    overflow-x: hidden;
}

.slider-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 100%;
    display: flex;
    transform: translateX(0);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-wrapper[data-current-slide="1"] { transform: translateX(0); }
.slider-wrapper[data-current-slide="2"] { transform: translateX(-33.333%); }
.slider-wrapper[data-current-slide="3"] { transform: translateX(-66.666%); }

.slider-slide {
    position: relative;
    width: 33.333%;
    height: 100%;
    flex-shrink: 0;
}

.slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide-background--main { background-image: url('https://d14k2hea4spico.cloudfront.net/wp-content/uploads/2025/05/07011939/The-New-Social-Media-Platform-BG-Only.jpg'); }
.slide-background--neon { background-image: url('https://d14k2hea4spico.cloudfront.net/wp-content/uploads/2025/06/27173841/Neon-Sign-Slider-Desktop-Horizontal-2000px.jpg'); }
.slide-background--tiger { background-image: url('https://d14k2hea4spico.cloudfront.net/wp-content/uploads/2025/06/27180653/Tiger-Slide-Desktop-Horizontal-768px-2.jpg'); }

.slide-content {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide-content .slide-heading {
    position: absolute;
    left: 2.5%;
    margin: 0;
    font-family: var(--sc-font-heading);
    color: #252423;
    line-height: 1;
}

.slide-heading--1 { top: 3%; }
.slide-heading--2 { top: 16%; }
.slide-heading--3 { top: 29%; }
.slide-heading--4 { top: 42%; }
.slide-heading--5 { top: 55%; }

.slide-description {
    position: absolute;
    left: 2.5%;
    bottom: 3%;
    margin: 0;
    font-family: var(--sc-font-body);
    color: #252423;
    font-size: 18px;
    line-height: 1.3;
}

@media screen and (min-width: 1300px) {
    .slide-content .slide-description span, .slide-content .slide-description {
        font-size: 20px !important;
        line-height: 1.5 !important;
    }
}

@media screen and (min-width: 512px) and (max-width: 860px) {
    .slide-content .slide-description span, .slide-content .slide-description {
        font-size: clamp(13px, calc(13px + (var(--content-width) - 600px) * 0.005), 17px) !important;
        line-height: 1.2 !important;
    }
}

.desktop-text { display: block; }
.mobile-text { display: none; }

.slider-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 30px;
    z-index: 10;
    padding: 10px 0;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sc-color-white);
    border: 0.5px solid var(--sc-color-border) !important;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    padding: 0;
    line-height: 1;
}

.slider-dot--active { background: var(--sc-color-active); }

/* Mobile Vertical Slider Images (512px and below) */
@media (max-width: 512px) {
    /* Change aspect ratio for vertical images (662/512 = 129.3%) */
    .slider-container {
        padding-bottom: 129.3%;
    }
    
    /* Swap to vertical image versions */
    .slide-background--main { 
        background-image: url('https://d14k2hea4spico.cloudfront.net/wp-content/uploads/2025/05/07011939/The-New-Social-Media-Platform-BG-Only.jpg'); 
    }
    .slide-background--neon { 
        background-image: url('https://d14k2hea4spico.cloudfront.net/wp-content/uploads/2025/06/27182025/Neon-Sign-Slider-Mobile-Vertical-512px-wide.jpg'); 
    }
    .slide-background--tiger { 
        background-image: url('https://d14k2hea4spico.cloudfront.net/wp-content/uploads/2025/06/27182155/Tiger-Slide-Mobile-Vertical-512px-width-2.jpg'); 
    }
    
    /* Adjust heading positions proportionally for vertical layout */
    .slide-heading--1 { top: 2%; }
    .slide-heading--2 { top: 11%; }
    .slide-heading--3 { top: 20%; }
    .slide-heading--4 { top: 29%; }
    .slide-heading--5 { top: 38%; }
    
    /* Move description higher up since we have more vertical space */
    .slide-description {
        bottom: 8%;
        left: 4%;
        right: 4%;
        font-size: 16px;
        max-width: 92%;
    }
}
/* #endregion Mobile Vertical Slider Images */

/* #region Features Section */
.sc-features {
    position: relative;
    overflow: hidden;
}

.sc-features div:not(.sc-features__decoration) {
    position: relative;
    z-index: 2;
}

.sc-features__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
    z-index: 2;
}

.sc-feature-header {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.sc-feature-emoji { font-size: 32px; }

.sc-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sc-feature-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sc-color-text);
    font-family: var(--sc-font-body);
}

.sc-feature-list li i {
    margin-right: 12px;
    flex-shrink: 0;
    font-size: 22px;
    margin-top: 1px;
    width: 22px;
    text-align: center;
    height: 22px;
    display: flex;
}

.sc-feature--social .sc-feature-list li i { color: #D52975; opacity: 0.85; }
.sc-feature--marketplace .sc-feature-list li i { color: #2bc253; opacity: 0.85; }
.sc-feature--courses .sc-feature-list li i { color: #d4a574; opacity: 0.85; }

.sc-feature-list li:hover i {
    opacity: 1;
    transform: translateX(2px);
    transition: all 0.2s ease;
}

[data-theme="dark"] .sc-feature--social .sc-feature-list li i { color: #E73A81; }
[data-theme="dark"] .sc-feature--marketplace .sc-feature-list li i { color: #3ed461; }
[data-theme="dark"] .sc-feature--courses .sc-feature-list li i { color: #e6b884; }

.sc-features__decoration {
    position: absolute;
    left: 50px;
    top: 50px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
    animation: float 9s ease-in-out infinite;
}

.sc-features__decoration img {
    width: 500px;
    height: auto;
    filter: blur(1px);
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(5deg); }
}

@media (max-width: 1200px) {
    .sc-features__cards { gap: 30px; }
    .sc-features__decoration img { width: 400px; }
}

@media (max-width: 1050px) {
    .sc-features__cards { grid-template-columns: 1fr; max-width: 700px; margin: 0 auto 40px; }
    .sc-features__decoration { right: -150px; bottom: 20px; }
}

@media (max-width: 768px) {
    .sc-features__cards { gap: 25px; }
    .sc-feature-emoji { font-size: 40px; }
    .sc-feature-list li { font-size: 14px; margin-bottom: 12px; }
    .sc-features__decoration { right: -200px; bottom: -50px; opacity: 0.08; }
    .sc-features__decoration img { width: 300px; }
}
/* #endregion */

/* #region Mission Section */
.sc-mission__wrapper {
    display: flex;
    align-items: stretch;
}

.sc-mission__content {
    flex: 1;
    display: flex;
    align-items: center;
}

.sc-mission__image {
    flex: 0 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.sc-mission__image img {
    width: auto;
    height: 100%;
    object-fit: contain;
    max-height: 430px;
    display: block;
}

@media (max-width: 880px) {
    .sc-mission__wrapper { flex-direction: column; max-height: none; }
    .sc-mission__text { margin: 0 auto; text-align: center; }
    .sc-mission__image { max-width: 100%; }
    .sc-mission__image img { width: 100%; height: auto; }
}

@media (min-width: 881px) { .sc-mission__image { max-width: 50%; } }
/* #endregion */

/* #region FAQ Section */
.sc-membership-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sc-space-30);
    margin-top: var(--sc-space-20);
}

.sc-membership-plan h4 {
    font-family: var(--sc-font-body);
    font-size: 18px;
    font-weight: 600;
    color: var(--sc-color-text);
    margin-bottom: var(--sc-space-20);
}

.sc-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sc-feature-list--premium li::before { color: var(--sc-color-primary); }

@media (max-width: 768px) {
    .sc-membership-comparison { grid-template-columns: 1fr; gap: var(--sc-space-40); }
    .sc-membership-plan h4 { font-size: 17px; }
    .sc-feature-list li { font-size: 15px; }
}

.sc-checklist li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.5;
}

.sc-checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--sc-color-success);
    font-weight: bold;
    font-size: 18px;
}

.sc-checklist--premium li::before {
    color: var(--sc-color-primary);
}
/* #endregion */

/* #region Fundraiser Sections Common */
.sc-fundraiser-intro .give-goal-progress .give-progress-bar {
    background-color: var(--sc-color-bg-card);
    border: 1px solid var(--sc-color-border);
}

.sc-fundraiser-intro,
.sc-fundraiser-cta {
    padding: 0;
    min-height: 500px;
}

.sc-fundraiser-intro__wrapper,
.sc-fundraiser-cta__wrapper {
    display: flex;
    align-items: stretch;
    min-height: 500px;
}

.sc-fundraiser-intro__content,
.sc-fundraiser-cta__content {
    flex: 1;
    display: flex;
    align-items: center;
}

.sc-fundraiser-cta__text {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.sc-fundraiser-intro__image,
.sc-fundraiser-cta__image {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sc-fundraiser-intro__image { max-width: 45%; }
.sc-fundraiser-cta__image { max-width: 40%; }

.sc-fundraiser-intro__image img,
.sc-fundraiser-cta__image img {
    width: auto;
    height: 100%;
    object-fit: contain;
    display: block;
}

.sc-fundraiser-intro__image img,
.sc-fundraiser-cta__image img { 
    max-height: 1100px; 
}

/* Progress Bar */
.sc-progress-wrapper {
    padding: 25px;
    background: var(--sc-color-bg-alt);
    border-radius: var(--sc-radius-10);
    border: 1px solid var(--sc-color-border);
}

.sc-progress-wrapper .give-totals-shortcode-wrap {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

@media (max-width: 950px) {
    .sc-fundraiser-intro__wrapper,
    .sc-fundraiser-cta__wrapper { flex-direction: column; }
    
    .sc-fundraiser-intro__content,
    .sc-fundraiser-cta__content { padding: 60px 40px 40px; }
    
    .sc-fundraiser-intro__text,
    .sc-fundraiser-cta__text { margin: 0 auto; text-align: center; }
    
    .sc-fundraiser-intro__image,
    .sc-fundraiser-cta__image { max-width: 100%; height: auto; }
    
    .sc-fundraiser-intro__image img,
    .sc-fundraiser-cta__image img { width: 100%; height: auto; max-width: 750px; max-height: none; }
}
/* #endregion Fundraiser Sections Common */

/* #region Our Story */
.sc-our-story__wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 1;
    justify-items: center;
}

.sc-our-story__content { max-width: 600px; }

.sc-polaroid {
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.1),
        0 10px 20px rgba(0, 0, 0, 0.08),
        0 20px 40px rgba(0, 0, 0, 0.05);
    transform: rotate(2deg);
    transition: transform 0.3s ease;
    position: relative;
    max-width: 350px;
}

.sc-polaroid:hover { transform: rotate(0deg) scale(1.05); }

.sc-polaroid__inner {
    position: relative;
}

.sc-polaroid__inner img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.sc-polaroid:hover .sc-polaroid__inner img { transform: scale(1.05); }

.sc-polaroid__caption {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    color: #333;
    font-weight: 400;
    letter-spacing: 0.5px;
}

@media (max-width: 1050px) {
    .sc-our-story__wrapper { grid-template-columns: 1fr; gap: 50px; text-align: center; }
    .sc-our-story__wrapper h2 { text-align: center; }
    .sc-our-story__content { max-width: 700px; margin: 0 auto; }
    .sc-our-story__image { display: flex; justify-content: center; }
    .sc-polaroid { transform: rotate(-1deg); }
}
/* #endregion Our Story */

/* #region Explore Marketplace Grid */

.sc-marketplace-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 50px;
}

.sc-category-explore {
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
    padding: 12px 30px;
    border-radius: var(--sc-radius-full);
    font-family: var(--sc-font-body);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.sc-card:hover .sc-category-explore { transform: translateY(0); }

.sc-category-count {
    font-family: var(--sc-font-body);
    font-size: 16px;
    color: var(--sc-color-primary);
    font-weight: 600;
}

@media (max-width: 768px) {
    .sc-marketplace-categories { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 480px) {
    .sc-marketplace-categories { grid-template-columns: 1fr; gap: 25px; }
}
/* #endregion Explore Marketplace */

/* #region Explore Products Grid */
.sc-explore-products {
    padding: 80px 0;
}

.sc-explore-products .sc-card {
    border-radius: 0 0 10px 10px;
    box-shadow: none;
    border: 1px solid var(--sc-color-border);
    transition: all 0.3s ease;
}

.sc-card--product-cat:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
    z-index: 10;
}

/* Dark mode adjustments */
[data-theme="dark"] .sc-explore-products {
    background: linear-gradient(180deg, var(--sc-color-bg-alt) 0%, var(--sc-color-bg-site) 100%);
}

[data-theme="dark"] .sc-card--product-cat {
    border-color: var(--sc-color-border);
}

[data-theme="dark"] .sc-card--product-cat:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
/* #endregion */

/* #region Featured Vendors Section */
/* ======================================== */

.sc-featured-vendors {
    position: relative;
    overflow: hidden;
}

.sc-featured-vendors__grid {
    margin-bottom: 20px;
}

.sc-vendor-card {
    display: flex;
    flex-direction: column;
    background: var(--sc-color-bg-card);
    border-radius: var(--sc-radius-10);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--sc-color-border);
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    height: 100%; /* Ensure card takes full height in grid */
}

.sc-vendor-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(213, 41, 117, 0.12);
    border-color: var(--sc-color-primary);
}

/* Banner Section */
.sc-vendor-card__banner {
    position: relative;
    height: 120px;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    flex-shrink: 0; /* Prevent banner from shrinking */
}

.sc-vendor-card__banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.sc-vendor-card:hover .sc-vendor-card__banner img {
    transform: scale(1.1);
}

.sc-vendor-card__featured-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
    padding: 4px 12px;
    border-radius: var(--sc-radius-full);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--sc-font-body);
}

.sc-vendor-card__featured-badge i {
    font-size: 10px;
}

/* Content Section */
.sc-vendor-card__content {
    padding: 20px;
    position: relative;
    flex: 1; /* Take up remaining space */
    display: flex;
    flex-direction: column;
}

/* Avatar */
.sc-vendor-card__avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 4px solid var(--sc-color-bg-card);
    background: var(--sc-color-bg-card);
    position: absolute;
    top: -35px;
    left: 20px;
    overflow: hidden;
}

.sc-vendor-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Info */
.sc-vendor-card__info {
    padding-top: 25px;
    flex: 1; /* Push overlay to bottom */
}

.sc-vendor-card__name {
    font-family: var(--sc-font-heading);
    font-size: 20px;
    line-height: 1.2;
    color: var(--sc-color-text);
    margin: 0 0 8px 0;
    font-weight: 400;
}

.sc-vendor-card__location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--sc-color-text-light);
    font-size: 14px;
    margin-bottom: 10px;
    font-family: var(--sc-font-body);
}

.sc-vendor-card__location i {
    font-size: 12px;
    flex-shrink: 0;
}

.sc-vendor-card__meta {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    color: var(--sc-color-text-light);
    font-family: var(--sc-font-body);
}

.sc-vendor-card__products {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sc-vendor-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--sc-color-warning);
}

.sc-vendor-card__rating i {
    font-size: 12px;
}

/* Hover Overlay - Fixed for all screen sizes */
.sc-vendor-card__overlay {
    position: absolute;
    bottom: -60px; /* Hide below the content area */
    left: 0;
    right: 0;
    background: var(--sc-color-primary);
    padding: 12px;
    transition: bottom 0.3s ease;
    z-index: 10;
}

/* Show overlay on hover for desktop/tablet */
@media (min-width: 769px) {
    .sc-vendor-card:hover .sc-vendor-card__overlay {
        bottom: 0; /* Slide up into view */
    }
}

/* Tablet/medium screens - ensure proper hiding */
@media (min-width: 769px) and (max-width: 1050px) {
    .sc-vendor-card__overlay {
        bottom: -60px; /* Ensure it's fully hidden */
    }
    
    .sc-vendor-card:hover .sc-vendor-card__overlay {
        bottom: 0; /* Slide up on hover */
    }
}

/* Mobile: Show as static button */
@media (max-width: 768px) {
    .sc-vendor-card__overlay {
        position: relative; /* Change to relative positioning */
        bottom: auto; /* Reset bottom */
        left: auto;
        right: auto;
        margin: 15px -15px -15px -15px; /* Extend to card edges */
        border-radius: 0 0 var(--sc-radius-10) var(--sc-radius-10);
        transition: none; /* No animation on mobile */
    }
    
    .sc-vendor-card__content {
        padding: 15px; /* Remove bottom padding since overlay is static */
        overflow: visible; /* Allow overlay to be visible */
    }
    
    .sc-vendor-card__banner {
        height: 100px;
    }
    
    .sc-vendor-card__avatar {
        width: 60px;
        height: 60px;
        top: -30px;
    }
    
    .sc-vendor-card__info {
        padding-top: 20px;
        padding-bottom: 0;
    }
    
    .sc-vendor-card__name {
        font-size: 18px;
    }
}

.sc-vendor-card__visit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--sc-color-white);
    font-family: var(--sc-font-body);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sc-vendor-card__visit i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.sc-vendor-card:hover .sc-vendor-card__visit i {
    transform: translateX(3px);
}

/* Dark mode adjustments */
[data-theme="dark"] .sc-vendor-card {
    background: var(--sc-color-bg-card);
    border-color: var(--sc-color-border);
}

[data-theme="dark"] .sc-vendor-card__banner {
    background: linear-gradient(135deg, #2a2725 0%, #1a1918 100%);
}

[data-theme="dark"] .sc-vendor-card__avatar {
    border-color: var(--sc-color-bg-card);
    background: var(--sc-color-bg-card);
}

[data-theme="dark"] .sc-vendor-card:hover {
    box-shadow: 0 12px 40px rgba(231, 58, 129, 0.2);
}

/* #endregion Featured Vendors Section */

/* #region Join Vendor Community Section */
/* ======================================== */

.sc-join-vendor {
    position: relative;
    overflow: hidden;
}

.sc-join-vendor__wrapper {
    display: grid;
    grid-template-columns: calc(65% - 40px) calc(35% - 20px);
    gap: 60px;
    align-items: start;
}

/* Benefits Grid */
.sc-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.sc-benefit-card {
    text-align: center;
    padding: 25px 15px;
    background: var(--sc-color-bg-card);
    border-radius: var(--sc-radius-10);
    border: 1px solid var(--sc-color-border);
    transition: all 0.3s ease;
}

.sc-benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--sc-color-primary);
}

.sc-benefit-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 15px;
    background: var(--sc-color-btn-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.sc-benefit-icon i {
    font-size: 26px;
    color: var(--sc-color-primary);
}

.sc-benefit-card:hover .sc-benefit-icon {
    background: var(--sc-color-primary);
    transform: scale(1.1);
}

.sc-benefit-card:hover .sc-benefit-icon i {
    color: var(--sc-color-white);
}

.sc-benefit-title {
    font-family: var(--sc-font-heading);
    font-size: 17px;
    line-height: 1.2;
    margin: 0 0 10px;
    color: var(--sc-color-text);
}

.sc-benefit-text {
    font-family: var(--sc-font-body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--sc-color-text-light);
    margin: 0;
}

/* CTA Card */
.sc-cta-card {
    padding: 40px;
    border-radius: var(--sc-radius-15);
    background: linear-gradient(135deg, var(--sc-color-bg-card) 0%, var(--sc-color-bg-accent) 100%);
    box-shadow: 0 15px 50px rgba(213, 41, 117, 0.12);
    border: 2px solid var(--sc-color-primary);
    text-align: center;
}

.sc-cta-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: var(--sc-color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(213, 41, 117, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(213, 41, 117, 0); }
    100% { box-shadow: 0 0 0 0 rgba(213, 41, 117, 0); }
}

.sc-cta-icon i {
    font-size: 36px;
    color: var(--sc-color-white);
}

.sc-cta-title {
    font-family: var(--sc-font-heading);
    font-size: 32px;
    margin: 0 0 15px;
    color: var(--sc-color-text);
}

.sc-cta-description {
    font-family: var(--sc-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--sc-color-text);
    margin: 0 0 25px;
}

.sc-cta-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 30px;
    padding: 20px;
    background: var(--sc-color-bg-section);
    border-radius: var(--sc-radius-10);
}

.sc-cta-price-label {
    font-family: var(--sc-font-body);
    font-size: 16px;
    color: var(--sc-color-text-light);
}

.sc-cta-price-amount {
    font-family: var(--sc-font-heading);
    font-size: 36px;
    color: var(--sc-color-primary);
    font-weight: 400;
}

.sc-cta-price-period {
    font-family: var(--sc-font-body);
    font-size: 16px;
    color: var(--sc-color-text-light);
}

.sc-cta-note {
    font-family: var(--sc-font-body);
    font-size: 13px;
    color: var(--sc-color-text-light);
    margin: 15px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sc-cta-note i {
    font-size: 16px;
    color: var(--sc-color-success);
}

.sc-cta-testimonial {
    padding-top: 25px;
    border-top: 1px solid var(--sc-color-border);
}

.sc-cta-quote {
    font-family: var(--sc-font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--sc-color-text);
    font-style: italic;
    margin: 0 0 10px;
}

.sc-cta-author {
    font-family: var(--sc-font-body);
    font-size: 13px;
    color: var(--sc-color-primary);
    margin: 0;
    font-weight: 600;
}

/* Dark mode adjustments */
[data-theme="dark"] .sc-benefit-card {
    background: var(--sc-color-bg-card);
    border-color: var(--sc-color-border);
}

[data-theme="dark"] .sc-benefit-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .sc-cta-card {
    background: linear-gradient(135deg, var(--sc-color-bg-card) 0%, var(--sc-color-bg-section-alt) 100%);
    box-shadow: 0 15px 50px rgba(231, 58, 129, 0.15);
}

[data-theme="dark"] .sc-cta-price {
    background: var(--sc-color-bg-section-alt);
}

/* Responsive Design */
@media (max-width: 1400px) {
    .sc-benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1200px) {
    .sc-join-vendor__wrapper {
        grid-template-columns: calc(60% - 26px) calc(40% - 14px);
        gap: 40px;
    }
    
    .sc-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 950px) {
    .sc-join-vendor__wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .sc-cta-card {
        position: static;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .sc-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 600px) {
    .sc-benefits-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .sc-cta-card {
        padding: 30px 20px;
    }
    
    .sc-cta-title {
        font-size: 26px;
    }
    
    .sc-cta-price-amount {
        font-size: 30px;
    }
}

/* #endregion Join Vendor Community Section */


.sc-accordion-faq .sc-accordion-content-inner ul,
.sc-accordion-faq .sc-accordion-content-inner ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.sc-accordion-faq .sc-accordion-content-inner li {
    margin-bottom: 0.5em;
    line-height: 1.5;
}

.sc-accordion-faq .sc-accordion-content-inner a {
    color: var(--sc-color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sc-accordion-faq .sc-accordion-content-inner a:hover {
    color: var(--sc-color-primary-hover);
    text-decoration: underline;
}