/* IZY AntiSpam sign-in / sign-up screen (layouts/auth.blade.php).
   Brand scene — a phone that blocks calls and files spam SMS — over a backdrop that follows data-bs-theme:
   soft lavender in light mode, night-blue in dark mode. particles.js draws the linked dots (colour swapped
   by the layout script on theme change). Everything is sized to fit one screen without scrolling. */

.izy-auth {
    --izy-bg: #f3f5ff;
    --izy-bg-grad:
        radial-gradient(1100px 650px at 12% 8%, rgba(99, 115, 255, .20) 0%, transparent 60%),
        radial-gradient(900px 600px at 92% 92%, rgba(255, 92, 122, .14) 0%, transparent 60%),
        linear-gradient(160deg, #f8f9ff 0%, #eef0ff 60%, #f6f0fb 100%);
    --izy-glow-1: #ff6b86;
    --izy-glow-2: #7d8bff;
    --izy-glow-opacity: .18;
    --izy-grid: rgba(40, 50, 120, .06);
    --izy-text: #151a3b;
    --izy-muted: #5b6185;
    --izy-chip-bg: rgba(255, 255, 255, .75);
    --izy-chip-border: rgba(40, 50, 120, .14);
    --izy-chip-hover: #fff;
    --izy-ok-bg: #e3f8f0;
    --izy-ok-border: #a9e8d1;
    --izy-ok-text: #087a5b;
    --izy-float-bg: rgba(255, 255, 255, .96);
    --izy-float-text: #1d2140;
    --izy-float-muted: #6b7192;
    --izy-float-shadow: 0 16px 36px rgba(40, 50, 120, .16);
    --izy-card-shadow: 0 24px 60px rgba(40, 50, 120, .16), 0 0 0 1px rgba(40, 50, 120, .06);
    --izy-phone-glow: 0 0 0 1px rgba(255, 255, 255, .12), 0 28px 60px rgba(30, 36, 90, .35), 0 0 50px rgba(99, 115, 255, .25);
    min-height: 100vh;
    background: var(--izy-bg);
    color: var(--izy-text);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
[data-bs-theme="dark"] .izy-auth {
    --izy-bg: #070b1f;
    --izy-bg-grad:
        radial-gradient(1200px 700px at 15% 10%, #2a2f86 0%, transparent 60%),
        radial-gradient(900px 600px at 90% 90%, #3b1b5c 0%, transparent 60%),
        linear-gradient(160deg, #121a46 0%, #070b1f 70%);
    --izy-glow-1: #ff3b57;
    --izy-glow-2: #4f6bff;
    --izy-glow-opacity: .28;
    --izy-grid: rgba(255, 255, 255, .04);
    --izy-text: #eef1ff;
    --izy-muted: rgba(226, 231, 255, .72);
    --izy-chip-bg: rgba(255, 255, 255, .08);
    --izy-chip-border: rgba(255, 255, 255, .18);
    --izy-chip-hover: rgba(255, 255, 255, .16);
    --izy-ok-bg: rgba(10, 179, 156, .16);
    --izy-ok-border: rgba(46, 230, 196, .4);
    --izy-ok-text: #8ff3dd;
    --izy-float-bg: rgba(26, 31, 61, .92);
    --izy-float-text: #fff;
    --izy-float-muted: rgba(226, 231, 255, .72);
    --izy-float-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    --izy-card-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
    --izy-phone-glow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(79, 107, 255, .25);
}

/* ------------------------------------------------------------------ backdrop */
.izy-auth-bg { position: fixed; inset: 0; overflow: hidden; background: var(--izy-bg-grad); }
.izy-auth-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: var(--izy-glow-opacity); }
.izy-auth-glow-1 { width: 520px; height: 520px; left: 18%; top: 28%; background: var(--izy-glow-1); animation: izyGlow 12s ease-in-out infinite alternate; }
.izy-auth-glow-2 { width: 460px; height: 460px; right: 4%; top: -8%; background: var(--izy-glow-2); animation: izyGlow 14s ease-in-out infinite alternate-reverse; }
.izy-auth-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(var(--izy-grid) 1px, transparent 1px), linear-gradient(90deg, var(--izy-grid) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 40% 45%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 40% 45%, #000 0%, transparent 75%);
}
.izy-auth-particles { position: absolute; inset: 0; }
.izy-auth-particles canvas { display: block; }
@keyframes izyGlow { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, -30px) scale(1.12); } }

/* ------------------------------------------------------------------ page frame (one screen) */
.izy-auth-page { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
.izy-auth-top { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: .5rem; }
.izy-auth-logo { display: inline-flex; align-items: center; gap: .65rem; color: var(--izy-text); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; }
.izy-auth-logo:hover { color: var(--izy-text); }
.izy-auth-logo img { box-shadow: 0 6px 18px rgba(22, 163, 74, .3); }
.izy-auth-chip {
    display: inline-flex; align-items: center; gap: .4rem; height: 38px; padding: 0 .9rem; border-radius: 50rem;
    border: 1px solid var(--izy-chip-border); background: var(--izy-chip-bg); color: var(--izy-text); font-size: 14px; font-weight: 500;
    backdrop-filter: blur(8px); transition: background .15s ease;
}
.izy-auth-chip:hover { background: var(--izy-chip-hover); color: var(--izy-text); }
.izy-auth-chip i { font-size: 18px; }
.izy-auth-theme { width: 38px; padding: 0; justify-content: center; }
.izy-auth-theme .izy-theme-light { display: none; }
[data-bs-theme="dark"] .izy-auth-theme .izy-theme-light { display: inline-block; }
[data-bs-theme="dark"] .izy-auth-theme .izy-theme-dark { display: none; }

.izy-auth-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: .5rem; padding-bottom: .75rem; }
.izy-auth-main > .row { width: 100%; margin-left: 0; margin-right: 0; }
.izy-auth-footer { padding-top: .5rem; padding-bottom: 1rem; text-align: center; font-size: 12.5px; color: var(--izy-muted); }
.izy-auth-footer a { color: var(--izy-muted); text-decoration: underline; text-underline-offset: 2px; }
.izy-auth-footer a:hover { color: var(--izy-text); }

/* ------------------------------------------------------------------ hero copy */
.izy-auth-eyebrow {
    display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem .35rem .6rem; border-radius: 50rem;
    background: var(--izy-ok-bg); border: 1px solid var(--izy-ok-border); color: var(--izy-ok-text); font-size: 13px; font-weight: 600;
}
.izy-auth-eyebrow i { font-size: 18px; }
.izy-auth-title { margin: .85rem 0 .6rem; color: var(--izy-text); font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.45rem); font-weight: 800; line-height: 1.18; letter-spacing: -.02em; max-width: 620px; }
.izy-auth-title span { background: linear-gradient(90deg, #ff4d6a, #ff9a4d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.izy-auth-lead { color: var(--izy-muted); font-size: 15.5px; max-width: 540px; margin-bottom: 0; }

/* ------------------------------------------------------------------ illustration: phone + floating chips
   The phone keeps its real size and proportions (never scaled). The scene takes whatever height is left
   under the headline and crops the phone at its bottom edge with a fade, so short screens just show less
   of the (empty) lower half instead of a squashed phone. */
.izy-scene {
    position: relative; max-width: 780px; height: 680px; margin: calc(1.75rem - 40px) -80px 0; overflow: hidden;
    mask-image: linear-gradient(to bottom, #000 calc(100% - 110px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 110px), transparent);
}
.izy-scene-inner { position: absolute; top: 40px; bottom: 0; left: 80px; right: 80px; }
.izy-radar { position: absolute; left: 50%; top: 250px; width: 0; height: 0; }
.izy-radar span {
    position: absolute; left: -230px; top: -230px; width: 460px; height: 460px; border-radius: 50%;
    border: 1.5px solid rgba(255, 107, 122, .5); animation: izyRadar 4.5s ease-out infinite; opacity: 0;
}
.izy-radar span:nth-child(2) { animation-delay: 1.5s; }
.izy-radar span:nth-child(3) { animation-delay: 3s; }
@keyframes izyRadar { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }

.izy-phone {
    position: absolute; left: 50%; top: 8px; width: 300px; height: 620px; transform: translateX(-50%);
    padding: 48px 14px 16px; border-radius: 46px;
    background: linear-gradient(180deg, rgba(40, 48, 120, .96), rgba(14, 18, 52, .98));
    border: 9px solid #05081a; box-shadow: var(--izy-phone-glow);
}
.izy-phone-notch { position: absolute; top: 9px; left: 50%; width: 92px; height: 24px; transform: translateX(-50%); border-radius: 20px; background: #05081a; }
.izy-phone-time { text-align: center; color: #fff; font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.izy-phone-date { text-align: center; color: rgba(226, 231, 255, .72); font-size: 12.5px; margin: .35rem 0 1.15rem; }
.izy-notice {
    display: flex; align-items: center; gap: .55rem; padding: .55rem .6rem; margin-bottom: .5rem; border-radius: 16px;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .1); animation: izyNotice .6s ease both;
}
.izy-notice:nth-of-type(2) { animation-delay: .25s; }
.izy-notice:nth-of-type(3) { animation-delay: .5s; }
.izy-notice:nth-of-type(4) { animation-delay: .75s; }
.izy-notice-call { background: rgba(255, 77, 94, .16); border-color: rgba(255, 77, 94, .4); }
@keyframes izyNotice { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.izy-notice-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; }
.izy-notice-title { color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.izy-notice-text { color: rgba(226, 231, 255, .72); font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.izy-strike { text-decoration: line-through; text-decoration-color: rgba(255, 107, 122, .8); }
.izy-tag { flex-shrink: 0; margin-left: auto; padding: .15rem .45rem; border-radius: 50rem; font-size: 10px; font-weight: 700; }
.izy-tag-danger { background: rgba(255, 77, 94, .25); color: #ffb3bb; }
.izy-tag-warning { background: rgba(247, 184, 75, .22); color: #ffd98f; }
.izy-phone-safe {
    margin-top: .75rem; padding: .55rem; border-radius: 14px; text-align: center;
    background: rgba(10, 179, 156, .16); border: 1px solid rgba(10, 179, 156, .4); color: #9ff0e2; font-size: 12px; font-weight: 600;
}
.izy-phone-dock { position: absolute; left: 30px; right: 30px; bottom: 34px; display: flex; justify-content: space-between; }
.izy-phone-dock span { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .12); backdrop-filter: blur(6px); }
.izy-dot { display: inline-block; width: 8px; height: 8px; margin-right: .25rem; border-radius: 50%; background: #2ee6c4; box-shadow: 0 0 0 0 rgba(46, 230, 196, .6); animation: izyPing 1.8s infinite; vertical-align: 0; }
@keyframes izyPing { 70% { box-shadow: 0 0 0 8px rgba(46, 230, 196, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 230, 196, 0); } }

.izy-float {
    position: absolute; display: flex; align-items: center; gap: .65rem; padding: .7rem .95rem; border-radius: 16px;
    background: var(--izy-float-bg); color: var(--izy-float-text); font-size: 13px; line-height: 1.25;
    box-shadow: var(--izy-float-shadow); animation: izyFloat 6s ease-in-out infinite;
}
[data-bs-theme="dark"] .izy-float { border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(8px); }
.izy-float small { color: var(--izy-float-muted); font-size: 11.5px; }
.izy-float-icon { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; background: currentColor; }
.izy-float-icon i { color: #fff; }
.izy-float-1 { left: 0; top: 78px; }
.izy-float-2 { right: 0; top: 178px; animation-delay: -2s; }
.izy-float-3 { left: 24px; top: 278px; animation-delay: -4s; }
@keyframes izyFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ------------------------------------------------------------------ form card */
.izy-auth-form { max-width: 460px; margin-left: auto; margin-right: auto; }
.izy-auth-card { border: 0; border-radius: 20px; overflow: hidden; margin: 0; box-shadow: var(--izy-card-shadow); }
.izy-auth-card .card-body { padding: 1.75rem 2rem; }
.izy-auth-card .card-footer { padding: .85rem 2rem; background: var(--vz-tertiary-bg, #f3f6f9); border-top: 1px solid var(--vz-border-color); }
.izy-auth-card-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .3rem; color: var(--vz-heading-color, var(--vz-body-color)); }
.izy-auth-card .form-label { font-weight: 500; margin-bottom: .35rem; }
.izy-auth-card .form-control { height: 44px; border-radius: 10px; }
.izy-input-icon { position: relative; }
.izy-input-icon > i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--vz-secondary-color); pointer-events: none; }
.izy-input-icon > .form-control { padding-left: 2.5rem; }
.izy-input-action { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); padding: .25rem .6rem; font-size: 18px; text-decoration: none; }
.izy-auth-submit { height: 46px; border-radius: 10px; font-weight: 600; font-size: 15px; box-shadow: 0 8px 20px rgba(var(--vz-primary-rgb), .35); }
.izy-auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: var(--vz-secondary-color); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.izy-auth-divider::before, .izy-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--vz-border-color); }
.izy-auth-terms { font-size: 12.5px; line-height: 1.45; }

[data-bs-theme="dark"] .izy-auth-card { background: #1a1f3d; }
[data-bs-theme="dark"] .izy-auth-card .card-footer { background: rgba(255, 255, 255, .03); }
[data-bs-theme="dark"] .izy-auth-card .form-control { background-color: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }

/* ------------------------------------------------------------------ desktop: exactly one screen
   Page is locked to the viewport; the hero stacks headline + scene, the scene flexes into the leftover
   height (cropping the phone), the form column centres itself. */
@media (min-width: 992px) {
    .izy-auth-page { height: 100vh; min-height: 0; overflow: hidden; }
    .izy-auth-main { min-height: 0; padding-bottom: 0; justify-content: stretch; }
    .izy-auth-row { flex: 1; min-height: 0; }
    .izy-auth-hero { display: flex; flex-direction: column; align-items: flex-start; min-height: 0; padding-top: clamp(.5rem, 5vh, 3.5rem); }
    .izy-auth-hero .izy-scene { flex: 1 1 auto; align-self: stretch; min-height: 0; max-height: 680px; height: auto; }
    .izy-auth-side { display: flex; flex-direction: column; justify-content: center; padding-bottom: 1rem; }
}
@media (min-width: 992px) and (max-height: 800px) {
    .izy-auth-top { padding-top: .75rem; padding-bottom: .25rem; }
    .izy-auth-title { margin: .6rem 0 .45rem; font-size: clamp(1.4rem, .95rem + 1.3vw, 2.1rem); }
    .izy-auth-lead { font-size: 14.5px; }
    .izy-auth-hero .izy-scene { margin-top: calc(1.1rem - 40px); }
    .izy-auth-card .card-body { padding: 1.35rem 1.75rem; }
    .izy-auth-card .card-footer { padding: .7rem 1.75rem; }
    .izy-auth-card .form-control { height: 40px; }
    .izy-auth-submit { height: 42px; }
    .izy-auth-card .mb-3 { margin-bottom: .7rem !important; }
    .izy-auth-card .mb-4 { margin-bottom: 1rem !important; }
    .izy-auth-card-title { font-size: 1.35rem; }
    .izy-auth-footer { padding-bottom: .6rem; }
}
@media (min-width: 992px) and (max-height: 720px) {
    .izy-auth-lead { display: none; }
    .izy-auth-card .card-body { padding: 1.1rem 1.5rem; }
    .izy-auth-card .card-footer { padding: .6rem 1.5rem; }
    .izy-auth-card .form-control { height: 38px; }
    .izy-auth-divider { margin: .7rem 0; }
    .izy-float-3 { display: none; }
}
/* Too short to show the phone meaningfully: drop it rather than shrink it. */
@media (min-width: 992px) and (max-height: 600px) {
    .izy-auth-hero .izy-scene { display: none !important; }
    .izy-auth-page { height: auto; min-height: 100vh; overflow: visible; }
}

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 991.98px) {
    .izy-auth-hero { text-align: center; }
    .izy-auth-title, .izy-auth-lead { margin-left: auto; margin-right: auto; }
    .izy-auth-lead { font-size: 15px; }
}
@media (max-width: 575.98px) {
    .izy-auth-top { padding-top: .9rem; padding-bottom: .5rem; }
    .izy-auth-logo { font-size: 1.05rem; }
    .izy-auth-logo img { height: 34px; }
    .izy-auth-card .card-body { padding: 1.5rem 1.25rem; }
    .izy-auth-card .card-footer { padding: 1rem 1.25rem; }
    .izy-auth-hero .izy-auth-lead { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .izy-auth *, .izy-auth *::before, .izy-auth *::after { animation: none !important; }
}