/* Illustrated cel shading: one oval gleam + one curved lower-right shade.
   SVG background layers sit below labels and do not occupy pseudo-elements.
   The important layer wins over old component background/shadow resets while
   leaving their base colours, focus outlines, geometry and interactions intact. */
@layer kk-cel-finish {
  body.kk-sys {
    --kk-cel-gleam: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2250%22%20rx%3D%2244%22%20ry%3D%2225%22%20transform%3D%22rotate%28-16%2050%2050%29%22%20fill%3D%22white%22%20opacity%3D%220.62%22%2F%3E%3C%2Fsvg%3E");
    --kk-cel-wide-shadow:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M94%200C101%2036%2097%2071%2082%2080C62%2092%2017%2091%200%2066V100H100V0Z%22%20fill%3D%22%23000909%22%20opacity%3D%220.18%22%2F%3E%3C%2Fsvg%3E");
    --kk-cel-circle-shadow:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M94%200C101%2036%2097%2071%2082%2080C62%2092%2017%2091%200%2066V100H100V0Z%22%20fill%3D%22%23000909%22%20opacity%3D%220.21%22%2F%3E%3C%2Fsvg%3E");
    --kk-cel-shadow:var(--kk-cel-wide-shadow);
    --kk-cel-glint-size: 32px 12px;
    --kk-cel-glint-position: 16px 3px;
  }
  body.kk-sys :is(
    button:not(.kk-flat-open,.kk-motion-toggle,.kk-cookie-settings,.kk-carousel-dot,[data-video],[data-gallery-index],[aria-label^="Slika"],[data-pose],[data-kk-click="load"]),
    input[type="submit"],input[type="button"],
    a.cr3-primary,a.cr3-secondary,a.kk-button-primary,a.kk-button-secondary,
    a.kk-deskcta,a.kk-island-action,a.kk-hero-book,a.cr3-price-next-action,
    a.kk-taste-action[style*="background"],
    .kk-mobilemenu a[href*="#rezervacija"],
    #kk-mega a.kk-taste-action,
    footer a.kk-taste-action,
    #kk-fab,.kk-fab-menu a,
    .kk-flat-play,.kk-taste-play,
    .kk-motion-toggle>span:first-child
  ):not(.cr3-room-jumps>a) {
    background-image:var(--kk-cel-gleam),var(--kk-cel-shadow)!important;
    background-size:var(--kk-cel-glint-size),100% 100%!important;
    background-position:var(--kk-cel-glint-position),center!important;
    background-repeat:no-repeat!important;
    background-origin:border-box!important;
    /* Paint the fill and shade through one outer curve. A second coloured
       border/padding clip creates unstable antialiased hairlines on pills. */
    background-clip:border-box!important;
    box-shadow:none!important;
  }
  /* Filled actions have one silhouette, with no separately painted rim.
     Transparent secondary controls retain their boundary and focus styling. */
  @media (forced-colors:none) {
  body.kk-sys :is(
    a.cr3-primary,a.kk-button-primary,a.kk-deskcta,a.kk-hero-book,
    a.cr3-price-next-action,.kk-flat-hero a.cr3-secondary,
    .cr3-home-closing a.cr3-secondary,.kk-blog-control,
    [data-showcase-control],.kk-flat-play,.kk-taste-play,#kk-fab
  ) {border-color:transparent!important}
  }
  /* Smaller, quieter glints keep light labels on forest surfaces readable. */
  body.kk-sys :is(
    a.cr3-secondary,a.kk-button-secondary,
    .kk-burger,.kk-blog-control:not([data-blog-next]),
    [data-showcase-control]:not([data-showcase-control="next"]),
    .kk-motion-toggle>span:first-child
  ) {--kk-cel-gleam:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2250%22%20rx%3D%2244%22%20ry%3D%2225%22%20transform%3D%22rotate%28-16%2050%2050%29%22%20fill%3D%22white%22%20opacity%3D%220.22%22%2F%3E%3C%2Fsvg%3E")}
  /* A circle needs a true crescent, rather than the wide action's shallow sweep. */
  body.kk-sys :is(
    .kk-burger,[data-showcase-control],[data-video-close],
    .kk-dialog-close,.kk-cookie-close,[data-equipment-scroll],
    #kk-fab,[data-kk-click="closePop"],
    .kk-flat-play,.kk-taste-play,.kk-motion-toggle>span:first-child,
    [data-kk-click="studioPrev"],[data-kk-click="studioNext"],
    [data-kk-click="cycPrev"],[data-kk-click="cycNext"],
    [data-kk-click="podPrev"],[data-kk-click="podNext"]
  ) {
    --kk-cel-shadow:var(--kk-cel-circle-shadow);
    --kk-cel-glint-size:30% 22%;
    --kk-cel-glint-position:22% 12%;
  }
  /* The phone action is circular except for the labelled desktop home variant. */
  @media(min-width:601px) {
    body.kk-sys.kk-home-page #kk-fab {
      --kk-cel-shadow:var(--kk-cel-wide-shadow);
      --kk-cel-glint-size:32px 12px;
      --kk-cel-glint-position:16px 3px;
    }
  }
  body.kk-sys :is(:disabled,[aria-disabled="true"]) {
    --kk-cel-gleam:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2250%22%20rx%3D%2244%22%20ry%3D%2225%22%20transform%3D%22rotate%28-16%2050%2050%29%22%20fill%3D%22white%22%20opacity%3D%220.1%22%2F%3E%3C%2Fsvg%3E")!important;
    --kk-cel-shadow:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M94%200C101%2036%2097%2071%2082%2080C62%2092%2017%2091%200%2066V100H100V0Z%22%20fill%3D%22%23000909%22%20opacity%3D%220.08%22%2F%3E%3C%2Fsvg%3E")!important;
  }
  @media(forced-colors:active) {
    body.kk-sys :is(button,a,input,.kk-flat-play,.kk-taste-play,.kk-motion-toggle>span:first-child) {
      --kk-cel-gleam:none!important;
      --kk-cel-shadow:none!important;
      box-shadow:none!important;
      border-color:ButtonText!important;
    }
  }
}