/* Final online tools rendering fixes loaded after the main stylesheet. */
.tools .card {
    overflow: visible !important;
}

.tools .card-header {
    align-items: center !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 252, 0.96)) !important;
    border-bottom: 1px solid rgba(184, 198, 216, 0.72) !important;
    display: grid !important;
    gap: 0.68rem !important;
    grid-template-columns: 38px minmax(0, 1fr) 32px !important;
    min-height: 64px !important;
    overflow: visible !important;
    padding: 0.78rem 0.9rem !important;
}

.tools .card-header .tool-card-icon {
    align-items: center !important;
    background: linear-gradient(135deg, #13243d, color-mix(in srgb, var(--tool-accent, #2458d3) 40%, #13243d)) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    display: inline-flex !important;
    height: 38px !important;
    justify-content: center !important;
    margin: 0 !important;
    min-width: 38px !important;
    width: 38px !important;
}

.tools .card-header .tool-card-icon i {
    color: inherit !important;
    display: block !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

.tools .card-header > span:not(.tool-card-icon) {
    color: #13243d !important;
    display: block !important;
    font-size: clamp(0.88rem, 1.2vw, 0.98rem) !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    min-width: 0 !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
    white-space: normal !important;
}

.tools .card-header i[data-bs-toggle="popover"] {
    align-items: center !important;
    background: #eaf1ff !important;
    border: 1px solid #c8d7f0 !important;
    border-radius: 999px !important;
    color: #2458d3 !important;
    display: inline-flex !important;
    font-size: 0.96rem !important;
    height: 32px !important;
    justify-content: center !important;
    justify-self: end !important;
    line-height: 1 !important;
    margin: 0 !important;
    width: 32px !important;
}

.tools .tool-card-intro {
    align-items: center !important;
    display: inline-flex !important;
    margin-bottom: 0.2rem !important;
    max-width: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0.38rem !important;
    width: auto !important;
}

.tools .tool-card-intro p {
    display: none !important;
}

.tools .tool-card-badge {
    align-items: center !important;
    background: linear-gradient(135deg, #13243d, color-mix(in srgb, var(--tool-accent, #2458d3) 34%, #13243d)) !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    display: inline-flex !important;
    gap: 0.38rem !important;
    max-width: 100% !important;
    min-height: 30px !important;
    overflow: visible !important;
    padding: 0.38rem 0.68rem !important;
    white-space: nowrap !important;
}

.tools .tool-card-badge::before,
.tools .tool-card-badge::after {
    display: none !important;
}

.tools .tool-card-badge i,
.tools .tool-card-badge > span {
    color: inherit !important;
    display: inline-block !important;
    line-height: 1 !important;
    position: static !important;
}

.tools .tool-card-badge i {
    font-size: 0.78rem !important;
}

.tools .tool-card-badge > span {
    font-size: 0.72rem !important;
    font-weight: 860 !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

@media (max-width: 576px) {
    .tools .card-header {
        gap: 0.55rem !important;
        grid-template-columns: 34px minmax(0, 1fr) 30px !important;
        min-height: 58px !important;
        padding: 0.7rem 0.78rem !important;
    }

    .tools .card-header .tool-card-icon {
        height: 34px !important;
        min-width: 34px !important;
        width: 34px !important;
    }

    .tools .card-header > span:not(.tool-card-icon) {
        font-size: 0.9rem !important;
    }

    .tools .card-header i[data-bs-toggle="popover"] {
        height: 30px !important;
        width: 30px !important;
    }
}