/**
 * MOGI Theme - front-end styles
 *
 * Pure presentation layer for the OpenCart 4.1 Theme Editor templates stored
 * in extension/mogi_theme/catalog/view/theme_editor/. No controller logic is
 * affected by this file - it only restyles markup produced by the existing
 * core controllers (common/header, common/menu, common/search, common/cart,
 * common/footer, product/product, product/category).
 */

:root {
  --mogi-green: #2e9a35;
  --mogi-green-dark: #238a2a;
  --mogi-green-darker: #1d7523;
  --mogi-green-light: #eaf6ea;
  --mogi-dark: #1c1c1c;
  --mogi-radius: .5rem;
  --mogi-border: #e5e5e5;
}

body.mogi-theme {
  background-color: #f5f5f5;
}

/* ---------- Header: top info bar ---------- */
.mogi-topbar {
  background-color: #fff;
  border-bottom: 1px solid var(--mogi-border);
}

.mogi-topbar .mogi-topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: .75rem 0;
  gap: .75rem;
}

.mogi-topbar #logo img {
  max-height: 64px;
}

.mogi-topbar #logo h1 {
  font-size: 1.5rem;
  margin: 0;
}

.mogi-topbar #logo h1 a {
  color: #222;
  text-decoration: none;
}

.mogi-topbar-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.mogi-topbar-meta .mogi-meta-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #444;
  text-decoration: none;
}

.mogi-topbar-meta .mogi-meta-item .mogi-meta-icon , .mogi-footer-top .mogi-meta-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--mogi-border);
  color: var(--mogi-green);
  flex: 0 0 auto;
}

.mogi-topbar-meta .mogi-meta-item:hover {
  color: var(--mogi-green-dark);
}

.mogi-topbar-switches .dropdown-toggle {
  color: #444;
}

/* ---------- Header: green navigation bar ---------- */
.mogi-navbar {
  background-color: var(--mogi-green);
}

.mogi-navbar-row {
  display: flex;
  align-items: stretch;
  gap: .75rem;
  padding: .6rem 0;
  flex-wrap: wrap;
}

.mogi-category-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background-color: rgba(255, 255, 255, .16);
  border: none;
  color: #fff;
  padding: .55rem 1.1rem;
  border-radius: var(--mogi-radius);
  font-weight: 500;
  white-space: nowrap;
}

.mogi-category-toggle:hover,
.mogi-category-toggle:focus {
  background-color: rgba(255, 255, 255, .28);
  color: #fff;
}

.mogi-search-form {
  flex: 1 1 260px;
  display: flex;
  min-width: 0;
}

.mogi-search-form .form-control {
  border: none;
  border-radius: var(--mogi-radius) 0 0 var(--mogi-radius);
  padding-left: 1rem;
}

.mogi-search-form .form-control:focus {
  box-shadow: none;
}

.mogi-search-form .btn {
  border: none;
  border-radius: 0 var(--mogi-radius) var(--mogi-radius) 0;
  background-color: var(--mogi-green-darker);
  color: #fff;
  padding-left: 1rem;
  padding-right: 1rem;
}

.mogi-search-form .btn:hover {
  background-color: var(--mogi-dark);
}

.mogi-header-icons {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: auto;
}

.mogi-header-icons > * {
  color: #fff;
}

.mogi-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
}

.mogi-icon-link:hover {
  color: rgba(255, 255, 255, .8);
}

.mogi-icon-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: var(--mogi-dark);
  color: #fff;
  border-radius: 50%;
  font-size: .62rem;
  min-width: 1.1rem;
  height: 1.1rem;
  line-height: 1.1rem;
  text-align: center;
  padding: 0 2px;
}

.mogi-cart-widget .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: none;
  color: #fff;
  padding: .4rem .75rem;
  white-space: nowrap;
}

.mogi-cart-widget .dropdown-toggle:hover,
.mogi-cart-widget .dropdown-toggle:focus {
  color: rgba(255, 255, 255, .85);
}

.mogi-cart-widget .dropdown-toggle::after {
  display: none;
}

/* ---------- Category offcanvas menu ---------- */
.mogi-category-menu .offcanvas-header {
  background-color: var(--mogi-green);
  color: #fff;
}

.mogi-category-menu .offcanvas-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.mogi-category-menu .list-group-item {
  border-left: none;
  border-right: none;
}

.mogi-category-menu .list-group-item:first-child {
  border-top: none;
}

.mogi-category-menu .mogi-subcategory-list {
  background-color: #fafafa;
}

.mogi-category-menu .mogi-subcategory-list .list-group-item {
  padding-left: 2.25rem;
  font-size: .95rem;
}

/* ---------- Footer ---------- */
.mogi-footer-top {
  background-color: #fff;
  padding: 3rem 0 2rem;
}

.mogi-footer-top h5 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .5rem;
  color: #222;
}

.mogi-footer-top h5 .mogi-heading-underline {
  display: block;
  width: 2.5rem;
  height: 2px;
  background-color: var(--mogi-green);
  margin-top: .4rem;
}

.mogi-footer-top ul.list-unstyled li {
  margin-bottom: .4rem;
}

.mogi-footer-top ul.list-unstyled a {
  color: #777;
  text-decoration: none;
}

.mogi-footer-top ul.list-unstyled a:hover {
  color: var(--mogi-green-dark);
}

.mogi-footer-contact {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
  color: #444;
  text-decoration: none;
}

