:root{
  --dnssa-primary:#3267FF;
  --dnssa-ink:#000A2D;
  --dnssa-muted:#54595F;

  --dnssa-bg:#FFFFFF;
  --dnssa-surface:#FFFFFF;
  --dnssa-surface-2:#F4F7FF;

  --dnssa-border:#E5E7EB;
  --dnssa-shadow:0 14px 40px rgba(0,10,45,0.10);
}

.dnssa-wrap{
  width:100%;
  padding:16px 0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--dnssa-ink);}

/*
  Theme isolation
  Some themes apply heavy global styles (buttons, spans, links) that leak into plugin UI.
  We reset only the interactive surfaces and keep headings typography.
*/
.dnssa-shell, .dnssa-shell *{box-sizing:border-box;}
.dnssa-shell a{color:inherit; text-decoration:none;}
.dnssa-shell button, .dnssa-shell input{font:inherit;}

/* Prevent theme button styles leaking into our components */
.dnssa-shell .dnssa-btn,
.dnssa-shell .dnssa-choice,
.dnssa-shell .dnssa-opt-ui,
.dnssa-shell .dnssa-review-item{
  -webkit-appearance:none;
  appearance:none;
  text-decoration:none !important;
  outline:none;
}


.dnssa-shell{
  max-width:920px;
  margin:0 auto;
  background:linear-gradient(180deg, var(--dnssa-bg) 0%, #fff 70%);
  border:1px solid var(--dnssa-border);
  border-radius:24px !important;
  box-shadow:var(--dnssa-shadow);
  overflow:hidden;
  position:relative;
}

/* Subtle page background pattern (scoped to assessment only) */
.dnssa-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../assets/img/bg-pattern.png");
  background-repeat:repeat;
  background-size:900px auto;
  opacity:0.065;
  pointer-events:none;
  filter:grayscale(1) hue-rotate(210deg);
  z-index:0;
}
.dnssa-shell > *{ position:relative; z-index:1; }

.dnssa-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 18px 14px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--dnssa-border);
}

.dnssa-brand{display:flex; align-items:center; gap:12px;}
.dnssa-mark{
  width:42px; height:42px;
  border-radius:14px;
  background:var(--dnssa-primary);
  /* Tooth / smile mark (no emoji face) */
  -webkit-mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M32%206c-9.9%200-18%208.1-18%2018%200%203.8%201.4%207.3%203.8%2010.2%201.5%201.8%202.3%204.1%202.6%206.7.4%203.3%201%206.3%202%208.8%201.3%203.4%203.5%205.3%206.3%205.3%202.5%200%204.3-1.4%205.3-4.1%201-3.2%201.8-6.8%203.9-6.8s2.9%203.6%203.9%206.8c1%202.7%202.8%204.1%205.3%204.1%202.8%200%205-1.9%206.3-5.3%201-2.6%201.6-5.5%202-8.8.3-2.6%201.1-4.9%202.6-6.7%202.4-2.9%203.8-6.4%203.8-10.2%200-9.9-8.1-18-18-18zm0%206c6.6%200%2012%205.4%2012%2012%200%202.4-.9%204.6-2.4%206.4-2.2%202.7-3.3%206-3.8%209.6-.3%202.5-.8%204.8-1.5%206.6-.4%201.1-.8%201.5-1.1%201.7-.1-.3-.2-.7-.3-1-.8-2.7-2.3-9.1-9-9.1s-8.2%206.4-9%209.1c-.1.3-.2.7-.3%201-.3-.2-.7-.6-1.1-1.7-.7-1.8-1.2-4.1-1.5-6.6-.5-3.6-1.6-6.9-3.8-9.6-1.5-1.8-2.4-4-2.4-6.4%200-6.6%205.4-12%2012-12z%22/%3E%3C/svg%3E') no-repeat center / 80%;
  mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M32%206c-9.9%200-18%208.1-18%2018%200%203.8%201.4%207.3%203.8%2010.2%201.5%201.8%202.3%204.1%202.6%206.7.4%203.3%201%206.3%202%208.8%201.3%203.4%203.5%205.3%206.3%205.3%202.5%200%204.3-1.4%205.3-4.1%201-3.2%201.8-6.8%203.9-6.8s2.9%203.6%203.9%206.8c1%202.7%202.8%204.1%205.3%204.1%202.8%200%205-1.9%206.3-5.3%201-2.6%201.6-5.5%202-8.8.3-2.6%201.1-4.9%202.6-6.7%202.4-2.9%203.8-6.4%203.8-10.2%200-9.9-8.1-18-18-18zm0%206c6.6%200%2012%205.4%2012%2012%200%202.4-.9%204.6-2.4%206.4-2.2%202.7-3.3%206-3.8%209.6-.3%202.5-.8%204.8-1.5%206.6-.4%201.1-.8%201.5-1.1%201.7-.1-.3-.2-.7-.3-1-.8-2.7-2.3-9.1-9-9.1s-8.2%206.4-9%209.1c-.1.3-.2.7-.3%201-.3-.2-.7-.6-1.1-1.7-.7-1.8-1.2-4.1-1.5-6.6-.5-3.6-1.6-6.9-3.8-9.6-1.5-1.8-2.4-4-2.4-6.4%200-6.6%205.4-12%2012-12z%22/%3E%3C/svg%3E') no-repeat center / 80%;
  box-shadow:0 10px 22px rgba(var(--dnssa-primary-rgb, 50,103,255),0.22);
}

