988 lines
20 KiB
CSS
988 lines
20 KiB
CSS
/* Shared step styles */
|
|
.stepSection {
|
|
animation: fadeIn 0.2s ease-out;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.stepTitle {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: var(--primary);
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
.stepDesc {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-muted);
|
|
margin: -0.5rem 0 1rem;
|
|
}
|
|
.stepDescExtra {
|
|
display: block;
|
|
margin-top: 0.4rem;
|
|
font-size: 0.78rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
/* Card toggle (installation type, door type) */
|
|
.cardToggle {
|
|
display: flex;
|
|
gap: 0.8rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.cardToggleItem {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.15rem;
|
|
min-height: 5.85rem;
|
|
padding: 0.9rem 1rem;
|
|
border: 2px solid var(--border);
|
|
border-radius: 10px;
|
|
background: var(--bg-card);
|
|
cursor: pointer;
|
|
text-align: center;
|
|
transition: all 0.15s;
|
|
}
|
|
.cardToggleItem:hover { border-color: var(--text-muted); }
|
|
.cardToggleActive {
|
|
border-color: var(--action);
|
|
background: color-mix(in srgb, var(--action) 6%, var(--bg-card));
|
|
}
|
|
.cardToggleIcon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-muted);
|
|
line-height: 1;
|
|
}
|
|
.cardToggleIconSvg {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
stroke: currentColor;
|
|
stroke-width: 1.7;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
.cardToggleLabel {
|
|
display: block;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
line-height: 1.25;
|
|
}
|
|
.cardToggleHint {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
margin-top: 0.12rem;
|
|
line-height: 1.3;
|
|
}
|
|
.cardToggleActive .cardToggleIcon {
|
|
color: var(--action);
|
|
}
|
|
|
|
/* Dimension sliders */
|
|
.dimGrid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
.dimField {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
.dimLabel {
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: var(--text-muted);
|
|
}
|
|
.dimSliderRow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
.dimSlider {
|
|
flex: 1;
|
|
accent-color: var(--action);
|
|
height: 6px;
|
|
}
|
|
.dimValue {
|
|
min-width: 4.5rem;
|
|
padding: 0.35rem 0.5rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 5px;
|
|
font-size: 0.8125rem;
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.dimUnit {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Column count row */
|
|
.colCountRow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.colCountLabel {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
}
|
|
.colCountBtns {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
align-items: center;
|
|
}
|
|
.colCountBtn {
|
|
min-width: 2rem;
|
|
height: 2rem;
|
|
padding: 0 0.55rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--bg-card);
|
|
color: var(--text);
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.colCountBtn:hover { border-color: var(--action); }
|
|
.colCountActive {
|
|
background: var(--action);
|
|
border-color: var(--action);
|
|
color: #fff;
|
|
}
|
|
|
|
.optimizeBtn {
|
|
padding: 0.4rem 0.75rem;
|
|
border: 1px solid var(--action);
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--action);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
margin-left: 0.35rem;
|
|
transition: all 0.15s;
|
|
}
|
|
.optimizeBtn:hover { background: var(--action); color: #fff; }
|
|
.optimizeBtn:disabled { opacity: 0.5; cursor: default; }
|
|
|
|
.aiMsg {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
padding: 0.6rem 0.75rem;
|
|
background: color-mix(in srgb, var(--action) 8%, var(--bg));
|
|
border-radius: 6px;
|
|
font-size: 0.8125rem;
|
|
color: var(--text);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.aiBadge {
|
|
display: inline-block;
|
|
background: var(--action);
|
|
color: #fff;
|
|
font-size: 0.6rem;
|
|
font-weight: 700;
|
|
padding: 0.15rem 0.35rem;
|
|
border-radius: 3px;
|
|
flex-shrink: 0;
|
|
margin-top: 0.1rem;
|
|
}
|
|
.aiDismiss {
|
|
margin-left: auto;
|
|
background: none;
|
|
border: none;
|
|
font-size: 1rem;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
padding: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Column strip (horizontal cards mirroring 3D) */
|
|
.columnStripLegend {
|
|
font-size: 0.72rem;
|
|
color: var(--text-muted);
|
|
margin: 0 0 0.45rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.columnStrip {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(4.85rem, 1fr));
|
|
gap: 0.4rem;
|
|
margin-bottom: 0.75rem;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Many columns: allow horizontal scroll instead of squashing */
|
|
@media (max-width: 520px) {
|
|
.columnStrip {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
padding-bottom: 0.35rem;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.colCard {
|
|
flex: 0 0 auto;
|
|
min-width: 5.25rem;
|
|
}
|
|
}
|
|
|
|
.colCard {
|
|
flex-shrink: 0;
|
|
min-width: 0;
|
|
width: 100%;
|
|
padding: 0.45rem 0.45rem 0.5rem;
|
|
border: 2px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--bg-card);
|
|
cursor: grab;
|
|
text-align: center;
|
|
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, opacity 0.15s;
|
|
position: relative;
|
|
}
|
|
.colCard:active { cursor: grabbing; }
|
|
.colCard:hover { border-color: var(--text-muted); }
|
|
.colCardActive { border-color: var(--action); background: color-mix(in srgb, var(--action) 6%, var(--bg-card)); }
|
|
.colCardLocked { opacity: 0.7; }
|
|
.colCardDragging {
|
|
opacity: 0.55;
|
|
cursor: grabbing;
|
|
}
|
|
.colCardDropTarget {
|
|
border-color: var(--action);
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--action) 35%, transparent);
|
|
background: color-mix(in srgb, var(--action) 10%, var(--bg-card));
|
|
}
|
|
.colCardIndex {
|
|
display: block;
|
|
font-size: 0.65rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.02em;
|
|
color: var(--action);
|
|
line-height: 1.15;
|
|
margin-bottom: 0.2rem;
|
|
user-select: none;
|
|
}
|
|
|
|
.colDragHint {
|
|
display: block;
|
|
font-size: 0.55rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.06em;
|
|
color: var(--text-muted);
|
|
line-height: 1;
|
|
margin-bottom: 0.15rem;
|
|
opacity: 0.75;
|
|
user-select: none;
|
|
}
|
|
.colCardIcon { font-size: 1.2rem; display: block; }
|
|
.colCardType { font-size: 0.6875rem; font-weight: 600; color: var(--text); margin-top: 0.15rem; }
|
|
.colCardWidth { font-size: 0.625rem; color: var(--text-muted); }
|
|
.colLockIcon {
|
|
position: absolute;
|
|
top: 0.2rem;
|
|
right: 0.25rem;
|
|
font-size: 0.6rem;
|
|
}
|
|
|
|
/* Column detail tray (expanded below strip) */
|
|
.colDetail {
|
|
padding: 1rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--bg-card);
|
|
margin-bottom: 0.75rem;
|
|
animation: fadeIn 0.15s ease-out;
|
|
}
|
|
.colDetailHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.colDetailTitle {
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
.lockBtn {
|
|
background: none;
|
|
border: 1px solid var(--border);
|
|
border-radius: 5px;
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
color: var(--text-muted);
|
|
}
|
|
.lockBtn:hover { border-color: var(--text); }
|
|
.isLocked { background: var(--bg); }
|
|
|
|
/* Type selector tiles */
|
|
.typeTiles {
|
|
display: flex;
|
|
gap: 0.35rem;
|
|
margin-bottom: 0.75rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.typeTile {
|
|
padding: 0.4rem 0.7rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--bg);
|
|
cursor: pointer;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
transition: all 0.15s;
|
|
}
|
|
.typeTile:hover { border-color: var(--action); }
|
|
.typeTileActive {
|
|
border-color: var(--action);
|
|
background: color-mix(in srgb, var(--action) 10%, var(--bg));
|
|
color: var(--action);
|
|
}
|
|
|
|
/* Counter rows */
|
|
.detailRow {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.35rem 0;
|
|
}
|
|
.detailLabel {
|
|
font-size: 0.8125rem;
|
|
color: var(--text);
|
|
}
|
|
.counter {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
}
|
|
.counterBtn {
|
|
width: 1.6rem;
|
|
height: 1.6rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid var(--border);
|
|
border-radius: 5px;
|
|
background: var(--bg-card);
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
color: var(--text);
|
|
transition: all 0.1s;
|
|
}
|
|
.counterBtn:hover:not(:disabled) { border-color: var(--action); }
|
|
.counterBtn:disabled { opacity: 0.3; cursor: default; }
|
|
.counterValue {
|
|
min-width: 1.5rem;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.gapModeRow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
.gapAutoLabel {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-muted);
|
|
}
|
|
.gapCustomizeBtn {
|
|
padding: 0.25rem 0.55rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 5px;
|
|
background: var(--bg-card);
|
|
cursor: pointer;
|
|
font-size: 0.75rem;
|
|
color: var(--action);
|
|
transition: border-color 0.15s, background 0.15s;
|
|
}
|
|
.gapCustomizeBtn:hover:not(:disabled) {
|
|
border-color: var(--action);
|
|
background: color-mix(in srgb, var(--action) 8%, var(--bg-card));
|
|
}
|
|
.gapCustomizeBtn:disabled {
|
|
opacity: 0.35;
|
|
cursor: not-allowed;
|
|
}
|
|
.gapRangeRow {
|
|
padding: 0 0 0.35rem;
|
|
margin-top: -0.15rem;
|
|
}
|
|
.gapRange {
|
|
width: 100%;
|
|
accent-color: var(--action);
|
|
}
|
|
|
|
/* Toggle button */
|
|
.toggleBtn {
|
|
padding: 0.3rem 0.7rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 5px;
|
|
background: var(--bg);
|
|
cursor: pointer;
|
|
font-size: 0.8125rem;
|
|
color: var(--text-muted);
|
|
transition: all 0.15s;
|
|
}
|
|
.toggleOn {
|
|
background: var(--action);
|
|
border-color: var(--action);
|
|
color: #fff;
|
|
}
|
|
|
|
/* Summary line */
|
|
.summaryLine {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-muted);
|
|
margin-top: 0.25rem;
|
|
}
|
|
.hint {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
opacity: 0.7;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* Hardware grid */
|
|
.hardwareGroup {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/** Extra air above habillage row (after dimension sliders). */
|
|
.finishHabillageGroup {
|
|
padding-top: 0.85rem;
|
|
margin-top: 0.35rem;
|
|
}
|
|
.hardwareLabel {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.hardwareGrid {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.hardwareBtn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.6rem 0.75rem;
|
|
border: 2px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--bg-card);
|
|
cursor: pointer;
|
|
min-width: 5.5rem;
|
|
transition: all 0.15s;
|
|
}
|
|
.hardwareBtn:hover { border-color: var(--text-muted); }
|
|
.hardwareBtnSelected {
|
|
border-color: var(--action);
|
|
background: color-mix(in srgb, var(--action) 6%, var(--bg-card));
|
|
}
|
|
.hardwareBtn img {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
object-fit: contain;
|
|
border-radius: 4px;
|
|
}
|
|
.hardwareIcon { font-size: 1.5rem; }
|
|
.hardwareName { font-size: 0.6875rem; font-weight: 600; color: var(--text); text-align: center; }
|
|
.hardwareType { font-size: 0.625rem; color: var(--text-muted); }
|
|
.hardwarePrice { font-size: 0.6875rem; color: var(--action); font-weight: 500; }
|
|
.skipBtn {
|
|
padding: 0.4rem 0.75rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--bg);
|
|
color: var(--text-muted);
|
|
font-size: 0.8125rem;
|
|
cursor: pointer;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.skipBtn:hover { color: var(--text); border-color: var(--text-muted); }
|
|
|
|
/* Material quick pick */
|
|
.quickPick {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
overflow-x: auto;
|
|
padding-bottom: 0.35rem;
|
|
margin-bottom: 1rem;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.quickSwatch {
|
|
flex-shrink: 0;
|
|
width: 4.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
cursor: pointer;
|
|
border: 2px solid transparent;
|
|
border-radius: 8px;
|
|
padding: 0.35rem;
|
|
transition: all 0.15s;
|
|
}
|
|
.quickSwatch:hover { border-color: var(--text-muted); }
|
|
.quickSwatchActive { border-color: var(--action); }
|
|
.quickSwatchImg {
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
border-radius: 6px;
|
|
object-fit: cover;
|
|
background: var(--bg);
|
|
}
|
|
.quickSwatchNoImg {
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
border-radius: 6px;
|
|
background: var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.6rem;
|
|
color: var(--text-muted);
|
|
}
|
|
.quickSwatchLabel {
|
|
font-size: 0.5625rem;
|
|
color: var(--text);
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.browseBtn {
|
|
padding: 0.5rem 1rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--bg-card);
|
|
color: var(--text);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.browseBtn:hover { border-color: var(--action); color: var(--action); }
|
|
|
|
.currentMaterial {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.6rem 0.75rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
margin-bottom: 0.75rem;
|
|
background: var(--bg-card);
|
|
}
|
|
.currentMaterialImg {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-radius: 6px;
|
|
object-fit: cover;
|
|
}
|
|
.currentMaterialInfo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.1rem;
|
|
}
|
|
.currentMaterialInfo strong { font-size: 0.875rem; }
|
|
.currentMaterialInfo span { font-size: 0.75rem; color: var(--text-muted); }
|
|
|
|
/* Element color dots */
|
|
.colorDotsTitle {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.colorDots {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
.colorDot {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.3rem 0.55rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--bg-card);
|
|
cursor: pointer;
|
|
font-size: 0.6875rem;
|
|
color: var(--text);
|
|
transition: all 0.15s;
|
|
}
|
|
.colorDot:hover { border-color: var(--action); }
|
|
.colorDotSwatch {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 3px;
|
|
border: 1px solid rgba(0,0,0,0.1);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Finalize: summary card */
|
|
.summaryCard {
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--bg-card);
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.summaryRow {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.35rem 0;
|
|
font-size: 0.8125rem;
|
|
border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
|
|
}
|
|
.summaryRow:last-child { border-bottom: none; }
|
|
.summaryLabel { color: var(--text-muted); }
|
|
.summaryValue { color: var(--text); font-weight: 500; }
|
|
.summaryEdit {
|
|
font-size: 0.6875rem;
|
|
color: var(--action);
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
margin-left: 0.5rem;
|
|
}
|
|
.summaryEdit:hover { text-decoration: underline; }
|
|
|
|
/* Price breakdown */
|
|
.priceBreakdown {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.priceRow {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.25rem 0;
|
|
font-size: 0.8125rem;
|
|
}
|
|
.priceTotal {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.6rem 0;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
border-top: 2px solid var(--primary);
|
|
margin-top: 0.35rem;
|
|
}
|
|
|
|
/* Action buttons */
|
|
.actionBtns {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.actionBtn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0.5rem 0.85rem;
|
|
border: 1px solid var(--action);
|
|
border-radius: 9px;
|
|
background: var(--bg-card);
|
|
color: var(--action);
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
transition: all 0.15s ease;
|
|
}
|
|
.actionBtn:hover {
|
|
box-shadow: 0 8px 18px rgba(79, 70, 229, 0.18);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Order form */
|
|
.orderForm {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
.orderForm input,
|
|
.orderForm textarea {
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
font-size: 0.875rem;
|
|
}
|
|
.orderForm textarea { resize: vertical; }
|
|
.submitBtn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.45rem;
|
|
padding: 0.7rem 1.25rem;
|
|
border: none;
|
|
border-radius: 10px;
|
|
background: linear-gradient(135deg, var(--action), var(--action-hover));
|
|
color: #fff;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
transition: all 0.15s ease;
|
|
margin-top: 0.25rem;
|
|
}
|
|
.submitBtn:hover {
|
|
box-shadow: 0 10px 22px rgba(79, 70, 229, 0.3);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.success {
|
|
padding: 1rem;
|
|
background: color-mix(in srgb, var(--success, #22c55e) 10%, var(--bg-card));
|
|
border-radius: 8px;
|
|
color: var(--text);
|
|
font-size: 0.875rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.errors {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 0 0.75rem;
|
|
}
|
|
.errors li {
|
|
padding: 0.35rem 0.6rem;
|
|
background: color-mix(in srgb, #ef4444 10%, var(--bg-card));
|
|
border-radius: 5px;
|
|
font-size: 0.8125rem;
|
|
color: #ef4444;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
/* Checkboxes for service options */
|
|
.checkLabel {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Panel optimization info */
|
|
.panelInfo {
|
|
padding: 0.75rem;
|
|
background: var(--bg);
|
|
border-radius: 6px;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.panelInfoTitle {
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.panelRow {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.75rem;
|
|
padding: 0.15rem 0;
|
|
}
|
|
|
|
.finishSelector {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 0.45rem;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.finishOption {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.2rem;
|
|
min-width: 0;
|
|
padding: 0.5rem 0.45rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: var(--bg-card);
|
|
cursor: pointer;
|
|
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
|
|
}
|
|
|
|
.finishOption:hover {
|
|
border-color: var(--action);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.finishOptionActive {
|
|
border-color: var(--action);
|
|
background: color-mix(in srgb, var(--action) 10%, var(--bg-card));
|
|
box-shadow: 0 8px 18px color-mix(in srgb, var(--action) 20%, transparent);
|
|
}
|
|
|
|
.finishOptionLabel {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
line-height: 1.2;
|
|
text-align: left;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.finishOptionState {
|
|
font-size: 0.68rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.ruleGrid3 {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.warnText {
|
|
font-size: 0.8125rem;
|
|
color: #b45309;
|
|
background: color-mix(in srgb, #f59e0b 10%, var(--bg-card));
|
|
border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--border));
|
|
border-radius: 6px;
|
|
padding: 0.4rem 0.6rem;
|
|
margin: 0.4rem 0;
|
|
}
|
|
|
|
.overrideToggle {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.55rem;
|
|
padding: 0.55rem 0.65rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--bg-card);
|
|
margin: 0.4rem 0 0.75rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.overrideToggle input {
|
|
margin-top: 0.15rem;
|
|
}
|
|
|
|
.overrideToggle span {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.12rem;
|
|
font-size: 0.8125rem;
|
|
color: var(--text);
|
|
}
|
|
|
|
.overrideToggle small {
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.dimGrid { grid-template-columns: 1fr; }
|
|
.cardToggle { flex-direction: column; }
|
|
.columnStrip { gap: 0.25rem; }
|
|
.ruleGrid3 { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* Compact mode for desktop split-panel (keeps everything visible) */
|
|
@media (min-width: 1000px) {
|
|
.stepTitle {
|
|
font-size: 1rem;
|
|
margin-bottom: 0.65rem;
|
|
}
|
|
|
|
.stepDesc {
|
|
margin: -0.35rem 0 0.65rem;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.cardToggle {
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.85rem;
|
|
}
|
|
|
|
.cardToggleItem {
|
|
min-height: 4.6rem;
|
|
padding: 0.65rem 0.75rem;
|
|
border-radius: 9px;
|
|
}
|
|
|
|
.cardToggleLabel {
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.cardToggleHint {
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.dimGrid {
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
/* Prevent right-column slider rows from being clipped in narrow 1/3 panel */
|
|
.dimSliderRow {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 4.1rem auto;
|
|
gap: 0.45rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.dimSlider {
|
|
min-width: 0;
|
|
}
|
|
|
|
.dimLabel {
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.dimValue {
|
|
min-width: 4.1rem;
|
|
padding: 0.3rem 0.45rem;
|
|
font-size: 0.78rem;
|
|
}
|
|
|
|
.colCountRow {
|
|
margin-bottom: 0.6rem;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.aiMsg {
|
|
padding: 0.5rem 0.65rem;
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
}
|