/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* ==========================================================================
   1. โค้ดเดิมของคุณ (ไม่ถูกลบหรือแก้ไขใดๆ)
   ========================================================================== */
 .custom-wp-auth-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.custom-wp-auth-container .form-group {
    margin-bottom: 15px;
}

.custom-wp-auth-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.custom-wp-auth-container input[type="text"],
.custom-wp-auth-container input[type="email"],
.custom-wp-auth-container input[type="password"],
.custom-wp-auth-container select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.custom-wp-auth-container .btn-submit {
    width: 100%;
    padding: 10px;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.custom-wp-auth-container .btn-submit:hover {
    background: #005177;
}

/* ==========================================================================
   2. โค้ดใหม่สำหรับฟอร์ม Modern (Login / Register) ที่เพิ่มเข้าไป
   ========================================================================== */

/* --- Wrapper & Font --- */
.emn-auth-wrapper {
    font-family: 'Sarabun', sans-serif;
    color: #333;
    max-width: 480px;
    margin: 0 auto;
}

/* --- หัวข้อฟอร์ม --- */
.form-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: left;
}

/* ==========================================================================
   FIELD — wrapper ของแต่ละช่องกรอก
   ========================================================================== */
.emn-field {
    margin-bottom: 14px;
}

.emn-field label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    color: #555;
    font-weight: 500;
}

/* ==========================================================================
   TEXT FIELD, SELECT, PASSWORD — ตัว input จริง
   ========================================================================== */
.emn-input,
.emn-auth-wrapper input.emn-input,
.emn-auth-wrapper select.emn-input,
.emn-auth-wrapper textarea.emn-input {
    width: 100% !important;
    padding: 9px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    background-color: #fff !important;
    color: #333 !important;
    line-height: 1.5 !important;
    height: auto !important;
    margin: 0 !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.emn-input:focus,
.emn-auth-wrapper input.emn-input:focus,
.emn-auth-wrapper select.emn-input:focus,
.emn-auth-wrapper textarea.emn-input:focus {
    border-color: #e91e63 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.12) !important;
}

/* ใช้ .emn-input ร่วมกับ tag ต่างๆ ผ่าน selector เพิ่มเติม */
.emn-field input[type="text"],
.emn-field input[type="email"],
.emn-field input[type="password"],
.emn-field input[type="tel"],
.emn-field input[type="number"],
.emn-field select,
.emn-field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.emn-field input:focus,
.emn-field select:focus,
.emn-field textarea:focus {
    border-color: #e91e63;
    outline: none;
    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.12);
}

/* select — เพิ่ม arrow custom */
.emn-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* ==========================================================================
   SUBMIT BUTTON
   ========================================================================== */
.emn-btn-submit {
    display: inline-block;
    padding: 9px 24px;
    background-color: #6092EA;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.emn-btn-submit:hover {
    background-color: #d81557;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* ถ้าต้องการให้ปุ่มเต็มความกว้าง ใส่ class .emn-btn-block เพิ่ม */
.emn-btn-submit.emn-btn-block {
    width: 100%;
    text-align: center;
}

/* ==========================================================================
   legacy — เก็บไว้ compatibility (ไม่แนะนำใช้ใหม่)
   ========================================================================== */
/* ใช้ .emn-field + .emn-input แทน .emn-input-group แล้ว */
.emn-input-group {
    margin-bottom: 14px;
}
.emn-input-group label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    color: #555;
    font-weight: 500;
}
.emn-input-group input[type="text"],
.emn-input-group input[type="email"],
.emn-input-group input[type="password"],
.emn-input-group select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    background-color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.emn-input-group input:focus,
.emn-input-group select:focus {
    border-color: #e91e63;
    outline: none;
    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.12);
}

/* --- reCAPTCHA --- */
.emn-recaptcha-container {
    margin: 15px 0;
    display: flex;
    justify-content: center;
}

/* --- Action Row (ปุ่ม + link) --- */
.emn-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    gap: 12px;
    flex-wrap: wrap;
}

/* ลบ .emn-btn-primary ออกเพราะย้ายไปใช้ .emn-btn-submit แล้ว
   เก็บไว้กันหน้าเก่าพัง */
.emn-btn-primary {
    display: inline-block;
    padding: 9px 24px;
    background-color: #6092EA;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s;
}
.emn-btn-primary:hover {
    background-color: #d81557;
}

.emn-btn-secondary {
    display: inline-block;
    background-color: #6c757d;
    color: #fff;
    padding: 8px 15px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
}

.emn-link-register {
    font-size: 13px;
    color: #e91e63;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}
.emn-link-register:hover {
    text-decoration: underline;
}

/* --- Footer / Forgot password --- */
.emn-form-footer {
    margin-top: 16px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}
.emn-link-forgot {
    font-size: 13px;
    color: #777;
    text-decoration: none;
}

/* --- Message Box --- */
#login-message p,
#register-message p {
    padding: 10px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 15px;
}

form#custom-register-form {
    width: 100%;
    max-width: 480px;
}