body {font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-sizeL:16px; max-width: 900px;  margin: 0.5rem auto;  padding: 0 20px;  line-height: 1.6;  background: #fafafa; color: #222;}





button[type='submit'] {

    -webkit-appearance: none;

    appearance: none;

    color: #333; /* This will make "proposition" and "word" visible */

    -webkit-text-fill-color: currentColor;

}





.question {

    font-size: 1.4em;

    font-weight: 600;

    margin-bottom: 10px;

}



.hint {

    font-size: 0.95em;

    color: #666;

    border-left: 3px solid #ddd;

    padding-left: 12px;

    margin-bottom: 20px;

}



.answers {

    margin-top: 20px;

}



.answers button {

    display: block;

    text-align: left;

    background: #fff;

    border: 1px solid #ddd;

    padding: 12px 14px;

    margin-bottom: 10px;

    border-radius: 6px;

    font-size: 1em;

    cursor: pointer;

    transition: background 0.2s;

}



.answers button:hover {

    background: #f2f2f2;

}



.answers button:active {

    background: #e8e8e8;

}



.navigation {

    margin-top: 30px;

    border-top: 1px solid #eee;

    padding-top: 15px;

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}



.back-button {

    background: none;

    border: none;

    color: #0066cc;

    font-size: 0.95em;

    cursor: pointer;

    padding: 8px 0;

}



.restart-button {

    background: green;

    border: none;

    color: white;

    font-size: 0.95em;

    cursor: pointer;

    padding: 8px 16px;

    border-radius: 4px;

    transition: background 0.2s;

}



.restart-button:hover {

    background: #c82333;

}



#restart {background:#7fb4f5}

#restart:hover {background:#0000ee}





.search-container {

    background: #fff;

    padding: 15px;

    border: 1px solid #ddd;

    border-radius: 8px;

    margin-bottom: 20px;

}



.search-input {

    width: 100%;

    padding: 10px 12px;

    font-size: 1em;

    border: 1px solid #ddd;

    border-radius: 4px;

    box-sizing: border-box;

}



.search-results {

    margin-top: 15px;

    max-height: 300px;

    overflow-y: auto;

}



.search-result-item {

    padding: 10px;

    background: #f8f9fa;

    margin-bottom: 8px;

    border-radius: 4px;

    cursor: pointer;

    transition: background 0.2s;

}



.search-result-item:hover {

    background: #e9ecef;

}



.search-result-name {

    font-weight: 600;

    color: #222;

    margin-bottom: 4px;

}



.search-result-id {

    font-size: 0.85em;

    color: #666;

}



.header-controls {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

    gap: 10px;

    flex-wrap: wrap;border-bottom:1px solid #eee

}



.search-toggle {

    background: #0066cc;

    border: none;

    color: white;

    font-size: 0.9em;

    cursor: pointer;

    padding: 8px 16px;

    border-radius: 4px;

    transition: background 0.2s;

}



.search-toggle:hover {

    background: #0052a3;

}



#header1 {margin: 0; font-size: 1.5em}

#header2 p {margin: 0; font-size: 0.9em;}



a {text-decoration: none;}



a:hover, a:active { color: #004999;}



#header1 a:link, #header1 a:visited {color:#0000ee; text-decoration: none;}

#header1 a:hover, #header1 a:active {color:#004999; text-decoration: none}



.bc1 {margin-top:5px;}

.bc2 {background:none;border:none;color:#0000ee;cursor:pointer;padding:0;margin:0 0 0 0.2rem;text-align:left;}



#header-controls1 {display:block;}

#header-controls2 {display: flex; align-items: baseline; gap: 8px;}

#header-controls1 h2 {margin:0; font-size:1.2em;}



.btn-dest {color:#999; font-size:0.85em;}



.form-answer {margin-bottom:15px;}

.form-answer2 {font-size:0.85em; color:#888; margin-bottom:20px;} 



#footer {font-size:0.8rem; border-top:1px solid #eee}

#diag-box {padding:20px; background:#fff; border:1px solid #ddd; border-radius:8px;}



.minor {font-size:0.8rem;}

.minor1 {font-size:1.0rem;}

/*.arabic {font-family: 'Scheherazade New'; direction: rtl;font-size: 1.3rem}*/



[lang="ar"] {font-family: 'Scheherazade New', serif;direction: rtl;font-size: 1.3rem}



.example-arabic {font-size: 1.3rem; text-align: center;}



.arrow-right {padding-right: 0.1rem; color: red; font-size: 1.5rem;}



.explain-diagnosis em {color:red;}



h2 {margin-top: 3.5rem;}



.lh1 {line-height: 1.5rem;;}



.left20 {padding-left:20px;}

.left35 {padding-left:35px;}

.left50 {padding-left:50px;}

.left65 {padding-left:65px;}

.left80 {padding-left:80px;}

.left95 {padding-left:95px;}

.left110 {padding-left:110px;}

.left125 {padding-left:125px;}

.left140 {padding-left:140px;}

.left155 {padding-left:155px;}

.left170 {padding-left:170px;}



#tick {color: green; font-size: 29px;}

.dot {margin: 0 5px;}



.example-box{border: 1px solid #ced8eb;

    background-color: #fdfdfd;

    display: grid;

    padding: 1rem;

    margin: 1rem auto;

    max-width: fit-content;}



.current-node {margin-top:5px}



.cta-container {

    margin-top: 30px;

    margin-bottom: 20px;

}



.cta-button {

    display: inline-block;

    padding: 12px 20px;

    font-size: 1em;

    font-weight: 600;

    color: #fff;

    background-color: #0066cc;

    border-radius: 6px;

    text-decoration: none;

}



.cta-button:hover {

    background-color: grey;

}



    #restart {color:white}





/* Mobile optimization */

@media (max-width: 768px) {

    body {

        margin: 0 auto;

        padding: 0 15px;

        font-size: 16px; /* Prevents iOS zoom on input focus */

    }

    

    .question {

        font-size: 1.2em;

    }

    

    .answers button {

        padding: 14px 16px;

        font-size: 1em;

        margin-bottom: 12px;

    }

    

    .navigation {

        flex-direction: column;

        gap: 10px;

    }

    

    .back-button, .restart-button {

        width: 100%;

        padding: 12px;

        text-align: center;

    }

    

    .header-controls {

        flex-direction: column;

        align-items: stretch;

    }

    #header-controls2 {max-height:45px}

    #restart, .back-button {width:max-content;}



    .search-toggle {

        width: 100%;

    }

}



/* Touch device improvements */

@media (hover: none) and (pointer: coarse) {

    .answers button {

        padding: 16px;

        margin-bottom: 14px;

    }

    

    .answers button:active {

        background: #e0e0e0;

    }

}