/*
 * ZPT.KZ Design System
 * Single source of truth for logo, typography, layout, and buttons.
 */

:root{
  --zpt-brand:#ff3b30;
  --zpt-brand-hover:#e6342a;
  --zpt-brand-shadow:rgba(255,59,48,.18);
  --zpt-gray-950:#030712;
  --zpt-gray-900:#111827;
  --zpt-gray-600:#4b5563;
  --zpt-gray-500:#6b7280;
  --zpt-border:#ececec;
  --zpt-container:1200px;
  --zpt-radius:12px;
  --zpt-radius-lg:12px;
  --zpt-header-pad-y:12px;
  --zpt-header-pad-x:16px;
  --zpt-logo-h:24px;
  --zpt-logo-h-mobile:20px;
  --zpt-section-y:32px;
}

/* ---- Links: no underlines on brand / UI chrome ---- */
a.no-underline,
.site-header a,
.site-logo-link,
.market-brand,
.topbar .brand,
.market-logo,
.header .logo{
  text-decoration:none !important;
}

.site-header a:hover,
.site-logo-link:hover,
.market-brand:hover,
.topbar .brand:hover{
  text-decoration:none !important;
}

/* ---- Logo (identical on every page) ---- */
.site-logo-link,
a.site-logo-link.market-brand,
.topbar .brand,
.market-logo,
.market-brand.logo{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  font-size:0;
  line-height:0;
  text-decoration:none;
}

.site-logo-link img,
.market-brand img,
.topbar .brand img,
.market-logo img,
.market-header-logo img,
.logo img{
  height:var(--zpt-logo-h);
  width:auto;
  max-width:none;
  object-fit:contain;
  display:block;
}

.market-brand-subtitle{
  display:block;
  margin-top:2px;
  font-size:10px;
  line-height:1.2;
  font-weight:500;
  color:var(--zpt-gray-500);
  letter-spacing:0;
}

.market-header-logo.site-logo-link--with-subtitle,
.market-header-logo:has(.market-brand-subtitle){
  flex-direction:column;
  align-items:flex-start;
}

/* Market header: logo column + mobile-only seller CTA */
.market-brand-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex-shrink:0;
  min-width:0;
  gap:0;
}

@media (min-width:768px){
  .market-mobile-business-btn{
    display:none !important;
  }
}

/* ---- Site header shell ---- */
.site-header,
.market-topbar.header{
  background:#fff;
  border-bottom:1px solid var(--zpt-border);
}

.site-header .site-container,
.site-header .topbar-inner,
.market-topbar-inner.site-container{
  max-width:var(--zpt-container);
  margin-left:auto;
  margin-right:auto;
  padding:var(--zpt-header-pad-y) var(--zpt-header-pad-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.market-topbar{
  position:sticky;
  top:0;
  z-index:100;
}

/* ---- Layout containers ---- */
.site-container,
.container.site-container{
  max-width:var(--zpt-container);
  margin-left:auto;
  margin-right:auto;
  padding-left:16px;
  padding-right:16px;
  box-sizing:border-box;
}

.site-container--wide{
  max-width:72rem;
}

.site-container--narrow{
  max-width:28rem;
}

.ds-section{
  padding:var(--zpt-section-y) 0;
}

/* ---- Typography (compact corporate scale) ---- */
.ds-h1,
h1.ds-h1{
  margin:0 0 .75rem;
  font-size:1.5rem;
  line-height:1.25;
  font-weight:800;
  color:var(--zpt-gray-950);
  letter-spacing:-.025em;
}

.ds-h2,
h2.ds-h2{
  margin:0 0 1rem;
  font-size:1.125rem;
  line-height:1.3;
  font-weight:800;
  color:var(--zpt-gray-900);
  letter-spacing:-.015em;
}

.ds-h3,
h3.ds-h3{
  margin:0 0 .375rem;
  font-size:1rem;
  line-height:1.4;
  font-weight:700;
  color:var(--zpt-gray-900);
}

.ds-page-title,
h1.ds-page-title{
  margin:0 0 .75rem;
  font-size:1.25rem;
  line-height:1.3;
  font-weight:800;
  color:var(--zpt-gray-900);
}

.ds-body,
p.ds-body{
  margin:0;
  font-size:.75rem;
  line-height:1.5;
  color:var(--zpt-gray-600);
}

@media (min-width:768px){
  .ds-h1,
  h1.ds-h1{
    font-size:2.25rem;
    line-height:1.15;
  }

  .ds-h2,
  h2.ds-h2{
    font-size:1.5rem;
    line-height:1.25;
  }

  .ds-h3,
  h3.ds-h3{
    font-size:1.125rem;
  }

  .ds-page-title,
  h1.ds-page-title{
    font-size:1.5rem;
  }

  .ds-body,
  p.ds-body{
    font-size:.875rem;
    line-height:1.625;
  }
}

/* ---- Buttons ---- */
.btn-primary,
a.btn-primary,
button.btn-primary,
.seller-landing-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  padding:10px 24px;
  border:none;
  border-radius:var(--zpt-radius-lg);
  background:var(--zpt-brand);
  color:#fff !important;
  font-size:.875rem;
  font-weight:600;
  font-family:inherit;
  text-decoration:none !important;
  cursor:pointer;
  box-shadow:0 4px 12px var(--zpt-brand-shadow);
  transition:background .15s ease, box-shadow .15s ease;
  box-sizing:border-box;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.seller-landing-btn-primary:hover{
  background:var(--zpt-brand-hover);
  color:#fff !important;
  text-decoration:none !important;
  transform:none;
}

.btn-secondary,
a.btn-secondary,
button.btn-secondary,
.seller-landing-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  padding:10px 24px;
  border:1px solid #e5e7eb;
  border-radius:var(--zpt-radius-lg);
  background:#fff;
  color:var(--zpt-gray-900) !important;
  font-size:.875rem;
  font-weight:600;
  font-family:inherit;
  text-decoration:none !important;
  cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  transition:background .15s ease, border-color .15s ease;
  box-sizing:border-box;
}

.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover,
.seller-landing-btn-secondary:hover{
  background:#f9fafb;
  color:var(--zpt-gray-900) !important;
  text-decoration:none !important;
}

.btn.red,
.btn.danger{
  background:var(--zpt-brand);
  border-color:var(--zpt-brand);
  color:#fff;
}

.btn.red:hover,
.btn.danger:hover{
  background:var(--zpt-brand-hover);
  border-color:var(--zpt-brand-hover);
}

.seller-cabinet-btn{
  background-color:var(--zpt-brand) !important;
}

.seller-cabinet-btn:hover{
  background-color:var(--zpt-brand-hover) !important;
}

/* ---- Mobile logo ---- */
@media (max-width:767px){
  .site-header .site-container,
  .site-header .topbar-inner,
  .market-topbar-inner{
    padding:8px 10px;
  }

  .site-logo-link img,
  .market-brand img,
  .topbar .brand img,
  .market-logo img,
  .logo img{
    height:var(--zpt-logo-h-mobile) !important;
    width:auto !important;
    max-width:100%;
  }

  .market-brand.site-logo-link--with-subtitle,
  .market-header-logo:has(.market-brand-subtitle),
  .market-brand-block{
    max-width:48%;
    min-width:0;
  }

  .market-brand-block .site-logo-link,
  .market-brand-block .market-header-logo{
    max-width:100%;
  }
}