/* POS Modifiers — Product modifier UI on single product page */
/* Extracted from RulesModule.php inline CSS */
.pos-modifiers-container { margin: 25px 0 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; clear: both !important; }
.pos-modifier-group { margin-bottom: 20px !important; padding: 15px !important; background: #fff !important; border: 1.5px solid #eee !important; border-radius: 12px !important; }
.pos-modifier-group:first-of-type { display: block !important; }
.pos-modifier-group h4 { margin: 0 0 12px 0 !important; font-size: 1.1rem !important; font-weight: 700 !important; color: #222 !important; }
.pos-mod-badge { font-size: 10px !important; padding: 3px 8px !important; border-radius: 4px !important; font-weight: 700 !important; text-transform: uppercase !important; margin-left: 5px !important; }
.pos-modifier-option { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin-bottom: 6px !important; padding: 8px 12px !important; border: 1px solid #f0f0f0 !important; border-radius: 8px !important; transition: all 0.2s !important; }
.pos-modifier-option.is-selected { border-color: #3b82f6 !important; background: #eff6ff !important; }
.pos-mod-controls { display: flex !important; align-items: center !important; gap: 8px !important; }
.pos-mod-price { font-size: 13px !important; font-weight: 700 !important; color: #3b82f6 !important; }
.pos-mod-stepper { display: flex !important; align-items: center !important; background: #fff !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; padding: 2px !important; gap: 4px !important; }
.pos-mod-stepper button { width: 28px !important; height: 28px !important; border: none !important; background: #f1f5f9 !important; border-radius: 4px !important; cursor: pointer !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important; color: #475569 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s !important; }
.pos-mod-stepper button:hover:not(:disabled) { background: #3b82f6 !important; color: #fff !important; }
.pos-mod-stepper button:disabled { opacity: 0.3 !important; cursor: not-allowed !important; }
.pos-mod-stepper input { width: 25px !important; text-align: center !important; border: none !important; background: transparent !important; font-size: 14px !important; font-weight: 800 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; pointer-events: none !important; color: #1e293b !important; }
.pos-modifier-option.is-disabled-option { opacity: 0.4 !important; filter: grayscale(1) !important; cursor: not-allowed !important; }
.pos-mod-error { color: #ef4444 !important; font-size: 12px !important; margin-top: 5px !important; display: none !important; font-weight: 600 !important; }
.pos-wizard-nav { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: 20px !important; }
.pos-wizard-btn { background: #1e293b !important; color: #fff !important; padding: 12px 24px !important; font-size: 14px !important; border: none !important; border-radius: 10px !important; cursor: pointer !important; font-weight: 700 !important; min-width: 120px !important; transition: all 0.2s !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; }
.pos-wizard-btn:hover:not(:disabled) { background: #334155 !important; transform: translateY(-1px) !important; }
.pos-wizard-btn:disabled { background: #cbd5e1 !important; cursor: not-allowed !important; box-shadow: none !important; }
.pos-wizard-btn.btn-prev { background: #64748b !important; }
.pos-wizard-step-info { text-align: center !important; color: #475569 !important; font-size: 13px !important; margin-bottom: 15px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1px !important; }
.pos-mod-check { width: 20px !important; height: 20px !important; margin: 0 !important; cursor: pointer !important; }