/* ---------- Global Surface ---------- */

/* ============================================================
   Global Surface — STYLES
   Keep page/component styles in logical sections below.
   ============================================================ */

/* APEMART — GLOBAL PREMIUM PAGE SURFACE */
html{background:#f5f7fb}
body{background:radial-gradient(circle at 8% 0%,rgba(255,107,0,.075),transparent 30%),radial-gradient(circle at 92% 18%,rgba(52,199,89,.06),transparent 26%),linear-gradient(180deg,#f8fafc 0%,#f3f6fa 100%);background-attachment:fixed;transition:background .25s ease,color .25s ease}
main{background-color:transparent}
.about-page,.categories-page,.chat-page,.offers-page,.promotions-page,.promotion-page,.recent-page,.saved-page,.search-page,.seller-hub,.seller-profile-page,.error-page,.edit-profile-page{background:radial-gradient(circle at 8% 0%,rgba(255,107,0,.075),transparent 30%),radial-gradient(circle at 92% 18%,rgba(52,199,89,.06),transparent 26%),linear-gradient(180deg,#f8fafc 0%,#f3f6fa 100%)}
.recent-page{background:radial-gradient(circle at 8% 0%,rgba(255,107,0,.08),transparent 32%),radial-gradient(circle at 92% 18%,rgba(52,199,89,.07),transparent 28%),#f5f7fb}
body.dark-mode,html[data-theme="dark"] body{background:radial-gradient(circle at 8% 0%,rgba(255,107,0,.09),transparent 30%),radial-gradient(circle at 92% 18%,rgba(52,199,89,.035),transparent 26%),#111827}
body.dark-mode .about-page,body.dark-mode .categories-page,body.dark-mode .chat-page,body.dark-mode .offers-page,body.dark-mode .promotions-page,body.dark-mode .promotion-page,body.dark-mode .recent-page,body.dark-mode .saved-page,body.dark-mode .search-page,body.dark-mode .seller-hub,body.dark-mode .seller-profile-page,body.dark-mode .error-page,body.dark-mode .edit-profile-page,html[data-theme="dark"] .about-page,html[data-theme="dark"] .categories-page,html[data-theme="dark"] .chat-page,html[data-theme="dark"] .offers-page,html[data-theme="dark"] .promotions-page,html[data-theme="dark"] .promotion-page,html[data-theme="dark"] .recent-page,html[data-theme="dark"] .saved-page,html[data-theme="dark"] .search-page,html[data-theme="dark"] .seller-hub,html[data-theme="dark"] .seller-profile-page,html[data-theme="dark"] .error-page,html[data-theme="dark"] .edit-profile-page{background:radial-gradient(circle at 8% 0%,rgba(255,107,0,.09),transparent 32%),radial-gradient(circle at 92% 18%,rgba(52,199,89,.035),transparent 28%),#111827}
@media(max-width:700px){body{background:radial-gradient(circle at 5% 0%,rgba(255,107,0,.06),transparent 34%),radial-gradient(circle at 95% 20%,rgba(52,199,89,.045),transparent 30%),#f5f7fb;background-attachment:scroll}}


/* ---------- Shared profile cover grid ---------- */
.cover-design-grid {
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px
}


/* ---------- RESPONSIVE SAFETY LAYER ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }
*, *::before, *::after { box-sizing: border-box; }
@media (max-width: 768px) {
  .container, .container-fluid, .page-container { max-width: 100%; }
  input, select, textarea, button { max-width: 100%; }
  table { max-width: 100%; }
}

/* ============================================================
   APEMART — GLOBAL MOBILE PAGE ALIGNMENT / RESPONSIVE SAFETY
   Shared mobile-only corrections for every public page.
   Keeps desktop untouched and reuses existing page structures.
============================================================ */
@media (max-width: 768px){
  :root{--apemart-mobile-header-height:72px;--apemart-mobile-nav-height:76px;}

  html,body{width:100%;max-width:100%;overflow-x:hidden;}
  body{
    padding-top:var(--apemart-mobile-header-height)!important;
    padding-bottom:calc(var(--apemart-mobile-nav-height) + env(safe-area-inset-bottom))!important;
  }

  main,section,article,form{min-width:0;max-width:100%;}
  main{margin-top:0!important;}

  /* Prevent fixed-header compensation from becoming a second large gap. */
  .about-page,.categories-page,.chat-page,.offers-page,.promotions-page,
  .promotion-page,.recent-page,.saved-page,.search-page,.seller-hub,
  .seller-profile-page,.error-page,.edit-profile-page,.settings-page,
  .notifications-page,.my-ads-page,.my-promotions-page,.post-ad-page,
  .contact-section,.policy-section,.help-section,.edit-ad-section,
  .profile-section,.ad-details-container,.ad-professional-page,
  .collection-page{box-sizing:border-box;}

  /* Common inner-page top rhythm: header -> content, without desktop-sized gaps. */
  .about-hero{margin:18px auto 28px!important;padding:34px 18px!important;}
  .contact-section{margin:18px auto 36px!important;padding-left:14px!important;padding-right:14px!important;}
  .policy-section{margin:18px auto 36px!important;padding:28px 18px!important;}
  .help-section{margin:18px auto 36px!important;padding:28px 18px!important;}
  .categories-page{margin:14px auto 40px!important;padding-left:14px!important;padding-right:14px!important;}
  .edit-ad-section{margin:16px auto 36px!important;width:calc(100% - 28px)!important;}
  .chat-page{margin-top:12px!important;}
  .search-page{margin-top:0!important;padding-top:14px!important;}
  .page-header{margin-top:14px!important;}
  .hero{margin-top:14px!important;}
  .collection-page{padding-top:18px!important;}

  /* Keep account/settings pages close to the shared header. */
  .settings-shell,.edit-profile-shell{padding-top:14px!important;}
  .profile-section{padding-top:14px!important;}

  /* Never allow desktop-width controls to force horizontal scrolling. */
  .settings-shell,.edit-profile-shell,.profile-section,.ad-details-container,
  .ad-professional-page,.collection-page,.search-page,.categories-page,
  .chat-page,.messages-page,.seller-hub,.seller-profile-page,.recent-page,
  .saved-page,.offers-page,.promotions-page,.promotion-page{
    width:100%!important;max-width:100%!important;
  }

  .settings-shell,.edit-profile-shell{padding-left:14px!important;padding-right:14px!important;}

  img,video,iframe{max-width:100%;}
  input,select,textarea,button{max-width:100%;}
}

@media (max-width:390px){
  :root{--apemart-mobile-header-height:68px;}
  body{padding-top:68px!important;}
  .about-hero{margin-top:14px!important;}
  .contact-section,.policy-section,.help-section{margin-top:14px!important;}
  .categories-page,.edit-ad-section,.chat-page{margin-top:10px!important;}
  .collection-page,.search-page{padding-top:12px!important;}
}


/* Mobile interaction reliability — no desktop layout changes. */
@media (max-width:768px){
  a,button,input,select,textarea,label,[role="button"]{touch-action:manipulation;}
  button,a,label{ -webkit-tap-highlight-color: transparent; }
  input[type="file"][hidden]{display:none!important;}
  .mobile-bottom-nav{padding-bottom:calc(7px + env(safe-area-inset-bottom));}
  .chat-page .chat-input{padding-bottom:max(11px,env(safe-area-inset-bottom));}
  .chat-page .chat-tools .chat-tool{position:relative;z-index:2;}
  .chat-page .chat-input input,.chat-page .chat-input textarea,.chat-page .chat-input button{position:relative;z-index:2;}
}