@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500;600;700;800;900&display=swap');

:root{
    --red:#8a1c1c;
    --red-dark:#5c1010;
    --red-soft:#fff0ed;
    --gold:#dcae45;
    --gold-soft:#fff7e5;
    --green:#17634d;
    --green-dark:#104b3a;
    --ink:#241714;
    --muted:#756760;
    --cream:#fbf7f1;
    --white:#ffffff;
    --line:#e8ddd4;
    --shadow:0 20px 60px rgba(45,25,18,.10);
    --soft-shadow:0 8px 28px rgba(45,25,18,.07);
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Noto Sans Devanagari","Mangal",Arial,sans-serif;
    background:
        radial-gradient(circle at 10% 5%,rgba(220,174,69,.12),transparent 25%),
        linear-gradient(180deg,#f7f0e8 0%,#fffaf5 100%);
    color:var(--ink);
    line-height:1.7;
}

input,select,textarea,button{
    font:inherit;
}

button,a{
    -webkit-tap-highlight-color:transparent;
}

.page{
    width:min(100% - 32px,1080px);
    margin:32px auto 45px;
    background:#fff;
    border:1px solid rgba(138,28,28,.08);
    border-radius:28px;
    box-shadow:var(--shadow);
    overflow:hidden;
}

/* =========================================================
   TOP ACTIONS
========================================================= */

.actions{
    width:min(100% - 32px,1080px);
    margin:22px auto 0;
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

.btn{
    min-height:45px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:10px 18px;
    border:0;
    border-radius:12px;
    font-weight:800;
    cursor:pointer;
    text-decoration:none;
    transition:.25s ease;
}

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

.btn-primary{
    color:#fff;
    background:linear-gradient(135deg,var(--red),var(--red-dark));
    box-shadow:0 9px 24px rgba(138,28,28,.18);
}

.btn-secondary{
    color:#463a35;
    background:#fff;
    border:1px solid var(--line);
}

/* =========================================================
   STATUS
========================================================= */

.status{
    display:none;
    width:min(100% - 32px,1080px);
    margin:12px auto;
    padding:12px 18px;
    border-radius:12px;
    background:#e9f7ef;
    color:#145c42;
    text-align:center;
    font-weight:700;
}

.status.show{display:block}

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

.form-header{
    position:relative;
    min-height:265px;
    padding:38px 190px 38px 38px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:
        radial-gradient(circle at 12% 0%,rgba(220,174,69,.22),transparent 28%),
        radial-gradient(circle at 90% 100%,rgba(138,28,28,.12),transparent 30%),
        linear-gradient(135deg,#fffdf9,#fff5eb);
    border-bottom:1px solid var(--line);
}

.form-header::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:6px;
    background:linear-gradient(90deg,var(--red),var(--gold),var(--red));
}

.form-header::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:130px;
    height:3px;
    background:var(--gold);
    border-radius:5px 5px 0 0;
}

.logo{
    width:155px;
    height:115px;
    object-fit:contain;
    margin:0 auto 3px;
}

.form-title{
    color:var(--red);
    font-size:34px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:-.5px;
}

.form-subtitle{
    margin-top:6px;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
}

/* =========================================================
   PHOTO UPLOAD
========================================================= */

.photo-upload{
    position:absolute;
    right:35px;
    top:42px;
    width:135px;
    height:165px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    cursor:pointer;
    background:#fff;
    border:2px dashed #cdbeb3;
    border-radius:16px;
    color:#70635d;
    transition:.25s ease;
}

.photo-upload:hover{
    border-color:var(--red);
    background:#fffaf6;
    box-shadow:0 10px 25px rgba(138,28,28,.10);
}

.photo-upload span{
    text-align:center;
    font-size:13px;
    line-height:1.6;
    font-weight:800;
}

.photo-upload small{
    color:var(--red);
    font-size:10px;
}

.photo-upload img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:none;
    background:#fff;
}

#photo,#signature{
    display:none;
}

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

