/* ================================================
   HomeSections.css
   VedicSage.ai — New Homepage Sections (A–E)
   Used by: Home/Index.cshtml (all language variants)
   ================================================ */

/* --- Section Wrapper --- */
.hs-section {
    padding: 56px 0;
    border-top: 1px solid rgba(0,0,0,.08);
}

/* --- Eyebrow Badge --- */
.hs-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #dee2e6;
    border-radius: 99px;
    padding: 4px 14px;
    font-size: 12px;
    color: #6c757d;
    background: #f8f9fa;
    margin-bottom: 14px;
}
.hs-badge-warn  { background:#fff8ee; color:#854F0B; border-color:#EF9F27; }
.hs-badge-teal  { background:#edfaf4; color:#0F6E56; border-color:#5DCAA5; }
.hs-badge-info  { background:#e8f2fd; color:#185FA5; border-color:#85B7EB; }
.hs-badge-success { background:#edf7e3; color:#3B6D11; border-color:#97C459; }

/* --- Section Title & Subtitle --- */
.hs-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1a1a2e;
}
.hs-subtitle {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 32px;
    line-height: 1.7;
    max-width: 680px;
}

/* --- Sub-group Label --- */
.hs-group-label {
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 14px;
    margin-top: 8px;
}

/* --- Tool Cards Grid --- */
.hs-tool-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.hs-tool-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .2s;
}
.hs-tool-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.hs-tool-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
}
.hs-tool-desc {
    font-size: 12px;
    color: #6c757d;
    line-height: 1.55;
}

/* --- Icon Boxes --- */
.hs-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}
.hs-icon-blue   { background:#e8f2fd; color:#185FA5; }
.hs-icon-teal   { background:#edfaf4; color:#0F6E56; }
.hs-icon-amber  { background:#fff8ee; color:#854F0B; }
.hs-icon-green  { background:#edf7e3; color:#3B6D11; }
.hs-icon-purple { background:#f0effe; color:#534AB7; }
.hs-icon-coral  { background:#fdf0ec; color:#993C1D; }
.hs-icon-pink   { background:#fdf0f5; color:#993356; }

/* --- Section B: Directory Feature Cards --- */
.hs-feature-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-left: 3px solid #378ADD;
    border-radius: 0 12px 12px 0;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.hs-feature-card-teal   { border-left-color: #0F6E56; }
.hs-feature-card-purple { border-left-color: #534AB7; }
.hs-feature-card-amber  { border-left-color: #BA7517; }
.hs-feature-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hs-feature-desc {
    font-size: 13px;
    color: #6c757d;
    line-height: 1.5;
}

/* --- Section B: Sample Astrologer Card --- */
.hs-astro-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.hs-astro-card-label {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 10px;
}
.hs-live-badge {
    font-size: 11px;
    background: #edf7e3;
    color: #3B6D11;
    border: 1px solid #97C459;
    border-radius: 99px;
    padding: 3px 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.hs-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3B6D11;
    display: inline-block;
}
.hs-lang-tag {
    font-size: 11px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 99px;
    padding: 2px 9px;
    color: #6c757d;
}
.hs-verified-badge {
    font-size: 11px;
    background: #e8f2fd;
    color: #185FA5;
    border: 1px solid #85B7EB;
    border-radius: 4px;
    padding: 2px 8px;
}
.hs-price-label {
    font-size: 12px;
    font-weight: 600;
    color: #185FA5;
}
.hs-action-btn {
    flex: 1;
    text-align: center;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 7px;
    font-size: 12px;
    color: #6c757d;
    background: #fff;
}

/* --- Section C: Language Buttons --- */
.hs-lang-btn {
    border: 1px solid #dee2e6;
    border-radius: 99px;
    padding: 6px 16px;
    font-size: 13px;
    background: #f8f9fa;
    color: #6c757d;
    cursor: default;
}
.hs-lang-btn-active {
    background: #e8f2fd;
    border-color: #378ADD;
    color: #185FA5;
    font-weight: 600;
}

/* --- Section C & Stats: Stat Box --- */
.hs-stat-box {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 18px;
    text-align: center;
}
.hs-stat-num {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 4px;
}
.hs-stat-lbl {
    font-size: 12px;
    color: #6c757d;
}

/* --- Section E: Tier Cards --- */
.hs-tier-card {
    border: 1px solid #e9ecef;
    border-radius: 14px;
    padding: 24px 20px;
    background: #fff;
    height: 100%;
}
.hs-tier-card-featured {
    border: 2px solid #378ADD;
}
.hs-tier-name {
    font-size: 13px;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 4px;
}
.hs-tier-price {
    font-size: 30px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 8px 0 4px;
}
.hs-tier-desc {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 18px;
    line-height: 1.6;
}
.hs-tier-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #495057;
    padding: 4px 0;
    line-height: 1.45;
}
.hs-tier-row i {
    color: #3B6D11;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}
.hs-founder-note {
    background: #fff8ee;
    border: 1px solid #EF9F27;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: #854F0B;
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.55;
}
.hs-popular-badge {
    font-size: 11px;
    background: #e8f2fd;
    color: #185FA5;
    border: 1px solid #85B7EB;
    border-radius: 4px;
    padding: 2px 8px;
}
.hs-founder-badge {
    font-size: 11px;
    background: #fff8ee;
    color: #854F0B;
    border: 1px solid #EF9F27;
    border-radius: 4px;
    padding: 2px 8px;
}

/* --- Divider --- */
.hs-divider {
    border: none;
    border-top: 1px solid rgba(0,0,0,.08);
    margin: 0;
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .hs-tool-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .hs-section {
        padding: 40px 0;
    }
    .hs-title {
        font-size: 1.3rem;
    }
    .hs-tool-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575px) {
    .hs-tool-grid {
        grid-template-columns: 1fr 1fr;
    }
}