/* ------------------------------------------------------------------ */
/* Theme: Bootstrap color mode + brand (primary #ff9900, secondary #343434) */
/* ------------------------------------------------------------------ */
:root,
[data-bs-theme="light"] {
  --coouponz-primary: #ff9900 !important;
  --coouponz-secondary: #343434 !important;
  --bs-primary: #ff9900 !important;
  --bs-primary-rgb: 255, 153, 0 !important;
  --bs-secondary: #343434 !important;
  --bs-secondary-rgb: 52, 52, 52 !important;
  --bs-link-color: #c27800 !important;
  --bs-link-hover-color: #ff9900 !important;
  --coouponz-hero-gradient: linear-gradient(
    135deg,
    #fcf2e0 0%,
    #e7e7e7 100%
  ) !important;
  --coouponz-feature-card-bg: #ffffff !important;
  --coouponz-feature-card-shadow: 0 10px 12px rgba(0, 0, 0, 0.08) !important;
  --coouponz-scratch-text: #212529 !important;
  --coouponz-modal-coupon-bg: #ffffff !important;
  --coouponz-portal-canvas-bg: #e8e8e8 !important;
  --bs-body-bg-rgb: 248, 248, 248 !important;
}

[data-bs-theme="dark"] {
  --coouponz-primary: #ff9900 !important;
  --coouponz-secondary: #343434 !important;
  --bs-primary: #ff9900 !important;
  --bs-primary-rgb: 255, 153, 0 !important;
  --bs-secondary: #343434 !important;
  --bs-secondary-rgb: 52, 52, 52 !important;
  --bs-link-color: #ffb84d !important;
  --bs-link-hover-color: #ffcc80 !important;
  --coouponz-hero-gradient: linear-gradient(
    135deg,
    #2a2418 0%,
    #1a1a1a 100%
  ) !important;
  --coouponz-feature-card-bg: var(--bs-tertiary-bg) !important;
  --coouponz-feature-card-shadow: 0 10px 12px rgba(0, 0, 0, 0.45) !important;
  --coouponz-scratch-text: #f8f9fa !important;
  --coouponz-modal-coupon-bg: var(--bs-body-bg) !important;
  --coouponz-portal-canvas-bg: #2b2d33 !important;
  --bs-body-bg-rgb: 33, 37, 41 !important;
}

/* Bootstrap CDN compiles default blue into .btn-primary / .btn-outline-primary; map to brand primary */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 88%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 88%, #000);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 78%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 78%, #000);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 88%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 88%, #000);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
}

h1 span {
  color: var(--bs-primary) !important;
}

[data-bs-theme="dark"] .site-logo {
  filter: brightness(0) invert(1);
}

/* Cookie consent: starts below viewport, slides up */
.cookie-consent-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  transform: translateY(100%);
  transition: transform 0.35s ease;
  pointer-events: none;
}

.cookie-consent-bar.cookie-consent-bar--in {
  transform: translateY(0);
  pointer-events: auto;
}

html.cookie-consent-ok .cookie-consent-bar {
  display: none !important;
}

body.cookie-consent-pending {
  padding-bottom: 4.5rem;
}

@media (min-width: 576px) {
  body.cookie-consent-pending {
    padding-bottom: 3.75rem;
  }
}

.site-logo {
  display: block;
  object-fit: contain;
  object-position: left center;
}

.site-logo--nav {
  height: 2.25rem;
  width: auto;
  max-width: 11rem;
}

.site-logo--auth {
  height: 3rem;
  width: auto;
  max-width: 18rem;
  margin-left: auto;
  margin-right: auto;
}

.site-logo--admin {
  height: 1.875rem;
  width: auto;
  max-width: 10rem;
}

