/* ========================
   Modal Animations & Transitions
   ======================== */
.rcm-modal-overlay {
    backdrop-filter: blur(4px);
    animation: rcm-fade-in 0.3s ease-out;
}

.rcm-modal-overlay.hidden {
    display: none !important;
}

.rcm-modal {
    animation: rcm-scale-in 0.3s ease-out;
}

@keyframes rcm-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes rcm-scale-in {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


/* Error States */
.rcm-calculator-form input.border-red-500,
.rcm-contact-form input.border-red-500,
.rcm-consultation-form input.border-red-500,
.rcm-tariff-form input.border-red-500 {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgb(220 38 38 / 0.1) !important;
}

/* ========================
   Button Loading States
   ======================== */

.rcm-calculator-form button[disabled],
.rcm-contact-form button[disabled],
.rcm-consultation-form button[disabled],
.rcm-tariff-form button[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

.loading-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ========================
   Message Styling Enhancements
   ======================== */

.form-messages .success-message {
    animation: rcm-slide-down 0.3s ease-out;
}

.form-messages .error-message {
    animation: rcm-shake 0.5s ease-out;
}

@keyframes rcm-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rcm-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

/* ========================
   Responsive Improvements
   ======================== */

@media (max-width: 640px) {
    .rcm-modal {
        margin: 16px;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
    }

    .rcm-calculator-form,
    .rcm-consultation-form {
        padding: 16px;
    }

    .rcm-calculator-form .grid.lg\\:grid-cols-2,
    .rcm-consultation-form .grid.lg\\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ========================
   Accessibility Improvements
   ======================== */

/* Focus visible for keyboard navigation */
.rcm-modal button:focus-visible,
.rcm-calculator-form button:focus-visible,
.rcm-contact-form button:focus-visible,
.rcm-consultation-form button:focus-visible,
.rcm-tariff-form button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .rcm-modal-overlay {
        background-color: rgba(0, 0, 0, 0.9);
    }

    .rcm-calculator-form,
    .rcm-contact-form,
    .rcm-consultation-form,
    .rcm-tariff-form {
        border: 2px solid #000;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .rcm-modal-overlay,
    .rcm-modal,
    .form-messages .success-message,
    .form-messages .error-message,
    .loading-spinner {
        animation: none;
    }

    .rcm-calculator-form,
    .rcm-contact-form,
    .rcm-consultation-form,
    .rcm-tariff-form,
    .tariff-info {
        transition: none;
    }
}

/* ========================
   Print Styles
   ======================== */

@media print {
    .rcm-modal-overlay {
        display: none !important;
    }
}

/* ========================
   Dark Mode Support (if needed)
   ======================== */

@media (prefers-color-scheme: dark) {
    .rcm-debug-info {
        background-color: #374151;
        color: #f9fafb;
    }
}

/* ========================
   Custom Scrollbar for Modal (Webkit browsers)
   ======================== */

.rcm-modal::-webkit-scrollbar {
    width: 8px;
}

.rcm-modal::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.rcm-modal::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.rcm-modal::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ========================
   Form Field Validation Visual Feedback
   ======================== */

.form-group {
    position: relative;
}

.form-group input:valid:not(:placeholder-shown) {
    border-color: #10b981;
}

.form-group input:invalid:not(:placeholder-shown) {
    border-color: #ef4444;
}

/* Success checkmark for valid fields */
.form-group input:valid:not(:placeholder-shown) + .success-indicator::before {
    content: "✓";
    color: #10b981;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
}

/* ========================
   Honeypot field (ensure it's completely hidden)
   ======================== */
input[name="website"] {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    background: transparent !important;
    opacity: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    tab-index: -1 !important;
}