/*
 * The product pages: WordPress and business hosting, AOD, VOD, SSL
 * certificates, backup servers, online drive (body class "product-page").
 *
 * The header and the plan cards are the theme's own, from
 * pages/shared-hosting.css. What is here is what these pages add to them:
 *
 *   - the header's colour tones and its illustration (site/blocks/page-header)
 *   - the highlights strip under the header (site/blocks/highlights)
 *   - the feature cards, the home page's .se-iv (site/blocks/icon-cards)
 *   - the steps (site/blocks/steps)
 *   - the plans' empty state and product icons (site/blocks/hosting-plans)
 *
 * One file for both languages: sides are logical (inline-start / inline-end),
 * so the Persian pages mirror without a copy of their own. Colours come from
 * the theme's variables, with .light-theme twins where the theme has them.
 */

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

.product-page .header {
  position: relative;
}
/* Room under the text for the highlights strip, which rides up over the edge. */
@media only screen and (min-width: 992px) {
  .product-page .header {
    padding-bottom: 100px;
  }
}

/* A faint dot grid, so a flat pastel reads as a surface rather than a fill. */
.product-page .header::before {
  position: absolute;
  inset: 0;
  content: '';
  background-image: radial-gradient(rgba(15, 16, 20, .09) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 70%, transparent);
  pointer-events: none;
}

.product-page .header > * {
  position: relative;
}

