/* ==========================================================================
   DSMM Frontend — v2.1 (corrected class names + professional design)
   All selectors match exactly what dsmm-frontend.js renders at runtime.
   Zero bleed: every rule prefixed .dsmm-* or #dsmm-*.
   ========================================================================== */

/* ── CSS custom props ──────────────────────────────────────────────────────
   Variable names MUST match build_style_vars() in class-renderer.php
   and buildStyleVars() in dsmm-frontend.js.
   ────────────────────────────────────────────────────────────────────────── */
/* Default values scoped to DSMM containers only — never touches :root or theme vars */
.dsmm-shell,
#dsmm-bar-root,
#dsmm-sidebar-root,
#dsmm-geo-popup {
  --dsmm-panel:       #ffffff;
  --dsmm-text:        #18181b;
  --dsmm-accent:      #c62828;
  --dsmm-button:      #c62828;
  --dsmm-button-text: #ffffff;
  --dsmm-overlay:     #111827;
  --dsmm-font:        inherit;
  --dsmm-radius:      14px;
}

/* ── Keyframe animations ────────────────────────────────────────────────── */
@keyframes dsmm-fade-up   { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes dsmm-slide-up  { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes dsmm-zoom-in   { from { opacity:0; transform:scale(.92);       } to { opacity:1; transform:scale(1);    } }
@keyframes dsmm-fade-in   { from { opacity:0; }                              to { opacity:1; }                         }
@keyframes dsmm-slide-right { from { transform:translateX(110%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes dsmm-slide-left  { from { transform:translateX(-110%); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* ── Shell wrappers ─────────────────────────────────────────────────────────
   JS creates .dsmm-shell elements and injects rendered markup inside them.
   ────────────────────────────────────────────────────────────────────────── */
.dsmm-shell {
  box-sizing: border-box;
  font-family: var(--dsmm-font, inherit);
}
.dsmm-shell *,
.dsmm-shell *::before,
.dsmm-shell *::after {
  box-sizing: inherit;
}

/* Floating CTA — fixed bottom-right by default */
.dsmm-shell--floating {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 99990;
  max-width: 380px;
  width: calc(100vw - 40px);
}
.dsmm-shell--floating.dsmm-pos--left {
  right: auto;
  left: 20px;
}

/* Popup (exit intent / timed) — fixed, centered */
.dsmm-shell--popup {
  position: fixed;
  inset: 0;
  z-index: 99995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
}
.dsmm-shell--popup .dsmm-card {
  pointer-events: all;
  max-width: 480px;
  width: 100%;
}

/* In-content (inline inside post content) */
.dsmm-shell--inline {
  display: block;
  margin: 28px 0;
  width: 100%;
  clear: both;
}

/* ── Animation classes — JS adds these to .dsmm-shell elements ──────────── */
.dsmm-anim--fade-up  { animation: dsmm-fade-up  .42s ease both; }
.dsmm-anim--slide-up { animation: dsmm-slide-up .42s ease both; }
.dsmm-anim--zoom-in  { animation: dsmm-zoom-in  .35s ease both; }
.dsmm-anim--fade-in  { animation: dsmm-fade-in  .38s ease both; }

/* ── Dark overlay behind popups ─────────────────────────────────────────── */
.dsmm-overlay {
  position: fixed;
  inset: 0;
  z-index: 99994;
  background: rgba(17, 24, 39, 0.68);
  opacity: 0;
  transition: opacity .28s ease;
  backdrop-filter: blur(2px);
}
.dsmm-overlay--visible { opacity: 1; }

/* ── Card — base styles (floating / popup / in-content) ────────────────── */
.dsmm-card {
  font-family: var(--dsmm-font, inherit);
  background: var(--dsmm-panel);
  color: var(--dsmm-text);
  border-radius: var(--dsmm-radius, 10px);
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .10), 0 4px 14px rgba(15, 23, 42, .06);
  position: relative;
  padding: 24px 24px 22px;
  overflow: hidden;
}

/* Accent stripe on top of every card */
.dsmm-card::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--dsmm-accent);
  border-radius: var(--dsmm-radius, 10px) var(--dsmm-radius, 10px) 0 0;
}

.dsmm-card__inner,
.dsmm-card__body {
  display: block;
}

.dsmm-card__media {
  margin-top: 16px;
}

.dsmm-card__icon-wrap {
  margin-bottom: 12px;
}

.dsmm-card__badge {
  display: inline-block;
  background: var(--dsmm-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .10);
}

.dsmm-card__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--dsmm-text);
}

.dsmm-card__description {
  font-size: 14px;
  line-height: 1.55;
  opacity: .82;
  margin: 0 0 14px;
}

.dsmm-card__secondary {
  font-size: 12px;
  opacity: .70;
  margin: 0 0 12px;
  line-height: 1.45;
}

.dsmm-card__icon {
  display: inline-block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .08);
  margin: 0 0 12px;
}

.dsmm-card__form {
  margin: 0 0 14px;
}

.dsmm-card__image {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 14px;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(15, 23, 42, .08);
}

.dsmm-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  align-items: center;
}

