/* ============================================================================
 *  ธีมรวมของหน้าสมาชิก  (member/register.php, login.php, index.php)
 * ----------------------------------------------------------------------------
 *  ทุกหน้าใช้พื้นหลังและโลโก้จาก css/style.css ชุดเดียวกับหน้าแรก
 *  ไฟล์นี้คุมเฉพาะ "การ์ด" ที่วางทับพื้นหลัง
 *
 *  อยากเปลี่ยนสีธีมทั้งหมด แก้ตัวแปรในบล็อก :root ด้านล่างนี้อย่างเดียวพอ
 *
 *  ต้องโหลดไฟล์นี้ "หลัง" css/style.css เสมอ เพราะมีการแก้ทับความสูงหน้า
 * ==========================================================================*/

:root {
    --mb-gold:        #e2b857;   /* สีทองหลัก : ขอบการ์ด หัวข้อ ปุ่ม */
    --mb-gold-soft:   #f2d98d;   /* สีทองอ่อน : ข้อความเน้น */
    --mb-panel:       rgba(16, 18, 26, 0.90);   /* พื้นการ์ด */
    --mb-panel-line:  rgba(226, 184, 87, 0.45); /* เส้นขอบการ์ด */
    --mb-field:       rgba(255, 255, 255, 0.06); /* พื้นช่องกรอก */
    --mb-field-line:  rgba(255, 255, 255, 0.16);
    --mb-text:        #f3f4f6;
    --mb-text-dim:    #9ca3af;
    --mb-danger:      #f87171;
    --mb-success:     #4ade80;
    --mb-radius:      16px;
}

/* ============================================================================
 *  พื้นหลังและโลโก้
 * ----------------------------------------------------------------------------
 *  หน้านี้ใช้ css/style.css ร่วมกับหน้าแรก จึงได้พื้นหลัง bg_main.png
 *  เคอร์เซอร์ และตำแหน่งโลโก้ (.logo-box / .main-logo) เหมือนหน้า index ทุกอย่าง
 *
 *  ที่ต้องแก้ทับมีอย่างเดียวคือความสูงหน้า เพราะ style.css ล็อก min-height ไว้
 *  2914px สำหรับหน้าแรก ถ้าไม่ทับ หน้านี้จะมีที่ว่างยาวให้เลื่อนเปล่า ๆ
 * ==========================================================================*/

body.custom.mb-page {
    min-height: 100vh;
    padding: 0 20px 90px;
    box-sizing: border-box;

    font-family: Kanit, "Noto Sans Thai", sans-serif;
    font-weight: 300;
    color: var(--mb-text);
}

/* ------------------------------------------------------------------------
 *  .logo-box ของ style.css เป็น position: absolute จึงไม่กินพื้นที่ในหน้า
 *  ต้องเว้นด้านบนให้การ์ดลงมาอยู่ใต้โลโก้พอดี
 *
 *  โลโก้หน้าแรก : top 180px + สูง 500/1.658 = 302px + zoom 1.55
 *  -> ขอบล่างของโลโก้อยู่ราว 565px  จึงเว้นไว้ 620px
 * ---------------------------------------------------------------------- */

.mb-wrap {
    padding-top: 620px;
}

/* -------------------------------------------------------------------- การ์ด */

.mb-card {
    position: relative;
    z-index: 1;

    width: 620px;   /* ค่ากลาง ใช้กับหน้าสมัคร */
    max-width: 100%;
    margin: 0 auto;
    padding: 34px 38px 30px;
    box-sizing: border-box;

    border: 1px solid var(--mb-panel-line);
    border-radius: var(--mb-radius);
    background: var(--mb-panel);
    backdrop-filter: blur(6px);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* เส้นทองบาง ๆ ด้านบนการ์ด */
.mb-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 12%;
    right: 12%;
    height: 2px;

    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--mb-gold) 35%,
        var(--mb-gold-soft) 50%,
        var(--mb-gold) 65%,
        transparent);
}

.mb-head {
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    text-align: center;
}

.mb-title {
    margin: 0;
    color: var(--mb-gold-soft);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.mb-subtitle {
    margin-top: 6px;
    color: var(--mb-text-dim);
    font-size: 14px;
}

/* ------------------------------------------------------------------ แจ้งเตือน */

.mb-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 20px;
    padding: 13px 16px;
    border-radius: 10px;
    border-left: 3px solid;

    font-size: 15px;
    line-height: 1.6;
}

.mb-alert i {
    margin-top: 3px;
}

.mb-alert.is-error {
    border-color: var(--mb-danger);
    background: rgba(248, 113, 113, 0.12);
    color: #fecaca;
}

.mb-alert.is-success {
    border-color: var(--mb-success);
    background: rgba(74, 222, 128, 0.12);
    color: #bbf7d0;
}

/* ------------------------------------------------------------------ ช่องกรอก */

.mb-field {
    margin-bottom: 17px;
}

