/* =========================================================
   UNBANGLA FONT
========================================================= */

@font-face{
    font-family:'UNBangla';
    src:url('assets/UNBangla-Bold.ttf') format('truetype');
    font-weight:700;
    font-style:normal;
    font-display:swap;
}


/* =========================================================
   RESET
========================================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'UNBangla',sans-serif;
    color:#172033;
    min-height:100vh;
    overflow-x:hidden;

    background:
        radial-gradient(
            circle at 5% 5%,
            #d8efff 0,
            transparent 30%
        ),
        radial-gradient(
            circle at 100% 15%,
            #e6ddff 0,
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f7faff 0%,
            #edf2f8 100%
        );
}

button,
input,
select,
textarea{
    font-family:'UNBangla',sans-serif;
}

button{
    cursor:pointer;
}

img{
    max-width:100%;
}

.container{
    width:min(940px,calc(100% - 28px));
    margin:auto;
    position:relative;
    z-index:2;
}


/* =========================================================
   BACKGROUND
========================================================= */

.bg-animation{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}

.gradient-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(15px);
    opacity:.45;
}

.blob-1{
    width:260px;
    height:260px;
    left:-100px;
    top:120px;
    background:#8fd5ff;
}

.blob-2{
    width:320px;
    height:320px;
    right:-130px;
    top:350px;
    background:#c8baff;
}

.blob-3{
    width:230px;
    height:230px;
    left:35%;
    bottom:-100px;
    background:#a9efd6;
}


/* =========================================================
   GLASS
========================================================= */

.glass-effect,
.glass-card{
    background:rgba(255,255,255,.65);

    border:1px solid rgba(255,255,255,.85);

    box-shadow:
        0 20px 60px rgba(40,60,100,.12),
        inset 0 1px 0 rgba(255,255,255,.8);

    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);
}


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

.header{
    position:relative;

    width:min(940px,calc(100% - 28px));

    margin:15px auto 22px;

    padding:0;

    border-radius:28px;

    overflow:hidden;

    z-index:3;
}


/*
-------------------------------------------------------------
Banner wrapper
-------------------------------------------------------------
*/

.header-banner{
    width:100%;

    display:block;

    position:relative;

    overflow:hidden;

    border-radius:28px;
}


/*
-------------------------------------------------------------
1680 × 650 banner

Original ratio:
1680 / 650 = 2.5846
-------------------------------------------------------------
*/

.header-banner img{
    display:block;

    width:100%;

    height:auto;

    aspect-ratio:1680 / 650;

    object-fit:cover;

    object-position:center;

    border-radius:28px;
}


/*
-------------------------------------------------------------
যদি banner.jpg না পাওয়া যায়
-------------------------------------------------------------
*/

.header-banner::after{
    content:'';

    position:absolute;

    inset:0;

    border-radius:28px;

    pointer-events:none;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.45),
        0 20px 60px rgba(40,60,100,.12);
}


/*
-------------------------------------------------------------
পুরোনো text header এখন hidden
যদি index.php-তে থেকে যায় তাহলেও দেখা যাবে না
-------------------------------------------------------------
*/

.header .header-content{
    display:none;
}

.candidate-badge{
    display:none;
}


/* =========================================================
   MAIN CARD
========================================================= */

.glass-card{
    padding:30px;

    margin-bottom:20px;

    border-radius:28px;
}

.search-section{
    position:relative;

    overflow:hidden;
}

.section-header{
    text-align:center;

    margin-bottom:25px;
}

.section-header h2{
    font-family:'UNBangla',sans-serif;

    font-weight:700;

    font-size:26px;

    color:#172033;
}

.section-header p{
    margin-top:5px;

    color:#748096;

    font-size:14px;
}


/* =========================================================
   FORM
========================================================= */

.search-form{
    display:grid;

    grid-template-columns:
        1.2fr 1fr .8fr;

    gap:14px;
}

.form-group{
    min-width:0;
}

