:root {
    --primary-bg: #002e5d;
    --accent-color: #00bcd4;
    --accent-hover: #019ba0;
    --text-white: #ffffff;
    --text-black: #333333;
    --text-color: #333333;
    --font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --input-bg: #f8f9fa;
    --input-border: #e9ecef;
}

body {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-family);
    position: relative;
    background-color: #002e5d; /* Fallback color matching typical brand */
}

/* Large screens (1920px+) */
@media only screen and (min-width: 1920px) {
    body {
        background-size: cover;
        background-position: center center;
    }
}

/* Standard desktop (1440px - 1919px) */
@media only screen and (max-width: 1919px) and (min-width: 1440px) {
    body {
        background-size: cover;
        background-position: center center;
    }
}

/* Medium desktop (1200px - 1439px) */
@media only screen and (max-width: 1439px) and (min-width: 1200px) {
    body {
        background-size: cover;
        background-position: center center;
    }
}

/* Small desktop / Large tablet (1024px - 1199px) */
@media only screen and (max-width: 1199px) and (min-width: 1024px) {
    body {
        background-size: cover;
        background-position: center center;
    }
}

/* Tablet (768px - 1023px) */
@media only screen and (max-width: 1023px) and (min-width: 768px) {
    body {
        background-attachment: scroll;
        background-size: cover;
        background-position: center center;
        min-height: 100vh;
    }
}

/* Mobile (up to 767px) */
@media only screen and (max-width: 767px) {
    body {
        background-attachment: scroll;
        background-size: cover;
        background-position: center top;
        min-height: 100vh;
    }
}

header {
    padding: 20px;
}

