/**
 * Homepage & VEGER Landing Page Styles
 * Pages: 1779606 (homepage), 1779300 (VEGER landing)
 *
 * Migrated from functions.php inline CSS - January 30, 2026
 *
 * Sections:
 * - Layout fixes (WPBakery full-width rows)
 * - Hero styling (VEGER overlay)
 * - Trust badges (logo-style)
 * - Mobile responsive
 */

/* ============================================
   LAYOUT FIXES
   ============================================ */

/* Remove content wrapper padding */
.page-id-1779606 .wd-content-layout {
    padding: 0 !important;
    padding-block: 0 !important;
}

/* Pre-stretch full-width rows with CSS (before JS runs) */
.dm3-stepmenu-row,
.dm3-hero-row {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* Prevent WPBakery from overriding our positioning */
    left: auto !important;
    right: auto !important;
}

/* Hide WPBakery br tags */
.dm3-stepmenu-row .wpb_wrapper > br,
.dm3-hero-row .wpb_wrapper > br {
    display: none !important;
}

/* Zero inner padding/margins */
.dm3-stepmenu-row .vc_column-inner,
.dm3-hero-row .vc_column-inner,
.dm3-stepmenu-row .wpb_text_column,
.dm3-hero-row .wpb_text_column {
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide clearfix divs ONLY after our specific rows */
.dm3-stepmenu-row + .vc_row-full-width.vc_clearfix,
.dm3-hero-row + .vc_row-full-width.vc_clearfix {
    display: none !important;
}

/* ============================================
   HERO STYLING
   ============================================ */
.dm3-hero-container {
    position: relative;
    width: 100%;
    line-height: 0;
}
.dm3-hero-img {
    width: 100%;
    height: auto;
    display: block;
}

/* VEGER Hero Text Overlay (Left Side) */
.dm3-hero-overlay {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    z-index: 4;
    max-width: 480px;
    line-height: 1.4;
}
.dm3-hero-h1 {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 12px 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    line-height: 1.3;
}
.dm3-hero-title {
    font-family: Audiowide, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(48px, 8vw, 80px);
    font-weight: 400;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 4px 20px rgba(0,0,0,0.2);
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    line-height: 1.1;
}
.dm3-hero-subtitle {
    font-size: clamp(16px, 2.5vw, 22px);
    font-weight: 400;
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
    margin: 0 0 25px 0;
    line-height: 1.4;
}
.dm3-hero-btn {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 35px;
    border-radius: 50px;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(102,126,234,0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dm3-hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(102,126,234,0.5);
    color: #ffffff !important;
}

/* CTA button on hero (bottom right - for custom case) */
.hero-clean-cta-wrap {
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 5;
}
.hero-clean-cta {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff !important;
    font-size: 18px;
    font-weight: 700;
    padding: 16px 40px;
    border-radius: 50px;
    text-decoration: none !important;
    box-shadow: 0 6px 25px rgba(102,126,234,0.4);
}

/* ============================================
   POPULAR CATEGORIES - Text readability
   ============================================ */
.wd-rs-catcarousel .cat-design-center .wd-entities-title {
    text-shadow: 0 1px 6px rgba(0,0,0,0.7), 0 0 2px rgba(0,0,0,0.4);
}
.wd-rs-catcarousel .cat-design-center .wd-cat-count {
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ============================================
   TRUST BADGES - Logo Style
   ============================================ */
.dm3-trust-badge {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dm3-trust-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.3;
}
.dm3-trust-subtitle {
    font-size: 14px;
    color: #777;
    line-height: 1.3;
    margin-top: -4px;
}
.dm3-trust-logos {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.dm3-trust-icon {
    width: 40px;
    height: 30px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dm3-trust-icon svg {
    width: 19px;
    height: 19px;
}
.dm3-trust-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    padding: 0 12px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
    height: 30px;
    box-sizing: border-box;
}
.dm3-trust-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    padding: 0 16px;
    height: 30px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(102,126,234,0.3);
    letter-spacing: 0.5px;
}
.dm3-trust-stars {
    display: flex;
    gap: 2px;
}
.dm3-trust-stars svg {
    width: 19px;
    height: 19px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
/* Payment logos specific */
.dm3-pay-logo {
    width: 44px;
    height: 30px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
.dm3-pay-cod {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    background: #f0f0f0;
    padding: 0 12px;
    height: 30px;
    border-radius: 4px;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    .dm3-trust-badge {
        align-items: center;
        text-align: center;
    }
    .dm3-trust-logos {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    /* Hero mobile: dark bg eliminates white gap between image and card */
    .dm3-hero-container {
        background: #1a1a2e;
    }
    /* Hero mobile: smooth fade from image bottom into dark card */
    .dm3-hero-container .dm3-hero-img {
        mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
    }
    /* Hero overlay mobile - becomes section below image */
    .dm3-hero-overlay {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        max-width: 100%;
        text-align: center;
        padding: 30px 20px;
        background: linear-gradient(135deg, #1a1a2e 0%, #2d2d4a 100%);
    }
    .dm3-hero-h1 {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-align: center;
    }
    .dm3-hero-title {
        font-size: 36px;
        letter-spacing: 2px;
        text-shadow: none;
    }
    .dm3-hero-subtitle {
        font-size: 16px;
        text-shadow: none;
    }
    .dm3-hero-btn {
        padding: 12px 30px;
        font-size: 15px;
    }
    .hero-clean-cta-wrap {
        position: relative;
        bottom: auto;
        right: auto;
        text-align: center;
        padding: 20px 15px;
        background: #1a1a2e;
    }
    .hero-clean-cta {
        font-size: 16px;
        padding: 14px 28px;
    }
}

@media (max-width: 767px) {
    .dm3-trust-title {
        font-size: 16px;
    }
    .dm3-trust-subtitle {
        font-size: 13px;
    }
    .dm3-trust-icon {
        width: 34px;
        height: 26px;
    }
    .dm3-trust-icon svg {
        width: 16px;
        height: 16px;
    }
    .dm3-trust-pill {
        font-size: 11px;
        padding: 0 10px;
        height: 26px;
        line-height: 26px;
    }
    .dm3-trust-number {
        font-size: 14px;
        padding: 0 12px;
        height: 26px;
    }
    .dm3-pay-logo {
        width: 36px;
        height: 26px;
    }
    .dm3-pay-cod {
        font-size: 11px;
        height: 26px;
        padding: 0 10px;
    }
    .dm3-trust-stars svg {
        width: 16px;
        height: 16px;
    }
}