/* DigiSpace public-site overrides on top of the theme (style.css). Loaded after style.css. */

/* Footer subscribe feedback */
.subscribe-form-feedback { margin: 12px 0 0; font-size: 14px; line-height: 1.4; }
.subscribe-form-feedback_error { color: #e06363; }
.subscribe-form-feedback_success { color: #b6c062; }

/* Header (desktop, static navbar) */
.rd-navbar-static .rd-navbar-static--hidden { display: none !important; } /* theme ships the mobile contacts toggle without this rule */
.rd-navbar-static.rd-navbar-classic .rd-navbar-aside > .site-header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.rd-navbar-static.rd-navbar-classic .rd-navbar-aside { flex-wrap: nowrap; gap: 16px; }
.rd-navbar-static .rd-navbar-content-outer { min-width: 0; }
.rd-navbar-static .site-language-control--mobile { display: none; }
.rd-navbar-static.rd-navbar-classic .rd-navbar-element .site-language-control { margin: 0 16px 5px 0; }
.rd-navbar-nav > li > a.rd-navbar-nav__label { cursor: pointer; } /* bootstrap greys out href-less anchors without a class */

/* Language switcher: <details> dropdown of links, current language shown on the toggle */
.site-language-control__menu { position: relative; }
.site-language-control__menu > summary { list-style: none; }
.site-language-control__menu > summary::-webkit-details-marker { display: none; }
.site-language-control__toggle { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid #eaeced; border-radius: 6px; background: #fff; color: #151515; font: 600 13px/1 Arial, sans-serif; white-space: nowrap; cursor: pointer; user-select: none; }
.site-language-control__toggle:hover { border-color: #00a9ff; }
.site-language-control__toggle:focus-visible { outline: 2px solid #00a9ff; outline-offset: 2px; }
.site-language-control__menu[open] > .site-language-control__toggle { border-color: #00a9ff; }
.site-language-control__menu[open] .site-language-control__caret { transform: rotate(180deg); }
.site-language-control__caret { transition: transform .15s ease; }
.site-language-control__code { display: none; }
.site-language-control__list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1003; min-width: 160px; margin: 0; padding: 6px 0; list-style: none; background: #fff; border: 1px solid #eaeced; border-radius: 6px; box-shadow: 0 8px 24px rgba(51, 51, 51, .15); }
.site-language-control__list a { display: block; padding: 8px 14px; font: 500 14px/1.3 Arial, sans-serif; color: #151515; text-decoration: none; white-space: nowrap; }
.site-language-control__list a:hover, .site-language-control__list a:focus-visible { background: #f2f3f8; color: #00a9ff; outline: none; }
.site-language-control__list a[aria-current="true"] { font-weight: 700; color: #00a9ff; }
.site-language-control__list a[aria-current="true"]::after { content: " \2713"; }

/* Header (mobile, fixed navbar): switcher in the fixed top bar between the logo and the contacts toggle */
button.rd-navbar-content__toggle { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; } /* it is a <button> now; drop the UA chrome */
.rd-navbar-fixed .site-language-control--desktop { display: none; }
.rd-navbar-fixed .rd-navbar-brand .brand img { width: 130px !important; max-width: 130px !important; height: auto; }
.rd-navbar-fixed .site-language-control { position: fixed; top: 10px; right: 60px; z-index: 1002; }
.rd-navbar-fixed .site-language-control__toggle { padding: 0 8px; gap: 5px; }
.rd-navbar-fixed .site-language-control__icon { display: none; } /* the full language name is the label; the globe does not fit next to the logo */
@media (max-width: 360px) {
  .rd-navbar-fixed .rd-navbar-brand .brand img { width: 100px !important; max-width: 100px !important; }
  .rd-navbar-fixed .site-language-control__toggle { padding: 0 6px; font-size: 12px; }
}

/* Our Projects / reviews carousel: equal-height cards regardless of text length */
.quote-creative-carousel .owl-stage { display: flex; }
.quote-creative-carousel .owl-item { display: flex; }
.quote-creative-carousel .owl-item .item { display: flex; flex: 1 1 auto; min-width: 0; }
.quote-creative-carousel .owl-item .quote-creative { flex: 1 1 auto; }

/* Our Projects: clamp card text to 6 lines with a "read more" toggle */
.quote-creative__clamp.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.quote-creative__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #00a9ff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.quote-creative__toggle:hover { text-decoration: underline; }
.quote-creative__toggle svg { transition: transform .2s ease; }
.quote-creative__toggle.is-open svg { transform: rotate(180deg); }

/* Contact form: reCAPTCHA widget is fixed 304px — keep it inside its column, centered */
.g-recaptcha { max-width: 100%; display: flex; justify-content: center; }
@media (max-width: 360px) {
  .g-recaptcha { transform: scale(.92); transform-origin: center top; }
}

/* Service pages: code samples and process diagrams inside article body */
.service-article__body {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
.service-article__body > p:first-child {
  font-size: 18px;
  line-height: 1.65;
  color: #333333;
}
.service-article__body > .lead {
  margin: 24px 0 32px;
  padding: 18px 22px;
  border-left: 4px solid #00a9ff;
  background: rgba(0, 169, 255, .06);
  color: #333333;
  font-size: 17px;
  line-height: 1.6;
}
.service-article__body > .lead p { margin: 0; }
.service-article__body > .lead strong { color: #00a9ff; }
.service-article__body h3 {
  margin-top: 38px;
  margin-bottom: 16px;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: 0;
  font-weight: 600;
  color: #151515;
}
.service-article__body ul {
  margin-bottom: 24px;
  padding-left: 24px;
}
.service-article__body li + li { margin-top: 8px; }
.service-diagram {
  margin: 24px 0 30px;
  padding: 16px;
  border: 1px solid #eaeced;
  border-radius: 10px;
  background: #f2f3f8;
  text-align: center;
  overflow-x: auto;
}
.service-diagram img {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto;
}
.service-article__cta {
  margin-top: 34px;
  text-align: center;
}
.service-related {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #eaeced;
  text-align: left;
}
.service-related h3 {
  margin: 0 0 12px;
  font-size: 20px;
}
.service-related ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-classic__image {
  height: auto;
  aspect-ratio: auto;
}
.service-category__title {
  margin-bottom: 14px;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: 0;
}
@media (max-width: 767px) {
  .service-article__body > p:first-child { font-size: 17px; }
  .service-article__body h3 {
    margin-top: 30px;
    font-size: 21px;
  }
  .service-diagram { margin-right: -8px; margin-left: -8px; padding: 10px; }
  .service-category__title { font-size: 22px; }
}
/* Bare <pre> inside service articles: the rich editor strips the class on save */
.post-single pre.code-block,
.service-article__body pre {
  background: #151515;
  color: #eaeced;
  padding: 18px 20px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  overflow-x: auto;
  text-align: left;
  margin: 18px 0 26px;
}
.post-single pre.code-block code,
.service-article__body pre code {
  color: inherit;
  font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre;
}
.post-single pre.code-diagram {
  background: #f2f3f8;
  border: 1px solid #eaeced;
  color: #333333;
  padding: 18px 20px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  overflow-x: auto;
  text-align: left;
  font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre;
  margin: 18px 0 26px;
}
/* Caption after a code block: .code-caption class or the paragraph right after pre */
.post-single .code-caption,
.service-article__body pre + p {
  font-size: 13px;
  color: #9b9b9b;
  margin: -16px 0 26px;
}

/* Service price matrix on /pricing — follows theme palette (#00a9ff / #00caad / #9b9b9b) */
* + .price-matrix { margin-top: 40px; }
.price-matrix {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.price-matrix__group {
  background: #ffffff;
  border-radius: 4px;
  padding: 26px 26px 10px;
  box-shadow: 0 0 27px 0 rgba(51, 51, 51, .09);
}
.price-matrix__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f2f3f8;
}
.price-matrix__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background-image: linear-gradient(135deg, #00a9ff 0%, #00caad 100%);
  color: #ffffff;
  font-size: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.price-matrix__category {
  flex: 1 1 auto;
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
}
.price-matrix__category a { color: inherit; }
.price-matrix__category a:hover { color: #00a9ff; }
.price-matrix__count {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #333333;
  background: #f2f3f8;
  border-radius: 999px;
  padding: 4px 12px;
}
.price-matrix__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 10px;
  margin: 0 -10px;
  border-radius: 4px;
  color: inherit;
  border-bottom: 1px solid #f2f3f8;
  transition: background .18s ease;
}
.price-matrix__row:last-child { border-bottom: 0; }
.price-matrix__row:hover { background: #f2f3f8; }
.price-matrix__row:hover .price-matrix__service { color: #00a9ff; }
.price-matrix__row:hover .price-matrix__arrow {
  transform: translateX(3px);
  color: #00a9ff;
}
.price-matrix__info { flex: 1 1 auto; min-width: 0; }
.price-matrix__service {
  display: block;
  font-weight: 600;
  font-size: 16px;
  color: #151515;
  transition: color .18s ease;
}
.price-matrix__details {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #9b9b9b;
}
.price-matrix__timeline {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #00caad;
  background: rgba(0, 202, 173, .08);
  border-radius: 999px;
  padding: 4px 12px;
}
.price-matrix__timeline .linearicons-clock { font-size: 12px; margin-right: 2px; }
.price-matrix__price {
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: right;
  min-width: 92px;
  font-family: "Space Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
}
.price-matrix__from { font-size: 12.5px; color: #9b9b9b; margin-right: 3px; font-family: inherit; }
.price-matrix__value {
  font-size: 20px;
  font-weight: 700;
  color: #00a9ff;
}
.price-matrix__arrow {
  flex: 0 0 auto;
  font-size: 14px;
  color: #9b9b9b;
  transition: transform .18s ease, color .18s ease;
}
@media (max-width: 575px) {
  .price-matrix__row { flex-wrap: wrap; row-gap: 8px; }
  .price-matrix__info { flex-basis: 100%; }
  .price-matrix__arrow { display: none; }
}

/* The thank-you sentence is longer than the theme's fixed 40px one-line bar in every locale;
   let it grow to a second line instead of overflowing. */
.contact-success-sent {
  display: block;
  height: auto;
  min-height: 40px;
  padding: 10px 14px;
  line-height: 1.5;
}

/* Author display rules beat the UA [hidden] style, so re-hide the AJAX status bars explicitly. */
.contact-success-sent[hidden],
.contact-form-throttle[hidden],
.recaptchaStyle[hidden] {
  display: none;
}

/* Rate-limit notice on the contact form: mirrors .contact-success-sent, in the theme's
   form-validation red rather than the brand gradient, and wraps because the message is a sentence. */
.contact-form-throttle {
  margin: 0;
  padding: 10px 14px;
  background: #e06363;
  color: #fff;
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

/* Contact form phone field with the intl-tel-input country selector. The theme's floating label is
   absolutely positioned over the input, which now begins after the country button, so the label is
   shifted by the offset the library itself applied (set as a custom property in contact-phone.js). */
.contact-form-input--intl {
  /* The country dropdown is absolutely positioned at z-index 2, and .form-wrap around it is
     position:relative with z-index:auto, so it creates no stacking context and the dropdown
     competes directly with the other fields' .form-label (z-index 9) - which won, leaving the
     textarea and e-mail labels showing through the open list. Raising the wrapper above 9 puts
     the whole field, dropdown included, in front of its siblings. */
  z-index: 10;
}
/* Only the error text is rendered inside this input now - the field's own label sits above it -
   and it still has to start clear of the country button. */
.contact-form-input--intl .form-label {
  padding-left: var(--contact-intl-label-offset, 71px);
}
.contact-form-input--intl .iti {
  width: 100%;
}
/* The flag and dial code are an adornment, not something the visitor types into. A hairline rule
   marks where the fixed prefix ends and the editable number begins - without it "+380" reads as
   part of the value.

   iti keeps a fixed ~3px between the country button and the input text and re-derives the input's
   padding from the button width, so widening the button cannot open that gap. The rule is
   therefore drawn inside the button, inset from its trailing edge, and the dial code is padded to
   match - that is what puts comparable space on both sides of it. */
/* Whitespace is the separation between the fixed prefix and the number the visitor types - no
   rule needed, and it is what design-system guidance recommends for an input adornment. iti keeps
   a fixed ~3px of its own after the country button, so this padding is what makes the gap read. */
.contact-form-input--intl .iti__selected-dial-code {
  padding-right: 14px;
}

/* Set by contact-phone.js only once the country selector is running: the flag and dial code make
   the label redundant, but it stays in the DOM so the input keeps its accessible name. */
.form-label-outside--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}