/* ==========================================================================
   RURALTECH SERVICES PANEL V1

   Progressive enhancement for the existing service strip.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Service triggers
   -------------------------------------------------------------------------- */

.services__inner.rt-services-ready {
  display: inline-flex;

  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  column-gap: .42em;
  row-gap: .24em;
}


.rt-service-trigger {
  appearance: none;

  margin: 0;
  padding: .12em .05em;

  border: 0;

  background: transparent;

  color: inherit;

  font: inherit;
  line-height: inherit;

  cursor: pointer;

  opacity: .96;

  position: relative;

  transition:
    opacity 180ms ease,
    transform 180ms ease,
    color 180ms ease;
}


.rt-service-trigger::after {
  content: "";

  position: absolute;

  left: 10%;
  right: 10%;
  bottom: -.10em;

  height: 1px;

  background:
    rgba(223, 243, 238, .52);

  transform:
    scaleX(0);

  transform-origin:
    center;

  transition:
    transform 180ms ease;
}


.rt-service-trigger:hover,
.rt-service-trigger:focus-visible {
  opacity: 1;

  color:
    rgba(255, 255, 255, .98);

  transform:
    translateY(-1px);
}


.rt-service-trigger:hover::after,
.rt-service-trigger:focus-visible::after {
  transform:
    scaleX(1);
}


.rt-service-trigger:focus-visible {
  outline:
    1px solid
    rgba(228, 245, 239, .30);

  outline-offset: 4px;

  border-radius: 2px;
}


.rt-service-separator {
  opacity: .82;

  user-select: none;

  pointer-events: none;
}


/* ==========================================================================
   Native modal dialog
   ========================================================================== */

.rt-service-dialog {
  width:
    min(
      780px,
      calc(100vw - 32px)
    );

  max-height:
    min(
      760px,
      calc(100vh - 36px)
    );

  margin: auto;

  padding: 0;

  border: 0;

  background: transparent;

  color: #f6fbf9;

  overflow: visible;
}


.rt-service-dialog::backdrop {
  background:
    rgba(3, 23, 31, .68);

  backdrop-filter:
    blur(8px)
    saturate(110%);

  -webkit-backdrop-filter:
    blur(8px)
    saturate(110%);
}


.rt-service-dialog[open] {
  animation:
    rt-service-dialog-enter
    260ms
    cubic-bezier(.2, .74, .25, 1)
    both;
}


@keyframes rt-service-dialog-enter {

  from {
    opacity: 0;

    transform:
      translateY(12px)
      scale(.985);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.rt-service-dialog__shell {
  position: relative;

  overflow: hidden;

  border:
    1px solid
    rgba(218, 240, 234, .16);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(7, 57, 69, .965) 0%,
      rgba(5, 42, 53, .975) 56%,
      rgba(5, 34, 44, .985) 100%
    );

  box-shadow:
    0 32px 90px
      rgba(0, 16, 23, .42),

    inset 0 1px 0
      rgba(255, 255, 255, .055);
}


.rt-service-dialog__shell::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  top: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(199, 234, 226, .42),
      rgba(225, 210, 159, .32),
      transparent
    );
}


/* --------------------------------------------------------------------------
   Close
   -------------------------------------------------------------------------- */

.rt-service-dialog__close {
  position: absolute;

  z-index: 3;

  top: 18px;
  right: 18px;

  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    rgba(227, 243, 238, .13);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, .035);

  color:
    rgba(244, 249, 247, .90);

  font-size: 26px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  transition:
    background 180ms ease,
    transform 180ms ease,
    border-color 180ms ease;
}


.rt-service-dialog__close:hover,
.rt-service-dialog__close:focus-visible {
  background:
    rgba(255, 255, 255, .085);

  border-color:
    rgba(227, 243, 238, .25);

  transform:
    rotate(5deg);
}


.rt-service-dialog__close:focus-visible {
  outline:
    2px solid
    rgba(231, 239, 205, .30);

  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.rt-service-dialog__header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  min-height: 70px;

  padding:
    19px 82px
    14px 32px;

  border-bottom:
    1px solid
    rgba(226, 244, 238, .075);
}


.rt-service-dialog__brand {
  color:
    rgba(227, 240, 235, .58);

  font-size: 12px;
  font-weight: 700;

  letter-spacing: .14em;

  text-transform: uppercase;
}


.rt-service-dialog__count {
  color:
    rgba(234, 224, 190, .74);

  font-variant-numeric:
    tabular-nums;

  font-size: 13px;

  letter-spacing: .08em;
}


/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */

.rt-service-dialog__content {
  min-height: 286px;

  padding:
    36px 48px 36px;
}


.rt-service-dialog__content.is-forward {
  animation:
    rt-service-content-forward
    300ms
    cubic-bezier(.2, .68, .24, 1)
    both;
}


