/**
 * Ship Stack widget — the home hero visual.
 *
 * The three things the headline names, built in HTML/CSS: a website in a
 * browser, a WordPress plugin row and a phone app. One load moment (they
 * settle into the stack in that order, then each shows its "shipped" status);
 * nothing runs after that. No images, no script.
 *
 * Everything is sized in em off the container width (container query units),
 * so the composition scales as one picture from desktop down to phones.
 */

.skyweb-ship {
  --ss-ink: var(--skyweb-dark-color, #111827);
  --ss-card: var(--skyweb-surface-color, #fff);
  --ss-soft: color-mix(in srgb, var(--ss-ink) 5%, var(--ss-card));
  --ss-line: color-mix(in srgb, var(--ss-ink) 10%, var(--ss-card));
  --ss-mute: color-mix(in srgb, var(--ss-ink) 55%, var(--ss-card));
  --ss-blue: var(--skyweb-primary-color, #2E5BFF);
  --ss-green: var(--skyweb-success-color, #2FB27B);
  --ss-shadow: 0 1.6em 3.2em -1.2em color-mix(in srgb, #000 28%, transparent), 0 .2em .6em color-mix(in srgb, #000 8%, transparent);
  container-type: inline-size;
  width: 100%;
}

/* Inline-size containment gives the widget no intrinsic width, so a centred
   flex column would shrink it to 0 — make the widget fill its column. */
.elementor-widget-skyweb_ship_stack {
  align-self: stretch;
  width: 100%;
}

html.dark .skyweb-ship {
  --ss-card: #17171b;
  --ss-soft: #1f1f24;
  --ss-line: #2a2a30;
  --ss-shadow: 0 1.6em 3.6em -1em rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .02);
}

.skyweb-ship__stage {
  position: relative;
  aspect-ratio: 6 / 5;
  font-size: 2.5cqw;
  line-height: 1.3;
  color: var(--ss-ink);
}

.skyweb-ship__stage *,
.skyweb-ship__stage *::before {
  box-sizing: border-box;
}

.skyweb-ship__stage i,
.skyweb-ship__stage b,
.skyweb-ship__stage small {
  font-style: normal;
}

.skyweb-ship__site,
.skyweb-ship__plugin,
.skyweb-ship__app {
  position: absolute;
  background: var(--ss-card);
  border: 1px solid var(--ss-line);
  box-shadow: var(--ss-shadow);
}

/* One load moment: the three settle in headline order, then their statuses
   show. Only when the widget's "Entrance animation" switch is on. */
.skyweb-ship--animate .skyweb-ship__site,
.skyweb-ship--animate .skyweb-ship__plugin,
.skyweb-ship--animate .skyweb-ship__app {
  animation: skyweb-ship-in .9s cubic-bezier(.2, .8, .2, 1) backwards;
}

.skyweb-ship--animate .skyweb-ship__plugin {
  animation-delay: .14s;
}

.skyweb-ship--animate .skyweb-ship__app {
  animation-delay: .28s;
}

.skyweb-ship--animate .skyweb-ship__badge {
  animation: skyweb-ship-badge .5s .95s cubic-bezier(.2, .8, .2, 1) backwards;
}

.skyweb-ship--animate .skyweb-ship__badge--ok {
  animation-delay: 1.1s;
}

.skyweb-ship--animate .skyweb-ship__badge--app {
  animation-delay: 1.25s;
}

/* ---------------------------- website ---------------------------- */

.skyweb-ship__site {
  top: 2%;
  left: 2%;
  width: 92%;
  border-radius: 1em;
  overflow: hidden;
}

.skyweb-ship__bar {
  display: flex;
  align-items: center;
  gap: .8em;
  padding: .7em .9em;
  background: var(--ss-soft);
  border-bottom: 1px solid var(--ss-line);
}

.skyweb-ship__dots {
  display: flex;
  gap: .35em;
}

.skyweb-ship__dots i {
  width: .6em;
  height: .6em;
  border-radius: 50%;
  background: var(--ss-line);
}

.skyweb-ship__url {
  flex: 1;
  max-width: 16em;
  margin: 0 auto;
  padding: .3em .8em;
  border-radius: 99em;
  background: var(--ss-card);
  color: var(--ss-mute);
  font-size: .78em;
  text-align: center;
}

.skyweb-ship__page {
  padding: 1em 1.3em 1.4em;
}

.skyweb-ship__nav {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 1.4em;
}

.skyweb-ship__logo {
  width: 1.6em;
  height: 1.6em;
  border-radius: .45em;
  background: var(--ss-blue);
}

.skyweb-ship__links {
  display: flex;
  flex: 1;
  gap: .7em;
}

.skyweb-ship__links i {
  width: 3em;
  height: .45em;
  border-radius: 1em;
  background: var(--ss-line);
}

.skyweb-ship__navbtn {
  padding: .35em .9em;
  border-radius: 99em;
  background: var(--ss-ink);
  color: var(--ss-card);
  font-size: .72em;
  font-weight: 600;
}

.skyweb-ship__hero {
  display: grid;
  grid-template-columns: 1fr 13.5em;
  gap: 1.4em;
  align-items: start;
}

.skyweb-ship__copy strong {
  display: block;
  margin-bottom: .6em;
  font-size: 1.55em;
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.skyweb-ship__line {
  display: block;
  height: .5em;
  margin-bottom: .45em;
  border-radius: 1em;
  background: var(--ss-line);
}

.skyweb-ship__line--short {
  width: 70%;
}

.skyweb-ship__rating {
  display: block;
  margin-top: 1.1em;
  color: var(--ss-mute);
  font-size: .78em;
}

.skyweb-ship__rating b {
  color: var(--ss-ink);
  font-weight: 650;
}

.skyweb-ship__stars {
  margin-right: .3em;
  color: #F5A524;
  letter-spacing: .08em;
}

.skyweb-ship__give {
  display: grid;
  gap: .6em;
  padding: .8em;
  border: 1px solid var(--ss-line);
  border-radius: .8em;
  background: var(--ss-card);
}

.skyweb-ship__tabs,
.skyweb-ship__amounts {
  display: grid;
  gap: .3em;
  font-size: .75em;
  text-align: center;
}

.skyweb-ship__tabs {
  grid-template-columns: 1fr 1fr;
  padding: .25em;
  border-radius: .6em;
  background: var(--ss-soft);
}

.skyweb-ship__tabs i {
  padding: .35em 0;
  border-radius: .45em;
  color: var(--ss-mute);
}

.skyweb-ship__tabs i.is-on {
  background: var(--ss-card);
  color: var(--ss-ink);
  font-weight: 600;
}

.skyweb-ship__amounts {
  grid-template-columns: repeat(3, 1fr);
}

.skyweb-ship__amounts i {
  padding: .5em 0;
  border: 1px solid var(--ss-line);
  border-radius: .5em;
  font-weight: 600;
}

.skyweb-ship__amounts i.is-on {
  border-color: var(--ss-blue);
  background: color-mix(in srgb, var(--ss-blue) 12%, var(--ss-card));
  color: var(--ss-blue);
}

.skyweb-ship__cta {
  padding: .6em 0;
  border-radius: .55em;
  background: var(--ss-blue);
  color: #fff;
  font-size: .75em;
  font-weight: 600;
  text-align: center;
}

/* ---------------------------- plugin ----------------------------- */

.skyweb-ship__plugin {
  top: 58%;
  left: 0;
  display: flex;
  align-items: center;
  gap: .9em;
  width: 66%;
  padding: 1em 1.1em;
  border-radius: .9em;
}

.skyweb-ship__picon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.6em;
  height: 2.6em;
  border-radius: .7em;
  background: var(--ss-blue);
  color: #fff;
  font-size: 1.05em;
  font-weight: 700;
}

.skyweb-ship__pbody {
  display: grid;
  flex: 1;
  gap: .15em;
  min-width: 0;
}

.skyweb-ship__pbody strong {
  font-size: 1em;
  font-weight: 650;
}

.skyweb-ship__pbody span,
.skyweb-ship__pbody small {
  overflow: hidden;
  color: var(--ss-mute);
  font-size: .72em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ------------------------------ app ------------------------------ */

.skyweb-ship__app {
  top: 48%;
  right: 0;
  width: 24.5%;
  aspect-ratio: 9 / 16;
  padding: .45em;
  border-radius: 2em;
  background: color-mix(in srgb, var(--ss-ink) 88%, var(--ss-card));
  border-color: transparent;
}

html.dark .skyweb-ship__app {
  background: #2a2a30;
}

.skyweb-ship__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .7em;
  height: 100%;
  padding: .9em .9em 1em;
  border-radius: 1.6em;
  background: var(--ss-card);
  overflow: hidden;
}

.skyweb-ship__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .62em;
}

.skyweb-ship__status i {
  width: 1.8em;
  height: .8em;
  border-radius: .3em;
  background: var(--ss-ink);
  opacity: .8;
}

.skyweb-ship__apptitle {
  font-size: 1.05em;
  font-weight: 650;
}

.skyweb-ship__order {
  display: grid;
  gap: .15em;
  padding: .7em;
  border-radius: .8em;
  background: var(--ss-soft);
}

.skyweb-ship__order b {
  font-size: .78em;
  font-weight: 650;
}

.skyweb-ship__order small {
  color: var(--ss-mute);
  font-size: .65em;
}

.skyweb-ship__route {
  width: 100%;
  height: auto;
  border-radius: .8em;
  background: color-mix(in srgb, var(--ss-blue) 8%, var(--ss-card));
}

.skyweb-ship__route path {
  fill: none;
  stroke: var(--ss-blue);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1 7;
}

.skyweb-ship__route circle {
  fill: var(--ss-mute);
}

.skyweb-ship__route .skyweb-ship__car {
  fill: var(--ss-blue);
  stroke: var(--ss-card);
  stroke-width: 2.5;
}

.skyweb-ship__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .3em;
}

.skyweb-ship__steps i {
  height: .3em;
  border-radius: 1em;
  background: var(--ss-line);
}

.skyweb-ship__steps i.is-on {
  background: var(--ss-green);
}

/* ---------------------------- badges ----------------------------- */

.skyweb-ship__badge {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  flex: 0 0 auto;
  padding: .3em .75em;
  border-radius: 99em;
  background: color-mix(in srgb, var(--ss-green) 14%, var(--ss-card));
  color: color-mix(in srgb, var(--ss-green) 75%, var(--ss-ink));
  font-size: .72em;
  font-weight: 600;
}

.skyweb-ship__badge::before {
  content: "";
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background: var(--ss-green);
}

.skyweb-ship__badge--app {
  align-self: center;
  margin-top: auto;
}

@keyframes skyweb-ship-in {
  from {
    opacity: 0;
    transform: translateY(2.4em) scale(.97);
  }
}

@keyframes skyweb-ship-badge {
  from {
    opacity: 0;
    transform: scale(.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skyweb-ship--animate .skyweb-ship__site,
  .skyweb-ship--animate .skyweb-ship__plugin,
  .skyweb-ship--animate .skyweb-ship__app,
  .skyweb-ship--animate .skyweb-ship__badge {
    animation: none;
  }
}