/* ============================================================
   Strong's Lookup Tab Styles — strongs_lookup_tab.css
   Site palette: browns (#8B4513, #5C3317), antiquewhite backgrounds
   Reuses .strongs-definition-panel classes for result cards
   ============================================================ */

body.tool-page {
    overflow-x: unset;
}

/* --- Main Container --- */
.strongs-lookup-tab-content {
    background-color: var(--callout_background);
    border: 1px solid var(--callout_border);
    border-radius: 10px;
    padding: 1.25em 1.5em;
    max-width: 900px;
    margin: 60px auto 0 auto;
    font-family: sans-serif;
    min-height: 925px;
}

/* --- Section Headings --- */
.strongs-lookup-tab-content h2 {
    color: var(--callout_text);
    font-size: 1.3em;
    margin: 0 0 0.4em 0;
    padding: 10px 0;
}

.strongs-lookup-tab-content h2 i {
    margin-right: 0.3em;
}

/* --- Subtitle / Descriptive Text --- */
.strongs-lookup-subtitle {
    color: var(--callout_anchor_active);
    font-size: 0.9rem;
    margin: 0 0 0.75em 0;
    line-height: 1.4;
}

/* --- Direct Lookup Section --- */
.strongs-lookup-section {
    margin-bottom: 1.5em;
    padding-bottom: 1.5em;
    border-bottom: 2px solid 2px solid var(--callout_border);
}

/* --- Experimental Translation Section --- */
.strongs-translate-section {
    margin-bottom: 1em;
}

/* --- Input Rows (shared layout) --- */
.strongs-lookup-input-row,
.strongs-translate-input-row {
    display: flex;
    gap: 0.5em;
    align-items: center;
    flex-wrap: wrap;
}

/* --- Text Inputs --- */
#strongs-lookup-input,
#strongs-translate-input {
    flex: 1;
    min-width: 200px;
    padding: 0.5em 0.75em;
    border: 1px solid var(--callout_border);
    border-radius: 4px;
    font-size: 1em;
    font-family: inherit;
    background-color: var(--callout_fieldset_background);
    box-sizing: border-box;
}

#strongs-lookup-input:focus,
#strongs-translate-input:focus {
    outline: 2px solid var(--callout_border_focused);
    /* outline-offset: 1px; */
    border-color: var(--callout_border);
    background-color: var(--callout_focused);
}

/* --- Buttons (save-btn class for lookup tab context) --- */
.strongs-lookup-tab-content .save-btn {
    padding: 0.5em 1em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95em;
    white-space: nowrap;
    transition: background-color 0.2s;
    font-family: sans-serif;
}

.strongs-lookup-tab-content .save-btn:hover:not(:disabled) {
    background-color: var(--secondary_background_color);
}

.strongs-lookup-tab-content .save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.strongs-lookup-tab-content .save-btn i {
    margin-right: 0.3em;
}

/* --- Experimental Badge --- */
.strongs-experimental-badge {
    display: inline-block;
    background-color: var(--accent_bold);
    color: var(--text_on_accent);
    font-size: 0.6em;
    font-weight: 700;
    padding: 0.25em 0.6em;
    border-radius: 10px;
    vertical-align: middle;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-left: 0.5em;
}

.strongs-lookup-explanation ul {
    padding: 0 25px;
    line-height: 1.1;
}

.strongs-lookup-explanation i {
    font-size: smaller;
}

.strongs-lookup-explanation {
    white-space: normal;
}

span.strongs-lookup-explanation-header {
    text-align: center;
    display: grid;
    margin: 0;
    padding: 0;
}

.subtitle-explanation {
    text-align: center;
    padding-bottom: 5px;
}

.explanation-type {
    margin: 25px 0;
}

li.point_li {
    line-height: 1.35;
    margin-bottom: 5px;
}

li.header_li {
    line-height: 1.5;
    margin-top: 10px;
}

ul.header_ul {
    line-height: 1.25;
    padding: 0 15px;
    margin: 0;
}

ul.point_ul {
    margin: 0;
    padding: 0 25px;
    line-height: 0.5;
}

