/* The share dialog (Views/Shared/_ShareDialog.cshtml) and the buttons that open it.
   Linked by the dialog partial, so it loads only on pages that can share. */

.share-dialog {
    border: 1px solid #d9e3ec;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(15, 30, 50, .25);
    max-width: min(34rem, calc(100vw - 2rem));
    padding: 1rem;
    width: 100%;
}

.share-dialog::backdrop {
    background: rgba(15, 30, 50, .55);
}

.share-dialog__header {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.share-dialog__title {
    font-size: 1.2rem;
    margin: 0;
}

.share-dialog__status {
    color: #4a5b6d;
    margin: 0 0 .75rem;
}

.share-dialog__status--problem {
    color: #a12622;
}

/* The canvas itself is the preview: the content security policy has no blob: images. Width and
   height stay auto so the drawn image keeps its shape inside the limits. */
.share-dialog__preview {
    background: #f7fafc;
    border-radius: 6px;
    display: block;
    height: auto;
    margin: 0 auto .75rem;
    max-height: 45vh;
    max-width: 100%;
    width: auto;
}

.share-dialog__choices {
    border: 0;
    display: flex;
    gap: 1.25rem;
    margin: 0 0 .75rem;
    padding: 0;
}

.share-dialog__toggle {
    align-items: center;
    display: flex;
    gap: .35rem;
    margin: -.25rem 0 .75rem;
}

.share-dialog__choice {
    align-items: center;
    display: inline-flex;
    font-weight: 600;
    gap: .35rem;
}

/* Two classes, to win over .share-dialog__note further down. */
.share-dialog__note.share-dialog__note--blocked {
    background: #fff7e0;
    border-radius: 6px;
    color: #5c4400;
    margin: 0 0 .75rem;
    padding: .5rem .75rem;
}

.share-dialog__caption {
    margin-bottom: .75rem;
}

.share-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.share-dialog__actions .btn {
    white-space: nowrap;
}

.share-dialog__note {
    color: #4a5b6d;
    font-size: .9rem;
    margin: .75rem 0 0;
}

.public-gallery-card__share {
    margin-top: .75rem;
}