/* =========================================================================
   Rosbotanic — Palette v1 (2026-07-05)
   Основано на:
   - _docs/color_palette_map_2026-07-05.md (карта команды: creative + ux + wow)
   - _docs/color_psychology_review_2026-07-05.md (аудит психолога, 5 правок)

   Применение: 8 P0-задач команды + 5 корректировок психолога = 13 правок v1.
   Не хардкодим значения в компонентах — только через переменные.
   Правило №0.7 — управлять цветами через админку OpenCart можно будет позже
   через `oc_setting` (P1-задача — модуль «Rosbotanic Palette»).
   ========================================================================= */

:root {
  /* --- 3 основных бренд-цвета (утверждены владельцем 2026-07-04) --- */
  --rb-primary:     #FFF1D8;  /* пастельный персик — фон секций-историй */
  --rb-secondary:   #CFC9E8;  /* лаванда — «нить бренда» (hover, focus, badge) */
  --rb-tertiary:    #C0E3E0;  /* мята — B2B и свежесть (/opt/, «Прямо из теплицы») */

  /* --- Служебные --- */
  --rb-cream:     #FFFFFF;  /* тёплый белый — фон body/функциональные зоны */
  --rb-paper:       #FFFFFF;  /* чистый белый — карточки поверх крема */
  --rb-ink:         #2E2A24;  /* тёплый графит — весь текст */
  --rb-cta:         #5C7F5A;  /* олива — ЕДИНСТВЕННЫЙ цвет активных кнопок */
  --rb-cta-hover:   #4a6c48;  /* чуть темнее для hover */

  /* --- Полутона (для микроконтрастов Aesop-стиля) --- */
  --rb-ink-soft:    #7A6F60;  /* приглушённый графит (подписи, метки, счётчики) */
  --rb-border:      rgba(46, 42, 36, 0.08);   /* базовая линия */
  --rb-border-mid:  rgba(46, 42, 36, 0.16);   /* акцент-линия */
  --rb-shadow-soft: rgba(46, 42, 36, 0.06);
  --rb-shadow-mid:  rgba(46, 42, 36, 0.12);

  /* --- Тени по палитре --- */
  --rb-lavender-glow: rgba(207, 201, 232, 0.35);  /* focus-ring */
  --rb-mint-glow:     rgba(192, 227, 224, 0.35);  /* B2B accent glow */
  --rb-peach-glow:    rgba(255, 241, 216, 0.5);   /* soft warm bg */
}

/* =========================================================================
   ГЛОБАЛЬНОЕ применение (P0 команды + 5 правок психолога)
   ========================================================================= */

/* [P0-1] body → тёплый крем (не белый) — уводит от «стерильного магазина» */
body,
html {
  background-color: var(--rb-cream) !important;
  color: var(--rb-ink);
}

/* [P0-2] все контентные секции — крем-фон по умолчанию */
main,
.main-content,
#content,
section {
  background-color: var(--rb-cream);
}

/* Карточки на кремовом фоне — чистый белый для контраста */
.card,
.product-thumb,
.product-layout .product-thumb,
.pull-content,
.testimonial-item {
  background-color: var(--rb-paper);
  border: 1px solid var(--rb-border);
}

/* [Psy-1] Футер → крем (НЕ персик — регрессия к советскому детсаду) */
footer,
.footer,
#footer,
.footer-block,
.footer-inner {
  background-color: var(--rb-cream) !important;
  color: var(--rb-ink);
  border-top: 1px solid var(--rb-border);
}

/* =========================================================================
   Кнопки — олива для ВСЕХ CTA (единственный активный цвет)
   [P0-3] Все Купить / Забронировать / Оплатить / Отправить = олива
   ========================================================================= */

