@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 * {
     box-sizing: border-box;
 }

 body {
     margin: 0;
     background: #ececec;
     color: #111;
      font-family: "Poppins", sans-serif;
 }

 button,
 .file-btn {
     border: 0;
     border-radius: 6px;
     padding: 9px 14px;
     cursor: pointer;
     background: #fff;
     color: #222;
     font-weight: 700;
 }

 .primary {
     background: #c62828;
     color: #fff
 }

 .sheet {
     width: min(210mm, 96vw);
     min-height: 297mm;
     margin: 18px auto;
     background: #fff;
     padding: 13mm 11mm 10mm;
     box-shadow: 0 3px 18px #999;
     margin-bottom: 50px;
    
 }

 .header {
     border-bottom: 2px solid #222;
 }

 .top {
     display: grid;
     grid-template-columns: 1fr 120px 1fr;
     align-items: center;
     gap: 10px;

 }

 .leader-side {
     display: flex;
     gap: 8px;
     align-items: center
 }
 .leader-side img{
    width: 100%;
 }
/* 
 .mini-photo {
     width: 58px;
     height: 58px;
     border-radius: 10px;
     border: 1px solid #777;
     object-fit: cover;
     background: #ddd;
 } */

 .logo {
     width: 105px;
     height: 105px;
     border-radius: 50%;
     background: #dd6004;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     font-size: 19px;
     font-weight: 900;
     line-height: 1.15;
     margin: auto;
 }

 .logo img {
     width: 100px;
 }

 .office {
     text-align: center;
     font-weight: 600;
     font-size: 13px;
     margin: 5px 0 7px
 }

 .top-info {
     display: inline-grid;
     grid-template-columns: auto 140px;
     border: 1px solid #333;
     font-size: 12px;
     padding: 5px 0;
     margin-top: 5px;
 }

 .top-info div {
     padding: 2px 6px;
     border-bottom: 1px solid #333;
 }

 .top-info div:nth-last-child(-n+2) {
     border-bottom: 0
 }

 .top-info input {
     width: 100%;
     border: 0;
     outline: 0;
     background: #f5f5f5;
     padding: 2px 0;
     font-size: 13px;
 }

 .title {
     clear: both;
     text-align: center;
     font-size: 24px;
     color: #a61d1d;
    font-weight: 600;
     margin: 8px 0 10px;
     text-decoration: underline;
 }

 .recipient {
    text-align: left;
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    font-weight: 600;
    line-height: 1.55;
    font-size: 14px;
}
 

 .photo-area {
     float: right;
     margin: 0 0 5px 12px;
     text-align: center
 }

 .photo-box {
     width: 105px;
     height: 125px;
     border: 1px solid #333;
     background: #fafafa;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
 }

 .photo-box img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .photo-placeholder {
     font-weight: 800;
     color: #555
 }

 .photo-upload-btn,
 .photo-action-btn {
     display: inline-block;
     margin-top: 6px;
     padding: 6px 9px;
     border: 1px solid #777;
     border-radius: 5px;
     background: #fff;
     cursor: pointer;
     font: inherit;
     font-size: 11px;
     font-weight: 800;
 }

 .photo-upload-btn {
     background: #c62828;
     color: #fff;
     border-color: #c62828
 }

 .photo-action-btn {
     background: #f5f5f5
 }

 .photo-action-btn.danger {
     color: #a61d1d
 }

 .photo-area .hint {
     line-height: 1.3
 }


 /* =========================================================
   PHOTO CONTROLS
========================================================= */

 .photo-controls {
     margin-top: 5px;
     text-align: center;
 }

 .photo-controls input[type=file] {
     display: none;
 }

 .photo-btn {
     display: inline-block;
     background: #a51f31;
     color: white;
     border-radius: 4px;
     padding: 5px 10px;
     font-size: 11px;
     cursor: pointer;
 }

 .crop-btn {
     border: 0;
     background: #333;
     color: #fff;
     border-radius: 4px;
     padding: 5px 10px;
     font-size: 11px;
     cursor: pointer;
 }


 /* =========================================================
   CROP MODAL
========================================================= */

 .crop-modal {
     display: none;
     position: fixed;
     z-index: 9999;
     inset: 0;
     background: rgba(0, 0, 0, .78);
     justify-content: center;
     align-items: center;
     padding: 15px;
 }

 .crop-modal.show {
     display: flex;
 }

 .crop-window {
     width: min(700px, 100%);
     background: white;
     border-radius: 10px;
     padding: 18px;
 }

 .crop-window h3 {
     margin: 0 0 12px;
     text-align: center;
 }

 .crop-area {
     height: 430px;
     background: #222;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     touch-action: none;
 }

 #cropCanvas {
     max-width: 100%;
     max-height: 100%;
     cursor: grab;
 }

 .crop-controls {
     margin-top: 15px;
 }

 .crop-controls input {
     width: 100%;
 }

 .crop-actions {
     display: flex;
     justify-content: flex-end;
     gap: 10px;
     margin-top: 15px;
 }

 .crop-actions button {
     border: 0;
     padding: 9px 18px;
     border-radius: 5px;
     cursor: pointer;
 }

 .cancel {
     background: #ddd;
 }

 .apply {
     background: #a51f31;
     color: white;
 }

 .photo-box {
     height: 130px;
     width: 130px;
     border: 1px solid #555;
     margin-top: 3px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     position: relative;
     background: #fafafa;
 }

 .photo-box img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .photo-placeholder {
     text-align: center;
     color: #777;
     font-size: 15px;
 }

 @media(max-width:700px) {

     .photo-upload-btn,
     .photo-action-btn {
         font-size: 12px
     }
 }

 .section {
     clear: both;
     margin-top: 9px
 }

 /* 
 .row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
     margin: 6px 0
 }

 .field {
     display: flex;
     align-items: flex-end;
     gap: 7px;
     min-width: 0
 }

 .field.full {
     grid-column: 1/-1
 }

 label {
     font-weight: 800;
     white-space: nowrap;
     font-size: 14px
 }

 input,
 textarea,
 select {
     width: 100%;
     border: 0;
     border-bottom: 1px solid #333;
     outline: 0;
     font: inherit;
     font-weight: 600;
     background: transparent;
     padding: 3px 4px;
 }

 textarea {
     resize: vertical;
     min-height: 38px;
     border: 1px solid #777;
     padding: 5px
 }

 input:focus,
 textarea:focus,
 select:focus {
     background: #fff7f0;
     border-bottom: 2px solid #c62828
 }

 .declaration {
     font-weight: 800;
     font-size: 13px;
     line-height: 1.55;
     margin: 8px 0
 } */

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

 .form-line {
     display: flex;
     align-items: center;
     gap: 6px;
     margin: 8px 0;
 }

 .form-line label {
     white-space: nowrap;
     font-weight: 500;
    font-size: 14px;
 }

 .form-line label .en-label {
     display: block;
     font-size: 11px;
     font-weight: 500;
     color: #666;
     margin-top: 2px;
     text-transform: uppercase;
 }

 .form-line input,
 .form-line textarea,
 .line {
     width: 100%;
     border: 0;
     border-bottom: 1px solid #222;
     outline: none;
     background: #f5f5f5;
     padding: 2px 4px;
     font-size: 14px;
     min-width: 0;
 }

 .form-line input:focus,
 .form-line textarea:focus {
     border-bottom: 2px solid #a5202c;
 }

 /* =========================================================
   MULTI COLUMN
========================================================= */

 .three-col,
 .two-col,
 .four-col {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 25px;
 }

 .two-col {
     grid-template-columns: 1fr 1fr;
 }

 .four-col {
     grid-template-columns: 1fr 1fr 1fr 1fr;
 }

 .note-sec {
     text-align: center;
     font-size: 11px;
     background: #fae9e9;
     padding: 5px;
     border-radius: 4px;
     margin-bottom: 10px;
 }
 .declaration{
    font-size: 14px;
 }

 .signature-wrap {
     display: flex;
     justify-content: flex-end;
     margin-top: 4px;
 }

 .sig-box {
     text-align: center;
     width: 270px;
      margin: initial;
 }

 #signatureCanvas {
     width: 270px;
     height: 85px;
     border: 1px solid #555;
     background: #fff;
     touch-action: none;
     display: block;
 }

 .sig-actions {
     display: flex;
     justify-content: flex-end;
     gap: 5px;
     margin: 4px 0
 }

 /* Terms and conditions */
 .terms-container {
     max-width: 700px;
     margin: 40px auto;
     padding: 25px;
     text-align: left;
 }

 .terms-box {
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 10px;
     padding: 25px;
     box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
 }

 .terms-title {
     text-align: center;
     font-weight: 700;
     margin-bottom: 20px;
     color: #8a5a00;
 }

 .candidate-info {
     background: #fff8e8;
     border: 1px solid #e2c477;
     border-radius: 6px;
     padding: 12px 15px;
     margin-bottom: 20px;
 }

 .terms-list {
     padding-left: 22px;
     line-height: 1.8;
 }

 .signature-input {
     width: 100%;
     border: none;
     border-bottom: 1px solid #333;
     padding: 8px 4px;
     outline: none;
     margin-top: 5px;
 }

 .accept-row {
     margin-top: 20px;
     padding: 15px;
     background: #f7f7f7;
     border-radius: 6px;
 }

 .submit-btn {
     display: block;
     margin: 25px auto 0;
     padding: 10px 30px;
     border: none;
     border-radius: 5px;
     background: #b5872a;
     color: white;
     font-weight: 600;
     cursor: pointer;
 }

 .submit-btn:hover {
     background: #8f691e;
 }

 /* ===== OTP popup + result popup (shared visual language) ===== */
 .result-popup-overlay,
 .otp-popup-overlay {
     position: fixed;
     z-index: 99999;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.75);
     display: none;
     align-items: center;
     justify-content: center;
 }

 .result-popup-overlay.show,
 .otp-popup-overlay.show {
     display: flex !important;
 }

 .result-popup-box,
 .otp-popup-box {
     width: 90%;
     max-width: 400px;
     background-color: #fff;
     border-radius: 8px;
     padding: 28px 24px;
     text-align: center;
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
     animation: popupFadeIn 0.25s ease-out;
 }

 .result-popup-box .fa {
     font-size: 56px;
     margin-bottom: 12px;
     display: inline-block;
 }

 .result-popup-box.success .fa {
     color: #28a745;
 }

 .result-popup-box.failed .fa {
     color: #dc3545;
 }

 .result-popup-box h3,
 .otp-popup-box h3 {
     margin: 10px 0 8px;
     font-size: 18px;
     font-weight: 700;
 }

 .result-popup-box p,
 .otp-popup-box p {
     margin: 0 0 14px;
     font-size: 14.5px;
     color: #444;
     line-height: 1.5;
 }

 @keyframes popupFadeIn {
     from {
         opacity: 0;
         transform: scale(0.9);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 .otp-popup-box input {
     width: 100%;
     text-align: center;
     letter-spacing: 4px;
     font-size: 18px;
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 6px;
     margin-bottom: 6px;
 }

 .otp-popup-box input.field-invalid {
     border-color: #dc3545;
     background: #fff5f5;
 }

 .otp-field-error {
     display: block;
     color: #dc3545;
     font-size: 12px;
     min-height: 14px;
     margin-bottom: 10px;
 }

 .otp-resend {
     font-size: 12.5px;
     color: #b5872a;
     cursor: pointer;
     margin-top: 10px;
     display: inline-block;
 }

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

 /*.print-hide {}*/

 /*@media(max-width:700px) {*/
 /*    .sheet {*/
 /*        padding: 6mm 5mm;*/
 /*        margin: 0;*/
 /*        width: 100%;*/
 /*        box-shadow: none;*/
 /*        margin-bottom: 50px;*/
 /*    }*/

 /*    .top {*/
 /*        grid-template-columns: 1fr;*/
 /*        justify-items: center*/
 /*    }*/

 /*    .logo {*/
 /*        width: 85px;*/
 /*        height: 85px;*/
 /*        font-size: 16px*/
 /*    }*/

 /*    .title {*/
 /*        font-size: 20px*/
 /*    }*/

 /*    .form-line {*/
 /*        display: block;*/
 /*    }*/

 /*    .form-line label {*/
 /*        display: block;*/
 /*        margin-bottom: 3px;*/
 /*    }*/

 /*    .form-line input {*/
 /*        width: 100%;*/
 /*    }*/

 /*    .photo-area {*/
 /*        float: none;*/
 /*        margin: 0 auto 10px*/
 /*    }*/

 /*    .three-col,*/
 /*    .two-col {*/
 /*        grid-template-columns: 1fr;*/
 /*        gap: 0;*/
 /*    }*/
 /*}*/

 /*@media print {*/
 /*    body {*/
 /*        background: #fff*/
 /*    }*/

 /*    .print-hide,*/
 /*    .crop-modal {*/
 /*        display: none !important*/
 /*    }*/

 /*    .sheet {*/
 /*        width: 210mm;*/
 /*        min-height: 297mm;*/
 /*        margin: 0;*/
 /*        box-shadow: none;*/
 /*        padding: 10mm*/
 /*    }*/

 /*    input,*/
 /*    textarea,*/
 /*    select {*/
 /*        background: transparent*/
 /*    }*/
 /*}*/
 
 
 
@media (max-width: 700px) {

    .sheet {
        padding: 5mm 4mm;
        margin: 0;
        width: 100%;
        min-height: auto;
        box-shadow: none;
        margin-bottom: 50px;
        border-radius: 0;
    }

    /* ---------------------------------------------------------
       HEADER — three logos in one row, info box full width below
       ---------------------------------------------------------
       The real markup nests things three levels deep:
         .top > .leader-side (right) > <div style="width:100%;...">
                                          > img + .top-info
       That inline-styled wrapper is what was dragging the whole
       info box into the same cramped column as the third image.

       Fix: on mobile, "unwrap" both .leader-side containers and
       that inline-styled div with display:contents. Their children
       (the emblem img, the org img, and .top-info) then become
       direct flex items of .top itself, in this DOM order:
         emblem img → .logo → org img → .top-info
       giving the 3 images a row to share, then letting .top-info
       claim its own full-width line straight after them. */
    .top {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px 8px;
        text-align: center;
    }

    .leader-side,
    .leader-side > div {
        display: contents !important;
        width: auto !important;
        text-align: center !important;
    }

    .leader-side img {
        height: 50px;
        width: auto;
        max-width: 64px;
        object-fit: contain;
        flex: 0 0 auto;
    }

    .logo {
        width: 58px;
        height: 58px;
        font-size: 10px;
        flex: 0 0 auto;
        margin: 0;
    }

    .logo img {
        width: 52px;
    }

    /* Same plain look as the desktop .top-info box (no shading,
       no rounded card, no bold label column) — just the columns
       scaled down and font/padding shrunk to fit a phone. */
    .top-info {
        flex: 1 1 100%;
        order: 99;
        display: grid;
        grid-template-columns: 45% 55%;
        width: 100%;
        font-size: 11.5px;
        border: 1px solid #333;
        padding: 4px 0;
        margin-top: 8px;
        text-align: left;
    }

    .top-info div {
        padding: 4px 6px;
        border-bottom: 1px solid #333;
        line-height: 1.3;
    }

    .top-info div:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .top-info label,
    .top-info span {
        word-break: break-word;
        text-align: left;
    }

    .top-info input {
        width: 100%;
        border: 0;
        outline: 0;
        background: #f5f5f5;
        padding: 4px 2px;
        font-size: 12px;
        text-align: left;
    }

    .top-info input:focus {
        background: #fff7f0;
    }

    .office {
        font-size: 12px;
        margin-top: 8px;
    }

    .title {
        font-size: 18px;
        margin: 10px 0 8px;
    }

    .recipient {
        font-size: 13px;
    }

    /* Photo goes full-width above the fields it used to float beside,
       so it never squeezes form text into a thin column */
    .photo-area {
        float: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto 14px;
    }

    .photo-box {
        width: 96px;
        height: 115px;
    }

    /* Every form row becomes a stacked label-over-input block —
       far easier to read and tap than a cramped inline row */
    .form-line {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        margin: 12px 0;
    }

    .form-line label {
        white-space: normal;
        margin-bottom: 2px;
    }

    .form-line input,
    .form-line textarea,
    .form-line select,
    .line {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        /* prevents iOS auto-zoom on focus */
        padding: 10px 8px;
    }

    /* All multi-column grids collapse to a single column */
    .three-col,
    .two-col,
    .four-col {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .declaration {
        font-size: 13px;
    }

    /* Signature block centers and scales to the screen width
       instead of overflowing at a fixed 270px */
    .signature-wrap {
        justify-content: center;
        margin-top: 10px;
    }

    .sig-box {
        width: 100%;
        max-width: 280px;
    }

    #signatureCanvas {
        max-width: 100%;
    }

    .sig-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Crop modal fits within the viewport instead of relying on
       a tall fixed-height crop area */
    .crop-window {
        padding: 14px;
        border-radius: 8px;
    }

    .crop-area {
        height: 55vh;
        min-height: 240px;
    }

    .crop-actions {
        gap: 8px;
    }

    .crop-actions button {
        max-width: none;
    }

    .terms-container {
        margin: 16px auto;
        padding: 12px;
    }

    .terms-box {
        padding: 16px;
    }

    .otp-popup-box,
    .result-popup-box {
        padding: 22px 16px;
    }

    button,
    .file-btn {
        width: 100%;
    }

    .photo-upload-btn,
    .photo-action-btn,
    .photo-btn {
        font-size: 12.5px;
    }
}

@media print {
    body {
        background: #fff
    }

    .print-hide,
    .crop-modal {
        display: none !important
    }

    .sheet {
        width: 210mm;
        min-height: 297mm;
        margin: 0;
        box-shadow: none;
        padding: 10mm
    }

    input,
    textarea,
    select {
        background: transparent
    }
}