/* ===================================================== */
/* == BAZI INPUT FORM - CONTACT STYLE INSPIRED == */
/* ===================================================== */

/* --- Base Variables (Monochrome) --- */
:root {
    --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --text-color-dark: #212529; /* Near Black */
    --text-color-medium: #495057; /* Dark Gray */
    --text-color-light: #6c757d; /* Medium Gray */
    --border-color-light: #e0e0e0; /* Light Gray Border */
    --border-color-medium: #ced4da; /* Standard Gray Border */
    --input-bg: #fff;
    --radius-sharp: 2px; /* Minimal radius */
    --error-color-border: #dc3545;
    --error-color-bg: #f8d7da;
    --error-color-text: #721c24;
}


/* --- Main Bazi Container (Simplified) --- */
.bazi-calculator-container-contact { /* Renamed class */
    padding: 20px 0; /* Reduce vertical padding, remove side padding (container handles it) */
    /* Remove background, border, shadow */
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
    /* Set max-width for the form content area */
    max-width: 700px; /* Adjust as needed */
    margin: 2rem auto; /* Center the content area */
}


    /* 標題 */
    .bazi-calculator-container-contact h1 {
        font-size: 1.8rem; /* 調整標題大小 */
        color: #343a40; /* 深灰色 */
        font-weight: 600; /* 稍粗的字重 */
        text-align: center;
        margin-bottom: 10px; /* 標題和分隔線間距 */
        padding-bottom: 15px; /* 為分隔線留出空間 */
        /* 添加分隔線 */
        position: relative; /* 為了定位偽元素 */
    }

        /* 標題下的分隔線 */
        .bazi-calculator-container-contact h1::after {
            content: '';
            display: block;
            width: 50px; /* 分隔線寬度 */
            height: 2px; /* 分隔線高度 */
            background-color: #dee2e6; /* 淺灰色分隔線 */
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%); /* 水平置中 */
        }

.page-header{
    text-align: center;
}
/* --- Form Wrapper (Keep Transparent) --- */
.bazi-input-form-contact { /* Renamed class */
    padding: 0; /* Remove padding if container handles it */
    border: none;
    background-color: transparent;
}

/* --- Form Row Layout --- */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Adjust gap between columns */
    margin-bottom: 20px;
    align-items: flex-end; /* Align items to the bottom for consistent baseline */
}

.form-group {
    flex: 1 1 140px; /* Allow groups to grow/shrink, base width */
    margin-bottom: 0; /* Remove bottom margin, handled by row gap */
}

    .form-group label {
        display: block;
        margin-bottom: 6px;
        font-size: 0.85rem; /* Slightly smaller label */
        color: var(--text-color-medium);
        font-weight: 500; /* Medium weight */
    }

/* --- Form Controls (Input/Select) --- */
.form-control {
    display: block;
    width: 100%;
    padding: 8px 10px; /* Slightly reduced padding */
    border: 1px solid var(--border-color-medium); /* Standard border */
    border-radius: var(--radius-sharp); /* Sharp corners */
    font-size: 0.95rem; /* Adjust font size */
    box-sizing: border-box;
    color: var(--text-color-dark);
    background-color: var(--input-bg);
    appearance: none;
    transition: border-color 0.15s ease-in-out; /* Simple transition */
}

    .form-control:focus {
        outline: none;
        border-color: var(--text-color-medium); /* Darker gray border on focus */
        /* Remove focus shadow */
        box-shadow: none;
    }

/* Custom Select Arrow (Monochrome) */
select.form-control {
    /* Use a dark gray fill color for the SVG arrow */
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23343a40" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 10px; /* Adjust size */
    padding-right: 30px;
}

    select.form-control::-ms-expand {
        display: none;
    }

/* --- Validation Styling --- */
.validation-summary { /* Assuming this class exists for summary */
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid var(--error-color-border);
    background-color: var(--error-color-bg);
    color: var(--error-color-text);
    border-radius: var(--radius-sharp);
    font-size: 0.9em;
}

.text-danger { /* For individual field errors */
    color: var(--error-color-text);
    font-size: 0.85em;
    display: block; /* Ensure it takes space */
    margin-top: 4px;
}

/* --- Submit Row and Button --- */
.form-submit-row {
    text-align: left; /* Align button left */
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color-light); /* Separator */
}

.submit-button-contact { /* Renamed class */
    display: inline-block;
    padding: 8px 20px; /* Match contact button padding */
    border-radius: var(--radius-sharp); /* Sharp radius */
    text-decoration: none;
    font-weight: 400; /* Standard weight */
    text-align: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    font-size: 0.95rem; /* Match contact button size */
    border: 1px solid #343a40; /* Match background */
    cursor: pointer;
    background-color: #343a40; /* Dark background */
    color: white; /* White text */
    /* Remove shadow */
    box-shadow: none;
}

    .submit-button-contact:hover {
        background-color: #23272b; /* Darker on hover */
        border-color: #1d2124;
        color: white;
    }

/* --- Explanation Text --- */
.explanation-text {
    font-size: 0.85em;
    color: var(--text-color-light); /* Light gray */
    margin-top: 15px;
    text-align: left;
    font-weight: normal; /* Standard weight */
}