/* UNICARE Minimal Dental Treatment Module — isolated DT namespace */
:root{--dt-navy:#1B3362;--dt-teal:#027879;--dt-teal-brand:#03A9A5;--dt-ink:#223c53;--dt-muted:#597087;--dt-line:#e1eaf0;--dt-bg:#f8fbfc;--dt-white:#fff;--dt-soft:#eff8f9;--dt-ring:#027e80}
*,*::before,*::after{box-sizing:border-box}
/* Scroll motion is provided by the host website. */
.dt-main,.dt-guide-main{background:transparent;color:var(--dt-ink);font:400 16px/1.56 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.dt-main img,.dt-guide-main img{display:block;max-width:100%}
/* Uses original component-level link styles; host link reset already applies. */
.dt-main button,.dt-guide-main button{font:inherit}
.dt-main :focus-visible,.dt-guide-main :focus-visible{outline:3px solid var(--dt-ring);outline-offset:3px}
.dt-container{width:min(1120px,calc(100% - 48px));margin:0 auto}
.dt-main{padding:64px 0 84px}
.dt-intro{margin-bottom:31px;max-width:760px}
.dt-intro h1,.dt-guide-title{margin:0;color:var(--dt-navy);font-size:clamp(2.05rem,3.6vw,2.75rem);letter-spacing:-.045em;font-weight:760;line-height:1.16}
.dt-intro p{margin:12px 0 0;color:var(--dt-muted);font-size:1.02rem;line-height:1.65}
.dt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.dt-card{min-width:0;background:var(--dt-white);border:1px solid var(--dt-line);border-radius:22px;overflow:hidden;box-shadow:0 7px 25px rgba(27,51,98,.045);display:flex;flex-direction:column;transition:border-color .2s,transform .2s,box-shadow .2s}
.dt-card:hover{border-color:#b7dadd;transform:translateY(-2px);box-shadow:0 14px 30px rgba(27,51,98,.095)}
.dt-card-media{margin:10px 10px 0;border-radius:15px;overflow:hidden;background:#eef9fb;aspect-ratio:16/10}
.dt-card-media img{width:100%;height:100%;object-fit:cover}
.dt-card-body{padding:20px 21px 22px;display:flex;flex:1;flex-direction:column}
.dt-card h2{margin:0 0 8px;color:var(--dt-navy);font-size:1.2rem;letter-spacing:-.025em;font-weight:720;line-height:1.3}
.dt-card p{margin:0 0 19px;color:var(--dt-muted);font-size:.91rem;line-height:1.55;flex:1}
.dt-action{display:inline-flex;min-height:44px;align-items:center;justify-content:space-between;gap:15px;padding:0 16px;color:#fff;background:var(--dt-teal);border:1px solid var(--dt-teal);border-radius:12px;text-decoration:none;font-size:.88rem;font-weight:700;transition:background .18s}
.dt-action:hover{background:#016467}
.dt-action .dt-arrow{font-size:1.17em;line-height:1}
.dt-guide-main{padding:36px 0 72px}
.dt-back{display:inline-flex;align-items:center;gap:8px;margin:0 0 24px;color:var(--dt-teal);font-size:.92rem;font-weight:700;text-decoration:none;min-height:44px}
.dt-back:hover{text-decoration:underline}
.dt-guide-head{display:grid;grid-template-columns:minmax(0,1fr) 205px;align-items:center;gap:26px;padding:25px 27px;border-radius:20px;border:1px solid var(--dt-line);background:var(--dt-white);box-shadow:0 6px 25px rgba(27,51,98,.035)}
.dt-guide-title{font-size:clamp(1.95rem,3.4vw,2.55rem)}
.dt-guide-lead{margin:10px 0 0;max-width:660px;color:var(--dt-muted);font-size:.98rem;line-height:1.6}
.dt-guide-visual{aspect-ratio:16/10;overflow:hidden;border-radius:15px;background:var(--dt-soft)}
.dt-guide-visual img{width:100%;height:100%;object-fit:cover}
.dt-section{margin-top:40px}
.dt-section h2{margin:0 0 9px;color:var(--dt-navy);font-size:clamp(1.38rem,2.4vw,1.7rem);letter-spacing:-.03em;line-height:1.2}
.dt-section .dt-hint{margin:0 0 20px;color:var(--dt-muted);font-size:.92rem}
.dt-proc-chooser{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 22px}
.dt-proc-option{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:66px;padding:13px 15px;text-decoration:none;border:1px solid var(--dt-line);border-radius:14px;background:#fff;color:var(--dt-navy);font-size:.92rem;line-height:1.32;font-weight:700;transition:border-color .18s,background .18s}
.dt-proc-option small{display:block;font-size:.75rem;color:var(--dt-muted);font-weight:500;margin-top:2px}
.dt-proc-option:hover,.dt-proc-option[aria-current="true"]{border-color:var(--dt-teal-brand);background:#effafa}
.dt-proc-option[aria-current="true"]::after{content:'✓';display:grid;place-items:center;background:var(--dt-teal);color:#fff;font-size:.76rem;flex:0 0 23px;height:23px;border-radius:50%}
.dt-proc-heading{display:flex;align-items:baseline;gap:10px;margin:9px 0 17px;color:var(--dt-navy);font-size:1.12rem;font-weight:750}
.dt-proc-heading span{font-weight:500;color:var(--dt-muted);font-size:.83rem}
.dt-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.dt-step{margin:0;background:#fff;border:1px solid var(--dt-line);border-radius:17px;overflow:hidden;min-width:0;display:flex;flex-direction:column}
.dt-step img{width:100%;height:auto;aspect-ratio:1200/760;object-fit:cover;background:#eaf7f8}
.dt-step-info{padding:18px 19px 21px;display:flex;flex-direction:column;gap:7px}
.dt-step-number{font-size:.74rem;color:var(--dt-teal);text-transform:uppercase;font-weight:800;letter-spacing:.085em}
.dt-step h3{font-size:1.04rem;line-height:1.3;letter-spacing:-.018em;color:var(--dt-navy);margin:0}
.dt-step p{color:#51697e;font-size:.91rem;line-height:1.58;margin:1px 0 0}
.dt-after{padding:23px 25px 19px;background:#fff;border:1px solid var(--dt-line);border-radius:17px}
.dt-after ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:25px;row-gap:11px;margin:0;padding:0;list-style:none}
.dt-after li{position:relative;padding-left:22px;font-size:.91rem;color:#4d6478;line-height:1.6}
.dt-after li::before{content:'✓';position:absolute;left:0;top:0;font-weight:800;color:var(--dt-teal)}
.dt-note{margin:19px 0 0;padding:11px 14px;border-left:3px solid #aad9d8;border-radius:0 8px 8px 0;color:#51697e;background:#f0f8f9;font-size:.83rem;line-height:1.55}
.dt-procedure[hidden]{display:none!important}

/* PREMIUM INTERACTION REFINEMENTS — add-on only; original layout and content preserved. */
:root {
  --dt-motion-fast:180ms;
  --dt-motion-standard:240ms;
  --dt-motion-content:300ms;
  --dt-motion-ease:cubic-bezier(.22,1,.36,1);
}
/* Structural geometry remains unchanged on hover/focus; transforms do not affect flow. */
.dt-card {
  transition:border-color var(--dt-motion-standard) var(--dt-motion-ease),
    transform var(--dt-motion-standard) var(--dt-motion-ease),
    box-shadow var(--dt-motion-standard) var(--dt-motion-ease);
}
.dt-card:hover,.dt-card:focus-within {border-color:#b7dadd;box-shadow:0 14px 30px rgba(27,51,98,.095)}
.dt-card:focus-within {transform:translateY(-2px)}
.dt-action {
  position:relative;
  overflow:hidden;
  justify-content:space-between;
  gap:15px;
  transition:background-color var(--dt-motion-standard) var(--dt-motion-ease),
    border-color var(--dt-motion-standard) var(--dt-motion-ease),
    box-shadow var(--dt-motion-standard) var(--dt-motion-ease),
    transform var(--dt-motion-fast) var(--dt-motion-ease);
}
.dt-action:hover,.dt-action:focus-visible {background:#016467;border-color:#016467;box-shadow:0 5px 12px rgba(2,120,121,.15)}
.dt-action:active {transform:translateY(1px);box-shadow:0 1px 5px rgba(2,120,121,.12)}
.dt-action .dt-arrow {
  width:17px;height:17px;display:block;flex:0 0 17px;
  align-self:center;vertical-align:middle;
  transition:transform var(--dt-motion-standard) var(--dt-motion-ease);
}
.dt-action .dt-arrow path {fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85}
.dt-action:hover .dt-arrow,.dt-action:focus-visible .dt-arrow {transform:translateX(3px)}
.dt-back {
  transition:color var(--dt-motion-fast) var(--dt-motion-ease),
    transform var(--dt-motion-fast) var(--dt-motion-ease);
}
.dt-back:hover,.dt-back:focus-visible {color:#015f63}
.dt-back:active {transform:translateY(1px)}
.dt-back > span[aria-hidden="true"] {display:inline-block;transition:transform var(--dt-motion-standard) var(--dt-motion-ease)}
.dt-back:hover > span[aria-hidden="true"],.dt-back:focus-visible > span[aria-hidden="true"] {transform:translateX(-3px)}
.dt-proc-option {
  transition:border-color var(--dt-motion-standard) var(--dt-motion-ease),
    background-color var(--dt-motion-standard) var(--dt-motion-ease),
    transform var(--dt-motion-fast) var(--dt-motion-ease),
    box-shadow var(--dt-motion-standard) var(--dt-motion-ease);
}
.dt-proc-option:hover,.dt-proc-option:focus-visible {transform:translateY(-1px);box-shadow:0 5px 12px rgba(27,51,98,.06)}
.dt-proc-option:active {transform:translateY(1px);box-shadow:none}
.dt-proc-option[aria-current="true"] {border-color:var(--dt-teal-brand);background:#effafa;box-shadow:inset 0 0 0 1px rgba(3,169,165,.08)}
.dt-proc-option[aria-current="true"]::after {transition:transform var(--dt-motion-fast) var(--dt-motion-ease)}
.dt-proc-option[aria-current="true"]:hover::after {transform:scale(1.05)}
/* A newly selected procedure has the same layout; only its appearance changes. */
.dt-procedure {scroll-margin-top:22px}
@media (prefers-reduced-motion:no-preference) {
  .dt-intro {animation:dt-appear-up 380ms var(--dt-motion-ease) both}
  .dt-main .dt-card {animation:dt-appear-up 410ms var(--dt-motion-ease) both}
  .dt-main .dt-card:nth-child(1) {animation-delay:30ms}
  .dt-main .dt-card:nth-child(2) {animation-delay:65ms}
  .dt-main .dt-card:nth-child(3) {animation-delay:100ms}
  .dt-main .dt-card:nth-child(4) {animation-delay:135ms}
  .dt-main .dt-card:nth-child(5) {animation-delay:170ms}
  .dt-main .dt-card:nth-child(6) {animation-delay:205ms}
  .dt-back,.dt-guide-head {animation:dt-appear-up 340ms var(--dt-motion-ease) both}
  .dt-guide-head {animation-delay:45ms}
  .dt-procedure.dt-panel-enter {animation:dt-procedure-in var(--dt-motion-content) var(--dt-motion-ease) both}
  @supports (view-transition-name: dt-procedure) {
    .dt-procedure:not([hidden]) {view-transition-name:dt-procedure}
    ::view-transition-old(dt-procedure) {animation:dt-procedure-out 130ms ease-in both}
    ::view-transition-new(dt-procedure) {animation:dt-procedure-in 250ms var(--dt-motion-ease) both}
  }
}
@keyframes dt-appear-up {from {opacity:.88;transform:translateY(6px)}to {opacity:1;transform:translateY(0)}}
@keyframes dt-procedure-out {to {opacity:0;transform:translateY(-5px)}}
@keyframes dt-procedure-in {from {opacity:.65;transform:translateY(8px)}to {opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce) {
  .dt-intro,.dt-main .dt-card,.dt-back,.dt-guide-head,.dt-procedure,
  .dt-action,.dt-proc-option,.dt-action .dt-arrow,.dt-back > span[aria-hidden="true"] {
    animation:none!important;transform:none!important;
  }
  /* All procedure changes are immediate, and selection remains visible. */
  ::view-transition-old(dt-procedure),::view-transition-new(dt-procedure) {animation:none!important}
}

@media(max-width:960px){.dt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.dt-container{width:min(100% - 30px,520px)}.dt-main{padding:38px 0 55px}.dt-intro{margin-bottom:22px}.dt-intro p{font-size:.95rem}.dt-grid{grid-template-columns:minmax(0,1fr);gap:15px}.dt-card-media{aspect-ratio:16/9}.dt-card-body{padding:17px}.dt-guide-main{padding:17px 0 50px}.dt-back{margin-bottom:14px}.dt-guide-head{grid-template-columns:minmax(0,1fr) 118px;gap:14px;padding:17px}.dt-guide-title{font-size:1.7rem}.dt-guide-lead{font-size:.9rem;line-height:1.5}.dt-section{margin-top:29px}.dt-section h2{font-size:1.46rem}.dt-proc-chooser{grid-template-columns:minmax(0,1fr);gap:9px}.dt-proc-option{min-height:57px}.dt-steps{grid-template-columns:minmax(0,1fr);gap:14px}.dt-step-info{padding:16px 17px 18px}.dt-after{padding:20px}.dt-after ul{grid-template-columns:minmax(0,1fr)}}
@media(max-width:380px){.dt-guide-head{grid-template-columns:1fr}.dt-guide-visual{width:150px}.dt-guide-title{font-size:1.75rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Integrated treatments: preserve native guide layout under the existing sticky header. */
.dt-main,.dt-guide-main{position:relative;z-index:1;min-height:50vh}
.dt-procedure{scroll-margin-top:105px}
@media(max-width:640px){.dt-procedure{scroll-margin-top:85px}}