/*
 * Promo popup "Плати за сайт сколько хочешь" (arb)
 * Markup: partials/site/arb-popup.htm, behaviour: assets/javascript/arb-popup.js
 */

.arb-trigger,
.arb-modal {
--arb-pink: #db5baa;
--arb-pink-dark: #c4428f;
--arb-pink-soft: #fdf0f7;
--arb-navy: #2f487b;
--arb-title: #2b3442;
--arb-text: rgba(43, 52, 66, .82);
--arb-muted: #7b8597;
--arb-line: #dfe5ef;
--arb-soft: #f6f8fc;
--arb-error: #d63a68;
}

html.arb-lock {
overflow: hidden;
}

/* --- Corner trigger --- */
.arb-trigger {
position: fixed;
z-index: 998;
left: -8px;
bottom: var(--arb-trigger-bottom, 112px);
width: 210px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
opacity: 0;
transform: translateX(-110%);
filter: drop-shadow(0 8px 18px rgba(47, 72, 123, .22));
transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .3s ease, left .25s ease, bottom .2s ease;
}

.arb-trigger.is-visible {
opacity: 1;
transform: none;
}

.arb-trigger:hover {
left: 0;
}

.arb-trigger:focus-visible {
outline: 3px solid rgba(47, 72, 123, .45);
outline-offset: 4px;
border-radius: 12px;
}

.arb-trigger__img {
display: block;
width: 100%;
height: auto;
transform-origin: 0 50%;
}

.arb-trigger.is-visible .arb-trigger__img {
animation: arb-wiggle 9s ease-in-out 5s infinite;
}

@keyframes arb-wiggle {
0%, 86%, 100% { transform: none; }
88% { transform: rotate(-3deg); }
90% { transform: rotate(2.5deg); }
92% { transform: rotate(-1.5deg); }
94% { transform: rotate(1deg); }
}

/* --- Modal --- */
.arb-modal {
position: fixed;
z-index: 10001;
inset: 0;
display: flex;
padding: 24px;
overflow-y: auto;
overscroll-behavior: contain;
font-family: 'Onest', sans-serif;
color: var(--arb-text);
line-height: 1.5;
text-align: left;
}

.arb-modal[hidden],
.arb-view[hidden] {
display: none !important;
}

.arb-modal__backdrop {
position: fixed;
inset: 0;
background: rgba(22, 38, 64, .68);
-webkit-backdrop-filter: blur(9px);
backdrop-filter: blur(9px);
opacity: 0;
transition: opacity .35s ease;
}

.arb-modal.is-open .arb-modal__backdrop {
opacity: 1;
}

.arb-modal__frame {
position: relative;
z-index: 1;
display: flex;
margin: auto;
}

.arb-view {
position: relative;
margin: 0;
/* style.css pads every section */
padding: 0;
background: #fff;
box-shadow: 0 24px 80px rgba(7, 18, 40, .3);
opacity: 0;
transform: translateY(16px) scale(.985);
transition: opacity .28s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}

.arb-modal.is-open .arb-view.is-active {
opacity: 1;
transform: none;
}

/* Beats the theme's "p + p" margins, loses to the component rules below */
.arb-modal :where(h2, h3, p, ul) {
margin: 0;
}

.arb-modal button {
font-family: inherit;
}

/* --- Buttons --- */
.arb-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.9em;
padding: .7em 1.35em;
border: 2px solid transparent;
border-radius: .65em;
font-size: .95em;
font-weight: 600;
line-height: 1.15;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.arb-btn:focus-visible {
outline: 3px solid rgba(47, 72, 123, .4);
outline-offset: 3px;
}

.arb-btn--primary {
background: var(--arb-pink);
color: #fff;
box-shadow: 0 .55em 1.3em rgba(219, 91, 170, .32);
}

.arb-btn--primary:hover {
background: var(--arb-pink-dark);
color: #fff;
transform: translateY(-2px);
}

.arb-btn--secondary {
background: #fff;
border-color: rgba(47, 72, 123, .28);
color: var(--arb-navy);
}