.dsmm-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(0, 0, 0, .07);
  border: none;
  color: var(--dsmm-text);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s;
  z-index: 1;
}
.dsmm-close:hover { background: rgba(0, 0, 0, .14); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.dsmm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 10px;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: opacity .15s, transform .12s;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .01em;
}
.dsmm-btn:hover {
  opacity: .88;
  transform: translateY(-1px);
}

.dsmm-btn--primary {
  background: var(--dsmm-button);
  color: var(--dsmm-button-text) !important;
  box-shadow: 0 10px 20px rgba(198, 40, 40, .18);
}

.dsmm-btn--whatsapp {
  background: #25D366;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 211, 102, .28);
}
.dsmm-btn--whatsapp::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── In-content card specifics ──────────────────────────────────────────── */
.dsmm-card--in_content {
  max-width: 100% !important;
  box-shadow: none;
  border: 1px solid rgba(198, 40, 40, .12);
  border-left: 4px solid var(--dsmm-accent);
  border-radius: 12px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(198, 40, 40, .05), rgba(255, 255, 255, 1) 55%);
}
.dsmm-card--in_content::before { display: none; }

/* Desktop: horizontal layout — copy text left, button right */
@media (min-width: 640px) {
  .dsmm-card--in_content {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
  }
  .dsmm-card--in_content .dsmm-card__copy {
    flex: 1;
    min-width: 0;
  }
  .dsmm-card--in_content .dsmm-card__actions {
    flex-shrink: 0;
    margin-top: 0;
  }
}
.dsmm-card--in_content .dsmm-card__title { font-size: 16px; margin-bottom: 4px; }
.dsmm-card--in_content .dsmm-card__description { font-size: 13px; margin-bottom: 0; }

/* ── Sticky bar ─────────────────────────────────────────────────────────── */
/* Root: full-width fixed container. pointer-events:none keeps the page
   underneath fully clickable — only .dsmm-bar itself catches events.      */
#dsmm-bar-root {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99992;
  padding: 0 20px 16px;
  display: none;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}
#dsmm-bar-root:not([aria-hidden]) { display: flex; }

#dsmm-bar-root.dsmm-bar-pos--left  { justify-content: flex-start; }
#dsmm-bar-root.dsmm-bar-pos--right { justify-content: flex-end; }
#dsmm-bar-root.dsmm-bar-pos--full  { padding: 0; }

#dsmm-bar-root.dsmm-anim--fade-up  { animation: dsmm-fade-up  .42s ease both; }
#dsmm-bar-root.dsmm-anim--slide-up { animation: dsmm-slide-up .42s ease both; }
#dsmm-bar-root.dsmm-anim--zoom-in  { animation: dsmm-zoom-in  .35s ease both; }
#dsmm-bar-root.dsmm-anim--fade-in  { animation: dsmm-fade-in  .38s ease both; }

/* The bar card itself — floats above the page, clearly a CTA overlay */
.dsmm-bar {
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  max-width: 860px;
  width: 100%;
  background: var(--dsmm-panel);
  color: var(--dsmm-text);
  border-radius: 16px;
  padding: 14px 18px 14px 22px;
  box-shadow:
    0 16px 40px rgba(15, 23, 42, .16),
    0 4px 12px  rgba(15, 23, 42, .10);
  border: 1px solid rgba(255, 255, 255, .08);
  border-top: 3px solid var(--dsmm-accent);
  position: relative;
}
/* Full-width mode: flush to edges, no border-radius */
#dsmm-bar-root.dsmm-bar-pos--full { padding: 0; }
#dsmm-bar-root.dsmm-bar-pos--full .dsmm-bar {
  max-width: 100%;
  border-radius: 0;
}

