:root {
            --primary-color: #006400;
            --text-dark: #000000;
            --border-color: #333333;
        }

        .saf-form-container {
            width: 100%;
            max-width: 850px;
            margin: 20px auto;
            background: #ffffff;
            border: 2px solid var(--border-color);
            padding: 30px;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            color: var(--text-dark);
            position: relative;
        }

        /* Header Style */
        .saf-header {
            display: flex;
            align-items: center;
            border-bottom: 4px solid var(--primary-color);
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        .saf-logo {
            width: 80px;
            height: 80px;
            margin-right: 20px;
            border-radius: 50%;
            background: #f0f0f0; 
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            border: 1px solid #ccc;
            flex-shrink: 0;
        }
        .saf-logo img {
            max-width: 100%;
            height: auto;
        }
        .saf-header-text {
            flex: 1;
            text-align: center;
        }
        .saf-header-text h1 {
            color: var(--primary-color);
            margin: 0 0 5px 0;
            font-size: 24px;
            font-weight: bold;
            letter-spacing: 0.5px;
            font-family: initial;
        }
        .saf-header-text p {
            margin: 3px 0;
            font-size: 16px;
            font-weight: 500;
        }

        /* Section Headings */
        .saf-section-title {
            background-color: transparent;
            border-bottom: 2px solid var(--border-color);
            color: var(--text-dark);
            font-size: 16px;
            font-weight: bold;
            padding: 5px 0;
            margin-top: 25px;
            margin-bottom: 15px;
            text-transform: uppercase;
        }

        /* Form Layout Grid */
        .saf-row, .saf-row1 {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 12px;
            align-items: center;
            width: 100%;
        }
        .saf-col-full { width: 100%; }
        .saf-col-half { width: 50%; display: flex; align-items: center; box-sizing: border-box; }
        .saf-col-half1 { width: 50%; box-sizing: border-box; }
        .saf-col-third { width: 33.33%; display: flex; align-items: center; box-sizing: border-box; }

        /* Input Fields Styled as Underlines */
        .saf-input-group {
            display: flex;
            align-items: center;
            width: 100%;
            margin-bottom: 10px;
        }
        .saf-label {
            font-size: 14px;
            font-weight: bold;
            white-space: nowrap;
            margin-right: 8px;
        }
        .saf-underline-input {
            flex: 1;
            border: none;
            border-bottom: 1px solid var(--border-color);
            padding: 3px 5px;
            font-size: 14px;
            color: #000;
            background: transparent;
            min-width: 50px;
        }
        .saf-underline-input:focus {
            outline: none;
            border-bottom: 2px solid var(--primary-color);
        }

        /* Photo Box */
        .saf-photo-section {
            display: flex;
            width: 100%;
        }
        .saf-fields-left {
            flex: 1;
            padding-right: 15px;
        }
        .saf-photo-box {
            width: 140px;
            height: 160px;
            border: 2px solid var(--border-color);
            background: #e1e1e1;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            color: #555;
            position: relative;
            cursor: pointer;
        }
        .photo-label {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            box-sizing: border-box;
            cursor: pointer;
        }

        /* Checkbox Styling */
        .saf-checkbox-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin: 10px 0;
            width: 100%;
        }
        .saf-checkbox-label {
            display: flex;
            align-items: center;
            font-size: 13px;
            font-weight: bold;
            cursor: pointer;
        }
        .saf-checkbox-label input {
            margin-right: 6px;
            transform: scale(1.2);
        }
        .saf-checkbox-label-top, .saf-checkbox-label-pay {
           width: 45%;
           display: flex;
           align-items: center;
           font-size: 13px;
           font-weight: bold;
           cursor: pointer;
        }
        .saf-checkbox-label-top input, .saf-checkbox-label-pay input {
            margin-right: 6px;
            transform: scale(1.2);
        }

        /* Date format helper */
        .saf-date-field {
            width: 40px;
            text-align: center;
        }

        /* Declaration Section */
        .saf-declaration {
            font-size: 12px;
            line-height: 1.6;
            margin-top: 20px;
            text-align: justify;
        }
        .saf-declaration p {
            margin: 5px 0;
        }

        /* Action Buttons Area */
        .saf-buttons-area {
            margin-top: 35px;
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .saf-btn {
            padding: 12px 25px;
            font-size: 15px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            border-radius: 4px;
            transition: 0.3s;
        }
        .saf-btn-submit {
            background-color: var(--primary-color);
            color: white;
        }
        .saf-btn-submit:hover {
            background-color: #004d00;
        }
        .saf-btn-print {
            background-color: #333;
            color: white;
        }
        .saf-btn-print:hover {
            background-color: #111;
        }
        #photoPreview { 
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        .saf-col-half.Birth-box {
            margin-bottom: 10px;
        }
         .Birth-Gender-box, .saf-col-half.Gender-box {
            display: contents;
            margin-top: 10px;
        }
        .saf-col-half.Gender-box .gender-box {
            float: left;
            margin-top: 10px;
            width: 100%;
        }
        .saf-col-half.Gender-box .gender-box label.saf-checkbox-label {
            float: left;
            margin-bottom: 10px;
            
        }
        .Birth-Gender-box, .saf-col-half.Gender-box{
            display: contents;
        }
        .cuting {
          border-top: 5px dotted;
          margin-top: 30px;
         }
         
        /* ==========================================================================
           MOBILE & TABLET RESPONSIVE STYLES (Will not affect Print/PDF Output Layout)
           ========================================================================== */
        @media screen and (max-width: 768px) {
            .saf-form-container {
                padding: 15px;
                margin: 10px auto;
                border: 1px solid var(--border-color);
            }
            .saf-header {
                flex-direction: column;
                text-align: center;
            }
            .saf-logo {
                margin-right: 0;
                margin-bottom: 15px;
            }
            .saf-header-text h1 {
                font-size: 18px;
            }
            .saf-header-text p {
                font-size: 11px;
            }
            .saf-photo-section {
                flex-direction: column-reverse;
                align-items: center;
                gap: 20px;
            }
            .saf-fields-left {
                width: 100%;
                padding-right: 0;
            }
            .saf-photo-box {
                margin-bottom: 10px;
            }
            .saf-col-half, .saf-col-half1, .saf-col-third {
                width: 100% !important;
                padding-right: 0 !important;
                padding-left: 0 !important;
                margin-bottom: 10px;
            }
            .saf-input-group {
                flex-wrap: wrap;
            }
            .saf-label {
                width: 100%;
                margin-bottom: 4px;
                white-space: normal;
            }
            .saf-underline-input {
                width: 100%;
            }
            .saf-checkbox-label-top, .saf-checkbox-label-pay {
                width: 100%;
                margin-bottom: 8px;
            }
            .saf-btn {
                width: 100%;
                text-align: center;
            }
        }

        /* Print Media Queries to maintain exact crisp A4 layout */
        @media print {
            body { background: none; padding: 0; }
            .saf-form-container { border: none; padding: 0; max-width: 100%; }
            .saf-buttons-area { display: none; }
            .saf-underline-input { border-bottom: 1px solid #000 !important; }
            .saf-header { display: flex !important; flex-direction: row !important; }
            .saf-photo-section { display: flex !important; flex-direction: row !important; }
            .saf-col-half, .saf-col-half1 { width: 50% !important; }
            .saf-col-third { width: 33.33% !important; }
             #masthead, #colophon {
                display: none;
                }
        }

