html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Shown over an AJAX-refreshed section (see checkout.js) while a mutation that could
   change its content - e.g. an address edit that re-queries carrier shipping rates -
   is still in flight, so the wait isn't mistaken for the UI being unresponsive. */
.checkout-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  z-index: 1;
  /* Matches whichever container it's layered over - a no-op for the plain (unrounded)
     wrapper divs, but keeps the overlay's corners from poking past the rounded ones on
     the Versandoptionen card (the only .card among the three loading-overlay hosts). */
  border-radius: inherit;
}

/* Every card site-wide (checkout sections, product tiles, mini-cart) - accent-colored
   top border + soft elevation instead of Bootstrap's flat 1px-border default, matching
   the legacy shops' accent-colored cards. Uses the tenant's own --brand-primary (see
   _BrandingStyles.cshtml) so this stays correct per-tenant with no hardcoded color.
   overflow: hidden lets a rounded corner clip both card-img-top and the product-tile
   ribbon below cleanly at the card boundary. */
.card {
  /* A thin solid border in addition to the shadow below - the shadow alone was too
     subtle to read as a clear edge against light theme backgrounds (e.g. Koelnshop's
     #efefef page backdrop is close enough in tone that a soft shadow nearly disappears
     into it). The border keeps the boundary crisp regardless of what's behind it. */
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-top: 4px solid var(--brand-primary);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  transition: box-shadow 0.15s ease-in-out;
}

.card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.card > .card-header {
  background-color: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
  padding: 1rem 1.25rem;
}

.card > .card-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brand-primary);
}

.card > .card-body {
  padding: 1.25rem;
}

/* Order cost summary on the Checkout page (Views/Checkout/Index.cshtml) - the one card
   whose numbers the customer needs to actually check before paying, so it gets a
   heavier border/shadow than the address/shipping/message cards above it. Deliberately
   NOT tinted with --brand-primary: several tenants' brand color is a red close to
   Bootstrap's danger red, and a tinted header read as an error/alert box instead of an
   emphasis (caught in review). Neutral (black-based) emphasis only. */
.card-highlight {
  border-width: 2px;
  border-top-width: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.card-highlight > .card-header {
  border-bottom-width: 2px;
}

.card-highlight > .card-header h3 {
  font-size: 1.2rem;
}

/* Product tile image (Views/Shared/_ProductTile.cshtml) - "contain" instead of "cover"
   so a product photo whose aspect ratio doesn't match the fixed-height frame is shown
   in full (letterboxed on a neutral background) rather than having its edges cropped
   off, which is what "cover" was doing before. */
.product-tile-image {
  height: 180px;
  background-color: var(--bs-tertiary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-tile-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Legacy shops' "ArtikelTag" - a merchant-set label (e.g. "Neu", "Angebot") whose
   Bootstrap color variant (ArtikelTagStyle: warning/danger/...) comes straight from the
   backend - draped as a ribbon over the tile's top-left corner instead of the plain
   badge this used to be. Rotated and positioned to overhang the corner; the card's own
   overflow: hidden (see .card above) clips it flush with the card edge. */
.product-tile-ribbon {
  position: absolute;
  top: 14px;
  left: -34px;
  width: 130px;
  padding: 0.25rem 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transform: rotate(-45deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* Legacy shops' "SpecialText" - a green/yellow/red delivery-status hint (in stock/
   backordered/sold out), derived client-side from Item.ShowAddToBasket/StockCount/
   IsPreorder (see _ProductTile.cshtml) since the backend has no single field for it.
   currentColor keeps the dot in sync with whichever text-*-emphasis class is applied
   without a separate color per status to maintain. text-*-emphasis (not the plain
   text-success/warning/danger) is used for the label text itself because Bootstrap's
   plain .text-warning is too light (poor contrast) to read as body text on white. */
.delivery-status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: currentColor;
  margin-right: 0.35rem;
}