/* Mamma Mia — shop theme overrides (Italian tricolore, warm cream, like mammamia.ph)
 *
 * Loaded after OpenCart's bootstrap + stylesheet, so these rules win.
 *
 * Colours are taken from the brand artwork itself:
 *   dark red #870a08  — sampled from the "MAMMA MIA!" lettering on the banner.
 *                       Used for the top bar, the menu bar, headings/food titles,
 *                       prices, buttons and the footer (one red everywhere).
 *   green    #1e7a3c  — the tagline green: text links and the tricolore only.
 *   cream    #fdf8f0  — page background · ink #2a2118 for text.
 *
 * Nothing here changes prices, layout flow or the cart: it is colour, type
 * weight and the top banner only.
 */

:root {
  --mm-red: #870a08;        /* the banner's MAMMA MIA! red */
  --mm-red-hover: #a41412;
  --mm-red-deep: #6b0504;
  --mm-red-bright: #cd212a;   /* the tricolore's red: a proper Italian red */
  --mm-green: #1e7a3c;      /* links + tricolore */
  --mm-cream: #fdf8f0;
  --mm-cream-2: #f7efe1;
  --mm-ink: #2a2118;
  --mm-muted: #7a6f63;

  /* Bootstrap tokens (components read these) */
  --bs-primary: #870a08;
  --bs-primary-rgb: 135, 10, 8;
  --bs-link-color: #1e7a3c;
  --bs-link-color-rgb: 30, 122, 60;
  --bs-link-hover-color: #870a08;
  --bs-link-hover-color-rgb: 135, 10, 8;

  /* Bootstrap's list-group (category sidebar, account menu) hard-codes the old
     blue in its own variable, so it is set here too. */
  --bs-list-group-active-bg: #870a08;
  --bs-list-group-active-border-color: #870a08;
  --bs-list-group-active-color: #fff;

  /* Same for the pagination tokens. */
  --bs-pagination-active-bg: #870a08;
  --bs-pagination-active-border-color: #870a08;
}

body {
  background-color: var(--mm-cream);
  color: var(--mm-ink);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--mm-red);
  font-weight: 700;
}

/* Food / category / module titles are links: they take the heading colour. */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: var(--mm-red-hover);
}

a {
  color: var(--mm-green);
}
a:hover {
  color: var(--mm-red);
}

/* ── Top utility bar ───────────────────────────────────────────────────── */
#top {
  background-color: var(--mm-red);
  border-bottom: 0;
  color: var(--mm-cream);
  padding-top: 4px;
}
#top a,
#top .list-inline-item > a,
#top .list-inline-item .dropdown > span,
#top .dropdown-toggle {
  color: var(--mm-cream) !important;
}
#top a:hover,
#top .dropdown-toggle:hover {
  color: #fff !important;
}
#top .dropdown-menu a {
  color: var(--mm-ink) !important;
}

/* ── Header + banner ──────────────────────────────────────────────────── */
/* No logo: the website banner *is* the header art, under the search + cart
   row and exactly as wide as the content (the .container). */
header .mm-header-row {
  padding: 14px 0 0;
}
header .mm-banner {
  margin: 12px 0 14px;
  line-height: 0;
  background: #111;
}
header .mm-banner img {
  display: block;
  width: 100%;
  height: auto;
}
/* Italian tricolore rule, the same one the public site uses. */
.mm-stripe {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--mm-green) 0 33.33%,
    #ffffff 33.33% 66.66%,
    var(--mm-red-bright) 66.66% 100%
  );
}

/* ── Main menu bar ────────────────────────────────────────────────────── */
#menu {
  background-color: var(--mm-red);
  background-image: linear-gradient(to bottom, #9c100d, var(--mm-red));
  border: 1px solid var(--mm-red);
  border-color: var(--mm-red) var(--mm-red) var(--mm-red-deep);
}
#menu .navbar-nav > li > a,
#menu a.dropdown-item {
  color: #fff;
}
#menu .navbar-nav > li > a:hover,
#menu .navbar-nav > li > a:focus,
#menu .navbar-nav > li.show > a {
  background-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}
