/* ================================================================
   profile-mobile.css
   Complete mobile responsiveness for the <main> section of profile.html
   (page hero, sidebar, tabs, cards, forms, order list, addresses,
   add-address modal). Breakpoints match styles.css: 768px / 600px.
   Load this AFTER styles.css and pages.css.
   ================================================================ */

@media (max-width: 768px) {

  /* ---------- Page Hero ---------- */
  .page-hero {
    padding: 44px 0 32px;
  }

  .page-hero-tag {
    margin-top: 0;
    font-size: 0.72rem;
    padding: 5px 14px;
  }

  .page-hero h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .page-hero p {
    font-size: 0.92rem;
    padding: 0 12px;
  }

  /* ---------- Layout: stack sidebar above main content ---------- */
  main .container {
    padding: 0 1rem;
  }

  .profile-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 0;
  }

  .profile-sidebar {
    width: 100%;
    position: static;
    top: auto;
  }

  .profile-avatar-section {
    padding: 24px 20px;
  }

  .profile-avatar {
    width: 68px;
    height: 68px;
    font-size: 1.7rem;
    margin-bottom: 10px;
  }

  .profile-avatar-name {
    font-size: 1rem;
  }

  .profile-avatar-email {
    font-size: 0.78rem;
  }

  .profile-main {
    width: 100%;
    gap: 20px;
  }

  /* Horizontal, scrollable tab bar instead of a vertical nav list */
  .profile-nav {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding: 10px 8px;
    scrollbar-width: none;
  }

  .profile-nav::-webkit-scrollbar {
    display: none;
  }

  .profile-nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 16px;
    border-left: none;
    border-bottom: 3px solid transparent;
    font-size: 0.85rem;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  .profile-nav-item:hover,
  .profile-nav-item.active {
    border-left-color: transparent;
    border-bottom-color: var(--color-green);
  }

  /* ---------- Cards (order history / personal info / addresses) ---------- */
  .profile-card-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
    padding: 16px 18px;
  }

  .profile-card-header .btn {
    align-self: stretch;
    justify-content: center;
  }

  .profile-card-title {
    font-size: 1rem;
  }

  .profile-card-body {
    padding: 18px;
  }

  /* Order stats row -> stack to 1 column */
  #tab-orders div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Personal info / address forms: single column instead of 2-column grid */
  .profile-card-body div[style*="grid-template-columns:1fr 1fr"],
  .profile-card-body div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .profile-card-header .btn,
  #edit-btn,
  #save-btn {
    width: auto;
  }

  #save-btn {
    width: 100%;
    justify-content: center;
  }

  /* ---------- Order cards ---------- */
  .order-item-card > div[style*="justify-content:space-between"] {
    flex-direction: column;
    align-items: flex-start !important;
    padding: 14px 16px !important;
  }

  .order-item-card > div > div[style*="min-width:240px"] {
    min-width: 0 !important;
    width: 100%;
  }

  .order-item-card > div > div[style*="margin-left:auto"] {
    margin-left: 0 !important;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px !important;
  }

  .order-item-card [id^="order-details-"] {
    padding: 14px 16px !important;
  }

  /* Line items inside "View Details": allow wrapping on narrow screens */
  .order-item-card div[style*="justify-content:space-between; gap:12px"] {
    flex-wrap: wrap;
  }

  /* ---------- Saved address cards ---------- */
  #tab-address .profile-card-body > div {
    padding: 16px !important;
  }

  /* ---------- Buttons ---------- */
  .profile-card .btn,
  .order-item-card .btn {
    font-size: 0.82rem;
  }
}

@media (max-width: 600px) {
  .page-hero{
    margin-top:40px
  }
  .profile-avatar-name {
    font-size: 0.95rem;
  }

  .profile-card-title {
    font-size: 0.95rem;
  }

  .order-item-card [style*="font-size:0.96rem"] {
    font-size: 0.88rem !important;
  }

  .order-item-card [style*="font-size:1.1rem"] {
    font-size: 1rem !important;
  }

  /* Order status pill + price + button wrap cleanly on very small phones */
  .order-item-card > div > div[style*="margin-left:auto"] {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .order-item-card > div > div[style*="margin-left:auto"] .btn {
    align-self: stretch;
    justify-content: center;
  }

  /* Add-address modal: full-width sheet instead of a centered card */
  #add-address-modal > div {
    width: 92% !important;
    padding: 24px 18px !important;
  }

  #add-address-modal div[style*="grid-template-columns:1fr 1fr"],
  #add-address-modal div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Center popup modal */
  #custom-center-popup > div {
    width: 88% !important;
    padding: 28px 20px !important;
  }
}