/* ======================================================
   VARIABLES
   ====================================================== */
:root {
  /* Colors */
  --primary-color: #e63946;
  --secondary-color: #bb2d3b;
  --dark-color: #111;
  --light-color: #f8f9fa;
  --text-color: #212529;
  --text-muted: #888;
  --footer-text: #ccc;
  --price-color: #28a745;
  --success-color: #198754;
  --error-color: #dc3545;

  /* Backgrounds */
  --background-color: var(--light-color);
  --header-bg: var(--dark-color);
  --footer-bg: var(--dark-color);

  /* Buttons */
  --button-bg: #0d6efd;
  --button-hover-bg: var(--secondary-color);
  --button-border-color: var(--primary-color);
  --button-border-hover: var(--secondary-color);

  /* Typography */
  --font-family: 'Segoe UI', sans-serif;
  --font-size-base: 1rem;
  --font-size-small: 0.9rem;
  --font-size-large: 1.8rem;

  /* Sizes */
  --navbar-brand-size: var(--font-size-large);
  --icon-size: 2rem;
  --carousel-btn-size: 18px;
  --carousel-thumb-width: 150px;
  --form-width: 420px;
  --form-padding: 2rem;
  --form-radius: 10px;
  --input-padding-right: 2.5rem;

  /* Scrollbar */
  --scrollbar-thumb: #ccc;

  /* Gallery */
  --thumb-size-desktop: 84px;
  --thumb-size-mobile: 84px;
}


/* выравнивание бейджа корзины */
#cart-badge-top,
#cart-badge-top-desktop { display: inline-block; }
#cart-badge-top.d-none,
#cart-badge-top-desktop.d-none { display: none !important; }
/* ======================================================
   LAYOUT / GLOBAL
   ====================================================== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family);
  background: var(--background-color);
}

main { flex: 1 0 auto; }
#footer-placeholder { flex-shrink: 0; }

/* ======================================================
   HEADER
   ====================================================== */
.site-header .navbar { background: var(--header-bg); }

.site-header .navbar .container,
.site-header .navbar .container-lg,
.site-header .navbar .container-xl,
.site-header .navbar .container-xxl {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
}

.site-header .navbar-brand {
  font-size: var(--navbar-brand-size);
  line-height: 1;
}

.site-header .navbar-nav .nav-link {
  padding: 0 .75rem;
  white-space: nowrap;
}

@supports (gap:.5rem) {
  .site-header .navbar-nav { gap: .5rem; }
}

@media (min-width: 1400px) {
  .site-header .navbar { padding-top: .5rem; padding-bottom: .5rem; }
}

.navbar.navbar-dark .navbar-nav .nav-link { color:#adb5bd; }
.navbar.navbar-dark .navbar-nav .nav-link:hover,
.navbar.navbar-dark .navbar-nav .nav-link:focus,
.navbar.navbar-dark .navbar-nav .nav-link.active { color:#fff; }

@media (max-width: 991.98px) {
  .navbar #cart-link-top { padding:.35rem .5rem; }
  .navbar #cart-badge-top { font-size:.65rem; line-height:1; }
}

/* Sticky header only on mobile */
@media (max-width: 991px) {
  #header-placeholder {
    position: sticky;
    top: 0;
    z-index: 1050;
    background: #1a1a1a;
    padding-top: env(safe-area-inset-top);
  }
  .site-header .navbar.flex-column > .container-fluid {
    padding-top: .35rem;
    padding-bottom: .35rem;
  }
  #user-block .nav-link {
    padding: .25rem .5rem;
    text-decoration: none;
  }
}

/* ======================================================
   MOBILE COLLAPSE MENU (BURGER)
   ====================================================== */