/* The theme's header is yellow; each product family can take its own tone. */
.header.header--tone-sky { background-color: #cfe6ff; }
.header.header--tone-mint { background-color: #c8f1dc; }
.header.header--tone-lavender { background-color: #e0d6ff; }
.header.header--tone-coral { background-color: #ffd5c7; }
.header.header--tone-sand { background-color: #f5e2bf; }

.product-page .header .para-1 {
  max-width: 560px;
  color: rgba(15, 16, 20, .78);
  font-size: 16px;
  line-height: 1.75;
}
@media only screen and (max-width: 991.98px) {
  .product-page .header .para-1 {
    margin-inline: auto;
  }
}

.product-page .header .header-actions {
  gap: 12px;
  margin-top: 8px;
}

.product-page .header .btn-outline-dark {
  background-color: transparent;
  border-color: rgba(15, 16, 20, .35);
  color: var(--dark);
}
.product-page .header .btn-outline-dark:hover {
  background-color: var(--dark);
  border-color: var(--dark);
  color: #fff;
}

/* Small reassurance ticks under the buttons. */
.product-page .header .header-points {
  gap: 8px 22px;
  margin-top: 26px;
  padding: 0;
  list-style: none;
}
.product-page .header .header-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dark);
  font-size: 14px;
  font-weight: 500;
}
.product-page .header .header-points img {
  width: 16px;
}

/* The illustration sits beside the text, centred on it, on the far side. */
.product-page .header .container {
  min-height: 340px;
}
.product-page .header .hero {
  top: 50%;
  bottom: auto;
  left: auto;
  right: auto;
  inset-inline-end: 1%;
  width: min(470px, 38vw);
  transform: translateY(-50%);
}
@media only screen and (max-width: 991.98px) {
  .product-page .header .container {
    min-height: 0;
  }
}

/* Anchored sections clear the fixed navbar when a header button jumps to them. */
.product-page [id] {
  scroll-margin-top: 110px;
}

/* ---------------------------------------------------------------------------
   Highlights
   --------------------------------------------------------------------------- */

.wn-highlights {
  position: relative;
  z-index: 2;
  margin-top: -44px;
}

.wn-highlights__bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background-color: var(--semi-dark);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 14px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .28);
  overflow: hidden;
}
.light-theme .wn-highlights__bar {
  background-color: #fff;
  border-color: var(--border);
  box-shadow: 0 24px 50px rgba(0, 16, 51, .08);
}

.wn-highlight {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 28px;
}
.wn-highlight + .wn-highlight {
  border-inline-start: 1px solid rgba(255, 255, 255, .06);
}
.light-theme .wn-highlight + .wn-highlight {
  border-color: var(--border);
}

.wn-highlight__icon {
  display: flex;
  flex: 0 0 50px;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background-color: rgba(218, 120, 0, .12);
}
.wn-highlight__icon img {
  width: 26px;
  max-height: 26px;
}

.wn-highlight__value {
  display: block;
  margin-bottom: 2px;
  color: #fff;
  font-family: var(--primary-font);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}
.light-theme .wn-highlight__value {
  color: var(--dark);
}

.wn-highlight__label {
  display: block;
  color: var(--text-gray);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

@media only screen and (max-width: 991.98px) {
  .wn-highlights {
    margin-top: 40px;
  }
  .wn-highlights__bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wn-highlight:nth-child(3) {
    border-inline-start: 0;
  }
  .wn-highlight:nth-child(n+3) {
    border-top: 1px solid rgba(255, 255, 255, .06);
  }
  .light-theme .wn-highlight:nth-child(n+3) {
    border-top-color: var(--border);
  }
}
@media only screen and (max-width: 575.98px) {
  .wn-highlights__bar {
    grid-template-columns: minmax(0, 1fr);
  }
  .wn-highlight + .wn-highlight {
    border-inline-start: 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
  }
}

/* ---------------------------------------------------------------------------
   Feature cards — the home page's .se-iv, for the pages that do not load it
   --------------------------------------------------------------------------- */

.product-page .se-iv .row > [class*="col-"] {
  display: flex;
}
/* Six cards read as two rows of three rather than four and two. */
@media only screen and (min-width: 1200px) {
  .product-page .se-iv .row > .col-xl-3 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

.product-page .se-iv .box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 35px 30px 22px;
  background-color: var(--semi-dark);
  border-radius: 10px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, .1);
  transition: all .2s ease;
}
.light-theme.product-page .se-iv .box {
  background-color: #fff;
  border: 1px solid var(--border);
  box-shadow: none;
}
.product-page .se-iv .box:hover {
  background-color: var(--semi-dark-2);
  box-shadow: 0 10px 45px rgba(0, 0, 0, .2);
  transform: translateY(-3px);
}
.light-theme.product-page .se-iv .box:hover {
  background-color: var(--light);
}

.product-page .se-iv .box-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.product-page .se-iv .box .icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 26px;
  border-radius: 12px;
  overflow: hidden;
}
.product-page .se-iv .box .icon::before {
  position: absolute;
  inset: 0;
  content: '';
  background-color: var(--primary);
  opacity: .12;
}
.product-page .se-iv .box.color-1 .icon::before { background-color: #26c6da; }
.product-page .se-iv .box.color-2 .icon::before { background-color: #fc573b; }
.product-page .se-iv .box.color-3 .icon::before { background-color: #ffd200; }
.product-page .se-iv .box.color-4 .icon::before { background-color: #bd63f9; }
.product-page .se-iv .box.color-5 .icon::before { background-color: #00ffb7; }
.product-page .se-iv .box.color-6 .icon::before { background-color: #fe9801; }
.product-page .se-iv .box.color-7 .icon::before { background-color: #3b82f6; }
.product-page .se-iv .box.color-8 .icon::before { background-color: #f43f5e; }
.product-page .se-iv .box .icon img {
  position: relative;
  width: 32px;
  max-height: 32px;
}

.product-page .se-iv .box-title {
  margin-bottom: 10px;
  color: #fff;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
}
.light-theme.product-page .se-iv .box-title {
  color: var(--dark);
}

.product-page .se-iv .box-para {
  flex: 1 1 auto;
  margin-bottom: 18px;
  color: var(--text-gray);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.75;
}

.product-page .se-iv .arrow {
  text-align: end;
}
.product-page .se-iv .arrow img {
  width: 22px;
  filter: contrast(0);
  transition: all .15s ease;
}
[dir="rtl"] .product-page .se-iv .arrow img {
  transform: scaleX(-1);
}
.product-page .se-iv .box:hover .arrow img {
  filter: contrast(100%);
}
/* A card that leads nowhere does not pretend to. */
.product-page .se-iv .box:not(:has(.box-link)) .arrow {
  display: none;
}

/* ---------------------------------------------------------------------------
   Steps
   --------------------------------------------------------------------------- */

.wn-steps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wn-step {
  position: relative;
  padding: 32px 28px 30px;
  background-color: var(--semi-dark);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 14px;
}
.light-theme .wn-step {
  background-color: #fff;
  border-color: var(--border);
}

.wn-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
  border-radius: 50%;
  background-color: var(--primary);
  box-shadow: 0 0 0 7px rgba(218, 120, 0, .14);
  color: #fff;
  font-family: var(--primary-font);
  font-size: 17px;
  font-weight: 600;
}

/* A dashed line from one number to the next, where they share a row. */
@media only screen and (min-width: 992px) {
  .wn-step:not(:last-child)::after {
    position: absolute;
    top: 55px;
    inset-inline-start: 96px;
    inset-inline-end: -24px;
    content: '';
    border-top: 2px dashed rgba(218, 120, 0, .35);
  }
}

.wn-step__title {
  margin-bottom: 10px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}
.light-theme .wn-step__title {
  color: var(--dark);
}

.wn-step__text {
  margin: 0;
  color: var(--text-gray);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.75;
}

.wn-steps__actions {
  margin-top: 40px;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Plans: a product's own icon, and the state before any plan is on sale
   --------------------------------------------------------------------------- */

.product-page .se-i .plans .plan-icon--product {
  background-color: rgba(218, 120, 0, .12);
}
.product-page .se-i .plans .plan-icon--product img {
  width: 28px;
  max-height: 28px;
}

.wn-plans-empty {
  max-width: 680px;
  margin: 0 auto;
  padding: 46px 40px;
  text-align: center;
  background-color: var(--semi-dark);
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 14px;
}
.light-theme .wn-plans-empty {
  background-color: #fff;
  border-color: var(--border);
}
.wn-plans-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  border-radius: 16px;
  background-color: rgba(218, 120, 0, .12);
}
.wn-plans-empty__icon img {
  width: 32px;
}
.wn-plans-empty__text {
  margin-bottom: 24px;
  color: var(--text-gray);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
}

/* The theme's icon set mixes colour icons with plain white and plain black
   line icons, each drawn for one background. Turned to suit the theme, they
   stay visible on the feature cards, highlights and phone cards alike. */
.light-theme :is(.se-iv .box .icon, .wn-highlight__icon, .wn-phone__icon) img:is(
  [src$="/technical-support.svg"], [src$="/rocket.svg"], [src$="/android.svg"], [src$="/mail.svg"],
  [src$="/star.svg"], [src$="/money-back.svg"], [src$="/digital.svg"], [src$="/wishlist.svg"],
  [src$="/tickets_bf.svg"], [src$="/warning_bf.svg"], [src$="/live_chat_bf.svg"], [src$="/message_bf.svg"]
) {
  filter: invert(1);
}
body:not(.light-theme) :is(.se-iv .box .icon, .wn-highlight__icon, .wn-phone__icon) img:is(
  [src$="/bell.svg"], [src$="/price-tag.svg"], [src$="/user.svg"], [src$="/speedometer.svg"], [src$="/controls.svg"]
) {
  filter: invert(1);
}

/* Four or eight cards read as rows of four, not three and one. */
@media only screen and (min-width: 1200px) {
  .product-page .se-iv .row:is(:has(> :nth-child(4):last-child), :has(> :nth-child(8):last-child)) > .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* ===========================================================================
   Company pages' live blocks — WHOIS, newsroom, promotions, phone numbers.
   Same surfaces as the rest of this file: --semi-dark cards on the dark
   theme, white with a --border hairline on the light one.
   =========================================================================== */

.wn-whois__form,
.wn-whois-result,
.wn-news__notices,
.wn-post,
.wn-promo,
.wn-promos__empty,
.wn-phone,
.wn-office {
  background-color: var(--semi-dark);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 14px;
}
.light-theme .wn-whois__form,
.light-theme .wn-whois-result,
.light-theme .wn-news__notices,
.light-theme .wn-post,
.light-theme .wn-promo,
.light-theme .wn-promos__empty,
.light-theme .wn-phone,
.light-theme .wn-office {
  background-color: #fff;
  border-color: var(--border);
}

/* --- WHOIS --------------------------------------------------------------- */

.wn-whois__form {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 820px;
  padding: 10px;
  margin: 0 auto;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .25);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.light-theme .wn-whois__form {
  box-shadow: 0 24px 50px rgba(0, 16, 51, .08);
}
.wn-whois__form:focus-within {
  border-color: rgba(218, 120, 0, .6);
  box-shadow: 0 0 0 4px rgba(218, 120, 0, .15), 0 24px 50px rgba(0, 0, 0, .25);
}

.wn-whois__field {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding-inline: 14px;
  color: var(--text-gray);
}
.wn-whois__field svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--primary);
}
.wn-whois__field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  outline: none;
}
.light-theme .wn-whois__field input {
  color: var(--dark);
}
.wn-whois__field input::placeholder {
  color: var(--text-gray);
}
[dir="rtl"] .wn-whois__field input::placeholder {
  text-align: right;
}

.wn-whois__submit {
  flex: 0 0 auto;
  height: 52px;
  padding: 0 34px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffb830, var(--primary));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .2s ease;
}
.wn-whois__submit:hover {
  filter: brightness(1.07);
}
.wn-whois__submit:disabled {
  opacity: .6;
  cursor: progress;
}

.wn-whois__examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin: 18px 0 0;
  color: var(--text-gray);
  font-size: 14px;
}
.wn-whois__examples a {
  color: var(--text-gray);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
}
.wn-whois__examples a:hover {
  color: var(--primary);
}

.wn-whois__result {
  max-width: 820px;
  margin: 36px auto 0;
}
.wn-whois__intro {
  color: var(--text-gray);
  text-align: center;
  line-height: 1.9;
}

.wn-whois-result {
  padding: 30px;
}
.wn-whois-result--error,
.wn-whois-result--loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  color: var(--text-gray);
}
.wn-whois-result--error {
  border-color: rgba(236, 98, 95, .4);
  color: var(--red);
}
.wn-whois-result--error svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}
.wn-whois-result--loading::before {
  width: 18px;
  height: 18px;
  content: '';
  border: 2px solid rgba(218, 120, 0, .25);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: wn-spin .8s linear infinite;
}
@keyframes wn-spin {
  to { transform: rotate(360deg); }
}

.wn-whois-result__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.light-theme .wn-whois-result__head {
  border-color: var(--border);
}
.wn-whois-result__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.wn-whois-result__domain {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  word-break: break-all;
}
.light-theme .wn-whois-result__domain {
  color: var(--dark);
}
.wn-whois-result .btn-outline-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
}
.light-theme .wn-whois-result .btn-outline-dark {
  border-color: var(--border);
  color: var(--dark);
}

