/*
 * All module rules live in @layer loxa-base. The admin "Custom CSS" field
 * is emitted at runtime inside @layer loxa-custom (see init.phtml). Per the
 * CSS Cascade Layers spec, declarations in a later layer always win over
 * earlier layers regardless of specificity, so retailer overrides in Custom
 * CSS always defeat module rules — this is the mechanism that guarantees
 * the admin field works as advertised.
 *
 * Layers come with a trade-off: UNLAYERED author styles (i.e. the host
 * theme's own CSS) beat layered styles for normal declarations, regardless
 * of specificity. The unlayered "armour" block at the very end of this file
 * closes that hole — see the comment there.
 */
@layer loxa-base, loxa-custom;
@layer loxa-base {

#loxa-magento-sidebar{
  all: unset;

}

/* The armour at the end of this file reverts host-theme declarations on
 * every Loxa element, so box-sizing falls back to the UA default
 * (content-box) wherever we don't say otherwise. All Loxa dimensions are
 * authored border-box (paddings inside fixed widths), so pin it explicitly
 * for the whole subtree of every Loxa root. */
#loxa-magento-sidebar, #loxa-magento-sidebar *,
#loxa-magento-sidebar-overlay,
#loxa-magento-offer, #loxa-magento-offer *,
#loxa-magento-inclusive-offer, #loxa-magento-inclusive-offer *,
.loxa-sidebar-scroll-indicator, .loxa-sidebar-scroll-indicator *,
.loxa-price-summary, .loxa-price-summary * {
  box-sizing: border-box;
}

.loxa-card .loxa-add-on-badge{
  all: unset;
}

.loxa-card .loxa-inclusive-badge{
  all: unset;
}



/* ===== Neutralise theme overrides on links & buttons inside Loxa PDP badges ===== */
#loxa-magento-offer a,
#loxa-magento-offer button,
#loxa-magento-inclusive-offer a,
#loxa-magento-inclusive-offer button,
#loxa-magento-sidebar a {
  text-transform: none;
  letter-spacing: normal;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  text-shadow: none;
  outline: none;
  border-radius: 0;
  transition: none;
  min-height: 0;
  min-width: 0;
  display: inline;
  vertical-align: baseline;
  white-space: normal;
  word-spacing: normal;
  text-indent: 0;
  opacity: 1;
}

/* Details / learn-more links */
#loxa-magento-offer .loxa-details-link,
#loxa-magento-offer .loxa-learn-more-link,
#loxa-magento-inclusive-offer .loxa-details-link,
#loxa-magento-inclusive-offer .loxa-learn-more-link,
#loxa-magento-inclusive-offer .loxa-hybrid-inclusive-details-link,
#loxa-magento-inclusive-offer .loxa-inclusive-details {
  color: #111827;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ===== Sidebar overlay ===== */
#loxa-magento-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}
#loxa-magento-sidebar-overlay.loxa-open {
  opacity: 1;
  pointer-events: auto;
}

/* ===== Sidebar panel ===== */
#loxa-magento-sidebar {
  position: fixed;
  top: 0;
  right: -100%;
  width: 90vw;
  max-width: 400px;
  height: 100vh;
  background: #ffffff;
  z-index: 999999;
  transition: right 0.3s ease-in-out, left 0.3s ease-in-out;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

/* ===== Sidebar header ===== */
.loxa-sidebar-header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: #eaffab;
  z-index: 1;
  color: #8d8d8d;
}
.loxa-sidebar-header img {
  height: 36px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
#loxa-magento-sidebar .loxa-sidebar-close {
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: #8d8d8d;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Sidebar content ===== */
#loxa-magento-sidebar-content {
  padding: 16px;
}
.loxa-sidebar-content-root {
  line-height: 1.6;
}

/* ===== Sidebar intro / heading ===== */
.loxa-sidebar-intro {
  margin-bottom: 8px;
}
#loxa-magento-sidebar-content h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 500;
}
.loxa-sidebar-powered-by {
  margin-bottom: 2rem;
  margin-top: 1px;
  font-size: 14px;
  color: #595959;
  font-weight: 300;
}
.loxa-sidebar-subheading {
  margin-top: 4px;
  margin-bottom: 2rem;
  font-size: 14px;
  color: #4B5563;
  font-weight: 300;
}
.loxa-inclusive-fallback-heading {
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
}

/* ===== Sidebar terms ===== */
.loxa-sidebar-terms {
  line-height: 1.6;
}
.loxa-sidebar-terms h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}
.loxa-sidebar-terms ul {
  padding-left: 0;
  margin-top: 4px;
  list-style: none;
}
.loxa-sidebar-terms li {
  margin-bottom: 6px;
  font-size: 13px;
  color: #374151;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.loxa-sidebar-terms li svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.loxa-sidebar-terms li span {
  flex: 1;
}
/* Inline anchors inside the terms / legal copy stay underlined so they
 * read as links — the sidebar-wide reset on #loxa-magento-sidebar a strips
 * decoration, so we restore it here for the prose blocks specifically. */
