/*
 * Mandyju Contact Form Styles
 * Following Mandyju design system with 4px spacing and no rounded corners
 */

/* Universal border-radius override - no rounded corners allowed */
.mandyju-contact-form-wrapper * {
    border-radius: 0 !important;
}

/* Contact Form Wrapper */
.mandyju-contact-form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px;
    background-color: #F6F5ED;
    border: 1px solid #DFDDD3;
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
    line-height: 1.6;
}

/* Header */
.mandyju-contact-header {
    text-align: center;
    margin-bottom: 32px;
}

.mandyju-contact-title {
    font-size: clamp(32px, 1.75rem + 1.15vw, 46px);
    font-weight: 600;
    color: #18191A;
    margin: 0 0 16px 0;
    line-height: 1.15;
}

.mandyju-contact-subtitle {
    font-size: clamp(16px, 1rem + 0.30vw, 18px);
    color: #A5A6AA;
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Messages */
.mandyju-contact-message {
    margin-bottom: 24px;
    padding: 16px;
    border-left: 4px solid;
}

.mandyju-contact-message p {
    margin: 0;
    font-weight: 600;
}

.mandyju-contact-success {
    background-color: #7bdcb5;
    border-left-color: #00d084;
    color: #18191A;
}

.mandyju-contact-error {
    background-color: #f78da7;
    border-left-color: #cf2e2e;
    color: #18191A;
}

.mandyju-contact-loading {
    background-color: #8ed1fc;
    border-left-color: #0693e3;
    color: #18191A;
}

/* Form */
.mandyju-contact-form {
    width: 100%;
}

/* Form Rows */
.mandyju-form-row {
    margin-bottom: 24px;
}

.mandyju-form-row-half {
    display: flex;
    gap: 20px;
}

@media (max-width: 768px) {
    .mandyju-form-row-half {
        flex-direction: column;
        gap: 24px;
    }
}

/* Form Groups */
.mandyju-form-group {
    flex: 1;
}

/* Labels */
.mandyju-form-label {
    display: block;
    font-weight: 600;
    color: #18191A;
    margin-bottom: 8px;
    font-size: clamp(16px, 1rem + 0.30vw, 18px);
}

.required {
    color: #cf2e2e;
}

/* Form Inputs */
.mandyju-form-input,
.mandyju-form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #DFDDD3;
    background-color: #ffffff;
    font-family: inherit;
    font-size: clamp(16px, 1rem + 0.30vw, 18px);
    line-height: 1.5;
    color: #18191A;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.mandyju-form-input:focus,
.mandyju-form-textarea:focus {
    outline: none;
    border-color: #C19A5B;
    box-shadow: 0 0 0 2px rgba(193, 154, 91, 0.2);
}

.mandyju-form-input:hover,
.mandyju-form-textarea:hover {
    border-color: #B48B48;
}

.mandyju-form-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Form Help Text */
.mandyju-form-help {
    font-size: clamp(13px, 0.80rem + 0.35vw, 16px);
    color: #A5A6AA;
    margin-top: 4px;
}

/* Character Counter */
.mandyju-character-counter {
    font-size: clamp(13px, 0.80rem + 0.35vw, 16px);
    color: #A5A6AA;
    text-align: right;
    margin-top: 4px;
}

.mandyju-character-counter.warning {
    color: #fcb900;
}

.mandyju-character-counter.error {
    color: #cf2e2e;
    font-weight: 600;
}

/* Form Actions */
.mandyju-form-actions {
    text-align: center;
}

/* Buttons */
.mandyju-form-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border: none;
    background-color: #C19A5B;
    color: #ffffff;
    font-family: inherit;
    font-size: clamp(16px, 1rem + 0.30vw, 18px);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    min-width: 180px;
    min-height: 56px; /* Minimum 44px tap target + padding */
}

.mandyju-form-button:hover {
    background-color: #B48B48;
}

.mandyju-form-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(193, 154, 91, 0.4);
}

.mandyju-form-button:active {
    background-color: #A37D41;
}

.mandyju-form-button:disabled {
    background-color: #A5A6AA;
    cursor: not-allowed;
}

.mandyju-form-button-primary {
    background-color: #C19A5B;
}

.mandyju-form-button-primary:hover {
    background-color: #B48B48;
}

/* Button Loading State */
.mandyju-form-button.loading .button-text {
    display: none;
}

.mandyju-form-button.loading .button-loading {
    display: inline-block !important;
}

/* Error States */
.mandyju-form-input.error,
.mandyju-form-textarea.error {
    border-color: #cf2e2e;
    box-shadow: 0 0 0 2px rgba(207, 46, 46, 0.2);
}

/* Success States */
.mandyju-form-input.success,
.mandyju-form-textarea.success {
    border-color: #00d084;
}

/* Responsive Design */
@media (max-width: 480px) {
    .mandyju-contact-form-wrapper {
        padding: 20px;
        margin: 16px;
    }
    
    .mandyju-contact-header {
        margin-bottom: 24px;
    }
    
    .mandyju-form-row {
        margin-bottom: 20px;
    }
    
    .mandyju-form-button {
        width: 100%;
        padding: 16px;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .mandyju-form-input,
    .mandyju-form-textarea {
        border-width: 3px;
    }
    
    .mandyju-form-button {
        border: 2px solid #18191A;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .mandyju-form-input,
    .mandyju-form-textarea,
    .mandyju-form-button {
        transition: none;
    }
}

/* Print Styles */
@media print {
    .mandyju-form-button {
        display: none;
    }
    
    .mandyju-contact-message {
        border: 1px solid #000;
        background: none !important;
        color: #000 !important;
    }
}

/* Screen Reader Only Content */
.mandyju-sr-live-region {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Focus States Enhancement */
.mandyju-form-group.focused {
    position: relative;
}

.mandyju-form-group.focused::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid rgba(193, 154, 91, 0.3);
    pointer-events: none;
}