/* =========================================================
   WRAPPER
========================================================= */

.pd-undian-wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}


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

.pd-undian-header {
    text-align: center;
    margin-bottom: 18px;
}

.pd-undian-header h2 {
    margin: 0 0 6px;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 800;
    color: #222;
}

.pd-undian-header p {
    margin: 0;
    color: #777;
    line-height: 1.5;
}


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

.pd-undian-form {
    background: #fff;
    padding: 20px;
    border-radius: 24px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .08);
    margin-bottom: 20px;
    box-sizing: border-box;
}

.pd-undian-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

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

.pd-undian-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #333;
}

.pd-undian-form-group input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #fff;
    font-size: 15px;
    outline: none;
}

.pd-undian-form-group input:focus {
    border-color: #6c63ff;
    box-shadow: 0 0 0 3px rgba(108, 99, 255, .1);
}

.pd-undian-form-group small {
    display: block;
    margin-top: 7px;
    color: #888;
    font-size: 12px;
}


/* =========================================================
   LOGO PREVIEW
========================================================= */

.pd-undian-logo-preview {
    margin-top: 20px;
    padding: 15px;
    border-radius: 15px;
    background: #f7f7f7;
}

.pd-undian-logo-preview-inner {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pd-undian-logo-preview img {
    width: 150px !important;
    height: 150px !important;
    object-fit: contain !important;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 5px;
    box-sizing: border-box;
}

.pd-undian-remove-logo {
    border: none;
    padding: 9px 14px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}


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

.pd-undian-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.pd-undian-btn {
    border: none;
    padding: 13px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    transition: .2s;
}

.pd-undian-btn:hover {
    transform: translateY(-1px);
}

.pd-undian-btn:disabled {
    opacity: .65;
    cursor: wait;
    transform: none;
}

.pd-undian-btn-primary {
    background: #6c63ff;
    color: #fff;
}

.pd-undian-btn-print {
    background: #16a34a;
    color: #fff;
}

.pd-undian-btn-download {
    background: #2563eb;
    color: #fff;
}

.pd-undian-btn-download:hover {
    background: #1d4ed8;
}


/* =========================================================
   INFO
========================================================= */

.pd-undian-info {
    margin-bottom: 15px;
    padding: 10px 16px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #334155;
    font-weight: 600;
}


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

.pd-undian-error {
    padding: 15px;
    border-radius: 10px;
    background: #fee2e2;
    color: #991b1b;
}


/* =========================================================
   EXPORT AREA
========================================================= */

.pd-undian-export-area {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    overflow: visible;
}


/* =========================================================
   PREVIEW GRID SCREEN
=========================================================

   Tampilan layar tidak mempengaruhi hasil cetak.

   Kartu:
   50mm x 40mm

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

.pd-undian-preview {

    display: grid !important;

    grid-template-columns:
        repeat(4, 50mm) !important;

    grid-auto-rows:
        30mm !important;

    column-gap:
        3mm !important;

    row-gap:
        3mm !important;

    width: max-content !important;

    max-width: none !important;

    height: auto !important;

    margin: 0 auto !important;

    padding: 0 !important;

    justify-content: center !important;

    align-content: start !important;

    box-sizing: border-box !important;
}


/* =========================================================
   KARTU NOMOR
   UKURAN TETAP 5 CM x 4 CM
========================================================= */

.pd-undian-preview .pd-nomor-undian {
    position: relative !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    flex: none !important;

    width: 50mm !important;
min-width: 50mm !important;
max-width: 50mm !important;

height: 35mm !important;
min-height: 35mm !important;
max-height: 35mm !important;

    box-sizing: border-box !important;

    aspect-ratio: auto !important;

    overflow: hidden !important;

    border-radius: 2mm;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f5f5f5
        );

    border: 0.5mm dashed #999;

    padding: 3mm;

    margin: 0 !important;

    box-shadow:
        0 2px 8px rgba(0,0,0,.04);

    page-break-inside: avoid;
    break-inside: avoid;

    color: #111;

    isolation: isolate;
}


/* =========================================================
   WATERMARK
========================================================= */

.pd-nomor-undian-watermark {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    z-index: 1 !important;

    pointer-events: none !important;

    overflow: hidden !important;
}

.pd-nomor-undian-watermark img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    opacity: .22 !important;

    filter:
        contrast(1.15)
        saturate(1.1) !important;

    pointer-events: none !important;

    user-select: none !important;

    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
}


/* =========================================================
   JUDUL
========================================================= */