.btn-primary,
.btn-success,
button[type="submit"],
.button--primary,
input[type="submit"],
.add-to-cart,
#button-cart,
.quick-order-btn,
button.rb-cta,
.rb-btn-primary {
  background-color: var(--rb-cta) !important;
  border-color: var(--rb-cta) !important;
  color: var(--rb-paper) !important;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.btn-primary:hover,
.btn-success:hover,
button[type="submit"]:hover,
.button--primary:hover,
.add-to-cart:hover,
#button-cart:hover,
.quick-order-btn:hover,
button.rb-cta:hover,
.rb-btn-primary:hover,
.btn-primary:focus,
button[type="submit"]:focus {
  background-color: var(--rb-cta-hover) !important;
  border-color: var(--rb-cta-hover) !important;
  color: var(--rb-paper) !important;
}

/* Вторичные кнопки (outline) — графит на прозрачном */
.btn-default,
.btn-outline,
.rb-btn-secondary {
  background-color: transparent !important;
  border: 1px solid var(--rb-ink) !important;
  color: var(--rb-ink) !important;
}

.btn-default:hover,
.btn-outline:hover,
.rb-btn-secondary:hover {
  background-color: var(--rb-ink) !important;
  color: var(--rb-paper) !important;
}

/* =========================================================================
   Ссылки, focus, hover — лаванда (нить бренда)
   [P0-4] Focus-outline лаванда для клавиатурной навигации
   ========================================================================= */

a {
  color: var(--rb-ink);
  text-decoration-color: var(--rb-secondary);
  text-decoration-thickness: 1.5px;
  transition: color 140ms ease;
}

a:hover,
a:focus {
  color: var(--rb-ink);
  text-decoration-color: var(--rb-ink);
}

/* Глобальный focus-ring лавандой */
*:focus-visible {
  outline: 2px solid var(--rb-secondary) !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Инпуты при фокусе */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--rb-secondary) !important;
  box-shadow: 0 0 0 3px var(--rb-lavender-glow) !important;
  outline: none !important;
}

/* =========================================================================
   B2B-зона (мята) — [P0-5] «Прямо из теплицы», [P0-6] /opt/ hero
   ========================================================================= */

/* Секция /opt/ (когда будет создана) */
.rb-b2b-section,
.section--b2b,
body.route-information .info-b2b,
body.route-product-category .category-opt {
  background-color: var(--rb-tertiary);
  color: var(--rb-ink);
}

/* [Psy-2] Кремовый «остров» вокруг CTA внутри мятной зоны — чтобы кнопка не «таяла» */
.rb-b2b-section .btn-primary,
.section--b2b .btn-primary,
.section--b2b .add-to-cart,
.rb-b2b-cta-wrap {
  box-shadow: 0 0 0 24px var(--rb-cream);
  border-radius: 8px;
  position: relative;
  z-index: 1;
}

/* Badge «Опт» — мята */
.rb-badge-opt,
.badge--opt {
  background-color: var(--rb-tertiary);
  color: var(--rb-ink);
  font-family: 'Manrope', -apple-system, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
}

/* Badge «Хит» — лаванда, [Psy-5] отличаем ТИПОГРАФИКОЙ, не цветом */
.rb-badge-hit,
.badge--hit {
  background-color: var(--rb-secondary);
  color: var(--rb-ink);
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: none;
  letter-spacing: 0;
}

/* Trust-плашки на мяте (свежесть 8 дней, ИП, ОКВЭД, УПД) */
.rb-trust-badge,
.trust--mint {
  background-color: var(--rb-tertiary);
  border-radius: 8px;
  padding: 16px 20px;
  color: var(--rb-ink);
}

/* =========================================================================
   Cookies плашка — [P0-7] лаванда + [Psy-3] 2px графит-бордер
   ========================================================================= */

.rb-cookies,
.cookies-notice,
#cookies-modal,
.cookie-consent {
  background-color: var(--rb-secondary);
  color: var(--rb-ink);
  border-top: 2px solid var(--rb-ink) !important;  /* Psy-3: сигнал «юр.уведомление» */
  padding: 16px 24px;
  font-size: 14px;
  font-family: 'Manrope', sans-serif;
}