#candidateForm{
    padding:38px;
}

.form-row{
    display:flex;
    align-items:center;
    gap:16px;
    margin:17px 0;
}

.form-label{
    flex:0 0 auto;
    color:#3b302b;
    font-size:15px;
    font-weight:800;
}

.required{
    color:var(--red);
}

.line-input,
.inline-select{
    flex:1;
    width:100%;
    min-width:0;
    height:44px;
    padding:0 13px;
    color:var(--ink);
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    outline:none;
    transition:.2s ease;
}

.line-input:focus,
.inline-select:focus,
.textarea-line:focus{
    border-color:var(--green);
    box-shadow:0 0 0 4px rgba(23,99,77,.08);
}

.line-input::placeholder,
.textarea-line::placeholder{
    color:#b0a49d;
}

.grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.grid-4{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:14px;
}

.field-inline{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.field-inline .form-label{
    font-size:13px;
}

.full-row{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:7px;
}

.textarea-line{
    width:100%;
    min-height:115px;
    padding:12px 14px;
    resize:vertical;
    color:var(--ink);
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    outline:none;
    font:inherit;
    line-height:1.7;
    transition:.2s ease;
}

/* =========================================================
   CLASS OPTIONS
========================================================= */

.class-row{
    align-items:flex-start;
    padding:19px;
    background:#fffaf5;
    border:1px solid #eee1d5;
    border-radius:15px;
}

.class-options{
    flex:1;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

.class-option{
    display:flex;
    align-items:center;
    gap:9px;
    padding:11px 13px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    color:#51443e;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:.2s ease;
}

.class-option:hover{
    border-color:#d5b08d;
    background:#fffaf5;
}

.class-option input{
    width:17px;
    height:17px;
    accent-color:var(--red);
}

/* =========================================================
   DECLARATION
========================================================= */

.note{
    position:relative;
    margin:32px 0 25px;
    padding:20px 24px;
    background:linear-gradient(135deg,#fff8e9,#fff3e9);
    border:1px solid #ecd8bd;
    border-left:5px solid var(--gold);
    border-radius:14px;
    color:#5d4033;
    text-align:left;
    font-size:13px;
    line-height:1.8;
}

.note strong{
    color:var(--red);
    font-weight:900;
}

/* =========================================================
   BOTTOM DATE + SIGNATURE
========================================================= */

.bottom-row{
    display:grid;
    grid-template-columns:1fr 280px;
    gap:35px;
    align-items:end;
    margin-top:28px;
    padding-top:25px;
    border-top:1px solid var(--line);
}

.date-place{
    font-size:14px;
    font-weight:800;
    line-height:2.8;
}

.signature{
    width:100%;
    text-align:center;
    font-size:14px;
    font-weight:800;
}

.signature-upload{
    position:relative;
    width:100%;
    height:112px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    cursor:pointer;
    background:#fff;
    border:2px dashed #cdbeb3;
    border-radius:14px;
    color:#70635d;
    transition:.25s ease;
}

.signature-upload:hover{
    border-color:var(--green);
    background:#f8fcfa;
    box-shadow:0 9px 25px rgba(23,99,77,.09);
}

.signature-upload span{
    text-align:center;
    font-size:12px;
    line-height:1.6;
    font-weight:800;
}

.signature-upload small{
    color:var(--green);
    font-size:10px;
}

.signature-upload img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:none;
    object-fit:contain;
    background:#fff;
}

.signature-caption{
    margin-top:8px;
    color:#443832;
}

.signature-input{
    height:42px;
    padding:0 10px;
    border:1px solid var(--line);
    border-radius:9px;
    outline:none;
    font:inherit;
    background:#fff;
}

/* =========================================================
   SUBMIT AREA
========================================================= */

#candidateForm > .actions{
    width:100%;
    margin:32px 0 0;
    padding-top:25px;
    display:flex;
    justify-content:center;
    border-top:1px solid var(--line);
}

#candidateForm > .actions .btn-primary{
    min-width:250px;
    min-height:54px;
    font-size:15px;
    border-radius:14px;
}

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