.wn-whois-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background-color: rgba(218, 120, 0, .14);
  color: #ffb830;
  font-size: 13px;
  font-weight: 600;
}
.wn-whois-pill::before {
  width: 7px;
  height: 7px;
  content: '';
  border-radius: 50%;
  background-color: currentColor;
}
.wn-whois-pill--free {
  background-color: rgba(21, 205, 114, .12);
  color: #15cd72;
}
.light-theme .wn-whois-pill {
  color: #b86400;
}
.light-theme .wn-whois-pill--free {
  color: #0f9f58;
}

.wn-whois-result__lead {
  margin: 18px 0 0;
  color: var(--text-gray);
}

.wn-whois-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin: 24px 0 0;
}
.wn-whois-fact {
  padding: 16px 18px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, .03);
}
.light-theme .wn-whois-fact {
  background-color: var(--light);
}
.wn-whois-fact--wide {
  grid-column: 1 / -1;
}
.wn-whois-fact dt {
  margin-bottom: 6px;
  color: var(--text-gray);
  font-size: 13px;
  font-weight: 500;
}
.wn-whois-fact dd {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.light-theme .wn-whois-fact dd {
  color: var(--dark);
}
.wn-whois-fact dd a {
  color: var(--primary);
}
.wn-whois-fact small {
  display: block;
  margin-top: 4px;
  color: var(--text-gray);
  font-size: 12.5px;
  font-weight: 500;
}
.wn-whois-fact small.is-soon {
  color: var(--red);
}

.wn-whois-group {
  margin-top: 24px;
}
.wn-whois-group__title {
  margin-bottom: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.light-theme .wn-whois-group__title {
  color: var(--dark);
}
.wn-whois-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wn-whois-chips li {
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}
.light-theme .wn-whois-chips li {
  border-color: var(--border);
  color: var(--dark);
}
.wn-whois-chips--soft li {
  border-color: transparent;
  background-color: rgba(59, 130, 246, .12);
  color: #8fb8ff;
  font-family: inherit;
}
.light-theme .wn-whois-chips--soft li {
  color: #1d4ed8;
}

.wn-whois-raw {
  margin-top: 24px;
}
.wn-whois-raw summary {
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
}
.wn-whois-raw pre {
  max-height: 340px;
  margin: 12px 0 0;
  padding: 16px;
  overflow: auto;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, .25);
  color: var(--text-gray);
  font-size: 12.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  text-align: left;
}
.light-theme .wn-whois-raw pre {
  background-color: var(--light);
}

.wn-whois-result__note {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: var(--text-gray);
  font-size: 13px;
  line-height: 1.9;
}
.light-theme .wn-whois-result__note {
  border-color: var(--border);
}

@media only screen and (max-width: 575.98px) {
  .wn-whois__form {
    flex-direction: column;
    align-items: stretch;
  }
  .wn-whois__submit {
    width: 100%;
  }
  .wn-whois-result {
    padding: 22px 18px;
  }
}

/* --- Newsroom ------------------------------------------------------------ */

.wn-news__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 30px;
  align-items: start;
}
@media only screen and (max-width: 991.98px) {
  .wn-news__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wn-news__notices {
  padding: 28px;
}
.wn-news__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: #fff;
  font-size: 19px;
  font-weight: 600;
}
.light-theme .wn-news__title {
  color: var(--dark);
}
.wn-news__pulse {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #15cd72;
}
.wn-news__pulse::after {
  position: absolute;
  inset: -5px;
  content: '';
  border-radius: 50%;
  background-color: rgba(21, 205, 114, .35);
  animation: wn-pulse 1.8s ease-out infinite;
}
@keyframes wn-pulse {
  from { transform: scale(.4); opacity: 1; }
  to { transform: scale(1.6); opacity: 0; }
}