.loxa-sidebar-terms a,
.loxa-sidebar-legal a {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
}

/* ===== Footer pill ===== */
.loxa-footer-pill {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 14px;
  color: #4B5563;
  font-weight: 500;
  background: #f5fae1;
  padding: 1rem 3rem;
  text-align: center;
  border-radius: 8px;
}

/* ===== Sidebar options (radio rows) ===== */
.loxa-sidebar-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 8px;
  border: 1px solid #D1D5DB;
  background-color: #FFFFFF;
}
.loxa-sidebar-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.loxa-sidebar-option-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.loxa-sidebar-option-main {
  display: flex;
  align-items: center;
  gap: 8px;
}
.loxa-sidebar-option-circle {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1.5px solid #D1D5DB;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.loxa-sidebar-option-title {
  font-size: 14px;
  color: #111827;
  font-weight: 500;
}
.loxa-sidebar-option-price {
  font-size: 14px;
  color: #111827;
  font-weight: 500;
  margin-left: 12px;
}
.loxa-sidebar-option.loxa-selected {
  background-color: #F2FBFC;
  border-color: #111827;
}
.loxa-sidebar-option.loxa-selected .loxa-sidebar-option-title {
  font-weight: 600;
}
.loxa-sidebar-option.loxa-selected .loxa-sidebar-option-circle {
  background-color: #111827;
  border-color: #111827;
}

/* ===== Sidebar actions (CTA + remove) ===== */
.loxa-sidebar-actions {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#loxa-magento-sidebar .loxa-sidebar-cta {
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  background: #111827;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  display: block;
  text-align: center;
}
/* Inverted secondary button — matches .loxa-sidebar-cta dimensions but with
 * a light fill and dark text/border. Used for "No Thanks" (no selection) and
 * "Remove Protection" (selection present); same look applied to
 * .loxa-second-chance-continue so the sidebar has one consistent secondary CTA. */
#loxa-magento-sidebar .loxa-sidebar-remove {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #111827;
  background: #ffffff;
  color: #111827;
  font-size: 14px;
  cursor: pointer;
  display: block;
  text-align: center;
  text-decoration: none;
}

/* ===== Back to product button ===== */
#loxa-magento-sidebar .loxa-back-to-product {
  display: block;
  margin: 20px auto 0 auto;
  padding: 10px 16px;
  border-radius: 8px;
  width: calc(100% - 32px);
  box-sizing: border-box;
  background: #111827;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  border: none;
}

/* ===== Opt-out / text-link buttons ===== */
#loxa-magento-sidebar .loxa-inclusive-optout {
  display: block;
  margin: 12px auto 0 auto;
  font-size: 14px;
  color: #6B7280;
  cursor: pointer;
  text-align: center;
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#loxa-magento-sidebar .loxa-inclusive-readd {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: #111827;
  font-size: 12px;
  background: none;
  border: none;
  padding: 0;
  display: inline;
}

/* ===== Sidebar extra (terms below options) ===== */
.loxa-sidebar-extra {
  margin-top: 16px;
}

/* ===== Legal disclaimer ===== */
.loxa-sidebar-legal {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #E5E7EB;
  font-weight: 300;
}
.loxa-sidebar-legal p {
  margin: 0;
  font-size: 12px;
  color: rgb(111, 111, 111);
  line-height: 1.5;
}

/* ===== Scroll indicator ===== */
.loxa-sidebar-scroll-indicator {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 10000;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  background: rgba(17, 24, 39, 0.7);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}
.loxa-sidebar-scroll-indicator.loxa-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ===== Toggle visual (PDP badge) ===== */
.loxa-add-on-toggle.loxa-checked {
  border-color: #22c55e;
  background-color: #ecfdf3;
}
.loxa-add-on-toggle.loxa-checked .loxa-add-on-toggle-indicator {
  opacity: 1;
}
.loxa-add-on-toggle:not(.loxa-checked) .loxa-add-on-toggle-indicator {
  opacity: 0;
}

/* ===== Price summary ===== */
.loxa-price-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
  color: #111827;
  font-weight: 500;
}

/* ===== Opted-out badge ===== */
.loxa-opted-out {
  background-color: #f3f4f6;
}

/* ===== Fallback card ===== */
.loxa-insurance-card {
  background-color: #E6F2FF;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.loxa-insurance-card-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.loxa-offer-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.loxa-fallback-label {
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}
.loxa-fallback-description {
  padding-left: 26px;
  font-size: 12px;
  color: #666;
}
.loxa-fallback-description .loxa-details-link {
  text-decoration: underline;
  color: inherit;
  cursor: pointer;
}

/* ===== Utility: visually hidden ===== */
.loxa-visually-hidden {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  display: none;
}

/* ===== Dark / Midnight Mode ===== */

