/*
    ==================================================
    PREMIUM DESIGN & RESPONSIVENESS (FINAL VERSION)
    - Normal (4px) Border Radius applied to fields
    - Premium Close Button, Animation, and Skeleton
    ==================================================
*/

/* --- Global Body Control (Prevent background scroll) --- */
body.mfe-modal-open {
    overflow: hidden !important;
}

/* --- Base Styles & Typography --- */
body, .mfe-row input, .mfe-row textarea {
    /* Use a system font stack for clean, fast rendering */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.mfe-modal-title {
    font-size: 24px; /* Larger title */
    font-weight: 700;
    color: #1a202c; /* Darker, professional color */
    margin-bottom: 5px; /* Reduced margin to bring subtitle closer */
}
/* SUBTITLE STYLE */
.mfe-subtitle-line {
    font-size: 14px;
    color: #718096; /* Soft grey color */
    margin-bottom: 25px; /* Space below subtitle before form */
}


/* --- Enquiry Button (Shadow removed as requested) --- */
.mfe-enquiry-button {
    background: #0080ff; /* Primary color */
    color: #fff;
    border: none;
    padding: 12px 24px; 
    border-radius: 50px; /* Pill shape for premium look */
    cursor: pointer;
    box-shadow: none; /* Shadow removed */
    font-weight: 600;
    transition: background 0.2s, transform 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mfe-enquiry-button:hover {
    background: #0066cc;
    transform: translateY(-1px);
}

/* --- Modal Overlay & Animation --- */
.mfe-enquiry-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0; top: 0; right: 0; bottom: 0;
    align-items: center;
    justify-content: center;
    background: rgba(10, 25, 41, 0.75); 
    overflow-y: auto; /* Full responsiveness for small screens */
    padding: 20px 0; 
}
.mfe-enquiry-modal.open {
    display: flex;
    animation: mfe-fade-in 0.25s ease-out forwards;
}
@keyframes mfe-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Modal Inner Container --- */
.mfe-enquiry-modal-inner {
    background: #ffffff;
    border-radius: 16px; 
    max-width: 500px; 
    width: 90%;
    padding: 30px; 
    box-shadow: 0 25px 50px rgba(3, 12, 30, 0.4); 
    position: relative;
    /* Premium Slide-Up Animation */
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease-out;
    margin: auto; 
}
.mfe-enquiry-modal.open .mfe-enquiry-modal-inner {
    transform: translateY(0);
    opacity: 1;
}

/* --- Premium Close Button --- */
.mfe-close {
    float: none; 
    position: absolute;
    top: 15px; 
    right: 15px; 
    background: #f1f5f9; 
    color: #4a5568; 
    border: none;
    font-size: 20px;
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 50%; /* Perfect circle */
    line-height: 34px; 
    text-align: center;
    padding: 0;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.mfe-close:hover {
    background: #e2e8f0;
    color: #2d3748;
    transform: rotate(90deg); 
}

/* --- Form Fields (Inputs and Textarea) --- */
.mfe-row {
    margin-bottom: 18px; 
    display: flex;
    flex-direction: column;
}
.mfe-row label {
    font-size: 14px;
    margin-bottom: 8px;
    color: #4a5568; 
    font-weight: 600;
}
.mfe-row input, .mfe-row textarea {
    padding: 12px; 
    border-radius: 4px; /* <-- FINAL NORMAL RADIUS */
    border: 2px solid #e6e9ef; 
    font-size: 16px;
    color: #2d3748;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.mfe-row input:focus, .mfe-row textarea:focus {
    border-color: #0080ff; 
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 128, 255, 0.15); 
}
.mfe-row input::placeholder, .mfe-row textarea::placeholder {
    color: #a0aec0; 
    opacity: 1; 
}

/* --- Submit Button --- */
.mfe-actions {
    text-align: right;
    margin-top: 25px;
}
.mfe-submit {
    background: #0080ff;
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 4px; /* <-- FINAL NORMAL RADIUS */
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s, opacity 0.2s;
}
.mfe-submit:hover:not(:disabled) {
    background: #0066cc;
}
.mfe-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}


/* --- SKELETON LOADING DESIGN --- */
.mfe-skeleton-loading .mfe-row label,
.mfe-skeleton-loading .mfe-modal-title,
.mfe-skeleton-loading .mfe-subtitle-line,
.mfe-skeleton-loading .mfe-submit {
    background-color: #e2e8f0; 
    border-radius: 4px;
    color: transparent; 
    pointer-events: none; 
    animation: mfe-pulse 1.5s infinite ease-in-out;
}
/* ... (Skeleton sizing remains the same) ... */
.mfe-skeleton-loading .mfe-modal-title {
    width: 60%; height: 24px; margin-bottom: 5px;
}
.mfe-skeleton-loading .mfe-subtitle-line {
    width: 80%; height: 16px; margin-bottom: 25px;
}
.mfe-skeleton-loading .mfe-row label {
    width: 30%; height: 14px;
}
.mfe-skeleton-loading .mfe-row input,
.mfe-skeleton-loading .mfe-row textarea {
    height: 44px;
    border-radius: 4px !important; /* Ensure skeleton matches field radius */
}
.mfe-skeleton-loading .mfe-row textarea { height: 120px; }
.mfe-skeleton-loading .mfe-submit {
    width: 120px; height: 44px; float: right;
}

@keyframes mfe-pulse {
    0% { background-color: #e2e8f0; }
    50% { background-color: #cbd5e0; }
    100% { background-color: #e2e8f0; }
}

/* --- Mobile Responsiveness (Small Screens) --- */
@media (max-width: 600px) {
    .mfe-enquiry-modal-inner {
        width: 95%;
        border-radius: 12px;
        padding: 20px;
        max-width: 90%;
    }
    .mfe-modal-title { font-size: 20px; }
    .mfe-close {
        width: 30px; height: 30px; line-height: 30px; font-size: 18px; top: 10px; right: 10px;
    }
    .mfe-actions { text-align: center; }
    .mfe-submit { width: 100%; padding: 14px; }
}