.wn-notice {
  position: relative;
  padding-block: 4px 22px;
  padding-inline-start: 22px;
  border-inline-start: 2px solid rgba(218, 120, 0, .35);
}
.wn-notice:last-child {
  padding-bottom: 0;
}
.wn-notice::before {
  position: absolute;
  top: 6px;
  inset-inline-start: -7px;
  width: 12px;
  height: 12px;
  content: '';
  border: 2px solid var(--primary);
  border-radius: 50%;
  background-color: var(--semi-dark);
}
.light-theme .wn-notice::before {
  background-color: #fff;
}
.wn-notice__date {
  display: block;
  margin-bottom: 6px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
}
.wn-notice__text {
  margin: 0;
  color: #fff;
  font-size: 15px;
  line-height: 1.8;
}
.light-theme .wn-notice__text {
  color: var(--dark);
}
.wn-notice__link {
  display: inline-block;
  margin-top: 8px;
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
}

.wn-news__empty {
  margin: 0;
  color: var(--text-gray);
  line-height: 1.9;
}

.wn-news__posts-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.wn-news__all {
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
}

.wn-news__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media only screen and (max-width: 575.98px) {
  .wn-news__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wn-post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.wn-post:hover {
  border-color: rgba(218, 120, 0, .45);
  transform: translateY(-3px);
}
.wn-post--lead {
  grid-column: 1 / -1;
  flex-direction: row;
}
.wn-post__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(255, 184, 48, .18), rgba(218, 120, 0, .08));
  color: var(--primary);
}
.wn-post--lead .wn-post__cover {
  flex: 0 0 44%;
  aspect-ratio: auto;
  min-height: 190px;
}
.wn-post__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wn-post__cover svg {
  width: 36px;
  height: 36px;
}
.wn-post__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
}
.wn-post--lead .wn-post__body {
  justify-content: center;
  padding: 26px;
}
.wn-post__category {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background-color: rgba(218, 120, 0, .12);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
}
.wn-post__title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}
.wn-post--lead .wn-post__title {
  font-size: 20px;
}
.light-theme .wn-post__title {
  color: var(--dark);
}
.wn-post__date {
  color: var(--text-gray);
  font-size: 13px;
}
@media only screen and (max-width: 575.98px) {
  .wn-post--lead {
    flex-direction: column;
  }
  .wn-post--lead .wn-post__cover {
    min-height: 160px;
  }
}

/* --- Promotions ---------------------------------------------------------- */

