/* Grill Vibe — client1 account-management injected UI (gv-am-*). Reuses .cp-* look; only styles what the bundle doesn't already cover. NOTE: the bundle's .cp-btn-primary uses `background:var(--o)`, and --o (#e65100) is defined only on .cp-root. Our modal is appended to , OUTSIDE .cp-root, so var(--o) is undefined there and the primary button renders white/invisible. We therefore define --o locally on our nodes AND set an explicit background so the button is always visible. */ .gv-am-back, .gv-am-section { --o: #e65100; /* brand orange, so any var(--o) resolves inside our subtree too */ } /* Force our primary/save button to be visibly orange regardless of --o scope. */ .gv-am-modal .cp-btn-primary, .gv-am-modal .gv-am-save { background: #e65100 !important; color: #fff !important; border: 0 !important; } .gv-am-modal .cp-btn-primary:hover, .gv-am-modal .gv-am-save:hover { background: #d84a00 !important; } .gv-am-modal .cp-btn-primary:disabled, .gv-am-modal .gv-am-save:disabled { opacity: .55 !important; } /* Ghost/cancel button — the bundle's is white with a border; make sure our cancel button keeps a visible border + dark text outside .cp-root too. */ .gv-am-modal .cp-btn-ghost { background: #fff !important; border: 1.5px solid #111 !important; color: #111 !important; } .gv-am-section { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; } .gv-am-btn { width: 100%; } /* subtle destructive-looking link button for delete */ .gv-am-del-link { width: 100%; background: transparent; color: #c0392b; border: 1px solid rgba(192, 57, 43, 0.35); } .gv-am-del-link:hover { background: rgba(192, 57, 43, 0.07); } /* modal backdrop + card (fallbacks in case .cp-modal-back isn't globally styled) */ .gv-am-back { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; } .gv-am-modal { position: relative; background: #fff; border-radius: 16px; padding: 22px 20px 20px; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); max-height: 90vh; overflow-y: auto; } .gv-am-modal .cp-modal-x { position: absolute; top: 10px; right: 12px; border: none; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: #888; } .gv-am-modal .cp-modal-title { margin: 4px 0 12px; font-size: 1.15rem; } .gv-am-modal .cp-modal-msg { color: #555; font-size: 0.95rem; line-height: 1.45; margin: 0 0 14px; } .gv-am-modal .cp-modal-ico { font-size: 40px; text-align: center; margin-bottom: 6px; } .gv-am-field { margin-bottom: 12px; } .gv-am-field .cp-label { display: block; margin-bottom: 5px; font-size: 0.85rem; color: #444; } .gv-am-field .cp-input { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid #ddd; border-radius: 10px; font-size: 16px; /* >=16px prevents iOS zoom */ } .gv-am-err { display: block; background: #fdecea; color: #b71c1c; border-radius: 8px; padding: 9px 11px; font-size: 0.85rem; margin-bottom: 12px; } .gv-am-actions { display: flex; gap: 10px; margin-top: 8px; } .gv-am-actions .cp-btn { flex: 1; } .gv-am-danger-ico { color: #e67e22; } .gv-am-danger-btn { background: #c0392b; color: #fff; border: none; } .gv-am-danger-btn:hover { background: #a93226; } .gv-am-danger-btn:disabled { opacity: 0.6; }