/* ========================================
   FORM STYLES - SPMB SMK TIO MEJAGONG
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text-dark);
}

.gradient-bg {
    background: var(--primary-gradient);
}

.form-card {
    backdrop-filter: blur(10px);
    background: var(--bg-card-glass);
    color: var(--text-dark);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Tailwind Overrides for Dark Mode Support */
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-900 {
    color: var(--text-dark) !important;
}

body.dark-mode .text-gray-700 {
    color: var(--text-dark) !important;
}

body.dark-mode .text-gray-600 {
    color: var(--text-gray) !important;
}

body.dark-mode .text-gray-500 {
    color: var(--text-light) !important;
}

body.dark-mode .bg-white {
    background-color: var(--bg-card) !important;
    color: var(--text-dark) !important;
}

body.dark-mode .bg-gray-50 {
    background-color: var(--bg-light) !important;
    color: var(--text-dark) !important;
}

body.dark-mode .border-gray-300,
body.dark-mode .border-gray-200 {
    border-color: var(--input-border) !important;
}

/* Inputs */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

input,
select,
textarea {
    background-color: var(--input-bg);
    color: var(--text-dark);
    border-color: var(--input-border);
}

/* Steps */
.step-indicator.active {
    background: var(--primary-gradient);
    color: white;
}

.step-indicator.completed {
    background: var(--success-color);
    color: white;
}

/* Floating Shapes */
.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.shape {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 15s infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

/* File Upload */
.file-upload {
    border: 2px dashed var(--input-border);
    transition: all 0.3s;
    background-color: var(--bg-light);
}

.file-upload:hover {
    border-color: var(--primary-color);
    background: var(--bg-white);
}

.file-upload.has-file {
    border-color: var(--success-color);
    background: rgba(16, 185, 129, 0.1);
}

.file-upload.error {
    border-color: var(--error-color);
    background: rgba(239, 68, 68, 0.1);
}

.phone-error {
    border-color: var(--error-color) !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

/* Checkbox */
.checkbox-group label {
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-dark);
}

.checkbox-group label:hover {
    background: var(--bg-light);
}

.checkbox-group input:checked+span {
    color: var(--primary-color);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 640px) {
    .form-card {
        padding: 1.5rem;
    }
}