.form-group label{
    display:block;

    margin:0 0 7px 5px;

    color:#526075;

    font-size:13px;

    font-weight:700;
}

.input-wrapper{
    position:relative;
}


/* =========================================================
   INPUT ICON
========================================================= */

.input-icon{
    position:absolute;

    left:16px;

    top:50%;

    width:22px !important;
    height:22px !important;

    max-width:22px !important;
    max-height:22px !important;

    transform:translateY(-50%);

    color:#78869d;

    pointer-events:none;

    z-index:5;
}

.input-icon svg{
    width:22px !important;
    height:22px !important;
}


/* =========================================================
   INPUT
========================================================= */

.form-input{
    display:block;

    width:100%;

    height:56px;

    border:
        1px solid rgba(120,140,175,.20);

    border-radius:18px;

    outline:none;

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

    color:#172033;

    padding:
        0 16px 0 48px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 7px 20px rgba(40,60,100,.06);

    transition:.2s;

    font-family:'UNBangla',sans-serif;

    font-weight:700;
}

.form-input:focus{
    border-color:#5b91f5;

    background:#fff;

    box-shadow:
        0 0 0 4px rgba(22,119,255,.10),
        0 12px 25px rgba(40,60,100,.08);
}

.form-input::placeholder{
    color:#a0aabd;
}


/* =========================================================
   DATE INPUT
========================================================= */

input[type="date"]{
    font-family:'UNBangla',sans-serif;

    font-weight:700;
}

input[type="date"]::-webkit-calendar-picker-indicator{
    opacity:.65;

    cursor:pointer;
}


/* =========================================================
   SELECT
========================================================= */

select.form-input{
    appearance:none;

    -webkit-appearance:none;

    padding-right:45px;

    background-color:
        rgba(255,255,255,.75);

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #718096 50%
        ),
        linear-gradient(
            135deg,
            #718096 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 20px) 24px,
        calc(100% - 14px) 24px;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat:no-repeat;
}


/* =========================================================
   SEARCH BUTTON
========================================================= */

.btn-primary{
    grid-column:1/-1;

    height:58px;

    border:0;

    border-radius:19px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    color:#fff;

    font-family:'UNBangla',sans-serif;

    font-size:16px;

    font-weight:700;

    background:
        linear-gradient(
            135deg,
            #1677ff,
            #6258ee
        );

    box-shadow:
        0 14px 30px rgba(40,90,220,.25);

    transition:.2s;

    position:relative;

    overflow:hidden;
}

.btn-primary:hover{
    transform:translateY(-2px);
}

.btn-primary:active{
    transform:scale(.98);
}

.btn-primary:disabled{
    opacity:.65;

    cursor:not-allowed;

    transform:none;
}

.btn-icon{
    width:34px;

    height:34px;

    display:grid;

    place-items:center;

    border-radius:11px;

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

    border:
        1px solid rgba(255,255,255,.25);
}

.btn-icon svg{
    width:19px !important;

    height:19px !important;
}


/* =========================================================
   LOADING
========================================================= */

.loading-state{
    text-align:center;

    padding:35px;
}

.loader{
    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:7px;
}

.loader-ring{
    width:9px !important;

    height:9px !important;

    border-radius:50%;

    background:#1677ff;

    animation:bounce 1s infinite;
}

.loader-ring:nth-child(2){
    animation-delay:.15s;
}

.loader-ring:nth-child(3){
    animation-delay:.3s;
}

@keyframes bounce{

    0%,
    80%,
    100%{
        transform:scale(.6);

        opacity:.4;
    }

    40%{
        transform:scale(1.2);

        opacity:1;
    }
}


/* =========================================================
   RESULT
========================================================= */

.result-header{
    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:20px;
}

.success-icon,
.error-icon{
    width:48px !important;

    height:48px !important;

    min-width:48px;

    display:grid;

    place-items:center;

    border-radius:16px;
}

.success-icon{
    color:#0aa874;

    background:
        rgba(18,185,129,.12);
}

.success-icon svg,
.error-icon svg{
    width:25px !important;

    height:25px !important;
}

