/* ==============================================================
   Account pages – Login, Forgot Password, etc.
   ============================================================== */
.tt-account-page {
    background: var(--canvas);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    width: 100%; /* [FIXED] Ensures full width so flex alignment works perfectly */
}

.tt-account-card {
    max-width: 440px;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 2rem 2rem 2.5rem;
    box-shadow: var(--shadow-md);
}

    .tt-account-card .tt-brand {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }

    /* --- START: 4x4 Grid Logo Update --- */
    .tt-account-card .tt-brand-mark {
        width: 44px !important;
        height: 44px !important;
        flex: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 4px !important;
        background: transparent !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect x='0' y='0' width='11' height='11' fill='%23F2F2F2' rx='2'/%3E%3Crect x='11' y='0' width='11' height='11' fill='%23F2F2F2' rx='2'/%3E%3Crect x='22' y='0' width='11' height='11' fill='%23E8D5A3' rx='2'/%3E%3Crect x='33' y='0' width='11' height='11' fill='%23C9A227' rx='2'/%3E%3Crect x='0' y='11' width='11' height='11' fill='%23F2F2F2' rx='2'/%3E%3Crect x='11' y='11' width='11' height='11' fill='%23E8D5A3' rx='2'/%3E%3Crect x='22' y='11' width='11' height='11' fill='%23C9A227' rx='2'/%3E%3Crect x='33' y='11' width='11' height='11' fill='%23F2F2F2' rx='2'/%3E%3Crect x='0' y='22' width='11' height='11' fill='%23E8D5A3' rx='2'/%3E%3Crect x='11' y='22' width='11' height='11' fill='%23C9A227' rx='2'/%3E%3Crect x='22' y='22' width='11' height='11' fill='%23F2F2F2' rx='2'/%3E%3Crect x='33' y='22' width='11' height='11' fill='%23F2F2F2' rx='2'/%3E%3Crect x='0' y='33' width='11' height='11' fill='%23C9A227' rx='2'/%3E%3Crect x='11' y='33' width='11' height='11' fill='%23E8D5A3' rx='2'/%3E%3Crect x='22' y='33' width='11' height='11' fill='%23F2F2F2' rx='2'/%3E%3Crect x='33' y='33' width='11' height='11' fill='%23F2F2F2' rx='2'/%3E%3C/svg%3E") !important;
        background-size: cover !important;
        border: 2px solid transparent !important;
        transition: transform var(--transition-smooth);
    }

        .tt-account-card .tt-brand-mark::after {
            display: none !important;
        }

    .tt-account-card .tt-brand:hover .tt-brand-mark {
        transform: scale(1.05);
    }

    .tt-account-card .tt-brand-name {
        font-family: var(--font-display) !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        color: var(--navy-deep) !important;
        letter-spacing: -0.02em !important;
        transition: color var(--transition-smooth);
    }

    .tt-account-card .tt-brand:hover .tt-brand-name {
        color: var(--gold);
    }

    .tt-account-card .tt-brand-sub {
        font-family: var(--font-mono) !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 0.18em !important;
        color: var(--gold) !important;
        text-transform: uppercase !important;
        margin-top: -2px !important;
    }
    /* --- END: 4x4 Grid Logo Update --- */

    .tt-account-card h1 {
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 1.6rem;
        color: var(--navy-deep);
        margin-top: 0.25rem;
    }

    .tt-account-card .sub {
        color: var(--muted);
        font-size: 0.9rem;
        margin-top: 0.25rem;
        line-height: 1.5;
    }

    .tt-account-card .tt-field {
        margin-top: 1rem;
    }

        .tt-account-card .tt-field:first-of-type {
            margin-top: 1.5rem;
        }

    .tt-account-card .tt-label {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--navy-deep);
        display: block;
        margin-bottom: 0.25rem;
    }

    .tt-account-card .tt-input,
    .tt-account-card .tt-select {
        width: 100%;
        border: 1px solid var(--border);
        background: var(--surface);
        padding: 0.7rem 0.9rem;
        font-size: 0.95rem;
        font-family: var(--font-body);
        color: var(--ink);
        border-radius: 0.6rem;
        transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
    }

        .tt-account-card .tt-input:focus,
        .tt-account-card .tt-select:focus {
            outline: none;
            border-color: var(--gold);
            box-shadow: 0 0 0 3px rgba(184,144,42,0.16);
        }

    .tt-account-card .tt-checkbox {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        color: var(--ink);
        cursor: pointer;
        margin-top: 0.75rem;
    }

        .tt-account-card .tt-checkbox input[type="checkbox"] {
            appearance: none;
            width: 1.1rem;
            height: 1.1rem;
            border: 1.5px solid var(--border);
            background: var(--surface);
            cursor: pointer;
            position: relative;
            border-radius: 0.25rem;
            flex: none;
            transition: all var(--transition-smooth);
        }

            .tt-account-card .tt-checkbox input[type="checkbox"]:checked {
                border-color: var(--gold);
                background: var(--gold);
            }

                .tt-account-card .tt-checkbox input[type="checkbox"]:checked::after {
                    content: "";
                    position: absolute;
                    left: 0.25rem;
                    top: 0.05rem;
                    width: 0.4rem;
                    height: 0.7rem;
                    border: solid var(--navy-deep);
                    border-width: 0 2px 2px 0;
                    transform: rotate(45deg);
                }

    .tt-account-card .tt-actions {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        margin-top: 1.8rem;
    }

        .tt-account-card .tt-actions .btn {
            width: 100%;
            justify-content: center;
        }

        .tt-account-card .tt-actions .btn-ghost-dark {
            background: transparent;
        }

            .tt-account-card .tt-actions .btn-ghost-dark:hover {
                background: var(--canvas);
            }

    .tt-account-card .tt-link-row {
        margin-top: 1.5rem;
        text-align: center;
        font-size: 0.9rem;
        color: var(--muted);
    }

        .tt-account-card .tt-link-row a {
            color: var(--navy-deep);
            font-weight: 600;
            border-bottom: 1px solid var(--gold);
        }

            .tt-account-card .tt-link-row a:hover {
                color: var(--gold);
            }

    .tt-account-card .tt-notice {
        margin-top: 1rem;
        border: 1px solid var(--border);
        background: var(--surface);
        padding: 0.8rem 1rem;
        font-size: 0.85rem;
        color: var(--ink);
        border-radius: 0.6rem;
    }

    .tt-account-card .tt-notice-gold {
        border-color: var(--gold);
        background: rgba(184,144,42,0.08);
    }

    .tt-account-card .text-danger {
        color: #F34A3F;
        font-size: 0.8rem;
    }

    .tt-account-card .validation-summary-errors {
        margin-bottom: 0.5rem;
    }

[dir="rtl"] .tt-account-card .tt-checkbox input[type="checkbox"]:checked::after {
    left: auto;
    right: 0.25rem;
}