.pd-nomor-undian-judul {
    position: relative;

    z-index: 3;

    width: 100%;

    font-size: 3mm !important;

    line-height: 1.1 !important;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .4mm;

    color: #333;

    margin: 0 0 1.5mm !important;

    padding: 0 !important;

    white-space: nowrap;

    text-align: center;
}


/* =========================================================
   DESA
========================================================= */

.pd-nomor-undian-desa {
    position: relative;

    z-index: 3;

    width: 90%;
    max-width: 90%;

    font-size: 2.5mm !important;

    line-height: 1.1 !important;

    color: #555;

    font-weight: 600;

    margin: 0 0 1.5mm !important;

    padding: 0 !important;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    text-align: center;
}


/* =========================================================
   ANGKA UTAMA
========================================================= */

.pd-nomor-undian-angka {
    position: relative;

    z-index: 4;

    font-size: 12mm !important;

    line-height: .85 !important;

    font-weight: 900;

    color: #111;

    letter-spacing: .3mm;

    margin: 0 !important;

    padding: 0 !important;

    white-space: nowrap;

    text-align: center;

    text-shadow:
        0 2px 3px rgba(255,255,255,.8);
}


/* =====================================================
   ORNAMEN WARNA-WARNI
   PAKSA IKUT PREVIEW / CETAK
===================================================== */

.pd-nomor-undian::before {

    content: "" !important;

    position: absolute !important;

    width: 20mm !important;
    height: 20mm !important;

    border-radius: 50% !important;

    background-color:
    rgba(220, 38, 38, .18) !important;

    top: -9mm !important;
    left: -9mm !important;

    z-index: 0 !important;

    pointer-events: none !important;

    display: block !important;

    visibility: visible !important;

    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;

}


.pd-nomor-undian::after {

    content: "" !important;

    position: absolute !important;

    width: 20mm !important;
    height: 20mm !important;

    border-radius: 50% !important;

    background:
        rgba(22, 163, 74, .18) !important;

    bottom: -9mm !important;
    right: -9mm !important;

    z-index: 0 !important;

    pointer-events: none !important;

    display: block !important;

    visibility: visible !important;

    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;

}


/* =========================================================
   RESPONSIVE LAYAR
========================================================= */

@media (max-width: 1100px) {

    .pd-undian-preview {
        grid-template-columns:
            repeat(3, 50mm) !important;
    }

}

@media (max-width: 700px) {

    .pd-undian-grid {
        grid-template-columns: 1fr;
    }

    .pd-undian-preview {
        grid-template-columns:
            repeat(2, 50mm) !important;
    }

}

@media (max-width: 440px) {

    .pd-undian-wrap {
        padding: 6px 10px;
    }

    .pd-undian-form {
        padding: 15px;
    }

    .pd-undian-preview {
        grid-template-columns:
            50mm !important;
        justify-content: center;
    }

    .pd-undian-logo-preview-inner {
        flex-direction: column;
        align-items: flex-start;
    }

}


/* =========================================================
   PRINT
   FLEXIBLE PAPER
========================================================= */

