:root {
    --rc-orange: #F36D21;
    --rc-green: #2E8B57;
    --rc-blue: #4DA8FF;
    --rc-cream: #FFF8F2;
    --rc-slate: #14383A;
    --rc-yellow: #FFD54A;
}

/* ============ HERO V2 (branding + search only, centered) ============ */
.rc-hero-v2 {
    position: relative;
    background: linear-gradient(180deg, rgba(20,56,58,0.30), rgba(20,56,58,0.50)), url('/assets/img/hero-bg.jpg');
    background-size: cover;
    background-position: 50% 45%;
    padding: 50px 20px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rc-hero-v2-overlay {
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.rc-hero-v2-title {
    color: #fff;
    font-size: 42px;
    font-weight: 900;
    margin: 0 0 10px;
    line-height: 1.1;
}
.rc-hero-v2-title .rc-accent { color: var(--rc-orange); }
.rc-hero-v2-subtitle {
    color: #f0f0f0;
    font-size: 16px;
    margin: 0 0 24px;
}

.rc-search-v2 {
    display: flex;
    background: #fff;
    border-radius: 30px;
    padding: 6px;
    max-width: 680px;
    margin: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    flex-wrap: wrap;
}
.rc-search-v2-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    min-width: 180px;
}
.rc-search-v2-input input {
    border: none;
    outline: none;
    font-size: 14px;
    width: 100%;
    background: transparent;
}
.rc-search-v2-location {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}
.rc-search-v2-location select {
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
    color: var(--rc-slate);
}
.rc-search-v2-btn {
    background: var(--rc-orange);
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 12px 28px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.rc-search-v2-btn:hover { background: #d95c15; }

.rc-popular-searches {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.rc-popular-label { color: #eee; font-size: 13px; margin-right: 4px; }
.rc-pill {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}
.rc-pill:hover { background: rgba(255,255,255,0.28); }

/* Business Owner CTA — sits cleanly below the hero, no overlap.
   (A negative-margin overlap was tried before, but Popular Searches
   wraps to a different number of lines at different screen widths,
   so a fixed overlap amount collided with it unpredictably. A clean
   gap is more reliable than a clever-but-fragile overlap.) */
.rc-owner-cta {
    position: relative;
    z-index: 5;
    background: #FDEFE3;
    border-radius: 18px;
    padding: 20px 28px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
/* The wrapper owns outer margin/centering/max-width for both the
   one-card (no Ganapati banner) and two-card layouts, so the same rule
   works correctly either way without any redundant/conflicting margin
   on the individual cards themselves. */
.rc-promo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    margin: 0;
    position: relative;
    z-index: 5;
}
.rc-promo-row > .rc-owner-cta,
.rc-promo-row > .rc-ganapati-promo {
    flex: 1 1 380px;
    margin: 0;
}
.rc-ganapati-promo {
    background: linear-gradient(135deg, #FFF3E0, #FFE8CC);
    border-radius: 18px;
    padding: 20px 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.rc-ganapati-promo-icon { flex-shrink: 0; width: 80px; height: 90px; }
.rc-ganapati-promo-icon img { width: 100%; height: 100%; object-fit: contain; }
.rc-ganapati-promo-text { flex: 1; min-width: 180px; }
.rc-ganapati-promo-text h3 { margin: 0 0 2px; font-size: 16px; color: var(--rc-slate); }
.rc-ganapati-promo-text p { margin: 0; font-size: 13px; color: #777; }
.rc-ganapati-promo-btn {
    background: var(--rc-orange);
    color: #fff;
    padding: 10px 18px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}
.rc-ganapati-promo-btn:hover { background: #d95c15; }

/* ============ QUICK ACCESS PANEL: BLOOD / LOST-FOUND / EMERGENCY ============ */
.rc-quickpanel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}
.rc-quickpanel-item {
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rc-quickpanel-icon { font-size: 26px; }
.rc-quickpanel-text h4 { margin: 4px 0 2px; font-size: 15px; color: var(--rc-slate); }
.rc-quickpanel-text p { margin: 0; font-size: 12px; color: #888; line-height: 1.4; }
.rc-quickpanel-btn {
    display: inline-block;
    text-align: center;
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-top: 6px;
}
.rc-quickpanel-btn-red { background: #E24C4C; }
.rc-quickpanel-btn-blue { background: var(--rc-blue); }
.rc-quickpanel-btn-green { background: var(--rc-green); }

@media (max-width: 720px) {
    .rc-quickpanel { grid-template-columns: 1fr; }
}

/* ============ TWO-COLUMN HOMEPAGE LAYOUT: main content (75-78%) + news sidebar (22-25%) ============ */
.rc-homepage-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    align-items: start;
    gap: 28px;
    max-width: 1320px;
    width: calc(100% - 80px);
    margin: 28px auto 0;
}
/* overflow:hidden removed here — it was added a few rounds ago specifically
   to guard against the old custom arrow buttons overflowing, which no
   longer exist. Keeping it risked clipping the carousel at this outer
   level instead of letting its own internal overflow-x:auto handle
   scrolling correctly, which may be why neither drag nor programmatic
   scrolling had any visible effect. */
.rc-homepage-main { min-width: 0; width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: 22px; }
.rc-homepage-sidebar { min-width: 0; width: 100%; }

/* rc-promo-row no longer needs its own max-width/centering — it now just
   fills whatever width .rc-homepage-main (its actual parent) provides. */
.rc-news-sidebar-card {
    position: sticky;
    top: 20px;
    background: #fff;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
}
.rc-news-sidebar-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.rc-news-sidebar-head h3 { margin: 0; font-size: 16px; color: var(--rc-slate); }
.rc-news-sidebar-head a { font-size: 12px; color: var(--rc-orange); font-weight: 600; text-decoration: none; }
.rc-news-sidebar-item {
    display: flex;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.rc-news-sidebar-item:last-of-type { border-bottom: none; }
.rc-news-sidebar-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.rc-news-sidebar-item-body { min-width: 0; }
.rc-news-sidebar-item-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 3px; }
.rc-news-sidebar-tag {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--rc-orange);
    background: var(--rc-cream);
    padding: 1px 7px;
    border-radius: 6px;
    white-space: nowrap;
}
.rc-news-sidebar-time { font-size: 11px; color: #999; white-space: nowrap; }
.rc-news-sidebar-item h4 { margin: 0 0 3px; font-size: 13px; color: var(--rc-slate); line-height: 1.3; }
.rc-news-sidebar-item p { margin: 0; font-size: 12px; color: #888; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rc-news-sidebar-footer { font-size: 11px; color: #999; text-align: center; margin: 10px 0 0; }

@media (max-width: 900px) {
    .rc-homepage-columns { grid-template-columns: 1fr; }
    .rc-homepage-sidebar { width: 100%; }
    .rc-news-sidebar-card { position: static; }
}

/* ============ JOIN COMMUNITY ============ */
.rc-join-community {
    max-width: 1320px;
    margin: 40px auto;
    background: var(--rc-slate);
    border-radius: 20px;
    padding: 28px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.rc-join-community-text h3 { color: #fff; margin: 0 0 4px; font-size: 18px; }
.rc-join-community-text p { color: #cbd5d5; margin: 0 0 12px; font-size: 14px; }
.rc-join-community-btn {
    display: inline-block;
    background: var(--rc-orange);
    color: #fff;
    padding: 10px 22px;
    border-radius: 20px;
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
}
.rc-join-community-btn:hover { background: #d95c15; }
.rc-join-social { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.rc-join-social-label { color: #cbd5d5; font-size: 12px; }
.rc-join-social-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.rc-social-whatsapp:hover { background: #25D366; }
.rc-social-instagram:hover { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.rc-social-facebook:hover { background: #1877F2; }
.rc-join-community-icons { display: flex; gap: 24px; flex-wrap: wrap; }
.rc-join-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
}
.rc-join-icon span {
    font-size: 22px;
    background: rgba(255,255,255,0.12);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rc-owner-cta-icon {
    width: 70px;
    height: 62px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rc-owner-cta-icon img { width: 100%; height: 100%; object-fit: contain; }
.rc-owner-cta-text { flex: 1; min-width: 200px; }
.rc-owner-cta-text h3 { margin: 0 0 2px; font-size: 16px; color: var(--rc-slate); }
.rc-owner-cta-text p { margin: 0; font-size: 13px; color: #777; }
.rc-owner-cta-action { text-align: right; }
.rc-owner-cta-btn {
    display: inline-block;
    background: var(--rc-orange);
    color: #fff;
    padding: 10px 22px;
    border-radius: 22px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.rc-owner-cta-btn:hover { background: #d95c15; }
.rc-owner-cta-note {
    display: block;
    font-size: 11px;
    color: #999;
    margin-top: 6px;
}

/* ============ SHARED SECTION LAYOUT ============ */
.rc-section {
    max-width: 1320px;
    margin: 0 auto;
    padding: 40px 20px 10px;
}
/* When rc-section (Explore Services) is nested inside the two-column main
   column, the outer wrapper already provides horizontal inset — its own
   20px padding would misalign it against the padding-free promo row above
   it. Only applies to this specific nesting; the standalone full-width
   "What's Happening Today" section below the columns keeps its own padding. */
.rc-homepage-main > .rc-section { max-width: none; padding-left: 0; padding-right: 0; padding-top: 0; min-width: 0; }
.rc-section-shaded { background: var(--rc-cream); max-width: 100%; padding: 40px 20px; }
.rc-section-shaded > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
.rc-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}
/* Same nesting-width issue as rc-section itself — when this section head is
   nested inside the narrower main column, its stale 1320px max-width pushes
   the "View All" link (positioned via justify-content:space-between) beyond
   the actually-visible clipped area, making it disappear even though it's
   still technically in the DOM. */
.rc-homepage-main .rc-section-head { max-width: none; }
.rc-section-head h2 { margin: 0; font-size: 22px; color: var(--rc-slate); }
.rc-view-all {
    border: 1px solid #ddd;
    border-radius: 18px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rc-slate);
    text-decoration: none;
    white-space: nowrap;
}
.rc-view-all:hover { background: #f5f5f5; }

/* ============ HORIZONTAL SCROLL: EXPLORE SERVICES ============ */
/* Plain wrapping grid — no horizontal scroll container at all, so there's
   nothing that depends on overflow, drag events, or JS to access every
   category. All items are simply visible at once, wrapping to as many
   rows as needed. This trades some visual compactness for guaranteed
   reliability, after several rounds of a scrolling approach not working
   consistently. */
/* Explore Services is now a standalone section (moved below What's
   Happening Today), so it reuses .rc-explore-hscroll-wrap and
   .rc-explore-arrow directly — the exact same proven structure as
   Explore Belgaum, no longer needing any special handling for a narrow
   nested column, since it's no longer nested next to the News sidebar. */
.rc-hscroll-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    justify-content: flex-start;
    gap: 14px;
    padding: 4px 6px 8px;
    scrollbar-width: none;
    min-width: 0;
}
.rc-hscroll-grid::-webkit-scrollbar { display: none; }
.rc-hscroll-arrow {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rc-slate);
    margin: 0 6px;
}
.rc-hscroll-arrow:hover { background: #f5f5f5; }
.rc-hscroll-item {
    flex: 0 0 auto;
    width: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    text-align: center;
}
.rc-hscroll-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.rc-hscroll-label { font-size: 12px; font-weight: 600; color: var(--rc-slate); line-height: 1.3; }

/* ============ STATS STRIP ICON BADGES ============ */
.rc-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}
.rc-stat-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ============ TODAY PREVIEW CARDS ============ */
.rc-today-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    scrollbar-width: none;
}
.rc-today-scroll::-webkit-scrollbar { display: none; }
.rc-today-card {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 220px;
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.rc-today-card-head { font-weight: 700; font-size: 13px; color: var(--rc-slate); margin-bottom: 8px; }
.rc-today-big { font-size: 22px; font-weight: 800; color: var(--rc-slate); }
.rc-today-sub { font-size: 12px; color: #777; margin-top: 2px; }
.rc-today-meta { font-size: 11px; color: #999; margin-top: 6px; line-height: 1.5; }
.rc-today-link { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--rc-orange); text-decoration: none; }

.rc-today-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.rc-today-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: all 0.2s ease;
}
.rc-today-dot.active { background: var(--rc-orange); width: 18px; border-radius: 4px; }

/* ============ MOBILE ============ */
@media (max-width: 900px) {
    /* Tighter side inset on tablets/phones than the 40px used on desktop */
    .rc-homepage-columns { width: calc(100% - 32px); gap: 20px; }
    /* 5 columns at this width would squeeze each item unreadably narrow —
       step down to a 3-column grid before the phone-width breakpoint takes
       it to a single column. */
    .rc-trust-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    /* Larger, more touch-friendly arrow buttons on mobile — 34px is fine
       for a mouse pointer but tight for a fingertip. Applies to both the
       Explore Services and Featured Businesses horizontal sliders. */
    .rc-hscroll-arrow, .rc-explore-arrow {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

@media (max-width: 720px) {
    .rc-hero-v2-title { font-size: 26px; }
    .rc-hero-v2-subtitle { font-size: 13px; }
    .rc-hero-v2-overlay { max-width: 100%; }
    .rc-search-v2 { flex-direction: column; border-radius: 18px; max-width: 100%; }
    .rc-search-v2-location { border-left: none; border-right: none; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
    .rc-search-v2-btn { border-radius: 14px; margin-top: 4px; }
    .rc-owner-cta { flex-direction: column; text-align: center; margin-top: 20px; padding: 18px; }
    .rc-owner-cta-action { text-align: center; width: 100%; }
    .rc-owner-cta-btn { width: 100%; }
    .rc-section-head h2 { font-size: 18px; }
    .rc-today-dots { display: flex; }

    /* Ganapati card: stack icon/text/button vertically, same treatment
       already used for the Business Owner card right below it. */
    .rc-ganapati-promo { flex-direction: column; text-align: center; padding: 18px; }
    .rc-ganapati-promo-btn { width: 100%; text-align: center; }

    /* Trust strip: down to a single column on actual phone widths */
    .rc-trust-strip { grid-template-columns: 1fr; padding: 16px; gap: 12px; }

    /* News sidebar card: full width, no longer sticky (it's stacked below
       the main column at this width, not beside it). */
    .rc-news-sidebar-card { max-width: 100%; }

    /* Join Community banner: stack the two halves instead of squeezing
       them side by side. */
    .rc-join-community { flex-direction: column; text-align: center; }
    .rc-join-community-icons { justify-content: center; }
}