/* SWAGX Premium Instructions Full Custom Theme */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

:root{
    --bg-card: rgba(15, 10, 25, 0.92);
    --border-main: rgba(163, 66, 255, 0.28);
    --glow-main: rgba(163, 66, 255, 0.18);
    --accent-main: #a342ff;
    --accent-bright: #d16bff;
    --text-main: #ffffff;
    --text-soft: #b9b6c9;
    --shadow-deep: rgba(0,0,0,0.35);
}

.instructions-box{
    max-width: 640px;
    margin: 35px auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-family: 'Montserrat', sans-serif;
}

.step-card{
    position: relative;
    background: linear-gradient(145deg, rgba(20,12,32,0.96), rgba(12,8,22,0.96));
    border: 1px solid var(--border-main);
    border-radius: 18px;
    padding: 22px 24px 22px 70px;
    box-shadow:
        0 0 28px var(--glow-main),
        inset 0 0 12px rgba(255,255,255,0.02);
    backdrop-filter: blur(10px);
    transition: all .35s ease;
    overflow: hidden;
}

.step-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:4px;
    height:100%;
    background: linear-gradient(to bottom, var(--accent-main), var(--accent-bright));
    box-shadow: 0 0 18px var(--accent-main);
}

.step-card:hover{
    transform: translateY(-4px);
    box-shadow:
        0 0 38px rgba(163,66,255,0.28),
        inset 0 0 14px rgba(255,255,255,0.03);
}

.step-number{
    position:absolute;
    left:18px;
    top:20px;
    width:38px;
    height:38px;
    border-radius:12px;
    background: linear-gradient(135deg, var(--accent-main), var(--accent-bright));
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    font-weight:800;
    color:white;
    box-shadow: 0 0 20px rgba(163,66,255,0.35);
}

.step-title{
    font-size:19px;
    font-weight:800;
    color: var(--text-main);
    margin-bottom:8px;
    letter-spacing:0.4px;
    text-shadow: 0 0 14px rgba(163,66,255,0.22);
}

.step-title span{
    color: var(--accent-bright);
}

.step-desc{
    font-size:14px;
    line-height:1.7;
    color: var(--text-soft);
    font-weight:500;
    max-width: 95%;
}

@media(max-width:768px){
    .instructions-box{
        max-width:100%;
        padding:0 10px;
    }

    .step-card{
        padding:20px 18px 20px 64px;
        border-radius:16px;
    }

    .step-title{
        font-size:17px;
    }

    .step-desc{
        font-size:13px;
    }

    .step-number{
        width:34px;
        height:34px;
        font-size:14px;
    }
}