@charset "UTF-8";

/* ============================================ */
/* 1. ПЕРЕМЕННЫЕ И БАЗА                         */
/* ============================================ */
:root {
  --blue-dark: #01254c;
  --green: #76ca3c;
  --violet: #775ea0;
  --white: #ffffff;
  --panel-bg: #eef4fb;
  --line-soft: #b9c6d8;
  --text-muted: #8da2bc;
  --link: #2f7ece;
  --link-hover: #775ea0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  width: 100%;
  min-width: 320px;
  margin: 0;
  position: relative;
  overflow-x: hidden;
  color: var(--blue-dark);
  background-color: var(--blue-dark);
  font-family: "Franklin Gothic Medium", "Roboto", "Arial Narrow", Arial, sans-serif;
  background-image:
    linear-gradient(118deg, #9be768 0%, #7fd24b 19%, #4ca56d 44%, #1f6c79 66%, #355b8d 83%, #775ea0 100%),
    radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.12), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(1, 37, 76, 0.28), transparent 34%);
  background-size: cover, auto, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, left top, right bottom;
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("../img/splash-footer.svg") center bottom / 1750px no-repeat;
  opacity: 0.86;
  z-index: 0;
}

@media (min-resolution: 2dppx) {
  body::before {
    background-image: url("../img/splash-footer@2x.svg");
  }
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 126, 206, 0.5);
  transition: color 0.2s, border-bottom-color 0.2s;
}

a:hover {
  color: var(--link-hover);
  border-bottom-color: rgba(119, 94, 160, 0.5);
}

/* ============================================ */
/* 2. ЛЕЙАУТ И КОНТЕЙНЕРЫ                       */
/* ============================================ */
.content {
  width: 100%;
  min-height: 100%;
  position: relative;
  z-index: 1;
  font-weight: 300;
  font-size: 11pt;
}

.content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 430px;
  pointer-events: none;
  background: url("../img/splash-head.svg") top center / 2750px no-repeat;
  opacity: 0.9;
  z-index: -1;
}

.head {
  width: 1200px;
  min-height: 180px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.logo {
  margin: 53px 0 60px;
  position: relative;
  padding: 10px 14px 10px 10px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.68) 72%,
    rgba(255, 255, 255, 0.12) 100%
  );
  box-shadow: 0 6px 18px rgba(1, 37, 76, 0.18);
}

.logo img {
  display: block;
  width: 285px;
  height: 63px;
}

.head-contacts {
  margin-top: 35px;
  color: var(--white);
  display: flex;
  gap: 15px;
  font-size: 11pt;
  line-height: 1.7;
  text-shadow: 0 1px 1px rgba(1, 37, 76, 0.25);
}

.head-contact {
  width: 185px;
}

.head-contact strong {
  font-weight: 700;
}

.head-contacts a {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.55);
}

.head-contacts a:hover {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.95);
}

.profitex-list {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 19%),
    var(--panel-bg);
  padding: 100px 115px;
}

.profitex-list::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("../img/splash-page.svg") top center / 1200px no-repeat;
  opacity: 0.93;
  z-index: 0;
}

.page-text {
  font-weight: 300;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

/* ============================================ */
/* 3. ТИПОГРАФИКА                               */
/* ============================================ */
.page-h1 {
  margin: 0;
  color: var(--blue-dark);
  font-size: 26pt;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
}

.page-h3 {
  margin: 0;
  padding: 90px 0 0;
  color: var(--blue-dark);
  font-size: 26pt;
  font-weight: 500;
  line-height: 1.4;
}

.price-h3 {
  padding: 15px 0 25px;
  font-size: 14pt;
}

strong, b {
  font-weight: 500;
}

/* ============================================ */
/* 4. ТАБЛИЦЫ DESKTOP                           */
/* ============================================ */
.table-wrap, .table-wrapper {
  width: 100%;
}

.table {
  width: 970px;
  table-layout: fixed;
  border: none;
  border-collapse: collapse;
  font-size: 11pt;
  font-weight: 300;
}

.table thead th {
  padding: 40px 0 8px;
  text-align: left;
  font-weight: 300;
  border-top: none;
}

.table tbody td {
  padding: 14px 0;
  border-top: 0.5px solid var(--line-soft);
  border-bottom: 0.5px solid var(--line-soft);
  vertical-align: top;
}

/* Специфичные отступы только для таблицы АЗС */
.table-wrapper .table thead th:nth-child(n + 2),
.table-wrapper .table tbody td:nth-child(n + 2) {
  padding-left: 16px;
}

.table-wrapper .table tbody td:nth-child(3),
.table-wrapper .table tbody td:nth-child(4) {
  white-space: nowrap;
}

.table-city {
  font-size: 18pt;
  font-weight: 500;
}

.table-types {
  color: var(--text-muted);
}

.snoska {
  margin-top: 40px;
  color: var(--text-muted);
}

.work-y { color: var(--green); }
.work-n { color: var(--violet); }

#azs-table-body td {
  border-top: none !important;
  border-bottom: none !important;
}

/* ============================================ */
/* 5. ДОКУМЕНТЫ И КОНТАКТЫ                      */
/* ============================================ */
.documents {
  display: inline-block;
  width: 270px;
  margin: 0 30px 0 0;
  line-height: 1.8;
  vertical-align: top;
}

.documents img {
  margin-top: 30px;
}

.file {
  color: var(--text-muted);
}

