/* NappyHub Price Comparison — Base structural CSS
   Visual colours/fonts are injected inline by NHPC_Style::generate_css() */

.nhpc-wrapper {
    margin: 24px 0;
    overflow: hidden;
    font-size: 14px;
    color: #1f2937;
    /* colors/radius/shadow: from inline style */
}

/* ── Header ── */
.nhpc-header { padding: 11px 16px; }
.nhpc-title  { display: block; font-weight: 700; }

/* ── States ── */
.nhpc-loading {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 16px; font-size: 13px; color: #6b7280;
}
.nhpc-spinner {
    display: inline-block; width: 16px; height: 16px;
    border: 2.5px solid #e5e7eb; border-top-color: #1a8c4e;
    border-radius: 50%; animation: nhpc-spin .8s linear infinite; flex-shrink: 0;
}
@keyframes nhpc-spin { to { transform: rotate(360deg); } }

.nhpc-error { padding: 14px 16px; font-size: 13px; color: #b91c1c; background: #fef2f2; }

/* ── Table ── */
.nhpc-table { width: 100%; border-collapse: collapse; }
.nhpc-table th {
    text-align: left; font-weight: 600; text-transform: uppercase;
    letter-spacing: .5px; white-space: nowrap;
}
.nhpc-table td { vertical-align: middle; }
.nhpc-table tbody tr:last-child td { border-bottom: none !important; }

/* ── Cells ── */
.nhpc-td-rank   { width: 34px; text-align: center; }
.nhpc-medal     { font-size: 16px; }
.nhpc-rank-num  { font-weight: 600; color: #9ca3af; }

.nhpc-td-retailer { min-width: 120px; }
.nhpc-retailer-name {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.nhpc-favicon { width: 16px; height: 16px; border-radius: 2px; flex-shrink: 0; }

.nhpc-td-price { font-weight: 700; white-space: nowrap; }
.nhpc-price-val { display: inline; font-size: 1em; }
.nhpc-savings   { display: block; font-size: 11px; font-weight: 500; margin-top: 2px; }

.nhpc-badge {
    display: inline-block; padding: 2px 8px;
    font-size: 10px; font-weight: 700; letter-spacing: .3px;
    white-space: nowrap; margin-left: 4px;
}

.nhpc-td-stock  { font-size: 12.5px; white-space: nowrap; }
.nhpc-in-stock  { color: #15803d; font-weight: 500; }
.nhpc-out-stock { color: #b91c1c; }

/* ── Buttons ── */
.nhpc-td-action { white-space: nowrap; }
.nhpc-btn-buy, .nhpc-btn-visit {
    display: inline-block; padding: 5px 13px; font-size: 12px;
    font-weight: 700; text-decoration: none; transition: all .15s;
    border: none; cursor: pointer; white-space: nowrap;
}
.nhpc-btn-visit { border: 1.5px solid; background: transparent; font-weight: 600; }

/* ── Empty ── */
.nhpc-empty { padding: 18px; text-align: center; color: #9ca3af; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .nhpc-th-stock, .nhpc-td-stock { display: none; }
}
@media (max-width: 380px) {
    .nhpc-btn-buy, .nhpc-btn-visit { padding: 4px 9px; font-size: 11px; }
    .nhpc-medal { font-size: 14px; }
}