/* LibanMall modern storefront overrides.
   Loaded in common/header.twig AFTER the page-level styles loop (PurpleTree bootstrap.min.css / custom.css),
   so these rules win by load order. Storefront only: ddadmin and the seller dashboard do not load this file.
   Each task keeps its rules in its own marked block so it can be reverted on its own. */

/* === Task 433: remove section divider lines and box borders === */

/* -- Home + sidebars: banner / slideshow / logo carousel modules (OC bootstrap.css: 4px white border + shadow) -- */
.carousel.slide[id^="carousel-banner-"] {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden; /* the hidden prev/next arrows sit at -20px and caused 8px of sideways scroll on mobile */
}

/* -- Home section headings: Featured Products, You Might Also Like -- */
.lm-featured-section .lm-featured-heading,
.lm-random-section .lm-random-heading {
  border-bottom: 0;
  padding-bottom: 0;
}

/* -- Breadcrumb box (desktop; hidden on mobile since Task 315) -- */
ul.breadcrumb {
  border: 0;
}

/* -- Information pages: line under the sidebar page list -- */
#information-information .sidebar .nav-tabs {
  border-bottom: 0;
}

/* -- Seller store page section headers + seller panel (product page right column and store page) -- */
.lm-products-row .lm-section-header {
  border-bottom: 0;
  padding-bottom: 0;
}
/* #container: on the product page PurpleTree's custom.css is linked from the page body, after this file */
#container .seller_pannel_store {
  border: 0;
}
#container .seller_pannel_store .contact-info > div,
#container .seller_pannel_store .seller-info > div {
  border-bottom: 0;
}

/* -- Cart, desktop: seller header strip (inline style) + bordered product / totals tables -- */
#shopping-cart .seller-group-header {
  border: 0 !important;
  border-radius: 4px !important;
}
#shopping-cart table.table {
  border: 0 !important;
}
#shopping-cart table.table > :not(caption) > *,
#shopping-cart table.table > :not(caption) > * > * {
  border-width: 0;
}

/* -- Cart, mobile: seller name bar, product cards, seller totals (Task 136 cards; grey fills kept) -- */
#shopping-cart .lm-seller-name,
#shopping-cart .lm-cart-card,
#shopping-cart .lm-cart-card:first-of-type,
#shopping-cart .lm-seller-totals {
  border: 0;
}
#shopping-cart .lm-seller-name {
  border-radius: 8px;
  margin-bottom: 4px;
}
#shopping-cart .lm-seller-totals {
  border-radius: 8px;
}
#shopping-cart .lm-total-bold {
  border-top: 0;
}

/* -- Checkout: Your Details / Shipping Address / Payment Method / seller cards / grand total (grey header bars kept) -- */
#cod-checkout .card {
  border: 0;
}
#cod-checkout .card-header {
  border-bottom: 0;
  border-radius: var(--bs-card-inner-border-radius);
}
#cod-checkout table.table > :not(caption) > * > * {
  border-bottom-width: 0;
}
#cod-checkout #checkout-tnc-block {
  border-top: 0 !important;
}

/* -- Checkout success: PurpleTree per-seller order blocks (inline styles) -- */
#common-success .pts-vendor-group {
  border: 0 !important;
  padding: 0 !important;
  margin-bottom: 1.5rem !important;
}
#common-success .pts-vendor-group div[style*="border-top"] {
  border-top: 0 !important;
}

/* === End Task 433 === */

/* === Task 434: rounded corners on product images === */

:root {
  --lm-img-radius: 12px;    /* product cards, product page main image */
  --lm-img-radius-sm: 8px;  /* thumbnails: gallery, cart, mini-cart, checkout */
}

/* -- Product cards (category, search, seller store, related, home Featured / You Might Also Like):
      the grey border is on the card, so the card gets the same radius and clips, and the image follows -- */
#container .product-thumb,
.lm-featured-section .lm-hero-card,
.lm-random-section .lm-random-card {
  border-radius: var(--lm-img-radius);
  overflow: hidden;
}
#container .product-thumb .image img,
.lm-featured-section .lm-hero-card img.lm-hero-img,
.lm-random-section .lm-random-card img.lm-random-img {
  border-radius: var(--lm-img-radius);
}

