/*
|--------------------------------------------------------------------------
| SmartShop Account Type
|--------------------------------------------------------------------------
*/

.account-type-page{

    padding:0px 0;

    background:#f4f6fb;

}

.account-type-wrapper{

    display:grid;

    grid-template-columns:65% 35%;

    grid-template-areas:"content hero";

    background:#fff;

    border-radius:0;

    overflow:hidden;

    box-shadow:0 20px 70px rgba(0,0,0,.08);

}

.account-type-hero {
    position: relative;grid-area:hero;
    min-height: 760px;
    overflow: hidden;
background:
linear-gradient(135deg,#081b55 0%,#12368d 45%,#214fb8 100%);
}

.account-type-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 15% 20%,rgba(255,255,255,.08),transparent 28%),

    radial-gradient(circle at 80% 15%,rgba(255,255,255,.05),transparent 25%),

    repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,.025) 0,
        rgba(255,255,255,.025) 2px,
        transparent 2px,
        transparent 18px
    );

}

.account-type-hero-content{

    position:absolute;

    inset:0;
align-items:center;

text-align:center;

padding:60px 40px;
    z-index:5;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:70px;

    color:#fff;

}

.account-type-hero-badge{

    display:inline-flex;

    width:max-content;

    padding:10px 18px;

    border-radius:50px;

    margin-bottom:22px;

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

    font-weight:700;

}

.account-type-hero-content h1{

    margin:0;

    font-size:64px;

    font-weight:800;

}

.account-type-hero-content h1 span{

    color:#ffbf2f;

}

.account-type-hero-content p{

    margin:25px 0 40px;
max-width:360px;
    line-height:2;

    font-size:18px;

    opacity:.95;

}

.account-type-hero-features{

    margin:0;
width:100%;

max-width:330px;
    padding:0;

    list-style:none;

}

.account-type-hero-features li{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:22px;

    font-size:16px;

}

.account-type-hero-features i{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

}

.account-type-content{

    display:flex;grid-area:content;

    flex-direction:column;

    justify-content:center;

    padding:35px;

}

.content-header{

    margin-bottom:45px;

    text-align:center;

}

.content-header h2{

    margin:0 0 15px;

    font-size:42px;

    color:#0f2d75;

    font-weight:800;

}

.content-header p{

    margin:0;

    color:#6c7488;

    line-height:1.9;

}

.account-cards{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}

.account-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:30px 22px;

    border-radius:22px;

    border:1px solid #ebeff7;

    background:#fff;

    text-decoration:none;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.account-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(26,72,178,.15);

    border-color:#1b57d8;

}

.card-icon{

    width:86px;

    height:86px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    margin-bottom:22px;

    font-size:34px;

}

.user-card .card-icon{

    background:#edf4ff;

    color:#2563eb;

}

.merchant-card .card-icon{

    background:#fff4dc;

    color:#d28d00;

}

.guest-card .card-icon{

    background:#eef9f2;

    color:#18a957;

}

.account-card h3{

    margin:0 0 14px;

    font-size:28px;

    font-weight:800;

    color:#17306d;

}

.account-card p{

    margin:0 0 22px;

    color:#6d768d;

    line-height:1.8;

    min-height:70px;

}

.account-card ul{

    margin:0;

    padding:0;

    list-style:none;

    width:100%;

}

.account-card li{

    display:flex;

    align-items:center;


    gap:10px;

    margin-bottom:12px;

    color:#556074;

    font-size:14px;

}

.account-card li i{

    color:#21b65f;

}

.card-button{

    margin-top:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:52px;

    border-radius:12px;

    font-weight:700;

    color:#fff;

    transition:.3s;

}

.user-card .card-button{

    background:#2563eb;

}

.merchant-card .card-button{

    background:#d79a11;

}

.guest-card .card-button{

    background:#6b46c1;

}

.account-card:hover .card-button{

    transform:scale(1.03);

}
.account-type-footer{

    margin-top:45px;

    text-align:center;

}

.account-type-footer p{

    margin:0;

    color:#7b8499;

    line-height:1.9;

}