@import url("https://fonts.googleapis.com/css2?family=Anek+Gujarati:wght@400;500;600;700&display=swap");

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #fff8ef;
    color: #4d2816;
    font-family: "Anek Gujarati", Arial, sans-serif;
}

/* ==================================================
   TOP BAR
================================================== */

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    min-height: 48px;
    padding: 10px 18px;

    background: #7b2b12;
    color: #ffffff;

    box-shadow: 0 3px 14px rgba(59, 29, 15, 0.25);
}

.topbar strong {
    font-size: 18px;
    font-weight: 700;
}

.topbar span {
    font-size: 16px;
    font-weight: 500;
}

/* ==================================================
   PAGE LAYOUT
================================================== */

.form-wrapper {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 16px;
}

/*
Original page image ratio is 1275 x 1650,
therefore correct ratio is 17 / 22.
Do not change this to 3 / 4.
*/
.form-page {
    position: relative;

    width: 100%;
    aspect-ratio: 17 / 22;

    margin: 0 auto 22px;

    overflow: hidden;
    background: #ffffff;

    box-shadow: 0 10px 30px rgba(102, 50, 20, 0.20);
}

.page-background {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: fill;

    pointer-events: none;
    user-select: none;
}

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

.field-box {
    position: absolute;
    z-index: 20;

    display: block;

    margin: 0;
    padding: 1px 7px;

    border: 1px solid rgba(174, 96, 44, 0.76);
    border-radius: 4px;

    outline: none;

    /* Opaque cream background completely hides dotted line */
    background: #fbf1df;

    color: #4d2816;

    font-family: "Anek Gujarati", Arial, sans-serif;
    font-size: clamp(7px, 1.24vw, 15px);
    font-weight: 500;
    line-height: 1.15;

    caret-color: #a43a15;

    /* small mask hides any remaining dot at box edges */
    box-shadow:
        0 1px 4px rgba(109, 53, 25, 0.08);
}

.field-box:hover {
    border-color: #b04a20;
    background: #fcf3e4;
}

.field-box:focus {
    border-color: #9e3512;
    background: #fff7e9;

    box-shadow:
        0 0 0 2px rgba(174, 67, 23, 0.13);
}

.field-box::placeholder {
    color: rgba(85, 52, 32, 0.56);
    font-weight: 400;
}

.readonly-box {
    display: flex;
    align-items: center;

    color: #9f3412;

    font-family: Arial, sans-serif;
    font-size: clamp(7px, 1.14vw, 14px);
    font-weight: 700;

    white-space: nowrap;
}

.date-field {
    font-family: Arial, sans-serif;
    font-size: clamp(7px, 1.10vw, 14px);
    font-weight: 500;
}

.select-field {
    padding-right: 22px;
    cursor: pointer;

    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}

.right-side-field {
    padding-left: 10px;
}

.field-box:-webkit-autofill,
.field-box:-webkit-autofill:hover,
.field-box:-webkit-autofill:focus,
.field-box:-webkit-autofill:active {
    -webkit-text-fill-color: #4d2816 !important;

    -webkit-box-shadow:
        0 0 0 1000px #fbf1df inset !important;

    box-shadow:
        0 0 0 1000px #fbf1df inset !important;
}

input[type="number"].field-box {
    appearance: textfield;
    -moz-appearance: textfield;
}

input[type="number"].field-box::-webkit-inner-spin-button,
input[type="number"].field-box::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* ==================================================
   PHOTO BOX
================================================== */

.photo-upload-box {
    position: absolute;
    z-index: 25;

    left: 73.12%;
    top: 38.62%;

    width: 17.72%;
    height: 16.98%;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 4px;

    overflow: hidden;

    border: 1px solid #764224;
    border-radius: 2px;

    background: #fbf1df;

    cursor: pointer;

    box-shadow:
        0 0 0 2px #fbf1df,
        0 2px 6px rgba(89, 43, 18, 0.10);
}