@media print {

    /*
     * Margin sangat kecil agar area cetak maksimal.
     * Ukuran kertas mengikuti pilihan printer/browser.
     */
    @page {
        margin: 1mm;
    }


    html,
    body {

        margin: 0 !important;
        padding: 0 !important;

        width: 100% !important;

        background: #fff !important;

    }


    /*
     * Sembunyikan semua elemen halaman
     * kecuali area nomor undian.
     */
    body * {

        visibility: hidden !important;

    }


    .pd-undian-export-area,
    .pd-undian-export-area * {

        visibility: visible !important;

    }


    /*
     * AREA CETAK
     */
    .pd-undian-export-area {

        position: absolute !important;

        left: 0 !important;
        top: 0 !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #fff !important;

        overflow: visible !important;

        box-sizing: border-box !important;

    }


    /*
     * GRID PRINT
     *
     * Default portrait:
     * 4 nomor per baris
     *
     * Lebar grid 100% sehingga otomatis
     * mengikuti ukuran kertas.
     */
    .pd-undian-preview {

        display: grid !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        grid-auto-rows:
            30mm !important;

        column-gap:
            2mm !important;

        row-gap:
            2mm !important;

        width: 100% !important;

        max-width: none !important;

        height: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        justify-content: stretch !important;

        align-content: start !important;

        box-sizing: border-box !important;

    }


    /*
     * KARTU
     *
     * Tidak lagi dikunci 50mm.
     * Lebarnya mengikuti kolom grid.
     */
    .pd-undian-preview .pd-nomor-undian {

        position: relative !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;

        min-width: 0 !important;

        max-width: none !important;

        height: 35mm !important;
min-height: 35mm !important;
max-height: 35mm !important;

        box-sizing: border-box !important;

        aspect-ratio: auto !important;

        margin: 0 !important;

        padding: 3mm !important;

        overflow: hidden !important;

        border:
            0.5mm dashed #999 !important;

        border-radius:
            2mm !important;

        background:
    linear-gradient(
        135deg,
        #ffffff 0%,
        #f5f5f5 100%
    ) !important;

background-color: #ffffff !important;

-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;

        box-shadow: none !important;

        break-inside:
            avoid !important;

        page-break-inside:
            avoid !important;

        color: #111 !important;

        isolation: isolate !important;

        print-color-adjust:
            exact !important;

        -webkit-print-color-adjust:
            exact !important;

    }


    /*
     * WATERMARK
     */
    .pd-nomor-undian-watermark {

        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        z-index: 1 !important;

        pointer-events: none !important;

        overflow: hidden !important;

        visibility: visible !important;

    }


    .pd-nomor-undian-watermark img {

        display: block !important;

        width: 100% !important;

        height: 100% !important;

        max-width: 100% !important;

        max-height: 100% !important;

        min-width: 100% !important;

        min-height: 100% !important;

        object-fit: contain !important;

        object-position: center center !important;

        opacity: .22 !important;

        visibility: visible !important;

        pointer-events: none !important;

        print-color-adjust:
            exact !important;

        -webkit-print-color-adjust:
            exact !important;

    }


    /*
     * JUDUL
     */
    .pd-nomor-undian-judul {

        position: relative !important;

        z-index: 3 !important;

        width: 100% !important;

        font-size: 3mm !important;

        line-height: 1.1 !important;

        font-weight: 800 !important;

        margin:
            0 0 1.5mm !important;

        padding: 0 !important;

        text-align: center !important;

        white-space: nowrap !important;

        color: #333 !important;

    }


    /*
     * DESA
     */
    .pd-nomor-undian-desa {

        position: relative !important;

        z-index: 3 !important;

        width: 90% !important;

        max-width: 90% !important;

        font-size: 2.5mm !important;

        line-height: 1.1 !important;

        font-weight: 600 !important;

        margin:
            0 0 1.5mm !important;

        padding: 0 !important;

        text-align: center !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        color: #555 !important;

    }


    /*
     * ANGKA
     */
    .pd-nomor-undian-angka {

        position: relative !important;

        z-index: 4 !important;

        font-size: 12mm !important;

        line-height: .85 !important;

        font-weight: 900 !important;

        letter-spacing: .3mm !important;

        margin: 0 !important;

        padding: 0 !important;

        text-align: center !important;

        white-space: nowrap !important;

        color: #000 !important;

    }


    /*
     * WARNA CETAK
     */
    .pd-nomor-undian,
    .pd-nomor-undian::before,
    .pd-nomor-undian::after,
    .pd-nomor-undian-watermark,
    .pd-nomor-undian-watermark img {

        print-color-adjust:
            exact !important;

        -webkit-print-color-adjust:
            exact !important;

    }


    /*
     * JANGAN PECAH KARTU
     */
    .pd-nomor-undian {

        break-inside:
            avoid !important;

        page-break-inside:
            avoid !important;

    }

}

/* =====================================================
   ORNAMEN WARNA-WARNI
===================================================== */

.pd-nomor-undian::before {

    content: "" !important;

    position: absolute !important;

    width: 20mm !important;
    height: 20mm !important;

    border-radius: 50% !important;

    background-color: rgba(220, 38, 38, 0.18) !important;

    top: -9mm !important;
    left: -9mm !important;

    z-index: 0 !important;

    display: block !important;
    visibility: visible !important;

    pointer-events: none !important;

    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
}


.pd-nomor-undian::after {

    content: "" !important;

    position: absolute !important;

    width: 20mm !important;
    height: 20mm !important;

    border-radius: 50% !important;

    background-color: rgba(22, 163, 74, 0.18) !important;

    bottom: -9mm !important;
    right: -9mm !important;

    z-index: 0 !important;

    display: block !important;
    visibility: visible !important;

    pointer-events: none !important;

    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
}


/* =========================================================
   PRINT LANDSCAPE
   6 NOMOR PER BARIS
========================================================= */

@media print and (orientation: landscape) {

    .pd-undian-preview {

        grid-template-columns:
            repeat(6, minmax(0, 1fr)) !important;

    }

}


/* =========================================================
   PRINT PORTRAIT
   4 NOMOR PER BARIS
========================================================= */

@media print and (orientation: portrait) {

    .pd-undian-preview {

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

    }

}