/* ======================================
FixFinder Neutral Theme-Friendly Style
====================================== */

#fixfinder-app{

--ff-accent:var(--wp--preset--color--primary,#2271b1);
--ff-accent-hover:var(--wp--preset--color--primary,#2271b1);

--ff-text:var(--wp--preset--color--foreground,#1f2937);
--ff-muted:#6b7280;

--ff-border:#e5e7eb;

font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

max-width:650px !important;
margin:40px auto !important;
color:var(--ff-text);

}
#ff-result-screen button{
margin-top:12px;
}
/* Auswahlkarten vor dem Start etwas präsenter */
#fixfinder-app .ff-card{
background:#fcfcfd;
border:1px solid #d9dee7;
border-radius:16px;
padding:24px;
margin:18px 0;
box-shadow:0 4px 14px rgba(15,23,42,0.04);
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

/* leichte Betonung beim Überfahren */
#fixfinder-app .ff-card:hover{
border-color:#c8d2df;
box-shadow:0 8px 22px rgba(15,23,42,0.06);
}
/* ======================================
HEADER
====================================== */
#fixfinder-app .ff-header{
text-align:center !important;
}
.ff-header{
text-align:center;
margin-bottom:14px;
}

.ff-header h2{
margin:0;
font-size:1.6rem;
color:inherit;
}

/* ======================================
MAIN TOOL CARD
====================================== */

.ff-main{

background:#ffffff;

border-radius:16px;
padding:24px;

border:1px solid var(--ff-border);

box-shadow:0 8px 22px rgba(0,0,0,.06);

}


/* ======================================
INNER CARDS
====================================== */

.ff-card{

background:#ffffff;

border-radius:14px;

padding:20px;
margin:18px 0;

border:1px solid var(--ff-border);

}


/* ======================================
FORM
====================================== */

#fixfinder-app label{
color:#667085;
font-size:.78rem;
font-weight:700;
letter-spacing:.04em;
}

/* Dropdown selbst sauberer */
#fixfinder-app select{
width:100%;
padding:14px 16px;
min-height:56px;
border-radius:12px;
border:1px solid #d7dce5;
background:#ffffff;
color:inherit;
font-size:16px;
box-shadow:inset 0 1px 2px rgba(15,23,42,0.03);
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

/* Fokus deutlicher */
#fixfinder-app select:focus{
outline:none;
border-color:var(--ff-accent);
box-shadow:0 0 0 3px rgba(34,113,177,.12);
}

/* ======================================
STEP TEXT
====================================== */

.ff-step-counter{

font-size:14px;
color:var(--ff-muted);
margin-bottom:10px;

}

.ff-step-text{

font-size:1.25rem;
font-weight:600;
line-height:1.5;

margin-bottom:8px;

}


/* ======================================
PROGRESSBAR
====================================== */

.ff-progress{

width:100%;
height:8px;

background:#f1f5f9;

border-radius:6px;
overflow:hidden;

margin-bottom:18px;

}

.ff-progress-fill{

height:100%;
width:0;

background:currentColor;

transition:width .35s ease;

}


/* ======================================
ANSWER AREA
====================================== */

#ff-answer-area{

display:flex;
justify-content:center;
align-items:center;

gap:10px;
flex-wrap:wrap;

margin-top:10px;

}

#ff-answers{

display:flex;
gap:10px;

}


/* ======================================
BUTTONS
Theme übernimmt Farben
====================================== */

#fixfinder-app button{

padding:12px 20px;

border-radius:8px;

font-size:15px;
font-weight:600;

cursor:pointer;

}


/* BACK BUTTON */

#ff-back-btn{
background:#e5e7eb;
color:#111827;
}


/* ======================================
REPORT META
====================================== */

.ff-meta{

display:flex;
justify-content:center;
gap:18px;

flex-wrap:wrap;

font-size:14px;
color:var(--ff-muted);

}


/* ======================================
PATH HISTORY
====================================== */

.ff-path-step{
margin-bottom:12px;
}

.ff-path-answer{
opacity:.8;
margin-left:6px;
}


/* ======================================
MOBILE
====================================== */

@media (max-width:640px){

#fixfinder-app{
margin:20px 12px;
}

.ff-main{
padding:18px;
}

.ff-card{
padding:18px;
}

.ff-step-text{
font-size:1.15rem;
}

#ff-answer-area{
flex-direction:column;
align-items:stretch;
}

#ff-answers{
flex-direction:column;
width:100%;
}

#fixfinder-app button{
width:100%;
padding:12px;
font-size:14px;
}

}


/* ======================================
PRINT
====================================== */

@media print{

body *{
visibility:hidden;
}

#ff-report,
#ff-report *{
visibility:visible;
}

#ff-report{
position:absolute;
left:0;
top:0;
width:100%;
}

#ff-print-btn,
#ff-pdf-btn,
#ff-reset-btn{
display:none;
}

.ff-card{
border:1px solid #ddd;
padding:20px;
margin-bottom:15px;
}

}