/* pwa/app.css — VillaRent Consultant PWA (TASK 32). * Loaded ONLY on consultant-panel pages (see views/header.php). * Browser-mode rules are harmless cosmetic polish; everything * app-specific is scoped to display-mode: standalone/fullscreen. */ /* ---------- always-on mobile polish (harmless in normal browser) ---------- */ html { -webkit-tap-highlight-color: transparent; /* no grey flash on taps */ } /* ---------- TASK 33: zoom lock + native-app input feel ---------- * 'pwa-app' is set on by pwa/app.js when this page IS the Consultant * PWA context (panel page, or any page inside the installed standalone app). * view.php opened by a CUSTOMER via share link gets none of this — the public * preview keeps normal browser zoom. */ html.pwa-app { /* Safari must never auto-inflate text (e.g. landscape rotation) */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html.pwa-app, html.pwa-app body { /* double-tap zoom + 300ms tap delay OFF; panning/scrolling stays ON. (Pinch zoom is killed by the viewport meta on Android/Chrome and by the gesturestart preventDefault in pwa/app.js on iOS.) */ touch-action: manipulation; } /* iOS Safari auto-zooms into any editable field whose font-size is < 16px — and with zoom locked the user could get STUCK zoomed-in. A 16px floor on phones/tablets guarantees the focus zoom never fires. Checkboxes, radios, ranges, files and button-type inputs are excluded (no focus zoom on them). Desktop untouched. */ @media (max-width: 768px), (pointer: coarse) { html.pwa-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="image"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"]), html.pwa-app select, html.pwa-app textarea { font-size: 16px; } } /* responsive hardening: inputs inside flex rows must be allowed to shrink (a readonly URL field or a long value can otherwise push the row past the viewport in RTL), and native file inputs must never exceed their column */ html.pwa-app input { min-width: 0; } html.pwa-app input[type="file"] { max-width: 100%; } /* no long-press text-selection / callout on navigation chrome (inputs and chat text stay selectable — consultants copy customer phones!) */ nav, header, .si-segmented, button, .si-segmented-item { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* ---------- standalone-app look & feel ---------- */ @media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) { /* no rubber-band page bounce beyond the app viewport + pinch-zoom also removed at the touch-action layer (extra insurance on top of the meta + JS gesture lock for OEM browsers; scrolling keeps working) */ html, body { overscroll-behavior-y: contain; touch-action: pan-x pan-y; } /* crisper, native-app text rendering */ body { -webkit-font-smoothing: antialiased; } /* no iOS long-press link/image/label preview callouts (native-app feel). Chat TEXT itself stays selectable — see the nav-chrome rule above. */ a, img, label { -webkit-touch-callout: none; } /* respect notches / rounded corners / home indicator */ body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } body > header.sticky { padding-top: env(safe-area-inset-top, 0px); } /* subtle native-app page transition */ main, .si-auth-card { animation: pwa-fade-in 0.18s ease-out; } } @keyframes pwa-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* ---------- offline indicator bar (injected by pwa/app.js) ---------- */ #pwa-net-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 2147483000; direction: rtl; text-align: center; font-family: Vazirmatn, -apple-system, 'Segoe UI', Tahoma, sans-serif; font-size: 12px; font-weight: 700; color: #fff; background: #DC2626; padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35); } /* ---------- install card (TASK 36: injected by pwa/app.js at the TOP of the dashboard content — part of the dashboard, not a floating banner). Black/purple/white theme: dark slate→indigo gradient, purple glow, white text — matches the site's brand accents. ---------- */ #pwa-install-mount[hidden] { display: none; } /* zero footprint when empty */ #pwa-install-card { position: relative; overflow: hidden; direction: rtl; display: flex; align-items: center; gap: 12px; border-radius: 18px; padding: 12px 14px; background: radial-gradient(130% 190% at 100% 0%, rgba(139, 92, 246, 0.38) 0%, rgba(139, 92, 246, 0) 55%), linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%); border: 1px solid rgba(139, 92, 246, 0.35); box-shadow: 0 12px 32px -10px rgba(79, 70, 229, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.07); color: #fff; font-family: Vazirmatn, -apple-system, 'Segoe UI', Tahoma, sans-serif; animation: pic-in 0.3s var(--ease-out, ease-out); } @keyframes pic-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } #pwa-install-card.pic-clickable { cursor: pointer; } #pwa-install-card .pic-logo { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(160deg, #818CF8, #6D28D9); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25); } #pwa-install-card .pic-logo svg, .pih-card .pic-logo svg { width: 22px; height: 22px; } #pwa-install-card .pic-text { flex: 1; min-width: 0; } #pwa-install-card .pic-title { font-size: 14px; font-weight: 800; color: #fff; line-height: 1.5; } #pwa-install-card .pic-sub { font-size: 11.5px; color: #C7D2FE; margin-top: 2px; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #pwa-install-card .pic-actions { flex-shrink: 0; display: flex; align-items: center; } #pwa-install-card .pic-btn { border: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 800; padding: 9px 20px; border-radius: 12px; background: linear-gradient(160deg, #818CF8, #6D28D9); color: #fff; box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } #pwa-install-card .pic-btn:hover { filter: brightness(1.1); transform: translateY(-1px); } #pwa-install-card .pic-btn:active { transform: translateY(0); filter: brightness(0.94); } #pwa-install-card .pic-btn-help { background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(139, 92, 246, 0.5); box-shadow: none; color: #DDD6FE; } #pwa-install-card .pic-btn-help:hover { background: rgba(139, 92, 246, 0.24); } #pwa-install-card .pic-close { flex-shrink: 0; border: none; cursor: pointer; background: transparent; color: rgba(255, 255, 255, 0.45); font-size: 15px; line-height: 1; width: 30px; height: 30px; border-radius: 9px; transition: color 0.15s ease, background 0.15s ease; } #pwa-install-card .pic-close:hover { color: #fff; background: rgba(255, 255, 255, 0.09); } #pwa-install-card .pic-close:focus-visible, #pwa-install-card .pic-btn:focus-visible { outline: 2px solid #A5B4FC; outline-offset: 2px; } /* compact on small phones */ @media (max-width: 520px) { #pwa-install-card { gap: 10px; padding: 10px 12px; border-radius: 16px; } #pwa-install-card .pic-logo { width: 38px; height: 38px; border-radius: 10px; } #pwa-install-card .pic-logo svg { width: 20px; height: 20px; } #pwa-install-card .pic-title { font-size: 13px; } #pwa-install-card .pic-sub { font-size: 10.5px; } #pwa-install-card .pic-btn { padding: 8px 14px; font-size: 12px; border-radius: 10px; } #pwa-install-card .pic-close { width: 28px; height: 28px; } } /* ---------- install help sheet (TASK 36: opened from the card when the browser can't install directly — iOS Safari, Firefox, …). Mobile: bottom sheet; desktop: centered dialog. Same dark theme. ---------- */ #pwa-install-help { position: fixed; inset: 0; z-index: 2147482500; direction: rtl; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: Vazirmatn, -apple-system, 'Segoe UI', Tahoma, sans-serif; } #pwa-install-help .pih-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, 0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: pih-fade 0.2s ease-out; } @keyframes pih-fade { from { opacity: 0; } to { opacity: 1; } } #pwa-install-help .pih-card { position: relative; width: 100%; max-width: 400px; border-radius: 22px; padding: 18px; background: radial-gradient(120% 160% at 100% 0%, rgba(139, 92, 246, 0.3) 0%, rgba(139, 92, 246, 0) 55%), linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%); border: 1px solid rgba(139, 92, 246, 0.35); box-shadow: 0 24px 64px rgba(2, 6, 23, 0.55); color: #fff; animation: pih-pop 0.25s var(--ease-out, ease-out); } @keyframes pih-pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } } #pwa-install-help .pih-head { display: flex; align-items: center; gap: 12px; } #pwa-install-help .pih-head-text { flex: 1; min-width: 0; } #pwa-install-help .pih-title { font-size: 15px; font-weight: 800; color: #fff; } #pwa-install-help .pih-sub { font-size: 11.5px; color: #C7D2FE; margin-top: 2px; } #pwa-install-help .pih-close { flex-shrink: 0; border: none; cursor: pointer; background: transparent; color: rgba(255, 255, 255, 0.45); font-size: 15px; line-height: 1; width: 32px; height: 32px; border-radius: 10px; transition: color 0.15s ease, background 0.15s ease; } #pwa-install-help .pih-close:hover { color: #fff; background: rgba(255, 255, 255, 0.09); } #pwa-install-help .pih-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; } #pwa-install-help .pih-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.9; color: #E0E7FF; } #pwa-install-help .pih-num { flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(160deg, #818CF8, #6D28D9); box-shadow: 0 3px 10px rgba(99, 102, 241, 0.4); } #pwa-install-help .pih-note { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.28); color: #C7D2FE; font-size: 11px; line-height: 1.9; } #pwa-install-help .pih-done { width: 100%; margin-top: 14px; border: none; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 800; padding: 12px; border-radius: 13px; background: linear-gradient(160deg, #818CF8, #6D28D9); color: #fff; box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45); transition: filter 0.15s ease, transform 0.15s ease; } #pwa-install-help .pih-done:hover { filter: brightness(1.1); transform: translateY(-1px); } #pwa-install-help .pih-done:active { transform: translateY(0); filter: brightness(0.94); } #pwa-install-help .pih-close:focus-visible, #pwa-install-help .pih-done:focus-visible { outline: 2px solid #A5B4FC; outline-offset: 2px; } /* mobile: bottom-sheet feel + safe area */ @media (max-width: 520px) { #pwa-install-help { align-items: flex-end; padding: 10px; } #pwa-install-help .pih-card { border-radius: 20px 20px 14px 14px; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: none; } } /* ---------- TASK 37: iPhone install guide (#pwa-ios-guide, injected by pwa/app.js when an iPhone user taps «نصب» — iOS Safari has no direct install). Compact visual modal: Safari bottom-toolbar mockup with the Share button highlighted + an animated arrow pointing down at it, the two install steps and a clear Close button. Same dark/purple theme. Mobile: bottom sheet; desktop: centered dialog. ---------- */ #pwa-ios-guide { position: fixed; inset: 0; z-index: 2147482500; direction: rtl; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: Vazirmatn, -apple-system, 'Segoe UI', Tahoma, sans-serif; } #pwa-ios-guide .pig-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, 0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: pig-fade 0.2s ease-out; } @keyframes pig-fade { from { opacity: 0; } to { opacity: 1; } } #pwa-ios-guide .pig-card { position: relative; width: 100%; max-width: 380px; border-radius: 22px; padding: 18px; background: radial-gradient(120% 160% at 100% 0%, rgba(139, 92, 246, 0.3) 0%, rgba(139, 92, 246, 0) 55%), linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%); border: 1px solid rgba(139, 92, 246, 0.35); box-shadow: 0 24px 64px rgba(2, 6, 23, 0.55); color: #fff; animation: pig-pop 0.25s var(--ease-out, ease-out); } @keyframes pig-pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } } #pwa-ios-guide .pig-head { display: flex; align-items: center; gap: 12px; } #pwa-ios-guide .pig-head-text { flex: 1; min-width: 0; } #pwa-ios-guide .pig-title { font-size: 15px; font-weight: 800; color: #fff; } #pwa-ios-guide .pig-sub { font-size: 11.5px; color: #C7D2FE; margin-top: 2px; } #pwa-ios-guide .pig-close { flex-shrink: 0; border: none; cursor: pointer; background: transparent; color: rgba(255, 255, 255, 0.45); font-size: 15px; line-height: 1; width: 32px; height: 32px; border-radius: 10px; transition: color 0.15s ease, background 0.15s ease; } #pwa-ios-guide .pig-close:hover { color: #fff; background: rgba(255, 255, 255, 0.09); } /* the visual: arrow pointing DOWN at the Safari Share button */ #pwa-ios-guide .pig-visual { margin-top: 16px; text-align: center; } #pwa-ios-guide .pig-arrow-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: -2px; } #pwa-ios-guide .pig-arrow-label { font-size: 11px; font-weight: 800; letter-spacing: 0.4px; color: #EDE9FE; background: rgba(139, 92, 246, 0.32); border: 1px solid rgba(139, 92, 246, 0.55); border-radius: 999px; padding: 3px 12px 4px; direction: ltr; } #pwa-ios-guide .pig-arrow { display: block; width: 26px; height: 30px; color: #A78BFA; filter: drop-shadow(0 3px 8px rgba(139, 92, 246, 0.65)); animation: pig-bounce 1.1s ease-in-out infinite; } #pwa-ios-guide .pig-arrow svg { width: 100%; height: 100%; display: block; } @keyframes pig-bounce { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(3px); } } /* the Safari bottom-toolbar mockup (LTR, like the real one) */ #pwa-ios-guide .pig-toolbar { direction: ltr; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 9px 18px; border-radius: 16px; background: linear-gradient(180deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.96) 100%); border: 1px solid rgba(148, 163, 184, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 26px -12px rgba(2, 6, 23, 0.8); } #pwa-ios-guide .pig-tb-ic { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: rgba(226, 232, 240, 0.38); } #pwa-ios-guide .pig-tb-ic svg { width: 21px; height: 21px; } /* the Share button: highlighted + pulsing ring */ #pwa-ios-guide .pig-tb-share { position: relative; color: #fff; border-radius: 12px; background: linear-gradient(160deg, #818CF8, #6D28D9); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.28), 0 6px 16px rgba(99, 102, 241, 0.55); animation: pig-pulse 1.6s ease-in-out infinite; } @keyframes pig-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.28), 0 6px 16px rgba(99, 102, 241, 0.55); } 50% { box-shadow: 0 0 0 8px rgba(139, 92, 246, 0.16), 0 6px 16px rgba(99, 102, 241, 0.55); } } /* the two steps + note + close button */ #pwa-ios-guide .pig-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; } #pwa-ios-guide .pig-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.9; color: #E0E7FF; } #pwa-ios-guide .pig-num { flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(160deg, #818CF8, #6D28D9); box-shadow: 0 3px 10px rgba(99, 102, 241, 0.4); } #pwa-ios-guide .pig-note { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.28); color: #C7D2FE; font-size: 11px; line-height: 1.9; } #pwa-ios-guide .pig-done { width: 100%; margin-top: 14px; border: none; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 800; padding: 12px; border-radius: 13px; background: linear-gradient(160deg, #818CF8, #6D28D9); color: #fff; box-shadow: 0 6px 18px rgba(99, 102, 241, 0.45); transition: filter 0.15s ease, transform 0.15s ease; } #pwa-ios-guide .pig-done:hover { filter: brightness(1.1); transform: translateY(-1px); } #pwa-ios-guide .pig-done:active { transform: translateY(0); filter: brightness(0.94); } #pwa-ios-guide .pig-close:focus-visible, #pwa-ios-guide .pig-done:focus-visible { outline: 2px solid #A5B4FC; outline-offset: 2px; } /* mobile: bottom-sheet feel + safe area */ @media (max-width: 520px) { #pwa-ios-guide { align-items: flex-end; padding: 10px; } #pwa-ios-guide .pig-card { border-radius: 20px 20px 14px 14px; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: none; } #pwa-ios-guide .pig-visual { margin-top: 12px; } #pwa-ios-guide .pig-tb-ic { width: 30px; height: 30px; } #pwa-ios-guide .pig-tb-ic svg { width: 19px; height: 19px; } #pwa-ios-guide .pig-tb-share { border-radius: 10px; } } /* accessibility: no bouncing / pulsing when the user asked for calm */ @media (prefers-reduced-motion: reduce) { #pwa-ios-guide .pig-arrow { animation: none; } #pwa-ios-guide .pig-tb-share { animation: none; } } /* ---------- guard toast (injected by pwa/app.js) ---------- */ #pwa-toast { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 2147483100; direction: rtl; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; background: rgba(15, 23, 42, 0.92); color: #fff; font-family: Vazirmatn, -apple-system, 'Segoe UI', Tahoma, sans-serif; font-size: 12.5px; font-weight: 600; padding: 10px 18px; border-radius: 999px; box-shadow: 0 6px 22px rgba(15, 23, 42, 0.35); animation: pwa-toast-in 0.18s ease-out; } @keyframes pwa-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } } /* ---------- TASK 34: push-notification toggle (consultant_profile.php) ---------- * Native-feel iOS-style switch. Visually controlled by the checkbox's * :checked state, so it works with zero JS-driven class toggling. */ .pwa-switch { position: relative; display: inline-block; flex-shrink: 0; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; } .pwa-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; } .pwa-switch-track { display: block; width: 52px; height: 32px; border-radius: 999px; background: #CBD5E1; transition: background 0.2s ease; box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.15); } .pwa-switch-thumb { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(15, 23, 42, 0.3); transition: transform 0.2s ease; z-index: 1; } .pwa-switch input:checked + .pwa-switch-track { background: #22C55E; } .pwa-switch input:checked + .pwa-switch-track .pwa-switch-thumb { transform: translateX(20px); } .pwa-switch input:disabled + .pwa-switch-track { opacity: 0.55; cursor: not-allowed; } .pwa-switch input:focus-visible + .pwa-switch-track { outline: 2px solid #6366F1; outline-offset: 2px; } #push-test-btn:active { background-color: #16A34A !important; } #push-test-btn:disabled { opacity: 0.6; } /* ============================================================ TASK BATCH 34 (part 3) — OWNER PUSH PROMPT (#owner-push-card) Shown on the owner dashboard INSIDE the installed app while push notifications are off: a clean white card (owner-panel design language) with a tinted bell chip, an enable action and a dismiss button. States: .opp-blocked (amber — browser blocked, guidance), .opp-success (green confirmation, fades away). ============================================================ */ #owner-push-mount:empty { display: none; } /* zero footprint when empty */ /* TASK BATCH 35 (part 3): the SAME enable prompt now serves the consultant app — consultant panel pages render #consultant-push-mount (header.php, first child of
). Identical card; zero footprint when empty and a small bottom margin so it never hugs the page content when shown. */ #consultant-push-mount:empty { display: none; } #consultant-push-mount .opp-card { margin: 0 0 12px; } .opp-card { position: relative; direction: rtl; display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 13px 14px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 10px 28px -12px rgba(79, 70, 229, 0.25); font-family: Vazirmatn, -apple-system, 'Segoe UI', Tahoma, sans-serif; animation: opp-in 0.3s var(--ease-out, ease-out); } @keyframes opp-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .opp-icon { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; font-size: 20px; display: flex; align-items: center; justify-content: center; background: #EEF2FF; border: 1px solid #C7D2FE; } .opp-card:not(.opp-blocked):not(.opp-success) .opp-icon { animation: opp-ring 2.2s ease-in-out infinite; } @keyframes opp-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.30); } 50% { box-shadow: 0 0 0 7px rgba(99, 102, 241, 0); } } .opp-body { flex: 1; min-width: 0; } .opp-title { font-size: 13.5px; font-weight: 800; color: #1E293B; line-height: 1.55; } .opp-text { font-size: 11.5px; color: #64748B; margin-top: 2px; line-height: 1.7; } .opp-enable { flex-shrink: 0; border: 0; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: #fff; padding: 9px 16px; border-radius: 11px; background: linear-gradient(160deg, #818CF8, #6D28D9); box-shadow: 0 4px 14px rgba(99, 102, 241, 0.40); transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; white-space: nowrap; } .opp-enable:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(99, 102, 241, 0.48); } .opp-enable:active:not(:disabled) { transform: translateY(0); } .opp-enable:disabled { opacity: 0.65; cursor: default; } .opp-close { position: absolute; top: 7px; left: 7px; width: 26px; height: 26px; border-radius: 8px; border: 0; cursor: pointer; background: transparent; color: #94A3B8; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background-color .15s ease, color .15s ease; } .opp-close:hover { background: #F1F5F9; color: #475569; } /* blocked state — amber guidance (permission denied at browser level) */ .opp-card.opp-blocked { background: #FFFBEB; border-color: #FDE68A; box-shadow: 0 10px 28px -12px rgba(217, 119, 6, 0.25); } .opp-card.opp-blocked .opp-icon { background: #FEF3C7; border-color: #FDE68A; animation: none; } .opp-card.opp-blocked .opp-title { color: #92400E; } .opp-card.opp-blocked .opp-text { color: #B45309; } .opp-card.opp-blocked .opp-enable { background: linear-gradient(160deg, #FBBF24, #D97706); box-shadow: 0 4px 14px rgba(217, 119, 6, 0.40); } .opp-card.opp-blocked .opp-close:hover { background: #FEF3C7; color: #92400E; } /* success state — green confirmation, then the card is removed by JS */ .opp-card.opp-success { background: #F0FDF4; border-color: #BBF7D0; box-shadow: 0 10px 28px -12px rgba(22, 163, 74, 0.28); } .opp-card.opp-success .opp-icon { background: #DCFCE7; border-color: #BBF7D0; animation: none; } .opp-card.opp-success .opp-title { color: #166534; } .opp-card.opp-success .opp-text { color: #15803D; } /* mobile — stack vertically, full-width action */ @media (max-width: 520px) { .opp-card { flex-wrap: wrap; padding: 12px 12px 11px; gap: 10px; } .opp-body { flex: 1 1 calc(100% - 52px); } .opp-enable { flex: 1 1 100%; padding: 10px 16px; } .opp-text { font-size: 11px; } } /* reduced motion — static card (no entrance/ring animations) */ @media (prefers-reduced-motion: reduce) { .opp-card { animation: none; } .opp-card .opp-icon { animation: none; } .opp-enable { transition: none; } }