/* Raise a Ticket - customer portal. No images, no web fonts: loads fast on slow connections. */

.rat-app{
	--b:#2f6bff;--v:#7c3aed;--p:#ec4899;
	--bg:#0b0b1c;--line:rgba(255,255,255,.12);--tx:#f4f4ff;--mut:#a9aac6;
	--grad:linear-gradient(90deg,var(--b),var(--v),var(--p));
	position:relative;overflow:hidden;isolation:isolate;
	max-width:900px;margin:24px auto;padding:clamp(18px,4vw,44px);
	border-radius:26px;background:var(--bg);color:var(--tx);
	font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color-scheme:dark;box-sizing:border-box;text-align:left;
}
.rat-app *,.rat-app *::before,.rat-app *::after{box-sizing:border-box}
.rat-app [hidden]{display:none!important}
.rat-app h2,.rat-app h3,.rat-app p{margin:0;padding:0;color:inherit;font-family:inherit;text-transform:none;letter-spacing:normal}
.rat-app a{color:inherit}

/* soft background glow: transform-only animation (cheap for the GPU) */
.rat-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.rat-bg i{position:absolute;width:560px;height:560px;border-radius:50%;will-change:transform}
.rat-bg i:nth-child(1){left:-220px;top:-240px;background:radial-gradient(circle,rgba(47,107,255,.40),transparent 65%);animation:rat-drift1 18s ease-in-out infinite alternate}
.rat-bg i:nth-child(2){right:-240px;bottom:-260px;background:radial-gradient(circle,rgba(236,72,153,.32),transparent 65%);animation:rat-drift2 22s ease-in-out infinite alternate}

.rat-shell{position:relative;max-width:680px;margin:0 auto;animation:rat-in .6s cubic-bezier(.2,.8,.2,1) both}

/* headings */
.rat-hero{text-align:center;margin-bottom:26px}
.rat-hero h2{font-size:clamp(26px,5.6vw,40px);line-height:1.15;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.rat-hero p{color:var(--mut);max-width:440px;margin:0 auto}
.rat-h3{font-size:18px;font-weight:700;margin-bottom:8px}
.rat-muted{color:var(--mut)}

.rat-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
.rat-hello{display:block;color:var(--mut);font-size:14px}
.rat-top h2{font-size:clamp(22px,5vw,30px);font-weight:800;line-height:1.2;letter-spacing:-.01em;word-break:break-word}
.rat-out{flex:none;padding:9px 16px;border-radius:999px;border:1px solid var(--line);text-decoration:none;font-size:14px;color:#fff;transition:background .2s}
.rat-out:hover{background:rgba(255,255,255,.08)}

/* the card: its top edge carries the one continuous animation */
.rat-card{position:relative;margin-bottom:18px;padding:clamp(18px,4vw,32px);border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.045)}
.rat-card::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--b),var(--v),var(--p),var(--b));background-size:300% 100%;animation:rat-flow 7s linear infinite}

/* steps */
.rat-step{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:17px;font-weight:700}
.rat-step:not(:first-child){margin-top:28px}
.rat-n{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--b),var(--v),var(--p))}

