/**
 * Prescription Form Styles
 * WCAG 2.1 AA Compliant
 */

/* Form Wrapper */
.prescription-form-wrapper {
    max-width: 900px;
    margin: 2rem auto;
    font-size: 1rem;
    line-height: 1.6;
}

/* Apply box-sizing to all form elements */
.prescription-form-wrapper *,
.prescription-form-wrapper *::before,
.prescription-form-wrapper *::after {
    box-sizing: border-box;
}

/* CRITICAL: Force text inputs to maintain exact dimensions on ANY state */
.prescription-form-wrapper input[type="text"],
.prescription-form-wrapper input[type="email"],
.prescription-form-wrapper input[type="tel"],
.prescription-form-wrapper textarea {
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
}

/* Prevent ANY size changes on focus for text inputs */
.prescription-form-wrapper input[type="text"]:focus,
.prescription-form-wrapper input[type="email"]:focus,
.prescription-form-wrapper input[type="tel"]:focus,
.prescription-form-wrapper textarea:focus,
body .prescription-form-wrapper input[type="text"]:focus,
body .prescription-form-wrapper input[type="email"]:focus,
body .prescription-form-wrapper input[type="tel"]:focus,
body.keyboard-navigation .prescription-form-wrapper input[type="text"]:focus,
body.keyboard-navigation .prescription-form-wrapper input[type="email"]:focus,
body.keyboard-navigation .prescription-form-wrapper input[type="tel"]:focus {
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    scale: 1 !important;
}

/* Override global focus styles for prescription form to prevent layout shift */
.prescription-form-wrapper *:focus {
    outline: none !important;
}

/* Add focus styles that don't cause layout shift */
.prescription-form-wrapper a:focus-visible,
.prescription-form-wrapper button:focus-visible,
.prescription-form-wrapper input:focus-visible,
.prescription-form-wrapper textarea:focus-visible,
.prescription-form-wrapper select:focus-visible,
.prescription-form-wrapper [tabindex]:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px #005fcc !important;
}

/* Override the keyboard-focus class to prevent layout shift */
.prescription-form-wrapper .keyboard-focus {
    outline: none !important;
    outline-offset: 0 !important;
}

/* Override keyboard-navigation body class with higher specificity */
body.keyboard-navigation .prescription-form-wrapper a:focus,
body.keyboard-navigation .prescription-form-wrapper button:focus,
body.keyboard-navigation .prescription-form-wrapper input:focus,
body.keyboard-navigation .prescription-form-wrapper select:focus,
body.keyboard-navigation .prescription-form-wrapper textarea:focus,
body.keyboard-navigation .prescription-form-wrapper [tabindex]:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 3px #005fcc !important;
}

/* Specific overrides for form-field structure */
body.keyboard-navigation .prescription-form-wrapper .form-field input:focus,
body.keyboard-navigation .prescription-form-wrapper .form-row input:focus,
body.keyboard-navigation .prescription-form-wrapper .form-row .form-field input:focus,
.prescription-form-wrapper .form-field input:focus,
.prescription-form-wrapper .form-row input:focus,
.prescription-form-wrapper .form-row .form-field input:focus {
    outline: none !important;
    outline-offset: 0 !important;
}

/* Messages */
.form-message {
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    border-radius: 4px;
    border: 2px solid;
}

.form-message:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);
}

.form-success {
    background-color: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.form-error {
    background-color: #f8d7da;
    border-color: #dc3545;
    color: #721c24;
}

.form-message h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
}

.form-message ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
}

.form-message a {
    color: inherit;
    text-decoration: underline;
}

.form-message a:hover,
.form-message a:focus {
    text-decoration: none;
}

/* Form Elements */
.prescription-form {
    background: #fff;
    padding: 2rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.required-info {
    margin: 0 0 1.5rem 0;
    font-style: italic;
    color: #666;
}

fieldset {
    margin: 2rem 0;
    padding: 2rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: grid;
    gap: 1rem;
    /* Prevent any expansion from focus states */
    contain: layout;
    position: relative;
}

/* First fieldset doesn't need top margin */
.prescription-form fieldset:first-of-type {
    margin-top: 0;
}

legend {
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0 0.5rem;
    color: #333;
}

.fieldset-description {
    margin: 0 0 1rem 0;
    color: #666;
}

/* Form Fields */
.form-field {
    margin-bottom: 1.5rem;
    min-width: 400px!important;
}

/* Responsive min-width for smaller viewports */
@media (max-width: 600px) {
    .form-field {
        min-width: 100%!important;
    }
}

/* Specific field sizing - place after general rules for higher specificity */
.prescription-form-wrapper #vorname,
.prescription-form-wrapper #nachname,
.prescription-form-wrapper #email,
.prescription-form-wrapper #telefon {
    height: 54px !important; /* Bigger height for these fields */
}