#menu .dropdown-menu {
  border-top: 3px solid var(--mm-green);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--mm-red);
  --bs-btn-border-color: var(--mm-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--mm-red-hover);
  --bs-btn-hover-border-color: var(--mm-red-hover);
  --bs-btn-focus-shadow-rgb: 135, 10, 8;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--mm-red-deep);
  --bs-btn-active-border-color: var(--mm-red-deep);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--mm-red);
  --bs-btn-disabled-border-color: var(--mm-red);
}
.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--mm-red);
  --bs-btn-border-color: var(--mm-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--mm-red-hover);
  --bs-btn-hover-border-color: var(--mm-red-hover);
  --bs-btn-active-bg: var(--mm-red-deep);
  --bs-btn-active-border-color: var(--mm-red-deep);
}
.btn-light {
  --bs-btn-bg: var(--mm-cream-2);
  --bs-btn-border-color: #e6dccb;
  --bs-btn-hover-bg: #efe4d2;
  --bs-btn-color: var(--mm-ink);
}
.btn-outline-secondary {
  --bs-btn-color: var(--mm-red);
  --bs-btn-border-color: var(--mm-red);
  --bs-btn-hover-bg: var(--mm-red);
  --bs-btn-hover-border-color: var(--mm-red);
}

/* ── Cards, prices, product grid ──────────────────────────────────────── */
.product-thumb {
  border: 1px solid #eddfcc;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.product-thumb:hover {
  border-color: var(--mm-red);
  box-shadow: 0 10px 26px rgba(42, 33, 24, 0.12);
  transform: translateY(-2px);
}
.product-thumb .image {
  background: var(--mm-cream-2);
}
.product-thumb .caption {
  padding: 14px 16px;
}
.price,
.price-new {
  color: var(--mm-red) !important;
  font-weight: 700;
}
.price-old {
  color: var(--mm-muted);
}

/* ── Forms, tabs, breadcrumbs, lists ──────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--mm-red);
  box-shadow: 0 0 0 0.2rem rgba(135, 10, 8, 0.16);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--mm-red);
  border-color: var(--mm-red);
}
.form-check-input:focus {
  border-color: var(--mm-red);
  box-shadow: 0 0 0 0.25rem rgba(135, 10, 8, 0.2);
}
.form-range::-webkit-slider-thumb { background-color: var(--mm-red); }
.form-range::-moz-range-thumb { background-color: var(--mm-red); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--mm-red); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--mm-red); }
.dropdown-item.active,
.dropdown-item:active { background-color: var(--mm-red); color: #fff; }

/* Bootstrap declares the list-group colours on `.list-group` itself (not :root),
   so they are re-declared here. */
.list-group {
  --bs-list-group-active-bg: var(--mm-red);
  --bs-list-group-active-border-color: var(--mm-red);
  --bs-list-group-active-color: #fff;
  --bs-list-group-action-hover-color: var(--mm-red);
}
.list-group-item.active {
  background-color: var(--mm-red);
  border-color: var(--mm-red);
  color: #fff;
}

/* Breadcrumb (the little home icon is a link, so it takes this colour). */
.breadcrumb a { color: var(--mm-red); }
.breadcrumb a:hover { color: var(--mm-red-hover); }
.breadcrumb-item.active { color: var(--mm-muted); }

/* Tabs (product description / reviews, account pages) */
.nav-tabs .nav-link { color: var(--mm-red); }
.nav-tabs .nav-link.active {
  color: var(--mm-ink);
  border-bottom-color: var(--mm-red);
  border-bottom-width: 3px;
}

/* Table headers (cart, order history) keep the warm cream instead of grey */
.table thead th {
  background: var(--mm-cream-2);
  color: var(--mm-ink);
  border-bottom-color: #e6dccb;
}

/* ── Bootstrap accent utilities ───────────────────────────────────────── */
.text-primary { color: var(--mm-red) !important; }
.bg-primary { background-color: var(--mm-red) !important; }
.border-primary { border-color: var(--mm-red) !important; }
.badge.bg-primary { background-color: var(--mm-red) !important; }
a.text-primary:hover { color: var(--mm-red-hover) !important; }

/* ── Footer ───────────────────────────────────────────────────────────── */
/* The same dark red as the top bar and menu, with the tricolore on its edge. */
footer {
  background-color: var(--mm-red);
  border: 0;
  border-top: 6px solid transparent;
  background-image:
    linear-gradient(90deg, var(--mm-green) 0 33.33%, #fff 33.33% 66.66%, var(--mm-red-bright) 66.66% 100%),
    linear-gradient(var(--mm-red), var(--mm-red));
  background-size: 100% 6px, 100% 100%;
  background-position: top left, top left;
  background-repeat: no-repeat;
  color: #fbeee2;
}
footer h5 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 0.95rem;
}
footer a {
  color: #fbe7dd;
}
footer a:hover {
  color: #fff;
}
footer hr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* ── Small screens ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* A 1600x425 banner at phone width would make the tagline tiny; a fixed
     height keeps "Mamma Mia! Italian Food & Catering Cebu" readable while
     still spanning the content width. */
  header .mm-banner img {
    height: 150px;
    object-fit: cover;
    object-position: center;
  }
  header .mm-header-row {
    padding-top: 8px;
  }
}