@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
:root {
  -baseColor: #656c7c;
  -baseSize: 16px;
  -baseLineHeight: 1.5;
  -fontFamily: Inter, sans-serif;
  -pink: #ea4c89;
  -pinkLight: #ffecf0;
  -blue: #1769ff;
  -redTick: url("data:image/svg+xml,%3Csvg width='18' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.552.134 5.717 10.97 1.448 6.701 0 8.149l5.717 5.717L18 1.583 16.552.134Z' fill='%23EA455F'/%3E%3C/svg%3E%0A");
  -whiteTick: url("data:image/svg+xml,%3Csvg width='18' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.552.134 5.717 10.97 1.448 6.701 0 8.149l5.717 5.717L18 1.583 16.552.134Z' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");
  -close: url("data:image/svg+xml,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 1.414 16.586 0 9 7.586 1.414 0 0 1.414 7.586 9 0 16.586 1.414 18 9 10.414 16.586 18 18 16.586 10.414 9 18 1.414Z' fill='%23B1B8C9'/%3E%3C/svg%3E");
  -entpIcon: url("data:image/svg+xml,%3Csvg width='42' height='42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.813 11.077 21 1.155l17.187 9.922v19.846L21 40.845 3.813 30.923V11.077Z' stroke='%23fff' stroke-width='2'/%3E%3Ccircle cx='21' cy='21' r='8' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}
        /* Modern CSS styling */
       body {
    font-family: 'Inter', Arial, sans-serif;
    background-color: #f3f4f6;
    display: flex;
    align-items: flex-start; /* Aligns content to the top */
    justify-content: center; /* Keeps the container horizontally centered */
    min-height: 100vh; /* Ensures body takes at least the full viewport height */
    margin: 16px; /* Adds space around the body */
    padding: 16px; /* Adds internal spacing for smaller screens */
    box-sizing: border-box; /* Includes padding/margin in total width/height */
}

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(to bottom, #ffffff 0%, #4fc3f7 30%, #039be5 100%);
  font-family: Arial, sans-serif;
  min-height: 100vh;
}

        .container {
            background: #ffffff;
            padding: 32px;
            border-radius: 16px;
            box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            margin: 5px auto; /* Adds vertical and horizontal margin */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }


        .container:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
        }

        h2 {
            color: #3b82f6;
            text-align: center;
            margin-bottom: 24px;
            font-size: 2em;
            font-weight: 700;
        }

        form {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            justify-content: space-between;
        }

        .form-group {
            width: calc(50% - 8px);
        }

        .form-speech {
            width: calc(99% - 8px);
        }
        
        label {
            display: block;
            font-weight: 600;
            color: #374151;
            font-size: 0.95em;
            margin-bottom: 8px;
        }

        input, select {
            width: 90%;
            padding: 12px;
            border: 1px solid #d1d5db;
            border-radius: 12px;
            font-size: 1em;
            background-color: #f9fafb;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            outline: none;
        }

        input:focus, select:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
        }

        button {
            min-width: 50%;
            padding: 14px;
            background: linear-gradient(135deg, #4f46e5, #3b82f6);
            color: #ffffff;
            border: none;
            border-radius: 12px;
            font-size: 1.1em;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }

        button:hover {
            background: linear-gradient(135deg, #4338ca, #2563eb);
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
            transform: translateY(-2px);
        }

        button:active {
            transform: translateY(0);
            box-shadow: 0 2px 10px rgba(59, 130, 246, 0.2);
        }

        a {
            color: #3b82f6;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease, text-shadow 0.3s ease;
        }

        a:hover {
            color: #2563eb;
            /*text-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);*/
        }

        a:active {
            color: #1e40af;
        }

        @media (max-width: 768px) {
            .form-group {
                width: 100%; /* Full width on smaller screens */
            }

            h2 {
                font-size: 1.8em;
            }
        }
        
               /* Apple-inspired CSS styling for toggle switches */
.checkbox-group label {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 600;
    color: #333333; /* Neutral, clean text color */
    cursor: pointer;
}

.checkbox-group label input[type="checkbox"] {
    appearance: none;
    width: 50px;
    height: 28px;
    margin-right: 12px;
    border: 2px solid #d1d5db; /* Light gray border */
    border-radius: 14px; /* Rounded for toggle switch look */
    background-color: #f0f0f0; /* Light gray background */
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.checkbox-group label input[type="checkbox"]::before {
    content: '';
    width: 22px;
    height: 22px;
    background-color: #ffffff; /* White toggle knob */
    border-radius: 50%; /* Circular toggle knob */
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: left 0.2s ease, background-color 0.2s ease;
}

.checkbox-group label input[type="checkbox"]:checked {
    background-color: #007aff; /* Apple's signature blue for checked state */
    border-color: #007aff; /* Match the border with the background */
}

.checkbox-group label input[type="checkbox"]:checked::before {
    left: calc(100% - 26px); /* Move the knob to the right */
    background-color: #ffffff; /* Ensure the knob remains white */
}

.checkbox-group label input[type="checkbox"]:focus {
    border-color: #007aff;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.3); /* Focus ring */
}

.checkbox-group label input[type="checkbox"]:hover {
    background-color: #e6f2ff; /* Slightly lighter blue hover state */
}