/* Content column: clips text so it never pushes buttons off screen */
.dsmm-bar__content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.dsmm-bar__badge {
  display: inline-block;
  background: var(--dsmm-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 5px;
  white-space: nowrap;
}
.dsmm-bar__title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
  color: var(--dsmm-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dsmm-bar__sub {
  font-size: 12px;
  opacity: .75;
  margin: 3px 0 0;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Buttons: never shrink — always fully visible */
.dsmm-bar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.dsmm-bar__actions .dsmm-btn {
  white-space: nowrap;
  padding: 10px 20px;
  font-size: 13px;
}
/* Close: subtle inline button */
#dsmm-bar-root .dsmm-close {
  position: static;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, .06);
  color: var(--dsmm-text);
  border-radius: 50%;
  opacity: .7;
}
#dsmm-bar-root .dsmm-close:hover { opacity: 1; background: rgba(0, 0, 0, .12); }

/* ── Sidebar sticky ─────────────────────────────────────────────────────── */
/* Root anchors to right edge (or left when .dsmm-sidebar--left is added by JS) */
#dsmm-sidebar-root {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 99991;
  display: none;
}
#dsmm-sidebar-root:not([aria-hidden]) { display: block; }

/* Left-side variant — JS adds this class */
#dsmm-sidebar-root.dsmm-sidebar--left { right: auto; left: 0; }

/* Inner wrapper: tab button + panel side-by-side */
.dsmm-sidebar {
  position: relative;
  display: flex;
  align-items: center;
}

/* RIGHT sidebar: tab on right, panel slides out to left */
/* flex-direction: row-reverse puts tab last in DOM order but first visually on right */
.dsmm-sidebar:not(.dsmm-sidebar--always) { flex-direction: row-reverse; }

/* The tab pill (vertical text, sticks out from edge) */
.dsmm-sidebar__tab {
  cursor: pointer;
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* text reads bottom-to-top for right side */
  padding: 18px 10px;
  border: none;
  border-radius: 12px 0 0 12px; /* rounded on left edge */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  background: var(--dsmm-button);
  color: var(--dsmm-button-text) !important;
  transition: opacity .15s;
  line-height: 1.2;
  text-align: center;
  flex-shrink: 0;
  box-shadow: 0 12px 24px rgba(15, 23, 42, .16);
}
.dsmm-sidebar__tab:hover { opacity: .9; }

/* LEFT sidebar tab: rounded on right edge, text reads top-to-bottom */
#dsmm-sidebar-root.dsmm-sidebar--left .dsmm-sidebar__tab {
  border-radius: 0 12px 12px 0;
  transform: rotate(0deg);
}

/* Panel: hidden by default, positioned to slide out from tab edge */
.dsmm-sidebar__panel {
  display: none;
  width: 300px;
  background: var(--dsmm-panel);
  color: var(--dsmm-text);
  border-radius: 16px 0 0 16px; /* for right-side: left corners rounded */
  box-shadow: -10px 0 28px rgba(15, 23, 42, .14);
  padding: 24px 20px 20px;
  position: relative;
  flex-shrink: 0;
  border: 1px solid rgba(15, 23, 42, .08);
}
.dsmm-sidebar__panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--dsmm-accent);
  border-radius: 16px 0 0 0;
}

/* Panel open states */
.dsmm-sidebar__panel--open {
  display: block;
  animation: dsmm-slide-right .3s ease both;
}
.dsmm-sidebar__panel--always { display: block; }

/* Left sidebar panel adjustments */
#dsmm-sidebar-root.dsmm-sidebar--left .dsmm-sidebar__panel {
  border-radius: 0 16px 16px 0;
  box-shadow: 10px 0 28px rgba(15, 23, 42, .14);
}
#dsmm-sidebar-root.dsmm-sidebar--left .dsmm-sidebar__panel::before {
  border-radius: 0 16px 0 0;
}
#dsmm-sidebar-root.dsmm-sidebar--left .dsmm-sidebar__panel--open {
  animation: dsmm-slide-left .3s ease both;
}

