/* ==========================================================================
   ELLO BAGS • STUDIO TÉRMICO 3D • DESIGN SYSTEM V1.4 (STITCH EDITION)
   ========================================================================== */

:root {
  --primary-orange: #FF4500;
  --primary-orange-hover: #e03e00;
  --primary-orange-light: #fff2ed;
  --primary-orange-border: #ffd4c2;
  --bg-surface: #F8FAFC;
  --bg-card: #FFFFFF;
  --text-primary: #191c1d;
  --text-muted: #64748b;
  --border-subtle: #e2e8f0;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: #F8FAFC !important;
  color: #191c1d;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

/* Custom scrollbars hidden for sleek studio feel */
::-webkit-scrollbar {
  display: none;
}
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Material Symbols font tweak */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}
.material-symbols-outlined.fill-1 {
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

/* Studio cards */
.studio-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 1.25rem;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 1px 3px 0 rgba(15, 23, 42, 0.02);
  transition: all 0.2s ease;
}

/* Color swatch button states */
.color-swatch {
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.color-swatch:hover {
  transform: translateY(-2px);
}
.color-swatch.selected-swatch .swatch-circle {
  box-shadow: 0 0 0 3px #FF4500, 0 4px 10px rgba(255, 69, 0, 0.35) !important;
}
.color-swatch.selected-swatch .check-icon {
  opacity: 1 !important;
}

/* Size card button states */
.size-card {
  transition: all 0.2s ease;
  cursor: pointer;
  background-color: #ffffff;
  border: 1.5px solid #e2e8f0;
}
.size-card:hover {
  border-color: #cbd5e1;
  transform: translateY(-1px);
}
.size-card.active-size {
  border-color: #FF4500 !important;
  background-color: #fff7f2 !important;
  box-shadow: 0 0 0 1.5px #FF4500, 0 4px 12px rgba(255, 69, 0, 0.12) !important;
}
.size-card.active-size .size-radio-inner {
  background-color: #FF4500 !important;
}

/* Gallery angle cards */
.angle-card {
  transition: all 0.2s ease;
  cursor: pointer;
  max-width: 135px;
  width: 100%;
}
.angle-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -3px rgba(0,0,0,0.1);
}
@media (max-width: 640px) {
  .angle-card {
    max-width: 95px;
  }
}

/* Ratio selector card states */
.ratio-card {
  transition: all 0.2s ease;
  cursor: pointer;
  background-color: #ffffff;
  border: 1.5px solid #e2e8f0;
}
.ratio-card:hover {
  border-color: #cbd5e1;
  transform: translateY(-1px);
}
.ratio-card.active-ratio {
  border-color: #FF4500 !important;
  background-color: #fff7f2 !important;
  box-shadow: 0 0 0 1.5px #FF4500, 0 4px 12px rgba(255, 69, 0, 0.12) !important;
}

/* Brand Primary Button */
.btn-primary-orange {
  background: linear-gradient(135deg, #FF5500 0%, #E03E00 100%);
  color: #ffffff !important;
  font-weight: 700;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 8px 20px -2px rgba(255, 69, 0, 0.35);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary-orange:hover {
  filter: brightness(1.05);
  box-shadow: 0 10px 24px -2px rgba(255, 69, 0, 0.45);
  transform: translateY(-1px);
}
.btn-primary-orange:active {
  transform: scale(0.98);
}

/* Alpha Transparency pattern */
.bg-alpha-pattern {
  background-image: linear-gradient(45deg, #cbd5e1 25%, transparent 25%),
                    linear-gradient(-45deg, #cbd5e1 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #cbd5e1 75%),
                    linear-gradient(-45deg, transparent 75%, #cbd5e1 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}

/* Floating craftmanship tag */
.thermal-tag {
  transform: rotate(-8deg);
  box-shadow: 0 4px 14px rgba(255, 69, 0, 0.28);
}

/* Custom Modal Animation */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.modal-animate {
  animation: fadeInScale 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 3D Stage stage glow */
.stage-glow {
  background: radial-gradient(circle, rgba(255, 69, 0, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
}

/* Custom Searchable Dropdown Combobox */
.searchable-select-btn {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background-color: #ffffff;
  border: 1.5px solid #cbd5e1;
}
.searchable-select-btn:hover {
  border-color: #94a3b8;
  background-color: #fafafa;
}
.searchable-select-btn.has-selection {
  border-color: #FF4500 !important;
  background-color: #fffaf7 !important;
  box-shadow: 0 1px 4px rgba(255, 69, 0, 0.12) !important;
}
.searchable-select-btn.has-selection .material-symbols-outlined {
  color: #FF4500 !important;
}
.searchable-select-btn.has-selection #segmentBtnLabel,
.searchable-select-btn.has-selection #scenarioBtnLabel {
  color: #FF4500 !important;
  font-weight: 700 !important;
}
.searchable-select-btn.is-open {
  border-color: #FF4500 !important;
  box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.15) !important;
}

.searchable-dropdown-panel {
  box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.06);
  animation: fadeInScale 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.searchable-item {
  transition: all 0.12s ease;
  cursor: pointer;
}
.searchable-item:hover, .searchable-item.active-item {
  background-color: #fff7f2;
  color: #FF4500;
}
.searchable-item.selected-item {
  background-color: #fff2eb;
  color: #FF4500;
  font-weight: 800;
}

/* Shake Animation for incorrect password/inputs */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.animate-shake {
  animation: shake 0.35s ease-in-out;
}

/* ==========================================================================
   HIERARQUIA DE Z-INDEX: MODAIS FLUTUANTES SEMPRE EM PRIMEIRO PLANO ABSOLUTO
   ========================================================================== */
#zoomModal,
#promptEditorModal,
#editUserModal,
#changePasswordModal,
#pwaInstallModal {
  z-index: 99999 !important;
}

#confirmModal {
  z-index: 100000 !important;
}

#loginScreenOverlay {
  z-index: 100005 !important;
}

#toastEl {
  z-index: 100010 !important;
}

#mobileBottomNav {
  z-index: 55 !important;
}

#mobileDrawer,
#profileModal {
  z-index: 50 !important;
}