.arb-btn--secondary:hover {
border-color: var(--arb-navy);
color: var(--arb-navy);
transform: translateY(-2px);
}

.arb-btn--wide {
width: 100%;
}

.arb-btn.is-busy {
cursor: progress;
transform: none;
}

.arb-btn.is-busy::before {
content: '';
width: 1em;
height: 1em;
margin-right: .6em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: arb-spin .8s linear infinite;
}

@keyframes arb-spin {
to { transform: rotate(360deg); }
}

.arb-close {
position: absolute;
z-index: 3;
top: 14px;
right: 14px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 42px;
height: 42px;
padding: 13px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .94);
box-shadow: 0 2px 10px rgba(7, 18, 40, .12);
cursor: pointer;
transition: transform .25s ease, background-color .2s ease;
}

.arb-close:hover {
transform: rotate(90deg);
}

.arb-close:focus-visible,
.arb-sheet__back:focus-visible {
outline: 3px solid rgba(47, 72, 123, .4);
outline-offset: 2px;
}

.arb-close img {
display: block;
width: 100%;
height: 100%;
}

/* --- Banner (also the success screen) ---
 * Text sits in the blank browser window of the illustration. --arb-w is the
 * banner width, all window coordinates are fractions of it, so the text keeps
 * its place at any size.
 */
.arb-banner {
--arb-w: min(1100px, calc(100vw - 48px), calc((100vh - 48px) * 1.4));
width: var(--arb-w);
border-radius: 24px;
overflow: hidden;
font-size: clamp(12px, calc(var(--arb-w) / 58), 19px);
}

@supports (height: 100dvh) {
.arb-banner {
--arb-w: min(1100px, calc(100vw - 48px), calc((100dvh - 48px) * 1.4));
}
}

.arb-banner__art {
display: block;
width: 100%;
aspect-ratio: 1484 / 1060;
background: #fff;
}

.arb-banner__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.arb-banner__body {
position: absolute;
left: calc(var(--arb-w) * .345);
top: calc(var(--arb-w) * .19);
width: calc(var(--arb-w) * .465);
height: calc(var(--arb-w) * .37);
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.15em;
}

.arb-banner__title {
font-size: 2.45em;
font-weight: 800;
line-height: 1.04;
letter-spacing: -.015em;
color: var(--arb-title);
}

.arb-banner__title:focus {
outline: none;
}

.arb-banner__accent {
display: block;
color: var(--arb-pink);
}

.arb-banner__lead {
margin-top: .65em;
font-size: 1.02em;
line-height: 1.45;
color: var(--arb-text);
}

.arb-banner__scope {
display: inline-flex;
align-items: flex-start;
gap: .55em;
padding: .55em .85em;
border-radius: .7em;
background: var(--arb-pink-soft);
color: #a32f71;
font-size: .8em;
font-weight: 600;
line-height: 1.35;
}

.arb-banner__scope::before {
content: '';
flex: 0 0 auto;
width: 1.15em;
height: 1.15em;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23db5baa'/%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.arb-banner__actions {
display: flex;
flex-wrap: wrap;
gap: .65em;
margin-top: 1em;
}

.arb-banner__note {
margin-top: .85em;
font-size: max(11px, .68em);
line-height: 1.35;
color: var(--arb-muted);
}

.arb-banner__link {
display: inline;
padding: 0;
border: 0;
background: none;
font: inherit;
color: var(--arb-navy);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
transition: color .2s ease;
}

.arb-banner__link:hover {
color: var(--arb-pink);
}

.arb-banner__link:focus-visible {
outline: 2px solid rgba(47, 72, 123, .4);
outline-offset: 2px;
border-radius: 3px;
}

.arb-banner--success .arb-banner__body {
gap: .5em;
}

