/* "Suggest a Book" floating tab + modal (markup: includes/suggest-book.php).
   Self-contained colours so it looks the same on pages with or without theme.css. */

.sb-tab {
    position: fixed;
    right: 0;
    bottom: 22vh;
    z-index: 1100;               /* below index.php's shelf bottom-sheet (1199+) and toasts */
    display: flex;
    align-items: center;
    gap: 8px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);   /* reads bottom-to-top */
    padding: 16px 9px;
    border: 1px solid #c89b3c;
    border-left: none;           /* (right after rotation) flush with the screen edge */
    border-radius: 0 8px 8px 0;
    background: linear-gradient(180deg, #8b2e3c 0%, #6e2230 100%);
    color: #efe6d0;
    font-family: "Noto Serif", Georgia, serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    cursor: pointer;
    box-shadow: 2px 0 14px rgba(0, 0, 0, .45);
    transition: padding .2s ease, background .2s ease;
}
.sb-tab i { color: #e0b955; transform: rotate(90deg); }
.sb-tab:hover, .sb-tab:focus-visible { padding-bottom: 14px; padding-top: 18px; padding-left: 13px; background: #9c3446; outline: none; }
@media (max-width: 575.98px) {
    .sb-tab { font-size: 12.5px; padding: 12px 7px; bottom: 18vh; }
}
@media print { .sb-tab, .sb-backdrop { display: none !important; } }

.sb-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(10, 7, 4, .72);
    backdrop-filter: blur(3px);
}
.sb-backdrop[hidden] { display: none; }

.sb-dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 26px 26px 22px;
    background: linear-gradient(160deg, #2a2115 0%, #241a10 100%);
    border: 1px solid rgba(200, 155, 60, .45);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
    color: #efe6d0;
    font-family: "Noto Serif", Georgia, serif;
    animation: sbPop .18s ease-out;
}
@keyframes sbPop { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.sb-dialog h3 {
    margin: 0 0 6px;
    font-family: "Fraunces", "Noto Serif", serif;
    font-size: 22px;
    color: #e0b955;
}
.sb-lead { margin: 0 0 16px; font-size: 14px; color: #d9cdae; }

.sb-close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: none;
    background: none;
    color: #9c8f76;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.sb-close:hover { color: #efe6d0; }

.sb-dialog label { display: block; margin: 12px 0 5px; font-size: 13.5px; color: #d9cdae; }
.sb-req { color: #e07a7a; }
.sb-dialog input[type="text"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid rgba(200, 155, 60, .35);
    border-radius: 6px;
    background: #16110c;
    color: #efe6d0;
    font-size: 15px;
    font-family: inherit;
}
.sb-dialog input[type="text"]:focus { outline: none; border-color: #e0b955; box-shadow: 0 0 0 3px rgba(200, 155, 60, .2); }
.sb-dialog input.sb-invalid { border-color: #e07a7a; }

.sb-captcha { display: flex; gap: 8px; }
.sb-captcha input[type="text"] { width: 110px; }
.sb-refresh {
    border: 1px solid rgba(200, 155, 60, .35);
    border-radius: 6px;
    background: transparent;
    color: #c89b3c;
    padding: 0 12px;
    cursor: pointer;
}
.sb-refresh:hover { color: #e0b955; border-color: #e0b955; }
#sbQuestion { color: #e0b955; font-family: "IBM Plex Mono", monospace; font-weight: 500; }

.sb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.sb-error { min-height: 20px; margin: 10px 0 4px; font-size: 13.5px; color: #f09a9a; }

.sb-submit {
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(180deg, #e0b955 0%, #c89b3c 100%);
    color: #241a10;
    font-weight: 700;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
}
.sb-submit:hover { filter: brightness(1.07); }
.sb-submit:disabled { opacity: .6; cursor: wait; }

.sb-thanks { padding: 22px 6px 12px; text-align: center; }
.sb-thanks i { font-size: 46px; color: #63866c; margin-bottom: 12px; }
.sb-thanks p { margin: 4px 0 0; color: #d9cdae; }

@media (prefers-reduced-motion: reduce) {
    .sb-dialog { animation: none; }
    .sb-tab { transition: none; }
}