body { font-family: Arial; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ccc; padding: 6px; vertical-align: top; }
th { background: #eee; position: sticky; top: 0; }
/* ===============================
   COLOANA REFERINȚĂ
================================ */
.ref {
    width: 160px;
    font-weight: bold;
    background: #fafafa;
    font-size: 13px;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.3;
}

.ref a {
    display: inline-block;
    word-break: break-word;
    white-space: normal;
    color: blue;
    text-decoration: none;
}

.ref a:hover {
    text-decoration: underline;
}

/* ===============================
   SEARCH FORM
================================ */
.search-box {
    max-width: 1100px;
    margin: 0 auto 20px;
    padding: 16px;
    background: #f7f7f7;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.search-box input[type="text"] {
    width: 360px;
    max-width: 100%;
    padding: 10px 14px;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #bbb;
    transition: border .2s, box-shadow .2s;
}

.search-box input[type="text"]:focus {
    border-color: #ff9800;
    box-shadow: 0 0 0 2px rgba(255,152,0,.2);
    outline: none;
}

.search-box select {
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #bbb;
    font-size: 14px;
}

.search-box label {
    font-size: 14px;
    white-space: nowrap;
}

.search-box button {
    padding: 10px 22px;
    font-size: 16px;
    border-radius: 6px;
    border: none;
    background: #ff9800;
    color: #000;
    cursor: pointer;
    font-weight: bold;
    transition: background .2s, transform .1s;
}

.search-box button:hover {
    background: #ffa726;
}

.search-box button:active {
    transform: translateY(1px);
}

/* ===============================
   TABLE STABILITY
================================ */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

th, td {
    border: 1px solid #ccc;
    padding: 8px;
    vertical-align: top;
    word-wrap: break-word;
}

th {
    background: #eee;
    position: sticky;
    top: 0;
    z-index: 2;
}

tbody tr:nth-child(even) {
    background: #fcfcfc;
}

html {
    scrollbar-gutter: stable;
}

.highlight {
    background: #ff9800;
    color: #000;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: bold;
}

/* ===============================
   MOBILE OPTIMIZATION
================================ */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .search-box {
        padding: 12px;
        border-radius: 0;
        box-shadow: none;
    }

    .search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box input[type="text"] {
        width: 100%;
        font-size: 16px;
    }

    .search-box select,
    .search-box button {
        width: 100%;
        font-size: 15px;
    }

    .search-box label {
        text-align: left;
        font-size: 14px;
    }

.table-wrapper {
    width: 100%;
    max-height: none;
    overflow-y: visible;
}

    table {
        min-width: 700px;
    }

    th, td {
        padding: 6px;
        font-size: 13px;
    }

    .ref {
        width: 120px;
        font-size: 13px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }

    .ref a {
        display: inline-block;
        word-break: break-word;
        white-space: normal;
    }

    th {
        position: sticky;
        top: 0;
    }
}

@media (hover: none) {
    a:hover {
        background: none;
    }
}