/* Shared: lime accents + structure for both dark themes */
#loxa-magento-sidebar[data-loxa-theme="dark"],
#loxa-magento-sidebar[data-loxa-theme="midnight"] {
  color: #f5f5f5;
}
#loxa-magento-sidebar[data-loxa-theme="dark"]::-webkit-scrollbar,
#loxa-magento-sidebar[data-loxa-theme="midnight"]::-webkit-scrollbar {
  width: 6px;
}
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-sidebar-header,
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-sidebar-header {
  border-bottom: 1px solid rgba(234, 255, 170, 0.15);
}
#loxa-magento-sidebar[data-loxa-theme="dark"] #loxa-magento-sidebar-content li svg[fill="none"],
#loxa-magento-sidebar[data-loxa-theme="midnight"] #loxa-magento-sidebar-content li svg[fill="none"] {
  stroke: #EAFFAA;
}
#loxa-magento-sidebar[data-loxa-theme="dark"] #loxa-magento-sidebar-content a,
#loxa-magento-sidebar[data-loxa-theme="midnight"] #loxa-magento-sidebar-content a {
  color: #EAFFAA;
}
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-sidebar-cta,
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-sidebar-cta {
  background: #EAFFAA;
  font-weight: 600;
}
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-back-to-product,
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-back-to-product {
  background: #EAFFAA;
}
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-footer-pill,
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-footer-pill {
  background: #f5fae1;
  color: #1a1a1a;
}
#loxa-magento-sidebar[data-loxa-theme="dark"] #loxa-magento-sidebar-content .loxa-footer-pill,
#loxa-magento-sidebar[data-loxa-theme="dark"] #loxa-magento-sidebar-content .loxa-footer-pill p,
#loxa-magento-sidebar[data-loxa-theme="midnight"] #loxa-magento-sidebar-content .loxa-footer-pill,
#loxa-magento-sidebar[data-loxa-theme="midnight"] #loxa-magento-sidebar-content .loxa-footer-pill p {
  color: #1a1a1a;
}

