/* =========================================================
   ACCOUNT PAGE
   ========================================================= */

.account-page {
    background: var(--color-bg-primary);
    min-height: 100vh;
}

.account-shell {
    max-width: 480px;
    margin: 0 auto;
}

/* =========================================================
   CONTENT
   ========================================================= */

.account-content {
    padding: 2px;
    box-sizing: border-box;
}

/* =========================================================
   CARD (LOGIN / REGISTER)
   ========================================================= */

.account-card .input-default {
    width: 100%;
}

.account-card .input-default input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    box-sizing: border-box;
    display: block;
    font-size: var(--text-body-size);
}

/* =========================================================
   ACCOUNT – MEMBER ROW
   ========================================================= */

/* section dùng chung */
.account-section {
    margin-bottom: 12px;
}

/* section chỉ dành cho member info */
.account-member-section {
    padding: 12px;
}

/* row layout */
.account-member-row {
    display: flex;
    gap: 8px;
    align-items: stretch; /* QUAN TRỌNG */
}

/* =========================
   WELCOME MEMBER
   ========================= */

.welcome-member {
    flex: 1 1 0;
    height: 56px;

    display: flex;
    align-items: center;

    background: var(--color-bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--color-bg-brand-1st);

    padding: 8px 12px;
    box-sizing: border-box;
}

/* =========================
   MEMBER STATUS
   ========================= */

.member-status-float {
    position: static; /* BẮT BUỘC – bỏ fixed */
    flex: 1 1 0;
    min-width: 140px;
    height: 56px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background-color: var(--color-bg-secondary);
    border-radius: 8px;

    padding: 8px 12px;
    box-sizing: border-box;

    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.member-status-float .member-row {
    color: var(--color-text-primary);
    font-size: var(--text-caption-size);
    line-height: 1.2;
}

.member-status-float .member-rank {
    color: var(--color-bg-brand-1st);
}

/* =========================================================
   ACCOUNT ORDERS
   ========================================================= */

.account-orders {
    height: 48px;
    background: var(--color-bg-secondary);
    border-radius: 8px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 12px;
    box-sizing: border-box;
}

.account-orders-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.account-orders-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-text-muted);
}

.account-orders-text {
    font-size: var(--text-button-size);
    color: var(--color-text-primary);
}

.account-orders-link {
    font-size: var(--text-button-size);
    color: var(--color-bg-brand-1st);
    text-decoration: none;

    display: flex;
    align-items: center;
    gap: 4px;
}

/* =========================================================
   FORM
   ========================================================= */

.form-group {
    margin-bottom: 12px;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.account-btn {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    cursor: pointer;
}

.account-btn--primary {
    background: var(--color-bg-brand-1st);
    color: var(--color-invert-1st);
}

/* =========================
   FORGOT PASSWORD BUTTON
   ========================= */

.account-forgot-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 44px;

    margin-bottom: 12px;

    background: var(--color-bg-secondary);
    border: 1px solid var(--color-bg-brand-1st);
    border-radius: 8px;

    color: var(--color-bg-brand-1st);
    text-decoration: none;

    font-size: var(--text-body-size);
}

.account-forgot-btn:active {
    opacity: 0.85;
}


/* =========================
   BUTTON – FACEBOOK LOGIN
   ========================= */

.btn-facebook {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 44px;

    margin: 8px 0;

    background-color: #1877f2; /* Facebook blue */
    color: #fff;

    font-size: var(--text-button-size);
    font-weight: 500;
    text-decoration: none;

    border-radius: 6px;
    box-sizing: border-box;
}

/* icon Facebook (nếu dùng font icon) */
.btn-facebook::before {
    content: "f";
    font-family: Arial, sans-serif;
    font-weight: bold;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    margin-right: 8px;

    background: #fff;
    color: #1877f2;
    border-radius: 50%;

    font-size: 14px;
    line-height: 1;
}

/* hover / active */
.btn-facebook:hover {
    background-color: #166fe5;
}

.btn-facebook:active {
    background-color: #145bd6;
}


.account-btn--success {
    background: var(--color-state-success);
    color: #fff;
}

.account-btn--link {
    background: transparent;
    color: var(--color-text-muted);
}

/* =========================================================
   DIVIDER
   ========================================================= */

.account-divider {
    position: relative;
    text-align: center;
    margin: 12px 0;
}

.account-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--color-border-default);
}

.account-divider span {
    position: relative;
    background: var(--color-bg-secondary);
    padding: 0 8px;
    font-size: var(--text-caption-size);
    color: var(--color-text-muted);
}


/* =========================================================
   LOGOUT BAR
   ========================================================= */

.account-logout-bar {
    position: fixed;
    left: 50%;
    bottom: calc(56px + 12px); /* bottom-bar cao ~56px */
    transform: translateX(-50%);

    width: 100%;
    max-width: 480px;

    padding: 0 12px;
    box-sizing: border-box;

    z-index: 20;
}

.account-logout-btn {
    width: 100%;
    height: 48px;

    background: var(--color-invert-1st);
    color: var(--color-bg-secondary);

    border: none;
    border-radius: 8px;

    font-size: var(--text-button-size);
    cursor: pointer;
}