.dnssa-title{font-weight:700; font-size:16px; color:var(--dnssa-ink); line-height:1.2;}
.dnssa-subtitle{font-size:12px; color:var(--dnssa-muted); margin-top:2px;}

.dnssa-progress{min-width:220px;}
.dnssa-progress-bar{height:10px; background:rgba(var(--dnssa-primary-rgb, 50,103,255),0.10); border-radius:999px; overflow:hidden; border:1px solid rgba(var(--dnssa-primary-rgb, 50,103,255),0.18);}
.dnssa-progress-bar span{display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--dnssa-primary), var(--dnssa-ink)); transition:width .25s ease;}
.dnssa-progress-meta{margin-top:6px; font-size:12px; color:var(--dnssa-muted); text-align:right;}

.dnssa-body{
  padding:18px;
  transition: opacity .28s ease, transform .28s ease;
  will-change: opacity, transform;
}

/* Fade out/in between steps */
.dnssa-body.dnssa-is-fading{
  opacity:0;
  transform: translateY(10px);
}

@media (prefers-reduced-motion: reduce){
  .dnssa-body{transition:none;}
}

.dnssa-card{
  background:var(--dnssa-surface);
  border:1px solid var(--dnssa-border);
  border-radius:16px;
  padding:18px;
}

.dnssa-card > h2{margin:0 0 12px; font-size:22px; letter-spacing:-0.01em; color:var(--dnssa-ink);}
.dnssa-card > h2.dnssa-qh2{margin:0; padding-bottom:25px;}
.dnssa-card > h2 + p{margin-top:0; margin-bottom:22px;}

/* Ensure consistent spacing for question blocks inside steps */
.dnssa-card h3{margin:0 0 12px; font-size:20px; letter-spacing:-0.01em; color:var(--dnssa-ink);}
.dnssa-card h3 + p{margin-top:0; margin-bottom:22px;}

.dnssa-muted{color:var(--dnssa-muted); margin:0 0 18px; line-height:1.6;}

.dnssa-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width: 700px){
  .dnssa-header{flex-direction:column;}
  .dnssa-progress{width:100%;}
  .dnssa-progress-meta{text-align:left;}
  .dnssa-grid{grid-template-columns:1fr;}
}

.dnssa-field span{display:block; font-size:12px; color:var(--dnssa-muted); margin-bottom:6px;}
.dnssa-field input{
  width:100%;
  border:1px solid var(--dnssa-border);
  border-radius:12px;
  padding:12px 12px;
  font-size:14px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.dnssa-field select{
  width:100%;
  border:1px solid var(--dnssa-border);
  border-radius:12px;
  padding:12px 12px;
  font-size:14px;
  outline:none;
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.dnssa-field input:focus{
  border-color:var(--dnssa-primary);
  box-shadow:0 0 0 4px rgba(var(--dnssa-primary-rgb, 50,103,255),0.18);
}
.dnssa-field select:focus{
  border-color:var(--dnssa-primary);
  box-shadow:0 0 0 4px rgba(var(--dnssa-primary-rgb, 50,103,255),0.18);
}

/* Phone field (country selector + number) */
.dnssa-phone{display:flex; gap:10px; align-items:stretch;}
.dnssa-phone-country{flex: 1.1;}
.dnssa-phone-input{flex: 0.9;}
.dnssa-help{display:block; margin-top:6px; font-size:12px; color:var(--dnssa-muted);}
@media (max-width: 600px){
  .dnssa-phone{flex-direction:column;}
}

.dnssa-divider{height:1px; background:var(--dnssa-border); margin:14px 0;}

.dnssa-cards-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:700px){ .dnssa-cards-2{grid-template-columns:1fr;} }


/* Choice cards + option cards (unified look) */
.dnssa-choice-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px; padding-top:10px;padding-bottom:20px;}
@media (max-width:700px){ .dnssa-choice-grid{grid-template-columns:1fr;} }