li.point_li {
    line-height: 1.2;
}

/* --- Info Icon & Tooltip (search method explanations) --- */
.strongs-info-icon {
    position: relative;
    display: inline-block;
    margin-left: 8px;
    cursor: help;
    vertical-align: middle;
    font-size: medium;
}

.strongs-info-icon:hover .strongs-info-tooltip,
.strongs-info-icon:focus .strongs-info-tooltip {
    visibility: visible;
    opacity: 1;
}

.strongs-info-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    /*bottom: 130%;*/
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    max-width: 90vw;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--callout_text);
    color: var(--text_on_accent);
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: pre-wrap;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1000;
    transition: opacity 0.2s ease;
}

.strongs-info-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: var(--accent_color) transparent transparent transparent;
}

/* --- Results Container --- */
#strongs-lookup-results {
    margin-top: 1.25em;
}

/* --- Loading Indicator --- */
.strongs-lookup-loading {
    text-align: center;
    padding: 1.5em 0;
    color: var(--emphasis_text);
    font-size: 1.1em;
}

.strongs-lookup-loading i {
    margin-right: 0.4em;
}

/* --- Error Message --- */
.strongs-lookup-error {
    background: var(--error_background);
    border-left: 4px solid var(--error_border);
    border: 1px solid var(--error_border);
    border-radius: 4px;
    padding: 0.75em 1em;
    color: var(--error_text);
    font-size: 0.95em;
    margin-top: 0.5em;
}

/* --- Validation Message (inline) --- */
.strongs-lookup-validation {
    color: var(--error_text);
    font-size: 0.9em;
    margin-top: 0.4em;
}

/* --- Info/No-Results Message --- */
.strongs-lookup-info {
    background: #f5e6d0;
    border-left: 4px solid #8B4513;
    border-radius: 4px;
    padding: 0.75em 1em;
    color: #5C3317;
    font-size: 0.95em;
    margin-top: 0.5em;
}

/* --- Translated Word Display --- */
.strongs-translated-word {
    font-size: 0.95em;
    color: #5C3317;
    margin-bottom: 0.75em;
    padding: 0.5em 0.75em;
    background: #f5e6d0;
    border-radius: 4px;
    border: 1px solid #d2b48c;
}

.strongs-translated-word strong {
    color: #3a1f00;
}

/* --- Result Count Indicator --- */
.strongs-lookup-count {
    font-size: 0.9em;
    color: #5C3317;
    font-style: italic;
    margin: 0 0 0.75em 0;
    padding: 0;
}

/* --- Results Cap Message --- */
.strongs-lookup-cap-msg {
    font-size: 0.85em;
    color: #8B4513;
    font-style: italic;
    margin-top: 0.75em;
    padding: 0.4em 0;
}

/* ============================================================
   Glossary Search — Search Method Toggle
   ============================================================ */

/* --- Search Method Checkboxes Row --- */
.strongs-search-method-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25em;
    align-items: center;
    margin: 0.75em 0 1em 0;
    padding: 0.5em 0;
}

.strongs-search-method-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.9em;
    cursor: pointer;
    user-select: none;
}

/*.strongs-search-method-label input[type="checkbox"] {
    accent-color: #8B4513;
    width: 1em;
    height: 1em;
    cursor: pointer;
}*/

