.step-header {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    /* เพื่อใช้จัดตำแหน่งเส้น */
}

/* วงกลมเลข 1 */
.step-header .number {
    background-color: #e6f4ff;
    color: #0078ff;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    position: relative;
    z-index: 1;
}

/* เส้นขีดยาว */
.step-line {
    border: none;
    height: 2px;
    background: #ccc;
    position: relative;
    margin-top: 8px;
    /* เลื่อนขึ้นให้ใกล้หัวข้อ */
}

/* เส้นสีฟ้าใต้เลข 1 */
.step-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    /* เริ่มจากตำแหน่งเลข 1 */
    width: 35px;
    /* ความกว้างเท่ากับวงกลม */
    height: 2px;
    background-color: #0078ff;
}

/* Card ราคา */
.price-option {
    position: relative;
    /* สำหรับวางไอคอนด้านใน */
    border: 2px solid #ddd;
    background-color: #fff;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    cursor: pointer;
}

/* Hover */
.price-option:hover {
    border: 1px solid #0078ff !important;
    box-shadow: 0 0 15px rgba(0, 120, 255, 0.4);
    transform: translateY(-3px);
}

/* ไอคอนตะกร้า */
.cart-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #0078ff;
    font-size: 1.2rem;
    display: none;
    /* ซ่อนตอนยังไม่เลือก */
    transition: transform 0.3s ease;
}

/* เมื่อเลือก */
.price-option.border-primary {
    border: 2px solid #0078ff !important;
    background-color: #e6f4ff;
    box-shadow: 0 0 18px rgba(0, 120, 255, 0.6);
}

.price-option.border-primary .cart-icon {
    display: block;
}

.price-option.border-primary .cart-icon:hover {
    transform: scale(1.3);
    /* ขยายตอนชี้ไอคอน */
}

/* ฟ้าอ่อน */
.bg-soft-blue {
    background-color: #e6f4ff !important;
}

.login-warning {
    display: inline-block;
    font-weight: bold;
    font-size: 1.2rem;
    color: #ff0000;
    animation: blinkText 3s infinite;
}

@keyframes blinkText {
    0%, 50%, 100% {
        opacity: 1;
        color: #ff0000;
    }
    25%, 75% {
        opacity: 0.5; /* ลดความชัดลงเหลือ 50% */
        color: #ff4d4d;
    }
}