/*
 * popup.css — оформление модальных окон popup.js.
 * Зачем: единый вид окон info/success/error/confirm/copy во всех кабинетах и на публичном сайте.
 * Где используется: подключается во всех layouts вместе с popup.js.
 */
.popup-open,
.popup-open body {
    overflow: hidden;
}

.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(7, 31, 57, 0.55);
    opacity: 0;
    transition: opacity 160ms ease;
}

.popup-overlay.is-visible {
    opacity: 1;
}

.popup-overlay.is-closing {
    opacity: 0;
}

.popup {
    width: min(440px, 100%);
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 24px;
    border-radius: var(--radius-medium, 16px);
    border-top: 4px solid var(--color-accent, #087be6);
    background: var(--color-background, #fff);
    color: var(--color-text, #172332);
    box-shadow: var(--shadow-medium, 0 20px 60px rgba(20, 50, 80, 0.1));
    transform: translateY(8px);
    transition: transform 160ms ease;
}

.popup-overlay.is-visible .popup {
    transform: none;
}

.popup:focus {
    outline: none;
}

.popup--success { border-top-color: #1f9d55; }
.popup--error,
.popup--danger { border-top-color: #d64545; }

.popup__title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary, #0b2f55);
}

.popup__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.popup__copy-field {
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--color-border, #e4eaf0);
    border-radius: var(--radius-small, 8px);
    font: 14px/1.4 "Courier New", monospace;
    background: var(--color-surface, #f5f8fb);
}

.popup__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.popup__button {
    min-width: 108px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-small, 8px);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.popup__button--primary { background: var(--color-accent, #087be6); color: #fff; }
.popup__button--primary:hover { background: var(--color-accent-hover, #0669c7); }
.popup__button--danger { background: #d64545; color: #fff; }
.popup__button--danger:hover { background: #b93636; }
.popup__button--secondary { background: #fff; color: var(--color-primary, #0b2f55); border-color: var(--color-border, #e4eaf0); }
.popup__button--secondary:hover { background: var(--color-surface, #f5f8fb); }

.popup__button:focus-visible,
.popup__copy-field:focus-visible {
    outline: 3px solid var(--color-accent, #087be6);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .popup { padding: 20px 16px; }
    .popup__actions { flex-direction: column-reverse; }
    .popup__button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .popup-overlay,
    .popup { transition: none; }
}