/* styles.css - полный набор стилей для Elgage */

/* --- Общие стили --- */
:root {
  --bg: #f6f7fb;
  --muted: #6b7280;
  --accent: #0b5cff;
  --tg: #0088cc;
  --card-bg: #fff;
}


html,body{height:100%}


body{
  font-family: Inter, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  margin:0;
  padding:16px;
  background:var(--bg);
  color:#111;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
}



/* --- Header: структура верх/низ и десктоп-ряд --- */
.site-header{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px 14px;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  border-bottom: 1px solid #e6eef9;
  position:sticky;
  top:0;
  z-index:40;
}



.header-top {
  order:1;
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:12px;
}



.header-left{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
  flex:1 1 auto;
}


.logo{
  width:56px;
  height:56px;
  object-fit:contain;
  border-radius:8px;
  flex:0 0 56px;
}



/* site title */
.site-title{
  min-width:0;
  flex:1 1 auto;
}


.site-title .brand{
  font-weight:700;
  font-size:20px;
  line-height:1.05;
}


.site-title .tagline{
  font-size:14px;
  color:#4b5563;
  margin-top:6px;
  line-height:1.35;
  max-width:60ch;
  overflow-wrap:break-word;
}



/* --- Нижняя часть (поиск + действия) --- */
.header-bottom{
  order:2;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}



.header-center{
  order:2;
  flex:1 1 100%;
  display:flex;
  justify-content:center;
}


.header-center input[type="search"]{
  width:100%;
  max-width:760px;
  padding:10px 12px;
  border:1px solid #dbe9ff;
  border-radius:10px;
  background:#fff;
  font-size:15px;
  box-shadow:0 1px 0 rgba(16,24,40,0.02);
}



/* actions */
.header-actions{
  order:1;
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}


.header-status{
  padding:6px 8px;
  border-radius:6px;
  border:1px solid #dbe9ff;
  background:#fff;
  font-size:14px;
}


.header-actions .btn{
  padding:6px 8px;
  font-size:13px;
  border-radius:6px;
  background:#6b7280;
  color:#fff;
  border:0;
  cursor:pointer;
}


.telegram-link{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  background:var(--tg);
  color:#fff;
  border-radius:8px;
  text-decoration:none;
}


.telegram-link:hover{ background:#0077b3; }


.tg-icon{ width:20px; height:20px; display:inline-block; }


/* Collapsible tagline (compact by default) */
#tagline {
  display: block;
  max-height: 3.0em;           /* показываем ~2 строки (высота строки ≈1.5em) */
  overflow: hidden;
  position: relative;
  transition: max-height 0.28s ease;
  line-height: 1.35;
}



/* визуальный эффект: градиент на конце при усечённом тексте */
#tagline:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40%;
  height: 1.5em;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(246,247,251,0) 0%, rgba(246,247,251,1) 100%);
}



/* когда раскрыто — убираем ограничение и градиент */
#tagline.expanded {
  max-height: 200vh; /* очень большая высота — раскрыто */
}


#tagline.expanded:after { display: none; }



/* Стили кнопки (маленькие, нейтральные) — если нужно, можно удалить inline-style в HTML */
#toggle-tagline {
  background:#6b7280;
  color:#fff;
  border-radius:6px;
  border:0;
  cursor:pointer;
  padding:6px 8px;
}


}



/* --- Desktop layout: single row --- */
@media (min-width:640px){
  .site-header{ flex-direction:row; align-items:center; }


  .header-top{ order:1; width:auto; flex:0 0 auto; }


  .header-bottom{ order:2; width:auto; flex:1 1 auto; display:flex; align-items:center; justify-content:space-between; }


  .header-center{ order:2; flex:1 1 auto; justify-content:center; }


  .header-actions{ order:3; flex:0 0 auto; }



/* mobile tweaks */
@media (max-width:639px){
  .header-actions .tg-text{ display:none; }


  .header-status{ display:none; }

         /* optional */
  .header-actions .btn{ display:none; }

   /* optional */
}



/* accessibility helper */
.visually-hidden { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }



/* --- Контент (список/карты) --- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
  margin-top:8px;
}


.card{
  background:var(--card-bg);
  border-radius:8px;
  padding:10px;
  box-shadow:0 2px 6px rgba(20,30,60,0.06);
  display:flex;
  flex-direction:column;
  gap:8px;
}


.card .thumb{ width:100%; height:140px; object-fit:cover; border-radius:6px; background:#e9eef8; }


.title{ font-weight:600; font-size:15px; }


.price{ color:#0b6b2d; font-weight:700; }


.meta{ font-size:13px; color:var(--muted); }


.btn{ padding:8px; border-radius:6px; border:0; background:var(--accent); color:#fff; cursor:pointer; }



/* --- Modal --- */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; padding:20px; z-index:100; }


.modal-box{ background:#fff; border-radius:8px; max-width:900px; width:100%; max-height:90vh; overflow:auto; padding:16px; }


.close{ background:#eee; border-radius:50%; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }



/* --- Footer --- */
footer{
  text-align:center;
  margin-top:18px;
  color:var(--muted);
  font-size:14px;
  line-height:1.4;
}


footer .footer-contact{ margin-bottom:6px; }


footer .footer-contact a{ color:var(--accent); text-decoration:none; }


footer .footer-contact a:hover{ text-decoration:underline; }


footer .footer-copy{ font-size:13px; color:#52565f; }



/* --- small screen adjustments --- */
@media (max-width:520px){ .card .thumb{ height:120px }


@media (max-width:640px){
  #toggle-tagline { font-size:12px; padding:5px 7px; }


/* Force small logo size (override other rules if necessary) */
.site-header .logo {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  object-fit: cover !important;
  display: inline-block !important;
}

/* Modal top-level override */
#modal {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 2147483647 !important; /* very high */
  background: rgba(0,0,0,0.4) !important;
}
#modal .modal-box { z-index: 2147483648 !important; }