/* -- Product page gallery (Task 318 in-page slider; there is no zoom/lightbox any more) -- */
#lm-gallery .lm-gallery__main,
#lm-gallery .lm-gallery__img {
  border-radius: var(--lm-img-radius);
}
#lm-gallery .lm-gallery__thumb {
  border-radius: var(--lm-img-radius-sm);
}

/* -- Small thumbnails: cart (desktop table + mobile cards), header mini-cart, checkout seller tables (inline 6px) -- */
#shopping-cart img.img-thumbnail,
#shopping-cart .lm-cart-thumb img,
#cart .dropdown-menu img.img-thumbnail {
  border-radius: var(--lm-img-radius-sm);
}
#seller-groups-container td img {
  border-radius: var(--lm-img-radius-sm) !important;
}

/* === End Task 434 === */

/* === Task 435: info / delivery notice colours + terms checkbox at checkout === */

:root {
  --lm-notice-bg: #D2DEFF;
  --lm-notice-text: #243B69;
  --lm-notice-link: #0056B3;
  --lm-notice-radius: 8px;
}

/* -- Info notices (cart delivery, checkout guest + delivery summary, search, account success). Success / warning / danger untouched -- */
#container .alert-info {
  --bs-alert-bg: var(--lm-notice-bg);
  --bs-alert-color: var(--lm-notice-text);
  --bs-alert-border-color: transparent;
  --bs-alert-link-color: var(--lm-notice-link);
  background-color: var(--lm-notice-bg);
  color: var(--lm-notice-text);
  border: 0;
  border-radius: var(--lm-notice-radius);
}
#container .alert-info strong,
#container .alert-info b,
#container .alert-info i,
#container .alert-info .text-muted {
  color: var(--lm-notice-text) !important;
}
#container .alert-info a {
  color: var(--lm-notice-link);
}
#container .alert-info a:hover {
  text-decoration: underline;
}

/* -- Terms checkbox (mall_checkout): left-aligned, label wraps under itself, whole row is the tap target.
      It was right-aligned by the text-end class on #checkout-tnc-block -- */
#cod-checkout #checkout-tnc-block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 10px;
  text-align: left !important;
}
#checkout-tnc-block #input-checkout-agree {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  cursor: pointer;
}
#checkout-tnc-block .form-check-label {
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
}
#checkout-tnc-block #checkout-agree-error {
  flex-basis: 100%;
}
@media (max-width: 767.98px) {
  #checkout-tnc-block #input-checkout-agree {
    width: 22px;
    height: 22px;
    margin-top: 11px;
  }
  #checkout-tnc-block .form-check-label {
    min-height: 44px;
    padding: 11px 0;
  }
}

/* === End Task 435 === */

/* === Task 436: full-width hero banners (rendered from common/header, outside the page .container) === */

.lm-hero {
  width: 100%;
  margin: 0 0 1.5rem;
}
/* OC bootstrap.css gives every .carousel a white border, shadow and 50px bottom margin */
.lm-hero .carousel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.lm-hero picture,
.lm-hero__link {
  display: block;
}
/* natural aspect ratio from the width/height attributes: nothing cropped, space reserved before the image loads */
.lm-hero__img {
  display: block;
  width: 100%;
  height: auto;
}
/* dots below the image, not over baked-in text */
.lm-hero__dots {
  position: static;
  margin: 10px 0 0;
}
.lm-hero__dots [data-bs-target] {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  margin: 0 5px;
  background-color: #243B69;
  opacity: .3;
}
.lm-hero__dots .active {
  opacity: 1;
}
@media (max-width: 767.98px) {
  .lm-hero {
    margin-bottom: 1rem;
  }
}

/* === End Task 436 === */

/* === Task 438: information page link list (OC Information module) === */
/* its markup uses Bootstrap 3 .nav-stacked, which Bootstrap 5 ignores: the links sat in one row with no space between them */
.sidebar .nav-stacked {
  flex-wrap: wrap;
  gap: 2px 18px;
  margin-bottom: 1rem;
}
.sidebar .nav-stacked a {
  display: inline-block;
  padding: 4px 0;
}
/* mobile header has no lines now: once the page scrolls, a soft shadow keeps the sticky logo row apart from the content */
.lm-mobile-header {
  transition: box-shadow .2s ease;
}
.lm-mobile-header.lm-scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
/* === End Task 438 === */