/* Portrait screens: the vertical illustration, buttons below it */
@media (max-aspect-ratio: 1/1) {
.arb-modal {
padding: 12px;
}

.arb-banner {
--arb-w: min(520px, calc(100vw - 24px), calc((100vh - 174px) * .7467));
border-radius: 20px;
font-size: clamp(13px, calc(var(--arb-w) / 25), 16px);
}

@supports (height: 100dvh) {
.arb-banner {
--arb-w: min(520px, calc(100vw - 24px), calc((100dvh - 174px) * .7467));
}
}

.arb-banner__art {
aspect-ratio: 896 / 1200;
}

.arb-banner__body {
display: contents;
}

.arb-banner__screen {
position: absolute;
left: calc(var(--arb-w) * .14);
top: calc(var(--arb-w) * .245);
width: calc(var(--arb-w) * .66);
height: calc(var(--arb-w) * .5);
display: flex;
flex-direction: column;
justify-content: center;
}

/* Sized by the illustration, not by the 16px cap of the buttons below:
   "сколько хочешь!" is 8.13em wide, the window is .66 of the banner */
.arb-banner__title {
font-size: min(calc(var(--arb-w) * .076), 40px);
}

.arb-banner__lead {
margin-top: .5em;
font-size: max(12.5px, min(calc(var(--arb-w) * .043), 21px));
line-height: 1.38;
}

.arb-banner__lead-extra {
display: none;
}

.arb-banner__extra {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 1.1em 1.15em;
text-align: center;
}

.arb-banner__scope {
text-align: left;
}

.arb-banner__actions {
flex-wrap: nowrap;
width: 100%;
margin-top: .85em;
}

.arb-banner__actions .arb-btn {
flex: 1 1 0;
padding-left: .6em;
padding-right: .6em;
font-size: .92em;
}

.arb-banner__note {
margin-top: .7em;
}

.arb-banner--success .arb-banner__actions .arb-btn {
flex: 0 1 12em;
}
}

/* Short landscape screens (phones turned sideways): text only */
@media (min-aspect-ratio: 1/1) and (max-height: 560px) {
.arb-banner {
--arb-w: min(560px, calc(100vw - 24px));
font-size: 15px;
}

.arb-banner__art {
display: none;
}

.arb-banner__body {
position: static;
width: auto;
height: auto;
padding: 2em 2.2em 1.8em;
}
}

/* --- Sheets: terms and form --- */
.arb-sheet {
display: flex;
flex-direction: column;
width: min(760px, calc(100vw - 48px));
max-height: calc(100vh - 48px);
border-radius: 24px;
overflow: hidden;
font-size: 16px;
}

@supports (height: 100dvh) {
.arb-sheet {
max-height: calc(100dvh - 48px);
}
}

.arb-form {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}

.arb-sheet__head {
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
padding: 16px 18px 14px;
border-bottom: 1px solid var(--arb-line);
}

.arb-sheet__head .arb-close {
position: static;
background: #f2f4f8;
box-shadow: none;
}

.arb-sheet__back {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 42px;
height: 42px;
padding: 0;
border: 0;
border-radius: 50%;
background: #f2f4f8;
color: var(--arb-navy);
cursor: pointer;
transition: background-color .2s ease;
}

.arb-sheet__back:hover,
.arb-sheet__head .arb-close:hover {
background: #e7ebf2;
}

.arb-sheet__back svg {
width: 22px;
height: 22px;
}

.arb-sheet__title {
flex: 1 1 auto;
min-width: 0;
font-size: 22px;
font-weight: 700;
line-height: 1.2;
color: var(--arb-title);
}

.arb-sheet__title:focus {
outline: none;
}

.arb-sheet__body {
flex: 1 1 auto;
min-height: 0;
padding: 22px 28px 28px;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}

.arb-sheet__foot {
flex: 0 0 auto;
padding: 14px 28px 18px;
border-top: 1px solid var(--arb-line);
background: #fff;
}

/* --- Terms --- */
.arb-terms {
font-size: 16px;
line-height: 1.55;
color: var(--arb-text);
}

.arb-terms p {
margin: 0 0 .75em;
}

.arb-terms h3 {
margin: 1.5em 0 .55em;
font-size: 18px;
font-weight: 700;
line-height: 1.3;
color: var(--arb-title);
}

.arb-terms .arb-terms__kicker {
margin-bottom: .3em;
font-size: 13px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--arb-pink);
}

.arb-terms h3.arb-terms__title {
margin-top: 0;
font-size: 26px;
line-height: 1.2;
}

