/* template/css/print-options.css
 *
 * On-screen styling for the shared Print-options modal (template/js/print-options.js).
 * Screen-only; explicitly hidden in print so it can never appear on paper.
 * Uses the site's theme variables so it inherits each site's palette.
 */
.peprint-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    padding: 16px;
}
.peprint-modal {
    background: var(--card-bg, #fff);
    color: var(--text-color, #111);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.30);
    width: 100%;
    max-width: 360px;
    padding: 22px 22px 16px;
    text-align: center;
    font-family: inherit;
}
.peprint-title { margin: 0 0 4px; font-size: 1.25rem; }
.peprint-sub   { margin: 0 0 16px; color: var(--text-light, #555); font-size: 0.95rem; }

.peprint-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.peprint-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 16px 10px;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 10px;
    background: var(--primary-color, #2563eb);
    color: #fff;
    cursor: pointer;
    font: inherit;
    transition: filter 0.12s ease, transform 0.12s ease;
}
.peprint-btn:hover  { filter: brightness(1.07); }
.peprint-btn:active { transform: translateY(1px); }
.peprint-btn:focus-visible { outline: 3px solid var(--primary-color, #2563eb); outline-offset: 2px; }
.peprint-btn-title { font-weight: 700; font-size: 1rem; }
.peprint-btn-note  { font-size: 0.78rem; opacity: 0.92; }

.peprint-cancel {
    margin-top: 14px;
    background: none;
    border: 0;
    color: var(--text-light, #6b7280);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    padding: 6px;
}

@media (max-width: 380px) {
    .peprint-actions { grid-template-columns: 1fr; }
}

/* Never print the modal itself. */
@media print {
    .peprint-overlay { display: none !important; }
}