.mb-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--mb-text-dim);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.mb-field label .req {
    color: var(--mb-gold);
}

.mb-input {
    position: relative;
    display: flex;
    align-items: center;

    border: 1px solid var(--mb-field-line);
    border-radius: 10px;
    background: var(--mb-field);

    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.mb-input:focus-within {
    border-color: var(--mb-gold);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 3px rgba(226, 184, 87, 0.16);
}

.mb-input > i {
    width: 44px;
    color: var(--mb-text-dim);
    font-size: 15px;
    text-align: center;
}

.mb-input:focus-within > i {
    color: var(--mb-gold);
}

.mb-input input,
.mb-input select {
    flex: 1;
    min-width: 0;

    padding: 13px 14px 13px 0;
    border: 0;
    outline: 0;
    background: transparent;

    color: var(--mb-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 300;
}

.mb-input select {
    padding-right: 38px;
    appearance: none;

    /* ลูกศรของ dropdown */
    background-image:
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239ca3af' d='M6 8 0 1.4 1.4 0 6 4.6 10.6 0 12 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.mb-input select option {
    background: #12141c;
    color: var(--mb-text);
}

.mb-input input::placeholder {
    color: #6b7280;
}

/* ปฏิทินและปุ่มในช่อง date ให้เป็นสีอ่อนบนพื้นมืด */
.mb-input input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(0.55);
}

/* ปุ่มดู/ซ่อนรหัสผ่าน */
.mb-eye {
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--mb-text-dim);
    font-size: 15px;
}

.mb-eye:hover {
    color: var(--mb-gold);
}

/* ข้อความบอกสถานะใต้ช่อง */
.mb-hint {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--mb-text-dim);
    min-height: 17px;
}

.mb-hint.is-error   { color: var(--mb-danger); }
.mb-hint.is-success { color: var(--mb-success); }

/* ----------------------------------------------------------------- สองคอลัมน์ */

.mb-row {
    display: flex;
    gap: 16px;
}

.mb-row > .mb-field {
    flex: 1;
    min-width: 0;
}

/* -------------------------------------------------------------------- Captcha */