.arb-terms .arb-terms__highlight {
padding: 12px 16px;
border-radius: 12px;
background: var(--arb-pink-soft);
color: #a32f71;
font-weight: 600;
}

.arb-terms ul {
margin: 0 0 .9em;
padding: 0;
list-style: none;
}

.arb-terms li {
position: relative;
margin: 0 0 .5em;
padding-left: 1.6em;
list-style: none;
}

.arb-terms li::before {
content: '';
position: absolute;
left: .35em;
top: .62em;
width: .42em;
height: .42em;
border-radius: 50%;
background: var(--arb-pink);
}

.arb-terms .arb-terms__checks li::before {
left: 0;
top: .2em;
width: 1.15em;
height: 1.15em;
border-radius: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23db5baa'/%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Form --- */
.arb-form__intro {
margin-bottom: 22px;
font-size: 15px;
color: var(--arb-muted);
}

.arb-field {
min-width: 0;
margin: 0 0 22px;
padding: 0;
border: 0;
}

.arb-label {
display: block;
margin: 0 0 8px;
padding: 0;
font-size: 15px;
font-weight: 600;
line-height: 1.35;
color: var(--arb-title);
}

.arb-req {
margin-left: 3px;
color: var(--arb-pink);
}

.arb-modal .arb-input {
display: block;
width: 100%;
height: auto;
margin: 0;
padding: 12px 14px;
border: 1.5px solid var(--arb-line);
border-radius: 12px;
outline: none;
background: #fff;
box-shadow: none;
font-family: inherit;
font-size: 16px;
line-height: 1.4;
color: var(--arb-title);
-webkit-appearance: none;
appearance: none;
transition: border-color .2s ease, box-shadow .2s ease;
}

.arb-modal .arb-input:hover {
border-color: #c5cfdf;
}

.arb-modal .arb-input:focus {
border-color: var(--arb-navy);
box-shadow: 0 0 0 4px rgba(47, 72, 123, .12);
}

.arb-modal .arb-input::placeholder {
font-size: inherit;
color: #9aa3b2;
opacity: 1;
}

.arb-modal .arb-input::-webkit-input-placeholder {
font-size: inherit;
color: #9aa3b2;
opacity: 1;
}

.arb-modal .arb-input::-moz-placeholder {
font-size: inherit;
color: #9aa3b2;
opacity: 1;
}

.arb-modal .arb-input--area {
min-height: 0;
resize: vertical;
}

.arb-field.is-invalid .arb-input {
border-color: var(--arb-error);
}

.arb-hint {
margin-top: 6px;
font-size: 13px;
color: var(--arb-muted);
}

.arb-error {
margin-top: 6px;
font-size: 13.5px;
line-height: 1.4;
color: var(--arb-error);
}

/* Site type chips */
.arb-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}

.arb-chip {
position: relative;
display: block;
cursor: pointer;
}

.arb-chip input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}

.arb-chip span {
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 9px 16px;
border: 1.5px solid var(--arb-line);
border-radius: 999px;
background: #fff;
font-size: 15px;
font-weight: 500;
line-height: 1.2;
color: var(--arb-title);
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.arb-chip:hover span {
border-color: rgba(219, 91, 170, .6);
}

.arb-chip input:checked + span {
border-color: var(--arb-pink);
background: var(--arb-pink);
color: #fff;
}

.arb-chip input:focus-visible + span {
outline: 3px solid rgba(47, 72, 123, .35);
outline-offset: 2px;
}

.arb-field.is-invalid .arb-chip span {
border-color: var(--arb-error);
}

/* Drop zones */
.arb-drop {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 22px 18px;
border: 2px dashed #c9d3e4;
border-radius: 16px;
background: var(--arb-soft);
text-align: center;
cursor: pointer;
transition: border-color .2s ease, background-color .2s ease;
}

.arb-drop:hover,
.arb-drop.is-over {
border-color: var(--arb-pink);
background: #fdf4fa;
}

.arb-drop.is-over {
border-style: solid;
}

.arb-drop--compact {
padding: 16px 18px;
}

.arb-drop__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}

