/**
 * VegSpoons global brand theme
 * Loaded after main CSS on frontend + admin.
 */
:root {
    --themeColor: #27ae60;
    --skinColor: #27ae60;
    --skinColor2: #27ae60;
    --vs-brand: #27ae60;
    --vs-brand-dark: #1e8449;
    --vs-brand-light: #2ecc71;
    --vs-brand-soft: #dcfce7;
    --vs-brand-border: #86efac;
    --vs-brand-muted: rgba(39, 174, 96, 0.08);
    --vs-brand-ring: rgba(39, 174, 96, 0.15);
}

/* ---- Badges & category chips ---- */
.at-category-badge {
    background: var(--vs-brand-soft) !important;
    border: 1px solid var(--vs-brand-border) !important;
    color: var(--vs-brand-dark) !important;
}

.rh-badge-cat {
    color: var(--vs-brand-dark) !important;
    background: var(--vs-brand-soft) !important;
    border-color: var(--vs-brand-border) !important;
}

.badge-category {
    background: var(--vs-brand-soft) !important;
    border-color: rgba(39, 174, 96, 0.25) !important;
    color: var(--vs-brand-dark) !important;
}

.badge-primary-light {
    color: var(--vs-brand-dark) !important;
    background: var(--vs-brand-soft) !important;
}

/* ---- Buttons (legacy purple class names) ---- */
.at-btn-purple,
.at-btn-purple:hover,
.at-btn-purple:focus,
.at2-btn-purple,
.at2-btn-purple:hover,
.at2-btn-purple:focus {
    background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%) !important;
    color: aliceblue !important;
    border: none !important;
}

/* ---- Links & nav accents ---- */
.header-nav-list .first-a.active,
.header-nav-list .first-a:hover {
    color: var(--themeColor);
}

/* ---- Form focus (Bootstrap) ---- */
.form-control:focus,
.form-select:focus {
    border-color: var(--vs-brand);
    box-shadow: 0 0 0 0.2rem var(--vs-brand-ring);
}

/* ---- Active favorites / bookmarks ---- */
.grid-list-bookmark.active svg path,
.blog-fav-btn.active svg path,
.white-bookmark.active svg path {
    fill: var(--vs-brand) !important;
}

/* ---- Pagination ---- */
.page-link:focus {
    box-shadow: 0 0 0 0.2rem var(--vs-brand-ring);
}

/* ---- Checkbox / radio accent ---- */
.form-check-input:checked {
    background-color: var(--vs-brand);
    border-color: var(--vs-brand);
}

.form-check-input:focus {
    border-color: var(--vs-brand);
    box-shadow: 0 0 0 0.2rem var(--vs-brand-ring);
}

/* ---- Progress bars ---- */
.progress-bar {
    background-color: var(--vs-brand);
}

/* ---- Text utilities using old purple vars ---- */
.text-primary {
    color: var(--vs-brand) !important;
}

.bg-primary {
    background-color: var(--vs-brand) !important;
}

.border-primary {
    border-color: var(--vs-brand) !important;
}

/* ---- Footer (main site) ---- */
.main-footer-section .footer-middle-nav ul li a:hover,
.main-footer-section .footer-middle-contact ul li a:hover,
.footer-middle-nav ul li a:hover {
    color: #2ecc71 !important;
}

.main-footer-section .footer-bottom-social ul li a:hover path,
.footer-bottom-social ul li a:hover path {
    fill: #2ecc71 !important;
}

.main-footer-section .footer-input-wrap button:hover,
.footer-input-wrap button:hover {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
    color: aliceblue !important;
}

/* Events / offers listing CTA bands */
.cta-section {
    background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%) !important;
}

.cta-btn,
.cta-btn:hover {
    color: #1e8449 !important;
}

/* Food business listing cards — open / closed / permanently closed */
.card-light-text.theme-light.open,
.card-light-text.open,
.featured-listings-section .card-light-text.open {
    background: #27ae60 !important;
    background-color: #27ae60 !important;
    color: #fff !important;
}

.card-light-text.theme-light.closed:not(.permanently-closed),
.card-light-text.closed:not(.permanently-closed),
.featured-listings-section .card-light-text.closed:not(.permanently-closed) {
    background: #6b7280 !important;
    background-color: #6b7280 !important;
    color: #fff !important;
}

/* Detail page views counter (food business, offers, events) */
.vs-views-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vs-views-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 8px;
    color: var(--vs-brand, #27ae60);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.vs-views-stat__icon .bi {
    font-size: 1rem;
    line-height: 1;
}

.vs-views-stat__content h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    color: #111827;
}

.vs-views-stat__label {
    font-size: 0.875rem;
    font-weight: 400;
    color: #6b7280;
}

.views-wrapper--stat {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    gap: 0 !important;
    flex: 0 1 auto !important;
}

.event-card-views .bi-eye-fill {
    color: var(--vs-brand, #27ae60);
    font-size: 0.95rem;
}

.card-light-text.theme-light.permanently-closed,
.card-light-text.permanently-closed,
.featured-listings-section .card-light-text.permanently-closed {
    background: #b91c1c !important;
    background-color: #b91c1c !important;
    color: #fff !important;
}

/* ---- Global mobile overflow protection ---- */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Keep common media/content blocks inside the viewport */
img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

/* Prevent wide tables/code blocks from forcing page-level horizontal scroll */
table {
    width: 100%;
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

pre,
code {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Flex/grid children can overflow on small devices unless min-width is reset */
.row > *,
[class*="col-"],
.d-flex > *,
.flex-wrap > * {
    min-width: 0;
}