/* fields */
.rat-field{display:block;margin:0 0 16px;position:relative}
.rat-lbl{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:#d0d1ea}
.rat-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rat-app .rat-in{
	display:block;width:100%;height:auto;margin:0;padding:13px 14px;
	border:1px solid var(--line);border-radius:12px;background-color:rgba(255,255,255,.06);
	color:#fff;font:inherit;font-size:16px;line-height:1.3;box-shadow:none;outline:0;
	-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s,background-color .2s;
}
.rat-app .rat-in::placeholder{color:#8a8bab;opacity:1}
.rat-app .rat-in:focus{border-color:var(--v);box-shadow:0 0 0 3px rgba(124,58,237,.35);background-color:rgba(255,255,255,.09)}
.rat-app select.rat-in{padding-right:38px;background-repeat:no-repeat;background-position:right 14px center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a9aac6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.rat-app select.rat-in option{background:#14142b;color:#fff}
.rat-app textarea.rat-in{min-height:130px;resize:vertical}
.rat-count{display:block;margin-top:4px;text-align:right;font-size:12px;color:var(--mut)}
.rat-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.rat-wide{grid-column:1/-1}
.rat-note{margin:-4px 0 4px;padding:10px 14px;border-radius:12px;font-size:14px;color:#dcd7ff;background:rgba(124,58,237,.16);border:1px solid rgba(124,58,237,.35)}

.rat-pw{position:relative;display:block}
.rat-pw .rat-in{padding-right:70px}
.rat-app .rat-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:7px 10px;border:0;border-radius:8px;background:transparent;color:var(--mut);font:inherit;font-size:13px;cursor:pointer}
.rat-app .rat-eye:hover{color:#fff}

.rat-check{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-size:14px;color:#d0d1ea;cursor:pointer}
.rat-check input{width:18px;height:18px;margin:0;accent-color:var(--v)}

/* service cards */
.rat-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.rat-svc{position:relative;display:block;cursor:pointer}
.rat-svc input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.rat-svc-in{position:relative;display:block;height:100%;padding:16px 44px 16px 16px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.04);transition:transform .2s,border-color .2s,box-shadow .25s,background .25s}
.rat-svc:hover .rat-svc-in{transform:translateY(-3px);border-color:rgba(124,58,237,.65)}
.rat-svc input:focus-visible+.rat-svc-in{outline:2px solid #fff;outline-offset:2px}
.rat-svc input:checked+.rat-svc-in{border-color:transparent;background:linear-gradient(#17173a,#17173a) padding-box,var(--grad) border-box;box-shadow:0 10px 28px rgba(124,58,237,.35)}
.rat-ico{display:grid;place-items:center;width:44px;height:44px;margin-bottom:10px;border-radius:12px;font-size:22px;font-style:normal;background:rgba(255,255,255,.07)}
.rat-svc strong{display:block;font-size:16px;line-height:1.3}
.rat-svc em{display:block;margin-top:2px;font-size:13px;font-style:normal;color:var(--mut)}
.rat-tick{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.28);transition:background .2s,border-color .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.rat-tick::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .2s .05s}
.rat-svc input:checked+.rat-svc-in .rat-tick{background:var(--grad);border-color:transparent;transform:scale(1.1)}
.rat-svc input:checked+.rat-svc-in .rat-tick::after{transform:rotate(45deg) scale(1)}

/* buttons */
.rat-app .rat-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:22px 0 0;padding:15px 22px;border:0;border-radius:14px;color:#fff;font-family:inherit;font-size:16px;font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;overflow:hidden;background:var(--grad);background-size:200% 100%;box-shadow:0 10px 26px rgba(124,58,237,.4);transition:transform .2s,box-shadow .2s,background-position .5s}
.rat-app .rat-btn:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 14px 32px rgba(124,58,237,.5)}
.rat-app .rat-btn:active{transform:scale(.98)}
.rat-app .rat-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.rat-app .rat-btn-ghost{background:rgba(255,255,255,.07);box-shadow:none;border:1px solid var(--line)}
.rat-app .rat-btn-ghost:hover{background:rgba(255,255,255,.12);box-shadow:none}
.rat-app .rat-btn.rat-busy{pointer-events:none;opacity:.9}
.rat-app .rat-btn.rat-busy::after{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:rat-spin .8s linear infinite}

/* messages */
.rat-msg{margin-top:12px;border-radius:12px;font-size:14px}
.rat-msg.rat-err{padding:11px 14px;color:#ffc2c2;background:rgba(239,68,68,.13);border:1px solid rgba(239,68,68,.45)}
.rat-msg.rat-ok{padding:11px 14px;color:#bff3d2;background:rgba(34,197,94,.13);border:1px solid rgba(34,197,94,.45)}
.rat-shake{animation:rat-shake .4s}
.rat-foot{margin-top:16px;text-align:center;font-size:13px;color:var(--mut)}

/* success */
.rat-success{text-align:center;padding-top:36px;padding-bottom:30px}
.rat-check-ico{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 18px;border-radius:50%;background:linear-gradient(135deg,var(--b),var(--v),var(--p));animation:rat-ring 1.4s ease-out 1}
.rat-check-ico svg{width:52px;height:52px}
.rat-check-ico path{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50;animation:rat-draw .6s .25s ease forwards}
.rat-when{margin:6px 0 10px;font-size:18px;font-weight:700}

/* history */
.rat-hist .rat-h3{margin-bottom:6px}
.rat-t{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.rat-hist .rat-h3+.rat-t{border-top:0}
.rat-t small{display:block;color:var(--mut);font-size:13px}
.rat-pill{flex:none;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:700}
.rat-pill--open{color:#ffe29a;background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.5)}
.rat-pill--closed{color:#bff3d2;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.45)}

@media (max-width:640px){
	.rat-app{margin:12px auto;border-radius:20px}
	.rat-grid{grid-template-columns:1fr}
}

/* keyframes */
@keyframes rat-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rat-flow{to{background-position:300% 0}}
@keyframes rat-drift1{to{transform:translate3d(110px,80px,0) scale(1.12)}}
@keyframes rat-drift2{to{transform:translate3d(-100px,-70px,0) scale(1.1)}}
@keyframes rat-spin{to{transform:rotate(360deg)}}
@keyframes rat-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes rat-draw{to{stroke-dashoffset:0}}
@keyframes rat-ring{0%{box-shadow:0 0 0 0 rgba(124,58,237,.6)}100%{box-shadow:0 0 0 28px rgba(124,58,237,0)}}

/* slow / data-saver connections and reduced-motion users: no decorative animation */
.rat-lite *,.rat-lite *::before,.rat-lite *::after{animation:none!important;transition:none!important}
.rat-lite .rat-bg{display:none}
.rat-lite .rat-check-ico path{stroke-dashoffset:0!important}
.rat-lite .rat-btn.rat-busy::after{animation:rat-spin 1s linear infinite!important}
@media (prefers-reduced-motion:reduce){
	.rat-app *,.rat-app *::before,.rat-app *::after{animation:none!important;transition:none!important}
	.rat-bg{display:none}
	.rat-check-ico path{stroke-dashoffset:0!important}
	.rat-app .rat-btn.rat-busy::after{animation:rat-spin 1s linear infinite!important}
}