@media (max-width: 991.98px) {
  .mobile-menu {
    background: #1e1e1e;
    border-radius: 12px;
    margin: .5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,.3);
    overflow: hidden;
  }
  .mobile-nav { padding: .25rem; }
  .mobile-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 1rem;
    color: #e9ecef;
  }
  .mobile-nav .nav-link:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
    text-decoration: none;
  }
  .mobile-nav .menu-section {
    margin: .4rem 1rem .25rem;
    font-size: .75rem;
    color: #9aa4ad;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .mobile-nav .nav-link.text-danger { color: #ff6b6b !important; }
  .mobile-nav .nav-link.text-danger:hover { background: rgba(255,107,107,.12); }
}

/* ======================================================
   COOKIE BANNER & MODAL
   ====================================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--dark-color);
  color: var(--footer-text);
  padding: 1rem;
  z-index: 9999;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
  font-size: var(--font-size-small);
}
.cookie-banner a { color: var(--primary-color); text-decoration: underline; }

.cookie-banner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
}

.cookie-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}

.cookie-buttons button {
  padding: .4rem .9rem;
  border: 1px solid var(--button-border-color);
  background: var(--button-bg);
  color: #fff;
  border-radius: 5px;
  font-size: .9rem;
  transition: background .2s, border-color .2s;
  cursor: pointer;
}
.cookie-buttons button:hover {
  background: var(--button-hover-bg);
  border-color: var(--button-border-hover);
}

.cookie-settings-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}
.cookie-settings-content {
  background: #fff;
  color: var(--text-color);
  padding: 2rem;
  border-radius: 10px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 0 10px rgba(0,0,0,.3);
  text-align: left;
  position: relative;
}
.cookie-settings-content h3 { margin-bottom: 1rem; font-size: 1.2rem; }
.cookie-settings-content label { display: block; margin-bottom: .5rem; font-size: .95rem; }
.cookie-settings-content .cookie-buttons {
  text-align: right;
  margin-top: 1rem;
  justify-content: flex-end;
}
.cookie-settings-content .cookie-buttons button {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.cookie-settings-content .cookie-buttons button:hover {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

/* ======================================================
   PRODUCT GALLERY
   ====================================================== */
.product-gallery { display: flex; gap: 14px; }

.pg-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: calc(var(--thumb-size-desktop) + 8px);
}

.pg-thumb {
  width: var(--thumb-size-desktop);
  height: var(--thumb-size-desktop);
  border-radius: 10px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  background: #f3f3f3;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.pg-thumb:hover { transform: translateY(-1px) scale(1.02); }
.pg-thumb.is-active { border-color: var(--button-bg); box-shadow: 0 0 0 2px rgba(13,110,253,.15); }
.pg-thumb:focus { outline: 2px solid var(--button-bg); outline-offset: 2px; }

.pg-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}
.pg-main img {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
}

/* Thumbs bottom on mobile */
@media (max-width: 768px) {
  .product-gallery { flex-direction: column; align-items: center; }
  .pg-thumbs {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    width: 100%;
    padding-bottom: 6px;
    margin-top: 10px;
    scrollbar-gutter: stable;
  }
  .pg-thumb {
    width: var(--thumb-size-mobile);
    height: var(--thumb-size-mobile);
    flex: 0 0 auto;
  }
}

/* horizontal scrollbar styling */
.pg-thumbs::-webkit-scrollbar { height: 8px; }
.pg-thumbs::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 20px; }
.pg-thumbs { scrollbar-color: var(--scrollbar-thumb) transparent; scrollbar-width: thin; }

/* ======================================================
   PRODUCT CARD (MOBILE-FIRST)
   ====================================================== */
.product-card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(17,17,17,.06);
  overflow: hidden;
}
.pc-head { padding: 14px 16px 0; }
.pc-title { font-size: 1.05rem; font-weight: 600; line-height: 1.25; margin: 0; }
.pc-meta { font-size: .85rem; color: var(--text-muted); }

.badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.badge-pill {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .78rem;
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}
.badge-pill--renewed  { background:#eef7ff; color:#0b5ed7; border-color:#dbeafe; }
.badge-pill--shipping { background:#ecfdf5; color:#198754; border-color:#d1fae5; }
.badge-pill--warranty { background:#fff7ed; color:#b45309; border-color:#ffedd5; }

.pc-price { color: var(--price-color); font-weight: 700; font-size: 1.4rem; margin-top: 10px; }

.pc-gallery { padding: 12px 12px 4px; background: #fafafa; }
.pc-gallery .pg-main img { border-radius: 12px; }
.pc-gallery .pg-thumbs { margin-top: 10px; }

.pc-benefits { padding: 12px 16px 4px; }
.pc-benefits ul { padding-left: 1.1rem; margin: .35rem 0 0; }
.pc-benefits li { margin-bottom: .3rem; font-size: .95rem; }

.pc-desc { padding: 12px 16px 16px; color: #374151; font-size: .95rem; }

/* Sticky CTA on mobile only */
.sticky-cta {
  position: sticky;
  bottom: 0;
  background: #ffffffcc;
  backdrop-filter: saturate(120%) blur(6px);
  border-top: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
}
.sticky-cta .price { color: var(--price-color); font-weight: 800; font-size: 1.2rem; }
.sticky-cta .btn { padding: .6rem 1rem; border-radius: 10px; }

@media (min-width: 769px) {
  .product-card { box-shadow: none; border-radius: 0; overflow: visible; }
  .sticky-cta { display: none; }
}

/* Snap scrolling for thumbs on mobile */
.pg-thumbs { scroll-snap-type: x mandatory; }
.pg-thumb  { scroll-snap-align: start; }

/* Compact breadcrumb on mobile */
@media (max-width: 576px) {
  .breadcrumb { font-size: .9rem; margin-bottom: .5rem; }
}

/* ======================================================
   FORMS (REGISTER / LOGIN)
   ====================================================== */
.register-card {
  max-width: 400px;
  width: 100%;
  padding: 25px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.login-card { max-width: 400px; width: 100%; }

.form-control:focus { box-shadow: none; border-color: #dc3545; }

.btn-primary { background-color: #dc3545; border-color: #dc3545; }
.btn-primary:hover { background-color: #bb2d3b; border-color: #a71d2a; }

.toggle-eye {
  position: absolute;
  top: 70%;
  right: 15px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
}
.toggle-eye:hover { color: #000; }

/* ======================================================
   INVOICE / PRINT
   ====================================================== */
.invoice-table th,
.invoice-table td { vertical-align: middle; }
.address-box p { margin-bottom: .25rem; }

.invoice-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
  margin-top:1.5rem;
}
@media (max-width:576px){
  .invoice-actions a,
  .invoice-actions button { width:100%; text-align:center; }
}

/* Generic print rules */
@media print {
  .no-print, .d-print-none,
  .btn, .navbar, #header-placeholder, footer, .cookie-banner {
    display: none !important;
  }
  body { background: #fff !important; }
  .card { box-shadow: none !important; border: none !important; }
  .invoice-container { padding: 0 !important; }
}

/* ======================================================
   UTILITIES / EFFECTS
   ====================================================== */
.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn .4s forwards;
}
@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
}



/* --- Плашки оплаты с отражением --- */
.pay-badges img{
  display:block;
  width:96px; height:auto; border-radius:10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  background:#fff;
}

/* Контейнер для отражения */
.badge-reflect{
  position:relative;
}

/* Отражение снизу через псевдоэлемент */
.badge-reflect::after{
  content:"";
  position:absolute; left:0; right:0; top:100%;
  height:60%;
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% 100%;
  opacity:.35;             /* сила отражения */
  transform: scaleY(-1);
  pointer-events:none;
  filter: blur(0.2px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,0));
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,0));
}

/* Проставляем картинку в mask через inline style из JS (ниже) */
.badge-reflect[data-src]::after{
  background-image: attr(data-src url);
}

.toc a {
  display:inline-block;
  padding:.5rem 1rem;
  border-radius:50rem;
  font-size:.9rem;
  font-weight:500;
  background:#f8f9fa; /* светло-серый фон */
  border:1px solid #dee2e6;
  color:#212529;
  transition:.2s all;
}

.toc a:hover {
  background:#0d6efd;
  border-color:#0d6efd;
  color:#fff;
  text-decoration:none;
}

/* Cookie banner / modal (как раньше) */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:1050;
  background: rgba(33,37,41,.98); color:#fff; padding:.85rem 1rem; text-align:center;
  border-top:1px solid rgba(255,255,255,.1);
}
.cookie-modal{ position:fixed; inset:0; z-index:1060; display:grid; place-items:center; background:rgba(0,0,0,.45); }
.cookie-modal-content{ width:min(520px,92vw); }

.suggest-box{position:absolute;z-index:1051;left:0;right:0;top:100%;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;box-shadow:0 6px 18px rgba(0,0,0,.12);margin-top:.25rem;max-height:280px;overflow:auto}
.suggest-item{padding:.5rem .75rem;cursor:pointer}
.suggest-item:hover,.suggest-item.active{background:#f2f4f7}
.suggest-empty{padding:.5rem .75rem;color:#6c757d}
.suggest-highlight{font-weight:600}

/* Сетка карточек на странице категории */
#prodResults .card-img-top.product-img{
  height:160px !important;
  width:100%;
  object-fit:cover;
}
#prodResults .card-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

    .tile {
      background:#fff;
      border:1px solid rgba(0,0,0,.06);
      border-radius:16px;
      box-shadow:0 4px 14px rgba(0,0,0,.06);
      transition:.25s transform,.25s box-shadow,.25s border-color
    }
    .tile:hover {
      transform:translateY(-2px);
      box-shadow:0 8px 22px rgba(0,0,0,.08);
      border-color:rgba(0,0,0,.12)
    }
    .tile-icon {
      width:56px;height:56px;
      border-radius:14px;
      background:linear-gradient(135deg,#eef2ff,#f8fbff);
      display:flex;align-items:center;justify-content:center;
      margin-bottom:.5rem
    }
    .tile-icon .fa {font-size:22px;color:#0d6efd}

    .chip {
      display:inline-flex;align-items:center;gap:.5rem;
      padding:.5rem .75rem;
      border:1px solid rgba(0,0,0,.08);
      border-radius:999px;
      background:#fff;
      box-shadow:0 2px 8px rgba(0,0,0,.04);
      text-decoration:none;
      color:#212529;
      transition:.2s transform,.2s box-shadow,.2s border-color
    }
    .chip:hover {
      transform:translateY(-1px);
      box-shadow:0 6px 16px rgba(0,0,0,.08);
      border-color:rgba(0,0,0,.12);
      color:#0d6efd
    }
    .chip i {color:#0d6efd}
    
        .callout {
      border:1px solid rgba(0,0,0,.08);
      border-left:4px solid #0d6efd;
      border-radius:12px;
      background:#fff;
      box-shadow:0 4px 16px rgba(0,0,0,.04);
    }
    .toc a { text-decoration: none; }
    .toc a:hover { text-decoration: underline; }
    .badge-chip{border:1px solid rgba(0,0,0,.08);background:#fff;border-radius:999px}
    .muted{color:#6c757d}
    .rule-list>li{margin-bottom:.5rem}
    .section-gap{margin-top:2rem}
    .last-upd{font-size:.9rem;color:#6c757d}
    img{max-width:100%;height:auto}
    /* Стили для сообщений восстановления пароля */
.alert-success {
    background: linear-gradient(135deg, #d1edff 0%, #e7f5ff 100%);
    border: 1px solid #0d6efd;
    border-left: 4px solid #0d6efd;
    color: #055160;
}

.alert-danger {
    background: linear-gradient(135deg, #ffe6e6 0%, #fff0f0 100%);
    border: 1px solid #dc3545;
    border-left: 4px solid #dc3545;
    color: #721c24;
}

.alert-success .fa-check-circle {
    font-size: 1.2em;
}

/* Анимация появления */
.alert {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Стили для кнопки в процессе отправки */
.btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Ссылки в сообщениях об ошибках */
.alert-link {
    color: #0a58ca;
    text-decoration: underline;
}