/* Подключение шрифта */
    @font-face {
        font-family: 'MyFont';
        src: url('../fonts/Montserrat-Black.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;

    }
*,
*::before,
*::after {
  box-sizing: border-box;
}
    /* Базовые стили */
    body {
        color: rgb(233,141,118);
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        font-family: MyFont;
    }

    /* Фон */
    .bg {
        background: rgb(233,141,118) url('../img/bg.png') repeat;
        min-height: 100vh;
        width: 100%;
    }

    /* Шапка */
    .shapka {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        background: rgb(250, 228, 185);
        display: flex;
        align-items: center;
        padding: 20px 30px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: background-color 0.3s ease;
    }

    .logo {
        height: 100px;
        width: 150px;
        position: absolute;
        left: 20px;
    }

    .menu-center {
        width: 100%;
        text-align: center;

    }

    .shapka_a {
        color: rgb(233, 141, 118);
        text-decoration: none;
font-size: 25px;
        margin: 0 50px;
        padding: 10px;
        border-radius: 10px;
        border: 2px solid rgb(233, 141, 118);
        display: inline-block;
        transition: 0.5s;
        font-family: MyFont;
    }

    .shapka_a:hover,
    .cart:hover {
        transform: scale(1.2);
        background: rgb(233,141,118);
        color: rgb(250, 228, 185);
        transition: 1s ease-in-out;
    }

    /* Адаптивность шапки */





    /* Баннер */
    .banner1 {
        width: 700px;

        text-align: center;
    }

    .banner {
        width: 100%;
        text-align: center;
    }

    /* Основной блок */
    .sections {
text-align:center;
        background: rgb(250, 228, 185);
  max-width: 1200px;   /* фиксированная ширина для центрирования */
  width: 100%;
  margin: 0 auto;      /* это и выравнивает по центру */
  padding: 140px 20px 20px;
  box-sizing: border-box;
    }

    /* Карточки блюд */
    .menu-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
        padding: 40px;
        transition: all 0.3s ease;
    }

    .dish-card {
        background: rgb(250, 228, 185);
        border: 4px solid rgb(233, 141, 118);
        border-radius: 20px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .dish-card:hover {
        transform: scale(1.1);
    }

    .dish-image,
    .dish-card img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 5px;
    }

    .dish-info {
        padding: 15px;
        font-size: 20px;
    }

    .dish-info h3 {
        margin-top: 0;
        color: rgb(233, 141, 118);
        font-family: MyFont;
    }

    .dish-description {
        color: rgb(233, 141, 118);
        font-size: 15px;
        margin: 10px 0;
        font-family: MyFont;
    }

    .price {
        font-weight: bold;
        color: rgb(233, 141, 118);
        font-size: 21px;
        font-family: MyFont;
        margin-top: auto;
        margin-bottom: 10px;
        text-align: center;
    }

    .add-to-cart {
        background: rgb(233, 141, 118);
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        font-family: MyFont;
        border-radius: 20px;
        cursor: pointer;
        transition: background 0.3s;
        margin-top: auto;
    }

    .add-to-cart:hover {
        background: rgb(210, 120, 100);
    }

    .no-dishes {
        text-align: center;
        color: #666;
        font-size: 18px;
        padding: 20px;
    }

    /* Адаптивность карточек */


    /* Модальное окно */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .modal-content {
        background: rgb(250, 228, 185);
        color: rgb(210, 120, 100);
        padding: 40px;
        border-radius: 10px;
        width: 90%;
        min-width: 700px;
        max-height: 90vh;
        overflow-y: auto;
        text-align: center;
        position: relative;
        box-sizing: border-box;
    }

    .modal-image {
        width: 100%;
        max-height: 300px;
        object-fit: contain;
        border-radius: 10px;
    }

    .close {
        position: absolute;
        right: 15px;
        top: 10px;
        font-size: 24px;
        cursor: pointer;
    }

    .hidden {
        display: none;
    }

    /* Фильтры */
    .filters-container {
        background: rgb(250, 228, 185);
        padding: 20px;
        position: sticky;
        top:100px;
        z-index: 900;
    }

    .search-container {
        text-align: center;
        margin-bottom: 20px;
    }

    .search-input {
        padding: 12px 20px;
        width: 80%;
        max-width: 500px;
        border: 3px solid rgb(233, 141, 118);
        border-radius: 30px;
        font-size: 16px;
        font-family: 'MyFont';
        outline: none;
    }

    .category-filters {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-bottom: 20px;
    }

    .filter-btn {
        padding: 10px 20px;
        background: rgb(250, 228, 185);
        border: 2px solid rgb(233, 141, 118);
        border-radius: 30px;
        color: rgb(233, 141, 118);
        cursor: pointer;
        font-family: 'MyFont';
        transition: all 0.3s;
    }

    .filter-btn:hover,
    .filter-btn.active {
        background: rgb(233, 141, 118);
        color: rgb(250, 228, 185);
    }

    @media (max-width: 768px) {
        .filters-container {
            top: 120px;
            padding: 10px;
        }
        .search-input {
            width: 90%;
            padding: 10px 15px;
        }
        .filter-btn {
            padding: 8px 15px;
            font-size: 14px;
        }
    }

    /* Соусы */
    #sauce-select-block {
        margin-top: 20px;
        text-align: left;
        padding: 10px 0;
        font-family: MyFont;
        color: rgb(233, 141, 118);
    }

    #sauce-select-block label {
        display: block;
        font-size: 18px;
        margin-bottom: 8px;
    }

    #sauce-select,
    .sauce-select {
        width: 100%;
        padding: 10px 15px;
        border: 2px solid rgb(233, 141, 118);
        border-radius: 10px;
        background: #fff9f3;
        font-family: MyFont;
        font-size: 16px;
        color: rgb(233, 141, 118);
        appearance: none;
        outline: none;
        transition: 0.3s ease;
    }

    #sauce-select:hover,
    #sauce-select:focus {
        border-color: rgb(210, 120, 100);
        box-shadow: 0 0 0 2px rgba(233, 141, 118, 0.3);
    }

    /* Корзина */
    .cart {
        width: 25px;
        height: 25px;
        padding: 20px;
        border: 2px solid rgb(233, 141, 118);
        border-radius: 30px;
        color: rgb(233, 141, 118);
        transition: 1s ease-in-out;
    }

    /* Прочее */
    .highlight {
        background-color: yellow;
        color: black;
    }

    .cart-container {
        max-width: 800px;
        margin: 20px auto;
        padding: 20px;

        border-radius: 8px;
    }

    #checkout-btn {
        background: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    .weight-select,
    .sauce-select {
      padding: 6px 10px;
      font-size: 16px;
      border-radius: 8px;
      border: 2px solid rgb(233, 141, 118);
      background-color: #fff;

      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M70 100L25 40h90z' fill='%23666'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 12px;
      cursor: pointer;
      width: 100%;
      box-sizing: border-box;
      margin-top: 5px;
        font-family: MyFont;
        color: rgb(233, 141, 118);
    }

    .weight-select:focus,
    .sauce-select:focus {
      outline: none;
      border-color: #444;
    }
    #modal-add-to-cart {
      background-color: #ff7043; /* яркий оранжевый */
      color: white;
      font-weight: bold;
      border: none;
      padding: 12px 20px;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.2s ease;
      font-size: 16px;
      width: 100%;
      margin-top: 16px;
    }

    #modal-add-to-cart:hover {
      background-color: #ff5722;
      transform: scale(1.02);
    }

    #modal-add-to-cart:active {
      background-color: #e64a19;
      transform: scale(0.98);
    }
   /* Универсальная мобильная адаптация */
