/*
   Younxin Unified Design System Override
   This file overrides scattered values to create a consistent look.
   Loaded AFTER the main style.css.
*/

/* ========================================
   1. UNIFIED CSS VARIABLES (extend existing)
   ======================================== */
:root {
    /* Text colors — 4 tiers */
    --sw-text-primary: #0E1E3F;
    --sw-text-body: #374151;
    --sw-text-secondary: #64748B;
    --sw-text-muted: #94A3B8;

    /* Unified Blues — replace #1E5BB8 everywhere */
    /* --sw-blue: #1A4FA3 stays as-is */

    /* Unified Orange — replace #F26B2C everywhere */
    /* --sw-orange: #FF6B35 stays as-is */

    /* Extra colors */
    --sw-blue-light: #EBF5FF;
    --sw-orange-light: #FFF7ED;

    /* Typography Scale */
    --sw-text-hero: 40px;
    --sw-text-h2: 32px;
    --sw-text-h3: 18px;
    --sw-text-body-size: 16px;
    --sw-text-small: 13px;
    --sw-text-xs: 11px;

    /* Border Radius — 3 tiers */
    --sw-radius-sm: 4px;
    --sw-radius-md: 8px;
    --sw-radius-lg: 12px;
}

/* ========================================
   2. COLOR UNIFICATION
   ======================================== */

/* Replace #1E5BB8 → use var(--sw-blue) */
/* Replace #F26B2C → use var(--sw-orange) */
/* Replace #0E1E3F → use var(--sw-text-primary) */
/* Replace #64748B → use var(--sw-text-secondary) */
/* Replace #94A3B8 → use var(--sw-text-muted) */
/* Replace #374151 → use var(--sw-text-body) */

/* — Section headers — */
.sw-section-header h2 { font-size: var(--sw-text-h2); color: var(--sw-text-primary); }
.sw-section-header p { font-size: var(--sw-text-body-size); color: var(--sw-text-secondary); }

/* — Why Choose Us cards — */
.sw-why-card { border-radius: var(--sw-radius-lg); border: 1px solid var(--sw-gray-200); }
.sw-why-card h3 { font-size: var(--sw-text-h3); color: var(--sw-text-primary); }
.sw-why-card p { font-size: var(--sw-text-small); color: var(--sw-text-secondary); }

/* — How It Works steps — */
.sw-step-card h3 { font-size: var(--sw-text-h3); color: var(--sw-text-primary); }
.sw-step-card p { font-size: var(--sw-text-small); color: var(--sw-text-secondary); }
.sw-step-icon { background: var(--sw-blue-light); border-radius: 50%; }
.sw-step-num { color: var(--sw-blue-light); }

/* — Testimonial cards — */
.sw-testimonial-card { border-radius: var(--sw-radius-lg); border: 1px solid var(--sw-gray-200); }
.sw-testimonial-text { font-size: var(--sw-text-small); color: var(--sw-text-body); }
.sw-testimonial-name { font-size: var(--sw-text-small); color: var(--sw-text-primary); }
.sw-testimonial-role { font-size: var(--sw-text-xs); color: var(--sw-text-secondary); }
.sw-testimonial-company { font-size: var(--sw-text-xs); color: var(--sw-text-muted); }

/* ========================================
   3. BUTTON UNIFICATION
   ======================================== */

/* Primary CTA — Orange */
.sw-btn-primary {
    background: var(--sw-orange) !important;
    color: #fff !important;
    padding: 14px 32px !important;
    border-radius: var(--sw-radius-md) !important;
    font-size: var(--sw-text-body-size) !important;
    font-weight: 600 !important;
    border: none !important;
    transition: var(--sw-transition) !important;
}
.sw-btn-primary:hover {
    background: var(--sw-orange-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255,107,53,.3);
}

/* Secondary — Blue */
.sw-btn-secondary,
.sw-hero-learn-btn {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    padding: 14px 32px;
    border-radius: var(--sw-radius-md);
    font-size: var(--sw-text-body-size);
    font-weight: 600;
    transition: var(--sw-transition);
}
.sw-hero-learn-btn:hover {
    background: rgba(255,255,255,.25);
}
.sw-btn-secondary {
    background: var(--sw-blue) !important;
    border: none !important;
    padding: 14px 32px !important;
    border-radius: var(--sw-radius-md) !important;
    font-size: var(--sw-text-body-size) !important;
    color: #fff !important;
}
.sw-btn-secondary:hover {
    background: var(--sw-blue-hover) !important;
    transform: translateY(-1px);
}

/* Outline Button */
.sw-btn-outline {
    background: transparent !important;
    color: var(--sw-blue) !important;
    border: 2px solid var(--sw-blue) !important;
    padding: 13px 31px !important;
    border-radius: var(--sw-radius-md) !important;
    font-size: var(--sw-text-body-size) !important;
    font-weight: 600 !important;
}
.sw-btn-outline:hover {
    background: var(--sw-blue) !important;
    color: #fff !important;
}