.hero-gradient {
  background: var(--coouponz-hero-gradient) !important;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.campaign-card,
.discount-card {
  position: relative;
  background-color: var(--coouponz-feature-card-bg);
  z-index: 0;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

/* Open share menu above sibling cards (later columns paint on top by default). */
.campaign-card:has(.dropdown-menu.show),
.discount-card:has(.dropdown-menu.show) {
  z-index: 40;
}

.campaign-card:hover,
.discount-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
}

.scratch-wrap {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 300 / 160;
  margin-left: auto;
  margin-right: auto;
}

/* Code layer under the scratch canvas; same footprint, z-index below canvas. */
.scratch-wrap .coupon-reveal-box {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  min-height: 0;
  padding: 0.75rem 1rem;
  text-align: center;
  color: var(--coouponz-scratch-text) !important;
  background: #0000003b;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

#scratchCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

.object-fit-cover {
  object-fit: cover;
}

.campaign-card-contents {
  padding: 0.8rem;
  overflow: visible;
}

.modal-coupon {
  background: transparent;
  text-align: center;
  border: 0;
}

/* Claim modal: coupon-style perforated top / bottom (scalloped “tear-off” edge) */
.modal-coupon-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  background: transparent;
  /* Shadow follows the scalloped ticket outline (transparent notches stay “open”) */
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.2));
}

[data-bs-theme="dark"] .modal-coupon-body {
  filter: drop-shadow(0 10px 32px rgba(0, 0, 0, 0.55));
}

.modal-coupon-perf-edge {
  --modal-coupon-perf-step: 26px;
  --modal-coupon-perf-r: 9px;
  --modal-coupon-perf-depth: 12px;
  width: 100%;
  max-width: 400px;
  height: var(--modal-coupon-perf-depth);
  flex-shrink: 0;
  pointer-events: none;
  background-repeat: repeat-x;
  background-size: var(--modal-coupon-perf-step) 100%;
}

/* Semicircular notches (perforations); transparent areas show the modal backdrop */
.modal-coupon-perf-edge--top {
  background-image: radial-gradient(
    circle var(--modal-coupon-perf-r) at calc(var(--modal-coupon-perf-step) / 2) 0,
    transparent calc(var(--modal-coupon-perf-r) - 0.5px),
    var(--coouponz-modal-coupon-bg) var(--modal-coupon-perf-r)
  );
}

.modal-coupon-perf-edge--bottom {
  background-image: radial-gradient(
    circle var(--modal-coupon-perf-r) at calc(var(--modal-coupon-perf-step) / 2) 100%,
    transparent calc(var(--modal-coupon-perf-r) - 0.5px),
    var(--coouponz-modal-coupon-bg) var(--modal-coupon-perf-r)
  );
}

.modal-coupon-content {
  background: var(--coouponz-modal-coupon-bg) !important;
  width: 100%;
  max-width: 400px;
  padding: 1.75rem 2rem 2rem;
  margin: 0;
  border-radius: 0;
  border-left: 1px solid color-mix(in srgb, var(--bs-secondary) 22%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--bs-secondary) 22%, transparent);
  border-top: none;
  border-bottom: none;
}

.modal-coupon-content-inner {
  border: 1px solid var(--bs-primary);
  padding: 1rem;
}

#claimToastHost .toast {
  min-width: min(100%, 280px);
  max-width: min(440px, 94vw);
}

.nav-link {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
}

.nav-link.active,
.nav-link:hover {
  background: var(--bs-primary)!important;
  color: #fff!important;
}

/* Public site: mobile nav slides in from the left */
.main-site-nav-offcanvas.offcanvas-start {
  width: min(100% - 2.5rem, 20rem);
  max-width: 100%;
}

/* Portal top bar + mobile offcanvas (admin + client) */
html {
  --portal-navbar-height: 3.5rem;
}

.portal-topnav {
  z-index: 1060;
}

/* Real mobile: 100vh is often taller than visible area (URL bar); dvh/svh match screen. */
.admin-app .portal-offcanvas.offcanvas-start,
.client-app .portal-offcanvas.offcanvas-start {
  top: var(--portal-navbar-height);
  height: calc(100vh - var(--portal-navbar-height));
  max-height: calc(100vh - var(--portal-navbar-height));
  border-top: none;
}

