/* ── GCP Brand Color Variables ───────────────────────────────────────────── */
:root {
    --gcp-blue:        #4285F4;
    --gcp-green:       #34A853;
    --gcp-dark-green:  #1E8E3E;
    --gcp-orange:      #FF6D00;
    --gcp-red:         #EA4335;
    --gcp-yellow:      #FBBC04;
    --gcp-purple:      #9334E6;
    --gcp-dark-purple: #681DA8;
    /* Pricing model colors */
    --price-od:    #4285F4;
    --price-spot:  #FF6D00;
    --price-cud1:  #34A853;
    --price-cud3:  #1E8E3E;
    --price-flex1: #9334E6;
    --price-flex3: #681DA8;
}

/* ── Category tabs ───────────────────────────────────────────────────────── */
.cat-tab {
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #6c757d;
    border-radius: 0;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 10px 5px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color .15s, color .15s;
}
.cat-tab:hover  { border-bottom-color: var(--gcp-blue); color: var(--gcp-blue); }
.cat-tab.active { border-bottom-color: var(--gcp-blue); color: var(--gcp-blue); }

/* ── Series cards grid — responsive: 3-up on desktop, 2-up on mobile ─────── */
.series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 4px; }
.series-card {
    position: relative;
    border: 1.5px solid var(--bs-border-color, #dee2e6);
    border-radius: 6px;
    background: var(--bs-card-bg, #fff);
    padding: 4px 2px 3px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.series-card:hover    { border-color: var(--gcp-blue); box-shadow: 0 2px 6px rgba(66,133,244,.18); }
.series-card.selected { border-color: var(--gcp-blue); background: rgba(66,133,244,.15); }
.series-card:focus    { outline: 2px solid var(--gcp-blue); outline-offset: 1px; }
.series-card .series-name  { font-size: 0.7rem; font-weight: 700; line-height: 1.1; }
.series-card .series-sub   { font-size: 0.55rem; color: var(--bs-secondary-color, #6c757d); line-height: 1.2; margin-top: 1px; }
.series-card .series-badge { position: absolute; top: -6px; right: -6px; font-size: 0.55rem; padding: 1px 5px; }
.series-card .series-elig  { display: flex; justify-content: center; gap: 3px; margin-top: 4px; }
.elig-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    font-size: 0.6rem; font-weight: 800; line-height: 1; color: #fff;
    flex-shrink: 0;
}
.elig-spot { background: #0097A7; }
.elig-cud  { background: var(--gcp-green); }
.series-legend {
    font-size: 0.65rem; color: var(--bs-secondary-color, #6c757d);
    margin-top: 4px; display: flex; align-items: center; gap: 4px;
}
.series-legend .elig-dot { width: 12px; height: 12px; font-size: 0.55rem; }

/* ── TomSelect region selector — shared across all pages ─────────────────── */
.ts-wrapper { margin-bottom: 0 !important; }
.ts-control.region-secondary {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    background-color: var(--bs-secondary-bg);
    border-style: dashed;
}

/* ── Quick-select preset buttons (disk size, vCPU, RAM) ──────────────────── */
.btn-quick {
    font-size: 0.7rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* ── Loading overlay (position:absolute over card-body) ─────────────────── */
.loading-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bs-card-bg, #fff); opacity: 0.88;
    z-index: 100; border-radius: inherit;
    transition: opacity 0.15s ease;
}
.loading-overlay.d-none { opacity: 0; }

/* ── Pricing model badges — enforce white text regardless of theme ───────── */
.badge.fw-semibold { color: #fff !important; }

/* ── Shared pricing results table ───────────────────────────────────────── */
.pricing-table { font-size: 0.9rem; table-layout: fixed; width: 100%; }

/* ── Batch / Mig-Center results table: hide Flex CUD cols on smaller screens  */
@media (max-width: 1399px) {
    .batch-results-table th:nth-child(10),
    .batch-results-table th:nth-child(11),
    .batch-results-table td:nth-child(10),
    .batch-results-table td:nth-child(11) {
        display: none;
    }
    .batch-results-table::after {
        content: '';
    }
}