/* ============================================================================
   PRODUCT DETAIL · ORDER FORM (04-order-form.css — ПОЛНАЯ ЗАМЕНА, greenfield)
   ----------------------------------------------------------------------------
   3 карточки: ВАШ ЗАКАЗ / ПРОМОКОД / ИТОГО. Язык корзины. Ноль !important.
   Размечено под order-form.php (3-card). Сохранены ВСЕ состояния:
   скелетон, купон show/hide, applied-coupon, no-plans, no-fields, OOS, гость.
   Все хук-классы/ID не тронуты (orderQuantity, couponToggle, btnSubmitOrder…).
   ============================================================================ */

.product-order-form{
  --cr-ink:#1e293b;--cr-ink2:#475569;--cr-muted:#64748b;--cr-light:#94a3b8;
  --cr-line:#eef1f5;--cr-line2:#e6eaf0;--cr-soft:#f4f6f9;
  --cr-acc:#8ff451;--cr-acc-deep:#16a34a;--cr-acc-tint:#eafcdd;
  --cr-red:#ff3b3b;--cr-r:18px;--cr-r-md:13px;--cr-r-sm:10px;
  --cr-shadow:0 1px 2px rgba(15,23,42,.05),0 12px 28px rgba(15,23,42,.045);
  display:flex;flex-direction:column;gap:14px;
}
.product-order-form-hook{display:contents}
.product-order-section{position:sticky;top:18px}

/* ── карточка ──────────────────────────────────────────────────────────── */
.product-order-form .order-form-card{
  background:#fff;border:0;border-radius:var(--cr-r);box-shadow:var(--cr-shadow);
  padding:0;display:block;overflow:hidden;
}
.product-order-form .order-card-body{padding:18px;display:flex;flex-direction:column;gap:16px}

/* заголовок карточки */
.product-order-form .order-form-heading{
  display:flex;align-items:center;gap:9px;padding:16px 18px 13px;font-size:13px;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;color:var(--cr-light);border-bottom:1px solid var(--cr-line);margin:0;
}
.product-order-form .order-form-heading>span:first-child{display:inline-flex;align-items:center;gap:9px}
.product-order-form .order-form-heading i{color:var(--cr-acc-deep)}
.product-order-form .order-from-price{margin-left:auto;display:flex;align-items:baseline;gap:6px;text-transform:none;letter-spacing:0}
.product-order-form .order-from-price>span{font-size:11px;font-weight:600;color:var(--cr-muted)}
.product-order-form .order-from-price b{font-size:18px;font-weight:800;color:var(--cr-ink);letter-spacing:-.01em}

/* ── группы ────────────────────────────────────────────────────────────── */
.product-order-form .order-form-group{display:flex;flex-direction:column;gap:9px}
.product-order-form .order-form-group-quantity{flex-direction:row;align-items:center;justify-content:space-between;gap:14px}
.product-order-form .order-form-group label{font-size:12px;font-weight:700;color:var(--cr-ink2);display:inline-flex;align-items:center;gap:7px;margin:0}
.product-order-form .order-form-group label i{color:var(--cr-acc-deep);font-size:12px}

