/* ─── E-MAIL MOCKUP ─── */
.mock-email{background:#fff;border-radius:8px;overflow:hidden;text-align:left;font-family:Arial,sans-serif;color:#1a1a1a;border:1px solid #ddd;margin-bottom:1.5rem;font-size:.88rem}
.mock-email-bar{background:#f5f5f5;padding:.5rem .75rem;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid #e0e0e0}
.mock-email-dot{width:10px;height:10px;border-radius:50%;background:#ccc}
.mock-email-dot.r{background:#ff5f57}.mock-email-dot.y{background:#ffbd2e}.mock-email-dot.g{background:#28c840}
.mock-email-head{padding:.75rem 1rem;border-bottom:1px solid #eee;font-size:.82rem;color:#555}
.mock-email-head strong{color:#1a1a1a}
.mock-email-from{margin-bottom:.25rem}.mock-email-to{margin-bottom:.25rem}.mock-email-subject{font-weight:700;color:#1a1a1a;font-size:.95rem}
.mock-email-body{padding:1rem}
.mock-email-body p{margin-bottom:.75rem;line-height:1.5}
.mock-email-body .mock-link{color:#0066cc;text-decoration:underline;word-break:break-all}
.mock-email-body .mock-btn{display:inline-block;padding:.5rem 1.25rem;background:#0066cc;color:#fff;border-radius:4px;text-decoration:none;font-weight:600;font-size:.85rem;margin:.5rem 0}
.mock-email-body .mock-btn.red{background:#d32f2f}.mock-email-body .mock-btn.green{background:#2e7d32}.mock-email-body .mock-btn.orange{background:#e65100}
.mock-email-logo{font-size:1.5rem;margin-bottom:.5rem}
.mock-email-footer{padding:.5rem 1rem;background:#f9f9f9;border-top:1px solid #eee;font-size:.72rem;color:#999}
.mock-email-urgent{background:#fff3e0;border-left:4px solid #ff6d00;padding:.5rem .75rem;margin-bottom:.75rem;font-size:.85rem;color:#e65100;font-weight:600}
.mock-email-warning{background:#fce4ec;border-left:4px solid #c62828;padding:.5rem .75rem;margin-bottom:.75rem;font-size:.85rem;color:#c62828}

/* ─── WHATSAPP MOCKUP ─── */
.mock-wa{background:#e5ddd5;background-image:url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.65' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");border-radius:8px;padding:1rem;text-align:left;margin-bottom:1.5rem;min-height:120px}
.mock-wa-head{background:#075e54;color:#fff;padding:.5rem .75rem;border-radius:8px 8px 0 0;margin:-1rem -1rem .75rem;display:flex;align-items:center;gap:.5rem;font-size:.85rem}
.mock-wa-avatar{width:32px;height:32px;border-radius:50%;background:#128c7e;display:flex;align-items:center;justify-content:center;font-size:.75rem;color:#fff;font-weight:700}
.mock-wa-name{font-weight:600}
.mock-wa-status{font-size:.72rem;opacity:.8}
.mock-wa-msg{background:#fff;padding:.5rem .75rem;border-radius:0 8px 8px 8px;max-width:85%;margin-bottom:.4rem;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.1)}
.mock-wa-msg.sent{background:#dcf8c6;margin-left:auto;border-radius:8px 0 8px 8px}
.mock-wa-msg p{font-size:.88rem;line-height:1.4;color:#111}
.mock-wa-msg .mock-link{color:#0066cc;text-decoration:underline;word-break:break-all;font-size:.82rem}
.mock-wa-time{font-size:.68rem;color:#999;text-align:right;margin-top:.15rem}

/* ─── SMS MOCKUP ─── */
.mock-sms{background:#000;border-radius:12px;padding:1.25rem;text-align:left;margin-bottom:1.5rem;max-width:340px;margin-left:auto;margin-right:auto}
.mock-sms-head{color:#fff;font-size:.82rem;text-align:center;margin-bottom:.75rem;font-weight:600}
.mock-sms-bubble{background:#1c1c1e;padding:.65rem .85rem;border-radius:16px;color:#fff;font-size:.88rem;line-height:1.4;margin-bottom:.4rem}
.mock-sms-bubble .mock-link{color:#4a9eff;text-decoration:underline;word-break:break-all}
.mock-sms-time{font-size:.68rem;color:#666;text-align:center}

/* ─── WEBSITE MOCKUP ─── */
.mock-site{background:#fff;border-radius:8px;overflow:hidden;text-align:left;border:1px solid #ddd;margin-bottom:1.5rem}
.mock-site-bar{background:#f0f0f0;padding:.35rem .6rem;display:flex;align-items:center;gap:.4rem;border-bottom:1px solid #ddd;font-size:.75rem}
.mock-site-url{flex:1;background:#fff;border:1px solid #ccc;border-radius:10px;padding:.2rem .6rem;color:#333;font-family:monospace;font-size:.72rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mock-site-url .secure{color:#2e7d32}
.mock-site-url .insecure{color:#c62828}
.mock-site-body{padding:1rem}
.mock-site-body h3{font-family:Arial,sans-serif;color:#1a1a1a;margin-bottom:.5rem;font-size:1rem}
.mock-site-body p{font-family:Arial,sans-serif;color:#555;font-size:.85rem;margin-bottom:.5rem;line-height:1.5}
.mock-site-body .mock-input{width:100%;padding:.4rem .6rem;border:1px solid #ccc;border-radius:4px;font-size:.82rem;margin-bottom:.4rem;background:#fafafa;color:#999}
.mock-site-body .mock-btn{display:block;width:100%;padding:.5rem;text-align:center;border-radius:4px;font-weight:600;font-size:.85rem;margin-top:.5rem;color:#fff}