:root{
--pink-1:#D46A8B;
--pink-2:#E57389;
--panel:#f5f5f4;
--line:#d8dcda;
--text:#4c4a4b;
--menu:#eaedeb;
--menu-border:#d5d9d6;
--yellow-bg:#f4ebb2;
--yellow-border:#dfcb37;
--yellow-text:#c67b00;
--shadow:0 28px 50px rgba(76,74,75,.18);
}
#megalmodtad-widget-root,
#megalmodtad-widget-root *{box-sizing:border-box}
#megalmodtad-widget-root{font-family:Arial,Helvetica,sans-serif;color:var(--text)}
.mgw-shell{
position:fixed;
right:22px;
bottom:18px;
z-index:99999;
width:min(380px,calc(100vw - 24px));
box-shadow:var(--shadow);
border-radius:28px;
overflow:hidden;
}
.mgw-card{
background:var(--panel);
border:1px solid #dfe2df;
border-radius:28px;
overflow:hidden;
animation:mgwPopIn .28s ease-out;
}
.mgw-hidden .mgw-card{display:none}
.mgw-launcher{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-left:auto;
padding:14px 18px;
border-radius:999px;
border:0;
cursor:pointer;
color:#fff;
background:linear-gradient(90deg,var(--pink-1) 0%,var(--pink-2) 100%);
box-shadow:0 18px 26px rgba(217,106,131,.3);
font-size:14px;
font-weight:700;
animation:mgwBob 2.8s ease-in-out infinite;
}
.mgw-launcher svg{width:20px;height:20px}
.mgw-header{
background:linear-gradient(90deg,var(--pink-1) 0%,var(--pink-2) 100%);
color:#fff;
padding:16px 18px;
display:flex;
align-items:center;
justify-content:space-between;
}
.mgw-header-left{display:flex;align-items:center;gap:12px}
.mgw-icon{
width:36px;
height:36px;
border-radius:50%;
background:#fff1f4;
display:grid;
place-items:center;
flex:0 0 auto;
}
.mgw-icon svg{width:24px;height:24px;color:#d96581}
.mgw-title strong{display:block;font-size:15px;line-height:1.2}
.mgw-title span{display:block;font-size:12px;opacity:.95;margin-top:3px}
.mgw-header-actions{display:flex;align-items:center;gap:8px}
.mgw-back{
border:0;
background:rgba(255,255,255,.2);
color:#fff;
border-radius:999px;
padding:8px 12px;
font-size:13px;
cursor:pointer;
display:none;
}
.mgw-back.show{display:inline-flex;align-items:center;gap:4px}
.mgw-close{
border:0;
background:transparent;
color:#fff;
font-size:28px;
line-height:1;
cursor:pointer;
padding:0 2px;
}
.mgw-body{padding:18px}
.mgw-bubble{
background:linear-gradient(90deg,var(--pink-1) 0%,var(--pink-2) 100%);
color:#fff;
border-radius:0 24px 24px 24px;
padding:18px;
font-weight:700;
line-height:1.5;
font-size:14px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
animation:mgwBubbleIn .22s ease-out;
}
.mgw-menu{display:grid;gap:10px;margin-top:16px}
.mgw-btn,
.mgw-menu a.mgw-btn{
display:block;
width:100%;
text-decoration:none;
border:1px solid var(--menu-border);
background:var(--menu);
color:var(--text);
border-radius:18px;
padding:15px 18px;
font-size:13px;
line-height:1.35;
text-align:center;
transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background-color .18s ease;
box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
cursor:pointer;
}
.mgw-btn:hover,
.mgw-menu a.mgw-btn:hover{
transform:translateY(-1px);
filter:brightness(.995);
box-shadow:0 8px 18px rgba(0,0,0,.05);
}
.mgw-pink{
background:linear-gradient(90deg,var(--pink-1) 0%,var(--pink-2) 100%)!important;
border-color:#dd8398!important;
color:#fff!important;
font-weight:700;
}
.mgw-divider{
height:1px;
background:#d7dbd8;
margin:18px -18px 0;
}
.mgw-fixed{padding-top:16px}
.mgw-fixed-text{
font-size:12px;
line-height:1.45;
color:#6d6b6c;
margin-bottom:10px;
}
.mgw-helper{
background:#fff;
border:1px solid #e0e4e1;
border-radius:16px;
padding:12px 14px;
font-size:12px;
line-height:1.5;
color:#737072;
}
.mgw-field{margin-bottom:10px}
.mgw-field label{
display:block;
font-size:13px;
font-weight:700;
margin-bottom:6px;
color:#676465;
}
.mgw-field input{
width:100%;
border:1px solid #d9dcda;
border-radius:16px;
padding:13px 14px;
font-size:14px;
background:#fff;
color:#4b494a;
}
.mgw-field input:focus{
outline:2px solid rgba(219,112,136,.22);
border-color:#db7088;
}
.mgw-success{
background:#fff;
border:1px solid #e0e4e1;
border-radius:16px;
padding:14px;
font-size:13px;
line-height:1.55;
}
@keyframes mgwBob{
0%,100%{transform:translateY(0) scale(1)}
50%{transform:translateY(-3px) scale(1.02)}
}
@keyframes mgwPopIn{
0%{opacity:0;transform:scale(.96) translateY(10px)}
100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes mgwBubbleIn{
0%{opacity:0;transform:translateY(8px) scale(.985)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
@media (max-width:700px){
.mgw-shell{left:12px;right:12px;width:auto;bottom:12px}
.mgw-header{padding:18px 18px}
.mgw-body{padding:16px}
.mgw-btn,.mgw-menu a.mgw-btn{
font-size:16px;
padding:16px 16px;
border-radius:20px;
}
}