/* StayEasy - Customer responsive overrides
   Load AFTER css/customer/style.css (and after common.css)
*/

/* Prevent accidental horizontal scroll from wide cards/forms */
html, body { max-width: 100%; overflow-x: hidden; }

/* ---------- Tablet & small laptop ---------- */
@media (max-width: 1024px) {
  .account-section { padding: 48px 16px; }
  .account-container { gap: 20px; }
/*  .account-sidebar { top: 84px; }*/

  .account-card { padding: 18px; }
  .premium-card { padding: 18px; }

  .account-title { font-size: 26px; }
  .account-subtitle { font-size: 14px; }

  /* Auth screens */
  .auth-section { padding: 46px 16px; }
  .auth-card { padding: 34px; }
}

/* ---------- Mobile / Tablet Portrait ---------- */
@media (max-width: 768px) {
  .logout-res{
    display: none;
  }

  .logout-desk{
    display: none;
  }

  .logout-mobile{
    display: block;
  }

  .account-section { padding: 38px 14px; min-height:initial; }

  .account-container {
    grid-template-columns: 1fr;
    gap: 14px;
    position: relative;
  }

  .account-mobile-actions{
    display: flex;
  }

  .account-mobile-back-btn,
  .account-mobile-menu-trigger{
    display: inline-flex;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .account-sidebar-overlay{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 998;
  }

  .account-sidebar-overlay.is-visible{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .account-sidebar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: min(86vw, 340px);
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0 18px 18px 0;
    z-index: 999;
    overflow-y: auto;
    transform: translateX(-108%);
    transition: transform .24s ease;
  }

  .account-global-mobile-sidebar {
    display: block;
  }

  .account-sidebar-overlay {
    display: block;
  }

  .account-section .account-sidebar {
    display: none;
  }

  .account-sidebar.is-open{
    transform: translateX(0);
  }

  .account-sidebar-head { padding: 18px 16px; }
  .account-avatar { width: 40px; height: 40px; font-size: 14px; }

  .account-nav { padding: 12px; }
  .account-link { padding: 13px 12px; }
  .account-mobile-nav-link{
    display: flex;
  }

  .logout-mobile .account-link{
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .account-content { padding: 0; }

  .account-topbar { gap: 12px; }
  .account-title { font-size: 22px; }
  .account-subtitle { font-size: 13px; }

  /* Topbar CTA becomes full width on mobile */
  .account-cta {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Stats cards spacing */
  .account-stats { gap: 12px; }
  .stat-card { padding: 16px; }
  .stat-value { font-size: 26px; }

  /* Cards */
  .account-card, .premium-card { padding: 16px; border-radius: 14px; }
  .account-card-head { gap: 10px; flex-wrap: wrap; }
  .pill { font-size: 11px; padding: 6px 10px; }

  /* Empty state */
  .empty-title { font-size: 15px; }
  .empty-sub { font-size: 13px; }

  /* Auth screens */
  .auth-card { padding: 26px; border-radius: 12px; }
  .auth-title { font-size: 24px; }
  .auth-sub { font-size: 13px; }
  .auth-form input { padding: 11px; }

  /* Buttons */
  .account-cta, .account-cta-secondary {
    width: 100%;
    text-align: center;
    display: inline-block;
  }

  .booking-ui-top{
    flex-direction: column;
    align-items: flex-start;
  }

  .booking-ui-right{
    text-align: left;
    min-width: initial;
    width: 100%;
  }

  .booking-ui-grid{
    grid-template-columns: 1fr;
  }

  .booking-ui-footer{
    flex-direction: column;
    align-items: flex-start;
  }

  .booking-ui-actions{
    width: 100%;
  }

  .booking-ui-actions .account-cta-secondary{
    width: 100%;
    text-align: center;
  }


  .settings-panel { padding: 16px; border-radius: 16px; }
  .settings-panel-head { flex-direction: column; align-items: flex-start; margin-bottom: 14px; }
  .settings-panel-title { font-size: 20px; }
  .settings-option-card { padding: 14px; gap: 14px; }

  .customer-message-open-label{
    display:inline-flex;
    align-items:center;
  }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
  .account-section { padding: 32px 12px; }

  .account-sidebar {
    width: min(88vw, 320px);
  }

  .account-sidebar-head { padding: 14px 12px; }
  .account-user-name { font-size: 12px; }
  .account-user-email { font-size: 11px; }

  .account-title { font-size: 20px; }
  .account-subtitle { font-size: 12.5px; }

  .stat-value { font-size: 24px; }
  .stat-meta { font-size: 12px; }

  .auth-card { padding: 20px; }
  .auth-title { font-size: 22px; }

  /* Booking review: stack the 2-column inline grid inside the form */
  .auth-form > div[style*="grid-template-columns: 1fr 1fr"]{
    grid-template-columns: 1fr !important;
  }

  /* Booking review: make the confirm button easier to tap */
  .account-cta { padding-left: 18px; padding-right: 18px; }


  .settings-option-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-toggle-wrap {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ---------- Booking review page (general) ---------- */
@media (max-width: 680px) {
  /* The booking review uses inline flex wrappers; just tighten spacing */
  .account-card.premium-card > div[style*="display:flex"]{
    gap: 14px !important;
  }
}


@media (max-width: 768px) {
  .account-mobile-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 10px;
  }

  .account-mobile-menu-trigger {
    display: none !important;
  }

  .account-dashboard-mobile-actions .account-mobile-quick-link {
    width: 100%;
  }

  .logout-mobile {
    display: block;
  }

  .logout-mobile .account-link {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  .account-section .account-container > .account-sidebar,
  .account-section .account-container > .account-sidebar-overlay {
    display: none !important;
  }

  .customer-global-mobile-sidebar {
    display: block !important;
  }

  .customer-global-mobile-sidebar .account-mobile-nav-link {
    display: flex;
  }

  .customer-global-mobile-sidebar .logout-mobile {
    display: block;
  }

  .customer-global-mobile-sidebar .logout-mobile .account-link {
    width: 100%;
    justify-content: space-between;
  }
}