/* 
 * Royal Shield Pro - Frontend CSS
 */

/* Image Wrapper */
.rsp-image-wrapper { position: relative; display: inline-block; overflow: hidden; line-height: 0; border-radius: 8px; }

/* Ghost Layer */
.rsp-ghost-layer { position: absolute; top:0; left:0; width:100%; height:100%; z-index:1001; cursor: default; background: transparent; -webkit-touch-callout: none; }

/* Noise Shield */
.rsp-noise-shield { position: absolute; top:0; left:0; width:100%; height:100%; z-index:1002; pointer-events:none; opacity: 0.1; background: url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>'); animation: rsp-noise 0.2s steps(2) infinite; }
@keyframes rsp-noise { 0% { transform: translate(0,0); } 100% { transform: translate(5px, 5px); } }

/* Watermark */
.rsp-watermark { position: absolute; z-index: 1005; pointer-events: none; }
.rsp-watermark-text { font-family: 'Outfit', sans-serif; font-weight: 800; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); font-size: 11px; background: rgba(0,0,0,0.3); padding: 4px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.1em; }

/* Price Scrambling */
.rsp-scrambled-char { display: inline-block; position: relative; }
.rsp-scrambled-char::after { content: attr(data-c); }

/* Visual Breach Pulse */
body.rsp-pulse-red { animation: rsp-pulse-red 0.4s ease infinite; }
@keyframes rsp-pulse-red { 0% { box-shadow: inset 0 0 100px var(--rsp-flash-color, #ff0000)22; } 50% { box-shadow: inset 0 0 200px var(--rsp-flash-color, #ff0000)66; } 100% { box-shadow: inset 0 0 100px var(--rsp-flash-color, #ff0000)22; } }

/* Selection Jiggle */
body.rsp-breach-jiggle { animation: rsp-jiggle 0.3s ease; }
@keyframes rsp-jiggle { 0% { transform: translateX(0); } 25% { transform: translateX(5px); } 50% { transform: translateX(-5px); } 75% { transform: translateX(5px); } 100% { transform: translateX(0); } }

/* Shadow DOM */
.rsp-shadow-host { position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1010; }

/* Defocus Blur */
body.rsp-defocus { filter: blur(var(--rsp-blur, 10px)); transition: filter 0.3s ease; }

/* Print Poison */
@media print { body { display: none !important; } html::after { content: "ROYAL SHIELD: UNAUTHORIZED PRINT ATTEMPT."; font-size: 40px; color: red; display: block; padding: 100px; text-align: center; } }

/* QR Watermark Overlay */
.rsp-qr-overlay { position: absolute; bottom: 5px; left: 5px; width: 40px; height: 40px; background: #fff; padding: 2px; border-radius: 4px; z-index: 1006; opacity: 0.8; mix-blend-mode: multiply; pointer-events: none; }

/* Scroll Direction Tracker */
body.rsp-scroll-locked { overflow: hidden !important; }

/* Screenshot Bait Overlay */
.rsp-screenshot-bait { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999990; pointer-events: none; mix-blend-mode: difference; background: rgba(0,0,0,0.003); }

/* Context Menu */
#rsp-v4-context-menu { position: fixed; display: none; z-index: 9999999; background: #fff; border-radius: 20px; padding: 10px; width: 220px; box-shadow: 0 30px 60px rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.05); }
#rsp-v4-context-menu .rsp-menu-item { padding: 10px 15px; border-radius: 12px; cursor: pointer; font-size: 14px; transition: 0.2s; }
#rsp-v4-context-menu .rsp-menu-item:hover { background: rgba(0,0,0,0.03); }

/* ═══ Alert Modal ═══ */
/* Using system fonts to avoid calling external Google Fonts */
#rsp-v4-alert-shield { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; align-items: center; justify-content: center; z-index: 99999999; background: rgba(0,0,0,0.75); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
#rsp-v4-alert-shield.active { display: flex; }

.rsp-alert-card { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: linear-gradient(145deg, var(--rsp-card-bg) 0%, var(--rsp-card-bg-99) 50%, var(--rsp-card-bg-bb) 100%); padding: 0; border-radius: 28px; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 30px 80px rgba(0,0,0,0.6), 0 0 60px var(--rsp-accent-22); text-align: center; max-width: 420px; width: 90%; transform: scale(0.85) translateY(40px); opacity: 0; transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; }
#rsp-v4-alert-shield.active .rsp-alert-card { transform: scale(1) translateY(0); opacity: 1; }

.rsp-alert-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--rsp-accent), var(--rsp-accent-88), var(--rsp-accent-44), var(--rsp-accent-88), var(--rsp-accent)); background-size: 200% 100%; animation: rsp-gradient-shift 3s ease infinite; }
@keyframes rsp-gradient-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.rsp-alert-inner { padding: 48px 36px 40px; }

.rsp-shield-wrap { width: 90px; height: 90px; margin: 0 auto 28px; position: relative; display: flex; align-items: center; justify-content: center; }
.rsp-shield-glow { position: absolute; inset: -15px; border-radius: 50%; background: radial-gradient(circle, var(--rsp-accent-33) 0%, transparent 70%); animation: rsp-glow-pulse 2.5s ease-in-out infinite; }
.rsp-shield-ring { position: absolute; inset: -8px; border: 2px solid var(--rsp-accent-33); border-radius: 50%; animation: rsp-ring-spin 8s linear infinite; border-top-color: var(--rsp-accent-99); }
.rsp-shield-ring2 { position: absolute; inset: -20px; border: 1px dashed rgba(255,255,255,0.06); border-radius: 50%; animation: rsp-ring-spin 20s linear infinite reverse; }
.rsp-shield-ping { position: absolute; inset: 0; border: 2px solid var(--rsp-accent-55); border-radius: 50%; animation: rsp-ping 2s cubic-bezier(0,0,0.2,1) infinite; }
.rsp-shield-icon { width: 90px; height: 90px; background: linear-gradient(135deg, var(--rsp-accent-22), var(--rsp-accent-0a)); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rsp-accent-22); position: relative; z-index: 2; }