.result-header h2{
    flex:1;

    font-family:'UNBangla',sans-serif;

    font-weight:700;

    font-size:22px;
}

.btn-reset{
    border:
        1px solid rgba(22,119,255,.15);

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

    color:#1677ff;

    border-radius:13px;

    padding:8px 13px;

    font-family:'UNBangla',sans-serif;

    font-weight:700;
}


/* =========================================================
   INFORMATION
========================================================= */

.voter-info-grid{
    display:grid;

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

    gap:10px;
}

.info-item{
    padding:14px 16px;

    border:
        1px solid rgba(150,165,190,.16);

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

    border-radius:17px;
}

.info-label{
    color:#8491a5;

    font-size:11px;

    font-weight:700;
}

.info-value{
    margin-top:2px;

    color:#1d2940;

    font-family:'UNBangla',sans-serif;

    font-size:15px;

    font-weight:700;

    word-break:break-word;
}


/* =========================================================
   POLLING STATION
========================================================= */

.polling-station-card{
    margin-top:12px;

    padding:18px;

    text-align:center;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            rgba(18,185,129,.12),
            rgba(47,150,255,.10)
        );

    border:
        1px solid rgba(18,185,129,.20);
}

.polling-station-card h3{
    display:flex;

    justify-content:center;

    align-items:center;

    gap:7px;

    color:#087c5b;

    font-size:13px;
}

.polling-station-card h3 svg{
    width:19px !important;

    height:19px !important;
}

.polling-station-card p{
    margin-top:5px;

    color:#075f4b;

    font-family:'UNBangla',sans-serif;

    font-size:18px;

    font-weight:700;
}


/* =========================================================
   DOWNLOAD BUTTONS
========================================================= */

.download-actions{
    display:grid;

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

    gap:10px;

    margin-top:13px;
}

.btn-download{
    width:100%;

    min-height:53px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border-radius:17px;

    border:
        1px solid rgba(22,119,255,.12);

    background:
        rgba(22,119,255,.10);

    color:#1469d8;

    font-family:'UNBangla',sans-serif;

    font-weight:700;

    transition:.2s;

    position:relative;

    overflow:hidden;
}

.btn-download:hover{
    transform:translateY(-2px);

    background:
        rgba(22,119,255,.15);
}

.btn-download:active{
    transform:scale(.98);
}

.btn-download svg{
    width:20px !important;

    height:20px !important;
}


/* =========================================================
   IMAGE DOWNLOAD CONTAINER
========================================================= */

#downloadSlipContainer{
    position:fixed;

    left:-10000px;

    top:0;

    width:768px;

    min-height:1px;

    overflow:visible;

    pointer-events:none;

    z-index:-9999;
}


/* =========================================================
   GENERATED VOTER SLIP
========================================================= */

.generated-voter-slip{
    position:relative;

    width:768px;

    background:#fff;

    overflow:hidden;

    font-family:'UNBangla',sans-serif;

    color:#111;
}


/* =========================================================
   TEMPLATE IMAGE
========================================================= */

.generated-voter-slip > img{
    display:block;

    width:768px;

    height:auto;

    margin:0;

    padding:0;

    object-fit:contain;
}


/* =========================================================
   TEMPLATE INFORMATION
========================================================= */

.template-voter-info{
    position:absolute;

    left:52px;

    right:52px;

    top:800px;

    bottom:45px;

    padding:18px 15px;

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

    overflow:hidden;
}


/* =========================================================
   INFORMATION TABLE
========================================================= */

.template-info-table{
    width:100%;

    border-collapse:collapse;

    table-layout:fixed;

    background:#fff;
}

.template-info-table tr{
    height:47px;
}


/* =========================================================
   TABLE LABEL
========================================================= */

.template-info-table .template-label{
    width:31%;

    padding:7px 10px;

    border:
        1.5px solid #222;

    background:#f4f4f4;

    color:#111;

    font-family:'UNBangla',sans-serif;

    font-size:20px;

    font-weight:700;

    line-height:1.25;

    vertical-align:middle;

    white-space:nowrap;
}


