/* ==========================================
   MEI QR Generator - Premium UI Part 1
========================================== */

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

:root{
    --mei-primary:#6D28D9;
    --mei-secondary:#2563EB;
    --mei-dark:#111827;
    --mei-text:#6B7280;
    --mei-border:#E5E7EB;
    --mei-bg:#F7F8FC;
    --mei-card:#FFFFFF;
    --mei-radius:20px;
}

.mei-qr-wrapper,
.mei-qr-wrapper *{
    box-sizing:border-box;
    font-family:'Outfit',sans-serif;
}

.mei-qr-wrapper{

    max-width:1200px;

    margin:60px auto;

    padding:20px;

    display:grid;

    grid-template-columns:1fr 420px;

    gap:35px;

}

.mei-qr-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    border:1px solid #EEF2F7;

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

    transition:.30s;

}

.mei-qr-card:hover{

    transform:translateY(-3px);

}

.mei-qr-header{

    margin-bottom:30px;

}

.mei-qr-header h2{

    margin:0;

    font-size:40px;

    font-weight:700;

    color:#111827;

    line-height:1.2;

}

.mei-qr-header p{

    margin-top:10px;

    font-size:17px;

    color:#64748B;

}

.mei-form-group{

    margin-bottom:22px;

}

.mei-form-group label{

    display:block;

    margin-bottom:10px;

    font-size:15px;

    font-weight:600;

    color:#111827;

}

.mei-form-group select,
.mei-form-group textarea{

    width:100%;

    border:1px solid #D1D5DB;

    border-radius:16px;

    padding:15px 18px;

    font-size:16px;

    background:#fff;

    outline:none;

    transition:.30s;

}

.mei-form-group textarea{

    min-height:180px;

    resize:vertical;

}

.mei-form-group select:focus,
.mei-form-group textarea:focus{

    border-color:#6D28D9;

    box-shadow:
    0 0 0 5px rgba(109,40,217,.10);

}

.mei-button-group{

    display:flex;

    gap:15px;

    margin-top:30px;

}

/* Buttons */

.mei-btn{

    height:56px;

    padding:0 28px;

    border:none;

    border-radius:16px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:all .30s ease;

    display:inline-flex;

    align-items:center;

    justify-content:center;

}

.mei-btn:hover{

    transform:translateY(-2px);

}

.mei-btn-primary{

    background:linear-gradient(135deg,#7C3AED,#2563EB);

    color:#fff;

    box-shadow:0 12px 30px rgba(124,58,237,.28);

}

.mei-btn-primary:hover{

    background:linear-gradient(135deg,#6D28D9,#1D4ED8);

    box-shadow:0 18px 40px rgba(124,58,237,.35);

}

.mei-btn-light{

    background:#ffffff;

    color:#374151;

    border:1px solid #D1D5DB;

}

.mei-btn-light:hover{

    background:#F3F4F6;

}

.mei-btn-success{

    width:100%;

    background:linear-gradient(135deg,#7C3AED,#2563EB);

    color:#fff;

    box-shadow:0 12px 30px rgba(124,58,237,.25);

}

.mei-btn-success:hover{

    background:linear-gradient(135deg,#6D28D9,#1D4ED8);

}

.mei-btn-secondary{

    width:100%;

    background:#fff;

    color:#7C3AED;

    border:2px solid #7C3AED;

}

.mei-btn-secondary:hover{

    background:#F5F3FF;

}


/* Preview */

.mei-preview-title{

    text-align:center;

    font-size:30px;

    font-weight:700;

    color:#111827;

    margin-bottom:25px;

}

.mei-qrcode-box{

    width:100%;

    min-height:340px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#FAFAFC;

    border:2px dashed #D1D5DB;

    border-radius:18px;

    transition:.30s;

    overflow:hidden;

}

.mei-qrcode-box:hover{

    border-color:#7C3AED;

}

.mei-qrcode-box canvas,
.mei-qrcode-box img{

    max-width:100%;

    height:auto;

}

.mei-placeholder{

    color:#9CA3AF;

    font-size:16px;

}

.mei-download-buttons{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin-top:25px;

}


/* Smooth animation */

.mei-qr-card,
.mei-btn,
.mei-form-group select,
.mei-form-group textarea{

    transition:all .30s ease;

}


/* Mobile */

@media(max-width:900px){

    .mei-qr-wrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:600px){

    .mei-qr-card{

        padding:22px;

    }

    .mei-qr-header h2{

        font-size:30px;

    }

    .mei-preview-title{

        font-size:24px;

    }

    .mei-button-group{

        flex-direction:column;

    }

    .mei-btn{

        width:100%;

    }

}