.rsp-alert-img-wrap { width: 110px; height: 110px; margin: 0 auto 28px; position: relative; display: flex; align-items: center; justify-content: center; }
.rsp-alert-img-wrap img { width: 90px; height: 90px; object-fit: cover; border-radius: 50%; border: 3px solid var(--rsp-accent); box-shadow: 0 0 20px var(--rsp-accent-44), 0 0 40px var(--rsp-accent-22); position: relative; z-index: 2; }

.rsp-alert-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--rsp-accent-1a); color: var(--rsp-accent); padding: 7px 18px; border-radius: 50px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; border: 1px solid var(--rsp-accent-22); }
.rsp-alert-badge-dot { width: 6px; height: 6px; background: var(--rsp-accent); border-radius: 50%; box-shadow: 0 0 8px var(--rsp-accent); animation: rsp-dot-blink 1.2s ease infinite; }
@keyframes rsp-dot-blink { 0%,100% { opacity:1; } 50% { opacity:0.3; } }

.rsp-alert-title { margin: 0 0 12px; font-size: var(--rsp-title-s, 22px); font-weight: 800; color: var(--rsp-title-c, #fff); line-height: 1.3; letter-spacing: -0.02em; }
.rsp-alert-desc { margin: 0; font-size: var(--rsp-cap-s, 14px); line-height: 1.7; color: var(--rsp-cap-c, #aaa); font-weight: 500; }

.rsp-alert-footer { padding: 16px 36px; background: rgba(0,0,0,0.2); border-top: 1px solid rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; gap: 8px; }
.rsp-alert-footer-text { font-size: var(--rsp-foot-s, 10px); color: var(--rsp-foot-c, #888); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; }
.rsp-alert-footer-dot { width: 4px; height: 4px; background: var(--rsp-accent-88); border-radius: 50%; }

@keyframes rsp-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes rsp-glow-pulse { 0%,100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes rsp-ring-spin { 100% { transform: rotate(360deg); } }
@keyframes rsp-pulse-dot { 0%,100% { opacity:1; } 50% { opacity:0.4; } }