.strongs-search-method-label input[type="checkbox"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.strongs-search-method-label input[type="checkbox"]:disabled + .strongs-search-partial-text,
.strongs-search-partial-label:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================
   Glossary Search — Disclaimer
   ============================================================ */

.glossary-disclaimer {
    font-size: 0.88em;
    font-style: italic;
    color: #8B4513;
    background: #f5e6d0;
    border-left: 4px solid #d4a017;
    border-radius: 4px;
    padding: 0.6em 1em;
    margin: 1em 0 0.75em 0;
    line-height: 1.4;
}

/* ============================================================
   Glossary Search — Exact & Partial Match Sections
   ============================================================ */

.glossary-exact-matches {
    margin-bottom: 1.25em;
}

.glossary-partial-matches {
    margin-top: 1em;
}

/* --- Partial Match Divider & Note --- */
.glossary-partial-divider {
    border: none;
    border-top: 2px solid #d2b48c;
    margin: 1.25em 0 0.75em 0;
}

.glossary-partial-note {
    font-size: 0.88em;
    font-style: italic;
    color: #8B4513;
    margin: 0 0 0.75em 0;
    line-height: 1.4;
}

/* --- Partial Match Key Headings --- */
.glossary-partial-key-heading {
    font-size: 1em;
    font-weight: 600;
    color: #5C3317;
    margin: 1em 0 0.4em 0;
    padding-bottom: 0.2em;
    border-bottom: 1px solid #d2b48c;
}

/* ============================================================
   Semantic Search — Results Section Label
   ============================================================ */

.strongs-semantic-results-label {
    font-size: 0.9em;
    color: #5C3317;
    font-style: italic;
    margin: 1.25em 0 0.5em 0;
    padding: 0.4em 0.75em;
    border-top: 2px solid #d2b48c;
    border-left: 3px solid #8B4513;
    background: #f5e6d0;
    border-radius: 0 4px 4px 0;
}

.strongs-semantic-results-label strong {
    font-style: normal;
    color: #3a1f00;
}

.semantic-results-section {
    margin-top: 0.5em;
}

.strongs-semantic-loading {
    font-size: 0.9em;
    color: #5C3317;
    font-style: italic;
    margin: 1.25em 0 0.5em 0;
    padding: 0.5em 0.75em;
    border-left: 3px solid #d2b48c;
    background: #faf3eb;
    border-radius: 0 4px 4px 0;
}

.strongs-semantic-loading i {
    color: #8B4513;
    margin-right: 0.3em;
}

/* ============================================================
   Glossary Search — Clickable ID Links
   ============================================================ */

.glossary-id-link {
    display: inline-block;
    color: #8B4513;
    text-decoration: underline;
    font-size: 0.92em;
    padding: 0.25em 0.5em;
    margin: 0.2em 0.3em 0.2em 0;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.glossary-id-link:hover {
    color: #fff;
    background-color: #8B4513;
    text-decoration: none;
}

.glossary-id-link.selected {
    color: #fff;
    background-color: var(--secondary_background_color);
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   Glossary Search — Pagination Controls
   ============================================================ */

.glossary-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75em;
    margin: 1em 0;
    padding: 0.5em 0;
}

.glossary-pagination button {
    background-color: #8B4513;
    color: #fff;
    border: none;
    padding: 0.4em 0.9em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s;
}

.glossary-pagination button:hover:not(:disabled) {
    background-color: var(--secondary_background_color);
}

.glossary-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.glossary-page-indicator {
    font-size: 0.9em;
    color: #5C3317;
    font-weight: 500;
    min-width: 6em;
    text-align: center;
}

/* ============================================================
   Glossary Search — Shared Definition Panel
   ============================================================ */

.glossary-definition-panel {
    margin-top: 1.25em;
    padding: 1em;
    background: #fffaf3;
    border: 1px solid #d2b48c;
    border-left: 4px solid #8B4513;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(92, 51, 23, 0.08);
}

/* ============================================================
   Responsive — Original + Glossary
   ============================================================ */

/* --- Responsive --- */
@media (max-width: 768px) {
    .strongs-lookup-tab-content {
        padding: 1em;
    }

    .strongs-lookup-input-row,
    .strongs-translate-input-row {
        flex-direction: column;
        align-items: stretch;
    }

    #strongs-lookup-input,
    #strongs-translate-input {
        min-width: unset;
        width: 100%;
    }

    .strongs-lookup-tab-content .save-btn {
        min-width: 44px;
        min-height: 44px;
        text-align: center;
    }
}

@media (max-width: 600px) {
    /* Checkboxes stack vertically on narrow screens */
    .strongs-search-method-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5em;
    }

    /* Pagination buttons get a bit more breathing room */
    .glossary-pagination {
        gap: 0.5em;
    }

    .glossary-pagination button {
        padding: 0.4em 0.7em;
        font-size: 0.85em;
    }
}