/* =========================================
   👤 ACCOUNT PAGE SPECIFIC STYLING
========================================= */
body {
    background-color: #f8f9fa;
    margin: 0;
}

/* --- MAIN CONTAINER --- */
.account-main {
    padding-top: 0px; /* Header space */
    padding-bottom: 80px; /* Bottom Nav space */
    min-height: 100vh;
}

/* --- PROFILE SECTION (LOGGED IN) --- */
.profile-card {
    background-color: #ffffff;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.profile-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0f2f5;
}

.profile-info {
    flex-grow: 1;
}

.profile-name {
    font-size: 18px;
    font-weight: 700;
    color: #2b2b2b;
    margin: 0 0 4px 0;
}

.profile-email, .profile-mobile {
    font-size: 13px;
    color: #636e72;
    margin: 0 0 2px 0;
}

.edit-profile-btn {
    background-color: #f0f2f5;
    color: #2b2b2b;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s ease;
}

.edit-profile-btn:active {
    background-color: #dfe6e9;
}

/* --- GUEST SECTION (LOGGED OUT) --- */
.guest-card {
    background-color: #ffffff;
    padding: 30px 20px;
    text-align: center;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.guest-icon {
    font-size: 50px !important;
    color: #dfe6e9;
    margin-bottom: 10px;
}

.guest-title {
    font-size: 18px;
    font-weight: 700;
    color: #2b2b2b;
    margin: 0 0 8px 0;
}

.guest-desc {
    font-size: 14px;
    color: #636e72;
    margin: 0 0 15px 0;
}

.btn-login {
    background-color: #fd4f6a;
    color: #ffffff;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    max-width: 250px;
}

/* --- ACCOUNT MENU LIST --- */
.account-menu {
    background-color: #ffffff;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f2f5;
    text-decoration: none;
    color: #2b2b2b;
    transition: background 0.2s ease;
}

.menu-item:active {
    background-color: #f8f9fa;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-icon {
    color: #636e72;
    margin-right: 15px;
    font-size: 22px !important;
}

.menu-text {
    flex-grow: 1;
    font-size: 15px;
    font-weight: 500;
}

.menu-arrow {
    color: #b2bec3;
    font-size: 20px !important;
}

/* --- LOGOUT BUTTON --- */
.logout-btn-container {
    background-color: #ffffff;
    padding: 16px 20px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.logout-text {
    color: #fd4f6a;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
/* ==========================================
   EDIT PROFILE
   ========================================== */
.profile-modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.45); box-sizing:border-box; }
.profile-modal-box { width:100%; max-width:400px; background:#fff; border-radius:14px; padding:22px; box-sizing:border-box; box-shadow:0 10px 35px rgba(0,0,0,.2); }
.profile-modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.profile-modal-header h3 { margin:0; font-size:20px; }
.profile-modal-header button { border:0; background:none; font-size:28px; color:#777; cursor:pointer; }
.profile-form-field { margin-bottom:16px; }
.profile-form-field label { display:block; margin-bottom:7px; font-size:13px; font-weight:600; color:#333; }
.profile-form-field input { width:100%; height:46px; padding:0 12px; border:1px solid #ddd; border-radius:7px; outline:none; font-size:14px; box-sizing:border-box; }
.profile-form-field input:focus { border-color:var(--primary-color); }
.profile-edit-message { margin:0 0 14px; padding:10px; border-radius:6px; font-size:12px; }
.profile-edit-message.error { background:#ffebee; color:#c62828; }
.profile-edit-message.success { background:#e8f5e9; color:#2e7d32; }
.profile-modal-actions { display:flex; gap:10px; margin-top:20px; }
.profile-modal-actions button { flex:1; height:44px; border:0; border-radius:7px; font-weight:600; cursor:pointer; }
#cancel-profile-edit { background:#eee; color:#333; }
#save-profile-btn { background:var(--primary-color); color:#fff; }
#save-profile-btn:disabled { opacity:.6; cursor:not-allowed; }
/* ==========================================
   ACCOUNT INITIAL LOADING
   ========================================== */

.account-loading > #auth-logged-in,
.account-loading > #auth-logged-out,
.account-loading > .account-menu,
.account-loading > #logout-section {
    display:none !important;
}

.account-loader {
    min-height:320px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    color:#777;
}

.loader-spinner {
    width:34px;
    height:34px;
    border:3px solid #e5e7eb;
    border-top-color:var(--primary-color);
    border-radius:50%;
    animation:accountSpin .8s linear infinite;
}

.account-loader p {
    margin:0;
    font-size:14px;
}

@keyframes accountSpin {
    to {
        transform:rotate(360deg);
    }
}
/* ==========================================
   SAVED ADDRESSES
========================================== */
.address-main{padding:0 16px 90px}
.address-main>#address-content{max-width:760px;margin:0 auto}
.address-page-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 0 20px}
.address-page-top h2{margin:0 0 5px;font-size:19px;font-weight:700;color:#2b2b2b;line-height:1.2}
.address-page-top p{margin:0;font-size:13px;color:#777;line-height:1.4}
.address-add-btn{height:42px;padding:0 14px;border:0;border-radius:8px;background:#fd4f6a;color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;cursor:pointer}
.address-add-btn .material-symbols-outlined{font-size:19px}
.address-list{display:grid;gap:12px}
.saved-address-card{background:#fff;border:1px solid #eceff1;border-radius:12px;padding:16px;box-shadow:0 2px 5px rgba(0,0,0,.03)}
.saved-address-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.saved-address-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.saved-address-title strong{font-size:15px;color:#2b2b2b}
.saved-address-title>.material-symbols-outlined{font-size:20px;color:#fd4f6a}
.saved-address-card p{margin:5px 0;font-size:13px;color:#555;line-height:1.45}
.saved-address-mobile{margin-top:10px!important;color:#333!important;font-weight:600}
.default-address-badge{font-size:10px;padding:4px 8px;border-radius:20px;background:#eaf8ef;color:#218346;font-weight:600}
.saved-address-actions{display:flex;gap:5px}
.address-icon-btn{width:32px;height:32px;padding:0;border:1px solid #e8e8e8;background:#fafafa;border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.address-icon-btn .material-symbols-outlined{font-size:17px}
.default-address-text{margin-top:10px;color:#218346;font-size:11px;display:flex;align-items:center;gap:4px;font-weight:600}
.default-address-text .material-symbols-outlined{font-size:16px}
.set-default-btn{margin-top:10px;padding:0;border:0;background:none;color:#fd4f6a;font-size:12px;font-weight:600;cursor:pointer}
.no-address{min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.no-address-icon{font-size:58px!important;color:#c5c7ca}
.no-address h3{margin:12px 0 5px;font-size:18px;color:#2b2b2b}
.no-address p{margin:0 0 16px;font-size:13px;color:#777}
.no-address button{border:0;background:#fd4f6a;color:#fff;border-radius:8px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer}
.address-modal-box{width:min(520px,calc(100% - 28px));max-height:90vh;overflow-y:auto}
.address-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.address-full{grid-column:1/-1}
.address-default-check{display:flex;align-items:center;gap:8px;margin:15px 0;font-size:13px;color:#444}
.address-default-check input{width:16px;height:16px}
@media(max-width:600px){
.address-main{padding-left:14px;padding-right:14px}
.address-page-top{padding:20px 0 18px;gap:10px}
.address-page-top h2{font-size:18px}
.address-page-top p{font-size:12px;max-width:190px}
.address-add-btn{height:40px;padding:0 11px;font-size:12px}
.address-form-grid{grid-template-columns:1fr}
.address-full{grid-column:auto}
}