/* Dark mode (blue-gray) */
#loxa-magento-sidebar[data-loxa-theme="dark"] {
  background: #0F172A;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.6);
}
#loxa-magento-sidebar[data-loxa-theme="dark"]::-webkit-scrollbar-track { background: #0F172A; }
#loxa-magento-sidebar[data-loxa-theme="dark"]::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-sidebar-header { background: #1E293B; }
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-sidebar-close { color: #94A3B8; }
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-sidebar-close:hover { color: #F1F5F9; }
#loxa-magento-sidebar[data-loxa-theme="dark"] #loxa-magento-sidebar-content { color: #F1F5F9; }
#loxa-magento-sidebar[data-loxa-theme="dark"] #loxa-magento-sidebar-content h3 { color: #F1F5F9; }
#loxa-magento-sidebar[data-loxa-theme="dark"] #loxa-magento-sidebar-content h4 { color: #E2E8F0; }
#loxa-magento-sidebar[data-loxa-theme="dark"] #loxa-magento-sidebar-content p { color: #CBD5E1; }
#loxa-magento-sidebar[data-loxa-theme="dark"] #loxa-magento-sidebar-content li { color: #CBD5E1; }
#loxa-magento-sidebar[data-loxa-theme="dark"] #loxa-magento-sidebar-content li > span { color: #CBD5E1; }
#loxa-magento-sidebar[data-loxa-theme="dark"] #loxa-magento-sidebar-content li svg:not([fill="none"]) { fill: #94A3B8; }
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-sidebar-option { background-color: #1E293B; border-color: #334155; }
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-sidebar-option-title { color: #F1F5F9; }
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-sidebar-option-price { color: #F1F5F9; }
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-sidebar-option-circle { border-color: #475569; }
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-sidebar-cta { color: #0F172A; }
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-sidebar-remove {
  background: #1E293B;
  color: #F1F5F9;
  border-color: #F1F5F9;
}
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-back-to-product { color: #0F172A; }
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-inclusive-optout { color: #94A3B8; }
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-footer-pill { color: #1E293B; }
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-sidebar-legal { border-top-color: #334155; }
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-sidebar-legal p { color: #64748B; }

/* Midnight mode (true black) */
#loxa-magento-sidebar[data-loxa-theme="midnight"] {
  background: #0a0a0a;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.7);
}
#loxa-magento-sidebar[data-loxa-theme="midnight"]::-webkit-scrollbar-track { background: #0a0a0a; }
#loxa-magento-sidebar[data-loxa-theme="midnight"]::-webkit-scrollbar-thumb { background: #262626; border-radius: 3px; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-sidebar-header { background: #141414; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-sidebar-close { color: #737373; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-sidebar-close:hover { color: #f5f5f5; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] #loxa-magento-sidebar-content { color: #f5f5f5; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] #loxa-magento-sidebar-content h3 { color: #f5f5f5; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] #loxa-magento-sidebar-content h4 { color: #d4d4d4; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] #loxa-magento-sidebar-content p { color: #a3a3a3; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] #loxa-magento-sidebar-content li { color: #a3a3a3; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] #loxa-magento-sidebar-content li > span { color: #a3a3a3; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] #loxa-magento-sidebar-content li svg:not([fill="none"]) { fill: #737373; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-sidebar-option { background-color: #141414; border-color: #262626; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-sidebar-option-title { color: #f5f5f5; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-sidebar-option-price { color: #f5f5f5; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-sidebar-option-circle { border-color: #404040; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-sidebar-cta { color: #0a0a0a; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-sidebar-remove {
  background: #141414;
  color: #f5f5f5;
  border-color: #f5f5f5;
}
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-back-to-product { color: #0a0a0a; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-inclusive-optout { color: #737373; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-footer-pill { color: #171717; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-sidebar-legal { border-top-color: #262626; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-sidebar-legal p { color: #525252; }

/* Dark selected option */
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-sidebar-option.loxa-selected { background-color: #1a2e24; border-color: #EAFFAA; }
#loxa-magento-sidebar[data-loxa-theme="dark"] .loxa-sidebar-option.loxa-selected .loxa-sidebar-option-circle { background-color: #EAFFAA; border-color: #EAFFAA; }

/* Midnight selected option */
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-sidebar-option.loxa-selected { background-color: #1a1f1a; border-color: #EAFFAA; }
#loxa-magento-sidebar[data-loxa-theme="midnight"] .loxa-sidebar-option.loxa-selected .loxa-sidebar-option-circle { background-color: #EAFFAA; border-color: #EAFFAA; }

/* Base styles for Loxa snippets */

.loxa-card {

  border-radius: 12px;
  padding: 12px 16px;
  border: none;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  margin: 1rem 0 1rem 0;
  color: #0f172a;
}

.loxa-add-on-badge {
  background: #ebfafa; /* light pastel blue */
  display: block;
  max-width: 100%;
}

.loxa-extended-badge {
  background: #f5edfa;
  display: block;
  max-width: 100%;
}

.loxa-hybrid-inclusive {
  background: #f5f3f0;
  display: block;
  max-width: 100%;
}
.loxa-inclusive-badge {
  background: #f5fae1;
  display: block;
  max-width: 100%;
}
.loxa-inclusive-description {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #1f2933;
}

.loxa-add-on-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.loxa-hybrid-inclusive-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loxa-add-on-main {
  display: flex;
  align-items: center;
  gap: 8px;
}
.loxa-hybrid-inclusive-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.loxa-hybrid-inclusive-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background-color: #d4d4d4; /* grey circle */
  color: #000000; /* white tick, via stroke=currentColor on svg */
  flex-shrink: 0;
  padding: 5px; /* extra padding makes the tick appear smaller inside the circle */
}

.loxa-add-on-logo {
  height: 24px;
  width: auto;
  flex-shrink: 0;
}

.loxa-add-on-title {

  color: #0f172a;
}

.loxa-hybrid-inclusive-title {

  color: #0f172a;
}

.loxa-add-on-description {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #1f2933;
}

.loxa-hybrid-inclusive-description {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #1f2933;
}

/* "What's covered" list */

.loxa-whats-covered-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
}

.loxa-whats-covered-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.loxa-whats-covered-list li {
  position: relative;
  padding-left: 20px;
  margin: 2px 0;
}

.loxa-whats-covered-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #059669; /* green tick */
  font-weight: 700;
}

.loxa-add-on-toggle {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid #94a3b8;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.loxa-add-on-toggle-indicator {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #22c55e;
}

.loxa-learn-more-link {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: #2563eb;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
}


.loxa-learn-more-link:hover,
.loxa-learn-more-link:focus-visible {
  text-decoration: underline;
}

.loxa-learn-more-link-text {
  text-decoration: inherit;
}

/* Make the checkbox larger and use a black accent */
.loxa-offer-checkbox {
  width: 20px;
  height: 20px;
  transform: scale(1.2);        /* scale up; tweak as needed */
  transform-origin: center;
  accent-color: #000000;        /* black checkbox / check instead of blue */
}

.loxa-learn-more-link .loxa-details-link{
  z-index: auto;
  width: auto;
}

/* ===== Variant-change spinner ===== */
.loxa-spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.loxa-spinner {
  display: block;
  margin: auto;
}

/* ============================================================
 * V2 badge appearance (ported from bolt-shopify-app LT-452)
 * ------------------------------------------------------------
 * All V2 rules are keyed off three data-attrs stamped on the
 * .loxa-card root by loxa-magento.js when the admin `badge_v2`
 * flag is on:
 *
 *   data-loxa-badge-kind    = "addon" | "inclusive" | "hybrid-inclusive"
 *   data-loxa-badge-style   = "branded" | "plain" | "inherit"
 *   data-loxa-badge-layout  = "checkbox" | "checkbox-simple" | "button"  (addon only)
 *   data-loxa-badge-icon    = "logo" | "shield" | "none"
 *
 * When badge_v2 is off, none of these attrs are stamped, so all
 * V2 selectors no-op and the card renders exactly as it did
 * before. This file is kept deliberately in lockstep with
 * bolt-shopify-app/extensions/bolt-cover-theme-block-src/loxa-shopify.css
 * — keep them in sync when iterating.
 * ============================================================ */

/* ---- Style axis: plain (neutral grey) ---- */
.loxa-card[data-loxa-badge-style="plain"] {
  background: #f5f5f5;
  color: #1f2933;
  border: 1px solid #e2e2e2;
}
.loxa-card[data-loxa-badge-style="plain"].loxa-add-on-badge,
.loxa-card[data-loxa-badge-style="plain"].loxa-inclusive-badge,
.loxa-card[data-loxa-badge-style="plain"].loxa-hybrid-inclusive {
  background: #f5f5f5;
}
.loxa-card[data-loxa-badge-style="plain"] .loxa-add-on-title,
.loxa-card[data-loxa-badge-style="plain"] .loxa-inclusive-title,
.loxa-card[data-loxa-badge-style="plain"] .loxa-hybrid-inclusive-title {
  color: #1f2933;
}
.loxa-card[data-loxa-badge-style="plain"] .loxa-add-on-description,
.loxa-card[data-loxa-badge-style="plain"] .loxa-inclusive-description,
.loxa-card[data-loxa-badge-style="plain"] .loxa-hybrid-inclusive-description {
  color: #4a5568;
}

/* ---- Style axis: inherit (CSS-variable hooks for the host theme) ----
 * Each property reads from a named CSS custom property and falls back to
 * the "plain" baseline if the retailer hasn't defined one. Retailers can
 * skin the badge by setting these vars on a parent element (typically
 * :root or .loxa-card itself). Contract:
 *
 *   --loxa-badge-bg        Card background.
 *   --loxa-badge-text      Body / description colour.
 *   --loxa-badge-border    Card border colour (set to "transparent" to drop).
 *   --loxa-badge-font      Card font stack/size.
 *   --loxa-badge-heading   Title colour.
 *   --loxa-badge-cta-bg    Pill / checkbox active fill (button + simple layouts).
 *   --loxa-badge-cta-text  Pill text colour when checked.
 *
 * Without any variables defined, "inherit" looks identical to "plain". */
.loxa-card[data-loxa-badge-style="inherit"] {
  background: var(--loxa-badge-bg, #f5f5f5);
  color: var(--loxa-badge-text, #1f2933);
  border: 1px solid var(--loxa-badge-border, #e2e2e2);
  font: var(--loxa-badge-font, inherit);
}
.loxa-card[data-loxa-badge-style="inherit"].loxa-add-on-badge,
.loxa-card[data-loxa-badge-style="inherit"].loxa-inclusive-badge,
.loxa-card[data-loxa-badge-style="inherit"].loxa-hybrid-inclusive {
  background: var(--loxa-badge-bg, #f5f5f5);
}
.loxa-card[data-loxa-badge-style="inherit"] .loxa-add-on-title,
.loxa-card[data-loxa-badge-style="inherit"] .loxa-inclusive-title,
.loxa-card[data-loxa-badge-style="inherit"] .loxa-hybrid-inclusive-title {
  color: var(--loxa-badge-heading, #1f2933);
}
.loxa-card[data-loxa-badge-style="inherit"] .loxa-add-on-description,
.loxa-card[data-loxa-badge-style="inherit"] .loxa-inclusive-description,
.loxa-card[data-loxa-badge-style="inherit"] .loxa-hybrid-inclusive-description {
  color: var(--loxa-badge-text, #4a5568);
}
/* Pill (layout=button) overrides for inherit style — let the CTA vars drive */
.loxa-card[data-loxa-badge-style="inherit"][data-loxa-badge-layout^="button-"] .loxa-offer-checkbox {
  border-color: var(--loxa-badge-cta-bg, #111827);
  color: var(--loxa-badge-cta-bg, #111827);
}
.loxa-card[data-loxa-badge-style="inherit"][data-loxa-badge-layout^="button-"] .loxa-offer-checkbox:checked {
  background: var(--loxa-badge-cta-bg, #111827);
}
.loxa-card[data-loxa-badge-style="inherit"][data-loxa-badge-layout^="button-"] .loxa-offer-checkbox:checked::before {
  color: var(--loxa-badge-cta-text, #ffffff);
  mix-blend-mode: normal;
}
/* Square checkbox (layout=checkbox-simple) overrides */
.loxa-card[data-loxa-badge-style="inherit"][data-loxa-badge-layout="checkbox-simple"] .loxa-offer-checkbox {
  border-color: var(--loxa-badge-cta-bg, #111827);
  color: var(--loxa-badge-cta-bg, #111827);
}
.loxa-card[data-loxa-badge-style="inherit"][data-loxa-badge-layout="checkbox-simple"] .loxa-offer-checkbox:checked {
  background-color: var(--loxa-badge-cta-bg, #111827);
}

/* ---- Layout axis: button (addon only) ----
 * JS restructures .loxa-add-on-inner into 3 columns
 *   .loxa-icon-col | .loxa-text-col | .loxa-pill-col
 * The middle column stacks title + (hidden) description + Details link. */
.loxa-card[data-loxa-badge-layout^="button-"] .loxa-add-on-inner {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.loxa-card[data-loxa-badge-layout^="button-"] .loxa-icon-col {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
/* button-default: align icon + pill to the title row, not the whole text
 * stack — otherwise the icon drops down to centre against title+description. */
.loxa-card[data-loxa-badge-layout="button-default"] .loxa-add-on-inner {
  align-items: flex-start;
}
.loxa-card[data-loxa-badge-layout="button-default"] .loxa-icon-col,
.loxa-card[data-loxa-badge-layout="button-default"] .loxa-pill-col {
  align-self: flex-start;
  align-items: flex-start;
}
.loxa-card[data-loxa-badge-layout^="button-"] .loxa-text-col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.loxa-card[data-loxa-badge-layout^="button-"] .loxa-pill-col {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
/* button-simple hides the description entirely (title + pill only).
 * button-default keeps it visible with sensible spacing. */
.loxa-card[data-loxa-badge-layout="button-simple"] .loxa-add-on-description {
  display: none;
}
.loxa-card[data-loxa-badge-layout="button-default"] .loxa-add-on-description {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}
.loxa-card[data-loxa-badge-layout="button-simple"] .loxa-text-col .loxa-learn-more-link {
  font-size: 13px;
  line-height: 1.4;
  align-self: flex-start;
}

/* Restyle the native checkbox as the pill.
 * ::before on <input> requires appearance:none and is supported in modern
 * Chromium/Firefox/Safari. Older engines fall back to the native checkbox. */
.loxa-card[data-loxa-badge-layout^="button-"] .loxa-offer-checkbox {
  appearance: none;
  -webkit-appearance: none;
  position: static;
  transform: none;
  width: auto;
  height: auto;
  padding: 8px 18px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
}
.loxa-card[data-loxa-badge-layout^="button-"] .loxa-offer-checkbox::before {
  content: "+ Add";
}
.loxa-card[data-loxa-badge-layout^="button-"] .loxa-offer-checkbox:checked {
  background: currentColor;
}
.loxa-card[data-loxa-badge-layout^="button-"] .loxa-offer-checkbox:checked::before {
  content: "✓ Added";
  color: #ffffff;
  mix-blend-mode: difference;
}
.loxa-card[data-loxa-badge-layout^="button-"] .loxa-offer-checkbox:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Style overrides for the pill: branded + plain force black; inherit defers
 * to the host theme's currentColor (already set above). */
.loxa-card[data-loxa-badge-style="branded"][data-loxa-badge-layout^="button-"] .loxa-offer-checkbox,
.loxa-card[data-loxa-badge-style="plain"][data-loxa-badge-layout^="button-"] .loxa-offer-checkbox {
  border-color: #111827;
  color: #111827;
}
.loxa-card[data-loxa-badge-style="branded"][data-loxa-badge-layout^="button-"] .loxa-offer-checkbox:checked,
.loxa-card[data-loxa-badge-style="plain"][data-loxa-badge-layout^="button-"] .loxa-offer-checkbox:checked {
  background: #111827;
}
.loxa-card[data-loxa-badge-style="branded"][data-loxa-badge-layout^="button-"] .loxa-offer-checkbox:checked::before,
.loxa-card[data-loxa-badge-style="plain"][data-loxa-badge-layout^="button-"] .loxa-offer-checkbox:checked::before {
  color: #ffffff;
  mix-blend-mode: normal;
}

/* ---- Layout axis: checkbox-simple (addon only) ----
 * JS restructures .loxa-add-on-inner into a 2-group row:
 *   .loxa-simple-left (checkbox + optional icon + title) | .loxa-details-col
 * justify-content: space-between pushes the Details link to the far right;
 * the small gap inside .loxa-simple-left keeps that cluster tight. */
.loxa-card[data-loxa-badge-layout="checkbox-simple"] .loxa-add-on-inner {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.loxa-card[data-loxa-badge-layout="checkbox-simple"] .loxa-simple-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
}
.loxa-card[data-loxa-badge-layout="checkbox-simple"] .loxa-checkbox-col,
.loxa-card[data-loxa-badge-layout="checkbox-simple"] .loxa-icon-col,
.loxa-card[data-loxa-badge-layout="checkbox-simple"] .loxa-details-col {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.loxa-card[data-loxa-badge-layout="checkbox-simple"] .loxa-text-col {
  flex: 0 1 auto;
  min-width: 0;
}
.loxa-card[data-loxa-badge-layout="checkbox-simple"] .loxa-add-on-description {
  display: none;
}

/* Visible square checkbox (replaces the pill ::before from layout=button). */
.loxa-card[data-loxa-badge-layout="checkbox-simple"] .loxa-offer-checkbox {
  appearance: none;
  -webkit-appearance: none;
  position: static;
  transform: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-block;
}
.loxa-card[data-loxa-badge-layout="checkbox-simple"] .loxa-offer-checkbox::before {
  content: none;
}
.loxa-card[data-loxa-badge-layout="checkbox-simple"] .loxa-offer-checkbox:checked {
  background-color: currentColor;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5L6.5 12L13 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.loxa-card[data-loxa-badge-layout="checkbox-simple"] .loxa-offer-checkbox:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Style overrides for the simple checkbox: branded + plain use black. */
.loxa-card[data-loxa-badge-style="branded"][data-loxa-badge-layout="checkbox-simple"] .loxa-offer-checkbox,
.loxa-card[data-loxa-badge-style="plain"][data-loxa-badge-layout="checkbox-simple"] .loxa-offer-checkbox {
  border-color: #111827;
  color: #111827;
}
.loxa-card[data-loxa-badge-style="branded"][data-loxa-badge-layout="checkbox-simple"] .loxa-offer-checkbox:checked,
.loxa-card[data-loxa-badge-style="plain"][data-loxa-badge-layout="checkbox-simple"] .loxa-offer-checkbox:checked {
  background-color: #111827;
}

.loxa-card[data-loxa-badge-layout="checkbox-simple"] .loxa-details-col .loxa-learn-more-link {
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Icon axis: when the merchant overrides the icon on a hybrid-inclusive card,
 * drop the default grey-chip styling — the chip was designed for the built-in
 * tick SVG, not the merchant-supplied shield. */
.loxa-card[data-loxa-badge-icon="shield"] .loxa-hybrid-inclusive-icon {
  padding: 0;
  background: transparent;
  border-radius: 0;
}

/* ============================================================
 * Sidebar style axis: branded | plain | inherit
 * ------------------------------------------------------------
 * Keyed off data-loxa-sidebar-style on #loxa-magento-sidebar.
 * "branded" is the default and has no rules here — the existing
 * sidebar CSS at the top of this file handles it.
 *
 * "plain" strips the Loxa lime header + Neulis font for a neutral
 * white surface that doesn't fight the host theme.
 *
 * "inherit" extends "plain" with a CSS-variable contract. Each
 * surface reads from --loxa-sidebar-* and falls back to the plain
 * value, so a retailer who sets zero variables sees Plain output.
 * Documented contract:
 *
 *   --loxa-sidebar-bg              Panel background
 *   --loxa-sidebar-text            Body / paragraph colour
 *   --loxa-sidebar-heading         h3 / h4 / option-title colour
 *   --loxa-sidebar-font            Font stack (use "inherit" to follow body)
 *   --loxa-sidebar-header-bg       Sticky header strip background
 *   --loxa-sidebar-header-text     Header text + close button colour
 *   --loxa-sidebar-option-bg       Selectable plan card background
 *   --loxa-sidebar-option-border   Selectable plan card border
 *   --loxa-sidebar-cta-bg          Primary CTA fill
 *   --loxa-sidebar-cta-text        Primary CTA text colour
 *   --loxa-sidebar-secondary-bg    "No Thanks" / "Remove" fill
 *   --loxa-sidebar-secondary-text  "No Thanks" / "Remove" text
 *   --loxa-sidebar-secondary-border  "No Thanks" / "Remove" border
 * ============================================================ */

/* ---- Plain ---- */
#loxa-magento-sidebar[data-loxa-sidebar-style="plain"] {
  background: #ffffff;
  color: #1f2933;
  font-family: inherit;
}
#loxa-magento-sidebar[data-loxa-sidebar-style="plain"] .loxa-sidebar-header {
  background: #f5f5f5;
  color: #1f2933;
}
#loxa-magento-sidebar[data-loxa-sidebar-style="plain"] .loxa-sidebar-close {
  color: #1f2933;
}
#loxa-magento-sidebar[data-loxa-sidebar-style="plain"] #loxa-magento-sidebar-content,
#loxa-magento-sidebar[data-loxa-sidebar-style="plain"] #loxa-magento-sidebar-content h3,
#loxa-magento-sidebar[data-loxa-sidebar-style="plain"] #loxa-magento-sidebar-content h4,
#loxa-magento-sidebar[data-loxa-sidebar-style="plain"] #loxa-magento-sidebar-content p,
#loxa-magento-sidebar[data-loxa-sidebar-style="plain"] #loxa-magento-sidebar-content li {
  color: #1f2933;
}
#loxa-magento-sidebar[data-loxa-sidebar-style="plain"] .loxa-sidebar-option {
  background-color: #ffffff;
  border-color: #e2e2e2;
}
#loxa-magento-sidebar[data-loxa-sidebar-style="plain"] .loxa-sidebar-option-title,
#loxa-magento-sidebar[data-loxa-sidebar-style="plain"] .loxa-sidebar-option-price {
  color: #1f2933;
}
#loxa-magento-sidebar[data-loxa-sidebar-style="plain"] .loxa-sidebar-cta {
  background: #111827;
  color: #ffffff;
}
#loxa-magento-sidebar[data-loxa-sidebar-style="plain"] .loxa-sidebar-remove {
  background: #ffffff;
  color: #111827;
  border-color: #111827;
}

/* ---- Inherit (CSS-variable contract) ---- */
#loxa-magento-sidebar[data-loxa-sidebar-style="inherit"] {
  background: var(--loxa-sidebar-bg, #ffffff);
  color: var(--loxa-sidebar-text, #1f2933);
  font-family: var(--loxa-sidebar-font, inherit);
}
#loxa-magento-sidebar[data-loxa-sidebar-style="inherit"] .loxa-sidebar-header {
  background: var(--loxa-sidebar-header-bg, #f5f5f5);
  color: var(--loxa-sidebar-header-text, #1f2933);
}
#loxa-magento-sidebar[data-loxa-sidebar-style="inherit"] .loxa-sidebar-close {
  color: var(--loxa-sidebar-header-text, #1f2933);
}
#loxa-magento-sidebar[data-loxa-sidebar-style="inherit"] #loxa-magento-sidebar-content {
  color: var(--loxa-sidebar-text, #1f2933);
}
#loxa-magento-sidebar[data-loxa-sidebar-style="inherit"] #loxa-magento-sidebar-content h3,
#loxa-magento-sidebar[data-loxa-sidebar-style="inherit"] #loxa-magento-sidebar-content h4 {
  color: var(--loxa-sidebar-heading, #1f2933);
}
#loxa-magento-sidebar[data-loxa-sidebar-style="inherit"] #loxa-magento-sidebar-content p,
#loxa-magento-sidebar[data-loxa-sidebar-style="inherit"] #loxa-magento-sidebar-content li {
  color: var(--loxa-sidebar-text, #1f2933);
}
#loxa-magento-sidebar[data-loxa-sidebar-style="inherit"] .loxa-sidebar-option {
  background-color: var(--loxa-sidebar-option-bg, #ffffff);
  border-color: var(--loxa-sidebar-option-border, #e2e2e2);
}
#loxa-magento-sidebar[data-loxa-sidebar-style="inherit"] .loxa-sidebar-option-title,
#loxa-magento-sidebar[data-loxa-sidebar-style="inherit"] .loxa-sidebar-option-price {
  color: var(--loxa-sidebar-heading, #1f2933);
}
#loxa-magento-sidebar[data-loxa-sidebar-style="inherit"] .loxa-sidebar-cta {
  background: var(--loxa-sidebar-cta-bg, #111827);
  color: var(--loxa-sidebar-cta-text, #ffffff);
}
#loxa-magento-sidebar[data-loxa-sidebar-style="inherit"] .loxa-sidebar-remove {
  background: var(--loxa-sidebar-secondary-bg, #ffffff);
  color: var(--loxa-sidebar-secondary-text, #111827);
  border-color: var(--loxa-sidebar-secondary-border, #111827);
}

} /* end @layer loxa-base */

/* ============================================================
 * CSS ARMOUR — deliberately OUTSIDE all layers. Do not move.
 * ------------------------------------------------------------
 * Host themes ship unlayered CSS, and unlayered author styles beat
 * anything inside @layer loxa-base / loxa-custom regardless of
 * specificity. A theme rule as blunt as `img { height: auto }` or
 * `button { background: hotpink }` would therefore deface every
 * element this module renders.
 *
 * This block fights on the host theme's own ground: it is unlayered
 * too, so the contest against theme rules is decided by plain
 * specificity — which the ID-scoped selectors below win against
 * element/class-level theme rules (the class-only roots are doubled
 * to out-rank theme rules like `button:hover`). Having won,
 * `all: revert-layer` discards the entire unlayered level and
 * re-resolves the cascade from the Loxa layers down: loxa-custom,
 * then loxa-base, then UA defaults. Net effect: host CSS is shut
 * out of Loxa elements, while the loxa-base → loxa-custom override
 * order (the admin Custom CSS contract) is fully preserved.
 *
 * `all` does not touch custom properties, so the documented
 * --loxa-badge-* / --loxa-sidebar-* theming contracts still work.
 * Inline styles set by loxa-magento.js also sit above this rule.
 *
 * Covers every root the module creates: the two PDP badges, their
 * anchors, the sidebar + overlay, the body-mounted scroll
 * indicator, and the price summary inserted as a badge sibling.
 * ============================================================ */
#loxa-magento-sidebar-overlay,
#loxa-magento-sidebar, #loxa-magento-sidebar *,
#loxa-magento-offer, #loxa-magento-offer *,
#loxa-magento-inclusive-offer, #loxa-magento-inclusive-offer *,
#loxa-magento-addon-anchor, #loxa-magento-addon-anchor *,
#loxa-magento-inclusive-anchor, #loxa-magento-inclusive-anchor *,
.loxa-sidebar-scroll-indicator.loxa-sidebar-scroll-indicator,
.loxa-sidebar-scroll-indicator.loxa-sidebar-scroll-indicator *,
.loxa-price-summary.loxa-price-summary,
.loxa-price-summary.loxa-price-summary * {
  all: revert-layer;
}