/* количество — мягкая пилюля */
.product-order-form .quantity-selector{display:flex;align-items:center;background:var(--cr-soft);border:0;border-radius:var(--cr-r-md);overflow:hidden;padding:4px;width:auto;max-width:none;flex-shrink:0}
.product-order-form .qty-btn{width:40px;min-width:40px;height:40px;min-height:40px;border:0;border-radius:10px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--cr-ink2);transition:background-color .15s,color .15s;padding:0}
.product-order-form .qty-btn:hover{background:#fff;color:var(--cr-acc-deep);box-shadow:0 1px 2px rgba(15,23,42,.06)}
.product-order-form .qty-btn i{font-size:13px;pointer-events:none}
.product-order-form .qty-input{flex:none;width:52px;min-width:0;height:auto;min-height:0;border:0;background:transparent;text-align:center;font-size:17px;font-weight:800;color:var(--cr-ink);appearance:textfield;-moz-appearance:textfield;padding:0;margin:0}
.product-order-form .qty-input:focus{outline:none;box-shadow:none}
/* превышение лимита склада — 1:1 как в корзине (cart-redesign): is-error + is-shaking */
.product-order-form .quantity-selector.is-error{box-shadow:inset 0 0 0 1.5px var(--cr-red)}
.product-order-form .quantity-selector.is-shaking{animation:cr-shake 280ms linear}
@keyframes cr-shake{
  0%     {transform:translateX(0);   animation-timing-function:cubic-bezier(.22,1,.36,1)}
  28.57% {transform:translateX(6px); animation-timing-function:cubic-bezier(.22,1,.36,1)}
  57.14% {transform:translateX(-6px);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  78.57% {transform:translateX(4px); animation-timing-function:cubic-bezier(.22,1,.36,1)}
  100%   {transform:translateX(0)}
}
.product-order-form .qty-input::-webkit-outer-spin-button,.product-order-form .qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* поля заказа */
.product-order-form .order-fields-container{display:flex;flex-direction:column;gap:10px}
.product-order-form .order-field{width:100%}
.product-order-form .order-input{width:100%;height:50px;border:0;background:var(--cr-soft);border-radius:var(--cr-r-md);padding:0 16px;font-size:14px;font-weight:600;color:var(--cr-ink);transition:box-shadow .15s}
.product-order-form textarea.order-input{height:auto;padding:13px 16px;min-height:80px;resize:vertical}
.product-order-form .order-input:focus{outline:none;box-shadow:0 0 0 2px rgba(140,255,63,.45)}
.product-order-form .order-input::placeholder{color:var(--cr-light);font-weight:500}
.product-order-form .no-fields-message{font-size:13px;color:var(--cr-muted);background:var(--cr-soft);border-radius:var(--cr-r-md);padding:13px;text-align:center;font-style:normal}

/* скелетон загрузки */
.product-order-form .order-fields-skeleton{display:flex;flex-direction:column;gap:10px}
.product-order-form .skeleton-field{width:100%}
.product-order-form .skeleton-input{height:50px;border-radius:var(--cr-r-md);background:linear-gradient(90deg,#f0f2f5 25%,#e7eaef 50%,#f0f2f5 75%);background-size:200% 100%}
.product-order-form .skeleton-input.shimmer{animation:ofShimmer 1.5s infinite ease-in-out}
@keyframes ofShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── промокод (отдельная карточка) ───────────────────────────────────── */
.product-order-form .order-coupon-section{border:0;border-radius:var(--cr-r);overflow:hidden;width:100%;box-sizing:border-box}
/* no hover background on the toggle (the grey hover was unwanted); only the arrow reacts */
.product-order-form .coupon-toggle{display:flex;align-items:center;gap:9px;padding:16px 18px;background:transparent;cursor:pointer;user-select:none}
.product-order-form .coupon-toggle i:first-child{color:var(--cr-acc-deep);font-size:15px}
.product-order-form .coupon-toggle span{flex:1;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--cr-light)}
.product-order-form .coupon-toggle-arrow{font-size:12px;color:var(--cr-light);transition:transform .2s cubic-bezier(.22,1,.36,1)}
.product-order-form .coupon-toggle.active .coupon-toggle-arrow{transform:rotate(180deg)}
/* smoother open: realistic max-height (no 400px reserve that caused the jerky reveal) + soft easing */
.product-order-form .order-coupon-section .coupon-form-wrapper{max-height:0;opacity:0;overflow:hidden;padding:0 18px;background:#fff;box-sizing:border-box;transition:max-height .3s cubic-bezier(.22,1,.36,1),opacity .22s ease,padding .3s cubic-bezier(.22,1,.36,1)}
.product-order-form .order-coupon-section .coupon-form-wrapper.show{max-height:220px;opacity:1;padding:16px 18px;border-top:1px solid var(--cr-line)}
.product-order-form .coupon-input-group{display:flex;gap:8px;align-items:stretch;width:100%}
.product-order-form .coupon-input{flex:1;min-width:0;height:48px;padding:0 14px;border:0;background:var(--cr-soft);border-radius:var(--cr-r-md);font-size:14px;font-weight:600;color:var(--cr-ink);transition:box-shadow .15s;text-transform:uppercase}
.product-order-form .coupon-input:focus{outline:none;box-shadow:0 0 0 2px rgba(140,255,63,.45)}
.product-order-form .coupon-input::placeholder{text-transform:none;color:var(--cr-light);font-weight:500}
.product-order-form .btn-apply-coupon{flex-shrink:0;padding:0 18px;border:0;border-radius:var(--cr-r-md);font-size:14px;font-weight:700;color:#fff;background:var(--cr-ink);cursor:pointer;transition:background-color .15s;white-space:nowrap}
.product-order-form .btn-apply-coupon:hover{background:#0f172a}
.product-order-form .btn-apply-coupon:disabled{opacity:.6;cursor:not-allowed}
.product-order-form .coupon-message{margin-top:8px;font-size:12.5px;min-height:1.2em;font-weight:700}
.product-order-form .coupon-message.success{color:var(--cr-acc-deep)}
.product-order-form .coupon-message.error{color:var(--cr-red)}
.product-order-form .applied-coupon{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;margin-top:12px;background:var(--cr-acc-tint);border:0;border-radius:var(--cr-r-md)}
.product-order-form .applied-coupon-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.product-order-form .applied-coupon-info i{color:var(--cr-acc-deep);font-size:15px;flex-shrink:0}
.product-order-form .applied-coupon-code{font-weight:800;color:var(--cr-acc-deep);font-size:13.5px;text-transform:uppercase}
.product-order-form .applied-coupon-desc{font-size:12.5px;color:var(--cr-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-order-form .btn-remove-coupon{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:rgba(255,255,255,.7);color:var(--cr-acc-deep);cursor:pointer;transition:.15s;flex-shrink:0}
.product-order-form .btn-remove-coupon:hover{background:#fff;color:var(--cr-red)}

/* ── сводка цены ──────────────────────────────────────────────────────── */
.product-order-form .order-price-summary{display:flex;flex-direction:column;gap:0;padding:0;background:transparent;border-radius:0}
.product-order-form .price-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;font-size:14px;color:var(--cr-ink2)}
.product-order-form .price-row .price-value{font-weight:700;color:var(--cr-ink)}
.product-order-form .price-row .discount-label{display:flex;align-items:center;gap:7px;font-weight:600}
/* персональная скидка (amber) */
.product-order-form .price-row.member-discount-row .discount-label.member-discount-label,
.product-order-form .price-row.member-discount-row .discount-label.member-discount-label i{color:#d97706}
.product-order-form .price-row.member-discount-row .price-value.discount{color:#d97706}
/* flash (red) */
.product-order-form .price-row.flash-sale-row .discount-label.flash-sale-label,
.product-order-form .price-row.flash-sale-row .discount-label.flash-sale-label i{color:#dc2626}
.product-order-form .price-row.flash-sale-row .price-value.discount{color:#dc2626}
/* скидка товара (green) */
.product-order-form .price-row.sale-row .discount-label.sale-label,
.product-order-form .price-row.sale-row .discount-label.sale-label i{color:#0369a1}
.product-order-form .price-row.sale-row .price-value.discount{color:#0369a1}
/* промокод (green) */
.product-order-form .price-row.coupon-discount-row .discount-label.coupon-label,
.product-order-form .price-row.coupon-discount-row .discount-label.coupon-label i{color:var(--cr-acc-deep)}
.product-order-form .price-row.coupon-discount-row .price-value.coupon-discount{color:var(--cr-acc-deep);font-weight:700}
/* итог */
.product-order-form .price-row.total-row{padding-top:12px;margin-top:6px;border-top:2px dashed var(--cr-line2);font-size:16px;font-weight:800;color:var(--cr-ink)}
.product-order-form .price-row.total-row .price-value.total{font-size:24px;font-weight:800;color:var(--cr-ink);letter-spacing:-.02em}

/* наличие */
.product-order-form .order-stock-info{display:flex;align-items:center;gap:9px;padding:0;background:transparent;font-size:13px;color:var(--cr-acc-deep);font-weight:700}
.product-order-form .order-stock-info i{color:var(--cr-acc-deep)}
.product-order-form .order-stock-info strong{font-weight:800}

/* ── кнопки — в столбик, обе на всю ширину ───────────────────────────── */
.product-order-form .order-buttons-row{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.product-order-form .btn-order{width:100%;height:54px;padding:0;border:0;border-radius:var(--cr-r-md);font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:transform .15s,background-color .15s;background:var(--cr-acc);color:#0c1c03;text-decoration:none;box-shadow:0 8px 18px rgba(143,244,81,.32)}
.product-order-form .btn-order:hover{background:#a1f86a;color:#0c1c03;transform:translateY(-1px)}
.product-order-form .btn-order:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed;transform:none}
.product-order-form .btn-order.btn-login-required{background:var(--cr-acc);color:#0c1c03}
.product-order-form .btn-order.btn-login-required:hover{background:#a1f86a}
.product-order-form .btn-add-cart{width:100%;height:48px;flex-shrink:0;padding:0;border:0;box-shadow:inset 0 0 0 1px var(--cr-line2);border-radius:var(--cr-r-md);font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:background-color .15s,color .15s;background:#fff;color:var(--cr-ink2)}
.product-order-form .btn-add-cart:hover{background:var(--cr-soft);color:var(--cr-ink)}
.product-order-form .btn-add-cart:disabled{opacity:.5;cursor:not-allowed}

/* футер безопасности */
.product-order-form .order-safe{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:600;color:var(--cr-muted)}
.product-order-form .order-safe i{color:var(--cr-acc-deep)}

/* ── состояние «нет в наличии / нет планов» ─────────────────────────── */
.product-order-form .order-unavailable{display:grid;justify-items:center;gap:7px;text-align:center;padding:6px 4px 2px}
.product-order-form .order-unavailable-head{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:800;color:var(--cr-ink)}
.product-order-form .order-unavailable-head i{color:var(--cr-muted)}
.product-order-form .order-unavailable-sub{margin:0;font-size:12.5px;color:var(--cr-muted);line-height:1.5;max-width:34ch}
.product-order-form .btn-order-notify{margin-top:8px;width:100%;height:50px;border:1.5px solid var(--cr-acc-deep);border-radius:var(--cr-r-md);background:var(--cr-acc-tint);color:var(--cr-acc-deep);font-family:inherit;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;transition:background-color .15s,transform .15s}
.product-order-form .btn-order-notify:hover{background:#dff7c8;transform:translateY(-1px)}
.product-order-form .btn-order-notify.is-subscribed{background:var(--cr-acc);color:#0c1c03;border-color:var(--cr-acc)}

/* ── нет планов ──────────────────────────────────────────────────────── */
.no-plans-message{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;background:#fff;border-radius:var(--cr-r,18px);text-align:center;border:1px dashed #cbd5e1;box-shadow:0 1px 2px rgba(15,23,42,.05),0 12px 28px rgba(15,23,42,.045)}
.no-plans-message i{font-size:3rem;color:#d1d5db;margin-bottom:1rem}
.no-plans-message p{font-size:1rem;color:#64748b;margin:0}

/* dark add-cart (как в оригинале) */
[data-theme="dark"] .product-order-form .btn-add-cart{background:#374151;box-shadow:inset 0 0 0 1px #ffffff;color:#fff}
[data-theme="dark"] .product-order-form .btn-add-cart:hover{background:#4b5563;color:#fff}