/* ===============================
   ACCOUNT PAGE - THEME BASED
================================ */

.account-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;

  background: var(--color-bg);
  font-family: inherit;
}

/* ===============================
   DASHBOARD LAYOUT
================================ */

.account-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===============================
   HEADER
================================ */

.account-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.account-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
}

/* ===============================
   LOGOUT BUTTON
================================ */

#logout-btn {
  border: none;
  background: transparent;

  color: var(--color-accent);

  font-size: 13px;
  font-weight: 500;

  cursor: pointer;
}

/* ===============================
   ACTION BUTTON GROUP
================================ */

.account-section {
  display: flex;
  gap: 10px;
}

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

.account-section button {
  flex: 1;

  padding: 12px;
  border-radius: 12px;

  border: 1px solid var(--color-muted);
  background: var(--color-surface);

  font-size: 14px;
  font-weight: 600;

  color: var(--color-text);

  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover */

.account-section button:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Active */

.account-section button:active {
  transform: scale(0.97);
}

/* ===============================
   BODY
================================ */

#account-body {
  margin-top: 10px;
}

/* ===============================
   ORDER CARD
================================ */

.order-card {
  background: var(--color-surface);
  border: 1px solid var(--color-muted);

  border-radius: 14px;
  padding: 14px;

  margin-bottom: 10px;

  font-size: 14px;
  color: var(--color-text);
}

/* Price inside order */

.order-card .price {
  color: var(--color-price);
  font-weight: 600;
}

/* Discount */

.order-card .discount {
  color: var(--color-discount);
}

/* ===============================
   PROFILE CARD
================================ */

.profile-card {
  background: var(--color-surface);
  border: 1px solid var(--color-muted);

  border-radius: 14px;
  padding: 14px;

  font-size: 14px;
  color: var(--color-text);
}

/* ===============================
   EMPTY STATE
================================ */

.account-body p {
  text-align: center;
  color: var(--color-muted);
  font-size: 14px;
  margin-top: 20px;
}

/* ===============================
   PHONE LOGIN (REUSED COMPONENT)
================================ */

.phone-login-block {
  margin-top: 20px;
}

/* ===============================
   ANIMATION (PREMIUM TOUCH)
================================ */

.account-dashboard,
.order-card,
.profile-card {
  animation: fadeSlide 0.3s ease;
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}