/* Форма заказа «Письмо от Мороза» (#greeting-letter). Подключается после основного <style> и перекрывает старые правила формы. */
#greeting-letter{--of-ink:#202e27;--of-mute:#687064;--of-line:#d6c8ac;--of-red:#a8372b;--of-ok:#3a7653;--of-focus:#d1a359;padding:0;font-size:14px}
#greeting-letter [hidden]{display:none!important}
#greeting-letter .postage-edge{height:5px}

/* Шапка письма */
#greeting-letter .card-top{margin:0 26px;padding:21px 0 13px;border:0;border-bottom:1px dashed #d9ccb0;align-items:center;gap:12px}
#greeting-letter .card-top h3{font-size:22px;line-height:1.2}
#greeting-letter .card-top .hint{margin:3px 0 0;font-size:13px;color:var(--of-mute)}
#greeting-letter .badge{flex:none;font-size:9px;letter-spacing:.09em;padding:7px 8px;transform:rotate(4deg)}
#greeting-letter form{padding:0 26px}

/* Единый индикатор: сегменты = шаги, подпись = шаг + число добавленных деталей */
.of-progress{margin:14px 0 16px}
.of-progress-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px}
#greeting-letter .of-step-label{margin:0;font-size:12px;font-weight:700;letter-spacing:.04em;color:#7d5e3e;outline:0}
.of-magic{font-size:12px;color:#7d5e3e;white-space:nowrap}
.of-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.of-bar i{height:4px;border-radius:4px;background:#e6dbc4;transition:background .25s}
.of-bar i.on{background:#b25742}

/* Страницы формы */
#greeting-letter .form-page{animation:of-in .22s ease both}
@keyframes of-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Поля */
.of-field{margin:0 0 12px;position:relative}
.of-field>label,.of-label-row label,.of-field-label{display:block;font-size:13px;font-weight:650;color:var(--of-ink);margin:0 0 6px;line-height:1.35}
.of-label-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.of-label-row label{margin-bottom:6px}
.of-opt{font-weight:400;font-style:normal;color:var(--of-mute);font-size:12px;margin-left:6px}
.of-count{font-size:11px;color:var(--of-mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.of-count.warn{color:#9b5a1c;font-weight:700}
.of-control{position:relative}
#greeting-letter .of-input{display:block;width:100%;height:44px;padding:0 40px 0 13px;border:1px solid #d2c4aa;border-radius:9px;background:#fffdf8;color:var(--of-ink);font-family:inherit;font-size:15px;line-height:1.3;outline:0;transition:border-color .15s,box-shadow .15s,background-color .15s}
#greeting-letter .of-input::placeholder{color:#9a9684}
#greeting-letter .of-area{height:auto;min-height:58px;padding:10px 13px;line-height:1.4;resize:none}
#greeting-letter .of-input:hover{border-color:#b9a883}
#greeting-letter .of-input:focus{border-color:#9b5a45;box-shadow:0 0 0 3px #a8372b1f;background:#fff}
#greeting-letter [data-state=valid] .of-input{border-color:#86ad92}
#greeting-letter [data-state=error] .of-input{border-color:#b3382d;background:#fff7f4}
#greeting-letter [data-state=error] .of-input:focus{box-shadow:0 0 0 3px #b3382d26}
.of-ok{position:absolute;right:12px;top:12px;width:20px;height:20px;display:none;pointer-events:none}
.of-ok svg,.of-up-size svg{width:100%;height:100%;fill:var(--of-ok);stroke:none}
.of-ok path,.of-up-size path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[data-state=valid] .of-ok{display:block}
.of-hint{margin:5px 0 0;font-size:12px;line-height:1.4;color:var(--of-mute)}
.of-field>.of-hint{padding-right:2px}
.of-err{margin:5px 0 0;font-size:12px;line-height:1.4;font-weight:600;color:#a3271d;display:flex;gap:6px;align-items:flex-start}
.of-err:empty{display:none}
.of-err:before{content:"!";flex:none;width:15px;height:15px;margin-top:1px;border-radius:50%;background:#a3271d;color:#fff;font-size:10px;line-height:15px;text-align:center}
.of-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Загрузчики файлов */
.of-up{position:relative}
.of-up-zone{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:10px 14px;border:1.5px dashed #c2af88;border-radius:12px;background:#fffaf0;color:var(--of-ink);font-family:inherit;text-align:left;transition:border-color .15s,background-color .15s,box-shadow .15s}
.of-up-zone:hover{border-color:#a8372b99;background:#fff4e2}
.of-up-zone:focus-visible{outline:3px solid var(--of-focus);outline-offset:2px}
.of-up-ico{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:#efe5cd;color:#7a5a3a;transition:background-color .15s,color .15s}
.of-up-ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.of-up-txt{display:block;min-width:0}
.of-up-t{display:block;font-size:14px;font-weight:650;line-height:1.3}
.of-up-s{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--of-mute)}
.of-spin{display:none;width:22px;height:22px;border-radius:50%;border:2.5px solid #dccdab;border-top-color:var(--of-red);animation:of-spin .8s linear infinite}
@keyframes of-spin{to{transform:rotate(360deg)}}
/* перетаскивание */
.of-up[data-drag] .of-up-zone{border-style:solid;border-color:var(--of-red);background:#fdeee3;box-shadow:0 0 0 4px #a8372b1c}
.of-up[data-drag] .of-up-ico{background:var(--of-red);color:#fff}
/* обработка */
.of-up[data-state=busy] .of-up-zone{cursor:progress;border-style:solid;border-color:#c2af88;background:#fff8ea}
.of-up[data-state=busy] .of-up-ico svg{display:none}
.of-up[data-state=busy] .of-up-ico .of-spin{display:block}
/* ошибка */
.of-up[data-error] .of-up-zone{border-color:#b3382d;background:#fff6f3}
.of-up[data-error] .of-up-ico{background:#f8dcd6;color:#a3271d}
.of-up-err{margin:6px 0 0;font-size:12px;line-height:1.4;font-weight:600;color:#a3271d;display:flex;gap:6px}
.of-up-err:empty{display:none}
.of-up-err:before{content:"!";flex:none;width:15px;height:15px;margin-top:1px;border-radius:50%;background:#a3271d;color:#fff;font-size:10px;line-height:15px;text-align:center}
/* готово */
.of-up-done{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:9px 10px 9px 9px;border:1px solid #b6cfbd;border-radius:12px;background:#f3f9f4;animation:of-in .2s ease both}
.of-up-thumb{flex:none;width:52px;height:52px;border-radius:8px;object-fit:cover;background:#e8e2d2;box-shadow:0 0 0 2px #fff,0 1px 5px #0003}
.of-up-meta{flex:1;min-width:0}
.of-up-name{display:block;font-size:13px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-up-size{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:12px;color:var(--of-ok)}
.of-up-size svg{flex:none;width:14px;height:14px}
.of-up-actions{display:flex;gap:6px}
.of-chip{height:34px;padding:0 12px;border-radius:8px;border:1px solid #cdbf9f;background:#fffdf8;color:#294a37;font-family:inherit;font-size:13px;font-weight:650;white-space:nowrap;transition:background-color .15s,border-color .15s}
.of-chip:hover{background:#f1e9d6;border-color:#b3a27c}
.of-chip:focus-visible{outline:3px solid var(--of-focus);outline-offset:2px}
.of-chip-del{color:#a3271d}
.of-chip-del:hover{background:#fdeeea;border-color:#d9a79e}

/* Согласие */
.of-consent-field{margin-top:12px;margin-bottom:0}
.of-field>label.of-consent{line-height:1.45;font-size:12px;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid #e3d7bd;border-radius:10px;background:#fbf5e6;font-size:12px;line-height:1.45;color:#46564a;cursor:pointer;font-weight:400!important;margin:0!important}
.of-consent input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border:1.5px solid #b3a07a;border-radius:6px;background:#fffdf8 center/14px no-repeat;cursor:pointer;transition:background-color .15s,border-color .15s}
.of-consent input:checked{background-color:var(--of-red);border-color:var(--of-red);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.of-consent input:focus-visible{outline:3px solid var(--of-focus);outline-offset:2px}
.of-consent a{color:#8f2e25}
[data-state=error] label.of-consent{border-color:#b3382d;background:#fff6f3}
[data-state=error] .of-consent input{border-color:#b3382d}

/* Проверка заказа */
#greeting-letter .of-rev h4{font:400 20px/1.2 Georgia,serif;margin:0 0 8px}
#greeting-letter .review-section{border:1px solid #e6dac1;border-radius:11px;background:#fffdf8;padding:9px 13px;margin:0 0 8px}
#greeting-letter .review-heading{font-size:13px;display:flex;justify-content:space-between;align-items:center}
#greeting-letter .review-edit{background:none;border-radius:6px;min-height:32px;padding:0 4px;margin-right:-4px;color:#8f2e25;font-size:12px;font-weight:650;text-decoration:underline}
#greeting-letter .review-edit:focus-visible{outline:3px solid var(--of-focus);outline-offset:1px}
#greeting-letter .review-section dl{margin:4px 0 0;display:grid;grid-template-columns:auto 1fr;gap:3px 12px}
#greeting-letter .review-section dt{font-size:12px;color:var(--of-mute);padding-top:1px}
#greeting-letter .review-section dd{margin:0;font-size:14px;overflow-wrap:anywhere}
#greeting-letter .review-images{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
#greeting-letter .review-images span{font-size:12px;color:var(--of-mute)}
#greeting-letter .review-images img{display:block;width:56px;height:56px;margin-top:5px;border-radius:8px;object-fit:cover}
#greeting-letter .review-images p,#greeting-letter .review-consent{margin:5px 0 0;font-size:13px;color:#4f5c52}
#greeting-letter .review-consent{margin-top:8px;padding-top:7px;border-top:1px dashed #e0d4b8;font-size:12px}
#greeting-letter .review-total{display:flex;justify-content:space-between;align-items:baseline;border:0;padding:6px 2px 2px;font-size:14px}
#greeting-letter .review-total strong{font:400 22px/1 Georgia,serif}
#greeting-letter .estimate-note{margin:4px 0 0;font-size:11.5px;line-height:1.45;color:var(--of-mute)}

/* Кнопки */
#greeting-letter .form-nav{display:flex;gap:10px;margin-top:16px}
#greeting-letter .form-nav #form-next,#greeting-letter .form-nav #go{flex:1;width:auto}
.of-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 18px;border-radius:9px;font-family:inherit;font-size:15px;font-weight:700;line-height:1;transition:filter .15s,transform .15s,box-shadow .15s,background-color .15s}
#greeting-letter .secondary.of-btn{flex:none;background:transparent;border:1px solid #d2c4aa;color:#46564a;font-size:14px}
#greeting-letter .secondary.of-btn:hover{background:#f1e9d6}
#greeting-letter .primary.of-btn{background:linear-gradient(#bd4238,#9c2a2a);border:1px solid #edab7350;box-shadow:0 1px 0 #f4bd8b55 inset,0 6px 16px #a8372b2e}
#greeting-letter .primary.of-btn:hover:not(:disabled){filter:brightness(1.07);transform:none;box-shadow:0 1px 0 #f4bd8b55 inset,0 8px 20px #a8372b3d}
#greeting-letter .primary.of-btn:active:not(:disabled){transform:scale(.985)}
#greeting-letter .primary.of-btn:disabled{opacity:.7;cursor:not-allowed;box-shadow:none}
#greeting-letter .primary.of-btn:focus-visible,#greeting-letter .secondary.of-btn:focus-visible{outline:3px solid var(--of-focus);outline-offset:3px}
#go.is-loading{cursor:progress!important}
#go.is-loading .of-spin{display:inline-block;width:18px;height:18px;border-width:2.5px;border-color:#ffffff55;border-top-color:#fff}

/* Статус и пометка */
#greeting-letter .msg{margin:10px 0 0;min-height:0;padding:9px 12px;border-radius:9px;text-align:left;font-size:13px;line-height:1.4;background:#eef3ea;color:#2f5a42}
#greeting-letter .msg:empty{display:none}
#greeting-letter .msg.error{background:#fdecea;color:#a3271d}
#greeting-letter .demo-note{margin:10px 0 0;padding:0 26px 16px;text-align:center;font-size:11px;line-height:1.4;color:#7d6f58}
#greeting-letter form{padding-bottom:0}

/* Телефон */
@media(max-width:520px){
  #greeting-letter .card-top{margin:0 18px;padding-top:18px}
  #greeting-letter form{padding:0 18px}
  #greeting-letter .demo-note{padding:0 18px 14px}
  #greeting-letter .card-top h3{font-size:21px}
  #greeting-letter .of-input{height:48px;font-size:16px;padding-left:12px}
  #greeting-letter .of-area{height:auto;min-height:64px}
  .of-ok{top:14px}
  .of-up-zone{min-height:72px;padding:10px 12px}
  .of-up-actions{width:100%}
  .of-chip{flex:1;height:42px;font-size:14px}
  .of-btn{height:50px}
  #greeting-letter .form-nav #go{font-size:14px;padding:0 10px;white-space:nowrap}
  .of-consent input{width:24px;height:24px}
  #greeting-letter .review-edit{min-height:40px}
  #greeting-letter .review-images{gap:8px}
}
@media(prefers-reduced-motion:reduce){
  #greeting-letter *,#greeting-letter *:before{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .of-spin{animation:none!important;border-top-color:#dccdab;border-right-color:var(--of-red)}
}

/* Кому поздравление */
#greeting-letter .of-who{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px;padding:0;border:0}
#greeting-letter .of-who legend{padding:0;margin:0 0 6px;font-weight:700;color:var(--of-ink)}
#greeting-letter .of-who label{display:block;margin:0;cursor:pointer}
#greeting-letter .of-who input{position:absolute;opacity:0;pointer-events:none}
#greeting-letter .of-who span{display:block;padding:10px 8px;border:1px solid var(--of-line);border-radius:10px;background:#fffdf7;text-align:center;font-weight:600;color:var(--of-mute)}
#greeting-letter .of-who input:checked+span{border-color:var(--of-red);background:#fbeee6;color:var(--of-red)}
#greeting-letter .of-who input:focus-visible+span{outline:3px solid var(--of-focus);outline-offset:2px}