@media (max-width: 600px) {
  body {
    font-size: 15px;
  }

  .shapka {
    flex-direction: column;
    padding: 10px 15px;
    align-items: flex-start;
  }

  .logo {
    height: 60px;
    width: 100px;
    margin-bottom: 10px;
    position: static;
  }

  .shapka_a {
    font-size: 18px;
    padding: 6px 10px;
    margin: 5px;
    display: inline-block;
  }

  .menu-center {
    width: 100%;
    text-align: center;
  }

  .banner1 {
    display: none; /* скрываем тяжелый баннер */
  }

.sections {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

  .menu-container {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }

  .dish-info {
    padding: 10px;
  }

  .dish-info h3 {
    font-size: 16px;
  }

  .dish-description {
    font-size: 13px;
  }

  .price {
    font-size: 15px;
  }

  .add-to-cart {
    font-size: 13px;
    padding: 6px 12px;
  }

  .filters-container {
    position: static;
    padding: 10px 5px;
    top: auto;
  }

  .search-input {
    width: 100%;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
  }

  .filter-btn {
    font-size: 12px;
    padding: 6px 10px;
    margin: 3px;
  }

  .category-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 10px;
  }

  .modal-content {
    width: 100%;
    min-width: unset;
    padding: 15px;
    box-sizing: border-box;
  }

  .modal-image {
    max-height: 180px;
  }

  #modal-add-to-cart {
    font-size: 14px;
    padding: 10px;
  }

  .weight-select,
  .sauce-select {
    font-size: 14px;
    padding: 8px;
  }
}