@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
        background-color: transparent;
    }

    50% {
        transform: scale(1.1);
        background-color: rgba(255, 255, 255, 0.1);
    }
}

.animated-pulse {
    animation: pulse 2s infinite;

    &:hover {
        animation: none;
    }
}

.consultation-hero {
    --thumb-size: 48px;
    background: linear-gradient(135deg, hsl(200, 98%, 42%), hsl(201, 96%, 32%));

    .options-strip {
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
    }

    .doctor-card {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 15px;
        display: flex;
        align-items: center;
        gap: 15px;
        transition: background-color 0.2s;

        &:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .icon-circle {
            width: var(--thumb-size);
            height: var(--thumb-size);
            border-radius: 50%;
            background: #fff;
            color: #0369a1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            font-weight: bold;
        }

        .card-info {
            width: calc(100% - var(--thumb-size) - 15px);
        }

        h5 {
            margin: 0;
            font-size: 16px;

            a {
                color: inherit;
                text-decoration: none;
            }
        }

        p {
            margin: 0;
            font-size: 14px;
            opacity: 0.9;
        }

        small {
            opacity: 0.7;
        }
    }

    .step-box i {
        font-size: 32px;
        display: block;
        margin-bottom: 8px;
    }

    .step-box p {
        font-size: 14px;
        margin: 0;
    }
}