/*
  legacy.css — compat-only patch layer.
  This file is expected to be loaded LAST in the cascade.

  Structure:
  1) Legacy class compatibility
  2) ONLY-LEGACY fixes (with reason)
  3) Misc (temporary)
*/

/* ================================
   Legacy class compatibility
   ================================ */

/* Переопределяем фон всего документа — переносим фон на html, чтобы псевдоэлемент body::before
   мог находиться за контентом (если у body будет прозрачный фон) */
html {
  background-color: var(--bg, #F7F5F2) !important;
}
body {
  background-color: transparent !important;
}

/* Переопределяем фон для section-soft, если нужен светлее */
.section-soft {
  background-color: var(--surface, #F7F5F2) !important;
}

/* Растягиваем таблицу разворотов на всю доступную ширину */
.album-turns-table {
  width: 100%;
  table-layout: fixed;
}
/* (removed aggressive navbar overrides here to allow theme tokens to control appearance) */
/* NOTE: Global tokens and Bootstrap bindings were moved out of legacy.css:
  - styles/tokens/base.css
  - styles/tokens/theme.light.css
  - styles/tokens/bootstrap-bindings.css */

/* MOVED(orders): js-go-photos / js-toggle-comment moved to /styles/pages/orders.css */

/* Controls/utilities extracted to /styles/components/controls.css */



/* MOVED(orders): orders searchbar moved to /styles/pages/orders.css */

/* MOVED(orders): order tabs moved to /styles/pages/orders.css */
/* MOVED(orders): order-table highlight / twins-highlight moved to /styles/pages/orders.css */


/* (sum-chip moved to /styles/components/controls.css) */

/* Highlight preregistration entries that look like duplicates (same phone) */
.accordion-item.twins-highlight > .accordion-header .accordion-button {
  background: color-mix(in srgb, var(--bs-warning), white 92%);
  border-color: rgba(var(--bs-warning-rgb), 0.15);
}
.accordion-item.twins-highlight .badge {
  box-shadow: 0 0 0 0.15rem rgba(var(--bs-warning-rgb), 0.06);
}


/* ================================
   Типографика
   ================================ */
.h-display{
  font-family:var(--font-display, "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial);
  font-weight:800; letter-spacing:-0.02em;
}
/* Видимый маркер номера папки на странице public_orders */
.order-dir{
  color: var(--primary);
  font-weight:800;
  display:inline-block;
  padding:.15rem .5rem;
  border-radius:6px;
  background: color-mix(in srgb, var(--primary), white 92%);
  border: 1px solid color-mix(in srgb, var(--primary), white 78%);
  margin-left:.5rem;
}
/* Убираем градиентный текст — простая читаемость */
.text-gradient{ color:var(--ink); -webkit-background-clip:initial; background-clip:initial; }

/* Вторичный текст — кастомный класс для светлого текста на сером фоне */
.text-muted-custom {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 .5rem;
  color: var(--surface) !important;
}
.section-soft{
  background:var(--fx-card);
  border:1px solid var(--line);
  border-radius:var(--fx-radius);
  padding:clamp(16px,2vw,28px);
  box-shadow:none;
}
.card-2025{
  background:var(--fx-card);
  border:1px solid var(--fx-border);
  border-radius:var(--fx-radius);
  box-shadow:var(--fx-shadow);
}

.info-card{
  background:var(--fx-card);
  border:1px solid var(--line);
  border-radius:var(--fx-radius); padding:16px;
}

/* Album turns table — compact editable rows */
.album-turns-table .code-input,
.album-turns-table .name-input {
  border: none;
  border-radius: 0;
  padding: 0;
  background-color: transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.album-turns-table .code-input:focus,
.album-turns-table .name-input:focus {
  border: 1px solid var(--primary);
  background-color: var(--surface);
  outline: none;
}
.album-turns-table .name-input {
  white-space: normal;
}
.album-turns-table {
  table-layout: auto;
}

@media (max-width: 767.98px) {
  .album-turns-table th:nth-last-child(2),
  .album-turns-table td:nth-last-child(2) {
    display: none;
  }
}

.album-turns-table tbody tr:nth-child(odd):not(.table-warning) {
  background-color: var(--surface-2);
}

.album-turns-table input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 0.2rem;
  appearance: none;
  background-color: var(--surface);
  cursor: pointer;
}

.album-turns-table input[type="checkbox"]:checked {
  background-color: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M12.97 4.97a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-2.5-2.5a.75.75 0 1 1 1.06-1.06L7 9.44l4.97-4.97a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E");
  background-size: 0.65rem;
  background-position: center;
  background-repeat: no-repeat;
}

/* ================================
   Admin sidebar (moved from inline ERB into theme.css)
   Uses project tokens where possible; offcanvas override scoped.
   ================================ */
/* Layout helpers moved from application layout inline styles */
.sk-layout-wrapper { display: flex; min-height: 100vh; }
.sk-layout-main { flex: 1 1 auto; min-width: 0; }

/* Toast stack z-index centralized here */
#toastStackTR { z-index: 1100; }

/* Admin layout helpers (moved from inline styles in layouts/admin.html.erb) */
.admin-layout-wrapper { display: flex; min-height: 100vh; }
.admin-main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#toastContainer { z-index: 9999; }

/* Orders layout specific helpers (moved from admin_orders inline styles) */
.order-form span.status-danger { color: var(--err); }
.order-form span.status-ok { color: var(--ok); }
.toast-root { z-index: 1080; }

/* MOVED(orders): orders list subrules moved to /styles/pages/orders.css */

/* Maintenance overlay (moved from shared/_maintenance_banner.html.erb) */
.maintenance-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.5s ease-out; overflow: hidden; pointer-events: all;
}

body:has(.maintenance-overlay) { overflow: hidden !important; height: 100vh !important; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.maintenance-content { text-align:center; color:white; max-width:600px; padding:3rem 2rem; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,0.3); animation: slideUp 0.6s ease-out 0.2s both; }
@keyframes slideUp { from { opacity:0; transform:translateY(30px);} to { opacity:1; transform:translateY(0);} }
.maintenance-icon { font-size:5rem; margin-bottom:1.5rem; animation: rotate 3s ease-in-out infinite; }
@keyframes rotate { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-15deg); } 75% { transform: rotate(15deg); } }
.maintenance-title { font-size:2.5rem; font-weight:700; margin-bottom:1rem; color:white; text-shadow:0 2px 10px rgba(0,0,0,0.2); }
.maintenance-message { font-size:1.125rem; line-height:1.7; margin-bottom:2rem; color: rgba(255,255,255,0.95); }
.maintenance-footer { border-top:1px solid rgba(255,255,255,0.2); padding-top:1.5rem; margin-top:2rem; }
.maintenance-footer p { color: rgba(255,255,255,0.9); font-size:1rem; }
.maintenance-footer .text-muted { color: rgba(255,255,255,0.7) !important; }
.maintenance-footer a { color: #ffd700; text-decoration:none; font-weight:600; }
.maintenance-footer a:hover { color:#ffed4e; text-decoration:underline; }

@media (max-width:768px) {
  .maintenance-content { padding:2rem 1.5rem; margin:1rem; }
  .maintenance-icon { font-size:4rem; }
  .maintenance-title { font-size:1.75rem; }
  .maintenance-message { font-size:1rem; }
}

/* Orders: RAW sort panel styles (moved from view partial) */
#raw-sort-card .card-title { font-size: 1rem; font-weight: 600; color: var(--ink, #212529); margin-bottom: 1rem; }
#raw-sort-card .card-title .bi-palette { font-size: 1.25rem; }
.raw-form-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.raw-submit-btn { white-space:nowrap; }
.raw-options { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
#raw-sort-card .form-check { display:flex; align-items:center; gap:0.5rem; margin:0; }
#raw-sort-card .form-check-label { white-space:nowrap; font-size:0.875rem; }
@media (max-width:768px) { .raw-form-row { gap:10px; } .raw-options { gap:12px; } }
@media (max-width:576px) { .raw-form-row { flex-direction:column; align-items:stretch; gap:12px; } .raw-submit-btn { width:100%; justify-content:center; } .raw-options { justify-content:flex-start; gap:16px; } }

/* Orders: Retouch sort panel styles (moved from view partial) */
#retouch-sort-card .card-title { font-size: 1rem; font-weight: 600; color: var(--ink, #212529); margin-bottom: 1rem; }
#retouch-sort-card .card-title .bi-folder-check { font-size: 1.25rem; }
.retouch-form-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.retouch-submit-btn { white-space:nowrap; }
.retouch-options { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
#retouch-sort-card .form-check { display:flex; align-items:center; gap:0.5rem; margin:0; }
#retouch-sort-card .form-check-label { white-space:nowrap; font-size:0.875rem; }
@media (max-width:768px) { .retouch-form-row { gap:10px; } .retouch-options { gap:12px; } }
@media (max-width:576px) { .retouch-form-row { flex-direction:column; align-items:stretch; gap:12px; } .retouch-submit-btn { width:100%; justify-content:center; } .retouch-options { justify-content:flex-start; gap:16px; } }

/* Order list (edit_list) local styles moved from inline */
.order-comment-indicator { color:#cc8a00; font-size:1rem; margin-left:.5rem; }
.order-placeholder .accordion-button { opacity: .85; }
.order-placeholder .accordion-button::after { filter: grayscale(0.6); }
.order-turn-list { margin-top:1rem; }
.order-turn-card { border:1px solid var(--border); border-radius:14px; padding:1.25rem; background:var(--section-soft); box-shadow:0 4px 18px rgba(20,20,20,0.05); margin-bottom:1.25rem; }
.order-turn-card:last-child { margin-bottom:0; }
.order-turn-header { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.order-turn-title { font-weight:600; color:var(--ink); }
.order-turn-code { font-family:var(--font-mono, "SFMono-Regular", Consolas, monospace); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:color-mix(in srgb, var(--primary), black 40%); background:color-mix(in srgb, var(--primary), white 85%); border-radius:999px; padding:.2rem .7rem; }
.order-turn-photo-grid { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1rem; }
.order-turn-photo { width:100px; }
.order-turn-photo-btn { position:relative; display:block; width:100%; border:0; padding:0; background:transparent; cursor:pointer; }
.order-turn-photo-btn:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:12px; }
.order-turn-photo-img { width:100px; height:100px; object-fit:cover; border-radius:12px; border:1px solid color-mix(in srgb, var(--border), black 8%); box-shadow:0 6px 16px rgba(0,0,0,0.12); background:#f8f8f8; }
.order-turn-photo-name { margin-top:.4rem; font-size:.75rem; color:var(--muted); text-align:center; line-height:1.1; word-break:break-word; }
.order-turn-photo-mark { position:absolute; top:6px; right:6px; background:rgba(255,255,255,.92); border-radius:999px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.order-turn-photo-mark .bi-star-fill { color:#f5c200; font-size:.85rem; }
.order-turn-no-photos { font-size:.875rem; color:var(--muted); margin-top:1rem; }
.order-turn-comment { margin-top:1.25rem; }
.order-turn-comment-body { padding:.85rem 1rem; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.8); font-size:.875rem; color:var(--ink); }
.order-turn-comment-empty { font-size:.8125rem; color:var(--muted); }

/* New: client comment compact style */
.order-turn-comment.is-client {
  background: var(--fx-extra-bg);
  border-left: 4px solid var(--fx-extra-accent);
  border-radius: var(--fx-radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.order-turn-comment-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fx-extra-accent);
  margin-bottom: 6px;
}

.order-turn-comment-header i {
  font-size: 14px;
}

.order-turn-comment-body {
  font-size: 14px;
  line-height: 1.4;
  color: var(--bs-body-color);
}
@media (max-width: 576px){ .order-turn-photo-grid { gap:.75rem; } }
.order-photo-modal .modal-content { background:#000; border:none; border-radius:16px; position:relative; }
.order-photo-modal .modal-body { padding:0; background:#000; display:flex; justify-content:center; align-items:center; }
.order-photo-modal [data-role="modal-image"] { width:100%; height:auto; max-height:80vh; object-fit:contain; background:#000; }
.order-photo-modal .modal-footer { border:0; background:#000; color:rgba(255,255,255,.75); justify-content:flex-start; gap:1rem; }
.order-photo-modal .modal-caption { font-size:.8125rem; }
.order-photo-modal .modal-footer .btn { border-color:rgba(255,255,255,.4); color:#fff; }
.order-photo-modal .modal-footer .btn:hover { border-color:rgba(255,255,255,.6); color:#fff; }
.order-photo-modal .btn-close { position:absolute; top:12px; right:12px; filter:invert(1); opacity:.7; }
.order-photo-modal .btn-close:hover { opacity:1; }

/* Single sales page heading */
.single-sales-heading { font-weight: 600; color: var(--ink); }

/* Public orders: gating helpers and small modal utilities */
.gate-wrap { position: relative; }
.gate-locked { position: relative; }
.gate-locked [data-gated] { filter: grayscale(10%) opacity(.85); }
#gatedArea.gate-locked { pointer-events: none; }
#gatedArea.gate-unlocked { pointer-events: auto; }
/* MOVED(orders): .js-toggle-comment.has-comment moved to /styles/pages/orders.css */

/* PIN modal small helpers */
.pin-icon { font-size: 2.5rem; }
.pin-input { font-size: 2rem; letter-spacing: 0.5rem; }

/* External sort server panel styles */
#external-sort-server-card .card-title { font-size:1rem; font-weight:600; color:var(--ink, #212529); margin-bottom:1rem; }
#external-sort-server-card .card-title .bi-server { font-size:1.25rem; }
#external-sort-server-card .btn-primary { min-width:140px; }
@media (max-width:576px) { #external-sort-server-card .d-flex.align-items-center { flex-direction:column; align-items:flex-start !important; } }

/* (switch moved to /styles/components/controls.css) */



/* Global page background pattern (moved from inline page styles) */
:root {
  --pattern-opacity: 0.7; /* set by pages when needed */
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/patterns/pattern-white.png');
  background-repeat: repeat;
  background-size: 400px;
  opacity: var(--pattern-opacity, 0.07);
  pointer-events: none;
  /* place behind page content; using -1 ensures it's below positioned content that does not
     explicitly set negative z-index. Note: html has the page background so the pattern stays visible. */
  z-index: -1;
}

/* Ensure the main app wrapper sits above the pattern */
#app-wrapper {
  position: relative;
}

/* ===== Edit arrows overlay ===== */
.toast-notice{ position:fixed; right:16px; bottom:80px; background: var(--ok); color: var(--surface); padding:.6rem 1rem; border-radius:var(--fx-radius); box-shadow:0 8px 24px rgba(0,0,0,0.12); opacity:0; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease; z-index:2000; pointer-events:none; }
.toast-notice.show{ opacity:1; transform:translateY(0); }

/* Batch toast for preview saves */
.batch-toast{ position:fixed; right:16px; bottom:80px; color:var(--surface); padding:.6rem 1rem; border-radius:var(--fx-radius); box-shadow:0 8px 24px rgba(0,0,0,0.12); opacity:0; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease; z-index:2000; pointer-events:none; }
.batch-toast.visible{ opacity:1; transform:translateY(0); }
.batch-toast-success{ background: var(--ok); }
.batch-toast-error{ background: var(--err); }
.batch-toast-info{ background: var(--bs-primary); }


/* (icon-action hover + icon-sm moved to /styles/components/controls.css) */

/* ================================
   Компоненты «выбор разворотов/фото»
   ================================ */
/* Блоковые уведомления (сдержанные) */
.alert-ok{
  background:color-mix(in srgb,var(--ok),white 92%);
  border:1px solid color-mix(in srgb,var(--ok),white 70%);
  color:color-mix(in srgb,var(--ok),black 22%);
  border-radius:var(--fx-radius);
}
.alert-warn{
  background:color-mix(in srgb,var(--warn),white 94%);
  border:1px solid color-mix(in srgb,var(--warn),white 74%);
  color:color-mix(in srgb,var(--warn),black 26%);
  border-radius:var(--fx-radius);
}
.alert-err{
  background:color-mix(in srgb,var(--err),white 94%);
  border:1px solid color-mix(in srgb,var(--err),white 74%);
  color:color-mix(in srgb,var(--err),black 24%);
  border-radius:var(--fx-radius);
}


/* (statebar + brand-badge + container-narrow moved to /styles/components/controls.css) */

/* ================================
   Степпер (менее «кричащий»)
   ================================ */
.stepper{ display:flex; gap:12px; align-items:center; }
.step{
  display:flex; align-items:center; gap:8px;
  color:color-mix(in srgb,var(--muted),black 10%);
}
.step .bubble{
  width:32px; height:32px; border-radius:50%;
  border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--muted);
}
.step.active{ color:var(--ink); }
.step.active .bubble{ border-color:var(--primary); color:var(--primary); }
.step.done .bubble{ background:var(--primary); border-color:var(--primary); color:var(--surface); }

/* ================================
   Анимации (оставляем минимальные)
   ================================ */
.invalid-feedback{ font-size:.875rem; }
.tooltip .tooltip-inner{ font-size:.875rem; padding:.5rem .75rem; max-width:260px; text-align:left; }
.popover{ --bs-popover-max-width: 280px; }
:target{ animation: anchor-hi 1.2s ease-in-out 1; }
@keyframes anchor-hi{
  0%{ box-shadow:0 0 0 0 rgba(37,99,235,.00) }
  30%{ box-shadow:0 0 0 .35rem rgba(37,99,235,.20) }
  100%{ box-shadow:0 0 0 0 rgba(37,99,235,.00) }
}
.fav-bounce{ animation: fav-bounce 420ms cubic-bezier(.28,.84,.42,1.1) 1; }
@keyframes fav-bounce{
  0%{ transform: translateY(0); }
  25%{ transform: translateY(-6px); }
  50%{ transform: translateY(0); }
  75%{ transform: translateY(-3px); }
  100%{ transform: translateY(0); }
}

/* Styles moved from app/views/orders/edit.html.erb (page-specific helpers) */
.page{max-width:1300px}
.section{padding:16px 20px; background:var(--fx-card); border:1px solid var(--fx-border); border-radius:var(--fx-radius); box-shadow:var(--fx-shadow)}
.subsection{padding:12px 16px; background:var(--fx-card); border:1px solid var(--fx-border); border-radius:0; box-shadow:none}
.label-muted{font-size:.875rem; color:var(--muted)}
.form-help{font-size:.8125rem; color:var(--muted)}
.headline{font-weight:700; color:var(--ink)}
.table-compact td,.table-compact th{padding:.5rem .75rem}
.desc{background:color-mix(in srgb, var(--card), white 0%); border:1px dashed var(--border); border-radius:var(--fx-radius)}

/* ================================
  ONLY-LEGACY fixes (with reason)
  ================================ */

/* ONLY-LEGACY: spreads — turn indicators (not yet migrated) */
.turn-row-deleted{opacity:.4;text-decoration:line-through}
.prices-panel{ border-color: color-mix(in srgb, var(--primary), white 65%); }
.prices-panel .form-label{ color: var(--ink); font-weight:600; font-size: 12pt;}
.prices-panel .input-group-text{ background: color-mix(in srgb, var(--primary), white 90%); border-color: color-mix(in srgb, var(--primary), white 65%); }
/* Center helpers for indicators */
.turn-indicator{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-width:56px; }
.turn-indicator .badge{ display:inline-block; }
.turn-indicators-cell{ text-align:center; vertical-align:middle; }
.turn-hints-indicator img, .turn-hints-indicator i{ display:block; margin:0 auto; }
.hint-card .ratio{ max-width:128px; width:128px; }
.hint-card .ratio img{ width:100%; height:100%; object-fit:cover; }

/* ================================
   Герой-блок (без градиентов, просто разрыв)
   ================================ */
.hero{ color: var(--ink); padding: clamp(48px, 7vw, 88px) 0 clamp(32px, 5vw, 64px); }
.hero-bleed{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--surface);
  border-bottom:1px solid var(--line);
}

/* ================================
   Модалка галереи — режим выбора разворота
   ================================ */
/* ONLY-LEGACY: spreads — gallery select-mode buttons/layout (not yet migrated) */
#gallery.gallery--select-mode #btnFinish{ display:none !important; }
#gallery.gallery--select-mode #btnResetSelection{ display:inline-flex !important; }
#gallery.gallery--select-mode #btnFinishSelect{ display:inline-flex !important; }

#gallery.gallery--select-mode .masonry-item{ position:relative; }
#gallery.gallery--select-mode .photo-actions{
  position:absolute; left:8px; right:auto; bottom:8px; top:auto;
}
#gallery.gallery--select-mode .photo-zoom{
  position:absolute; right:8px; bottom:8px; top:auto;
}

/* MOVED(orders): filters and public orders CTA moved to /styles/pages/orders.css */

.progress-done {
    background-color: var(--fx-extra-accent);
}

/* Photo header (public order) */
.photo-header__thumb {
  width: 135px;
  height: 180px;
  border-radius: 0.75rem; /* matches rounded-3 */
  overflow: hidden;
  background-color: var(--extra-bg);
  display: inline-block;
}
.photo-header__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-header__caption {
  margin-top: 0.5rem;
  font-size: .875rem;
  color: var(--muted);
}
a {
  color: var(--bs-primary);
}
/* MOVED(orders): yadisk dropzone moved to /styles/pages/orders.css */

.action-tile {
  border-radius: var(--fx-radius-lg, 999px);
  background-color: var(--fx-surface-subtle, #fff);
  border: 1px solid var(--fx-border-soft, #e5e5e5);
  padding: 0.85rem 1rem;
  box-shadow: var(--fx-shadow-soft, 0 1px 2px rgba(15, 23, 42, 0.06));
  transition: transform 0.08s ease, box-shadow 0.08s ease,
              border-color 0.08s ease, background-color 0.08s ease;
}

.action-tile:hover {
  transform: translateY(-1px);
  background-color: var(--fx-surface-hover, #fffaf5);
  border-color: var(--bs-primary);
  box-shadow: var(--fx-shadow-md, 0 6px 18px rgba(15, 23, 42, 0.12));
}

.action-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fx-pill-bg, rgba(253, 186, 116, 0.16));
}

.action-icon i {
  font-size: 1.25rem;
  color: var(--bs-primary);
}

/* MOVED(orders): orders problem markers moved to /styles/pages/orders.css */

/* MOVED(orders): order-form utilities moved to /styles/pages/orders.css */

/* 1) meta как 2 колонки, на мобиле — в столбик */
.order-form__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--sp-3, 12px);
  flex-wrap: wrap;
}

/* 2) левая часть — компактные метрики, нормальные переносы */
.order-form__meta-left{
  display:flex;
  flex-wrap: wrap;
  gap: var(--sp-3, 12px);
  min-width: 0;
}

/* 3) правая часть — пилюли всегда рядом и не “утекают” */
.order-form__meta-right{
  display:flex;
  align-items:center;
  gap: var(--sp-2, 8px);
  flex-shrink: 0;
}

/* 4) убрать влияние старых ms-2/ms-3 у вложенных пилюль */
.order-form__meta .deadline-pill{ margin-left: 0 !important; }

/* 5) если нужно — ограничить ширину дедлайна, чтобы не распирал строку */
.order-form__meta-right .deadline-pill--neutral{ white-space: nowrap; }

/* 6) на очень узких — правая часть вниз */
@media (max-width: 575.98px){
  .order-form__meta-right{ width: 100%; justify-content: flex-start; }
}

/* MOVED(orders): photo-addon and variant styles moved to /styles/pages/orders.css */

.price-pill.is-muted {
  opacity: .85;
}

.photo-addon-body {
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 12px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.photo-addon-desc {
  font-size: 16px;
  color: #4b5563;
  line-height: 1.4;
}

.variants {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* mini-card option */
.variant {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;

  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 22px;
  padding: 14px 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  cursor: pointer;

  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.variant:hover {
  border-color: rgba(0,0,0,.16);
}

/* hide native checkbox, but keep it accessible */
.variant > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* main text */
.variant-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.variant-title {
  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;
}

.variant-sub {
  font-size: 16px;
  color: #6b7280;
  line-height: 1.25;
}

/* right side: price + switch */
.variant-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* pricebox layout */
.variant-pricebox{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  min-width:120px;
}

/* normal price pill */
.variant-price-normal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
  background:#f9fafb;
  font-weight:900;
  font-size:18px;
  white-space:nowrap;
}

/* list (optional strike) + effective */
.variant-price-list{
  color: var(--ink);
}
.variant-price-list.is-strike{
  color:#9ca3af;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(0,0,0,.25);
}

.variant-price-effective{
  color:#111827;
}

.variant-currency{
  color: currentColor;
}

/* gift chip */
.variant-chip-gift:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(224,122,63,.25);
  background: rgba(224,122,63,.10);
  color: #8a4d18;
  font-weight: 900;
  font-size: 14px;
}

.variant-gift-note:not([hidden]){
  font-size:13px;
  color:#6b7280;
}

/* When gift is visible -> hide any price pill entirely */
.variant-pricebox:has(.variant-chip-gift:not([hidden])) .variant-price-normal{
  display:none;
}

/* custom switch */
.variant-switch {
  width: 56px;
  height: 32px;
  border-radius: 999px;
  background: #e5e7eb;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  flex: 0 0 auto;
}

.variant-switch::after {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform .18s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* checked state: highlight card + move switch */
.variant:has(> input[type="checkbox"]:checked) {
  border-color: rgba(224,122,63,.55);
  box-shadow: 0 10px 24px rgba(224,122,63,.14);
  transform: translateY(-1px);
}

.variant:has(> input[type="checkbox"]:checked) .variant-switch {
  background: #e07a3f;
}

.variant:has(> input[type="checkbox"]:checked) .variant-switch::after {
  transform: translateX(24px);
}

.photo-addon-hint {
  margin-top: 2px;
  font-size: 14px;
  color: #6b7280;
}

/* mobile */
@media (max-width: 820px) {
  .photo-addon-head {
    flex-direction: column;
    gap: 10px;
  }
  .photo-addon-chips {
    flex-direction: row;
    align-items: center;
  }
  .variant {
    grid-template-columns: 1fr;
  }
  .variant-right {
    justify-content: space-between;
  }
  .variant-pricebox {
    align-items: flex-start;
  }
}

/* ================================
  Misc (temporary)
  ================================ */

/* MOVED(orders): ydp-row (Yandex dir picker) moved to /styles/pages/orders.css */

/* Misc (temporary): price/examples helpers */
.price-row{ display:flex; flex-direction:column; gap:0.5rem; }
.price-row .price-input-wrapper{ min-width:160px; }
.price-input{ width:100%; }
.examples{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
@media (min-width:768px){
  .price-row{ flex-direction:row; align-items:center; }
  .price-row .form-label{ width:45%; margin-bottom:0; }
  .price-row .price-input-wrapper{ width:55%; }
}
.example-thumb{
  height:112px; width:auto; object-fit:contain; background:var(--surface);
  border:1px solid var(--line); border-radius:10px; padding:4px;
}