* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: transparent; font-family: Verdana, Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
.project-widget { position: relative; overflow: hidden; width: 468px; height: 150px; padding: 13px 18px; border: 2px solid #ffde99; border-radius: 3px; background: #fffff6; color: #555; font-size: 11px; }
.project-widget--horizontal.project-widget--stats { height: 200px; }
.project-widget--horizontal:not(.project-widget--stats) .project-widget__payments { position: absolute; top: 13px; right: 18px; margin: 0; }
.project-widget--horizontal:not(.project-widget--stats) .project-widget__comment { height: 45px; margin-top: 12px; }
.project-widget--vertical { width: 240px; height: 190px; }
.project-widget--vertical.project-widget--comment { height: 240px; }
.project-widget--vertical.project-widget--stats { height: 270px; }
.project-widget--vertical.project-widget--stats.project-widget--comment { height: 320px; }
.project-widget__amount, .project-widget__payments, .project-widget__comment { width: 204px; }
.project-widget__amount label, .project-widget__payments legend { display: block; padding: 0; margin: 0 0 3px; color: #9c9c93; text-transform: uppercase; font-size: 10px; font-weight: 400; }
.project-widget__amount-field { display: flex; height: 28px; }
.project-widget__amount-field input { width: 100%; min-width: 0; padding: 4px 14px; text-align: right; border: 1px solid #eaca86; border-radius: 3px 0 0 3px; outline: none; color: #555; font-size: 13px; font-weight: 700; background: white; }
.project-widget__amount-field input:focus { border-color: #dfa838; box-shadow: inset 0 0 0 1px #ffda37; }
.project-widget__amount-field input[aria-invalid="true"] { border-color: #e77d42; }
.project-widget__amount-field span { min-width: 40px; display: grid; place-items: center; background: #ffde75; border-radius: 0 3px 3px 0; color: #736431; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.project-widget__error { position: absolute; z-index: 2; margin: 3px 0 0; padding: 3px 5px; background: #fff7ec; border: 1px solid #e77d42; color: #a84e18; font-size: 10px; }
.project-widget__payments { min-width: 0; padding: 0; margin: 15px 0 0; border: 0; }
.project-widget__methods { display: flex; width: 100%; overflow: hidden; border: 1px solid #c5c5bd; border-radius: 3px; background: #fff; }
.project-widget__method, .project-widget__methods select { min-width: 0; height: 26px; padding: 0 3px; border: 0; border-right: 1px solid #c5c5bd; border-radius: 0; background: linear-gradient(#fff, #f4f0ec); color: #4b5460; cursor: pointer; font-size: 9px; }
.project-widget__method { display: flex; align-items: center; justify-content: center; flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-widget__method:last-child, .project-widget__methods select:last-child { border-right: 0; }
.project-widget__method.is-active, .project-widget__methods select.is-active { box-shadow: inset 0 0 9px -1px rgba(132,178,206,.75), inset 0 0 0 1px #73bdea; background: linear-gradient(#fff, #f1f8fc); color: #175d87; }
.project-widget__method-icon { display: block; width: 100%; height: 26px; background-repeat: no-repeat; background-position: center; }
.project-widget__method--card .project-widget__method-icon { background-image: url('../img/widget/visa_mc.svg'); background-size: 48px 32px; }
.project-widget__method--merchant .project-widget__method-icon { background-image: url('../img/widget/wm.svg'); background-size: 21px 21px; }
.project-widget__method--sbp .project-widget__method-icon { background-image: url('../img/widget/sbp.svg'); background-size: 26px 26px; }
.project-widget__method--usdt .project-widget__method-icon { background-image: url('../img/widget/usdt.svg'); background-size: 26px 26px; }
.project-widget__method--qiwi .project-widget__method-icon { background-image: url('../img/widget/qiwi.svg'); background-size: 26px 26px; }
.project-widget__method--sberbank .project-widget__method-icon { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAT5JREFUeNqM0j9IAmEYx/E774iWamlIWjIaI5CWkAIriKDVUbegKUxxiKihoCUSs4hoDPqDrhIJgkgNcf0jKIymitYggpAIh76PPJFEXb3w8b33vfd37/ncaxouLRgdMunCGMYUqqV08VXueXRBG5q+hQbotvGCdawhwLwl9019ahem4aCEBK6R0+sHZBDHCbvuSLCdwRI20YBBbGAc8hYriMCLZYTwZvMzijmMoQdXWEASfiwihU4Utb+UYAFRyJ+ehw8XmEEWq6q/rgTdEjzSHc90J3ndU8zqOPxDwW1bL7ZwjhhutPRlNP7ypR4leIAJ9OJQy99iuLd9j1atWjf5V+hdCmfdO3dPHX2+CoMR438txnfM104B4WPCz3q0LJedJgnJKfpaRNghvKdzrWjWI3mLXakuocLn+g8BBgBLb1ZKaAOOAwAAAABJRU5ErkJggg=='); }
.project-widget__method--alfabank .project-widget__method-icon { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAOCAYAAAD9lDaoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALZJREFUeNpiYEACe21l+4D4D4hGFmdEUiADpB4CMRMQ/wNiOefDj58yQAVgIBrKvwOlo2ESyIrioHQsEP8H4ngURUCrjICUFhCfBFpxAkgfBfGB4obIJsFM2QqUEADS26B8sGmMQEEWIA1yoBgDJngFxNIgBW5QBXeB+AiSAmsgVgHJgxT5QAVbgO5ZgBQkIKtAfF+Qolwg3gzEh9GsWgvEL4F4NwPVAMh3DwgpArlJnpAigAADAKPEK152z2S4AAAAAElFTkSuQmCC'); }
.project-widget__method--mc .project-widget__method-icon { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAARCAYAAAAPFIbmAAAAAXNSR0IArs4c6QAAAVBJREFUKBV9kMtKw0AUhv9c2ki0sYY2ZqFCK10VKtiNLhTciKvusvUpshXxKYJPIXStri1uRBRBLHhBTLW0NK2apLmYDCSRtHpgZs6c/zuXGUpV1QNd1w8ty2KQMo7jXFmWj5hyuXw+DQh513Vp0zS3oWma/5+FOp3qMPU6Ab0MbyZANoq8ju7Q7rcwsvt4GlyhIm5ikV8lMqnkeBZuP85Q5EvgM3nMZUXoo/soH6SS49nwfA8MxYKlWaxJe6CQTEK8GTaHamEHnc82DKuL08djPPQv4koxviRUsbW8D4ErorKwEUAtmM6QgKTd0O7i8u0EpXw9aOvi2zFIe9cfJ1AuWwiAdfKqr/EAdDBbTdrFbEZMoNArzdfJejausSLUiBht8UxRIA2EcUpRFD8C/jrjHw+BRqMBQRBgGAaazWacw4qi+N7r9aQw8luIiEDv/ABhppCWr9lPeAAAAABJRU5ErkJggg=='); }
.project-widget__method--yandex .project-widget__method-icon { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAYAAAAiYZ4HAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQlJREFUeNpiYMAD3lxjyAVib2QxJhwKOYB4AZA5CYhZkeVYsCiWB1LrgNgIm2FMaIodgdQZXIpRNAAVFwOp3UAsgs9fLECFbEB6DhDHwgS//4BgIQFMDYxADXOBdBKyYhs/BgZDHaApfQwM7z4wnPr5i+G7qBDDCRYWhh8gT8cjm/D+IwMDFycDQ3IUhP/tO4MZyBARIQZ7WCgxI2uQEmdgOLwRtx+YGEgEeDX8+sXA8Ps3WijhUgzyy9v3DAz//xPQ8PsPA8PL15DQAgEOdgYGHi6gQmYsGj59ZmB4/Y6BgY0VHCoMvNxABSxYbPj7D6IYBOSlMRWhe/oAEyMDgyA/BONTDAIAAQYAz4lI6n6LhK8AAAAASUVORK5CYII='); }
.project-widget__method--bitcoin .project-widget__method-icon { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAh5JREFUeNqMVEtIlFEU/mYalNTBmjQqVKRQJlTCNpUgSprgQtzkA6KFgVTuWrQVXLgxcGtBEIVChCLSovJRQSgqSajghChYiqRpoKNgPmb6ztw7M/9/f5UOfHPvnHPPd889j98VbsvHIXKTqNNrltb9JD4Sb4gh08FlEPmJDqIUx8tn4iHxPapwW4wlxLiN5NFXIK8KuFIDNL6zEpXqsyUmkUTSR3hxvgA4zdekXgA8iYj8T0kHTmUACUlWMq/28Uef5uI6QlyPmB9POx+yt0PSBJ7mvd9eA4OtVusoUSQRlcVIRF7yGevzar+zCbxizrvuABOdSldYD2TfsBKJb5kQ1dpuX2X+foyp/docsDID/J4FPj2Jn0nPNWOudesS20UiEUlMsdSzMr6f7HG0i4c/mQ6izWUgHFI3mzl7VgHsbpkemRLRX2d2w0BoX61T3cB0LxBcUab7/UDyGYeHEC07tCd9tDDYX8zPhxbgfTPwtBz4s6Az8tz0WHLrxrJLkk+VOnRgXHtCrWmXTI9hyVEXcTemOpcHXCzW1ckBfNkkJcG1e2xKnc5RR0Sd/9GQ4ehYquWIhowOrV8rUnH2MqsSBA72gAeDQE8TRyMZqGIftV9V+rhsENKdAY9WyBRXE2+xGvDGjklDSvW219lbGyZJUPsEjvqMvLCNzOEi0TdYPyMe44AYiohbxG09h5LhXWKR+EKwsTBgSV5E/gkwAJh9jukFxoFUAAAAAElFTkSuQmCC'); }
.project-widget__methods select { flex: 0 0 49px; }
.project-widget__comment { height: 45px; padding: 5px 7px; margin-top: 13px; border: 1px solid #eaca86; border-radius: 3px; background: white; resize: none; font-size: 11px; color: #555; }
.project-widget__comment::placeholder { color: #acb1b5; opacity: 1; }
.project-widget__comment:focus { outline: 1px solid #ffda37; }
.project-widget__stats { position: absolute; right: 18px; top: 14px; width: 204px; display: flex; flex-direction: column; gap: 5px; color: #6b6b63; font-size: 10px; }
.project-widget__stats strong { color: #31a36c; font-size: 25px; line-height: 1.1; font-weight: 400; }
.project-widget__stats small { color: #4caa76; font-size: 10px; font-weight: 700; }
.project-widget__progress { height: 7px; overflow: hidden; border-radius: 5px; background: #e3e1d5; }
.project-widget__progress i { display: block; height: 100%; border-radius: 5px; background: #41c379; }
.project-widget__action { position: absolute; right: 18px; bottom: 12px; width: 204px; }
.project-widget--horizontal .project-widget__offer { position: absolute; left: -224px; bottom: 0; width: 204px; }
.project-widget__offer { display: flex; align-items: center; white-space: nowrap; color: #84888b; font-size: 9px; line-height: 1.2; }
.project-widget__offer input { width: 10px; height: 10px; flex: 0 0 10px; margin: 0 4px 0 0; vertical-align: middle; accent-color: #d3dce2; }
.project-widget__offer a { color: #4f799a; text-decoration: none; border-bottom: 1px dotted #d3dce2; }
.project-widget__submit { display: block; width: 100%; height: 36px; margin-top: 13px; border: 0; border-radius: 4px; background: linear-gradient(#fee059, #f5bc02); box-shadow: inset 0 -3px 0 -1px #cc8e08; color: #3a3524; font-size: 11px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.project-widget__submit:hover { background: linear-gradient(#f5bc02, #fee059); }
.project-widget__submit:disabled { cursor: not-allowed; opacity: .55; }
.project-widget__unavailable { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; flex-direction: column; text-align: center; color: #686c70; }
.project-widget__unavailable a { color: #347eaf; }
.project-widget--vertical .project-widget__amount, .project-widget--vertical .project-widget__payments, .project-widget--vertical .project-widget__comment, .project-widget--vertical .project-widget__stats { width: 204px; }
.project-widget--vertical .project-widget__stats { position: static; margin-bottom: 10px; }
.project-widget--vertical .project-widget__stats strong { font-size: 22px; }
.project-widget--vertical .project-widget__payments { margin-top: 15px; }
.project-widget--vertical .project-widget__comment { margin-top: 13px; }
.project-widget--vertical .project-widget__action { left: 18px; right: 18px; bottom: 0; width: auto; }
.project-widget--vertical .project-widget__submit { width: 240px; margin: 10px 0 0 -20px; border-radius: 0 0 2px 2px; }
@media (prefers-reduced-motion: no-preference) { .project-widget__method, .project-widget__submit { transition: background .15s, border-color .15s; } }