.pieteikuma_anketa {
    width:80%;
    margin:0 auto;
    text-align: center;
    padding:60px 0px;
}
 
.pieteikuma_anketa .click-inputs {
    display:flex;
    width:100%;
    justify-content: space-between;
}
.checkboxes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


               /* Form Container Styles */
        .form-container form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem; /* Equivalent to Tailwind's space-y-6 */
        }

        /* All Inputs Container (Grid Layout) */
        .text-inputs {
            display: grid;
            grid-template-columns: 1fr; /* Single column by default */
            gap: 1.5rem; /* Equivalent to Tailwind's gap-6 */
        }

        @media (min-width: 768px) { /* md breakpoint */
            .text-inputs {
                grid-template-columns: 1fr 1fr; /* Two columns on medium screens and up */
            }
        }

        /* Info Inputs Styles */
        .row-1, .row-2 {
            display: flex;
            flex-direction: column;
            gap: 1rem; /* Equivalent to Tailwind's space-y-4 */
        }

        /* Input and Textarea Base Styles */
        .pieteikuma_anketa input[type="text"],
        .pieteikuma_anketa input[type="email"],
        .pieteikuma_anketa input[type="number"]{
            padding: 0.75rem; /* Equivalent to Tailwind's p-3 */
            border: 1px solid #d1d5db; /* Equivalent to Tailwind's border-gray-300 */
            border-radius: 0.1rem; /* Equivalent to Tailwind's rounded-md */
            transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Equivalent to Tailwind's transition duration-200 */
            width: 100%; /* Ensure inputs take full width of their container */
            box-sizing: border-box; /* Include padding and border in the element's total width and height */
        }

        /* Placeholder Styles */
        .pieteikuma_anketa input::placeholder,
        .pieteikuma_anketa textarea::placeholder {
            color: #a0a0a0; /* Slightly darker gray for better readability */
            opacity: 1; /* Ensure full opacity for consistency */
        }

        /* Focus Styles for Inputs and Textarea */
        .pieteikuma_anketa input[type="text"]:focus,
        .pieteikuma_anketa input[type="email"]:focus,
        .pieteikuma_anketa input[type="number"]:focus {
            outline: none;
            border-color: #fcee21; /* Tailwind yellow-400 */
            box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.5); /* Subtle yellow glow */
        }


/* CHECKBOX */

.pieteikuma_anketa .checkboxes {
    margin-bottom:20px;
}

.pieteikuma_anketa .checkbox-1, .pieteikuma_anketa .checkbox-2 {
    display: flex;
    align-items: center;
}

.checkboxes input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
    position: relative; /* Crucial for positioning the checkmark */
    background-color: #ffffff;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Styles for the checkmark itself */
.checkboxes input[type="checkbox"]::before {
    content: ''; /* Must be present for the pseudo-element to render */
    display: block; /* Make it a block-level element */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); /* Hide the checkmark by default */
    width: 12px; /* Adjust size of the checkmark */
    height: 12px; /* Adjust size of the checkmark */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E");
    background-size: cover;
    transition: transform 0.2s ease;
}

/* Styles when the checkbox is checked */
.checkboxes input[type="checkbox"]:checked {
    background-color: #fcee21; /* Yellow background when checked */
    border-color: #fcee21; /* Yellow border when checked */
}

/* Show the checkmark when the checkbox is checked */
.checkboxes input[type="checkbox"]:checked::before {
    transform: translate(-50%, -50%) scale(1); /* Scale it up to show it */
}