/* =========================================
SHOP.CSS - Стили для страницы магазина
Структура:
1. Переменные и корневые стили
2. Сброс и базовые стили
3. Компоновка страницы
4. Навигация
5. Заголовок магазина
6. Футер
7. Форма и ввод
8. Модальное окно
9. Адаптивность
========================================= */

/* =========================================
1. ПЕРЕМЕННЫЕ И КОРНЕВЫЕ СТИЛИ
========================================= */
:root {
--primary: #f96918;
--primary-light: #ffb800;
--text: #1e1d1d;
--text-light: rgba(30, 29, 29, 0.55);
--bg-page: #f8f9fa;
--bg-card: #ffffff;
--shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.08);
--shadow-hover: 0 35px 90px rgba(0, 0, 0, 0.14);
--shadow-button: 0 27px 64px -16px rgba(255, 184, 0, 0.64);
--border-light: rgba(0, 0, 0, 0.08);
--transition-fast: 0.2s;
--transition-normal: 0.25s;
}

/* =========================================
2. СБРОС И БАЗОВЫЕ СТИЛИ
========================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html, body {
font-family: 'Montserrat', sans-serif;
color: var(--text);
line-height: 1.5;
}

.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 15px;
}

/* =========================================
3. КОМПОНОВКА СТРАНИЦЫ
========================================= */
.app {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}

/* =========================================
4. НАВИГАЦИЯ
========================================= */
.navbar {
background: rgba(255, 255, 255, 0.86);
backdrop-filter: blur(42px);
padding: 20px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
z-index: 10;
}

.navbar__container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.navbar__logo {
position: absolute;
left: 15px;
text-decoration: none;
color: inherit;
}

.logo {
display: flex;
align-items: center;
}

.logo__image {
width: 40px;
height: 37px;
}

.logo__name {
font-weight: 800;
font-style: italic;
font-size: 18px;
margin-left: 8px;
}

.logo__name span {
font-weight: 300;
margin-left: 4px;
}

.navbar__links {
display: flex;
align-items: center;
gap: 40px;
}

.navbar-link {
color: rgba(30, 29, 29, 0.45);
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: var(--transition-fast);
}

.navbar-link:hover,
.navbar-link.active {
color: #1e1d1d;
}

/* Мобильная навигация */
.mobile-header {
display: none;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-light);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
padding: 12px 0;
}

.mobile-header__container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
}

.menu-toggle {
background: none;
border: none;
font-size: 1.8rem;
color: var(--text);
cursor: pointer;
padding: 8px;
}

.mobile-logo {
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
}

.mobile-logo .logo__image {
width: 38px;
height: 38px;
}

.mobile-logo .logo__name {
font-size: 1.4rem;
font-weight: 800;
}

.mobile-right-placeholder {
width: 38px;
}

/* Мобильное меню */
.mobile-menu {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
z-index: 999;
align-items: center;
justify-content: center;
}

.mobile-menu.active {
display: flex;
}

.mobile-menu__content {
background: white;
border-radius: 16px;
padding: 2rem;
width: 85%;
max-width: 320px;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.mobile-menu__link {
display: block;
padding: 1.2rem;
font-size: 1.2rem;
font-weight: 600;
color: var(--text);
text-decoration: none;
border-bottom: 1px solid var(--border-light);
}

.mobile-menu__link:last-child {
border-bottom: none;
}

.mobile-menu__link:hover {
color: var(--primary);
}

@media (max-width: 568px) {
.mobile-header {
display: block;
}

.navbar {
display: none;
}
}

/* =========================================
5. ЗАГОЛОВОК МАГАЗИНА
========================================= */
.shop-page {
padding-bottom: 60px;
}

.shop-header {
margin-top: 180px;
text-align: center;
}

.shop-header__title {
font-size: 64px;
font-weight: 800;
text-transform: uppercase;
line-height: 78px;
}

.shop-header__title span {
font-weight: 300;
}

.shop-header__subtitle {
color: rgba(3, 3, 3, 0.45);
font-size: 24px;
max-width: 600px;
margin: 32px auto 0;
}

.shop-header__button {
width: 240px;
height: 78px;
background: linear-gradient(257.5deg, var(--primary) -7.46%, var(--primary-light) 74.36%);
box-shadow: var(--shadow-button);
border-radius: 8px;
border: none;
color: white;
font-size: 18px;
font-weight: 600;
cursor: pointer;
margin: 64px auto 0;
display: block;
transition: var(--transition-fast);
}

.shop-header__button:hover {
transform: scale(1.03);
}

/* =========================================
6. ФУТЕР
========================================= */
.footer {
background-color: rgba(255, 255, 255, 0.86);
backdrop-filter: blur(42px);
padding: 30px 0;
margin-top: 60px;
}

.footer__container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}

.footer__links {
display: flex;
align-items: center;
gap: 40px;
flex-wrap: wrap;
}

.footer__link {
color: rgba(30, 29, 29, 0.6);
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: var(--transition-fast);
}

.footer__link:hover {
color: var(--text);
}

/* =========================================
7. ФОРМА И ВВОД
========================================= */
.input {
margin-bottom: 15px;
}

.input__element {
font-family: 'Montserrat', sans-serif;
width: 100%;
padding: 18px;
font-size: 16px;
background-color: #f8f8f8;
border-radius: 8px;
border: 1px solid #eee;
font-weight: 400;
transition: var(--transition-fast);
}

.input__element:focus {
outline: none;
background-color: #ffffff;
border: 1px solid #ccc;
}

/* =========================================
8. МОДАЛЬНОЕ ОКНО
========================================= */
.modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(6px);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}

.modal.active {
display: flex;
}

.check__wrapper {
width: 480px;
background: var(--bg-card);
border-radius: 16px;
padding: 50px 40px;
position: relative;
text-align: center;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
}

.check__logo {
width: 80px;
height: 80px;
margin: 0 auto 25px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(
208deg,
rgba(252, 204, 1, 0.15),
rgba(255, 53, 0, 0.15)
);
}

.check__logo img {
width: 60%;
height: auto;
display: block;
}

.submit-button {
font-family: 'Montserrat', sans-serif;
width: 100%;
padding: 18px 20px;
font-size: 16px;
border: none;
border-radius: 12px;
background: linear-gradient(257.5deg, var(--primary) -7.46%, var(--primary-light) 74.36%);
box-shadow: 0 15px 40px rgba(255, 184, 0, 0.3);
color: #fff;
font-weight: 300;
cursor: pointer;
transition: var(--transition-fast);
}

.submit-button:hover {
transform: scale(1.02);
}

.modal-close-button {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
position: absolute;
top: 2rem;
right: 2rem;
background-color: #f8f8f8;
border: none;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: var(--transition-fast);
}

.modal-close-button:hover {
background-color: #ececec;
transform: scale(1.05);
}

/* =========================================
9. АДАПТИВНОСТЬ
========================================= */
@media (max-width: 1024px) {
.shop-header {
margin-top: 120px;
}

.shop-header__title {
font-size: 48px;
line-height: 58px;
}

.shop-header__subtitle {
font-size: 20px;
}
}

@media (max-width: 176px) {
.shop-header__title {
font-size: 36px;
line-height: 44px;
}

.shop-header__subtitle {
font-size: 16px;
margin-top: 16px;
}

.shop-header__button {
width: 100%;
height: 60px;
margin-top: 30px;
}

.footer__container {
flex-direction: column;
text-align: center;
}

.footer__links {
justify-content: center;
gap: 20px;
}

.check__wrapper {
width: 94%;
padding: 30px 20px;
}
}