/* =========================================
   NGO Membership ID Card
   Rozgar Sewa Samiti Sansthan
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    background:#ececec;

    font-family:Arial,Helvetica,sans-serif;

}

/* Card */

.id-card{

    width:340px;

    min-height:540px;

    margin:30px auto;

    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

    position:relative;

}

/* Orange Header */

/*==========================
HEADER
==========================*/

/* ======================================
   PROFESSIONAL HEADER
======================================*/

.card-header{
    position:relative;
    height:135px;
    background:#fff;
    overflow:hidden;
}

/* Left Orange Curve */
.card-header::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    background:#ff6b00;
    border-radius:50%;
    left:-120px;
    top:-170px;
}

/* Right Orange Curve */
.card-header::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    background:#ff6b00;
    border-radius:50%;
    right:-90px;
    top:-150px;
}

/* Logo */

.logo{
    position:absolute;
    left:0px;
    top:0px;

    width:120px;
    height:120px;

    z-index:50;
}

.logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}
/* NGO Name */

.header-text{

    position:absolute;

    left:105px;

    top:18px;

    right:15px;

}

.header-text h2{

    margin:0;

    font-size:18px;
position:relative;
    z-index:20;
    line-height:23px;

    font-weight:700;

}

.member-strip{

    margin-top:8px;

    display:inline-block;

    background:#ff6b00;

    color:#fff;

    padding:6px 14px;

    border-radius:25px;

    font-size:12px;

    font-weight:bold;
}
/* =========================================
   MEMBER PHOTO
========================================= */

.photo-section{

    width:110px;
    height:130px;

    margin:10px auto;
    margin-top:0px;

    border:4px solid #fff;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 8px 20px rgba(0,0,0,.18);

    background:#f5f5f5;

    display:flex;

    justify-content:center;

    align-items:center;
}

.photo-section img{

    width:100%;

    height:100%;

    object-fit:cover;
}

.photo-placeholder{
    margin-top:18px;

    margin-bottom:18px;

    width:110px;

    height:130px;

    border:2px dashed #cfcfcf;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fafafa;

    color:#999;

    font-weight:bold;

}
/* =========================================
   MEMBER DETAILS
========================================= */

.member-table{

    width:92%;
    margin:10px auto;
    border-collapse:collapse;
    font-size:13px;
}

.member-table th,
.member-table td{

    padding:6px 8px;
    border-bottom:1px solid #ececec;
}

.member-table th{

    width:38%;
    color:#ff6b00;
    white-space:nowrap;
}

/* Status Badge (Future Use) */

.member-status{

    width:90%;

    margin:15px auto;

    text-align:center;

}

.member-status span{

    display:inline-block;

    padding:6px 18px;

    border-radius:30px;

    background:#16a34a;

    color:#fff;

    font-size:13px;

    font-weight:bold;

    letter-spacing:.5px;

}

/* Membership Type */

.membership-type{

    text-align:center;

    margin-top:8px;

    font-size:13px;

    color:#777;

    font-weight:600;

}
/* =========================================
   QR SECTION
========================================= */

.qr-wrapper{

    margin-top:10px;
}

.qr-box{

    width:80px;
    height:80px;

    margin:auto;
}

.qr-placeholder{

    width:70px;
    height:70px;

    font-size:11px;
}

/* =========================================
   VERIFY TEXT
========================================= */



/* =========================================
   FOOTER
========================================= */


/* =========================================
   CARD BORDER
========================================= */

.id-card::before{

    content:"";

    position:absolute;

    top:8px;

    left:8px;

    right:8px;

    bottom:8px;

    border:1px solid rgba(255,106,0,.18);

    border-radius:14px;

    pointer-events:none;

}

/* =========================================
   PRINT / PDF
========================================= */

@media print{

    body{

        background:#fff;

        margin:0;

        padding:0;

    }

    .id-card{
    width:340px;
    height:540px;      /* पहले 640px या min-height था */
    margin:20px auto;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    position:relative;
}

}
.info-table{

    width:92%;
   

    margin:15px auto;

    border-collapse:collapse;

    font-size:15px;
}

.info-table td{

    border:1px solid #e5e5e5;

    padding:10px;
}

.info-table td:first-child{

    width:38%;

    font-weight:bold;

    color:#ff6b00;
}
.verify-text{

    margin-top:4px;
    font-size:10px;
}


.verify-text{

    margin-top:8px;

    font-size:13px;

    color:#666;

}

/*==========================
FOOTER
==========================*/

.card-footer{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    background:#ff6b00;

    color:#fff;

    text-align:center;

    padding:12px 0;

}

.website{

    font-size:13px;

    font-weight:600;

    letter-spacing:.5px;

}
/* ===========================
   BACK CARD
=========================== */

.back-header{

    background:#ff6b00;

    color:#fff;

    text-align:center;

    padding:12px;

    font-size:18px;

    font-weight:bold;

}

.back-content{

    padding:15px;

}

.back-table{

    width:100%;

    border-collapse:collapse;

    margin-bottom:15px;

}

.back-table th{

    width:35%;

    color:#ff6b00;

    text-align:left;

    padding:6px;

}

.back-table td{

    padding:6px;

}

.member-address{

    font-size:13px;

    margin-top:10px;

    line-height:20px;

}

.back-qr{

    width:90px;

    height:90px;

    border:2px solid #ff6b00;

    margin:15px auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

}

.back-note{

    font-size:11px;

    text-align:center;

    color:#666;

    line-height:18px;

}
.qr-box{
    text-align:center;
    margin-top:12px;
}

.qr-box img{
    width:85px;
    height:85px;
}