/*
  odNOVA shared decision tiles
  ----------------------------
  These surfaces are intentionally shared by HOME and Treatments. Geometry may
  adapt to the page and viewport, but colour, depth and interaction must remain
  recognisable as one component family.
*/

.odn-route-tile{
  --odn-tile-line:rgba(231,211,172,.34);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(237,232,223,.14)!important;
  border-radius:18px!important;
  box-shadow:
    0 34px 72px -46px rgba(4,7,11,.94),
    0 14px 24px -22px rgba(4,7,11,.88),
    inset 0 2px 2px rgba(255,255,255,.10),
    inset 0 -16px 28px rgba(0,0,0,.18)!important;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  transition:transform .78s cubic-bezier(.16,.76,.20,1),border-color .58s ease,box-shadow .78s cubic-bezier(.16,.76,.20,1),background .58s ease;
}
.odn-route-tile--face{
  background:
    radial-gradient(125% 76% at 28% -9%,rgba(255,236,242,.11),transparent 43%),
    radial-gradient(110% 88% at 16% -2%,rgba(125,67,86,.38),transparent 64%),
    linear-gradient(155deg,#25121A,#170C11 58%,#0F080B)!important;
}
.odn-route-tile--skin{
  background:
    radial-gradient(125% 76% at 28% -9%,rgba(235,248,239,.10),transparent 43%),
    radial-gradient(110% 88% at 16% -2%,rgba(74,107,87,.35),transparent 64%),
    linear-gradient(155deg,#12231A,#0C1711 58%,#07100B)!important;
}
.odn-route-tile--medical{
  background:
    radial-gradient(125% 76% at 28% -9%,rgba(231,242,252,.10),transparent 43%),
    radial-gradient(110% 88% at 16% -2%,rgba(67,98,126,.38),transparent 64%),
    linear-gradient(155deg,#142839,#0D1A26 58%,#07111A)!important;
}
.odn-route-tile::before{
  content:""!important;
  position:absolute!important;
  z-index:2!important;
  left:clamp(24px,3.5vw,48px)!important;
  right:auto!important;
  top:0!important;
  bottom:auto!important;
  width:56px!important;
  height:1px!important;
  display:block!important;
  opacity:.76!important;
  background:var(--gold,#C9B79A)!important;
  background-image:none!important;
  transform:none!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  transition:width .92s cubic-bezier(.16,.76,.20,1),opacity .58s ease!important;
  pointer-events:none;
}
.odn-route-tile::after{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:auto 0 0 40%!important;
  width:auto!important;
  height:50%!important;
  display:block!important;
  border-radius:50%!important;
  opacity:.16!important;
  background:radial-gradient(circle,rgba(231,211,172,.26),transparent 66%)!important;
  background-image:radial-gradient(circle,rgba(231,211,172,.26),transparent 66%)!important;
  background-size:auto!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  transform:translate3d(8%,12%,0)!important;
  transition:opacity .72s ease,transform 1s cubic-bezier(.16,.76,.20,1)!important;
  pointer-events:none;
}
.odn-route-tile > *{position:relative;z-index:1;}

.odn-path-tile{
  --odn-heavy-ease:cubic-bezier(.16,.76,.20,1);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(126,105,77,.24)!important;
  border-radius:14px!important;
  background-color:var(--cream,#E3DAC8)!important;
  background-image:
    radial-gradient(118% 92% at 18% -12%,rgba(255,255,255,.38),transparent 49%),
    radial-gradient(82% 72% at 104% 108%,rgba(156,128,86,.09),transparent 68%),
    linear-gradient(148deg,rgba(255,255,255,.16) 0%,rgba(242,237,228,.11) 62%,rgba(219,207,189,.08) 100%)!important;
  -webkit-backdrop-filter:blur(3.15px) saturate(.9) contrast(1.01)!important;
  backdrop-filter:blur(3.15px) saturate(.9) contrast(1.01)!important;
  box-shadow:
    0 34px 62px -44px rgba(38,29,19,.58),
    0 14px 24px -20px rgba(38,29,19,.36),
    inset 0 2px 2px rgba(255,255,255,.7),
    inset 0 -14px 24px rgba(127,98,58,.07),
    inset 16px 0 28px -28px rgba(255,255,255,.92)!important;
  transform-style:preserve-3d!important;
  transition:transform 1.18s var(--odn-heavy-ease),border-color .82s ease,box-shadow 1.18s var(--odn-heavy-ease),background .82s ease!important;
}
.odn-path-tile::before{
  left:clamp(20px,2.25vw,32px)!important;
  top:0!important;
  width:calc(100% - clamp(40px,4.5vw,64px))!important;
  height:1.5px!important;
  border-radius:0 999px 999px 0!important;
  opacity:.58!important;
  background:linear-gradient(90deg,var(--gold-deep,#8B6B43),rgba(134,107,71,.78) 82%,rgba(134,107,71,0))!important;
  transform:scaleX(.12) translateY(0)!important;
  transform-origin:left center!important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.22))!important;
  transition:transform 1.9s cubic-bezier(.16,.92,.22,1),opacity 1.25s ease,filter 1.5s ease!important;
}
.odn-path-tile::after{
  width:clamp(32px,3vw,42px)!important;
  height:clamp(32px,3vw,42px)!important;
  border:1px solid rgba(117,92,64,.28)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.34)!important;
  box-shadow:0 10px 18px -15px rgba(38,29,19,.7),inset 0 1px 1px rgba(255,255,255,.9)!important;
  color:#604B34!important;
  transition:transform 1.22s var(--odn-heavy-ease),background-color .82s ease,border-color .82s ease,box-shadow 1.22s var(--odn-heavy-ease)!important;
}
.odn-path-tile > *{transform:translateZ(12px)!important;}
.odn-path-tile .tx-k::before{display:block!important;}

/* Treatments has deliberately compact geometry. These higher-specificity
   selectors replace only its former flat surface, while keeping that geometry. */
body[data-lang-page="treatments"] #path-new .route.odn-route-tile{
  border:1px solid rgba(237,232,223,.14)!important;
  border-radius:18px!important;
  box-shadow:0 34px 72px -46px rgba(4,7,11,.94),0 14px 24px -22px rgba(4,7,11,.88),inset 0 2px 2px rgba(255,255,255,.10),inset 0 -16px 28px rgba(0,0,0,.18)!important;
}
body[data-lang-page="treatments"] #paths .tx-card.odn-path-tile{
  border:1px solid rgba(126,105,77,.24)!important;
  border-radius:14px!important;
  background-color:var(--cream,#E3DAC8)!important;
  background-image:radial-gradient(118% 92% at 18% -12%,rgba(255,255,255,.38),transparent 49%),radial-gradient(82% 72% at 104% 108%,rgba(156,128,86,.09),transparent 68%),linear-gradient(148deg,rgba(255,255,255,.16) 0%,rgba(242,237,228,.11) 62%,rgba(219,207,189,.08) 100%)!important;
  -webkit-backdrop-filter:blur(3.15px) saturate(.9) contrast(1.01)!important;
  backdrop-filter:blur(3.15px) saturate(.9) contrast(1.01)!important;
  box-shadow:0 34px 62px -44px rgba(38,29,19,.58),0 14px 24px -20px rgba(38,29,19,.36),inset 0 2px 2px rgba(255,255,255,.7),inset 0 -14px 24px rgba(127,98,58,.07),inset 16px 0 28px -28px rgba(255,255,255,.92)!important;
}
body[data-lang-page="treatments"] #paths .tx-card.odn-path-tile::before{
  left:24px!important;
  width:calc(100% - 48px)!important;
  height:1.5px!important;
  opacity:.58!important;
  background:linear-gradient(90deg,var(--gold-deep,#8B6B43),rgba(134,107,71,.78) 82%,rgba(134,107,71,0))!important;
  transform:scaleX(.12) translateY(0)!important;
}
body[data-lang-page="treatments"] #paths .tx-card.odn-path-tile::after{
  width:34px!important;
  height:34px!important;
  border:1px solid rgba(117,92,64,.28)!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.34)!important;
  box-shadow:0 10px 18px -15px rgba(38,29,19,.7),inset 0 1px 1px rgba(255,255,255,.9)!important;
}
body[data-lang-page="treatments"] #paths .tx-card.odn-path-tile>*{transform:translateZ(12px)!important;}
body[data-lang-page="treatments"] #paths .tx-card.odn-path-tile .tx-k::before{display:block!important;}

@media(hover:hover){
  .odn-route-tile:hover{
    transform:translate3d(0,-5px,14px) rotateX(.8deg) scale(1.002);
    border-color:rgba(201,183,154,.5)!important;
    box-shadow:
      0 56px 90px -48px rgba(4,7,11,.99),
      0 24px 38px -28px rgba(4,7,11,.95),
      inset 0 2px 3px rgba(255,255,255,.15),
      inset 0 -20px 34px rgba(0,0,0,.22)!important;
  }
  .odn-route-tile:hover::before{width:calc(100% - clamp(48px,7vw,96px))!important;opacity:1!important;}
  .odn-route-tile:hover::after{opacity:.34!important;transform:translate3d(0,0,0)!important;}
  .odn-path-tile:hover{
    border-color:rgba(135,103,61,.46)!important;
    background-image:
      radial-gradient(118% 92% at 18% -12%,rgba(255,255,255,.48),transparent 50%),
      radial-gradient(82% 72% at 104% 108%,rgba(156,128,86,.11),transparent 68%),
      linear-gradient(148deg,rgba(255,255,255,.21) 0%,rgba(242,237,228,.15) 62%,rgba(219,207,189,.11) 100%)!important;
    transform:translate3d(0,-4px,9px) rotateX(.65deg)!important;
    box-shadow:0 42px 70px -45px rgba(38,29,19,.66),0 17px 27px -22px rgba(38,29,19,.42),inset 0 2px 2px rgba(255,255,255,.82),inset 0 -15px 25px rgba(127,98,58,.09),inset 18px 0 30px -28px rgba(255,255,255,.96)!important;
  }
  .odn-path-tile:hover::before{opacity:.9!important;transform:scaleX(1) translateY(1px)!important;filter:drop-shadow(0 2px 1px rgba(255,255,255,.3))!important;}
  .odn-path-tile:hover::after{transform:translate3d(2px,-1px,13px)!important;background:#F2E3C8!important;border-color:rgba(117,92,64,.44)!important;box-shadow:0 15px 24px -16px rgba(38,29,19,.72),inset 0 1px 1px rgba(255,255,255,.95)!important;}
  body[data-lang-page="treatments"] #paths .tx-card.odn-path-tile:hover{
    border-color:rgba(135,103,61,.46)!important;
    background-image:radial-gradient(118% 92% at 18% -12%,rgba(255,255,255,.48),transparent 50%),radial-gradient(82% 72% at 104% 108%,rgba(156,128,86,.11),transparent 68%),linear-gradient(148deg,rgba(255,255,255,.21) 0%,rgba(242,237,228,.15) 62%,rgba(219,207,189,.11) 100%)!important;
    transform:translate3d(0,-4px,9px) rotateX(.65deg)!important;
    box-shadow:0 42px 70px -45px rgba(38,29,19,.66),0 17px 27px -22px rgba(38,29,19,.42),inset 0 2px 2px rgba(255,255,255,.82),inset 0 -15px 25px rgba(127,98,58,.09),inset 18px 0 30px -28px rgba(255,255,255,.96)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .odn-route-tile,.odn-route-tile::before,.odn-route-tile::after,.odn-path-tile,.odn-path-tile::before,.odn-path-tile::after{transition:none!important;}
}