.rt-service-dialog__content.is-backward {
  animation:
    rt-service-content-backward
    300ms
    cubic-bezier(.2, .68, .24, 1)
    both;
}


.rt-service-dialog__content.is-open {
  animation:
    rt-service-content-open
    320ms
    cubic-bezier(.2, .68, .24, 1)
    both;
}


@keyframes rt-service-content-forward {

  from {
    opacity: .18;
    transform: translateX(22px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}


@keyframes rt-service-content-backward {

  from {
    opacity: .18;
    transform: translateX(-22px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}


@keyframes rt-service-content-open {

  from {
    opacity: .15;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.rt-service-dialog__title {
  margin:
    0 0 16px;

  color:
    #f8fbfa;

  font-size:
    clamp(
      28px,
      4vw,
      38px
    );

  font-weight: 600;

  line-height: 1.14;

  letter-spacing: -.02em;
}


.rt-service-dialog__lead {
  max-width: 650px;

  margin:
    0 0 28px;

  color:
    rgba(232, 243, 239, .82);

  font-size: 17px;

  line-height: 1.65;
}


.rt-service-dialog__points {
  margin: 0;
  padding: 0;

  list-style: none;

  display: grid;

  gap: 12px;
}


.rt-service-dialog__points li {
  position: relative;

  padding-left: 22px;

  color:
    rgba(223, 238, 233, .75);

  font-size: 15px;

  line-height: 1.52;
}


.rt-service-dialog__points li::before {
  content: "";

  position: absolute;

  left: 1px;
  top: .67em;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    rgba(225, 211, 163, .76);

  box-shadow:
    0 0 7px
    rgba(225, 211, 163, .16);
}


/* --------------------------------------------------------------------------
   Previous / next
   -------------------------------------------------------------------------- */

.rt-service-dialog__nav {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  border-top:
    1px solid
    rgba(226, 244, 238, .075);
}


.rt-service-nav {
  min-height: 78px;

  display: grid;

  grid-template-columns:
    auto 1fr;

  align-items: center;

  gap: 14px;

  padding:
    14px 28px;

  border: 0;

  background:
    rgba(255, 255, 255, .018);

  color:
    rgba(232, 243, 239, .76);

  text-align: left;

  cursor: pointer;

  transition:
    background 190ms ease,
    color 190ms ease;
}


.rt-service-nav + .rt-service-nav {
  border-left:
    1px solid
    rgba(226, 244, 238, .075);
}


.rt-service-nav--next {
  grid-template-columns:
    1fr auto;

  text-align: right;
}


.rt-service-nav:hover,
.rt-service-nav:focus-visible {
  background:
    rgba(255, 255, 255, .045);

  color:
    rgba(249, 251, 250, .96);
}


.rt-service-nav:focus-visible {
  outline:
    1px solid
    rgba(231, 241, 218, .23);

  outline-offset:
    -4px;
}


.rt-service-nav__arrow {
  color:
    rgba(228, 215, 170, .84);

  font-size: 25px;
  font-weight: 300;

  transition:
    transform 180ms ease;
}


.rt-service-nav--prev:hover
.rt-service-nav__arrow {
  transform:
    translateX(-4px);
}


.rt-service-nav--next:hover
.rt-service-nav__arrow {
  transform:
    translateX(4px);
}


.rt-service-nav__caption {
  display: block;

  margin-bottom: 3px;

  color:
    rgba(214, 229, 224, .46);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;
}


.rt-service-nav__label {
  display: block;

  font-size: 13px;

  line-height: 1.3;
}


/* --------------------------------------------------------------------------
   Page while modal is open
   -------------------------------------------------------------------------- */

body.rt-service-dialog-open {
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .rt-service-dialog[open],
  .rt-service-dialog__content,
  .rt-service-trigger,
  .rt-service-nav,
  .rt-service-nav__arrow {
    animation: none !important;

    transition: none !important;
  }
}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

  .rt-service-dialog {
    width:
      calc(100vw - 20px);

    max-height:
      calc(100vh - 20px);
  }


  .rt-service-dialog__shell {
    border-radius: 15px;
  }


  .rt-service-dialog__header {
    min-height: 74px;

    padding:
      18px 70px
      14px 22px;
  }


  .rt-service-dialog__content {
    min-height: 330px;

    padding:
      32px 24px 34px;
  }


  .rt-service-dialog__nav {
    grid-template-columns: 1fr;
  }


  .rt-service-nav + .rt-service-nav {
    border-left: 0;

    border-top:
      1px solid
      rgba(226, 244, 238, .075);
  }


  .rt-service-nav {
    min-height: 72px;

    padding:
      14px 20px;
  }
}