/* =========================================================
 * ALMARA Affiliate — Account + Reset Mobile CSS v1.0.0
 * Append to: almara-affiliate-sub-mobile-append.css
 *
 * Breakpoints: ≤ 1024px / ≤ 767px / ≤ 390px
 * ========================================================= */

/* =========================================================
 * TABLET  ≤ 1024px
 * ========================================================= */
@media screen and (max-width: 1024px) {

  body:has(#alm-account-header) #alm-account-header,
  body:has(#alm-account-header) #alm-account-area,
  body:has(#alm-reset-header)   #alm-reset-header,
  body:has(#alm-reset-header)   #alm-reset-area {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  /* Stat tiles: 2 per row on tablet */
  body:has(#alm-account-header) #alm-account-area .slicewp-stat {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 140px !important;
  }

  /* Nav tabs: allow wrapping */
  body:has(#alm-account-header) #alm-account-area .slicewp-nav ul {
    gap: 2px !important;
  }
  body:has(#alm-account-header) #alm-account-area .slicewp-nav ul li a {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
}

/* =========================================================
 * MOBILE  ≤ 767px
 * ========================================================= */
@media screen and (max-width: 767px) {

  /* Section padding */
  body:has(#alm-account-header) #alm-account-header,
  body:has(#alm-account-header) #alm-account-area,
  body:has(#alm-reset-header)   #alm-reset-header,
  body:has(#alm-reset-header)   #alm-reset-area {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* e-con padding-inline reset */
  body:has(#alm-account-header) #alm-account-header .e-con,
  body:has(#alm-account-header) #alm-account-header .e-con-inner,
  body:has(#alm-account-header) #alm-account-area .e-con,
  body:has(#alm-account-header) #alm-account-area .e-con-inner,
  body:has(#alm-reset-header) #alm-reset-header .e-con,
  body:has(#alm-reset-header) #alm-reset-header .e-con-inner,
  body:has(#alm-reset-header) #alm-reset-area .e-con,
  body:has(#alm-reset-header) #alm-reset-area .e-con-inner {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Header: tighter on mobile */
  body:has(#alm-account-header) #alm-account-header,
  body:has(#alm-reset-header) #alm-reset-header {
    padding-top: 3rem !important;
    padding-bottom: 2rem !important;
  }
  body:has(#alm-account-header) #alm-account-header .elementor-heading-title,
  body:has(#alm-reset-header) #alm-reset-header .elementor-heading-title {
    font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important;
    line-height: 1.1 !important;
  }

  /* ── Account area: mobile layout ── */

  /* Stats: single column */
  body:has(#alm-account-header) #alm-account-area .slicewp-stats {
    flex-direction: column !important;
    gap: 10px !important;
  }
  body:has(#alm-account-header) #alm-account-area .slicewp-stat {
    flex: 1 0 auto !important;
    width: 100% !important;
    padding: 1rem 1.25rem !important;
  }

  /* Nav tabs: scrollable horizontal strip */
  body:has(#alm-account-header) #alm-account-area .slicewp-nav ul {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 1px !important;
  }
  body:has(#alm-account-header) #alm-account-area .slicewp-nav ul::-webkit-scrollbar { display: none !important; }
  body:has(#alm-account-header) #alm-account-area .slicewp-nav ul li a {
    padding: 9px 14px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* Tables: horizontal scroll */
  body:has(#alm-account-header) #alm-account-area .slicewp-table,
  body:has(#alm-account-header) #alm-account-area table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 12px !important;
  }

  /* Affiliate link input: full width, wrap */
  body:has(#alm-account-header) #alm-account-area .slicewp-affiliate-link {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body:has(#alm-account-header) #alm-account-area .slicewp-affiliate-link input[type="text"] {
    width: 100% !important;
  }

  /* Programme details: single column */
  body:has(#alm-account-header) #alm-account-area .slicewp-program-details,
  body:has(#alm-account-header) #alm-account-area .slicewp-commission-rates {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Area wrapper: full width */
  body:has(#alm-account-header) #alm-account-area .slicewp-affiliate-area {
    max-width: 100% !important;
  }

  /* ── Reset area: full width card ── */
  body:has(#alm-reset-header) #alm-reset-area .slicewp-affiliate-area {
    max-width: 100% !important;
    padding: 1.5rem !important;
  }
}

/* =========================================================
 * SMALL MOBILE  ≤ 390px
 * ========================================================= */
@media screen and (max-width: 390px) {

  body:has(#alm-account-header) #alm-account-header .elementor-heading-title,
  body:has(#alm-reset-header) #alm-reset-header .elementor-heading-title {
    font-size: 1.7rem !important;
  }

  body:has(#alm-account-header) #alm-account-area,
  body:has(#alm-reset-header) #alm-reset-area {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body:has(#alm-reset-header) #alm-reset-area .slicewp-affiliate-area {
    padding: 1.25rem !important;
  }
}