.arb-drop__icon {
width: 40px;
height: 40px;
color: var(--arb-pink);
}

.arb-drop--compact .arb-drop__icon {
width: 34px;
height: 34px;
color: var(--arb-navy);
}

.arb-drop__title {
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: var(--arb-title);
}

.arb-drop__btn {
display: inline;
padding: 0;
border: 0;
background: none;
font: inherit;
font-weight: 600;
color: var(--arb-pink);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}

.arb-drop__btn:focus-visible {
outline: 3px solid rgba(47, 72, 123, .35);
outline-offset: 2px;
border-radius: 4px;
}

.arb-drop__hint {
font-size: 13px;
line-height: 1.4;
color: var(--arb-muted);
}

@media (hover: none) {
.arb-drop__drag {
display: none;
}

.arb-drop__btn {
display: inline-block;
}

.arb-drop__btn::first-letter {
text-transform: uppercase;
}
}

.arb-notice {
margin-top: 8px;
padding: 8px 12px;
border-radius: 10px;
background: #fff4e5;
font-size: 13.5px;
line-height: 1.4;
color: #8a5300;
}

/* Uploaded files */
.arb-files {
margin: 12px 0 0;
padding: 0;
list-style: none;
}

.arb-files:empty {
display: none;
}

.arb-file {
position: relative;
margin: 0;
list-style: none;
}

.arb-files--photos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 10px;
}

.arb-file--photo {
aspect-ratio: 1 / 1;
border-radius: 12px;
overflow: hidden;
background: #eef2f8;
}

.arb-file__ext {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: var(--arb-muted);
}

.arb-file__thumb {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity .3s ease, filter .3s ease;
}

.arb-file--photo.is-queued .arb-file__thumb,
.arb-file--photo.is-uploading .arb-file__thumb {
opacity: .55;
filter: saturate(.6);
}

.arb-file__progress {
height: 5px;
border-radius: 3px;
background: #e6ebf3;
overflow: hidden;
transition: opacity .4s ease .4s;
}

.arb-file--photo .arb-file__progress {
position: absolute;
z-index: 1;
left: 8px;
right: 8px;
bottom: 8px;
background: rgba(255, 255, 255, .85);
}

.arb-file__bar {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: var(--arb-pink);
transition: width .2s ease;
}

.arb-file.is-done .arb-file__progress,
.arb-file.is-error .arb-file__progress {
opacity: 0;
}

.arb-file__done {
position: absolute;
z-index: 1;
left: 6px;
bottom: 6px;
width: 22px;
height: 22px;
border-radius: 50%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%232e9d58'/%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
opacity: 0;
transform: scale(.6);
transition: opacity .25s ease .2s, transform .25s ease .2s;
}

.arb-file.is-done .arb-file__done {
opacity: 1;
transform: none;
}

.arb-file__remove,
.arb-file__retry {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
transition: background-color .2s ease;
}

.arb-file__remove svg,
.arb-file__retry svg {
width: 14px;
height: 14px;
}

.arb-file--photo .arb-file__remove {
position: absolute;
z-index: 2;
top: 6px;
right: 6px;
background: rgba(20, 30, 50, .62);
color: #fff;
}

.arb-file--photo .arb-file__remove:hover {
background: rgba(20, 30, 50, .85);
}

.arb-file__remove:focus-visible,
.arb-file__retry:focus-visible {
outline: 3px solid rgba(47, 72, 123, .45);
outline-offset: 2px;
}

.arb-file--photo .arb-file__fail {
position: absolute;
z-index: 1;
inset: 0;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 8px;
background: rgba(214, 58, 104, .88);
color: #fff;
font-size: 11.5px;
line-height: 1.25;
text-align: center;
}

.arb-file--photo.is-error .arb-file__fail {
display: flex;
}

.arb-file--photo .arb-file__retry {
background: rgba(255, 255, 255, .95);
color: var(--arb-error);
}