@supports (height: 100dvh) {
  .admin-app .portal-offcanvas.offcanvas-start,
  .client-app .portal-offcanvas.offcanvas-start {
    height: calc(100dvh - var(--portal-navbar-height));
    max-height: calc(100dvh - var(--portal-navbar-height));
  }
}

@supports (height: 100svh) {
  .admin-app .portal-offcanvas.offcanvas-start,
  .client-app .portal-offcanvas.offcanvas-start {
    height: calc(100svh - var(--portal-navbar-height));
    max-height: calc(100svh - var(--portal-navbar-height));
  }
}

/* Scroll the sheet as one column; pad for home indicator / gesture bar */
.admin-app .portal-offcanvas .portal-offcanvas-body,
.client-app .portal-offcanvas .portal-offcanvas-body {
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
}

.admin-app .portal-offcanvas .portal-offcanvas-body > .portal-sidebar,
.client-app .portal-offcanvas .portal-offcanvas-body > .portal-sidebar {
  height: auto;
  min-height: min-content;
  flex: 0 0 auto;
}

/* Desktop aside: fill column height */
.admin-app .portal-sidebar--desktop > .portal-sidebar,
.client-app .portal-sidebar--desktop > .portal-sidebar {
  height: 100%;
  min-height: 0;
}

/* Shared sidebar / offcanvas nav (admin + client) */
.admin-app .portal-sidebar .nav-link,
.client-app .portal-sidebar .nav-link {
  border-radius: 0.375rem;
  color: #495057;
}

.admin-app .portal-sidebar .nav-link:hover,
.client-app .portal-sidebar .nav-link:hover {
  background: #f8f9fa;
  color: #212529;
}

.admin-app .portal-sidebar .nav-link.active,
.client-app .portal-sidebar .nav-link.active {
  background: rgba(var(--bs-primary-rgb), 0.15) !important;
  color: var(--bs-primary) !important;
  font-weight: 600;
}

[data-bs-theme="dark"] .admin-app .portal-sidebar .nav-link,
[data-bs-theme="dark"] .client-app .portal-sidebar .nav-link {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .admin-app .portal-sidebar .nav-link:hover,
[data-bs-theme="dark"] .client-app .portal-sidebar .nav-link:hover {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

@media (min-width: 992px) {
  .admin-app .portal-sidebar--desktop,
  .client-app .portal-sidebar--desktop {
    position: sticky;
    top: var(--portal-navbar-height);
    align-self: flex-start;
    max-height: calc(100vh - var(--portal-navbar-height));
    height: calc(100vh - var(--portal-navbar-height));
    overflow-y: auto;
  }

  @supports (height: 100dvh) {
    .admin-app .portal-sidebar--desktop,
    .client-app .portal-sidebar--desktop {
      max-height: calc(100dvh - var(--portal-navbar-height));
      height: calc(100dvh - var(--portal-navbar-height));
    }
  }
}

/* Client + admin portal: mild gray page canvas; sidebar stays body surface */
body.admin-app,
body.client-app {
  background-color: var(--coouponz-portal-canvas-bg) !important;
}

.card-text {
  font-size: 0.8rem;
}

.feature-card {
  background: var(--coouponz-feature-card-bg) !important;
  position: relative;
  top: -40px;
  padding: 1rem 1.6rem 1.6rem;
  border-radius: 1rem;
  box-shadow: var(--coouponz-feature-card-shadow) !important;
}

/* CMS static pages (admin-authored HTML) */
.cms-page-body {
  line-height: 1.6;
}
.cms-page-body img {
  max-width: 100%;
  height: auto;
}
.cms-page-body table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

/* Home feed infinite scroll: intersection target + footer states */
.home-feed-sentinel {
  min-height: 1px;
  width: 100%;
  pointer-events: none;
}