.wn-promos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px;
}
@media only screen and (max-width: 575.98px) {
  .wn-promos__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wn-promo {
  position: relative;
  display: flex;
  overflow: hidden;
}
/* The ticket's perforation between the value and the body. */
.wn-promo::before,
.wn-promo::after {
  position: absolute;
  inset-inline-start: 118px;
  width: 22px;
  height: 22px;
  content: '';
  border-radius: 50%;
  background-color: var(--dark);
  transform: translateX(-50%);
}
[dir="rtl"] .wn-promo::before,
[dir="rtl"] .wn-promo::after {
  transform: translateX(50%);
}
.wn-promo::before { top: -11px; }
.wn-promo::after { bottom: -11px; }
.light-theme .wn-promo::before,
.light-theme .wn-promo::after {
  background-color: var(--light);
}
.bg-2 .wn-promo::before,
.bg-2 .wn-promo::after {
  background-color: var(--semi-dark-2, #1a1c22);
}

.wn-promo__value {
  display: flex;
  flex: 0 0 118px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px 10px;
  border-inline-end: 2px dashed rgba(255, 255, 255, .12);
  background: linear-gradient(160deg, #ffb830, var(--primary));
  color: #fff;
  text-align: center;
}
.wn-promo__amount {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  word-break: break-word;
}
.wn-promo__off {
  font-size: 13px;
  font-weight: 600;
  opacity: .9;
}

.wn-promo__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 22px 22px 20px;
}
.wn-promo__title {
  margin-bottom: 10px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}
.light-theme .wn-promo__title {
  color: var(--dark);
}
.wn-promo__conditions {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}
.wn-promo__conditions li {
  position: relative;
  padding-inline-start: 16px;
  color: var(--text-gray);
  font-size: 13px;
  line-height: 1.9;
}
.wn-promo__conditions li::before {
  position: absolute;
  top: .8em;
  inset-inline-start: 0;
  width: 6px;
  height: 6px;
  content: '';
  border-radius: 50%;
  background-color: var(--primary);
}
.wn-promo__expiry {
  margin: 0 0 16px;
  color: var(--text-gray);
  font-size: 12.5px;
}
.wn-promo__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
.wn-promo__code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px dashed rgba(218, 120, 0, .7);
  border-radius: 8px;
  background-color: rgba(218, 120, 0, .08);
  color: #ffb830;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
}
.light-theme .wn-promo__code {
  color: #b86400;
}
.wn-promo__code svg {
  width: 15px;
  height: 15px;
}
.wn-promo__code.is-copied {
  border-color: #15cd72;
  color: #15cd72;
  letter-spacing: 0;
}
.wn-promo__use {
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.light-theme .wn-promo__use {
  color: var(--dark);
}
.wn-promo__use:hover {
  color: var(--primary);
}

.wn-promos__empty {
  max-width: 640px;
  margin: 0 auto;
  padding: 44px 30px;
  text-align: center;
}
.wn-promos__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border-radius: 50%;
  background-color: rgba(218, 120, 0, .12);
  color: var(--primary);
}
.wn-promos__empty-icon svg {
  width: 30px;
  height: 30px;
}
.wn-promos__empty p {
  margin-bottom: 22px;
  color: var(--text-gray);
  line-height: 1.9;
}

.wn-promos__howto {
  margin: 30px 0 0;
  color: var(--text-gray);
  font-size: 14px;
  text-align: center;
}
.wn-promos__howto a {
  color: var(--primary);
  font-weight: 600;
}

/* --- Phone numbers ------------------------------------------------------- */

.wn-phones__teams {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.wn-phone {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  transition: transform .2s ease, border-color .2s ease;
}
.wn-phone:hover {
  border-color: rgba(218, 120, 0, .45);
  transform: translateY(-3px);
}
.wn-phone__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: 14px;
  background-color: rgba(218, 120, 0, .12);
  color: var(--primary);
}
.wn-phone__icon img,
.wn-phone__icon svg {
  width: 26px;
  height: 26px;
}
.wn-phone__title {
  margin-bottom: 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}
.light-theme .wn-phone__title {
  color: var(--dark);
}
.wn-phone__text {
  margin-bottom: 18px;
  color: var(--text-gray);
  font-size: 14px;
  line-height: 1.8;
}
.wn-phone__number {
  margin-top: auto;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .02em;
}
.light-theme .wn-phone__number {
  color: var(--dark);
}
.wn-phone__number:hover {
  color: var(--primary);
}
[dir="rtl"] .wn-phone__number,
[dir="rtl"] .wn-phone__email,
[dir="rtl"] .wn-office__phone {
  text-align: right;
}
.wn-phone__email {
  margin-top: 6px;
  color: var(--primary);
  font-size: 14px;
}
.wn-phone__hours {
  margin-top: 10px;
  color: var(--text-gray);
  font-size: 13px;
}

.wn-phones__subhead {
  margin: 50px 0 20px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}
.light-theme .wn-phones__subhead {
  color: var(--dark);
}
.wn-phones__offices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.wn-office {
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
}
.wn-office__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.wn-office__pin {
  display: inline-flex;
  color: var(--primary);
}
.wn-office__pin svg {
  width: 18px;
  height: 18px;
}
.wn-office__title {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.light-theme .wn-office__title {
  color: var(--dark);
}
.wn-office__address {
  margin-bottom: 12px;
  color: var(--text-gray);
  font-size: 14px;
  line-height: 1.8;
}
.wn-office__phone {
  margin-top: auto;
  color: var(--primary);
  font-size: 17px;
  font-weight: 700;
}

.wn-phones__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 30px;
  margin-top: 36px;
  color: var(--text-gray);
  font-size: 14px;
}
.wn-phones__meta strong {
  color: #fff;
  font-weight: 600;
}
.light-theme .wn-phones__meta strong {
  color: var(--dark);
}
.wn-phones__meta a {
  color: var(--primary);
}

/* --- Promos: the offers from Website → Active discounts ------------------
   A picture (or the header tone it was given) with the headline figure on
   it, then the words, the button and the code. The first offer spans the
   row and sits beside its picture. */

.wn-offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 50px;
}

