/* ============================================
   DevStore — অ্যাকাউন্ট/প্রোফাইল পেইজ স্টাইল
   ============================================ */

.account-page {
    padding: var(--space-md);
    max-width: 800px;
    margin: 0 auto;
}

/* ============ লগইন/রেজিস্ট্রেশন ফর্ম ============ */
.auth-container {
    max-width: 420px;
    margin: 0 auto;
    padding: var(--space-lg);
}

.auth-card {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
}

.auth-card h2 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.auth-card .auth-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-gray);
    margin-bottom: var(--space-lg);
}

/* ট্যাব সুইচ (ফোন/ইমেইল) */
.auth-tabs {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    background: var(--bg-soft);
    padding: 3px;
    border-radius: var(--radius-full);
}

.auth-tab {
    flex: 1;
    padding: var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-gray);
    transition: all var(--transition-fast);
    cursor: pointer;
    text-align: center;
}

.auth-tab.active {
    background: var(--bg-white);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

/* OTP ভেরিফিকেশন */
.otp-group {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.otp-input {
    width: 48px;
    height: 48px;
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: 700;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    transition: border-color var(--transition-fast);
}

.otp-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Google Sign-In বাটন */
.google-signin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text-dark);
    font-weight: 500;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    margin-top: var(--space-md);
}

.google-signin-btn:hover {
    background: var(--bg-soft);
    box-shadow: var(--shadow-sm);
}

.google-signin-btn img {
    width: 20px;
    height: 20px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
    font-size: var(--font-size-xs);
    color: var(--text-light);
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ============ ইউজার ড্যাশবোর্ড ============ */
.user-profile-header {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-lg);
}

.user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    color: var(--primary);
    font-size: var(--font-size-3xl);
    font-weight: 700;
}

.user-name {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--space-xs);
}

.user-username {
    font-size: var(--font-size-sm);
    color: var(--text-light);
    margin-bottom: var(--space-xs);
}

.user-contact {
    font-size: var(--font-size-sm);
    color: var(--text-gray);
}

/* ড্যাশবোর্ড মেনু */
.dashboard-menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.dashboard-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    color: var(--text-dark);
    font-weight: 500;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.dashboard-menu-item:hover {
    transform: translateX(4px);
    color: var(--primary);
}

.dashboard-menu-item i {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-gray);
}

.dashboard-menu-item:hover i {
    color: var(--primary);
}

.dashboard-menu-item .menu-label {
    flex: 1;
}

.dashboard-menu-item .menu-arrow {
    color: var(--text-light);
}

/* অর্ডার হিস্ট্রি */
.order-history {
    margin-bottom: var(--space-lg);
}

.order-card {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.order-id {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.order-status {
    font-size: var(--font-size-xs);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-weight: 500;
}

.order-status.completed {
    background: rgba(52, 199, 89, 0.1);
    color: var(--accent-green);
}

.order-status.processing {
    background: rgba(255, 184, 0, 0.1);
    color: var(--rating);
}

.order-status.pending {
    background: rgba(0, 102, 255, 0.1);
    color: var(--primary);
}

.order-date {
    font-size: var(--font-size-xs);
    color: var(--text-light);
}

.order-total {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--primary);
    margin-top: var(--space-xs);
}

/* খালি অর্ডার */
.empty-orders {
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
}

.empty-orders dotlottie-player {
    width: 200px;
    height: 200px;
    margin: 0 auto var(--space-md);
}

.empty-orders p {
    color: var(--text-gray);
    margin-bottom: var(--space-md);
}

/* লগআউট বাটন */
.logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    color: var(--accent-red);
    border: 1px solid rgba(255, 59, 48, 0.2);
    background: rgba(255, 59, 48, 0.05);
    font-weight: 500;
    transition: all var(--transition-fast);
    margin-bottom: var(--space-md);
}

.logout-btn:hover {
    background: rgba(255, 59, 48, 0.1);
}

/* ব্যাক টু হোম বাটন */
.back-home-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    color: var(--text-gray);
    border: 1px solid var(--border);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.back-home-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}