.home-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:45px;
    padding:10px 18px;
    border-radius:12px;
    color:#fff;
    background:linear-gradient(135deg,var(--green),var(--green-dark));
    text-decoration:none;
    font-size:13px;
    font-weight:800;
    box-shadow:0 8px 22px rgba(23,99,77,.15);
    transition:.25s ease;
}

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

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

@media(max-width:800px){

    body{
        background:#fffaf5;
    }

    .actions{
        width:calc(100% - 24px);
        margin:12px auto;
        justify-content:center;
        flex-wrap:wrap;
    }

    .actions .btn{
        flex:1 1 160px;
    }

    .page{
        width:100%;
        margin:0;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    .form-header{
        min-height:auto;
        padding:28px 18px 28px;
    }

    .logo{
        width:145px;
        height:105px;
    }

    .form-title{
        font-size:28px;
    }

    .form-subtitle{
        font-size:12px;
    }

    .photo-upload{
        position:relative;
        right:auto;
        top:auto;
        margin:20px auto 0;
        width:120px;
        height:145px;
    }

    #candidateForm{
        padding:25px 18px 35px;
    }

    .form-row{
        flex-direction:column;
        align-items:stretch;
        gap:6px;
        margin:18px 0;
    }

    .form-label{
        font-size:14px;
    }

    .grid-2,
    .grid-4{
        grid-template-columns:1fr;
        gap:0;
    }

    .field-inline{
        margin:8px 0;
    }

    .class-row{
        padding:16px;
    }

    .class-options{
        width:100%;
        grid-template-columns:1fr;
    }

    .bottom-row{
        grid-template-columns:1fr;
        gap:28px;
    }

    .signature{
        max-width:330px;
        margin:auto;
    }

    #candidateForm > .actions{
        padding-top:20px;
    }

    #candidateForm > .actions .btn-primary{
        width:100%;
        min-width:0;
    }
}

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

@media(max-width:480px){

    .actions .btn{
        width:100%;
        flex-basis:100%;
    }

    .form-title{
        font-size:25px;
    }

    .candidate-info{
        padding:0;
    }

    .line-input,
    .inline-select{
        height:45px;
    }

    .textarea-line{
        min-height:105px;
    }

    .note{
        padding:16px;
        font-size:12.5px;
    }
}

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

@media print{

    @page{
        size:A4 portrait;
        margin:8mm;
    }

    body{
        background:#fff;
    }

    .actions,
    .status{
        display:none!important;
    }

    .page{
        width:210mm;
        min-height:297mm;
        margin:0;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    #candidateForm{
        padding:8mm;
    }

    .form-header{
        min-height:55mm;
        padding:7mm 42mm 7mm 7mm;
    }

    .form-title{
        font-size:7mm;
    }

    .logo{
        width:40mm;
        height:30mm;
    }

    .photo-upload{
        width:30mm;
        height:37mm;
        right:7mm;
        top:8mm;
    }

    .form-row{
        margin:3.5mm 0;
    }

    .line-input,
    .inline-select{
        height:9mm;
    }

    .textarea-line{
        min-height:20mm;
    }

    .class-row{
        padding:4mm;
    }

    .note{
        margin:5mm 0;
        padding:4mm;
    }

    .bottom-row{
        margin-top:5mm;
    }

    .signature-upload{
        height:25mm;
    }

    #candidateForm > .actions{
        display:none;
    }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
    *{
        scroll-behavior:auto!important;
        transition:none!important;
    }
}


.form-error {
    display: none;

    margin: 0 0 25px;
    padding: 14px 18px;

    border: 1px solid #f0b8b8;
    border-left: 5px solid #c9141e;
    border-radius: 12px;

    background: #fff3f3;
    color: #8a1c1c;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.6;
}

.form-error.show {
    display: block;
}