/* ══ PK Petrol Prices – Frontend Stylesheet ══ */
:root {
    --pkpp-green:    #2F9731;
    --pkpp-green-d:  #1e6b20;
    --pkpp-green-xl: #f0faf0;
    --pkpp-green-l:  #e8f5e9;
    --pkpp-green-m:  #c8e6c9;
    --pkpp-red:      #e53935;
    --pkpp-red-l:    #ffebee;
    --pkpp-amber:    #f57c00;
    --pkpp-amber-l:  #fff8e1;
    --pkpp-text:     #1a1a1a;
    --pkpp-muted:    #6b7280;
    --pkpp-border:   #e5e7eb;
    --pkpp-white:    #ffffff;
    --pkpp-radius:   12px;
    --pkpp-shadow:   0 4px 20px rgba(0,0,0,.08);
}

/* ── Section Wrapper ── */
.pkpp-section {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--pkpp-text);
    margin: 0 0 40px;
    padding: 32px;
    background: var(--pkpp-white);
    border: 1px solid var(--pkpp-border);
    border-radius: var(--pkpp-radius);
    box-shadow: var(--pkpp-shadow);
}

/* ── Section Header ── */
.pkpp-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--pkpp-green-l);
}
.pkpp-header-icon { font-size: 2.4rem; line-height: 1; }
.pkpp-section-title {
    margin: 0 0 4px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--pkpp-green-d);
    line-height: 1.2;
}
.pkpp-effective { margin: 0; color: var(--pkpp-muted); font-size: .9rem; }
.pkpp-effective strong { color: var(--pkpp-green); }

/* ════════════════════════════════
   CURRENT PRICES – Cards
═════════════════════════════════ */
.pkpp-price-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.pkpp-price-card {
    background: linear-gradient(135deg, var(--pkpp-green-xl) 0%, #fff 100%);
    border: 1px solid var(--pkpp-green-m);
    border-radius: 10px;
    padding: 20px 16px;
    text-align: center;
    transition: transform .2s, box-shadow .2s;
}
.pkpp-price-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(47,151,49,.12);
}

.pkpp-fuel-name {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pkpp-green-d);
    margin-bottom: 10px;
}

.pkpp-current-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}
.pkpp-currency { font-size: .85rem; font-weight: 600; color: var(--pkpp-muted); }
.pkpp-amount   { font-size: 2rem; font-weight: 800; color: var(--pkpp-green-d); line-height: 1; }
.pkpp-unit     { font-size: .78rem; color: var(--pkpp-muted); }

.pkpp-prev-row {
    font-size: .78rem;
    color: var(--pkpp-muted);
    margin-bottom: 10px;
}
.pkpp-prev-price { font-weight: 600; }

/* Change Badges */
.pkpp-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: .73rem;
    font-weight: 700;
}
.pkpp-badge-up   { background: var(--pkpp-red-l);   color: var(--pkpp-red);   }
.pkpp-badge-down { background: var(--pkpp-green-l);  color: var(--pkpp-green-d); }
.pkpp-badge-same { background: var(--pkpp-amber-l);  color: var(--pkpp-amber); }

/* ── Prices Table ── */
.pkpp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    border-radius: 10px;
    overflow: hidden;
}
.pkpp-table thead th {
    background: var(--pkpp-green);
    color: #fff;
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pkpp-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pkpp-border);
    vertical-align: middle;
}
.pkpp-table tbody tr:last-child td { border-bottom: none; }
.pkpp-table tbody tr:hover { background: var(--pkpp-green-xl); }
.pkpp-old-price { color: var(--pkpp-muted); text-decoration: line-through; }
.pkpp-new-price { font-weight: 700; color: var(--pkpp-green-d); }

/* Inline badges in table */
.pkpp-badge { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pkpp-up   { background: var(--pkpp-red-l);   color: var(--pkpp-red);    border-radius: 20px; padding: 3px 10px; font-size:.78rem; font-weight:700; }
.pkpp-down { background: var(--pkpp-green-l);  color: var(--pkpp-green-d); border-radius: 20px; padding: 3px 10px; font-size:.78rem; font-weight:700; }
.pkpp-same { background: var(--pkpp-amber-l);  color: var(--pkpp-amber);  border-radius: 20px; padding: 3px 10px; font-size:.78rem; font-weight:700; }

.pkpp-source-note {
    margin: 16px 0 0;
    font-size: .84rem;
    color: var(--pkpp-muted);
    background: var(--pkpp-green-xl);
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid var(--pkpp-green);
}

/* ════════════════════════════════
   HISTORY TABLE
═════════════════════════════════ */
.pkpp-history-wrapper {
    max-height: 520px;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid var(--pkpp-border);
}
.pkpp-history-wrapper::-webkit-scrollbar { width: 6px; }
.pkpp-history-wrapper::-webkit-scrollbar-track { background: #f5f5f5; }
.pkpp-history-wrapper::-webkit-scrollbar-thumb { background: var(--pkpp-green-m); border-radius: 3px; }

.pkpp-history-table thead th:first-child  { border-radius: 10px 0 0 0; }
.pkpp-history-table thead th:last-child   { border-radius: 0 10px 0 0; }

.pkpp-latest-row td { background: var(--pkpp-green-l) !important; font-weight: 700; }

.pkpp-current-tag {
    display: inline-block;
    background: var(--pkpp-green);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 6px;
    vertical-align: middle;
}

.pkpp-trend { font-weight: 700; font-size: .9rem; }
.pkpp-trend.up   { color: var(--pkpp-red); }
.pkpp-trend.down { color: var(--pkpp-green); }
.pkpp-trend.same { color: var(--pkpp-muted); }

/* ════════════════════════════════
   FAQ ACCORDION
═════════════════════════════════ */
.pkpp-accordion { display: flex; flex-direction: column; gap: 10px; }

.pkpp-accordion-item {
    border: 1px solid var(--pkpp-border);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.pkpp-accordion-item.pkpp-open { box-shadow: 0 4px 16px rgba(47,151,49,.1); }
.pkpp-accordion-item.pkpp-open .pkpp-accordion-toggle { background: var(--pkpp-green); color: #fff; }
.pkpp-accordion-item.pkpp-open .pkpp-q-num { background: rgba(255,255,255,.2); color: #fff; }
.pkpp-accordion-item.pkpp-open .pkpp-accordion-icon { transform: rotate(45deg); }

.pkpp-accordion-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--pkpp-white);
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: .95rem;
    font-weight: 600;
    color: var(--pkpp-text);
    transition: background .2s, color .2s;
}
.pkpp-accordion-toggle:hover { background: var(--pkpp-green-xl); }

.pkpp-q-num {
    flex-shrink: 0;
    background: var(--pkpp-green-l);
    color: var(--pkpp-green-d);
    font-size: .78rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
}
.pkpp-q-text { flex: 1; }
.pkpp-accordion-icon {
    flex-shrink: 0;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    transition: transform .25s;
}

.pkpp-accordion-body {
    padding: 0 20px 18px 20px;
    font-size: .9rem;
    color: var(--pkpp-muted);
    line-height: 1.7;
    border-top: 1px solid var(--pkpp-border);
}
.pkpp-accordion-body p { margin: 12px 0 0; }

/* ── Responsive ── */
@media (max-width: 640px) {
    .pkpp-section { padding: 20px 16px; }
    .pkpp-section-title { font-size: 1.2rem; }
    .pkpp-price-cards { grid-template-columns: 1fr 1fr; }
    .pkpp-amount { font-size: 1.6rem; }
    .pkpp-section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 400px) {
    .pkpp-price-cards { grid-template-columns: 1fr; }
}