/* =========================================================
   TABLE VALUE
========================================================= */

.template-info-table .template-value{
    width:69%;

    padding:7px 12px;

    border:
        1.5px solid #222;

    background:#fff;

    color:#111;

    font-family:'UNBangla',sans-serif;

    font-size:20px;

    font-weight:700;

    line-height:1.25;

    vertical-align:middle;

    word-break:break-word;
}


/* =========================================================
   ERROR
========================================================= */

.error-state{
    text-align:center;

    padding:34px 25px;
}

.error-icon{
    margin:0 auto 12px;

    color:#e54848;

    background:
        rgba(239,68,68,.10);
}

.error-state h2{
    font-family:'UNBangla',sans-serif;

    font-weight:700;

    font-size:21px;
}

.error-state p{
    max-width:570px;

    margin:5px auto 18px;

    color:#778399;

    font-size:14px;

    line-height:1.7;
}

.btn-retry{
    border:0;

    background:#172033;

    color:#fff;

    border-radius:15px;

    padding:11px 18px;

    font-family:'UNBangla',sans-serif;

    font-weight:700;

    position:relative;

    overflow:hidden;
}

.btn-retry svg{
    width:18px !important;

    height:18px !important;
}


/* =========================================================
   RIPPLE
========================================================= */

.ripple{
    position:absolute;

    border-radius:50%;

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

    transform:scale(0);

    animation:
        ripple-animation .6s linear;

    pointer-events:none;
}

@keyframes ripple-animation{

    to{
        transform:scale(4);

        opacity:0;
    }
}


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

.footer{
    position:relative;

    z-index:2;

    padding:
        8px 20px 30px;

    text-align:center;

    color:#8490a4;

    font-size:11px;

    line-height:1.7;
}

.disclaimer{
    max-width:700px;

    margin:auto;
}

