/* ================================================================
   EG2Store — Account Page Styles
================================================================ */

/* ── Tabs ── */
.account-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--navy-border);
  margin-bottom: 28px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.account-tab {
  padding: 12px 20px; font-size: 13px; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.account-tab--active, .account-tab:hover { color: var(--green); border-bottom-color: var(--green); }

/* ── Wishlist grid ── */
.wishlist-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wishlist-empty { font-size: 14px; color: var(--text-muted); }
.wishlist-empty a { color: var(--green); }

/* ── Avatar upload ── */
.avatar-upload-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.avatar-upload-wrap img { border: 2px solid var(--navy-border); border-radius: 50%; object-fit: cover; }
.avatar-upload-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-body);
  cursor: pointer; background: var(--navy-mid); border: 1px solid var(--navy-border);
  border-radius: var(--radius-sm); padding: 8px 14px;
  transition: background var(--transition), color var(--transition);
}
.avatar-upload-label:hover { background: var(--navy-border); color: var(--white); }
#avatarInput { width: 1px; height: 1px; opacity: 0; position: absolute; overflow: hidden; }

/* ── Password strength ── */
.password-requirements { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.req-item { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.req-item.met { color: var(--green); }
.req-item .req-icon::before { content: '○'; }
.req-item.met .req-icon::before { content: '✓'; }

/* ── Refund modal ── */
#refundModal .modal { max-width: 520px; }
#refundModal label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 6px; color: var(--text-body); }
#refundModal textarea { min-height: 110px; resize: vertical; }
#refundModal .modal__footer { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }
.refund-btn-trigger { cursor: pointer; }

/* ── Recent orders mini ── */
.recent-orders-mini { overflow-x: auto; }
.recent-orders-mini table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }
.recent-orders-mini th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid var(--navy-border); }
.recent-orders-mini td { padding: 13px 12px; border-bottom: 1px solid rgba(255,255,255,.04); }
.recent-orders-mini tr:last-child td { border-bottom: none; }

/* ── Danger zone ── */
.danger-zone {
  margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--navy-border);
}
.danger-zone h4 { font-size: 14px; font-weight: 700; color: var(--danger); margin-bottom: 10px; }
.danger-zone p { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }

/* ── AJAX feedback ── */
.save-result { font-size: 13px; margin-top: 8px; min-height: 20px; }
.save-result.success { color: var(--green); }
.save-result.error   { color: var(--danger); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .wishlist-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-sidebar { position: static; }
  .wishlist-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .account-content { padding: 20px; }
  .dashboard-cards { grid-template-columns: 1fr 1fr; }
  .wishlist-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr !important; }
}

/* ── Review section on Digital Items detail ─────────────────── */
.review-section {
  margin-top: 24px;
  padding: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.review-section h3 {
  margin: 0 0 14px 0;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
/* Star rating */
.star-rating {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 14px;
}
.star-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 32px;
  line-height: 1;
  padding: 4px;
  color: rgba(255,255,255,0.25);
  transition: color 0.15s, transform 0.15s;
}
.star-btn:hover { transform: scale(1.1); }
.star-btn.is-active { color: #FFC107; }   /* gold filled */
.star-rating:hover .star-btn { color: rgba(255,255,255,0.25); }
.star-rating:hover .star-btn:hover,
.star-rating:hover .star-btn:hover ~ .star-btn { color: rgba(255,255,255,0.25); }
.star-rating .star-btn:hover,
.star-rating .star-btn:hover ~ .star-btn { color: inherit; }
/* The "hover preview" trick — when hovering, fill stars up to the hovered one */
.star-rating:not(:hover) .star-btn.is-active { color: #FFC107; }

/* Review textarea */
.review-section .form-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.25);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  margin-bottom: 14px;
}
.review-section .form-textarea:focus {
  outline: none;
  border-color: #00C853;
  box-shadow: 0 0 0 1px #00C853;
}
.review-section .form-textarea::placeholder { color: rgba(255,255,255,0.4); }

/* Already-reviewed alert */
.account-alert--success {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(0,200,83,0.12);
  border: 1px solid rgba(0,200,83,0.3);
  border-radius: 6px;
  color: #00C853;
  font-weight: 600;
}

.form-message {
  margin-top: 10px;
  font-size: 13px;
}
.form-message--success { color: #00C853; }
.form-message--error   { color: #ef5350; }