/* Responsive and Theme Styles */

/* Dark Mode Inputs */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode textarea {
    background-color: #334155;
    color: #e2e8f0;
    border: 1px solid #475569;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #475569;
    border-color: #0a1aff;
    box-shadow: 0 0 0 3px rgba(10, 26, 255, 0.3);
    color: #e2e8f0;
}

body.dark-mode .form-select option {
    background-color: #1e293b;
    color: #e2e8f0;
}

/* Light Mode Inputs */
.form-control, .form-select, textarea {
    background-color: #f8f9fa;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    background-color: #ffffff;
    border-color: #0a1aff;
    box-shadow: 0 0 0 3px rgba(10, 26, 255, 0.2);
    color: #0f172a;
}

/* Pricing Cards 3D */
.pricing-plan-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateZ(0);
    perspective: 1000px;
}

.pricing-plan-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 50px rgba(10, 26, 255, 0.15);
}

body.dark-mode .pricing-plan-card {
    background-color: #1e293b;
    color: #e2e8f0;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #0a1aff 0%, #0d6efd 100%);
    border: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(10, 26, 255, 0.2);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(10, 26, 255, 0.4);
}

/* Footer Dark Mode */
body.dark-mode footer {
    background: rgba(15, 23, 42, 0.9) !important;
    color: #e2e8f0;
}

body.dark-mode .footer-overlay {
    background: linear-gradient(180deg, rgba(15,23,42,0.95), rgba(15,23,42,0.98)) !important;
}

body.dark-mode .dark-text,
body.dark-mode .fw-bold {
    color: #e2e8f0 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .display-5 { font-size: 2rem; }
    .container { padding: 0 1rem; }
    footer { margin-top: 40px; padding: 30px 0; }
    main.content-wrap { padding-bottom: 300px; }
}

@media (max-width: 576px) {
    .display-5 { font-size: 1.75rem; }
    h1, h2, h3 { font-size: 1.25rem; }
    .btn { padding: 0.5rem 1rem; font-size: 0.875rem; }
    main.content-wrap { padding-bottom: 350px; }
}

/* Modal Z-index */
.modal { z-index: 9999; }
.modal-backdrop { z-index: 9998; }

/* Form Interactive */
.form-control, .form-select, textarea, input[type="text"], input[type="email"], input[type="password"] {
    position: relative;
    z-index: 10;
}