.rb-cookies a,
.cookies-notice a {
  color: var(--rb-ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
}

/* =========================================================================
   Баннер «Флористам» на главной — [Psy-4] крем-фон + лавандовая РАМКА
   (не сплошная заливка — она каннибализировала бы лаванду-акцент меню)
   ========================================================================= */

.rb-banner-b2b-floristam,
.banner--floristam {
  background-color: var(--rb-cream);
  border: 2px solid var(--rb-secondary);
  border-radius: 12px;
  padding: 32px;
  color: var(--rb-ink);
}

/* =========================================================================
   Отзывы — [Psy-6 бонус] крем-фон + карточки с персиковым левым бордером
   ========================================================================= */

.rb-reviews-section,
.reviews-block {
  background-color: var(--rb-cream);
  padding: 48px 0;
}

.rb-reviews-section .review-card,
.reviews-block .review-item,
.testimonial-item {
  background-color: var(--rb-paper);
  border-left: 4px solid var(--rb-primary);
  padding: 20px 24px;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 2px 12px var(--rb-shadow-soft);
}

/* =========================================================================
   Секции-истории (о ферме, кейсы корпоративов) — персик как «тёплый рассказ»
   ========================================================================= */

.rb-story-section,
.story--warm,
body.route-information-information .info-about-farm {
  background-color: var(--rb-primary);
  color: var(--rb-ink);
  padding: 64px 0;
}

/* =========================================================================
   Плашка «Прямо из теплицы» (SVG) — уже мятная, ничего не меняем
   Только гарантируем что не подцепит фон-заливку
   ========================================================================= */

.rb-badge-teplitsa,
img[src*="pryamo-iz-teplitsy.svg"] {
  background: transparent !important;
}

/* =========================================================================
   Типографика: подписи и приглушённые метки — soft ink
   ========================================================================= */

.text-muted,
.small,
small,
.rb-caption,
.rb-meta {
  color: var(--rb-ink-soft) !important;
}

/* =========================================================================
   Разделительные линии — базовая
   ========================================================================= */

hr {
  border: 0;
  border-top: 1px solid var(--rb-border);
  margin: 32px 0;
}

/* =========================================================================
   Селект/дропдауны — лаванда при hover
   ========================================================================= */

select option:checked,
select option:hover {
  background-color: var(--rb-secondary);
  color: var(--rb-ink);
}

/* =========================================================================
   Скроллбар (Chrome/Edge) — лёгкий графитовый на кремовом
   ========================================================================= */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--rb-cream);
}

::-webkit-scrollbar-thumb {
  background: var(--rb-border-mid);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--rb-ink-soft);
}

/* =========================================================================
   Кнопка «B2B» в правом блоке шапки — олива (единый CTA-цвет)
   ========================================================================= */

.rb-b2b-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  margin-right: 6px;
  background-color: var(--rb-cta);
  color: var(--rb-paper) !important;
  font-family: 'Manrope', -apple-system, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background-color 160ms ease;
  white-space: nowrap;
}

.rb-b2b-btn:hover,
.rb-b2b-btn:focus {
  background-color: var(--rb-cta-hover);
  color: var(--rb-paper) !important;
  text-decoration: none !important;
}

@media (max-width: 767px) {
  .rb-b2b-btn {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }
}

/* =========================================================================
   Мобильные CTA — sticky и подобные — олива
   ========================================================================= */

.rb-sticky-cta {
  background-color: var(--rb-cta) !important;
  color: var(--rb-paper) !important;
}

.rb-sticky-cta:hover,
.rb-sticky-cta:focus {
  background-color: var(--rb-cta-hover) !important;
}

/* =========================================================================
   [Psy-7] Плавные градиенты между секциями — ОТЛОЖЕНО до Фазы 5
   Здесь пока пусто. Раскомментировать после устаканивания порядка секций.
   ========================================================================= */

/*
.rb-section-transition--peach-to-cream {
  background: linear-gradient(180deg, var(--rb-primary), var(--rb-cream));
}
.rb-section-transition--cream-to-mint {
  background: linear-gradient(180deg, var(--rb-cream), var(--rb-tertiary));
}
*/