/* styles.css */
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: 0.1rem;
  margin-right: 0.1rem;
}
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

/* Smooth button hover */
.btn{transition:all .25s ease;}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(0,0,0,.15);}


/* === Marketplace Enhancements === */
.card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.15); }

.navbar { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.navbar .bi { font-size: 1.3rem; }


/* === Hover enlarge effect === */
.card:hover {
    transform: translateY(-4px) scale(1.03);
}

/* Category icon cards */
.category-card {
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    text-align: center;
    padding: 1rem;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.category-card:hover {
    background: #f5f7fb;
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0,0,0,.05);
}
.category-card img {
    height: 48px;
    margin-bottom: .5rem;
    filter: invert(15%) sepia(88%) saturate(1570%) hue-rotate(190deg) brightness(92%) contrast(104%);
}


/* Hero gradient banner */
.hero-banner{
    background: linear-gradient(90deg,#004aad 0%,#0f7fff 100%);
    min-height: 140px;             /* высота полосы */

}
/* Category tile hover */
.category-tile{
    transition:all .2s ease;
}
.category-tile:hover{
    background:#f8f9fa;
    transform:translateY(-4px);
    box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.product-specs li{
    font-size:.95rem;
}
.product-specs li span:last-child{
    font-weight:500;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
}

/* одинаковое превью 4:3 + cover */
.card-img-wrap { position:relative; padding-bottom:75%; overflow:hidden; }
.card-img-wrap img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }

/* заголовок максимум 2 строки */
.clamp-2 {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

:root{
  --bg:           #ffffff;
  --fg:           #212529;
  --muted:        #6c757d;
  --accent:       #6c757d;      /* ← средний bootstrap-серый */
  --card-bg:      #ffffff;
  --card-border:  #dee2e6;
}

[data-theme="dark"]{
  --bg:           #121212;
  --fg:           #e6e6e6;
  --muted:        #9a9a9a;
  --accent:       #adb5bd;   /* светло-зелёный */
  --card-bg:      #1e1e1e;
  --card-border:  #343a40;
}


/* 2. базовые поверхности */
body, .topbar, .navbar, footer,
.card, .list-group-item, .dropdown-menu, .modal-content{
  background: var(--card-bg)!important;
  color: var(--fg)!important;
  border-color: var(--card-border)!important;
}

/* 3. текст muted + ссылки */
.text-muted{ color: var(--muted)!important; }
a, .btn-link, .nav-link{ color: var(--accent)!important; }
a:hover{ opacity:.8; color: var(--accent)!important; }

/* заставляем футер подчиняться теме */
footer{
  background: var(--card-bg) !important;
  color: var(--fg) !important;
}

.topbar a,
.topbar span,
.navbar .nav-link,
#theme-toggle i{
  color: var(--fg) !important;
}

/*───────────────────────────────────────────────────────────────
  ДОКРАШИВАЕМ тёмную тему: корзина, избранное, плитки категорий,
  хлебные крошки, счётчики и инпут-количество
───────────────────────────────────────────────────────────────*/

/* текст в строках корзины / избранного */
.list-group-item,
.list-group-item a,
.list-group-item span,
.list-group-item small{
  color: var(--fg) !important;
}

/* цена справа (мы давали class="fw-bold") */
.list-group-item .fw-bold{
  color: var(--accent) !important;
}

/* инпут количества (input[type=text] внутри .input-group) */
.input-group .form-control{
  background: var(--card-bg) !important;
  color: var(--fg) !important;
  border-color: var(--card-border) !important;
}

/* кнопки «– / +» возле количества */
.input-group .btn{
  background: var(--card-bg) !important;
  color: var(--fg) !important;
  border-color: var(--card-border) !important;
}
.input-group .btn:hover{
  background: var(--accent) !important;
  color:#fff !important;
}

/* плитки категорий (серый текст и иконка) */
.category-tile,
.category-tile *{
  color: var(--accent) !important;
}

/* активная плитка (если подсвечиваете) */
.category-tile.active{
  background: var(--accent)!important;
  color:#fff!important;
}

/* хлебные крошки: последняя / ссылки */
.breadcrumb-item > a           { color: var(--accent)!important; }
.breadcrumb-item.active        { color: var(--accent)!important; }

/* красные бейджи оставляем как есть; пустые / серые – делаем видимыми */
.badge.bg-light,
.badge.bg-secondary{
  background: var(--card-bg)!important;
  color: var(--fg)!important;
  border: 1px solid var(--card-border)!important;
}
/* ссылки, находящиеся внутри .card-body */
.card-body a{
  color: var(--fg) !important;          /* основной текст */
}
.card-body a:hover{
  color: var(--accent) !important;      /* при наведении */
}
.hero-wave{position:relative;overflow:hidden;background:#0d6efd;}
.hero-wave::before,
.hero-wave::after{
  content:'';position:absolute;left:-50%;top:60%;width:200%;height:300%;
  background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.35),transparent 70%);
  border-radius:43%;animation:wave 12s infinite linear;
}
.hero-wave::after{animation-duration:18s;top:65%;opacity:.6;}
@keyframes wave{from{transform:translateX(0) rotate(0deg);}to{transform:translateX(50%) rotate(360deg);} }


/* заголовки и акценты */
h1,h2,h3,h4,.display-4,.fw-bold{
  font-family: 'Montserrat', sans-serif;
}

.placeholder-img{
  object-fit: contain;
  filter: grayscale(1) opacity(.7);
  transform: scale(.6);        /* 60 % от обычного фото */
}

.product-card{
  transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover{
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 24px rgba(0,0,0,.15);
}

.category-tile img { color: var(--icon-color); }
body.light { --icon-color: #6c6c6c; }
body.dark  { --icon-color: #e2e2e2; }

/* плашка-подкатегория */
.subcategory-pill{
  padding: .4rem 1rem;
  border-radius: 2rem;
  font-size: .875rem;
  background: var(--card-bg);
  color: var(--accent);
  border: 1px solid var(--card-border);
  transition: all .2s ease;
  text-decoration:none;
}
.subcategory-pill:hover{
  background: var(--accent);
  color:#fff;
}
.subcategory-pill.active{
  background: var(--accent);
  color:#fff;
  cursor:default;
  pointer-events:none;
}

/* ==== 1) Общий контейнер и сброс Bootstrap-фонов/рамок ==== */
.orders-container,
.accordion {
  max-width: 800px;           /* нужная вам макс. ширина */
  margin: 1rem auto;          /* центрирование по горизонтали + отступ сверху */
  padding: 0 1rem;            /* внутренние паддинги по бокам */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ==== 2) Разделяем карточки друг от друга ==== */
.accordion-item {
  margin-bottom: 0.6rem;      /* расстояние между плашками */
}

/* ==== 3) Хедер каждой плашки: flex для правого выравнивания ==== */
.order-card .accordion-header {
  display: flex;
  justify-content: flex-end;  /* толкает кнопку вправо */
  padding: 0;                  /* сбрасываем стандартный отступ */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ==== 4) Сама кнопка-«плашка» ==== */
.order-card .accordion-button {
  width: auto !important;           /* не на 100% */
  padding: 0.3rem 0.6rem !important;/* компактные отступы */
  font-size: 0.85rem !important;    /* чуть меньше текста */
  background-color: #e0e0e0 !important; /* светло-серый */
  color: #333 !important;
  border: none !important;          /* без обводки */
  box-shadow: none !important;
  border-radius: 0.4rem !important; /* скругляем */
  transition: background-color .2s;
}

/* чуть темнее, когда открыта */
.order-card .accordion-button:not(.collapsed) {
  background-color: #c0c0c0 !important;
}

/* ==== 5) Тело раскрытой панели ==== */
.order-card .accordion-body {
  padding: 0.3rem 0.6rem 0.5rem !important;
  background-color: #fff !important;    /* белое для контента */
  color: #333 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 0 0.4rem 0.4rem !important;
}

/* ==== 6) Сбрасываем любые float-ы (на всякий случай) ==== */
.order-card .accordion-button,
.order-card .accordion-header,
.order-card .accordion-body {
  float: none !important;
  clear: none !important;
}
/* ─── 1) Растягиваем заголовок «плашки» по ширине ───────────────── */
.order-card .accordion-button {
  width: 100% !important;            /* теперь фон тянется на всю ширину контейнера */
  text-align: right !important;      /* а содержимое (номер, дата) прижато вправо */
  /* остальные ваши стили без изменений */
}

/* ─── 2) Тело остается таким же широким ────────────────────────── */
.order-card .accordion-body {
  width: 100% !important;
}

/* обычный статический футер — теперь БЕЗ position: fixed */
.site-footer {
  --border-color: #333;       /* тёмно-серая, чтобы была видна на чёрном фоне */

  flex-shrink: 0;
  padding: 1rem 0;
  text-align: center;
  font-size: .875rem;
  color: #aaa;
  background: transparent;      /* или любой фон */
  border-top: 1px solid var(--border-color);  /* та самая полоска */

}

@media (max-width: 575.98px) {

  /* убираем лишний padding у навбара */
  .navbar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  /* логотип и toggler чуть компактнее */
  .navbar-brand {
    font-size: 1.1rem;
    padding: 0;
    margin-right: .5rem;
  }
  .navbar-toggler {
    padding: .25rem .5rem;
    font-size: 1rem;
  }
}
/* иконка: по умолчанию чёрно-серая */
.icon {
  filter: brightness(0) saturate(100%);
  opacity: .8;
}

/* при тёмной теме (data-theme="dark") — инвертируем в белый */
html[data-theme="dark"] .icon {
  filter: brightness(0) invert(1);
  opacity: .95;
}

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}