.photo-upload-box:hover {
    background: #fcf3e4;
}

.photo-upload-box input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}

.photo-upload-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 3px;

    color: #74401f;

    font-size: clamp(5px, 1.00vw, 12px);
    font-weight: 600;

    line-height: 1.25;
    text-align: center;
}

.photo-upload-text small {
    font-family: Arial, sans-serif;
    font-size: 67%;
    font-weight: 400;
}

.photo-upload-text.is-hidden {
    display: none;
}

.photo-preview {
    display: none;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;
}

.photo-preview.is-visible {
    display: block;
}

/* ==================================================
   ORIGINAL SQUARE SELECTION
================================================== */

.option-square {
    position: absolute;
    z-index: 35;

    width: 2.55%;
    height: 2.05%;

    margin: 0;

    cursor: pointer;
}

.option-square input {
    position: absolute;
    inset: 0;
    z-index: 2;

    width: 100%;
    height: 100%;

    margin: 0;

    opacity: 0;
    cursor: pointer;
}

.option-tick {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.option-square input:checked + .option-tick::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: 28%;
    height: 52%;

    border-right: 2px solid #b33c16;
    border-bottom: 2px solid #b33c16;

    transform:
        translate(-50%, -58%)
        rotate(45deg);

    transform-origin: center;
}

.option-square:focus-within {
    outline: 1px solid rgba(178, 59, 20, 0.45);
    outline-offset: 1px;
}

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

.save-form-bar {
    position: static;

    margin: -8px auto 22px;
    padding: 14px;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(101, 51, 25, 0.12);
    border-radius: 10px;

    box-shadow: 0 5px 18px rgba(73, 35, 17, 0.12);

    text-align: center;
}