/* Small Buttons */
.sw-btn-sm {
    padding: 8px 20px !important;
    font-size: var(--sw-text-small) !important;
}

/* Header Get a Quote button — Orange */
.sw-header-quote {
    background: var(--sw-orange) !important;
    border-radius: var(--sw-radius-md) !important;
    font-size: var(--sw-text-small) !important;
}

/* WhatsApp */
.sw-btn-whatsapp {
    background: var(--sw-whatsapp);
    border-radius: var(--sw-radius-md);
    font-size: var(--sw-text-body-size);
    font-weight: 600;
    color: #fff;
}

/* Mobile CTA */
.sw-mobile-cta {
    background: var(--sw-orange) !important;
    border-radius: var(--sw-radius-md) !important;
}

/* Inline CTA button */
.sw-inline-cta__btn {
    background: var(--sw-orange) !important;
    border-radius: var(--sw-radius-sm) !important;
}

/* Blog newsletter button */
.sw-blog-newsletter__btn {
    background: var(--sw-orange) !important;
    border-radius: var(--sw-radius-sm) !important;
}

/* Blog hero button */
.sw-blog-hero__btn {
    background: var(--sw-orange) !important;
    border-radius: var(--sw-radius-md) !important;
}

/* Blog empty button */
.sw-blog-empty__btn {
    background: var(--sw-blue) !important;
    border-radius: var(--sw-radius-md) !important;
}

/* Related product card button */
.sw-rp-card__btn {
    background: var(--sw-blue) !important;
    border-radius: var(--sw-radius-sm) !important;
}

/* Post CTA button */
.sw-post-cta__btn {
    background: var(--sw-text-primary) !important;
    border-radius: var(--sw-radius-md) !important;
}

/* Footer CTA button */
.sw-footer-cta .sw-btn-primary {
    background: var(--sw-orange) !important;
    border-radius: var(--sw-radius-md) !important;
}

/* RFQ submit */
.sw-rfq-page .sw-btn-primary {
    background: var(--sw-orange) !important;
    border-radius: var(--sw-radius-md) !important;
}

/* ========================================
   4. SECTION SPACING UNIFICATION
   ======================================== */

/* Large sections → 80px */
.sw-categories,
.sw-why-us,
.sw-how-it-works,
.sw-testimonials,
.sw-product-showcase,
.sw-certifications,
.sw-page-hero,
.sw-page-section {
    padding: var(--sw-section-padding) !important;
}

/* Small sections → 48px */
.sw-trust-bar { padding: 32px 0 !important; }
.sw-footer-cta { padding: 64px 0 !important; }
.sw-factory-carousel { padding: 64px 0 !important; }

/* Section header gap */
.sw-section-header { margin-bottom: 48px; }

/* ========================================
   5. WHY CHOOSE US — PREMIUM ICONS
   ======================================== */

.sw-why-icon {
    width: 88px !important;
    height: 88px !important;
    border-radius: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* background is now set inline via the bg field as gradient */
}

/* ========================================
   6. CARD UNIFICATION
   ======================================== */

/* All card-style elements → 12px radius */
.sw-why-card,
.sw-testimonial-card,
.sw-product-showcase-card,
.sw-categories-card,
.sw-solution-card,
.sw-factory-carousel__card,
.sw-cross-link-card {
    border-radius: var(--sw-radius-lg) !important;
    border: 1px solid var(--sw-gray-200);
}

/* Card hover — consistent */
.sw-why-card:hover,
.sw-testimonial-card:hover,
.sw-categories-card:hover,
.sw-solution-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
    border-color: transparent;
}

/* ========================================
   6. FORM ELEMENTS
   ======================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select,
.sw-rfq-input,
.form-input {
    border: 1px solid var(--sw-gray-200);
    border-radius: var(--sw-radius-md);
    font-size: var(--sw-text-body-size);
    padding: 10px 14px;
    color: var(--sw-text-body);
    transition: border-color .2s;
}

input:focus,
textarea:focus,
select:focus,
.sw-rfq-input:focus {
    outline: none;
    border-color: var(--sw-blue);
    box-shadow: 0 0 0 3px rgba(26,79,163,.1);
}

input::placeholder,
textarea::placeholder {
    color: var(--sw-text-muted);
}

/* RFQ form labels */
.sw-rfq-label {
    font-size: var(--sw-text-small);
    font-weight: 600;
    color: var(--sw-text-primary);
}

/* ========================================
   7. BADGE / TAG UNIFICATION
   ======================================== */

