:root {--bg: #faf8ff; --card: #ffffff; --text: #1e1b2e; --subtext: #6b7280;--primary: #7c3aed; --primary-light: #ede9fe; --primary-dark: #5b21b6;--green: #059669; --blue: #0284c7; --yellow: #eab308; --orange: #ea580c; --red: #dc2626;--space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 0.75rem; --space-lg: 1rem; --space-xl: 1.25rem; --space-2xl: 1.5rem;--radius: 0.75rem; --radius-lg: 1rem; --input-height: 44px;--shadow-sm: rgba(0, 0, 0, 0.12) 0px 1px 3px; --shadow-md: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;--shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.1);}* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; }body { background: var(--bg); color: var(--text); }.container { width: 92%; max-width: 960px; margin: 2rem auto; }.flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }.grid-2 { display: grid; grid-template-columns: 1fr 1fr; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; }.gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); }.p-lg { padding: var(--space-lg); } .p-xl { padding: var(--space-xl); }.mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } .mb-2xl { margin-bottom: var(--space-2xl); }.card { background: var(--card); border-radius: var(--radius); padding: var(--space-xl); border: 1px solid #f3f4f6; }.card--input { padding: var(--space-xl) var(--space-xl) var(--space-md) var(--space-xl); margin-bottom: var(--space-sm); }.card--spaced { margin-bottom: var(--space-2xl); }.section-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); font-weight: 600; font-size: 1.1rem; color: var(--text); }.step-header-container { display: flex; align-items: center; gap: var(--space-xl); margin-bottom: var(--space-md); }.step-header-content { display: flex; flex-direction: column; gap: var(--space-sm); }.step-header-container .section-header { margin-bottom: 0; }.vertical-divider-full { width: 1px; background: #e5e7eb; align-self: stretch; min-height: 100%; }.date-input-centered { display: flex; align-items: center; min-width: 160px; }.card-icon { font-size: 1.2rem; }.field { display: flex; flex-direction: column; }.field label { font-weight: 500; font-size: 0.8rem; color: var(--subtext); margin-bottom: var(--space-sm); }.field-control { padding: 0.6rem var(--space-md); border: 1px solid #e5e7eb; border-radius: var(--radius); font-size: 1rem; transition: all 0.2s; width: 100%; height: var(--input-height); box-sizing: border-box; box-shadow: var(--shadow-inset); }#w, #h, #d { font-weight: 700; color: var(--primary); font-size: 1.1rem; }.field-control:focus { outline: none; background: var(--primary-light); border-color: var(--primary); }textarea.field-control { height: auto; resize: vertical; font-family: inherit; }.state-error { border-color: var(--red) !important; background: #fef2f2 !important; box-shadow: inset 0 2px 4px rgba(220, 38, 38, 0.1) !important; }.state-success { border-color: var(--green) !important; background: #f0fdf4 !important; box-shadow: inset 0 2px 4px rgba(5, 150, 105, 0.1) !important; }.state-warning { border-color: var(--yellow) !important; background: #fffbeb !important; box-shadow: inset 0 2px 4px rgba(234, 179, 8, 0.1) !important; }.header { text-align: center; margin-bottom: var(--space-2xl); }.header h1 { font-size: 2.25rem; font-weight: 700; color: var(--primary); }.header p { color: var(--subtext); margin-top: var(--space-sm); }.tier-wrapper { margin-bottom: var(--space-sm); position: relative; }.tier { display: flex; align-items: center; padding: 0.875rem; border-radius: 12px; background: white; border-left: 12px solid var(--subtext); transition: all 0.2s ease; box-shadow: var(--shadow-md); position: relative; z-index: 2; margin-bottom: 0; }.countdown { background: var(--primary-light); padding: var(--space-md); border-radius: 0 0 var(--radius) var(--radius); font-size: 0.9rem; color: var(--primary); font-weight: 600; text-align: center; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease-out; width: 60%; margin: 0 auto; position: relative; z-index: 1; }.countdown.show { max-height: 100px; padding: var(--space-md); }.tier:hover:not(.not-available) { transform: translateY(-1px); }.tier.low { border-left-color: var(--green); } .tier.medium { border-left-color: var(--blue); } .tier.high { border-left-color: var(--yellow); } .tier.urgent2 { border-left-color: var(--orange); } .tier.critical { border-left-color: var(--red); }.tier.not-available { opacity: 0.6; background: #f8f9fa; border-left-color: var(--subtext); }.tier-label { flex: 1.4; display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }.tier-info { flex: 1.6; display: flex; align-items: center; justify-content: flex-end; gap: 0; }.tier-cutoff { text-align: right; color: var(--subtext); font-size: 0.9rem; font-weight: 500; padding-right: var(--space-md); border-right: 1px solid #e5e7eb; }.tier-price { padding-left: var(--space-md); min-width: 80px; text-align: right; font-weight: 700; font-size: 1.1rem; }.delivery-option { border: none; border-radius: var(--radius); padding: var(--space-md); cursor: pointer; transition: all 0.2s; background: var(--card); text-align: center; box-shadow: var(--shadow-md); }.delivery-option:hover:not(.disabled) { border: 1px solid var(--primary); background: var(--primary-light); transform: translateY(-1px); }.delivery-option.selected { border: 1px solid var(--primary); background: var(--primary-light); }.delivery-option.disabled { opacity: 0.5; cursor: not-allowed; background: #f8f9fa; }.option-title { font-weight: 600; color: var(--text); margin-bottom: 0.25rem; font-size: 0.9rem; }.option-subtitle { font-size: 0.8rem; color: var(--subtext); }.upload-zone { border: 2px dashed #d1d5db; border-radius: var(--radius); padding: var(--space-2xl); text-align: center; cursor: pointer; transition: all 0.2s; background: #fafbfc; }.upload-zone:hover { border-color: var(--primary); background: var(--primary-light); }.upload-zone.dragover { border-color: var(--primary); background: var(--primary-light); }.upload-zone.has-file { border: 2px solid var(--green); background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%); text-align: left; padding: var(--space-lg); }.upload-icon { font-size: 2.5rem; margin-bottom: var(--space-md); opacity: 0.5; }.upload-text p { margin: 0.25rem 0; color: var(--text); }.upload-note { font-size: 0.85rem; color: var(--subtext); }.summary-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md); background: var(--bg); border-radius: var(--radius); border: 1px solid #f3f4f6; }.summary-label { font-weight: 500; color: var(--subtext); font-size: 0.9rem; }.summary-value { font-weight: 600; color: var(--text); font-size: 0.9rem; }.summary-highlight { background: var(--primary-light); border-color: var(--primary); }.summary-highlight .summary-value { color: var(--primary); font-weight: 700; }.submit-button { background: var(--primary); color: white; border: none; border-radius: var(--radius); padding: 1rem 2rem; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; min-width: 280px; }.submit-button:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-2px); box-shadow: rgba(124, 58, 237, 0.4) 0px 8px 24px; }.submit-button:disabled { background: #9ca3af; cursor: not-allowed; transform: none; box-shadow: none; }.material-toggle { position: relative; display: flex; width: 220px; height: var(--input-height); background: #e5e7eb; border-radius: var(--radius); padding: 3px; cursor: pointer; transition: background-color 0.3s ease; }.material-slider { position: absolute; top: 3px; left: 3px; width: 107px; height: calc(var(--input-height) - 6px); background: white; border-radius: calc(var(--radius) - 3px); transition: transform 0.3s ease; box-shadow: var(--shadow-md); }.material-slider.fabric { transform: translateX(107px); }.material-option { display: flex; align-items: center; justify-content: center; width: 107px; height: calc(var(--input-height) - 6px); cursor: pointer; z-index: 2; position: relative; }.material-text { font-size: 0.8rem; font-weight: 600; color: var(--subtext); transition: all 0.3s ease; }.material-option.active .material-text { color: var(--primary); font-weight: 700; }.orientation-toggle { position: relative; display: flex; width: 140px; height: 32px; background: #e5e7eb; border-radius: var(--radius); padding: 2px; cursor: pointer; transition: background-color 0.3s ease; }.toggle-slider { position: absolute; top: 2px; left: 2px; width: 68px; height: 28px; background: white; border-radius: calc(var(--radius) - 2px); transition: transform 0.3s ease; box-shadow: var(--shadow-md); }.toggle-slider.portrait { transform: translateX(68px); }.toggle-option { display: flex; align-items: center; justify-content: center; width: 68px; height: 28px; cursor: pointer; z-index: 2; position: relative; }.toggle-text { font-size: 0.7rem; font-weight: 600; color: var(--subtext); transition: all 0.3s ease; }.landscape-text { padding: 0 0.25rem; }.toggle-option.active .toggle-text { color: var(--primary); font-weight: 700; }.error-message, .success-message, .warning-message { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; font-size: 0.75rem; font-weight: 500; opacity: 0; transform: translateY(-5px); transition: all 0.3s ease; }.error-message { color: var(--red); } .success-message { color: var(--green); } .warning-message { color: var(--yellow); }.error-message.show, .success-message.show, .warning-message.show { opacity: 1; transform: translateY(0); }.info-tooltip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: var(--subtext); color: white; border-radius: 50%; font-size: 0.7rem; font-weight: 600; cursor: help; margin-left: 0.25rem; transition: all 0.2s; }.info-tooltip:hover { background: var(--primary); transform: scale(1.1); }.tooltiptext { visibility: hidden; width: 220px; background: var(--text); color: white; text-align: left; border-radius: var(--radius); padding: var(--space-md); position: absolute; z-index: 1000; bottom: 125%; left: 50%; margin-left: -110px; opacity: 0; transition: opacity 0.3s; font-size: 0.8rem; line-height: 1.4; font-weight: 400; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px; }.info-tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }@media (max-width: 768px) {.step-header-container { flex-direction: column; align-items: flex-start; gap: var(--space-md); }.vertical-divider-full { display: none; }.date-input-centered { width: 100%; max-width: 280px; }}@media (max-width: 500px) {.grid-2, .grid-3 { grid-template-columns: 1fr !important; }.gap-lg { gap: var(--space-md); }.tier { flex-direction: column; align-items: flex-start; }.tier-info { display: none; }.submit-button { min-width: 100%; }.orientation-toggle { width: 120px; }.toggle-option { width: 58px; }.toggle-slider { width: 58px; }.toggle-slider.portrait { transform: translateX(58px); }}.footer { text-align: center; margin-top: 2rem; color: var(--subtext); font-size: 0.85rem; }