/*==================================================
SI-PENA DESIGN SYSTEM
==================================================*/

:root{

    /* Primary */

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --primary-light:#dbeafe;

    /* Success */

    --success:#16a34a;
    --success-light:#dcfce7;

    /* Warning */

    --warning:#f59e0b;
    --warning-light:#fef3c7;

    /* Danger */

    --danger:#dc2626;
    --danger-light:#fee2e2;

    /* Neutral */

    --white:#ffffff;

    --bg:#f8fafc;

    --surface:#ffffff;

    --border:#e2e8f0;

    --text:#0f172a;

    --text-soft:#64748b;

    --text-light:#94a3b8;

    /* Radius */

    --radius-sm:12px;

    --radius-md:18px;

    --radius-lg:24px;

    --radius-xl:32px;

    /* Shadow */

    --shadow-sm:
        0 5px 15px rgba(15,23,42,.05);

    --shadow-md:
        0 15px 40px rgba(15,23,42,.08);

    --shadow-lg:
        0 25px 70px rgba(15,23,42,.12);

    /* Transition */

    --transition:.30s ease;

}
/* =====================================================
   STEP 2
===================================================== */

.wizard-page{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding:80px 0;

}

.wizard-header{

    text-align:center;

    margin-bottom:60px;

}

.wizard-title{

    font-size:42px;

    font-weight:800;

    margin:18px 0 15px;

    color:#0f172a;

}

.wizard-subtitle{

    max-width:700px;

    margin:auto;

    color:#64748b;

    font-size:18px;

    line-height:1.8;

}

/* ====================================== */

.pemohon-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    padding:42px 30px;

    border:1px solid #e5e7eb;

    transition:.35s;

    cursor:pointer;

    overflow:hidden;

    height:100%;

}

.pemohon-card:hover{

    transform:translateY(-8px);

    border-color:#2563eb;

    box-shadow:0 25px 60px rgba(37,99,235,.15);

}

.pemohon-card.selected{

    border:2px solid #2563eb;

    background:#eff6ff;

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(37,99,235,.18);

}

.pemohon-icon{

    width:82px;

    height:82px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,#2563eb,#4f46e5);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    margin-bottom:30px;

}

.pemohon-card h4{

    text-align:center;

    font-size:24px;

    font-weight:700;

    margin-bottom:16px;

    color:#0f172a;

}

.pemohon-card p{

    text-align:center;

    color:#64748b;

    line-height:1.8;

    margin:0;

}

.pemohon-arrow{

    position:absolute;

    right:22px;

    top:22px;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#f1f5f9;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#2563eb;

    transition:.3s;

}

.pemohon-card:hover .pemohon-arrow{

    transform:translateX(5px);

}

/*==================================================
STEP 3
==================================================*/

.layanan-card{

    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:22px;

    padding:26px;

    cursor:pointer;

    transition:.3s;

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:100%;

    position:relative;

}

.layanan-card:hover{

    transform:translateY(-6px);

    border-color:#2563eb;

    box-shadow:0 18px 45px rgba(37,99,235,.12);

}

.layanan-card.selected{

    border:2px solid #2563eb;

    background:#eff6ff;

    transform:translateY(-6px);

}

.layanan-content{

    display:flex;

    align-items:center;

    gap:20px;

}

.layanan-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    background:linear-gradient(135deg,#2563eb,#4f46e5);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:26px;

    flex-shrink:0;

}

.layanan-info h4{

    margin:0;

    font-size:20px;

    font-weight:700;

    color:#0f172a;

}

.layanan-info p{

    margin-top:8px;

    color:#64748b;

    margin-bottom:0;

}

.layanan-check{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#e2e8f0;

    color:#94a3b8;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.3s;

}

.layanan-card.selected .layanan-check{

    background:#2563eb;

    color:#fff;

}

/*==================================================
STEP 4
==================================================*/

.form-premium-card{

    background:#fff;

    border-radius:28px;

    padding:45px;

    box-shadow:0 20px 60px rgba(15,23,42,.08);

    border:1px solid #e2e8f0;

}

.form-group-premium{

    margin-bottom:26px;

}

.form-group-premium label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

    color:#334155;

}

.form-control-premium{

    width:100%;

    border:1px solid #dbe2ea;

    border-radius:16px;

    padding:15px 18px;

    font-size:16px;

    transition:.3s;

    background:#fff;

}

.form-control-premium:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.form-control-premium::placeholder{

    color:#94a3b8;

}

textarea.form-control-premium{

    resize:none;

}

.form-control-premium{

    border-radius:var(--radius-md);

}

.btn-premium{

    border-radius:var(--radius-md);

}

.pemohon-card{

    border-radius:var(--radius-lg);

}

.layanan-card{

    border-radius:var(--radius-lg);

}

.summary-card{

    border-radius:var(--radius-lg);

}

.ticket{

    border-radius:var(--radius-lg);

}

.wizard-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:40px;

}

/*==================================================
STEP 5
==================================================*/

.summary-card{

    background:#fff;

    border-radius:30px;

    overflow:hidden;

    border:1px solid #e2e8f0;

    box-shadow:0 20px 60px rgba(15,23,42,.08);

}

.summary-header{

    padding:40px;

    display:flex;

    gap:25px;

    align-items:center;

    background:linear-gradient(135deg,#2563eb,#4f46e5);

    color:#fff;

}

.summary-icon{

    width:78px;

    height:78px;

    border-radius:22px;

    background:rgba(255,255,255,.15);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

}

.summary-header h3{

    margin:0;

    font-size:30px;

    font-weight:700;

}

.summary-header p{

    margin-top:8px;

    margin-bottom:0;

    opacity:.9;

}

.summary-body{

    padding:40px;

}

.summary-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 0;

    border-bottom:1px solid #edf2f7;

}

.summary-item:last-child{

    border-bottom:none;

}

.summary-item span{

    color:#64748b;

    font-weight:500;

}

.summary-item strong{

    color:#0f172a;

    font-weight:700;

    text-align:right;

    max-width:60%;

}

.summary-item.align-start{

    align-items:flex-start;

}

.summary-item.align-start strong{

    white-space:pre-wrap;

}

.summary-footer{

    padding:30px 40px;

    background:#f8fafc;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-top:1px solid #e2e8f0;

}

@media(max-width:768px){

.summary-item{

    flex-direction:column;

    align-items:flex-start;

    gap:10px;

}

.summary-item strong{

    max-width:100%;

    text-align:left;

}

.summary-header{

    flex-direction:column;

    text-align:center;

}

.summary-footer{

    flex-direction:column-reverse;

    gap:15px;

}

.summary-footer .btn-premium{

    width:100%;

}

}