/* =========================================
   KRAZYJO FAQ PRO - FRONT END
========================================= */

.kjfaq-shell,
.kjfaq-shell *{
box-sizing:border-box;
}

.kjfaq-shell{
position:relative;
padding:72px 20px;
background:
radial-gradient(circle at top left, rgba(58,130,246,.08), transparent 34%),
linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%);
overflow:hidden;
}

.kjfaq-bg{
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(135deg, rgba(30,58,138,.035), rgba(34,197,94,.03));
}

.kjfaq-container{
position:relative;
max-width:980px;
margin:0 auto;
z-index:1;
}

.kjfaq-header{
text-align:center;
max-width:760px;
margin:0 auto 38px;
}

.kjfaq-kicker{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:999px;
background:rgba(37,99,235,.09);
border:1px solid rgba(37,99,235,.12);
color:#1d4ed8;
font-size:12px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:16px;
}

.kjfaq-header h2{
margin:0 0 12px;
font-size:clamp(32px,4vw,48px);
line-height:1.08;
font-weight:800;
color:#0f172a;
}

.kjfaq-header p{
margin:0;
font-size:17px;
line-height:1.75;
color:#5b6475;
}

.kjfaq-list{
display:grid;
gap:18px;
}

.kjfaq-item{
background:rgba(255,255,255,.9);
border:1px solid rgba(148,163,184,.18);
border-radius:20px;
box-shadow:0 15px 45px rgba(15,23,42,.06);
overflow:hidden;
backdrop-filter:blur(8px);
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.kjfaq-item:hover{
transform:translateY(-2px);
box-shadow:0 18px 50px rgba(15,23,42,.10);
border-color:rgba(59,130,246,.24);
}

.kjfaq-question{
width:100%;
border:0;
background:linear-gradient(135deg,#16357a 0%,#1e3a8a 45%,#2563eb 100%);
color:#fff;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:22px 26px;
text-align:left;
cursor:pointer;
font:inherit;
font-size:18px;
font-weight:700;
line-height:1.4;
position:relative;
}

.kjfaq-question:focus-visible{
outline:3px solid rgba(59,130,246,.35);
outline-offset:-3px;
}

.kjfaq-question-text{
max-width:calc(100% - 42px);
}

.kjfaq-icon{
position:relative;
width:20px;
height:20px;
flex:0 0 20px;
}

.kjfaq-icon::before,
.kjfaq-icon::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:18px;
height:2px;
background:#fff;
border-radius:999px;
transform:translate(-50%,-50%);
transition:transform .25s ease, opacity .2s ease;
}

.kjfaq-icon::after{
transform:translate(-50%,-50%) rotate(90deg);
}

.kjfaq-item.is-open .kjfaq-icon::after{
transform:translate(-50%,-50%) rotate(0deg);
opacity:0;
}

.kjfaq-answer-wrap{
display:block;
}

.kjfaq-answer{
padding:24px 26px 26px;
background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
color:#334155;
font-size:16px;
line-height:1.8;
}

.kjfaq-answer > div > *:first-child{
margin-top:0;
}

.kjfaq-answer > div > *:last-child{
margin-bottom:0;
}

.kjfaq-answer p,
.kjfaq-answer ul,
.kjfaq-answer ol{
margin:0 0 14px;
}

.kjfaq-answer ul,
.kjfaq-answer ol{
padding-left:22px;
}

.kjfaq-answer li{
margin-bottom:8px;
}

.kjfaq-answer strong{
color:#0f172a;
font-weight:700;
}

.kjfaq-cta{
margin-top:30px;
padding:30px 28px;
border-radius:22px;
background:linear-gradient(135deg,#0f274f 0%,#14386f 45%,#0b5ed7 100%);
color:#fff;
box-shadow:0 18px 48px rgba(15,23,42,.14);
text-align:center;
}

.kjfaq-cta h3{
margin:0 0 12px;
font-size:28px;
line-height:1.2;
font-weight:800;
}

.kjfaq-cta p{
margin:0;
font-size:16px;
line-height:1.8;
color:rgba(255,255,255,.88);
}

.kjfaq-button{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:18px;
padding:14px 22px;
border-radius:999px;
background:#fff;
color:#11366d;
font-weight:800;
text-decoration:none;
transition:transform .2s ease, box-shadow .2s ease;
box-shadow:0 12px 28px rgba(0,0,0,.16);
}

.kjfaq-button:hover{
transform:translateY(-2px);
box-shadow:0 16px 30px rgba(0,0,0,.20);
}

@media (max-width: 767px){
.kjfaq-shell{
padding:52px 14px;
}

.kjfaq-question{
padding:18px 18px;
font-size:16px;
}

.kjfaq-answer{
padding:18px 18px 20px;
font-size:15px;
line-height:1.72;
}

.kjfaq-header{
margin-bottom:28px;
}

.kjfaq-cta{
padding:24px 18px;
}

.kjfaq-cta h3{
font-size:24px;
}
}