.dsmm-sidebar__badge {
  display: inline-block;
  background: var(--dsmm-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.dsmm-sidebar__title { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: var(--dsmm-text); }
.dsmm-sidebar__desc  { font-size: 13px; opacity: .82; margin: 0 0 14px; line-height: 1.45; }
.dsmm-sidebar__actions { display: flex; flex-direction: column; gap: 8px; }
.dsmm-sidebar__actions .dsmm-btn { justify-content: center; }

/* ── Countdown timer ────────────────────────────────────────────────────── */
.dsmm-card__countdown {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  margin-top: 10px;
  opacity: .9;
}
.dsmm-card__countdown-label { font-size: 12px; margin-right: 4px; }
.dsmm-card__countdown-value {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--dsmm-accent);
}

/* ── Geo redirect popup ─────────────────────────────────────────────────── */
#dsmm-geo-popup {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.dsmm-geo-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, .70);
  backdrop-filter: blur(3px);
  animation: dsmm-fade-in .3s ease both;
}
.dsmm-geo-popup__box {
  position: relative;
  background: #fff;
  color: #18181b;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  padding: 34px 28px 28px;
  max-width: 420px;
  width: 100%;
  animation: dsmm-zoom-in .35s ease both;
  text-align: center;
  border-top: 4px solid var(--dsmm-accent);
}
.dsmm-geo-popup__heading { font-size: 20px; font-weight: 700; margin: 0 0 10px; color: #1d2327; }
.dsmm-geo-popup__sub { font-size: 14px; color: #555; margin: 0 0 24px; line-height: 1.55; }
.dsmm-geo-popup__btns { display: flex; flex-direction: column; gap: 10px; }
.dsmm-geo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 24px; border-radius: 8px; font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: none !important;
  transition: opacity .15s, transform .12s; border: none;
}
.dsmm-geo-btn:hover { opacity: .88; transform: translateY(-1px); }
.dsmm-geo-btn--primary { background: var(--dsmm-button, #e67e22); color: var(--dsmm-button-text, #fff) !important; box-shadow: 0 2px 8px rgba(0,0,0,.14); }
.dsmm-geo-btn--ghost { background: transparent; color: #777 !important; border: 1px solid #ddd; font-weight: 400; }
.dsmm-geo-btn--ghost:hover { background: #f5f5f5; }

/* ── Mobile tweaks ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .dsmm-shell--floating { max-width: calc(100vw - 24px); bottom: 16px; right: 12px; }
  .dsmm-shell--floating.dsmm-pos--left { right: auto; left: 12px; }
  .dsmm-card { padding: 18px 16px 16px; }
  .dsmm-card__title { font-size: 16px; }
  #dsmm-bar-root { padding: 0 10px 10px; }
  .dsmm-bar {
    flex-wrap: wrap;
    padding: 14px 14px 14px 16px;
    border-radius: 10px;
    gap: 10px;
  }
  .dsmm-bar__title { font-size: 14px; white-space: normal; }
  .dsmm-bar__actions { width: 100%; flex-wrap: wrap; }
  .dsmm-bar__actions .dsmm-btn { flex: 1; min-width: 120px; text-align: center; justify-content: center; }
  .dsmm-sidebar__panel { width: min(260px, calc(100vw - 24px)); }
}

@media (max-width: 767px) {
  #dsmm-sidebar-root {
    top: auto;
    bottom: 16px;
    right: 12px;
    transform: none;
  }
  #dsmm-sidebar-root.dsmm-sidebar--left {
    left: 12px;
    right: auto;
  }
  .dsmm-sidebar {
    display: block;
  }
  .dsmm-sidebar__tab {
    writing-mode: horizontal-tb;
    transform: none;
    border-radius: 999px;
    padding: 12px 16px;
    font-size: 12px;
    letter-spacing: .04em;
  }
  #dsmm-sidebar-root.dsmm-sidebar--left .dsmm-sidebar__tab {
    border-radius: 999px;
  }
  .dsmm-sidebar__panel,
  #dsmm-sidebar-root.dsmm-sidebar--left .dsmm-sidebar__panel {
    width: min(320px, calc(100vw - 24px));
    margin-bottom: 10px;
    border-radius: 16px;
  }
  .dsmm-sidebar__panel::before,
  #dsmm-sidebar-root.dsmm-sidebar--left .dsmm-sidebar__panel::before {
    border-radius: 16px 16px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dsmm-shell,
  .dsmm-overlay,
  .dsmm-card,
  .dsmm-btn,
  .dsmm-sidebar__panel,
  #dsmm-bar-root,
  #dsmm-sidebar-root,
  .dsmm-geo-popup__backdrop,
  .dsmm-geo-popup__box {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}