.mogi-footer-contact i {
  color: var(--mogi-green);
}

.mogi-footer-legal {
  border-top: 1px solid var(--mogi-border);
  padding: 1rem 0;
  text-align: center;
}

.mogi-footer-legal a {
  color: #777;
  text-decoration: none;
  margin: 0 .6rem;
  font-size: .9rem;
}

.mogi-footer-legal a:hover {
  color: var(--mogi-green-dark);
}

.mogi-footer-bottom {
  background-color: var(--mogi-dark);
  color: #aaa;
  padding: 1rem 0;
  font-size: .85rem;
}

.mogi-footer-bottom strong {
  color: #ddd;
}

/* ---------- Product detail page ---------- */
#product-info .mogi-product-image {
  border: 1px solid var(--mogi-border);
  border-radius: var(--mogi-radius);
  padding: 1rem;
  background-color: #fff;
}

#product-info .mogi-product-thumbs img {
  width: 72px;
}

#product-info h1 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

#product-info .mogi-meta-list {
  margin-bottom: 0;
}

#product-info .mogi-meta-list li {
  padding: .4rem 0;
  border-bottom: 1px solid var(--mogi-border);
  color: #555;
}

#product-info .mogi-meta-list li:last-child {
  border-bottom: none;
}

#product-info .price-new {
  color: var(--mogi-green-dark);
  font-weight: 700;
  font-size: 1.6rem;
}

#product-info .price-old {
  color: #999;
  text-decoration: line-through;
}

.mogi-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--mogi-border);
  border-radius: var(--mogi-radius);
  overflow: hidden;
}

.mogi-qty-stepper button {
  border: none;
  background-color: #f5f5f5;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.1rem;
  color: #444;
}

.mogi-qty-stepper button:hover {
  background-color: #e9e9e9;
}

.mogi-qty-stepper input {
  width: 3.5rem;
  border: none;
  border-left: 1px solid var(--mogi-border);
  border-right: 1px solid var(--mogi-border);
  text-align: center;
  height: 2.5rem;
}

.mogi-qty-stepper input:focus {
  outline: none;
  box-shadow: none;
}

.mogi-btn-cart {
  background-color: var(--mogi-green);
  border-color: var(--mogi-green);
  color: #fff;
}

.mogi-btn-cart:hover {
  background-color: var(--mogi-green-dark);
  border-color: var(--mogi-green-dark);
  color: #fff;
}

.mogi-btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mogi-border);
  background-color: #fff;
  color: #555;
  border-radius: var(--mogi-radius);
}

.mogi-btn-icon:hover {
  border-color: var(--mogi-green);
  color: var(--mogi-green);
}

#product-info .nav-tabs {
  border-bottom: 1px solid var(--mogi-border);
}

#product-info .nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: #777;
  padding: .75rem 1.25rem;
}

#product-info .nav-tabs .nav-link.active {
  color: var(--mogi-green-dark);
  background-color: transparent;
  border-bottom-color: var(--mogi-green);
}

#product-info .tab-content {
  background-color: #fff;
  border: 1px solid var(--mogi-border);
  border-top: none;
  padding: 1.5rem;
  border-radius: 0 0 var(--mogi-radius) var(--mogi-radius);
}

#product-info table.table-bordered td {
  vertical-align: middle;
}

/* ---------- Category listing ---------- */
#product-category .mogi-category-intro {
  background-color: #fff;
  border: 1px solid var(--mogi-border);
  border-radius: var(--mogi-radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

#product-category .mogi-subcategory-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: #fff;
  border: 1px solid var(--mogi-border);
  border-radius: var(--mogi-radius);
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: #333;
  height: 100%;
}

#product-category .mogi-subcategory-card:hover {
  border-color: var(--mogi-green);
  color: var(--mogi-green-dark);
}

#product-category .mogi-subcategory-card .mogi-subcategory-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--mogi-green-light);
  color: var(--mogi-green-dark);
  flex: 0 0 auto;
}

#product-category .mogi-subcategory-card .mogi-subcategory-icon-image {
  background-color: transparent;
  overflow: hidden;
}

#product-category .mogi-subcategory-card .mogi-subcategory-icon-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Breadcrumbs (dark green instead of the Bootstrap default blue) ---------- */
.breadcrumb .breadcrumb-item a {
  color: var(--mogi-green-darker);
  text-decoration: none;
}

.breadcrumb .breadcrumb-item a:hover {
  color: var(--mogi-dark);
  text-decoration: underline;
}
.btn-primary{
  color: var(--mogi-green);
  background-color: var(--mogi-green-light);
  border-color: var(--mogi-green);
}
a{
  color: var(--mogi-green-darker);
  text-decoration: none;
}
.page-link.active, .active > .page-link{
  color: var(--mogi-green);
  background-color: var(--mogi-green-light);
  border-color: var(--mogi-green);
}
.page-link{
  color: var(--mogi-green-darker);
  background-color: var(--mogi-green-light);
  border-color: var(--mogi-green);
}
.pagination {
  --bs-pagination-color: var(--mogi-green-darker);
  --bs-pagination-hover-color: var(--mogi-green-dark);
  --bs-pagination-focus-color: var(--mogi-green-dark);
  --bs-pagination-active-bg: var(--mogi-green-light);
  --bs-pagination-active-border-color: var(--mogi-green);
}
footer {
  padding-top:0px;
}