:root.ekb-lock-scroll{overflow:hidden}
.ecotera-kb-search{
--ekb-black:#111214;
--ekb-charcoal:#1b1d21;
--ekb-panel:#202227;
--ekb-soft:#2a2d33;
--ekb-line:rgba(255,255,255,.10);
--ekb-text:#f5f5f5;
--ekb-muted:#aeb2ba;
--ekb-white:#ffffff;
--ekb-shadow:0 24px 80px rgba(0,0,0,.42);
font-family:Arial,Helvetica,sans-serif
}
.ecotera-kb-search *{box-sizing:border-box}
.ekb-bubble{
position:fixed;
bottom:28px;
z-index:999980;
display:flex;
align-items:center;
gap:12px;
min-width:240px;
max-width:310px;
padding:13px 18px 13px 13px;
border:1px solid rgba(255,255,255,.14);
border-radius:24px 24px 6px 24px;
background:linear-gradient(145deg,#24262b,#111214);
color:#fff;
box-shadow:0 18px 45px rgba(0,0,0,.32);
cursor:pointer;
text-align:left;
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease
}
.ekb-position-right .ekb-bubble{right:26px}
.ekb-position-left .ekb-bubble{left:26px;border-radius:24px 24px 24px 6px}
.ekb-bubble:after{
content:"";
position:absolute;
bottom:-9px;
width:18px;
height:18px;
background:#111214;
transform:rotate(45deg);
border-right:1px solid rgba(255,255,255,.12);
border-bottom:1px solid rgba(255,255,255,.12)
}
.ekb-position-right .ekb-bubble:after{right:20px}
.ekb-position-left .ekb-bubble:after{left:20px}
.ekb-bubble:hover{
transform:translateY(-4px);
box-shadow:0 25px 55px rgba(0,0,0,.43);
border-color:rgba(255,255,255,.24)
}
.ekb-bubble-icon{
display:grid;
place-items:center;
flex:0 0 45px;
height:45px;
border-radius:15px;
background:#f3f3f3;
color:#111214
}
.ekb-bubble-icon svg{
width:23px;
height:23px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round
}
.ekb-bubble-copy{display:flex;flex-direction:column;gap:3px}
.ekb-bubble-copy strong{font-size:14px;line-height:1.25}
.ekb-bubble-copy small{color:#b9bdc5;font-size:11px;line-height:1.35}
.ekb-overlay{
position:fixed;
inset:0;
z-index:999990;
display:grid;
place-items:center;
padding:24px;
background:rgba(8,9,11,.78);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px)
}
.ekb-overlay[hidden]{display:none!important}
.ekb-modal{
position:relative;
width:min(1120px,100%);
max-height:min(88vh,900px);
overflow:auto;
padding:clamp(24px,4vw,46px);
border:1px solid var(--ekb-line);
border-radius:28px;
background:
radial-gradient(circle at 90% 0%,rgba(255,255,255,.06),transparent 34%),
linear-gradient(145deg,#24262b,#151619 72%);
color:var(--ekb-text);
box-shadow:var(--ekb-shadow)
}
.ekb-modal:before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
border-radius:inherit;
background:linear-gradient(120deg,rgba(255,255,255,.04),transparent 30%)
}
.ekb-close{
position:absolute;
top:18px;
right:18px;
z-index:2;
display:grid;
place-items:center;
width:42px;
height:42px;
border:1px solid var(--ekb-line);
border-radius:50%;
background:rgba(255,255,255,.05);
color:#fff;
font-size:27px;
line-height:1;
cursor:pointer;
transition:background .2s ease,transform .2s ease
}
.ekb-close:hover{background:rgba(255,255,255,.12);transform:rotate(5deg)}
.ekb-modal-head{max-width:760px;padding-right:45px}
.ekb-eyebrow{
display:inline-block;
margin-bottom:10px;
color:#c9ccd2;
font-size:11px;
font-weight:800;
letter-spacing:.16em
}
.ekb-modal h2{
margin:0 0 12px;
color:#fff;
font-size:clamp(29px,4vw,48px);
line-height:1.08;
letter-spacing:-.035em
}
.ekb-modal-head p{
margin:0;
color:var(--ekb-muted);
font-size:15px;
line-height:1.7
}
.ekb-form{
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(150px,210px) auto;
gap:10px;
margin-top:28px
}
.ekb-search-control{position:relative}
.ekb-search-control svg{
position:absolute;
top:50%;
left:17px;
width:20px;
height:20px;
transform:translateY(-50%);
fill:none;
stroke:#8d929b;
stroke-width:1.8;
stroke-linecap:round
}
.ekb-form input,
.ekb-source-filter{
width:100%;
min-height:58px;
border:1px solid var(--ekb-line);
border-radius:14px;
background:#151619;
color:#fff;
outline:none
}
.ekb-form input{padding:0 18px 0 48px;font-size:15px}
.ekb-source-filter{padding:0 14px}
.ekb-form input::placeholder{color:#858a93}
.ekb-form input:focus,
.ekb-source-filter:focus{
border-color:rgba(255,255,255,.34);
box-shadow:0 0 0 4px rgba(255,255,255,.06)
}
.ekb-submit{
min-height:58px;
padding:0 25px;
border:0;
border-radius:14px;
background:#f1f1f1;
color:#111214;
font-weight:800;
cursor:pointer;
transition:transform .2s ease,background .2s ease
}
.ekb-submit:hover{transform:translateY(-2px);background:#fff}
.ekb-submit:disabled{opacity:.55;cursor:wait}
.ekb-status{
min-height:23px;
margin:17px 0 9px;
color:#aeb2ba;
font-size:13px
}
.ekb-results{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px
}
.ekb-card{
display:flex;
flex-direction:column;
overflow:hidden;
min-width:0;
border:1px solid var(--ekb-line);
border-radius:18px;
background:linear-gradient(155deg,#292c31,#202227);
box-shadow:0 14px 30px rgba(0,0,0,.18);
transition:transform .22s ease,border-color .22s ease
}
.ekb-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2)}
.ekb-card img,
.ekb-placeholder{
display:block;
width:100%;
aspect-ratio:16/9;
object-fit:cover;
background:linear-gradient(135deg,#393c43,#202227)
}
.ekb-placeholder{
display:grid;
place-items:center
}
.ekb-placeholder span{
color:rgba(255,255,255,.22);
font-size:16px;
font-weight:900;
letter-spacing:.22em
}
.ekb-card-body{
display:flex;
flex:1;
flex-direction:column;
padding:17px
}
.ekb-card-meta{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:7px
}
.ekb-source,
.ekb-card-meta small{
display:inline-flex;
align-items:center;
min-height:23px;
padding:4px 8px;
border-radius:999px;
font-size:9px;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase
}
.ekb-source{background:#f2f2f2;color:#17181a}
.ekb-card-meta small{background:rgba(255,255,255,.07);color:#b8bcc4}
.ekb-card h3{
margin:12px 0 8px;
color:#fff;
font-size:18px;
line-height:1.3
}
.ekb-card p{
margin:0 0 17px;
color:#adb1b9;
font-size:13px;
line-height:1.58
}
.ekb-card a{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
min-height:43px;
margin-top:auto;
padding:0 13px;
border:1px solid rgba(255,255,255,.12);
border-radius:10px;
background:#151619;
color:#fff!important;
text-decoration:none!important;
font-size:13px;
font-weight:800;
transition:background .2s ease,border-color .2s ease
}
.ekb-card a:hover{background:#0e0f11;border-color:rgba(255,255,255,.23)}
.ekb-card a span{font-size:17px;font-weight:400}
@media(max-width:900px){
.ekb-results{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
.ekb-overlay{padding:12px;align-items:end}
.ekb-modal{
max-height:92vh;
padding:25px 18px 28px;
border-radius:24px 24px 0 0
}
.ekb-modal-head{padding-right:35px}
.ekb-form{grid-template-columns:1fr}
.ekb-results{grid-template-columns:1fr}
.ekb-bubble{
right:16px!important;
left:16px!important;
bottom:17px;
max-width:none;
min-width:0
}
}
@media(max-width:420px){
.ekb-bubble-copy small{display:none}
.ekb-bubble{width:auto;left:auto!important}
.ekb-position-left .ekb-bubble{left:16px!important;right:auto!important}
} .ekb-card-body{
min-height:285px
}
.ekb-card h3{
display:-webkit-box;
overflow:hidden;
min-height:47px;
-webkit-box-orient:vertical;
-webkit-line-clamp:2
}
.ekb-card p{
display:-webkit-box;
overflow:hidden;
min-height:82px;
max-height:82px;
-webkit-box-orient:vertical;
-webkit-line-clamp:4
}