/* --- OFFLINE FONT EMBEDDING --- */
@font-face {
    font-family: 'Elnaz Nastaliq Kashmiri';
    /* The path to your local font file is correct, but the format tag must be 'truetype' */
    src: url('ElnazNastaliqKashmiri-ttf.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Custom Styles for Dictionary Webpage */

/* General Body Styling */
body {
    background-color: #f8f9fa;
    font-family: Arial, sans-serif;
}

/* Header Styling */
.text-primary {
    color: #007bff !important;
}

/* --- Kashmiri Font Styling & COLOR CHECK --- */
.kashmiri-text {
    /* Main block handler for font and direction */
    font-family: 'Elnaz Nastaliq Kashmiri', 'Noto Nastaliq Urdu', Arial, sans-serif !important;
    direction: ltr;
    font-size: 1.25rem;
    line-height: 1.8;
}

/* Target the specific Kashmiri text content for color verification */
.kashmiri-word-text {
    /* === FORCING COLOR CHANGE FOR TESTING === */
    color: #C41E3A !important; /* Crimson Red for high visibility check */
}

/* Ensure the label and text are correctly aligned */
.kashmiri-text p {
    text-align: left;
}

    /* Reset the bold label color back to default dark gray, while keeping the Kashmiri text red */
    .kashmiri-text p strong {
        color: #343a40 !important;
        font-weight: 600;
    }

/* --- Hindi Font Styling (NEW) --- */
.hindi-text {
    font-family: 'Tiro Devanagari Hindi', Arial, sans-serif;
    direction: ltr;
    font-size: 1.35rem; /* Bigger size */
    line-height: 1.8;
    color: #0056b3 !important; /* Dark Blue color */
}
/* Ensure the bold labels are not the dark blue color */
.hindi-text p strong {
    color: #343a40 !important; /* Reset label color to dark gray */
    font-weight: 600;
}


/* Result Card Styling */
.result-card {
    margin-bottom: 25px;
    border-left: 5px solid #007bff;
    transition: all 0.3s ease;
}

    .result-card:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-2px);
    }

/* New styles for the custom suggestion box */
#suggestionsContainer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 0.25rem 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
    background-color: white;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.suggestion-item {
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #eee;
    color: #212529;
    text-decoration: none;
    display: block;
}

    .suggestion-item:last-child {
        border-bottom: none;
    }

    /* Hover and Keyboard Active State */
    .suggestion-item:hover, .suggestion-item.active {
        background-color: #007bff;
        color: white;
    }