/* core/static/core/css/theme.css */

/* Theme tokens */
:root {
  --brand: #198754;              /* Bootstrap-ish green */
  --brand-600: #157347;
  --brand-100: #e9f7ef;
  --link-hover: #0f5132;
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Page background */
body {
  background: linear-gradient(180deg, #e3f7ec 0%, #c8eed9 100%);
  padding-bottom: 60px; /* space for fixed footer */
}

/* Links */
a {
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
}

/* Buttons */
.btn-primary {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
  transform: translateY(-1px);
}
.btn-outline-primary {
  color: var(--brand) !important;
  border-color: var(--brand) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  transform: translateY(-1px);
}

/* Cards */
.card {
  background: #f8f9fa; /* matches thumbnail backdrop so card blends with image */
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
}

/* Navbar accent */
.navbar {
  border-bottom: 3px solid rgba(25, 135, 84, 0.35);
}

/* Small helpers */
.page-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  padding: 20px;
}
.badge-brand {
  background: var(--brand) !important;
}

/* --- Hero banner (homepage only) --- */
.hero-banner {
  position: relative;
}

.hero-card {
  background: linear-gradient(135deg, rgba(25,135,84,0.14), rgba(25,135,84,0.06));
  border: 1px solid rgba(25, 135, 84, 0.18);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  padding: 22px;
}

.hero-actions .btn {
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important; /* more rounded corners */
}
.hero-actions .btn:nth-child(1) {
  background: #229ed9 !important; /* Telegram blue */
}
.hero-actions .btn:nth-child(1):hover,
.hero-actions .btn:nth-child(1):focus {
  background: #1c8ac0 !important;
}
.hero-actions .btn:nth-child(2) {
  background: #7360f2 !important; /* Viber purple */
}
.hero-actions .btn:nth-child(2):hover,
.hero-actions .btn:nth-child(2):focus {
  background: #5b4cc2 !important;
}
.hero-actions .btn:nth-child(3) {
  background: #4a4a4a !important; /* Call dark gray */
}
.hero-actions .btn:nth-child(3):hover,
.hero-actions .btn:nth-child(3):focus {
  background: #2f2f2f !important;
}

/* Make product thumbnails visually smaller (about 2x) */
.product-thumb {
  object-fit: contain; /* show full image without cropping */
  height: 220px; /* consistent thumbnail height */
  width: 100%;
  background: #f8f9fa; /* subtle backdrop for letterboxing */
  transition: transform .25s ease;
}
.card:hover .product-thumb {
  transform: scale(1.03);
}

/* Extra hover polish */
.navbar .btn,
.hero-actions .btn {
  transition: transform .12s ease, box-shadow .12s ease;
}
.navbar .btn:hover,
.hero-actions .btn:hover {
  transform: translateY(-1px);
}

.footer-bar {
  min-height: 42px;
  padding-top: 6px;
  padding-bottom: 6px;
  background: #3a3a3a !important; /* soft gray */
}