/* Fair Mode Styles */
.fair-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 20px; background: #313479; color: #fff;
}
.fair-header-left { display: flex; gap: 10px; }
.fair-header-right { display: flex; align-items: center; gap: 8px; }
.fair-header-right select { padding: 4px 8px; border-radius: 4px; border: none; font-weight: bold; }

.btn-scan { background: #4CAF50; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: bold; }
.btn-scan:hover { background: #43A047; }
.btn-reset { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); padding: 8px 16px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.btn-reset:hover { background: rgba(255,255,255,0.25); }

.fair-container { max-width: 1400px; margin: 0 auto; padding: 16px 20px 100px; }
.fair-section { background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.fair-section-title { font-size: 18px; font-weight: 700; color: #313479; margin-bottom: 16px; border-bottom: 2px solid #313479; padding-bottom: 8px; }

.fair-form-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.fair-field { display: flex; flex-direction: column; }
.fair-field label { font-size: 12px; font-weight: 600; color: #555; margin-bottom: 3px; }
.fair-field .required { color: #e53935; }
.fair-field input, .fair-field select, .fair-field textarea {
  padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; width: 100%;
}
.fair-field input:focus, .fair-field select:focus, .fair-field textarea:focus { border-color: #313479; outline: none; box-shadow: 0 0 0 2px rgba(49,52,121,0.15); }
.fair-field.full { flex: 0 0 100%; }
.fair-field.half { flex: 0 0 calc(50% - 5px); }
.fair-field.third { flex: 0 0 calc(33.33% - 7px); }
.fair-field.sixth { flex: 0 0 calc(16.66% - 8px); min-width: 80px; }

/* Checkbox chips */
.checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border: 1px solid #ccc; border-radius: 20px; cursor: pointer; font-size: 13px; transition: all 0.15s; user-select: none; }
.chip:has(input:checked) { background: #313479; color: #fff; border-color: #313479; }
.chip input { display: none; }

/* Scan source badge */
.scan-source { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.badge-scan { background: #4CAF50; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; }

/* Configurator inline */
.configurator-inline { }
.configurator-inline .configurator-layout { height: auto; }
.configurator-inline .card { margin-bottom: 12px; }

/* Cart */
.cart-count { background: #e53935; color: #fff; border-radius: 50%; padding: 2px 8px; font-size: 14px; margin-left: 8px; }
.cart-items { min-height: 60px; }
.cart-empty { text-align: center; color: #999; padding: 20px; font-style: italic; }
.cart-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid #eee; border-radius: 6px; margin-bottom: 8px; background: #fafafa; }
.cart-item-info { flex: 1; }
.cart-item-name { font-weight: 600; font-size: 14px; }
.cart-item-config { font-size: 12px; color: #666; }
.cart-item-controls { display: flex; align-items: center; gap: 12px; }
.cart-item-qty { width: 60px; text-align: center; padding: 4px; border: 1px solid #ccc; border-radius: 4px; }
.cart-item-delivery { padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; }
.cart-item-remove { background: none; border: none; color: #e53935; cursor: pointer; font-size: 18px; padding: 4px; }

/* Scanner overlay */
.scanner-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000; z-index: 1000; display: flex; justify-content: center; align-items: center; }
.scanner-container { position: relative; width: 100%; height: 100%; }
.scanner-container video { width: 100%; height: 100%; object-fit: cover; }
.scanner-crosshair { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 250px; height: 250px; border: 3px solid #4CAF50; border-radius: 12px; }
.btn-close-scanner { position: absolute; top: 20px; right: 20px; background: rgba(0,0,0,0.6); color: #fff; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 16px; }
.scanner-status { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 16px; background: rgba(0,0,0,0.6); padding: 8px 20px; border-radius: 8px; }

/* Footer */
.fair-footer { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 2px solid #313479; padding: 12px 20px; display: flex; justify-content: center; gap: 16px; z-index: 99; }
.btn-submit { font-size: 16px; padding: 12px 40px; }

/* Success overlay */
.success-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); z-index: 2000; display: flex; justify-content: center; align-items: center; }
.success-content { background: #fff; border-radius: 12px; padding: 40px; text-align: center; max-width: 400px; }

/* Responsive for tablet portrait */
@media (max-width: 900px) {
  .configurator-inline .configurator-layout { flex-direction: column; }
  .configurator-inline .col-6 { width: 100%; }
  .fair-field.half { flex: 0 0 100%; }
  .fair-field.third { flex: 0 0 calc(50% - 5px); }
  .fair-field.sixth { flex: 0 0 calc(33% - 7px); }
}