/* Блоки с контактами */
.contacts-row {
  display: flex;
  justify-content: flex-start;
  gap: 30px;
  margin-top: 20px;
}

.page-contact {
  width: 270px;
  font-size: 18pt;
  line-height: 180%;
}

.page-contact-address {
  width: auto;
  max-width: 400px;
}

.page-contact p {
  margin: 0;
}

.footer {
  width: 1200px;
  margin: 90px auto;
  padding: 0;
  position: relative;
  z-index: 1;
  color: var(--white);
  text-align: center;
  font-family: "Franklin Gothic Medium", "Roboto", Arial, sans-serif;
  font-size: 26pt;
  font-weight: 300;
}

/* ============================================ */
/* 6. АДАПТИВ И МОБИЛЬНАЯ ВЕРСИЯ                */
/* ============================================ */
@media (max-width: 1230px) {
  .head, .profitex-list, .footer { width: calc(100% - 30px); }
  .profitex-list { padding: 85px 40px; }
  .table { width: 100%; }
}

@media (max-width: 1024px) {
  body::before { opacity: 0.7; }
  .content::before {
    height: 300px;
    background-size: 1780px;
    opacity: 0.82;
  }

  .head {
    min-height: 0;
    padding-top: 30px;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .logo { margin: 0 0 26px; }
  
  .head-contacts {
    margin-top: 0;
    flex-direction: column;
    gap: 0;
  }
  
  .head-contact { width: auto; margin: 15px 0; }

  .profitex-list {
    padding: 30px 15px 40px;
    width: 95% !important;
    margin: 20px auto !important;
    background-image: none !important;
    background-color: var(--panel-bg) !important;
  }

  .page-h1 { font-size: 20pt; text-align: center; }
  .page-h3 { padding-top: 40px; font-size: 19pt; text-align: center; }
  .price-h3 { font-size: 12pt; text-align: center; margin-bottom: 15px; }

  /* Делаем сноску контрастной на телефонах */
  .snoska {
    color: var(--blue-dark);
    font-weight: 400;
    font-size: 14px;
    text-align: center;
  }

  /* === ПРЕЙСКУРАНТ: горизонтальный скролл === */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 25px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(1, 37, 76, 0.05);
    padding: 10px;
  }
  
  .table-wrap .table {
    width: 700px !important; /* Удерживаем ширину, чтобы колонки не слипались */
  }
  
  .table-wrap .table td {
    padding: 12px 10px;
  }

  /* === АЗС: превращаем только их в карточки === */
  .table-wrapper { overflow: visible !important; }
  .table-wrapper .table thead { display: none; }
  .table-wrapper .table, 
  .table-wrapper .table tbody, 
  .table-wrapper .table tr, 
  .table-wrapper .table td { 
    display: block; 
    width: 100% !important; 
    box-sizing: border-box; 
  }

  .table-wrapper .table tr:not(.city-header-row) {
    background: var(--white);
    border-radius: 12px;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: 0 6px 15px rgba(1, 37, 76, 0.08);
    border: 1px solid var(--panel-bg);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .table-wrapper .table tr.city-header-row {
    background: transparent; 
    border: none; 
    box-shadow: none; 
    padding: 0; 
    margin-bottom: 10px;
  }
  
  th.table-city { 
    background: var(--blue-dark); 
    color: var(--white); 
    border-radius: 8px; 
    text-align: center !important; 
    padding: 12px !important; 
    display: block;
  }

  .table-wrapper .table td {
    border: none !important;
    padding: 10px 0 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
  }
  
  .card-address { 
    flex-direction: column; 
    align-items: flex-start !important; 
    text-align: left !important; 
    border-bottom: 1px solid var(--line-soft) !important; 
    padding-bottom: 15px !important; 
    margin-bottom: 10px; 
  }
  
  .card-schedule::before { content: "Режим работы:"; color: var(--text-muted); font-size: 14px; }
  .card-state::before { content: "Статус АЗС:"; color: var(--text-muted); font-size: 14px; }

  .nested-fuels, .nested-fuels tbody, .nested-fuels tr, .nested-fuels td { 
    display: block; width: 100% !important; 
  }
  
  .nested-fuels tr { 
    background: var(--panel-bg); 
    box-shadow: none; 
    border: none; 
    margin-bottom: 8px; 
    padding: 12px; 
    border-radius: 8px; 
  }
  
  .nested-fuels td { padding: 4px 0 !important; }
  .nested-fuels td:nth-child(1) { font-weight: 500; font-size: 16px; color: var(--blue-dark); }
  .nested-fuels td:nth-child(2) { justify-content: flex-start; }
  .nested-fuels td:nth-child(3)::before { content: "Доступно заправок*:"; color: var(--text-muted); font-size: 14px; }

  /* Контакты и документы */
  .documents { display: block; width: 100%; margin: 15px 0 !important; text-align: center; }
  
  .contacts-row {
    flex-direction: column;
    gap: 0;
    text-align: center;
  }
  
  .page-contact {
    display: block;
    width: 100% !important;
    margin: 15px 0 !important;
  }

  .footer { margin: 40px auto; font-size: 16pt; }
}

@media (max-width: 560px) {
  body::before { opacity: 0.58; }
  .logo img { width: 250px; height: auto; }
  .logo { padding: 8px 10px 8px 8px; }
  .page-h1 { font-size: 16pt; }
  .page-h3 { font-size: 15pt; }
}