.copyright{
    margin-top:3px;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:720px){

    .container{
        width:calc(100% - 20px);
    }


    /* Banner */

    .header{
        width:calc(100% - 20px);

        margin:
            10px auto 18px;

        border-radius:20px;
    }

    .header-banner,
    .header-banner img{
        border-radius:20px;
    }


    /*
    Banner 1680×650 ratio বজায় থাকবে
    */

    .header-banner img{
        aspect-ratio:1680 / 650;

        object-fit:cover;
    }


    /* Card */

    .glass-card{
        padding:22px 16px;

        border-radius:24px;
    }


    /* Section */

    .section-header h2{
        font-size:21px;
    }

    .section-header p{
        font-size:12px;
    }


    /* Form */

    .search-form{
        grid-template-columns:1fr;

        gap:11px;
    }

    .btn-primary{
        grid-column:auto;

        margin-top:3px;
    }


    /* Result */

    .voter-info-grid{
        grid-template-columns:1fr;
    }

    .result-header{
        align-items:flex-start;
    }

    .result-header h2{
        font-size:19px;
    }

    .btn-reset{
        font-size:12px;

        padding:7px 10px;
    }

    .polling-station-card p{
        font-size:16px;
    }


    /* Download */

    .download-actions{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media(max-width:380px){

    .candidate-name{
        font-size:18px;
    }

    .section-header h2{
        font-size:19px;
    }

    .form-input{
        height:53px;
    }

    .btn-primary{
        height:55px;
    }

    .header{
        border-radius:17px;
    }

    .header-banner,
    .header-banner img{
        border-radius:17px;
    }
}


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

@media print{

    @page{
        size:A4 portrait;

        margin:8mm;
    }


    html,
    body{
        width:100%;

        min-height:auto;

        background:#fff !important;
    }

    body{
        font-family:'UNBangla',sans-serif;

        color:#111;

        -webkit-print-color-adjust:exact;

        print-color-adjust:exact;
    }


    /* Hide unnecessary website elements */

    .bg-animation,
    .search-section,
    .loading-state,
    .error-state,
    .footer,
    .btn-reset,
    .btn-download,
    .download-actions{
        display:none !important;
    }


    /*
    ---------------------------------------------------------
    Banner PRINT
    ---------------------------------------------------------
    */

    .header{
        display:block !important;

        width:100% !important;

        margin:0 0 8mm 0 !important;

        padding:0 !important;

        border:0 !important;

        border-radius:0 !important;

        box-shadow:none !important;

        background:#fff !important;

        overflow:hidden !important;
    }

    .header-banner{
        display:block !important;

        width:100% !important;

        margin:0 !important;

        padding:0 !important;

        border-radius:0 !important;

        overflow:hidden !important;
    }

    .header-banner img{
        display:block !important;

        width:100% !important;

        height:auto !important;

        aspect-ratio:1680 / 650 !important;

        object-fit:cover !important;

        border-radius:0 !important;
    }


    /*
    ---------------------------------------------------------
    যদি পুরোনো text header থাকে
    ---------------------------------------------------------
    */

    .header .header-content{
        display:none !important;
    }


    /*
    ---------------------------------------------------------
    Main container
    ---------------------------------------------------------
    */

    main.container{
        width:100% !important;

        max-width:none !important;

        margin:0 !important;

        padding:0 !important;
    }


    /*
    ---------------------------------------------------------
    Result card
    ---------------------------------------------------------
    */

    .result-section{
        display:block !important;

        width:100% !important;

        margin:0 !important;

        padding:0 !important;

        background:#fff !important;

        border:0 !important;

        box-shadow:none !important;

        border-radius:0 !important;
    }


    /*
    Result heading
    */

    .result-header{
        margin:
            0 0 5mm 0 !important;

        padding:0 !important;
    }

    .result-header .success-icon{
        width:35px !important;

        height:35px !important;

        min-width:35px !important;
    }

    .result-header h2{
        font-size:19px !important;
    }


    /*
    ---------------------------------------------------------
    Voter information
    ---------------------------------------------------------
    */

    .voter-info-grid{
        display:grid !important;

        grid-template-columns:
            repeat(2,1fr) !important;

        gap:3mm !important;
    }

    .info-item{
        padding:3mm !important;

        border:
            1px solid #d7dce5 !important;

        background:#fff !important;

        border-radius:3mm !important;

        page-break-inside:avoid;

        break-inside:avoid;
    }

    .info-label{
        color:#666 !important;

        font-size:9px !important;
    }

    .info-value{
        color:#111 !important;

        font-size:12px !important;
    }


    /*
    ---------------------------------------------------------
    Polling station
    ---------------------------------------------------------
    */

    .polling-station-card{
        margin-top:3mm !important;

        padding:4mm !important;

        border:
            1px solid #b7dfcf !important;

        background:#f0fff9 !important;

        border-radius:3mm !important;

        page-break-inside:avoid;

        break-inside:avoid;
    }

    .polling-station-card h3{
        font-size:10px !important;
    }

    .polling-station-card p{
        font-size:14px !important;

        color:#075f4b !important;
    }


    /*
    ---------------------------------------------------------
    Hidden image generator
    ---------------------------------------------------------
    */

    #downloadSlipContainer{
        display:none !important;
    }


    /*
    ---------------------------------------------------------
    Avoid page break
    ---------------------------------------------------------
    */

    .result-section,
    .voter-info-grid,
    .polling-station-card{
        page-break-inside:avoid;
    }
}


/* =========================================================
   PRINT SMALL PAPER / MOBILE PRINT
========================================================= */

@media print and (max-width:700px){

    @page{
        size:A4 portrait;

        margin:5mm;
    }

    .header{
        margin-bottom:5mm !important;
    }

    .voter-info-grid{
        grid-template-columns:1fr !important;
    }

    .info-item{
        padding:2.5mm !important;
    }

    .info-value{
        font-size:11px !important;
    }

    .polling-station-card p{
        font-size:13px !important;
    }
}