/* ==========================================================================
   Typix Pricing Table – Elementor Widget
   Based on R&D packaging spec (packaging.html)
   ========================================================================== */

/* ── Wrapper ── */
.typix-pricing-wrapper {
    --tp-bg: #f5f5f7;
    --tp-surface: #ffffff;
    --tp-border: #e8e8ec;
    --tp-text: #1a1a2e;
    --tp-muted: #7a7a8c;
    --tp-radius: 16px;
    --tp-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
    color: var(--tp-text);
    width: 100%;
    margin: 0 auto;
}

/* ── Table card ── */
.tp-table {
    background: var(--tp-surface);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
    overflow: visible;
}

/* ── Header row ── */
.tp-headers {
    display: grid;
    grid-template-columns: 220px repeat(4, 1fr);
    border-bottom: 2px solid var(--tp-border);
}

.tp-empty {
    padding: 28px 16px;
}

.tp-header {
    padding: 28px 16px 20px;
    text-align: center;
    position: relative;
    border-left: 1px solid var(--tp-border);
}

.tp-header.tp-popular {
    background: var(--tp-accent, #6c5ce7);
    color: #fff;
    box-shadow: 0 8px 32px rgba(108, 92, 231, 0.35);
    z-index: 2;
}

/* ── Popular badge ── */
.tp-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #241f48;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 99px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

/* ── Plan name ── */
.tp-plan-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.tp-popular .tp-plan-name {
    color: #fff;
}

/* ── Plan price ── */
.tp-plan-price {
    font-size: 0.85rem;
    color: var(--tp-muted);
    margin-bottom: 16px;
}

.tp-plan-price strong {
    font-size: 1rem;
    color: var(--tp-text);
    font-weight: 600;
}

.tp-popular .tp-plan-price {
    color: rgba(255, 255, 255, 0.75);
}

.tp-popular .tp-plan-price strong {
    color: #fff;
}

/* ── Buttons ── */
.tp-btn {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 99px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    border: 1.5px solid var(--tp-border);
    background: transparent;
    color: var(--tp-text);
    width: 100%;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

.tp-btn:hover {
    background: var(--tp-bg);
    color: var(--tp-text);
    text-decoration: none;
}

.tp-btn-current {
    background: var(--tp-bg);
    color: var(--tp-muted);
}

.tp-btn-primary {
    background: var(--tp-accent, #6c5ce7);
    color: #fff;
    border-color: var(--tp-accent, #6c5ce7);
}

.tp-btn-primary:hover {
    filter: brightness(0.9);
    color: #fff;
    text-decoration: none;
}

.tp-popular .tp-btn {
    background: #fff;
    color: var(--tp-accent, #6c5ce7);
    border-color: #fff;
    font-weight: 700;
}

.tp-popular .tp-btn:hover {
    background: var(--tp-accent-light, #ede9ff);
    border-color: var(--tp-accent-light, #ede9ff);
    color: var(--tp-accent, #6c5ce7);
}

/* ── Section headers ── */
.tp-section-label {
    display: grid;
    grid-template-columns: 220px repeat(4, 1fr);
    background: var(--tp-bg);
    border-top: 1px solid var(--tp-border);
}

.tp-section-title {
    padding: 10px 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tp-muted);
    grid-column: 1 / -1;
}

/* ── Feature rows ── */
.tp-feature-row {
    display: grid;
    grid-template-columns: 220px repeat(4, 1fr);
    border-top: 1px solid var(--tp-border);
    transition: background 0.12s;
}

.tp-feature-row:hover {
    background: #fafafa;
}

.tp-feature-label {
    padding: 14px 20px;
    font-size: 0.85rem;
    color: var(--tp-text);
    display: flex;
    align-items: center;
}

/* ── Feature cells ── */
.tp-cell {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--tp-border);
    font-size: 0.82rem;
    color: var(--tp-text);
    text-align: center;
}

.tp-cell.tp-popular-col {
    background: var(--tp-accent-light, #f3f0ff);
}

/* ── Cell value types ── */
.tp-check {
    color: var(--tp-check, #00b894);
    font-size: 1rem;
    font-weight: 700;
    margin-right: 5px;
}

.tp-value-text {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.tp-muted-text {
    color: var(--tp-muted);
    font-style: italic;
    font-size: 0.78rem;
    font-weight: 400;
}

.tp-dash {
    color: #ccc;
    font-size: 1.1rem;
}

.tp-multi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

/* ── Bottom banner ── */
.tp-banner {
    margin-top: 20px;
    background: var(--tp-surface);
    border-radius: var(--tp-radius);
    box-shadow: var(--tp-shadow);
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.tp-banner-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tp-banner-text strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tp-text);
}

.tp-banner-text span {
    font-size: 0.88rem;
    color: var(--tp-muted);
}

.tp-btn-devis {
    display: inline-block;
    background: var(--tp-banner-btn, #3d8b85);
    color: #fff !important;
    border: none;
    padding: 11px 24px;
    border-radius: 99px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease;
    text-decoration: none;
}

.tp-btn-devis:hover {
    filter: brightness(0.85);
    color: #fff;
    text-decoration: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .typix-pricing-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tp-table {
        min-width: 640px;
    }

    .tp-headers,
    .tp-section-label,
    .tp-feature-row {
        grid-template-columns: 130px repeat(4, 1fr);
    }

    .tp-feature-label {
        font-size: 0.75rem;
        padding: 12px 10px;
    }

    .tp-cell {
        padding: 12px 6px;
        font-size: 0.73rem;
    }

    .tp-plan-name {
        font-size: 0.9rem;
    }

    .tp-plan-price {
        font-size: 0.72rem;
    }

    .tp-btn {
        font-size: 0.7rem;
        padding: 6px 10px;
    }

    .tp-banner {
        flex-direction: column;
        text-align: center;
    }
}