.mb-captcha {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mb-captcha .mb-input {
    flex: 1;
}

.mb-captcha-img {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 6px 8px;
    border: 1px solid var(--mb-field-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
}

.mb-captcha-img img {
    display: block;
    height: 34px;
}

.mb-refresh {
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #4b5563;
    font-size: 14px;
}

.mb-refresh:hover {
    color: #111827;
}

/* ---------------------------------------------------------------------- ปุ่ม */

.mb-submit {
    width: 100%;
    margin-top: 10px;
    padding: 15px;

    border: 0;
    border-radius: 11px;

    background: linear-gradient(180deg, #f0cd77, var(--mb-gold) 45%, #b98f36);
    color: #2a1e05;

    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.6px;

    box-shadow:
        0 10px 24px rgba(226, 184, 87, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);

    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}

.mb-submit:hover {
    filter: brightness(1.06);
    box-shadow:
        0 14px 30px rgba(226, 184, 87, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.mb-submit:active {
    transform: translateY(1px);
}

/* ------------------------------------------------------------------- ท้ายการ์ด */

.mb-foot {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;

    font-size: 14px;
}

.mb-foot a {
    color: var(--mb-gold-soft);
    text-decoration: none;
}

.mb-foot a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.mb-foot .dim {
    color: var(--mb-text-dim);
}

/* --------------------------------------------------------------- กติกาย่อ ๆ */

.mb-rules {
    width: 620px;
    max-width: 100%;
    margin: 18px auto 0;
    padding: 0 4px;
    position: relative;
    z-index: 1;

    color: rgba(255, 255, 255, 0.62);
    font-size: 12.5px;
    line-height: 1.9;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* ------------------------------------------------------------------ มือถือ */

/* จอแคบ : ย้ายโลโก้มากลางจอและย่อลง ไม่งั้นโลโก้ขนาดหน้าแรกจะล้นออกนอกจอ */
@media (max-width: 1024px) {

    body.custom.mb-page .logo-box {
        top: 60px;
        left: 50%;
    }

    body.custom.mb-page .main-logo {
        width: 340px;
    }

    .mb-wrap {
        padding-top: 330px;
    }
}

@media (max-width: 680px) {

    body.custom.mb-page .main-logo {
        width: 260px;
    }

    .mb-wrap {
        padding-top: 260px;
    }

    .mb-card {
        padding: 26px 20px 24px;
    }

    .mb-title {
        font-size: 22px;
    }

    .mb-row {
        display: block;
    }

    .mb-captcha {
        flex-wrap: wrap;
    }
}

/* ============================================================================
 *  ส่วนเพิ่มเติมสำหรับหน้า Login และหน้าสมาชิก (Dashboard)
 * ==========================================================================*/

/* ขนาดการ์ดแต่ละหน้า */
.mb-card.is-login { width: 440px; }
.mb-card.is-panel { width: 980px; }

/* ------------------------------------------------------------ แถบเมนูสมาชิก */

.mb-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.mb-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 18px;
    border: 1px solid var(--mb-field-line);
    border-radius: 999px;
    background: var(--mb-field);

    color: var(--mb-text-dim);
    font-size: 14px;
    text-decoration: none;

    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.mb-nav a:hover {
    border-color: var(--mb-gold);
    background: rgba(226, 184, 87, 0.10);
    color: var(--mb-gold-soft);
}

.mb-nav a.is-active {
    border-color: transparent;
    background: linear-gradient(180deg, #f0cd77, var(--mb-gold) 45%, #b98f36);
    color: #2a1e05;
    font-weight: 400;
}

.mb-nav a.is-danger:hover {
    border-color: var(--mb-danger);
    background: rgba(248, 113, 113, 0.12);
    color: #fecaca;
}

.mb-nav .mb-nav-spacer {
    flex: 1;
}

/* ------------------------------------------------------------- หัวเรื่องย่อย */

.mb-account {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 22px;
    padding: 16px 18px;
    border: 1px solid var(--mb-field-line);
    border-left: 3px solid var(--mb-gold);
    border-radius: 12px;
    background: var(--mb-field);
}

.mb-account .mb-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;

    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(226, 184, 87, 0.15);
    color: var(--mb-gold);
    font-size: 20px;
}

.mb-account .mb-account-name {
    color: var(--mb-text);
    font-size: 18px;
    font-weight: 400;
}

.mb-account .mb-account-sub {
    margin-top: 2px;
    color: var(--mb-text-dim);
    font-size: 13px;
}

/* --------------------------------------------------------------- กล่องตัวเลข */

.mb-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;

    margin-bottom: 24px;
}

.mb-stat {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 18px 20px;
    border: 1px solid var(--mb-field-line);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
}

.mb-stat img {
    width: 34px;
    height: 34px;
    flex: none;
    object-fit: contain;
}

.mb-stat .mb-stat-label {
    color: var(--mb-text-dim);
    font-size: 13px;
}

.mb-stat .mb-stat-value {
    margin-top: 2px;
    color: var(--mb-gold-soft);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
}

/* -------------------------------------------------------------------- ตาราง */

.mb-section-title {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0 0 14px;
    color: var(--mb-text);
    font-size: 17px;
    font-weight: 400;
}

.mb-section-title i {
    color: var(--mb-gold);
}

/* ตารางกว้างกว่าจอ ให้เลื่อนในกล่องตัวเอง ไม่ดันหน้าเว็บ */
.mb-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--mb-field-line);
    border-radius: 12px;
}

.mb-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
    font-size: 14.5px;
}

.mb-table thead th {
    padding: 14px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--mb-field-line);

    color: var(--mb-text-dim);
    font-weight: 400;
    white-space: nowrap;
}

.mb-table thead th img {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 6px;
    object-fit: contain;
}

.mb-table tbody td {
    padding: 13px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--mb-text);
    text-align: center;
    white-space: nowrap;
}

.mb-table tbody tr:last-child td {
    border-bottom: 0;
}

.mb-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}

.mb-table tbody tr:hover td {
    background: rgba(226, 184, 87, 0.07);
}

.mb-table .mb-char-name {
    color: var(--mb-gold-soft);
    font-weight: 400;
}

/* ป้ายสถานะ ONLINE / OFFLINE */
.mb-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    letter-spacing: 0.4px;
}

.mb-badge.is-online {
    background: rgba(74, 222, 128, 0.15);
    color: #86efac;
    box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.35);
}

.mb-badge.is-offline {
    background: rgba(255, 255, 255, 0.06);
    color: #9ca3af;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------- ไม่มีข้อมูล */

.mb-empty {
    padding: 40px 20px;
    color: var(--mb-text-dim);
    text-align: center;
    font-size: 15px;
}

.mb-empty i {
    display: block;
    margin-bottom: 10px;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.18);
}

/* ------------------------------------------------------------------ มือถือ */

@media (max-width: 680px) {

    .mb-nav a {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
        padding: 10px 12px;
        font-size: 13px;
    }

    .mb-nav .mb-nav-spacer {
        display: none;
    }

    .mb-stat .mb-stat-value {
        font-size: 20px;
    }
}

/* การ์ดหน้าเปลี่ยนรหัสผ่าน / เปลี่ยนอีเมล */
.mb-card.is-form { width: 620px; }

/* ช่องที่แก้ไขไม่ได้ (ไอดีเกม / Account ID) */
.mb-input.is-locked {
    background: rgba(255, 255, 255, 0.03);
    border-style: dashed;
}

.mb-input.is-locked input {
    color: var(--mb-text-dim);
}

.mb-input.is-locked:focus-within {
    border-color: var(--mb-field-line);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
}

.mb-input.is-locked:focus-within > i {
    color: var(--mb-text-dim);
}