.dnssa-choice{
  position:relative;
  text-align:left;
  border:1px solid #020F39 !important;
  border-radius:24px !important;
  padding:18px;
  background:#ffffff !important;
  color:var(--dnssa-ink) !important;
  box-sizing:border-box !important;
  width:100% !important;
  cursor:pointer;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

/* Decorative "Select" badge inside Pain/Gain cards (visual only) */
.dnssa-choice-select-badge{
  position:absolute;
  top:12px;
  right:12px;
  padding:6px 14px;
  border-radius:50px;
  background:#F0F3FF;
  color:#020F39;
  font-size:12px;
  font-weight:600;
  line-height:1;
  pointer-events:none;
  user-select:none;
}
.dnssa-choice:hover{transform:translateY(-2px); border-color:#020F39 !important; box-shadow:0 14px 30px rgba(0,10,45,0.10); background:#020F39 !important;}
.dnssa-choice.is-selected{border-color:#020F39 !important; background:#020F39 !important; box-shadow:0 0 0 2px rgb(2, 15, 57, 0.6), 0 14px 30px rgba(0,10,45,0.10);}

.dnssa-choice:hover .dnssa-choice-title { color: #fff;}
.dnssa-choice.is-selected .dnssa-choice-title { color: #fff;}
.dnssa-choice-emoji{font-size:22px; line-height:1; margin-bottom:10px;}
.dnssa-choice-title{font-size:16px; font-weight:700; color:var(--dnssa-ink) !important;}
.dnssa-choice-sub{font-size:13px; color:var(--dnssa-muted) !important; line-height:1.5;}

.dnssa-pill-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.dnssa-pill{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:999px; background:rgba(50,103,255,0.08); color:var(--dnssa-ink); font-size:13px;}

/* Kicker (small label above questions) */
.dnssa-kicker{padding-bottom:10px;}


/* Segmented controls (Step 1 extras) */
.dnssa-block{margin-top:18px;}
.dnssa-seg{
  display:flex;
  width:100%;
  border:2px solid rgba(0,10,45,0.28);
  border-radius:999px;
  overflow:hidden;
  background:#fff;
}
.dnssa-seg-btn{
  flex:1 1 0;
  padding:14px 16px;
  border:0;
  background:transparent;
  color:var(--dnssa-ink);
  font-weight:600;
  font-size:16px;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.dnssa-seg-btn + .dnssa-seg-btn{border-left:2px solid rgba(0,10,45,0.18);}
.dnssa-seg-btn.is-active{
  background:var(--dnssa-primary);
  color:#fff;
}
.dnssa-seg-btn:not(.is-active):hover{
  background:rgba(50,103,255,0.08);
}
@media (max-width:700px){
  .dnssa-seg-btn{font-size:15px; padding:12px 12px;}
}

/* Note (step 1) */
.dnssa-note{display:flex; gap:12px; align-items:flex-start; margin-top:18px; padding:14px 14px; border-radius:14px; background:rgba(50,103,255,0.06); border:1px solid rgba(50,103,255,0.16);}
.dnssa-note-dot{width:10px; height:10px; border-radius:50%; background:var(--dnssa-primary); flex:0 0 10px; padding-top:20px;}

/* Options (radio/checkbox) styled like cards */
.dnssa-options{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px; margin-top:6px;}
@media (max-width:700px){ .dnssa-options{grid-template-columns:1fr;} }

.dnssa-opt{display:block;}
.dnssa-opt input{position:absolute; opacity:0; pointer-events:none;}
.dnssa-opt{height:100%;}
.dnssa-opt-ui{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  width:100%;
  height:100%;
  min-height:72px;
  border:1px solid #020F39 !important;
  border-radius:18px;
  padding:16px 16px;
  background:#fafcfe !important;
  cursor:pointer;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

.dnssa-opt-ui:hover .dnssa-opt-title{color: #fff;}
.dnssa-opt input:checked + .dnssa-opt-ui .dnssa-opt-title{color: #fff;}
.dnssa-opt-ui:hover{transform:translateY(-1px); border-color:#020F39; box-shadow:0 14px 30px rgba(0,10,45,0.10); background:#020F39 !important;}
.dnssa-opt input:checked + .dnssa-opt-ui{border-color:#020F39; background:#020F39 !important; box-shadow:0 0 0 2px rgb(2, 15, 57, 0.6), 0 14px 30px rgba(0,10,45,0.10);}
.dnssa-opt-title{font-weight:400; font-size:15px; color:var(--dnssa-ink); line-height:1.35;}

.dnssa-slider{margin-top:12px;}
.dnssa-slider input[type=range]{width:100%;}
.dnssa-slider-labels{display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--dnssa-muted); margin-top:8px;}

/* Slider dot buttons */
.dnssa-slider-dot{margin-right:20px;}

/* Question titles (steps 3-8) */
.dnssa-card > h2.dnssa-qtitle{margin:0; padding-bottom:25px;}

.dnssa-consent{
  margin-top:14px;
  background:#F3F4F6;
  border:1px solid #E5E7EB;
  padding:12px 12px;
  border-radius:14px;
  color:#374151;
  font-size:12px;
}

.dnssa-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  border-top:1px solid var(--dnssa-border);
  background:#fff;
}

.dnssa-footer-right{display:flex; align-items:center; gap:12px;}
.dnssa-status{font-size:12px; color:var(--dnssa-muted); min-height:16px;}

.dnssa-btn{
  border-radius:14px !important;
  padding:10px 24px;
  font-size:14px;
  font-weight:600;
  border:1px solid transparent !important;
  line-height:1.2;
  text-transform:none !important;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.dnssa-btn:active{transform:translateY(1px);}
.dnssa-btn[disabled]{opacity:.55; cursor:not-allowed; transform:none;}

.dnssa-btn-primary{background:#020F39 !important; border-color:var(--dnssa-primary) !important; color:#fff !important; box-shadow:0 12px 26px rgba(50,103,255,0.28);}
.dnssa-btn-primary:hover{transform:translateY(-2px);background:#3267FF !important; box-shadow:0 14px 28px rgba(17,24,39,0.22);}

.dnssa-btn-ghost{
  background:#fff !important;
  border-color:var(--dnssa-border) !important;
  color:var(--dnssa-ink) !important;
}
.dnssa-btn-ghost:hover{background:#020F39 !important; color:#ffffff !important;}

.dnssa-success{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  padding:20px 10px;
}
.dnssa-success .dnssa-badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--dnssa-border);
  background:#fff;
  font-size:12px;
  color:var(--dnssa-muted);
}



/* Review list */
.dnssa-review-list{display:flex; flex-direction:column; gap:12px; margin-top:10px;}
.dnssa-review-item{
  width:100%;
  text-align:left;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--dnssa-border);
  background:var(--dnssa-surface-2);
  cursor:pointer;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.dnssa-review-item:hover{transform:translateY(-1px); border-color:rgba(50,103,255,0.45); box-shadow:0 14px 30px rgba(0,10,45,0.10); background:#fff;}
.dnssa-review-left{min-width:0;}

.dnssa-review-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  width:100%;
  border:1px solid var(--dnssa-border) !important;
  border-radius:18px;
  padding:16px 16px;
  background:#F2F4F7 !important;
  cursor:pointer;
  text-align:left;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
  margin-bottom:15px;
}
.dnssa-review-item:hover{
  transform:translateY(-1px);
  border-color:rgba(50,103,255,0.55) !important;
  box-shadow:0 14px 30px rgba(0,10,45,0.10);
  background:#fff !important;
}
.dnssa-review-q{
  flex:0 0 42%;
  font-weight:600;
  color:var(--dnssa-ink);
  font-size:15px;
}
.dnssa-review-a{
  flex:1 1 auto;
  font-weight:400;
  color:var(--dnssa-muted);
  font-size:15px;
  text-align:right;
  word-break:break-word;
}
.dnssa-review-edit{flex:0 0 auto; font-weight:800; color:var(--dnssa-primary); font-size:13px; padding-top:2px;}



/* ===== FINAL HARD OVERRIDES ===== */
.dnssa-shell * { box-sizing:border-box !important; }

/* HERO PAIN / GAIN CARDS */
.dnssa-choice--hero{
  padding:0 !important;
  overflow:hidden !important;
  border-radius:18px !important;
  border:2px solid rgba(50,103,255,.15) !important;
  background:#fff !important;
  transition:all .25s ease !important;
}
.dnssa-choice--hero:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 14px 40px rgba(0,10,45,.12) !important;
}
.dnssa-choice--hero.is-selected{
  border-color:#3267FF !important;
  box-shadow:0 0 0 4px rgba(50,103,255,.25) !important;
}
.dnssa-choice--hero .dnssa-choice-emoji{
  width:100% !important;
  height:120px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:48px !important;
  background:linear-gradient(135deg,#3267FF,#000A2D) !important;
  color:#fff !important;
}
.dnssa-choice--hero .dnssa-choice-text{ padding:18px !important; }

/* SLIDER DOTS AS MINI CARDS */
.dnssa-slider-track{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  gap:12px !important;
}
.dnssa-slider-dot{
  padding:12px 14px !important;
  border-radius:14px !important;
  border:1px solid rgba(0,0,0,.1) !important;
  background:#fff !important;
  cursor:pointer !important;
}
.dnssa-slider-dot.is-active{
  border-color:#3267FF !important;
  background:#F3F6FF !important;
  box-shadow:0 0 0 3px rgba(50,103,255,.2) !important;
}

/* =========================
   v1.1.3 UX hotfixes
   - Keep Location/Status cards white (even when selected)
   - Add hero visuals for Reason cards (pain/gain)
   - Make slider dots into modern mini-cards with emoji
   ========================= */

.dnssa-shell .dnssa-choice-grid {
  padding-top: 20px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 30px !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  margin: 0 !important;
}
@media (max-width:700px){
  .dnssa-shell .dnssa-choice-grid{ grid-template-columns:1fr !important; }
}

/* Location + Patient Status (choices without data-path) */
.dnssa-shell .dnssa-choice-grid .dnssa-choice:not([data-path]) {
  background: #ffffff !important;
  color: var(--dnssa-ink) !important;
  border-color: #020F39 !important;
  box-shadow: 0 10px 22px rgba(0,10,45,0.06) !important;
}
.dnssa-shell .dnssa-choice-grid .dnssa-choice:not([data-path]):hover {
  background: #020F39 !important;
  color: #ffffff !important;
  border-color: #020F39 !important;
  box-shadow: 0 14px 30px rgba(0,10,45,0.10) !important;
  transform: translateY(-2px) !important;
}
.dnssa-shell .dnssa-choice-grid .dnssa-choice:not([data-path]).is-selected {
  background: #020F39 !important;
  color: var(--dnssa-ink) !important;
  border-color: #020F39 !important;
  box-shadow: 0 0 0 2px rgba(2,15,57,0.18), 0 14px 30px rgba(0,10,45,0.10) !important;
}

/* Ensure non-path choice titles never get forced to white by generic .dnssa-choice hover/selected rules */

.dnssa-shell .dnssa-choice-grid .dnssa-choice:not([data-path]):hover .dnssa-choice-title,
.dnssa-shell .dnssa-choice-grid .dnssa-choice:not([data-path]).is-selected .dnssa-choice-title{
  
  color: white !important;
}

/* Make hero Reason cards taller for better visual balance */
.dnssa-shell .dnssa-choice[data-path="pain"],
.dnssa-shell .dnssa-choice[data-path="gain"]{
  min-height: 390px !important;
}
@media (max-width: 700px){
  .dnssa-shell .dnssa-choice[data-path="pain"],
  .dnssa-shell .dnssa-choice[data-path="gain"]{
    min-height: 210px !important;
  }
}

/* Reason hero cards (only pain/gain) */
.dnssa-shell .dnssa-choice[data-path="pain"],
.dnssa-shell .dnssa-choice[data-path="gain"]{
  background-size: cover !important;
  background-position: center !important;
}

/* Use modern image backgrounds + brand overlay (lightweight, CDN) */
.dnssa-shell .dnssa-choice[data-path="pain"]{
  border: 2px solid #000a2d52 !important;
  background-image:
    linear-gradient(180deg, rgba(0,10,45,0), rgba(0,10,45,.5)),
    url("https://drdubaidentist.com/wp-content/uploads/2026/02/Pain.webp") !important;
}
.dnssa-shell .dnssa-choice[data-path="pain"]:hover{
  background-image:
    linear-gradient(180deg, rgba(0,10,45,.5), rgba(0,10,45,1)),
    url("https://drdubaidentist.com/wp-content/uploads/2026/02/Pain.webp") !important;
}
.dnssa-shell .dnssa-choice.is-selected[data-path="pain"]{
  background-image:
    linear-gradient(180deg, rgba(0,10,45,.5), rgba(0,10,45,1)),
    url("https://drdubaidentist.com/wp-content/uploads/2026/02/Pain.webp") !important;
}
.dnssa-shell .dnssa-choice[data-path="gain"]{
  border: 2px solid #000a2d52 !important;
  background-image:
    linear-gradient(180deg, rgba(0,10,45,.0), rgba(0,10,45,.5)),
    url("https://drdubaidentist.com/wp-content/uploads/2026/03/What-Are-the-Top-Cosmetic-Dental-Treatments-1.jpg") !important;
}
.dnssa-shell .dnssa-choice[data-path="gain"]:hover{
  border: 2px solid #000a2d52 !important;
  background-image:
    linear-gradient(180deg, rgba(0,10,45,.5), rgba(0,10,45,1)),
    url("https://drdubaidentist.com/wp-content/uploads/2026/03/What-Are-the-Top-Cosmetic-Dental-Treatments-1.jpg") !important;
}
.dnssa-shell .dnssa-choice.is-selected[data-path="gain"]{
  background-image:
    linear-gradient(180deg, rgba(0,10,45,.5), rgba(0,10,45,1)),
    url("https://drdubaidentist.com/wp-content/uploads/2026/03/What-Are-the-Top-Cosmetic-Dental-Treatments-1.jpg") !important;
}

.dnssa-shell .dnssa-choice[data-path]:hover{
  border:2px solid #020F39 !important;
  box-shadow: 0 20px 46px rgba(0,10,45,0.22) !important;
  transform: translateY(-4px) !important;
    
}
.dnssa-shell .dnssa-choice.is-selected[data-path]{
  border:2px solid #020F39 !important;
  box-shadow: 0 0 0 3px rgba(50,103,255,0.25), 0 20px 46px rgba(0,10,45,0.22) !important;
}
.dnssa-shell .dnssa-choice[data-path]{
  transition: all 0.4s ease !important;

}
/* Ensure titles stay readable on hero cards */
.dnssa-shell .dnssa-choice[data-path] .dnssa-choice-title,
.dnssa-shell .dnssa-choice[data-path] .dnssa-choice-sub{
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  color:#ffffff !important;
}

.dnssa-shell .dnssa-choice[data-path] .dnssa-choice-sub{
  opacity:0.88 !important;
}
.dnssa-shell .dnssa-choice[data-path] .dnssa-choice-title{
  min-width: 0 !important;
  font-size: 20px !important;
  padding-bottom: 10px;
}

/* Slider dots -> mini cards */
.dnssa-shell .dnssa-slider-track{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 8px !important;
}
.dnssa-shell .dnssa-slider-hint{ margin-top: 10px !important; color: var(--dnssa-muted) !important; font-size: 12px !important; }

.dnssa-shell .dnssa-slider-dot{
  margin-right: 0 !important;
  width: 100% !important;
  background: #ffffff !important;
  border: 1px solid var(--dnssa-border) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  color: var(--dnssa-ink) !important;
  box-shadow: 0 10px 22px rgba(0,10,45,0.06) !important;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background-color .14s ease !important;
}
.dnssa-shell .dnssa-slider-dot:hover{
  transform: translateY(-2px) !important;
  border-color: rgba(50,103,255,0.55) !important;
  box-shadow: 0 14px 30px rgba(0,10,45,0.10) !important;
}
.dnssa-shell .dnssa-slider-dot.is-active{
  border-color: var(--dnssa-primary) !important;
  background: #F4F7FF !important;
  box-shadow: 0 0 0 2px rgba(50,103,255,0.22), 0 14px 30px rgba(0,10,45,0.10) !important;
}
.dnssa-shell .dnssa-slider-dot-emoji{
  font-size: 18px !important;
  line-height: 1 !important;
}
.dnssa-shell .dnssa-slider-dot-label{
  font-size: 14px !important;
  font-weight: 600 !important;
}
.dnssa-shell .dnssa-choice[data-path] .dnssa-choice-emoji{
  display: none !important;
}