/* ============================================
   AGP Rate Table Module — ratetable.css v1.2.0
   Bootstrap-first: all colors fall back to --bs-*
   template variables. Module pickers override via
   --agp-rt-* when set.
   ============================================ */

/* ---- Base ---- */
.agp-rt {
    font-family: var(--agp-rt-font-body, var(--bs-body-font-family, -apple-system, sans-serif));
    color: var(--agp-rt-primary, var(--bs-body-color, #212529));
    -webkit-font-smoothing: antialiased;
}

/* ============================================
   TIER HEADER CARDS (unified card wrapper)
   ============================================ */
.agp-rt-card-wrap {
    background-color: var(--agp-rt-surface, #fff);
    border: 1px solid var(--agp-rt-border, var(--bs-border-color, rgba(0, 0, 0, 0.1)));
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    overflow: hidden;
    box-shadow: var(--bs-box-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
    margin-bottom: 16px;
}

/* Featured tier — uses bg-body-secondary pattern from article HTML */
.agp-rt-tier--featured {
    background-color: var(--agp-rt-accent-light, var(--bs-secondary-bg, #e2e3e5));
}

/* Vertical dividers */
.agp-rt-tier--divider {
    box-shadow: inset 1px 0 0 0 var(--agp-rt-border, var(--bs-border-color, rgba(0, 0, 0, 0.1)));
}

.agp-rt-tier--featured.agp-rt-tier--divider {
    box-shadow: inset 1px 0 0 0 var(--agp-rt-border, var(--bs-border-color, rgba(0, 0, 0, 0.1))),
                inset -1px 0 0 0 var(--agp-rt-border, var(--bs-border-color, rgba(0, 0, 0, 0.1)));
}

/* Accent bar */
.agp-rt-tier__accent {
    height: 3px;
    background-color: var(--agp-rt-accent, var(--bs-primary, #0d6efd));
}

/* Content area */
.agp-rt-tier__content {
    padding: 25px 24px 28px;
    text-align: center;
}

.agp-rt-tier__content--plain {
    padding: 28px 24px;
}

/* Badge — bg-light pattern from article HTML */
.agp-rt-tier__badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--agp-rt-accent, var(--bs-primary, #0d6efd));
    background-color: var(--agp-rt-accent-badge, var(--bs-light, #f8f9fa));
    border-radius: 100px;
    padding: 3px 10px;
    margin-bottom: 10px;
}

.agp-rt-tier__name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--agp-rt-primary, var(--bs-body-color, #212529));
    margin-bottom: 4px;
}

.agp-rt-tier__detail {
    font-size: 0.8125rem;
    color: var(--agp-rt-text-muted, var(--bs-secondary-color, rgba(0, 0, 0, 0.5)));
    margin-bottom: 12px;
    line-height: 1.4;
}

.agp-rt-tier__rate-value {
    font-family: var(--agp-rt-font-display, Georgia, serif);
    font-size: 2.25rem;
    color: var(--agp-rt-primary, var(--bs-body-color, #212529));
    line-height: 1;
}

.agp-rt-tier__rate-value--accent {
    color: var(--agp-rt-accent, var(--bs-primary, #0d6efd));
}

.agp-rt-tier__rate-label {
    font-size: 0.8125rem;
    color: var(--agp-rt-text-muted, var(--bs-secondary-color, rgba(0, 0, 0, 0.5)));
    font-weight: 500;
}

.agp-rt-tier__rate-note {
    font-size: 0.75rem;
    color: var(--agp-rt-text-light, var(--bs-tertiary-color, rgba(0, 0, 0, 0.35)));
    margin-top: 4px;
}

/* ============================================
   DATA TABLE
   ============================================ */
.agp-rt-table-wrap {
    background-color: var(--agp-rt-surface, #fff);
    border: 1px solid var(--agp-rt-border, var(--bs-border-color, rgba(0, 0, 0, 0.1)));
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    overflow: hidden;
    box-shadow: var(--bs-box-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
}

.agp-rt-table {
    font-size: 0.9375rem;
}

/* Neutralize Bootstrap 5's table variable overlay system */
.agp-rt .agp-rt-table {
    --bs-table-bg: transparent;
    --bs-table-color: inherit;
    --bs-table-bg-state: transparent;
    --bs-table-bg-type: transparent;
    --bs-table-accent-bg: transparent;
}

.agp-rt .agp-rt-table tbody tr,
.agp-rt .agp-rt-table tbody td {
    box-shadow: none;
}

/* Table header — bg-light pattern */
.agp-rt-th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--agp-rt-text-muted, var(--bs-secondary-color, rgba(0, 0, 0, 0.5)));
    padding: 14px 20px;
    border-bottom: 1px solid var(--agp-rt-border, var(--bs-border-color, rgba(0, 0, 0, 0.1)));
    background-color: var(--agp-rt-surface-alt, var(--bs-light, #f8f9fa));
}

/* Higher specificity to beat Bootstrap .table th */
.agp-rt-table thead .agp-rt-th {
    background-color: var(--agp-rt-surface-alt, var(--bs-light, #f8f9fa));
    padding: 14px 20px;
    border-bottom: 1px solid var(--agp-rt-border, var(--bs-border-color, rgba(0, 0, 0, 0.1)));
}

.agp-rt-th--term { text-align: left; }
.agp-rt-th--rate { text-align: center; }

/* Table cells */
.agp-rt-td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--agp-rt-border-light, var(--bs-border-color, rgba(0, 0, 0, 0.06)));
    vertical-align: middle;
}

/* Higher specificity to beat Bootstrap .table td */
.agp-rt .agp-rt-table tbody td.agp-rt-td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--agp-rt-border-light, var(--bs-border-color, rgba(0, 0, 0, 0.06)));
    vertical-align: middle;
}

/* Last row: no bottom border */
.agp-rt .agp-rt-table tbody tr:last-child td.agp-rt-td {
    border-bottom: none;
}

.agp-rt-td--term {
    font-weight: 600;
    color: var(--agp-rt-primary, var(--bs-body-color, #212529));
    white-space: nowrap;
}

.agp-rt-td--rate {
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--agp-rt-primary, var(--bs-body-color, #212529));
}

.agp-rt-td--na {
    color: var(--agp-rt-text-light, var(--bs-tertiary-color, rgba(0, 0, 0, 0.35)));
    font-weight: 400;
}

.agp-rt-td--check {
    color: var(--agp-rt-success, var(--bs-success, #198754));
    font-weight: 600;
}

/* Best rate values — text-primary pattern */
.agp-rt-td--best {
    color: var(--agp-rt-accent, var(--bs-primary, #0d6efd));
    font-weight: 700;
}

/* Highlighted best-rate row — bg-body-secondary pattern */
.agp-rt-row--best {
    background-color: var(--agp-rt-accent-highlight, var(--bs-secondary-bg, #e2e3e5));
}

.agp-rt-row--best:hover {
    background-color: var(--agp-rt-accent-badge, var(--bs-tertiary-bg, #dee2e6));
}

/* Row hover (non-best rows) */
.agp-rt-table tbody tr:hover:not(.agp-rt-row--best) {
    background-color: var(--agp-rt-surface-alt, var(--bs-light, #f8f9fa));
}

/* Higher specificity to beat Bootstrap .table overrides */
.agp-rt .agp-rt-table tbody tr.agp-rt-row--best {
    background-color: var(--agp-rt-accent-highlight, var(--bs-secondary-bg, #e2e3e5));
}

.agp-rt .agp-rt-table tbody tr.agp-rt-row--best:hover {
    background-color: var(--agp-rt-accent-badge, var(--bs-tertiary-bg, #dee2e6));
}

/* Best rate badge — bg-light pattern */
.agp-rt-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--agp-rt-accent, var(--bs-primary, #0d6efd));
    background-color: var(--agp-rt-accent-badge, var(--bs-light, #f8f9fa));
    border-radius: 4px;
    padding: 2px 6px;
    margin-left: 8px;
    vertical-align: middle;
}

/* Table caption */
.agp-rt-caption {
    font-size: 0.75rem;
    color: var(--agp-rt-text-light, var(--bs-tertiary-color, rgba(0, 0, 0, 0.35)));
    padding: 10px 20px;
    border-top: 1px solid var(--agp-rt-border-light, var(--bs-border-color, rgba(0, 0, 0, 0.06)));
    background-color: var(--agp-rt-surface-alt, var(--bs-light, #f8f9fa));
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 767.98px) {
    .agp-rt-card-wrap .col-md-4,
    .agp-rt-card-wrap .col-md-6 {
        border-bottom: 1px solid var(--agp-rt-border, var(--bs-border-color, rgba(0, 0, 0, 0.1)));
    }

    .agp-rt-card-wrap .col-md-4:last-child,
    .agp-rt-card-wrap .col-md-6:last-child {
        border-bottom: none;
    }

    .agp-rt-tier--divider { box-shadow: none; }
    .agp-rt-tier--featured.agp-rt-tier--divider { box-shadow: none; }

    .agp-rt-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .agp-rt-table { min-width: 520px; }

    .agp-rt-th,
    .agp-rt-td {
        padding: 12px 14px;
        font-size: 0.875rem;
    }

    .agp-rt-td--term { white-space: normal; }
}