/* Site Announcement styles
 * Class prefix: va- (vecin-announcement)
 * Severity classes: va-info, va-warning, va-danger
 */

/* ===== Top banner (sticky strip below body / above content) ===== */
.va-top {
    width: 100%;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
    border-bottom: 1px solid;
    box-sizing: border-box;
    position: relative;
    z-index: 999;
    margin-bottom: 12px;
}
.va-top.va-info    { background: #e8f1ff; border-color: #5e9cff; color: #143a78; }
.va-top.va-warning { background: #fff7e0; border-color: #ffc107; color: #5a4400; }
.va-top.va-danger  { background: #fde7ea; border-color: #dc3545; color: #6e0011; }
.va-top-icon { flex: 0 0 auto; font-size: 1rem; }
.va-top-msg  { flex: 1 1 auto; }
.va-top-close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: inherit;
    opacity: 0.65;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}
.va-top-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.05); }

/* ===== Footer line (discreet) ===== */
.va-footer {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 300;
    margin: 8px 0;
    font-style: italic;
    opacity: 0.85;
    line-height: 1.5;
}
.va-footer i { margin-right: 6px; }
.va-footer.va-info    { color: #1a3d80; }
.va-footer.va-warning { color: #5a4400; }
.va-footer.va-danger  { color: #6e0011; }

/* ===== Modal (one-time per version) ===== */
.va-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: vaFadeIn 200ms ease-out;
}
@keyframes vaFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.va-modal {
    background: #ffffff;
    border-radius: 14px;
    max-width: 480px;
    width: 100%;
    padding: 30px 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    text-align: center;
    border-top: 5px solid #5e9cff;
}
.va-modal.va-info    { border-top-color: #5e9cff; }
.va-modal.va-warning { border-top-color: #ffc107; }
.va-modal.va-danger  { border-top-color: #dc3545; }
.va-modal-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}
.va-modal-icon.va-info    { color: #5e9cff; }
.va-modal-icon.va-warning { color: #ffc107; }
.va-modal-icon.va-danger  { color: #dc3545; }
.va-modal-msg {
    font-weight: 300;
    line-height: 1.6;
    color: #444;
    margin-bottom: 22px;
    font-size: 0.95rem;
}
.va-modal-btn {
    background: #e91e8c;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 10px 26px;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 150ms;
}
.va-modal-btn:hover { background: #c2156d; }

/* ===== Admin variant (operational reminder) ===== */
.va-admin {
    margin: 0 0 14px 0;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-left: 4px solid;
}
.va-admin i { flex: 0 0 auto; margin-top: 2px; }
.va-admin > div { flex: 1 1 auto; }
.va-admin.va-info    { background: #e8f1ff; border-color: #5e9cff; color: #143a78; }
.va-admin.va-warning { background: #fff7e0; border-color: #ffc107; color: #5a4400; }
.va-admin.va-danger  { background: #fde7ea; border-color: #dc3545; color: #6e0011; }

/* ===== Mobile tweaks ===== */
@media (max-width: 576px) {
    .va-top { padding: 8px 12px; font-size: 0.85rem; }
    .va-modal { padding: 24px 20px; }
    .va-modal-msg { font-size: 0.9rem; }
}