.wn-offer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--semi-dark);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 16px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.light-theme .wn-offer {
  background-color: #fff;
  border-color: var(--border);
}
.wn-offer:hover {
  border-color: rgba(218, 120, 0, .45);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .25);
  transform: translateY(-4px);
}
.light-theme .wn-offer:hover {
  box-shadow: 0 24px 50px rgba(0, 16, 51, .08);
}

.wn-offer__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  background-size: cover;
  background-position: center;
}
.wn-offer--yellow .wn-offer__media { background-color: #ffe164; }
.wn-offer--sky .wn-offer__media { background-color: #8fe0ee; }
.wn-offer--mint .wn-offer__media { background-color: #b8f0d0; }
.wn-offer--lavender .wn-offer__media { background-color: #d9ccff; }
.wn-offer--coral .wn-offer__media { background-color: #ffb4a8; }
.wn-offer--sand .wn-offer__media { background-color: #ffd36e; }

.wn-offer__art {
  width: 120px;
  height: 120px;
}

.wn-offer__badge {
  position: absolute;
  inset-inline-start: 18px;
  bottom: 18px;
  padding: 8px 16px;
  border-radius: 999px;
  background-color: #16181f;
  color: #ffb830;
  font-size: 18px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(15, 16, 20, .25);
}

.wn-offer__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 24px 24px 22px;
}
.wn-offer__title {
  margin-bottom: 10px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
}
.light-theme .wn-offer__title {
  color: var(--dark);
}
.wn-offer__text {
  margin-bottom: 12px;
  color: var(--text-gray);
  font-size: 14px;
  line-height: 1.9;
}
.wn-offer__until {
  margin-bottom: 18px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
}
.wn-offer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

@media only screen and (min-width: 992px) {
  .wn-offer--lead {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .wn-offer--lead .wn-offer__media {
    flex: 0 0 46%;
    min-height: 300px;
  }
  .wn-offer--lead .wn-offer__art {
    width: 170px;
    height: 170px;
  }
  .wn-offer--lead .wn-offer__body {
    justify-content: center;
    padding: 40px;
  }
  .wn-offer--lead .wn-offer__title {
    font-size: 28px;
  }
  .wn-offer--lead .wn-offer__badge {
    font-size: 24px;
    padding: 10px 20px;
  }
}

.wn-promos__subhead {
  margin: 0 0 22px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}
.light-theme .wn-promos__subhead {
  color: var(--dark);
}

/* ===========================================================================
   Design & Development: the project request form (site.blocks.project-quote)
   Big selectable cards for the platform, pills for single choices, chips
   for features, a drop zone for the brief — and a progress bar that fills
   as the steps go by. Everything is a real input underneath.
   =========================================================================== */

.wn-quote {
  --q-surface: var(--semi-dark);
  --q-surface-2: rgba(255, 255, 255, .035);
  --q-line: rgba(255, 255, 255, .08);
  --q-heading: #fff;
  --q-radius: 16px;
  scroll-margin-top: 110px;
}
.light-theme .wn-quote {
  --q-surface: #fff;
  --q-surface-2: var(--light);
  --q-line: var(--border);
  --q-heading: var(--dark);
}

.wn-quote__intro {
  max-width: 720px;
  margin: -10px auto 40px;
  color: var(--text-gray);
  font-size: 16px;
  line-height: 1.9;
  text-align: center;
}

.wn-quote__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 30px;
  align-items: start;
}
@media only screen and (max-width: 1199.98px) {
  .wn-quote__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wn-quote__form {
  position: relative;
  padding: 34px;
  background-color: var(--q-surface);
  border: 1px solid var(--q-line);
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
  scroll-margin-top: 120px;
}
.light-theme .wn-quote__form {
  box-shadow: 0 30px 60px rgba(0, 16, 51, .08);
}
@media only screen and (max-width: 575.98px) {
  .wn-quote__form {
    padding: 22px 16px;
  }
}

/* Progress */
.wn-quote__progress {
  position: relative;
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}
.wn-quote__form.is-wizard .wn-quote__progress {
  display: grid;
}
.wn-quote__progress::before,
.wn-quote__progress::after {
  position: absolute;
  top: 19px;
  inset-inline-start: 12.5%;
  height: 3px;
  content: '';
  border-radius: 3px;
}
.wn-quote__progress::before {
  width: 75%;
  background-color: var(--q-line);
}
.wn-quote__progress::after {
  width: calc(75% * var(--quote-progress-fraction, 0));
  background: linear-gradient(90deg, #ffb830, var(--primary));
  transition: width .4s ease;
}
[dir="rtl"] .wn-quote__progress::after {
  background: linear-gradient(270deg, #ffb830, var(--primary));
}
.wn-quote__progress-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.wn-quote__progress-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--q-line);
  border-radius: 50%;
  background-color: var(--q-surface);
  color: var(--text-gray);
  font-weight: 700;
  transition: all .3s ease;
}
.wn-quote__progress-label {
  color: var(--text-gray);
  font-size: 13px;
  font-weight: 600;
}
.wn-quote__progress-step.is-active .wn-quote__progress-num {
  border-color: transparent;
  background: linear-gradient(135deg, #ffb830, var(--primary));
  color: #fff;
  box-shadow: 0 0 0 6px rgba(218, 120, 0, .18);
}
.wn-quote__progress-step.is-active .wn-quote__progress-label {
  color: var(--q-heading);
}
.wn-quote__progress-step.is-done .wn-quote__progress-num {
  border-color: var(--primary);
  color: var(--primary);
}
@media only screen and (max-width: 575.98px) {
  .wn-quote__progress-label {
    font-size: 11px;
  }
}

/* Steps */
.wn-quote__step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.wn-quote__step + .wn-quote__step {
  margin-top: 40px;
  padding-top: 34px;
  border-top: 1px dashed var(--q-line);
}
.wn-quote__form.is-wizard .wn-quote__step {
  display: none;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.wn-quote__form.is-wizard .wn-quote__step.is-active {
  display: block;
  animation: wn-quote-in .35s ease;
}
@keyframes wn-quote-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.wn-quote__q {
  float: none;
  width: auto;
  margin-bottom: 6px;
  color: var(--q-heading);
  font-size: 22px;
  font-weight: 700;
}
.wn-quote__hint {
  margin-bottom: 18px;
  color: var(--text-gray);
  font-size: 14px;
}
.wn-quote__field {
  position: relative;
  margin-top: 22px;
}
.wn-quote__label {
  display: block;
  margin-bottom: 10px;
  color: var(--q-heading);
  font-size: 15px;
  font-weight: 600;
}
.wn-req {
  color: var(--primary);
}
.wn-quote__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}
@media only screen and (max-width: 767.98px) {
  .wn-quote__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wn-input {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--q-line);
  border-radius: 12px;
  background-color: var(--q-surface-2);
  color: var(--q-heading);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.8;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.wn-input::placeholder {
  color: var(--text-gray);
  opacity: .8;
}
.wn-input:focus {
  border-color: rgba(218, 120, 0, .7);
  box-shadow: 0 0 0 4px rgba(218, 120, 0, .14);
  outline: none;
}
textarea.wn-input {
  resize: vertical;
}
.wn-quote__count {
  display: block;
  margin-top: 6px;
  color: var(--text-gray);
  font-size: 12px;
  text-align: end;
}

/* Platform cards */
.wn-quote__platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media only screen and (max-width: 767.98px) {
  .wn-quote__platforms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.wn-choice {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.wn-choice input,
.wn-pill input,
.wn-chip input,
.wn-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.wn-choice__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  height: 100%;
  padding: 20px 18px 18px;
  border: 1.5px solid var(--q-line);
  border-radius: var(--q-radius);
  background-color: var(--q-surface-2);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wn-choice:hover .wn-choice__card {
  border-color: rgba(218, 120, 0, .45);
  transform: translateY(-2px);
}
.wn-choice__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  border-radius: 12px;
  background-color: rgba(218, 120, 0, .12);
  color: var(--primary);
  transition: all .2s ease;
}
.wn-choice__icon svg {
  width: 26px;
  height: 26px;
}
.wn-choice__title {
  color: var(--q-heading);
  font-size: 15px;
  font-weight: 700;
}
.wn-choice__note {
  color: var(--text-gray);
  font-size: 12.5px;
}
.wn-choice__tick {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--q-line);
  border-radius: 50%;
  color: transparent;
  transition: all .2s ease;
}
.wn-choice__tick svg {
  width: 12px;
  height: 12px;
}
.wn-choice input:checked + .wn-choice__card {
  border-color: var(--primary);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(218, 120, 0, .16), transparent 60%),
    var(--q-surface-2);
  box-shadow: 0 16px 34px rgba(218, 120, 0, .14);
}
.wn-choice input:checked + .wn-choice__card .wn-choice__icon {
  background: linear-gradient(135deg, #ffb830, var(--primary));
  color: #fff;
}
.wn-choice input:checked + .wn-choice__card .wn-choice__tick {
  border-color: transparent;
  background-color: var(--primary);
  color: #fff;
}
.wn-choice input:focus-visible + .wn-choice__card,
.wn-pill input:focus-visible + span,
.wn-chip input:focus-visible + span {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Pills (one choice) and chips (many) */
.wn-pills,
.wn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.wn-pills--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.wn-pill,
.wn-chip {
  position: relative;
  margin: 0;
  cursor: pointer;
}
.wn-pill span,
.wn-chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 18px;
  border: 1.5px solid var(--q-line);
  border-radius: 12px;
  background-color: var(--q-surface-2);
  color: var(--q-heading);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition: all .2s ease;
}
.wn-chip span {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13.5px;
}
.wn-chip span::before {
  width: 16px;
  height: 16px;
  content: '+';
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--q-line);
  color: var(--text-gray);
  font-size: 13px;
  line-height: 1;
  transition: all .2s ease;
}
.wn-pill:hover span,
.wn-chip:hover span {
  border-color: rgba(218, 120, 0, .45);
}
.wn-pill input:checked + span {
  border-color: var(--primary);
  background-color: rgba(218, 120, 0, .12);
  color: var(--q-heading);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.wn-chip input:checked + span {
  border-color: var(--primary);
  background-color: rgba(218, 120, 0, .12);
}
.wn-chip input:checked + span::before {
  content: '✓';
  background-color: var(--primary);
  color: #fff;
}

/* Drop zone */
.wn-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 28px 20px;
  border: 2px dashed var(--q-line);
  border-radius: var(--q-radius);
  background-color: var(--q-surface-2);
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.wn-drop input {
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.wn-drop:hover,
.wn-drop.is-over {
  border-color: var(--primary);
  background-color: rgba(218, 120, 0, .06);
}
.wn-drop.has-file {
  border-style: solid;
  border-color: #15cd72;
}
.wn-drop__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgba(218, 120, 0, .12);
  color: var(--primary);
}
.wn-drop.has-file .wn-drop__icon {
  background-color: rgba(21, 205, 114, .14);
  color: #15cd72;
}
.wn-drop__icon svg {
  width: 24px;
  height: 24px;
}
.wn-drop__text {
  color: var(--q-heading);
  font-weight: 600;
  word-break: break-all;
}
.wn-drop__hint {
  color: var(--text-gray);
  font-size: 12.5px;
}

/* Navigation and errors */
.wn-quote__nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 34px;
}
.wn-quote__nav .btn-outline-dark {
  background: transparent;
  border-color: var(--q-line);
  color: var(--q-heading);
}
.wn-quote__nav .btn-outline-dark:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.wn-quote__form .cap-captcha-field {
  margin-top: 24px;
}
.wn-quote__form .contact-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.wn-quote__errors {
  margin-bottom: 24px;
  padding: 14px 18px;
  border: 1px solid rgba(236, 98, 95, .4);
  border-radius: 12px;
  background-color: rgba(236, 98, 95, .08);
  color: var(--red);
  font-size: 14px;
  line-height: 1.9;
}
.is-invalid > .wn-input,
.is-invalid .wn-choice__card {
  border-color: rgba(236, 98, 95, .7);
}
.wn-quote__error {
  display: block;
  margin-top: 8px;
  color: var(--red);
  font-size: 13px;
}
[data-group-required] .wn-quote__error {
  grid-column: 1 / -1;
}

/* The rail beside the form */
.wn-quote__aside {
  position: sticky;
  top: 110px;
  padding: 30px 28px;
  border: 1px solid rgba(218, 120, 0, .35);
  border-radius: 20px;
  background:
    radial-gradient(130% 80% at 100% 0%, rgba(218, 120, 0, .18), transparent 60%),
    var(--q-surface);
}
@media only screen and (max-width: 1199.98px) {
  .wn-quote__aside {
    position: static;
  }
}
.wn-quote__aside-title {
  margin-bottom: 22px;
  color: var(--q-heading);
  font-size: 18px;
  font-weight: 700;
}
.wn-quote__timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wn-quote__timeline li {
  position: relative;
  display: flex;
  gap: 14px;
  padding-bottom: 22px;
}
.wn-quote__timeline li:not(:last-child)::before {
  position: absolute;
  top: 34px;
  bottom: 4px;
  inset-inline-start: 15px;
  width: 2px;
  content: '';
  background: linear-gradient(var(--primary), transparent);
  opacity: .5;
}
.wn-quote__timeline-num {
  display: flex;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffb830, var(--primary));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.wn-quote__timeline strong {
  display: block;
  margin: 4px 0 4px;
  color: var(--q-heading);
  font-size: 15px;
}
.wn-quote__timeline p {
  margin: 0;
  color: var(--text-gray);
  font-size: 13.5px;
  line-height: 1.85;
}
.wn-quote__private {
  display: flex;
  gap: 10px;
  margin: 6px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--q-line);
  color: var(--text-gray);
  font-size: 13px;
  line-height: 1.85;
}
.wn-quote__private svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--primary);
}

/* Sent */
.wn-quote__done {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 34px;
  border: 1px solid rgba(21, 205, 114, .35);
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(21, 205, 114, .14), transparent 60%),
    var(--q-surface);
  text-align: center;
}
.wn-quote__done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  margin-bottom: 20px;
  border-radius: 50%;
  background-color: #15cd72;
  color: #fff;
  box-shadow: 0 0 0 12px rgba(21, 205, 114, .14);
}
.wn-quote__done-icon svg {
  width: 36px;
  height: 36px;
}
.wn-quote__done-title {
  margin-bottom: 12px;
  color: var(--q-heading);
  font-size: 24px;
  font-weight: 700;
}
.wn-quote__done-text {
  margin-bottom: 18px;
  color: var(--text-gray);
  line-height: 1.95;
}
.wn-quote__done-ref {
  display: inline-block;
  margin-bottom: 24px;
  padding: 8px 18px;
  border: 1px dashed var(--primary);
  border-radius: 10px;
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
}
.wn-quote__done .btn-outline-dark {
  display: table;
  margin: 0 auto;
  background: transparent;
  border-color: var(--q-line);
  color: var(--q-heading);
}