.arb-file--photo .arb-file__error {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.arb-file--doc {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: 6px 12px;
margin-bottom: 8px;
padding: 10px 10px 10px 12px;
border: 1.5px solid var(--arb-line);
border-radius: 12px;
}

.arb-file--doc.is-error {
border-color: rgba(214, 58, 104, .45);
background: #fff7fa;
}

.arb-file__badge {
min-width: 46px;
padding: 4px 6px;
border-radius: 6px;
background: var(--arb-navy);
font-size: 11px;
font-weight: 700;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
color: #fff;
}

.arb-file__info {
min-width: 0;
}

.arb-file__name {
display: block;
overflow: hidden;
font-size: 14.5px;
font-weight: 500;
line-height: 1.35;
color: var(--arb-title);
text-overflow: ellipsis;
white-space: nowrap;
}

.arb-file__meta {
display: block;
font-size: 12.5px;
line-height: 1.35;
color: var(--arb-muted);
}

.arb-file--doc.is-error .arb-file__meta {
color: var(--arb-error);
}

.arb-file--doc .arb-file__progress {
grid-column: 1 / -1;
}

.arb-file--doc .arb-file__remove,
.arb-file--doc .arb-file__retry {
background: #f2f4f8;
color: var(--arb-title);
}

.arb-file--doc .arb-file__remove:hover,
.arb-file--doc .arb-file__retry:hover {
background: #e7ebf2;
}

.arb-file--doc .arb-file__retry {
display: none;
color: var(--arb-error);
}

.arb-file--doc.is-error .arb-file__retry {
display: flex;
}

.arb-file--doc .arb-file__done {
display: none;
}

/* Contacts */
.arb-form__contacts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 14px;
}

/* Consent */
.arb-check {
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
line-height: 1.45;
color: var(--arb-text);
cursor: pointer;
}

.arb-check input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}

.arb-check__box {
flex: 0 0 auto;
width: 22px;
height: 22px;
border: 1.5px solid #b9c3d4;
border-radius: 6px;
background: #fff center / 14px no-repeat;
transition: background-color .2s ease, border-color .2s ease;
}

.arb-check input:checked + .arb-check__box {
border-color: var(--arb-pink);
background-color: var(--arb-pink);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.3l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.arb-check input:focus-visible + .arb-check__box {
outline: 3px solid rgba(47, 72, 123, .35);
outline-offset: 2px;
}

.arb-field.is-invalid .arb-check__box {
border-color: var(--arb-error);
}

.arb-check a {
color: var(--arb-navy);
text-decoration: underline;
}

/* Honeypot */
.arb-hp {
position: absolute !important;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}

.arb-form__foot {
display: flex;
align-items: center;
gap: 16px;
}

.arb-form__status {
flex: 1 1 auto;
min-width: 0;
font-size: 14px;
line-height: 1.4;
color: var(--arb-muted);
}

.arb-form__status.is-error {
color: var(--arb-error);
}

.arb-form__foot .arb-btn {
flex: 0 0 auto;
width: auto;
min-width: 230px;
}

/* --- Phones --- */
@media (max-width: 767px) {
.arb-trigger {
left: -6px;
width: 136px;
}

.arb-modal.is-sheet {
padding: 0;
}

.arb-sheet {
width: 100vw;
height: 100vh;
max-height: none;
border-radius: 0;
}

@supports (height: 100dvh) {
.arb-sheet {
height: 100dvh;
max-height: none;
}
}

.arb-sheet__head {
padding: 10px 12px;
}

.arb-sheet__title {
font-size: 19px;
}

.arb-sheet__body {
padding: 18px 16px 24px;
}

.arb-sheet__foot {
padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}

.arb-terms h3.arb-terms__title {
font-size: 22px;
}

.arb-form__contacts {
grid-template-columns: 1fr;
}

.arb-form__foot {
flex-direction: column;
align-items: stretch;
gap: 8px;
}

.arb-form__foot .arb-btn {
width: 100%;
min-width: 0;
}

.arb-form__status:empty {
display: none;
}
}

@media (prefers-reduced-motion: reduce) {
.arb-trigger,
.arb-view,
.arb-modal__backdrop,
.arb-btn,
.arb-close {
transition: none;
}

.arb-trigger.is-visible .arb-trigger__img {
animation: none;
}
}