/* ===============================
   MOBILE – LANDSCAPE
================================ */
@media (max-width: 900px) and (orientation: landscape) {
    .search-row {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .search-box input[type="text"] {
        width: 260px;
    }

    .search-box select {
        width: 200px;
    }

    .search-box button {
        width: auto;
        min-width: 140px;
        padding: 10px 18px;
        font-size: 15px;
    }

    .search-box label {
        font-size: 13px;
    }
}

.pagination {
    margin: 12px 0;
    text-align: center;
    font-size: 16px;
}

.pagination a {
    padding: 4px 8px;
    margin: 0 2px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.pagination a:hover {
    background-color: #ff9800;
    color: #fff;
}

.pagination strong.active-page {
    padding: 4px 8px;
    margin: 0 2px;
    background-color: #ff9800;
    color: #000;
    border-radius: 4px;
}

/* ===============================
   GLOBAL STYLING
================================ */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

th, td {
    border: 1px solid #ccc;
    padding: 8px;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    font-size: 13px;
}

th {
    background: #eee;
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: left;
}

tbody tr:nth-child(even) {
    background: #fcfcfc;
}

/* ===============================
   COLOANA REFERINȚĂ
================================ */
.ref {
    width: 160px;
    font-weight: bold;
    background: #fafafa;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}

.ref a {
    display: inline-block;
    word-break: break-word;
    white-space: normal;
    color: blue;
    text-decoration: none;
}

.ref a:hover {
    text-decoration: underline;
}

/* ===============================
   MOBILE OPTIMIZATION
================================ */
@media (max-width: 768px) {
    table {
        min-width: 700px;
    }

    th, td {
        font-size: 12px;
        padding: 6px;
    }

    .ref {
        width: 120px;
        font-size: 12px;
    }

    .ref a {
        display: inline-block;
    }
}

/* ===============================
   HIGHLIGHT
================================ */
.highlight {
    background: #ff9800;
    color: #000;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: bold;
}

/* ===============================
   PAGINATION
================================ */
.pagination {
    margin: 12px 0;
    text-align: center;
    font-size: 14px;
}

.pagination a, .pagination strong.active-page {
    padding: 4px 8px;
    margin: 0 2px;
    border-radius: 4px;
}

.pagination a {
    border: 1px solid #ccc;
    text-decoration: none;
    color: #333;
    transition: background 0.2s, color 0.2s;
}

.pagination a:hover {
    background-color: #ff9800;
    color: #fff;
}

.pagination strong.active-page {
    background-color: #ff9800;
    color: #000;
}

/* ===============================
   TABLE WRAPPER FOR SCROLL
================================ */


/* ===============================
   STILIZARE DROPDOWN
================================ */

/* Desktop */
.search-box select {
    background-color: #2b4c7e;
    color: #fff;
    padding: 8px 12px;
    border: 1px solid #2b4c7e;
    border-radius: 6px;
    font-size: 14px;
    transition: background-color 0.3s ease, border 0.3s ease;
}

.search-box select:hover {
    background-color: #1c3e6d;
    border-color: #1c3e6d;
}

.search-box select:focus {
    outline: none;
    background-color: #1c3e6d;
    border-color: #1c3e6d;
}

/* Mobile (sub 768px) */
@media (max-width: 768px) {
    .search-box select {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        background-color: #2b4c7e;
        color: #fff;
        border-radius: 6px;
    }

    .search-box select:focus {
        background-color: #1c3e6d;
        border-color: #1c3e6d;
    }
}

/* Mobile Landscape (peste 768px și în orientare landscape) */
@media (max-width: 900px) and (orientation: landscape) {
    .search-box select {
        width: auto;
        font-size: 15px;
        padding: 10px 14px;
        background-color: #2b4c7e;
        color: #fff;
        border-radius: 6px;
    }

    .search-box select:focus {
        background-color: #1c3e6d;
        border-color: #1c3e6d;
    }
}

/* Stil pentru dropdown */
.search-box select {
    background-color: #2b4c7e;
    color: #fff;
    padding: 6px 12px;
    border: 1px solid #2b4c7e;
    border-radius: 6px;
    font-size: 14px;
    width: auto;
    max-width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-align: left;
    white-space: nowrap;
}

/* Stil pentru opțiunile din dropdown */
.search-box select option {
    background-color: #2b4c7e;
    color: #fff;
    padding: 6px 12px;
    font-size: 14px;
}

/* Stil pentru opțiunea selectată */
.search-box select option:checked {
    background-color: #1d3557;
}

/* Centrarea containerului care conține select-ul */
.select-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
    gap: 20px;
}

/* Stil pentru select-ul propriu-zis */
select[name="book"] {
    background-color: #2b4c7e;
    color: #fff;
    padding: 8px 16px;
    border: 1px solid #2b4c7e;
    border-radius: 6px;
    font-size: 16px;
    width: auto;
    max-width: 100%;
    text-align: left;
    white-space: nowrap;
}

th, td {
    border: 1px solid #ccc;
    padding: 8px;
    vertical-align: top;
    word-break: break-word;
}

th {
    background: #2b4c7e;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Pentru hover - Fundal galben deschis */
a:hover {
    background-color: #fff3b0; /* Galben deschis */
    padding: 0 5px;            /* Padding pentru un efect mai vizibil */
    border-radius: 3px;        /* Colțuri rotunjite pentru efect mai plăcut */
    cursor: pointer;
}

/* Pentru când dai click - Fundal galben deschis */
a:active {
    background-color: #fff3b0; /* Galben deschis */
    padding: 0 5px;            /* Aceleași padding pentru uniformitate */
    border-radius: 3px;        /* Colțuri rotunjite */
}
/* ===============================
   MOBILE OPTIMIZATION (doar pentru dimensiunea fontului versetelor)
================================ */
@media (max-width: 768px) {
    .verset {
        font-size: 13px; /* Ajustează dimensiunea fontului pentru versete pe mobil */
    }
}

/* ===============================
   MOBILE LANDSCAPE OPTIMIZATION
================================ */
@media (max-width: 900px) and (orientation: landscape) {
    .verset {
        font-size: 11px; /* Micșorează și mai mult pe landscape, dacă este necesar */
    }
}