.prescription-form-wrapper #geburtstag {
    max-width: 200px !important; /* Reasonable width for date */
    height: 54px !important; /* Same height as other fields */
}

/* Adjust focus state heights to match - with even higher specificity */
body.keyboard-navigation .prescription-form-wrapper #vorname:focus,
body.keyboard-navigation .prescription-form-wrapper #nachname:focus,
body.keyboard-navigation .prescription-form-wrapper #email:focus,
body.keyboard-navigation .prescription-form-wrapper #telefon:focus,
.prescription-form-wrapper #vorname:focus,
.prescription-form-wrapper #nachname:focus,
.prescription-form-wrapper #email:focus,
.prescription-form-wrapper #telefon:focus {
    height: 54px !important;
}

body.keyboard-navigation .prescription-form-wrapper #geburtstag:focus,
.prescription-form-wrapper #geburtstag:focus {
    height: 54px !important;
    max-width: 200px !important;
}

.form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Prevent grid blowout */
    gap: 1.5rem;
    align-items: start; /* Align items to top */
    position: relative;
    isolation: isolate;
    /* Reserve space for focus states */
    padding: 4px; /* Space for focus indicators */
    margin: -4px; /* Compensate for padding */
}

.form-row .form-field {
    margin-bottom: 0;
    position: relative;
    overflow: visible;
    display: grid; /* Make form-field a grid container too */
    grid-template-rows: auto auto; /* Label and input */
    gap: 0.5rem;
    min-width: 0; /* Prevent grid blowout */
}

label {
    display: block;
    margin-bottom: 0; /* Remove margin, grid gap handles spacing */
    font-weight: 600;
    color: #333;
}

label span[aria-label="Pflichtfeld"] {
    color: #dc3545;
    margin-left: 0.25rem;
}

.format-hint,
.label-hint {
    font-weight: normal;
    font-size: 0.9rem;
    color: #666;
    margin-left: 0.5rem;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
    width: 100%;
    padding: 0.75rem;
    /* Use double border technique to reserve space */
    border: 2px solid #ccc;
    outline: 3px solid transparent; /* Reserve space for focus */
    outline-offset: -3px; /* Pull outline inside */
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, outline-color 0.15s ease-in-out;
    box-sizing: border-box;
    height: 48px; /* Default height */
    display: block;
    position: relative;
}

textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out;
    box-sizing: border-box;
    min-height: 120px;
    display: block;
    position: relative;
    resize: vertical;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
textarea:hover {
    border-color: #999;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: #005fcc;
    outline-color: rgba(0, 95, 204, 0.3) !important;
    outline-offset: -3px !important;
    box-shadow: none !important;
}

/* Prevent any layout shift on focus */
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
textarea:focus-visible {
    outline: none !important;
    border-color: #005fcc;
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3) !important;
}

/* Override for keyboard navigation - ensure no size change */
body.keyboard-navigation .prescription-form-wrapper input[type="text"]:focus,
body.keyboard-navigation .prescription-form-wrapper input[type="email"]:focus,
body.keyboard-navigation .prescription-form-wrapper input[type="tel"]:focus,
body.keyboard-navigation .prescription-form-wrapper textarea:focus,
.prescription-form-wrapper input[type="text"]:focus,
.prescription-form-wrapper input[type="email"]:focus,
.prescription-form-wrapper input[type="tel"]:focus,
.prescription-form-wrapper textarea:focus {
    outline: none !important;
    outline-offset: 0 !important;
    outline-width: 0 !important;
    border-color: #005fcc !important;
    border-width: 2px !important; /* Keep same border width */
    border-style: solid !important;
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3) !important;
    padding: 0.75rem !important; /* Keep same padding */
    width: 100% !important;
}

/* Textarea needs different height */
body.keyboard-navigation .prescription-form-wrapper textarea:focus,
.prescription-form-wrapper textarea:focus {
    height: auto !important;
    min-height: 120px !important;
}