.save-form-button {
    min-width: 150px;

    padding: 13px 30px;

    border: 0;
    border-radius: 9px;

    background: linear-gradient(135deg, #b84417, #8f2e0e);
    color: #ffffff;

    font-family: "Anek Gujarati", Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;

    cursor: pointer;

    box-shadow: 0 5px 15px rgba(126, 43, 13, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.save-form-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(126, 43, 13, 0.30);
}

.save-form-button:disabled {
    cursor: wait;
    opacity: 0.65;
}

/* ==================================================
   MESSAGE / ADMIN
================================================== */

.notice {
    margin-bottom: 14px;
    padding: 12px 15px;

    border-radius: 9px;

    font-size: 15px;
    font-weight: 600;
}

.error-notice {
    border: 1px solid #fecaca;
    background: #fee2e2;
    color: #991b1b;
}

.admin-card {
    padding: 20px;

    border-radius: 14px;

    background: #ffffff;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 10px;

    border-bottom: 1px solid #eeeeee;

    text-align: left;
    font-size: 14px;
}

.admin-table th {
    background: #fff7ed;
}

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

@media (max-width: 700px) {
    .form-wrapper {
        padding: 3px;
    }

    .form-page {
        margin-bottom: 8px;

        box-shadow: 0 4px 15px rgba(102, 50, 20, 0.15);
    }

    .topbar {
        min-height: 42px;
        padding: 8px 9px;
    }

    .topbar strong {
        font-size: 13px;
    }

    .topbar span {
        max-width: 48%;

        font-size: 11px;
        line-height: 1.25;
        text-align: right;
    }

    .field-box {
        padding: 0 3px;

        border-radius: 2px;

        font-size: clamp(6px, 1.75vw, 10px);

        box-shadow:
            0 0 0 1px #fbf1df,
            0 1px 2px rgba(109, 53, 25, 0.06);
    }

    .readonly-box,
    .date-field {
        font-size: clamp(5px, 1.50vw, 9px);
    }

    .select-field {
        padding-right: 12px;
    }

    .right-side-field {
        padding-left: 5px;
    }

    .photo-upload-box {
        padding: 2px;

        box-shadow:
            0 0 0 1px #fbf1df,
            0 1px 2px rgba(89, 43, 18, 0.08);
    }

    .photo-upload-text {
        font-size: clamp(4px, 1.42vw, 8px);
    }

    .option-square input:checked + .option-tick::after {
        border-right-width: 1.5px;
        border-bottom-width: 1.5px;
    }

    .save-form-bar {
        margin-top: 0;
        padding: 8px;
    }

    .save-form-button {
        min-width: 125px;

        padding: 10px 22px;

        font-size: 15px;
    }
}

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

@media print {
    body {
        background: #ffffff;
    }

    .topbar,
    .save-form-bar,
    .notice {
        display: none !important;
    }

    .form-wrapper {
        width: 100%;
        padding: 0;
    }

    .form-page {
        margin: 0;

        box-shadow: none;

        page-break-after: always;
    }

    .form-page:last-of-type {
        page-break-after: auto;
    }
}

/* ==================================================
   FINAL UNIFORM FIELD COLOR FIX
   Male/Female, Pincode, Mobile and every other box
   use the exact same form-background colour.
================================================== */
input.field-box,
select.field-box,
.readonly-box {
    background-color: #fbf1df !important;
    color: #4d2816 !important;
}

select.field-box option {
    background-color: #fbf1df;
    color: #4d2816;
}


/* ==================================================
   ADMIN DASHBOARD / PRINT COMPATIBILITY
================================================== */

.topbar a {
    color: #ffffff;
    text-decoration: none;
}

.admin-form-wrapper,
.wrap {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: 16px;
}

.admin-action-card {
    margin-bottom: 15px;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.filters input,
.filters select {
    min-height: 40px;
    padding: 8px 10px;

    border: 1px solid #d7b79e;
    border-radius: 7px;

    background: #fffaf3;
    color: #4d2816;
}

.btn {
    min-height: 40px;
    padding: 8px 15px;

    border: 0;
    border-radius: 7px;

    background: #9d3815;
    color: #ffffff;

    font-family: inherit;
    font-weight: 700;

    cursor: pointer;
}

.table-scroll {
    overflow-x: auto;
}

.pill {
    display: inline-block;
    padding: 4px 8px;

    border-radius: 999px;

    background: #ffedd5;
    color: #7c2d12;
}

.pagination a {
    display: inline-block;

    margin: 3px;
    padding: 7px 10px;

    border: 1px solid #e4c7ae;
    border-radius: 6px;

    background: #ffffff;
    color: #7c2d12;

    text-decoration: none;
}

.print-form-page {
    position: relative;
}

.print-overlay {
    position: absolute;
    z-index: 30;

    min-height: 2.62%;

    display: flex;
    align-items: center;

    padding: 1px 7px;

    overflow: hidden;

    border: 1px solid rgba(174, 96, 44, 0.76);
    border-radius: 4px;

    background: #fbf1df;
    color: #4d2816;

    font-family: "Anek Gujarati", Arial, sans-serif;
    font-size: clamp(7px, 1.24vw, 15px);
    font-weight: 500;

    white-space: nowrap;
}

.print-photo {
    position: absolute;
    z-index: 32;

    left: 73.12%;
    top: 38.62%;

    width: 17.72%;
    height: 16.98%;

    border: 1px solid #764224;

    background: #fbf1df;

    object-fit: cover;
    object-position: center top;
}

.print-option-check {
    position: absolute;
    z-index: 40;

    width: 2.55%;
    height: 2.05%;
}

.print-option-check::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: 28%;
    height: 52%;

    border-right: 2px solid #b33c16;
    border-bottom: 2px solid #b33c16;

    transform:
        translate(-50%, -58%)
        rotate(45deg);
}

@media print {
    .admin-form-wrapper {
        width: 100%;
        padding: 0;
    }

    .print-overlay {
        box-shadow: none;
    }
}