/* Contacts page template. */
.header-holder > .contacts-banner > p:not(.contacts-status) {max-width: 560px;}
.header-holder > .contacts-banner .contacts-status {position: absolute; right: 20px; bottom: 76px; display: inline-flex; align-items: center; gap: 10px; max-width: none; margin: 0; padding: 10px 16px 10px 14px; border: 1px solid #ece7e1; border-radius: 30px; background: rgba(255, 255, 255, .88); box-shadow: 0 6px 20px rgba(40, 30, 20, .06); font: 600 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: #16181d; white-space: nowrap;}
.header-holder > .contacts-banner .contacts-status[hidden] {display: none;}
.contacts-status small {margin-left: 4px; font-size: 13px; font-weight: 400; color: #5d6068;}
.contacts-status__dot {position: relative; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #23a55a;}
.contacts-status__dot::after {content: ""; position: absolute; inset: -5px; border-radius: 50%; background: inherit; animation: contacts-ping 2s ease-out infinite;}
.contacts-status.is-off .contacts-status__dot {background: #b9b4ad;}
.contacts-status.is-off .contacts-status__dot::after {display: none;}
@keyframes contacts-ping {from {transform: scale(.6); opacity: .45;} to {transform: scale(1.6); opacity: 0;}}

.contacts-page {padding-top: 32px; padding-bottom: 96px;}
.contacts-page a {border: 0; text-decoration: none;}
.contacts-page h2 {margin: 0; padding: 0;}
.contacts-cards {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;}
.contacts-card {--tint: #ffe6d3; --accent: #c2530c; display: flex; flex-direction: column; min-width: 0; padding: 26px; border: 1px solid #efe9e2; border-radius: 26px; background: #fff; box-shadow: 0 4px 18px rgba(71, 50, 29, .04); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease;}
.contacts-card--email {--tint: #e3efff; --accent: #2d5ea8;}
.contacts-card--hours {--tint: #dff3e8; --accent: #1c6e45;}
.contacts-card:hover {transform: translateY(-3px); border-color: #ead9c8; box-shadow: 0 18px 40px rgba(95, 61, 29, .09);}
.contacts-card__icon {display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 14px; background: var(--tint); color: var(--accent);}
.contacts-page .contacts-card__label {margin: 0 0 6px; font: 600 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #8a8d94;}
.contacts-card__value {margin: 0; font: 700 22px/1.3 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: -.02em; overflow-wrap: anywhere;}
.contacts-page .contacts-card__value a {color: #16181d;}
.contacts-page .contacts-card__value a:hover {color: #b34a0a;}
.contacts-card__hint {margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: #5d6068;}
.contacts-card__hint--bottom {margin-top: auto; padding-top: 16px;}
.contacts-card__actions {display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 22px;}
.contacts-page .contacts-pill {display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid #ece7e1; border-radius: 30px; background: #fff; color: #16181d; font: 600 14px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease;}
.contacts-page .contacts-pill:hover {border-color: #16181d;}
.contacts-page .contacts-pill.is-copied {border-color: #23a55a; background: #effaf3; color: #1c6e45;}
.contacts-pill[hidden] {display: none !important;}
.contacts-pill__dot {width: 8px; height: 8px; border-radius: 50%;}
.contacts-pill__dot--viber {background: #7360f2;}
.contacts-pill__dot--whatsapp {background: #25d366;}
.contacts-pill__dot--telegram {background: #229ed9;}
.contacts-hours {margin: 4px 0 0; padding: 0; list-style: none;}
.contacts-hours li {display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 0; border-top: 1px dashed #ece7e1; font-size: 15px; list-style: none;}
.contacts-hours li::before {display: none;}
.contacts-hours li:first-child {border-top: 0;}
.contacts-hours li span:last-child {color: #5d6068; text-align: right;}
.contacts-hours li.is-today {font-weight: 700;}
.contacts-hours li.is-today span:last-child {color: #16181d;}
.contacts-hours li.is-today span:first-child::after {content: attr(data-today-label); margin-left: 8px; padding: 2px 8px; border-radius: 30px; background: #ffe6d3; color: #b34a0a; font-size: 11px; font-weight: 600; vertical-align: 2px;}

.contacts-lower {display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; margin-top: 20px;}
.contacts-page .contacts-steps h2, .contacts-page .contacts-cta h2 {margin: 0 0 22px; font: 700 26px/1.25 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: -.025em; color: #16181d;}
.contacts-steps {padding: 32px; border: 1px solid #efe9e2; border-radius: 26px; background: #fff;}
.contacts-steps ol {margin: 0; padding: 0; list-style: none; counter-reset: contacts-step;}
.contacts-steps li {position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; margin: 0; padding: 0 0 22px; list-style: none; counter-increment: contacts-step;}
.contacts-steps li:last-child {padding-bottom: 0;}
.contacts-steps li::before {content: counter(contacts-step, decimal-leading-zero); grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #ffe6d3; color: #b34a0a; font-size: 13px; font-weight: 700;}
.contacts-steps li:nth-child(2)::before {background: #e3efff; color: #2d5ea8;}
.contacts-steps li:nth-child(3)::before {background: #dff3e8; color: #1c6e45;}
.contacts-steps li:not(:last-child)::after {content: ""; position: absolute; left: 19px; top: 46px; bottom: 6px; width: 2px; background: #f1ece6;}
.contacts-steps strong {display: block; margin: 8px 0 4px; font-size: 16px; color: #16181d;}
.contacts-steps span {font-size: 15px; line-height: 1.6; color: #5d6068;}
.contacts-cta {display: flex; flex-direction: column; align-items: flex-start; padding: 32px; border-radius: 26px; background: radial-gradient(420px 300px at 92% 0%, rgba(255, 255, 255, .85), transparent 70%), linear-gradient(120deg, #ffe9d8 0%, #fff4ea 48%, #e2f4ea 100%);}
.contacts-cta > p {margin: 0 0 20px; font-size: 16px; line-height: 1.7; color: #4b4e55;}
.contacts-cta__tools {display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none;}
.contacts-cta__tools li {margin: 0; padding: 6px 12px; border-radius: 30px; background: rgba(255, 255, 255, .75); font-size: 13px; font-weight: 600; list-style: none;}
.contacts-cta__tools li::before {display: none;}
.contacts-page .contacts-cta__button {display: inline-flex; align-items: center; gap: 10px; min-height: 52px; margin-top: auto; padding: 0 13px 0 24px; border-radius: 30px; background: #16181d; color: #fff; font: 600 15px/1.4 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; box-shadow: 0 8px 20px rgba(22, 24, 29, .18); transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;}
.contacts-page .contacts-cta__button:hover {background: #000; color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(22, 24, 29, .22);}
.contacts-cta__button > span {display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #ff7a1f;}
.contacts-page a:focus-visible, .contacts-page button:focus-visible {outline: 3px solid #b94c09; outline-offset: 3px;}

@media (max-width: 900px) {
 .header-holder > .contacts-banner .contacts-status {position: static; margin-top: 24px;}
 .contacts-cards {grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
 .contacts-card--hours {grid-column: 1 / -1;}
 .contacts-lower {grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 700px) {
 .header-holder > .contacts-banner .contacts-status {white-space: normal; align-items: flex-start;}
 .contacts-status__dot {margin-top: 5px;}
 .contacts-page {padding-top: 24px; padding-bottom: 56px;}
 .contacts-cards {grid-template-columns: minmax(0, 1fr);}
 .contacts-card, .contacts-steps, .contacts-cta {padding: 24px 22px;}
 .contacts-card__value {font-size: 20px;}
}
@media (prefers-reduced-motion: reduce) {
 .contacts-status__dot::after {animation: none; display: none;}
 .contacts-card, .contacts-page .contacts-cta__button {transition: none;}
 .contacts-card:hover, .contacts-page .contacts-cta__button:hover {transform: none;}
}