/* ✅ Common wrapper for all tables */
.gs-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ✅ Common table styling */
.gs-history-table,
.gs-state-city-table,
.gs-other-states {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* ✅ Borders & default cell behavior */
.gs-history-table th,
.gs-history-table td,
.gs-state-city-table th,
.gs-state-city-table td,
.gs-other-states th,
.gs-other-states td {
    border: 1px solid #a5d6a7; /* light green border */
    text-align: left;
    padding: 6px 8px;
    font-size: 14px;
}

/* ✅ Headers */
.gs-history-table th,
.gs-state-city-table th,
.gs-other-states th {
    background: #1b5e20;      /* dark green header */
    color: #fff;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    font-size: 12px;
}

/* ✅ Keep data inline on desktop */
.gs-history-table td,
.gs-state-city-table td,
.gs-other-states td {
    white-space: nowrap;
}

/* ✅ Mobile tweaks */
@media (max-width: 600px) {
    .gs-history-table,
    .gs-state-city-table,
    .gs-other-states {
        table-layout: auto;
        min-width: 100%;
    }

    .gs-history-table th,
    .gs-history-table td,
    .gs-state-city-table th,
    .gs-state-city-table td,
    .gs-other-states th,
    .gs-other-states td {
        font-size: 11px;
        padding: 2px 3px;
        white-space: normal;
    }
}

/* ✅ Trend arrows */
.trend-up {
    color: #c62828; /* red */
    font-weight: bold;
}

.trend-down {
    color: #1b5e20; /* dark green */
    font-weight: bold;
}


/* ===================== */
/* Card container - grid */
/* ===================== */
.gs-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin: 25px 0;
    justify-items: center;
}

/* ===================== */
/* Individual card */
/* ===================== */
.gs-card {
    background: linear-gradient(145deg, #ffffff, #f1f8f4);
    border-radius: 18px;
    padding: 20px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-top: 6px solid transparent;
}

.gs-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

/* ===================== */
/* Category-specific top borders */
/* ===================== */
.gs-card-container-vegetables .gs-card { border-top-color: #1b5e20; } /* Dark Green */
.gs-card-container-fuel .gs-card { border-top-color: #388e3c; }       /* Green */
.gs-card-container-metals .gs-card { border-top-color: #2e7d32; }     /* Deep Green */
.gs-card-container-dairy .gs-card { border-top-color: #a5d6a7; }      /* Light Green */

/* ===================== */
/* Card heading */
/* ===================== */
.gs-card h3 {
    font-size: 20px;
    margin-bottom: 12px;
    color: #1b5e20;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ===================== */
/* Card text */
/* ===================== */
.gs-card p {
    font-size: 15px;
    margin: 6px 0;
    font-weight: 500;
    color: #2e2e2e;
}

.gs-card p:first-of-type {
    font-size: 16px;
    font-weight: 600;
    color: #1b5e20;
}

/* ===================== */
/* Change indicator */
/* ===================== */
.change {
    font-weight: bold;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 12px;
    display: inline-block;
    font-size: 14px;
}
.change.increase { background: #c8e6c9; color: #1b5e20; }
.change.decrease { background: #ffebee; color: #c62828; }
.change.nochange { background: #f1f8f4; color: #444; }


/* ===================== */
/* FAQ Container Styling */
/* ===================== */
.gs-faq-item {
    margin-bottom: 15px;
    padding: 16px 20px;
    border-radius: 12px;
    background: linear-gradient(145deg, #ffffff, #f1f8f4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    cursor: pointer;
}

.gs-faq-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    background: linear-gradient(145deg, #e8f5e9, #ffffff);
}

.gs-faq-item strong {
    display: block;
    font-size: 17px;
    margin-bottom: 8px;
    color: #1b5e20;
    font-weight: 600;
}

.gs-faq-item p {
    font-size: 14px;
    color: #333;
    margin: 0;
    line-height: 1.6;
}