.container {
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    width: clamp(320px, 35vw, 420px);
    max-width: 420px;
    background: var(--form-bg, rgba(255, 255, 255, 0.96));
    padding: clamp(18px, 2vw, 28px);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    color: var(--text-color, #333);
    font-family: var(--font-family);
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

/* Custom scrollbar styling for better appearance */
.container::-webkit-scrollbar {
    width: 6px;
}

.container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Large screens (1920px+) */
@media only screen and (min-width: 1920px) {
    .container {
        right: 10%;
        width: clamp(380px, 30vw, 450px);
        max-width: 450px;
        padding: 28px 32px;
    }
}

/* Standard desktop (1440px - 1919px) */
@media only screen and (max-width: 1919px) and (min-width: 1440px) {
    .container {
        right: 8%;
        width: clamp(360px, 32vw, 420px);
        max-width: 420px;
        padding: 24px 28px;
    }
}

/* Medium desktop (1200px - 1439px) */
@media only screen and (max-width: 1439px) and (min-width: 1200px) {
    .container {
        right: 6%;
        width: clamp(340px, 38vw, 400px);
        max-width: 400px;
        padding: 22px 26px;
    }
}

/* Small desktop / Large tablet (1024px - 1199px) */
@media only screen and (max-width: 1199px) and (min-width: 1024px) {
    .container {
        right: 5%;
        width: clamp(320px, 42vw, 380px);
        max-width: 380px;
        padding: 20px 24px;
        max-height: 88vh;
    }
}

/* Tablet (768px - 1023px) */
@media only screen and (max-width: 1023px) and (min-width: 768px) {
    .container {
        position: relative;
        top: 0;
        right: 0;
        transform: none;
        margin: 30px auto;
        width: 85%;
        max-width: 500px;
        padding: 22px;
        max-height: 85vh;
    }
}

/* If the branding specifies a dark container, these will be overridden via JS or we keep it light for elegance */
/* Let's stick to the user's request for elegance. Often white cards on branded backgrounds look best. */
/* But we must respect the configured BG color if it's meant for the form container? 
   The config FFORMBGCOLOR is usually applied to "primary-bg". 
   If we want "elegant", we might want to ignore the strong dark blue and use white, 
   OR use the configured color but make it look better. 
   Let's use the configured color but add better shadow and border radius. */

/* .container override removed to keep elegant white styling */

.form-title {
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 600;
    text-align: center;
    margin-bottom: clamp(12px, 1.5vw, 18px);
    color: var(--text-color, #333);
    font-family: var(--font-family);
    letter-spacing: 0.5px;
}

.form-group {
    margin-bottom: 10px;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
    color: var(--text-color, #333);
    font-family: var(--font-family);
}

.form-group input,
.form-group select {
    width: 100%;
    padding: clamp(8px, 1vw, 12px) clamp(10px, 1.2vw, 14px);
    height: clamp(42px, 4.5vh, 48px);
    border: 1px solid #caced1;
    border-radius: 5px;
    background: #f8f9fa;
    color: #000 !important; /* Force black text color for input fields - text color config should not affect input text */
    font-size: clamp(13px, 1.5vw, 14px);
    font-family: var(--font-family);
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* Ensure select dropdowns have sufficient height and readable text color */
.form-group select {
    min-height: 42px;
    height: auto;
    color: #000 !important; /* Force black for placeholder/default selection text visibility */
    line-height: 1.5;
}

.form-group input:focus,
.form-group select:focus {
    background: #fff;
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.15);
}

.form-group select option {
    background: #fff;
    color: #333;
}

/* Ensure placeholder/disabled option text is visible */
.form-group select option[disabled] {
    color: #666 !important;
}

/* Placeholder styling - ensure placeholders are visible */
::placeholder {
    color: #888 !important;
}

/* Ensure input text is always visible regardless of configured text color */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea {
    color: #000 !important;
}

/* Login error message styling */
#login-error {
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    margin-top: 10px;
}

#login-error.text-danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

#login-error.text-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.checkbox-group input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--accent-color);
}

.checkbox-label {
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.9;
    color: var(--text-color, #444);
    font-family: var(--font-family);
    cursor: pointer;
}

.submit-btn,
.apply-btn {
    width: 100%;
    padding: clamp(10px, 1.2vw, 12px);
    border: none;
    background: var(--accent-color);
    color: #fff;
    font-size: clamp(14px, 1.6vw, 16px);
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.submit-btn:hover:not(:disabled),
.apply-btn:hover:not(:disabled) {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12);
}

.submit-btn:disabled,
.apply-btn:disabled {
    background: #cccccc;
    color: #666666;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.tab-container {
    display: flex;
    margin-bottom: 15px;
    position: relative;
    border-bottom: 1px solid #dee2e6;
}

.tab-link {
    flex: 1;
    background: none;
    border: none;
    padding: clamp(8px, 1vw, 12px);
    cursor: pointer;
    font-size: clamp(13px, 1.5vw, 15px);
    font-weight: 500;
    color: var(--text-color, #444);
    font-family: var(--font-family);
    transition: all 0.2s;
    position: relative;
}

.tab-link.active {
    color: var(--text-color, #333);
    font-weight: 700;
}

.tab-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-color);
}

.tab-content {
    display: none;
    animation: fadeIn 0.4s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile (up to 767px) */
@media only screen and (max-width: 767px) {
    .container {
        position: relative;
        top: 0;
        right: 0;
        transform: none;
        margin: 20px auto;
        width: 90%;
        max-width: 100%;
        padding: 18px;
        max-height: none;
        overflow-y: visible;
    }
    
    .form-title {
        font-size: clamp(18px, 4vw, 20px);
        margin-bottom: 12px;
    }
    
    .form-group {
        margin-bottom: 12px;
    }
    
    .form-group input,
    .form-group select {
        height: 44px;
        min-height: 44px;
        font-size: clamp(13px, 3.5vw, 14px);
        padding: 10px 12px;
        color: #000 !important; /* Force black text color for input fields */
    }
    
    .form-group select {
        color: #000 !important;
    }
    
    .form-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .tab-link {
        font-size: clamp(12px, 3vw, 13px);
        padding: 8px;
    }
    
    .submit-btn,
    .apply-btn {
        padding: 12px;
        font-size: clamp(13px, 3.5vw, 14px);
    }
}

/* Small mobile devices (up to 480px) */
@media only screen and (max-width: 480px) {
    .container {
        width: 95%;
        margin: 15px auto;
        padding: 15px;
    }
    
    .form-title {
        font-size: 18px;
    }
    
    .form-group input,
    .form-group select {
        height: 40px;
        font-size: 13px;
    }
}

/* Extra small devices (up to 360px) */
@media only screen and (max-width: 360px) {
    .container {
        width: 98%;
        margin: 10px auto;
        padding: 12px;
    }
    
    .form-title {
        font-size: 16px;
    }
    
    .form-group input,
    .form-group select {
        height: 40px;
        min-height: 40px;
        font-size: 12px;
        padding: 8px 10px;
        color: #000 !important; /* Force black text color for input fields */
    }
    
    .form-group select {
        color: #000 !important;
    }
}