/* MSP Constructor Styles - extracted from inline for browser caching */ /* Version: 3.11.18 */ #stamp-constructor { display:flex; flex-wrap:wrap; gap:20px; background:#f0f2f5; padding:20px; border-radius:8px; border:1px solid #dcdcde; font-family:sans-serif; } #stamp-constructor .left-column, #stamp-constructor .right-column { min-width:300px; } #stamp-constructor .left-column { flex:1; } #stamp-constructor .right-column { flex:2; background:#fff; padding:20px; border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.05); } #stamp-constructor h3, #stamp-constructor .msp-panel-title { margin:0 0 15px; font-size:18px; color:#1d2327; border-bottom:1px solid #dcdcde; padding-bottom:15px; } #stamp-constructor #stamp-canvas { border:1px solid #dcdcde; background:#fff; border-radius:4px; width:300px; height:300px; } #stamp-constructor .button-row { margin-top:20px; } #stamp-constructor button { background:#fff; border:1px solid #8c8f94; color:#1d2327; padding:8px 12px; border-radius:4px; cursor:pointer; margin:0 8px 8px 0; } #stamp-constructor button.icon-btn { display:inline-flex; align-items:center; gap:6px; } #stamp-constructor button.icon-btn .ico { width:14px; height:14px; display:inline-block; } #stamp-constructor #layer-list { list-style:none; padding:0; margin:20px 0 0 0; border:1px solid #dcdcde; border-radius:4px; min-height:50px; background:#fff; } #stamp-constructor #layer-list li { padding:8px 10px; border-bottom:1px solid #f0f0f1; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:8px; position:relative; transition:all 0.2s ease; } #stamp-constructor #layer-list li[draggable=true] { cursor:grab; } #stamp-constructor #layer-list li[draggable=true]:active { cursor:grabbing; } #stamp-constructor #layer-list li:hover { background:#f8f9fa; } #stamp-constructor #layer-list li.selected { background:#e6f0ff; border-left:3px solid #2563eb; font-weight:600; } #stamp-constructor #layer-list li > span { flex:1; font-size:13px; word-wrap:break-word; white-space:normal; line-height:1.4; } #stamp-constructor #layer-list li .li-actions { display:flex; align-items:center; gap:8px; } #stamp-constructor #layer-list li .more-btn { width:28px; height:28px; line-height:26px; padding:0; border:1px solid #c3c4c7; border-radius:4px; background:#f6f7f7; font-size:16px; } #stamp-constructor #layer-list li .more-btn:hover { background:#e7e7e7; } #stamp-constructor #layer-list li .layer-menu { display:none; position:absolute; right:10px; top:40px; background:#fff; border:1px solid #dcdcde; border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,.12); min-width:180px; z-index:15; overflow:hidden; } #stamp-constructor #layer-list li .layer-menu button { display:block; width:100%; text-align:left; background:#fff; border:0; border-bottom:1px solid #f0f0f1; padding:8px 12px; font-size:13px; } #stamp-constructor #layer-list li .layer-menu button:last-child { border-bottom:0; } #stamp-constructor #layer-list li .layer-menu button:hover { background:#f3f4f6; } #stamp-constructor .control-panel { display:none; } #stamp-constructor .control-row { margin-bottom:15px; } #stamp-constructor label { display:block; margin-bottom:5px; } #stamp-constructor input[type="text"], #stamp-constructor input[type="range"], #stamp-constructor input[type="number"], #stamp-constructor select { width:100%; padding:8px; box-sizing:border-box; border:1px solid #dcdcde; border-radius:4px; } #stamp-constructor .text-controls-top { display:flex; margin-bottom:15px; gap:10px; align-items:center; } #stamp-constructor .text-control-btn { background:#f0f0f0; border:1px solid #dcdcde; border-radius:4px; padding:5px 10px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } #stamp-constructor .text-control-btn.active { background:#e6f0ff; border-color:#2271b1; } #stamp-constructor #text-autofill-row select, #stamp-constructor #circular-autofill-row select { width:100%; } #stamp-constructor #text-autofill-format-row select, #stamp-constructor #circular-autofill-format-row select { width:100%; } /* Keep right-side actions aligned when some buttons are hidden */ #stamp-constructor #text-controls .text-controls-top .icon-btn { margin-left:auto; } #stamp-constructor #circular-text-controls .text-controls-top #circular-text-reverse-btn { margin-left:auto; } #stamp-constructor #order-button { background:#2271b1; color:#fff; border-color:#2271b1; padding:10px; font-weight:bold; width:100%; margin-top:20px; } #stamp-constructor .delete-btn { background:#f8f8f8; border:1px solid #dcdcde; color:#b32d2e; padding:4px 8px; font-size:12px; border-radius:3px; } /* Autosave indicator */ #msp-autosave-status { padding:8px 12px; font-size:12px; color:#059669; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:6px; display:flex; align-items:center; gap:6px; margin-bottom:12px; } #msp-autosave-status.saving { color:#2563eb; background:#eff6ff; border-color:#93c5fd; } #msp-autosave-status .icon { font-size:14px; } #msp-restore-draft-btn { background:#f59e0b; color:#fff; border:none; padding:10px 16px; border-radius:6px; cursor:pointer; font-weight:600; margin-bottom:12px; width:100%; display:flex; align-items:center; justify-content:center; gap:8px; transition:all .2s ease; } #msp-restore-draft-btn:hover { background:#d97706; transform:translateY(-1px); box-shadow:0 4px 12px rgba(245,158,11,0.3); } #msp-restore-draft-btn .icon { font-size:16px; } #template-picker { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:9999; align-items:center; justify-content:center; } #template-picker .modal { background:#fff; border-radius:8px; max-width:640px; width:92%; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.2); } #template-picker .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; max-height:60vh; overflow:auto; } #template-picker .item { border:1px solid #e5e7eb; border-radius:6px; padding:8px; text-align:center; cursor:pointer; background:#fafafa; } #template-picker .item img { max-width:100%; height:auto; display:block; margin:0 auto 8px; } #msp-template-panel { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #dcdcde; border-radius:10px; padding:12px 16px; margin:0 0 14px; box-shadow:0 1px 2px rgba(15,23,42,0.08); } #msp-template-panel .panel-title { margin:0; font-size:14px; font-weight:600; color:#1f2937; } #msp-template-panel .panel-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; } #msp-template-panel .shape-btn { border:1px solid #cbd5e1; background:#f8fafc; color:#1e293b; border-radius:999px; padding:6px 14px; font-size:13px; cursor:pointer; transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; } #msp-template-panel .shape-btn:hover { border-color:#94a3b8; color:#0f172a; transform:translateY(-1px); } #msp-template-panel .shape-btn:focus { outline:none; box-shadow:0 0 0 2px rgba(37,99,235,0.35); } #msp-template-panel .shape-btn.active { background:#2563eb; border-color:#2563eb; color:#fff; box-shadow:0 4px 12px -6px rgba(37,99,235,0.6); } #msp-template-modal { display:none; position:fixed; inset:0; padding:24px; background:rgba(15,23,42,0.45); z-index:2147483647; align-items:center; justify-content:center; pointer-events:none; } #msp-template-modal .modal-dialog { background:#fff; border-radius:14px; width:min(880px,100%); max-height:90vh; display:flex; flex-direction:column; box-shadow:0 30px 80px -40px rgba(15,23,42,0.55); pointer-events:auto; } #msp-template-modal .modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid #e2e8f0; } #msp-template-modal .modal-header h3, #msp-template-modal .modal-header .msp-panel-title { margin:0; font-size:18px; color:#0f172a; border:0; padding:0; } #msp-template-modal .modal-close { border:none; background:none; font-size:26px; line-height:1; color:#94a3b8; cursor:pointer; transition:color .2s ease, transform .2s ease; } #msp-template-modal .modal-close:hover { color:#2563eb; transform:rotate(90deg); } #msp-template-modal .modal-body { padding:18px 22px 24px; overflow:auto; } #msp-template-modal .modal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; } #msp-template-modal .modal-card { border:1px solid #e2e8f0; border-radius:10px; padding:12px; background:#f8fafc; display:flex; flex-direction:column; gap:8px; cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; } #msp-template-modal .modal-card:hover { border-color:#2563eb; box-shadow:0 10px 22px -16px rgba(37,99,235,0.55); transform:translateY(-2px); } #msp-template-modal .modal-card.selected, #msp-template-modal .modal-card.hovered { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,0.3); } #msp-template-modal .modal-card .preview { border:1px solid #e2e8f0; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; padding:10px; min-height:160px; overflow:hidden; position:relative; } #msp-template-modal .modal-card .preview canvas { width:100%; height:auto; display:block; } #msp-template-modal .modal-card .preview[data-loading]::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(37,99,235,0.1), transparent); animation:shimmer 1.5s infinite; pointer-events:none; } @keyframes shimmer { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } } #msp-template-modal .modal-card .shape { font-size:12px; font-weight:600; text-transform:uppercase; color:#2563eb; letter-spacing:0.04em; } #msp-template-modal .modal-card .title { font-size:13px; font-weight:600; color:#1e293b; } #msp-template-modal .modal-card .meta { font-size:12px; color:#64748b; } #msp-template-modal .modal-empty { text-align:center; padding:40px 10px; font-size:14px; color:#64748b; } #msp-template-modal .modal-footer { display:flex; align-items:center; justify-content:flex-end; padding:14px 22px; border-top:1px solid #e2e8f0; gap:10px; } #msp-template-modal .modal-apply-btn { background:#2563eb; color:#fff; border:none; border-radius:8px; padding:10px 24px; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s ease, transform .2s ease, box-shadow .2s ease; } #msp-template-modal .modal-apply-btn:hover:not(:disabled) { background:#1d4ed8; transform:translateY(-1px); box-shadow:0 8px 18px -10px rgba(37,99,235,0.6); } #msp-template-modal .modal-apply-btn:active:not(:disabled) { transform:translateY(0); } #msp-template-modal .modal-apply-btn:disabled { background:#cbd5e1; cursor:not-allowed; opacity:0.6; } #msp-template-modal .modal-loading { text-align:center; padding:40px 10px; font-size:14px; color:#2563eb; font-weight:600; } /* Contact modal */ #msp-contact-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:2147483647; align-items:center; justify-content:center; } #msp-contact-modal .msp-modal { background:#fff; border-radius:8px; max-width:480px; width:92%; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.2); } #msp-contact-modal h3 { margin:0 0 12px; font-size:18px; border:0; padding:0; color:#1d2327; } #msp-contact-modal .row { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; } #msp-contact-modal label { margin:0; font-size:13px; } #msp-contact-modal input[type="text"], #msp-contact-modal input[type="email"], #msp-contact-modal input[type="tel"] { width:100%; padding:8px; border:1px solid #dcdcde; border-radius:6px; } #msp-contact-modal .actions { margin-top:12px; display:flex; gap:8px; justify-content:flex-end; } #msp-contact-modal .error { color:#b32d2e; font-size:12px; min-height:16px; } /* Two-step order screen */ #msp-order-screen { display:none; position:fixed; inset:0; background:#0b102014; z-index:2147483646; overflow:auto; } #msp-order-screen .wrap { max-width:980px; margin:40px auto; padding:0 16px; } #msp-order-screen .card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.12); overflow:hidden; } #msp-order-screen .hd { background:#111827; color:#fff; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; } #msp-order-screen .hd h3, #msp-order-screen .hd h2, #msp-order-screen .hd .msp-panel-title { margin:0; font-size:16px; color:#fff; border:0; padding:0; } #msp-order-screen .bd { padding:16px; display:grid; grid-template-columns: 1.2fr 1fr; gap:18px; } #msp-order-screen .col { display:flex; flex-direction:column; gap:12px; } #msp-order-screen .section { border:1px solid #e5e7eb; border-radius:10px; padding:12px; transition:all 0.3s ease; } #msp-order-screen .section.error-highlight { border-color:#dc2626; background:#fef2f2; box-shadow:0 0 0 3px rgba(220,38,38,0.1); animation:shake 0.4s ease; } #msp-ownership-block.error-highlight { border-color:#dc2626 !important; background:#fef2f2 !important; box-shadow:0 0 0 3px rgba(220,38,38,0.1); animation:shake 0.4s ease; } @keyframes shake { 0%, 100% { transform:translateX(0); } 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } } #msp-order-screen h4, #msp-order-screen .msp-section-title { margin:0 0 10px; font-size:15px; color:#111827; font-weight:bold; } #msp-order-screen .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; max-height:220px; overflow:auto; } #msp-order-screen .item { border:1px solid #e5e7eb; border-radius:10px; padding:10px; cursor:pointer; display:flex; flex-direction:column; gap:8px; } #msp-order-screen .item.selected { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.25); } #msp-order-screen .item img { width:100%; height:84px; object-fit:contain; background:#f9fafb; border:1px dashed #e5e7eb; border-radius:8px; } #msp-order-screen .item .nm { font-size:13px; color:#111827; } #msp-order-screen .item .sub { font-size:12px; color:#6b7280; } #msp-order-screen .totals { display:flex; flex-direction:column; gap:8px; font-size:14px; color:#111827; } #msp-order-screen .row { display:flex; gap:10px; align-items:center; } #msp-order-screen input[type="text"], #msp-order-screen input[type="email"], #msp-order-screen input[type="tel"], #msp-order-screen input[type="number"] { width:100%; padding:10px 12px; border:1px solid #dcdcde; border-radius:8px; } #msp-order-screen .actions { display:flex; gap:10px; justify-content:flex-end; margin-top:10px; } #msp-order-screen .btn { background:#fff; border:1px solid #8c8f94; color:#1d2327; padding:10px 14px; border-radius:8px; cursor:pointer; } #msp-order-screen .btn.primary { background:#2563eb; color:#fff; border-color:#2563eb; } #msp-order-screen .status { min-height:18px; font-size:13px; } #msp-order-screen .status.error { color:#b32d2e; } #msp-order-screen .status.success { color:#059669; } @media (max-width:980px){ #msp-order-screen .bd { grid-template-columns:1fr; } } /* New three-column layout (desktop) */ #stamp-constructor { max-width:1320px; margin:0 auto; box-sizing:border-box; } #stamp-constructor .ctor-columns { box-sizing:border-box; } @media (min-width:640px){ #stamp-constructor .ctor-columns { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:start; width:100%; } } /* Mobile: Force full viewport width to break out of restrictive theme containers */ @media (max-width:639px){ #stamp-constructor { position: relative; width: 100vw; left: 50%; transform: translateX(-50%); max-width: 100vw !important; margin: 0 !important; padding: 10px; box-sizing: border-box; overflow-x: hidden; } #stamp-constructor .ctor-columns { width: 100%; max-width: 400px; /* Max content width on mobile */ margin: 0 auto; } #stamp-constructor .left-column, #stamp-constructor .center-column { width: 100%; max-width: 100%; margin: 0 0 10px 0; padding: 5px; box-sizing: border-box; } #stamp-constructor .right-column { display:none !important; } } #stamp-constructor .left-column, #stamp-constructor .center-column, #stamp-constructor .right-column { background:#fff; padding:14px 16px; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 1px 2px rgba(0,0,0,.04); display:flex; flex-direction:column; min-height:480px; box-sizing:border-box; } /* Center column back to flexible 1fr (no max-width) so canvas не «уезжает» под правую */ #stamp-constructor .center-column.canvas-holder { margin:0; } #stamp-constructor .left-column, #stamp-constructor .center-column, #stamp-constructor .right-column { min-width:0; } #stamp-constructor .canvas-holder { justify-content:center; align-items:flex-start; } /* Ensure center column cannot shrink below canvas width (300) + padding (2*16) + borders */ #stamp-constructor .center-column.canvas-holder { min-width:340px; position:relative; z-index:2; } #stamp-constructor .right-column { position:relative; z-index:1; } /* Липкий canvas при скролле - остается видимым */ @media (min-width:640px){ #stamp-constructor .center-column.canvas-holder { position:sticky; top:20px; align-self:flex-start; max-height:calc(100vh - 100px); } } /* ===== Fixed height layout with internal scroll for side columns ===== */ @media (min-width:640px){ /* Динамическая высота будет выставлена JS, поэтому статическую убираем */ #stamp-constructor { display:flex; flex-direction:column; } #stamp-constructor .ctor-columns { flex:1; min-height:0; } #stamp-constructor .left-column, #stamp-constructor .center-column, #stamp-constructor .right-column { height:100%; min-height:0; } /* Внутренний скролл в боковых колонках */ #stamp-constructor .left-column { overflow-y:auto !important; overflow-x:hidden; } #stamp-constructor .right-column { overflow-y:auto !important; overflow-x:hidden; } #stamp-constructor .center-column.canvas-holder { overflow:visible; } #stamp-constructor .left-column::-webkit-scrollbar, #stamp-constructor .right-column::-webkit-scrollbar { width:10px; } #stamp-constructor .left-column::-webkit-scrollbar-track, #stamp-constructor .right-column::-webkit-scrollbar-track { background:#f1f5f9; border-radius:8px; } #stamp-constructor .left-column::-webkit-scrollbar-thumb, #stamp-constructor .right-column::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:8px; } #stamp-constructor .left-column::-webkit-scrollbar-thumb:hover, #stamp-constructor .right-column::-webkit-scrollbar-thumb:hover { background:#94a3b8; } } @media (min-width:640px){ #stamp-constructor .canvas-holder { justify-content:center; align-items:flex-start; } #stamp-constructor .canvas-holder canvas { margin:0 auto; } } #stamp-constructor .right-column { position:relative; } #stamp-constructor .right-column:before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:10px; } #stamp-constructor .left-column.panel-scroll, #stamp-constructor .right-column.panel-scroll { overflow-y:auto; overflow-x:hidden; } #stamp-constructor .center-column.canvas-holder { overflow:visible; } /* Fixed height layout and top-aligned canvas (desktop) */ @media (min-width:640px){ #stamp-constructor .ctor-columns { height:auto; } #stamp-constructor .left-column, #stamp-constructor .center-column, #stamp-constructor .right-column { min-height:520px; } #stamp-constructor .center-column.canvas-holder { justify-content:flex-start; align-items:flex-start; } #stamp-constructor .center-column.canvas-holder canvas { margin-top:0; } } /* Ensure canvas keeps its 1:1 pixel size so круг не становится овалом */ #stamp-constructor .canvas-holder canvas { display:block; margin:0 auto; max-width:none; width:300px; height:300px; } #stamp-constructor .panel-scroll { overflow-y:auto; } #stamp-constructor .panel-scroll::-webkit-scrollbar { width:10px; } #stamp-constructor .panel-scroll::-webkit-scrollbar-track { background:#f1f5f9; border-radius:8px; } #stamp-constructor .panel-scroll::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:8px; } #stamp-constructor .panel-scroll::-webkit-scrollbar-thumb:hover { background:#94a3b8; } /* Autofill bar desktop */ #msp-autofill-bar { display:flex; flex-direction:column; gap:6px; margin:0 0 14px; padding:12px 14px; border:1px solid #e2e8f0; background:#f8fafc; border-radius:10px; } #msp-autofill-bar .inn-row { display:flex; gap:10px; align-items:center; } #msp-autofill-bar input { flex:1; padding:8px 10px; border:1px solid #d1d5db; border-radius:6px; } #msp-autofill-bar button { padding:8px 14px; } #msp-autofill-bar .inn-heading { font-size:13px; font-weight:600; color:#1e293b; } #msp-autofill-bar .inn-status { font-size:12px; min-height:16px; color:#475569; } /* Ensure internal lists scroll */ #stamp-constructor ul#layer-list { flex:1; overflow-y:auto; margin:8px 0 0; border:1px solid #e2e8f0; padding:6px 8px; border-radius:8px; background:#f9fafb; max-height:400px; } /* Скроллбар для списка слоев */ #stamp-constructor ul#layer-list::-webkit-scrollbar { width:8px; } #stamp-constructor ul#layer-list::-webkit-scrollbar-track { background:#f1f5f9; border-radius:8px; } #stamp-constructor ul#layer-list::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:8px; } #stamp-constructor ul#layer-list::-webkit-scrollbar-thumb:hover { background:#94a3b8; } #stamp-constructor ul#layer-list li { border:1px solid #e5e7eb; background:#fff; border-radius:6px; padding:6px 8px; margin:0 0 6px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:6px; transition:opacity 0.2s ease, border-color 0.2s ease; } #stamp-constructor ul#layer-list li.selected { border-color:#2563eb; box-shadow:0 0 0 1px #2563eb inset; } #stamp-constructor ul#layer-list li[draggable=true] { cursor:grab; } #stamp-constructor ul#layer-list li[draggable=true]:active { cursor:grabbing; } #stamp-constructor ul#layer-list li[draggable=true]:hover { background:#f8f9fa; } #stamp-constructor ul#layer-list li .li-actions { display:flex; gap:4px; } /* Settings panels stretch inside right column */ #stamp-constructor .right-column h3, #stamp-constructor .right-column .msp-panel-title { margin-top:0; } #stamp-constructor .right-column .control-panel { border:1px solid #e2e8f0; padding:10px 12px; border-radius:8px; background:#f9fafb; margin-bottom:12px; } /* ==================== DESKTOP ONLY СТИЛИ (по умолчанию) ==================== */ /* Скрываем мобильные элементы на desktop */ #msp-mobile-editing-note { display:none; } #msp-inn-panel-inline { display:none; } /* ==================== МОБИЛЬНАЯ ВЕРСИЯ (только для телефонов) ==================== */ @media (max-width:639px){ /* Базовая структура для мобильных */ #stamp-constructor .ctor-columns { display:block; } /* Скрываем desktop панели на мобильных */ #msp-autofill-bar { display:none !important; } /* Показываем мобильную панель автозаполнения */ #msp-inn-panel-inline { display:block !important; } /* Мобильные утилиты */ .msp-inn-mobile-sticky { position:sticky; top:8px; z-index:40; } #msp-inn-panel-inline .inn-row { flex-wrap:nowrap; } /* ============ УЛУЧШЕННАЯ МОБИЛЬНАЯ ВЕРСИЯ (только фронтенд) ============ */ /* Делаем сам конструктор flex-контейнером */ #stamp-constructor.msp-front { display:flex !important; flex-direction:column !important; } /* Скрываем desktop элементы и редактирование */ #stamp-constructor.msp-front #msp-autofill-bar, #stamp-constructor.msp-front #msp-button-row, #stamp-constructor.msp-front .msp-panel-title + ul#layer-list, #stamp-constructor.msp-front .msp-panel-title:has(+ ul#layer-list), #stamp-constructor.msp-front h3 + ul#layer-list, #stamp-constructor.msp-front h3:has(+ ul#layer-list), #stamp-constructor.msp-front #layer-list, #stamp-constructor.msp-front .right-column { display:none !important; } /* 1. Предупреждение - самое первое (теперь прямой ребенок #stamp-constructor) */ #stamp-constructor.msp-front > #msp-mobile-editing-note { display:block !important; order:1 !important; margin:0 0 12px !important; animation:fadeInScale 0.3s ease-out; } /* 2. Селектор шаблона - второй (прямой ребенок #stamp-constructor) */ #stamp-constructor.msp-front > #msp-template-selector { order:2 !important; margin:0 0 12px !important; padding:14px !important; background:#ffffff !important; border:1px solid #e5e7eb !important; border-radius:12px !important; box-shadow:0 1px 3px rgba(0,0,0,0.08) !important; } #stamp-constructor.msp-front #msp-template-selector label { font-size:14px !important; font-weight:600 !important; color:#0f172a !important; margin-bottom:8px !important; display:flex !important; align-items:center !important; gap:8px !important; } #stamp-constructor.msp-front #msp-template-selector label:before { content:"📋"; font-size:18px; } #stamp-constructor.msp-front #msp-template-select { padding:11px 12px !important; font-size:14px !important; border:1px solid #cbd5e1 !important; border-radius:8px !important; background:#ffffff !important; color:#0f172a !important; } /* 3. .ctor-columns становится третьим */ #stamp-constructor.msp-front > .ctor-columns { display:flex !important; flex-direction:column !important; order:3 !important; gap:0 !important; } /* Left column внутри ctor-columns */ #stamp-constructor.msp-front .left-column { padding:0 !important; display:flex !important; flex-direction:column !important; gap:12px !important; width:100% !important; order:1 !important; min-height:0 !important; border:none !important; background:transparent !important; box-shadow:none !important; } /* Center column внутри ctor-columns */ #stamp-constructor.msp-front .center-column { padding:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:12px !important; width:100% !important; order:2 !important; } /* 3a. Панель автозаполнения (внутри left-column) */ #stamp-constructor.msp-front #msp-inn-panel-inline { order:1 !important; margin:0 0 12px !important; background:#ffffff !important; border:1px solid #e5e7eb !important; box-shadow:0 1px 3px rgba(0,0,0,0.08) !important; } /* 3b. Кнопка заказа */ #stamp-constructor.msp-front #order-button { order:2 !important; width:100% !important; margin:0 0 12px !important; padding:14px 20px !important; font-size:16px !important; font-weight:600 !important; background:linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important; color:#ffffff !important; border:none !important; border-radius:12px !important; box-shadow:0 4px 12px rgba(37,99,235,0.3) !important; cursor:pointer !important; transition:all 0.2s ease !important; } /* Скрываем только текстовый статус под кнопкой, форму заказа оставляем доступной */ #stamp-constructor.msp-front #order-status { display:none !important; } /* Остальные элементы left-column вниз */ #stamp-constructor.msp-front .left-column > *:not(#msp-inn-panel-inline):not(#order-button):not(#order-status):not(#msp-order-screen) { order:10 !important; } #stamp-constructor.msp-front #order-button:hover { transform:translateY(-2px) !important; box-shadow:0 6px 16px rgba(37,99,235,0.4) !important; } #stamp-constructor.msp-front #order-button:active { transform:translateY(0) !important; } /* 3c. Canvas внутри center-column */ #stamp-constructor.msp-front .canvas-holder { order:1 !important; margin:0 auto 0 auto !important; display:block !important; width:100% !important; max-width:100% !important; padding:16px !important; background:#ffffff !important; border-radius:12px !important; box-shadow:0 2px 8px rgba(0,0,0,0.08) !important; border:1px solid #e5e7eb !important; box-sizing:border-box !important; } #stamp-constructor.msp-front canvas#stamp-canvas { display:block !important; margin:0 auto !important; max-width:100% !important; height:auto !important; } /* Скрываем desktop панели на мобильном фронтенде */ #stamp-constructor.msp-front #msp-template-panel, #stamp-constructor.msp-front #msp-autofill-bar { display:none !important; } /* Анимация появления */ @keyframes fadeInScale { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } } } /* INN panel - общие стили для обеих версий */ #msp-inn-panel, #msp-inn-panel-inline { margin: 12px 0 8px; padding: 12px; border:1px solid #e5e7eb; border-radius:6px; background:#fafafa; } #msp-inn-panel h3, #msp-inn-panel-inline h3 { margin:0 0 8px; border:0; padding:0; } /* SEO heading — visually matches the context but uses proper H2 tag */ .msp-seo-heading { font-size:22px; font-weight:700; color:#1e293b; margin:0 0 18px; line-height:1.3; } #msp-order-screen .hd .msp-seo-heading { font-size:16px; color:#fff; margin:0; font-weight:600; } #msp-inn-panel .inn-row, #msp-inn-panel-inline .inn-row { display:flex; gap:8px; align-items:center; flex-wrap:nowrap; } #msp-inn-panel .inn-row input, #msp-inn-panel-inline .inn-row input { flex:1; min-width:0; } #msp-inn-panel .inn-row button, #msp-inn-panel-inline .inn-row button { white-space:nowrap; flex:0 0 auto; } #msp-inn-status { margin-top:6px; font-size:12px; color:#6b7280; min-height:16px; }