/* Contacts pills (same design as services/blog). Own wrapper — not .article-wrap__sidebar. */
.op-cases-contacts {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 22px 18px 20px;
  border-radius: 18px;
  background: #f4f6fa;
  box-sizing: border-box;
}

.op-cases-contacts__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}

.op-cases-contacts__title {
  margin: 0;
  color: #131313;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
}

.op-cases-contacts__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #2380eb;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(9, 43, 150, 0.18);
  transition: transform 0.2s ease, background 0.2s ease;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  text-indent: 0;
}

.op-cases-contacts__toggle:hover,
.op-cases-contacts__toggle:focus-visible {
  background: #0a3aad;
  outline: none;
}

.op-cases-contacts__toggle-icon {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
}

.op-cases-contacts__toggle-icon::before,
.op-cases-contacts__toggle-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.op-cases-contacts__toggle-icon::before {
  width: 14px;
  height: 2px;
}

.op-cases-contacts__toggle-icon::after {
  width: 2px;
  height: 14px;
}

.op-cases-contacts.is-open .op-cases-contacts__toggle-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(0);
}

.op-cases-contacts .op-service-contact-btns--sidebar {
  margin: 0;
  max-width: 100%;
  width: 100%;
}

.op-cases-contacts .op-service-contact-btns__grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100%;
  max-width: 100%;
}