.sw-hero-tag {
    border-radius: var(--sw-radius-sm);
    font-size: var(--sw-text-xs);
    font-weight: 600;
}

/* ========================================
   8. CATEGORY CARD TYPOGRAPHY
   ======================================== */

.sw-categories-card h3 {
    font-size: var(--sw-text-h3) !important;
    font-weight: 700;
    color: var(--sw-text-primary);
}
.sw-categories-card p {
    font-size: var(--sw-text-small) !important;
    color: var(--sw-text-secondary);
}

/* ========================================
   9. PRODUCT SHOWCASE CARD
   ======================================== */

.sw-product-showcase-card {
    border-radius: var(--sw-radius-lg) !important;
}
.sw-product-showcase-card h4 {
    font-size: var(--sw-text-small) !important;
    font-weight: 700;
    color: var(--sw-text-primary);
}

/* ========================================
   10. FOOTER UNIFICATION
   ======================================== */

.sw-footer h4 {
    font-size: var(--sw-text-small);
    font-weight: 700;
    color: #fff;
}
.sw-footer a {
    font-size: var(--sw-text-small);
    color: rgba(255,255,255,.7);
}
.sw-footer a:hover {
    color: #fff;
}

/* ========================================
   11. PAGE HERO UNIFICATION
   ======================================== */

.sw-page-hero__title {
    font-size: var(--sw-text-hero) !important;
    font-weight: 800 !important;
}

/* ========================================
   12. BLOG UNIFICATION
   ======================================== */

.sw-blog-hero__title {
    font-size: var(--sw-text-h2) !important;
    color: var(--sw-text-primary) !important;
}
.sw-blog-hero__subtitle {
    font-size: var(--sw-text-body-size) !important;
    color: var(--sw-text-secondary) !important;
}
.sw-blog-card h3 {
    font-size: var(--sw-text-h3) !important;
    color: var(--sw-text-primary) !important;
}
.sw-blog-card p {
    font-size: var(--sw-text-small) !important;
    color: var(--sw-text-secondary) !important;
}
.sw-section-title {
    font-size: var(--sw-text-h2) !important;
    color: var(--sw-text-primary) !important;
}

/* Blog search */
.sw-blog-search input {
    border-radius: var(--sw-radius-md) !important;
    border-color: var(--sw-gray-200) !important;
}

/* ========================================
   13. NAVIGATION UNIFICATION
   ======================================== */

/* Ensure nav items use consistent size */
.sw-nav-menu a {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sw-text-primary);
}

/* Top bar */
.sw-topbar {
    font-size: var(--sw-text-xs);
    color: var(--sw-text-muted);
}

/* ========================================
   14. PDP UNIFICATION
   ======================================== */

.sw-pdp-info h1 {
    font-size: 28px !important;
    color: var(--sw-text-primary) !important;
}

/* ========================================
   15. HERO SLIDE SPECIFIC
   ======================================== */

.sw-hero-slide .sw-hero-overlay {
    background: linear-gradient(to right, rgba(13,46,110,0.85), rgba(13,46,110,0.25) 50%, transparent 85%);
}
.sw-hero-title {
    font-size: var(--sw-text-hero) !important;
}
.sw-hero-subtitle {
    font-size: var(--sw-text-body-size) !important;
}
.sw-hero-stats-num {
    font-size: 24px;
}
.sw-hero-stats-lbl {
    font-size: var(--sw-text-xs);
}

/* ========================================
   16. COLOR HARDCODE REPLACEMENTS
   ======================================== */

/* Blog / Page orange #F26B2C → var(--sw-orange) */
a { color: var(--sw-blue); }
a:hover { color: var(--sw-blue-hover); }

/* Blog body text */
.sw-blog-card .sw-blog-card-meta {
    font-size: var(--sw-text-xs) !important;
    color: var(--sw-text-muted) !important;
}

/* ========================================
   17. RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 1024px) {
    :root {
        --sw-text-hero: 32px;
        --sw-text-h2: 26px;
    }
}

@media (max-width: 640px) {
    :root {
        --sw-text-hero: 28px;
        --sw-text-h2: 24px;
        --sw-text-h3: 16px;
    }
}

/* Why Choose — Photo Card Override */
.sw-why-card-photo {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sw-why-card-photo:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(13,46,110,0.12);
}
.sw-why-photo {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}
.sw-why-card-body {
    padding: 18px 16px 20px;
    text-align: center;
}
.sw-why-badge {
    display: inline-block;
    background: #FF6B35;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
    margin-bottom: 8px;
}
.sw-why-card-body h3 {
    font-size: 15px;
    font-weight: 700;
    color: #0D2E6E;
    margin: 0 0 8px;
}
.sw-why-card-body p {
    font-size: 13px;
    color: #64748B;
    line-height: 1.5;
    margin: 0;
}