/* Invalid Fields */
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: #dc3545;
    background-color: #fff5f5;
}

input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
    outline-color: #dc3545;
    border-color: #dc3545;
}

/* Error Messages */
.field-error {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #dc3545;
    font-weight: 500;
}

/* CAPTCHA Field */
.captcha-field {
    margin: 2rem 0;
    max-width: 300px;
}

.captcha-field label {
    display: block;
    margin-bottom: 0.5rem;
}

.captcha-question {
    font-weight: bold;
    font-size: 1.1em;
    color: #007693;
    margin-left: 0.5rem;
}

.captcha-field input[type="number"] {
    width: 100px;
    height: 54px !important;
    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
}

.captcha-field .help-text {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
}

/* Checkbox Field */
.dsgvo-field {
    margin: 2rem 0;
}

.checkbox-wrapper {
    display: flex;
    align-items: flex-start;
}

input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.125rem 0.75rem 0 0;
    flex-shrink: 0;
    cursor: pointer;
}

input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5) !important;
}

/* Override for keyboard navigation - checkbox specific */
body.keyboard-navigation .prescription-form-wrapper input[type="checkbox"]:focus,
.prescription-form-wrapper input[type="checkbox"]:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5) !important;
    /* Maintain original checkbox dimensions */
    width: 1.25rem !important;
    height: 1.25rem !important;
    border-width: 1px !important; /* Checkbox usually has 1px border */
    padding: 0 !important; /* Checkboxes don't have padding */
}

input[type="checkbox"][aria-invalid="true"] {
    outline: 2px solid #dc3545;
}

.checkbox-wrapper label {
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

/* Submit Button - Styled like termin-button */
.form-submit {
    margin-top: 2rem;
    text-align: center;
}

button[type="submit"] {
    /* Match the termin-button styles */
    display: inline-block;
    background-color: #007693;
    color: #fff;
    border: 2px solid #007693;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px; /* Square corners like termin-button */
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    font-family: "Mulish", Sans-serif;
}

/* External icon for consistency */
button[type="submit"].show-external-icon::after {
    content: "\f08e";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 8px;
    font-size: 14px;
    display: inline-block;
}

button[type="submit"]:hover {
    background-color: #005570;
    border-color: #005570;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-decoration: underline;
}

button[type="submit"]:focus {
    outline: 3px solid #005570 !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
    text-decoration: underline;
}

/* Override for keyboard navigation */
body.keyboard-navigation .prescription-form-wrapper button[type="submit"]:focus {
    outline: 3px solid #005570 !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Screen Reader Only Text */
.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    border: 0;
}

/* Visually Hidden (for honeypot) */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .prescription-form {
        padding: 1.5rem;
    }
    
    fieldset {
        padding: 1rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        border-width: 3px;
    }
    
    .field-error {
        font-weight: 700;
    }
}

/* Removed dark mode - form always uses light theme */

/* CRITICAL: Specific field heights - must be at end for highest specificity */
.prescription-form-wrapper #vorname,
.prescription-form-wrapper #nachname,
.prescription-form-wrapper #email,
.prescription-form-wrapper #telefon,
#vorname,
#nachname,
#email,
#telefon {
    height: 54px !important;
}

.prescription-form-wrapper #geburtstag,
#geburtstag {
    max-width: 200px !important;
    height: 54px !important;
}

.prescription-form-wrapper #captcha,
#captcha {
    width: 100px !important;
    height: 54px !important;
}

/* Focus states maintain same heights */
.prescription-form-wrapper #vorname:focus,
.prescription-form-wrapper #nachname:focus,
.prescription-form-wrapper #email:focus,
.prescription-form-wrapper #telefon:focus,
body.keyboard-navigation .prescription-form-wrapper #vorname:focus,
body.keyboard-navigation .prescription-form-wrapper #nachname:focus,
body.keyboard-navigation .prescription-form-wrapper #email:focus,
body.keyboard-navigation .prescription-form-wrapper #telefon:focus {
    height: 54px !important;
}

.prescription-form-wrapper #geburtstag:focus,
body.keyboard-navigation .prescription-form-wrapper #geburtstag:focus {
    height: 54px !important;
    max-width: 200px !important;
}

.prescription-form-wrapper #captcha:focus,
body.keyboard-navigation .prescription-form-wrapper #captcha:focus {
    width: 100px !important;
    height: 54px !important;
}