/* ================================================================
   PLATFORM / TABS  — Pill bar style, solid colors, no gradients
   ================================================================ */

/* ── Tab pill bar container ── */
.tab-area {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

/* ── Individual tab button ── */
.tab-area button.tab__button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}

/* remove the pseudo underline from old design */
.tab-area button.tab__button::before,
.tab-area button.tab__button::after {
    display: none !important;
}

/* ── Hover state ── */
.tab-area button.tab__button:hover {
    background: #e2e8f0;
    color: #334155;
}

/* ── Active state — solid Royal Blue fill ── */
.tab-area button.tab__button.active {
    background: #4169E1;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(65, 105, 225, 0.28);
}

/* icon wrapper inside active tab */
.tab-area button.tab__button.active span {
    background: rgba(255, 255, 255, 0.20) !important;
    border-color: transparent !important;
}

/* icon wrapper inside inactive tab */
.tab-area button.tab__button span {
    background: #e2e8f0;
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease;
    flex-shrink: 0;
}

/* ── Feature row hover number dot ── */
.feature-row:hover > div:first-child {
    background: #4169E1 !important;
    color: #ffffff !important;
}

/* ── Tab variant 2 / 3 (legacy) ── */
.tab__button__2:hover,
.tab__button__2.active {
    border: 2px solid #4169E1 !important;
    color: #4169E1;
    background: #eef2ff;
}

.tab__button__3,
.tab__button__3:hover,
.tab__button__3.active {
    border: 1px solid transparent !important;
}