.op-cases-contacts__extra {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

.op-cases-contacts__extra[hidden] {
  display: none !important;
}

.op-cases-contacts a.op-service-contact-btns__btn,
.op-cases-contacts .op-service-contact-btns__btn {
  position: relative;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  overflow: hidden !important;
  z-index: 0;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 10px 16px 10px 12px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: linear-gradient(145deg, #2a8ef0 0%, #2380eb 45%, #092b96 100%) !important;
  color: #fff !important;
  font-size: inherit !important;
  line-height: normal !important;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgba(9, 43, 150, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.op-cases-contacts a.op-service-contact-btns__btn:hover,
.op-cases-contacts a.op-service-contact-btns__btn:focus-visible,
.op-cases-contacts .op-service-contact-btns__btn:hover,
.op-cases-contacts .op-service-contact-btns__btn:focus-visible {
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(9, 43, 150, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  background: linear-gradient(145deg, #3a98f5 0%, #2a8ef0 40%, #0a3aad 100%) !important;
}

.op-cases-contacts .op-service-contact-btns__icon {
  position: relative !important;
  display: block !important;
  z-index: 1;
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  overflow: hidden;
}

.op-cases-contacts .op-service-contact-btns__icon::after {
  content: "" !important;
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.op-cases-contacts .op-service-contact-btns__btn--office .op-service-contact-btns__icon::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.5 4.8c.5-1 1.6-1.3 2.5-.8l1.5.8c.8.4 1.1 1.4.7 2.2l-.7 1.4c-.2.5-.1 1 .2 1.4 1 1.3 2.3 2.5 3.7 3.4.4.3 1 .3 1.4.1l1.5-.7c.8-.4 1.8-.1 2.2.7l.8 1.5c.5.9.2 2-.8 2.5-1.2.6-2.7.8-4.1.3-3.2-1.2-6-3.9-7.1-.6-1.4-.5-3 .2-4.3Z' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.op-cases-contacts .op-service-contact-btns__btn--email .op-service-contact-btns__icon::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 7.5A2.5 2.5 0 0 1 6.5 5h11A2.5 2.5 0 0 1 20 7.5v9A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5v-9Z' stroke='%23fff' stroke-width='1.8'/%3E%3Cpath d='m5.5 7.5 6.5 5 6.5-5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.op-cases-contacts .op-service-contact-btns__btn--viber .op-service-contact-btns__icon::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11.4 2.1c-4.8.1-8.7 3.9-8.9 8.7-.1 2.3.7 4.4 2.1 6l-.7 3.3 3.4-.7c1.5 1 3.3 1.5 5.1 1.5h.2c4.9-.1 8.8-4.1 8.8-9 0-4.8-4-8.7-10-8.8Zm4.9 12.3c-.2.5-1.1.9-1.5 1-.4.1-.8.3-2.6-.6-2.2-1.1-3.6-3.5-3.7-3.7-.1-.2-.9-1.2-.9-2.3 0-1.1.6-1.6.8-1.8.2-.2.4-.3.6-.3h.4c.1 0 .3 0 .4.3.2.4.5 1.3.6 1.4.1.1.1.3 0 .4l-.3.4c-.1.1-.2.3-.1.5.1.2.5.8 1.1 1.3.7.7 1.3 1 1.5 1.1.2.1.3.1.5 0l.6-.7c.1-.2.3-.2.5-.1.2.1 1.2.6 1.4.7.2.1.3.2.4.3.1.1.1.6-.1 1.1Z'/%3E%3C/svg%3E") !important;
}

.op-cases-contacts .op-service-contact-btns__btn--telegram .op-service-contact-btns__icon::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M21.5 4.3 3.9 11.1c-1.2.5-1.2 1.1-.2 1.4l4.5 1.4 1.7 5.3c.2.6.1.8.7.8.5 0 .7-.2 1-.5l2.3-2.2 4.8 3.5c.9.5 1.5.2 1.7-.8L22.9 5.5c.3-1.2-.5-1.7-1.4-1.2ZM9.6 14.3l8.8-5.5c.4-.3.8-.1.5.2l-7.1 6.4-.3 3.1-1.9-4.2Z'/%3E%3C/svg%3E") !important;
}

.op-cases-contacts .op-service-contact-btns__btn--whatsapp .op-service-contact-btns__icon::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12.04 2c-5.46 0-9.91 4.43-9.91 9.88 0 1.74.46 3.44 1.33 4.94L2 22l5.35-1.4a9.93 9.93 0 0 0 4.69 1.19h.01c5.46 0 9.91-4.43 9.91-9.88C21.96 6.43 17.5 2 12.04 2Zm0 18.07h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.17.83.85-3.09-.2-.32a8.14 8.14 0 0 1-1.25-4.36c0-4.5 3.68-8.16 8.2-8.16 4.52 0 8.2 3.66 8.2 8.16 0 4.5-3.68 8.16-8.14 8.16Zm4.5-6.12c-.25-.12-1.46-.72-1.69-.8-.23-.09-.39-.12-.56.12-.17.25-.64.8-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-2-1.23-.74-.66-1.24-1.47-1.38-1.72-.15-.25-.02-.39.11-.51.11-.11.25-.29.37-.43.12-.14.17-.25.25-.41.09-.17.04-.31-.02-.43-.06-.12-.56-1.35-.77-1.85-.2-.48-.41-.42-.56-.42h-.48c-.17 0-.43.06-.66.31-.23.25-.87.85-.87 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.24 3.74 1.49.64 1.91.65 2.6.55.42-.06 1.46-.6 1.67-1.17.21-.58.21-1.07.14-1.17-.06-.1-.23-.17-.48-.29Z'/%3E%3C/svg%3E") !important;
}

.op-cases-contacts .op-service-contact-btns__meta {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.op-cases-contacts .op-service-contact-btns__label {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2 !important;
  text-transform: uppercase;
}

.op-cases-contacts .op-service-contact-btns__value {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.25 !important;
  word-break: break-word;
}

/* Blog single: sticky sidebar (related + contacts) — desktop only */
.op-blog-sidebar-col {
  position: sticky;
  top: 200px;
  width: 100%;
  max-width: 302px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 0 302px;
  align-self: flex-start;
}
.op-blog-sidebar-col .article-wrap__sidebar {
  position: static;
  top: auto;
  max-width: 100%;
  width: 100%;
}

/* Mobile duplicate: under article, before rating */
.op-blog-contacts-mobile {
  display: none;
  width: 100%;
  max-width: 980px;
  margin: 28px auto 0;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  /* No room in the column layout — hide entire sticky sidebar */
  .op-blog-sidebar-col {
    display: none !important;
  }
  .op-blog-contacts-mobile {
    display: block;
    margin: 32px 0 0;
    max-width: 100%;
  }
  .op-blog-contacts-mobile .op-cases-contacts {
    margin: 0;
  }
  .op-blog-rating {
    margin-top: 28px;
  }
}