/*
 * Share Modal — token-driven styling.
 * Themes should override the --km-share-* custom properties below
 * (e.g. in the theme's own stylesheet) rather than these rules directly.
 */
.km-share-modal__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.km-share-modal {
    --km-share-gap: 1rem;
    --km-share-radius: 0.375rem;
    --km-share-max-width: 28rem;

    --km-share-bg: #fff;
    --km-share-color: #0a3f6b;
    --km-share-backdrop: rgb(10 63 107 / 40%);

    --km-share-title-color: var(--km-share-color);
    --km-share-label-color: var(--km-share-color);

    --km-share-trigger-bg: #c5d9f6;
    --km-share-trigger-color: #1a517f;
    --km-share-trigger-bg-hover: #1a517f;
    --km-share-trigger-color-hover: #fff;
    --km-share-trigger-bg-active: #0a3f6b;
    --km-share-trigger-color-active: #fff;
    --km-share-trigger-radius: var(--km-share-radius);
    --km-share-trigger-width: 100%;
    --km-share-trigger-padding-block: 0.75rem;
    --km-share-trigger-padding-inline: 1rem;

    --km-share-social-border: transparent;
    --km-share-social-border-width: 0px;
    --km-share-social-stroke-width: 2;

    --km-share-social-mail-bg: #c5d9f6;
    --km-share-social-mail-color: #1a517f;
    --km-share-social-mail-bg-hover: #1a517f;
    --km-share-social-mail-color-hover: #fff;
    --km-share-social-mail-bg-active: #0a3f6b;
    --km-share-social-mail-color-active: #fff;

    --km-share-copy-border: #c5d9f6;
    --km-share-copy-prefix-bg: #c5d9f6;
    --km-share-copy-text-color: #1a517f;
    --km-share-copy-btn-bg: #c5d9f6;
    --km-share-copy-btn-color: #1a517f;
    --km-share-copy-btn-bg-hover: #1a517f;
    --km-share-copy-btn-color-hover: #fff;
    --km-share-copy-btn-bg-active: #0a3f6b;
    --km-share-copy-btn-color-active: #fff;
    --km-share-copy-btn-bg-copied: #1b5e20;
    --km-share-copy-btn-color-copied: #fff;
    --km-share-copy-btn-radius: var(--km-share-radius);

    --km-share-close-bg: #c5d9f6;
    --km-share-close-color: #1a517f;
    --km-share-close-border: #c5d9f6;
    --km-share-close-bg-hover: #1a517f;
    --km-share-close-color-hover: #fff;
    --km-share-close-bg-active: #0a3f6b;
    --km-share-close-color-active: #fff;
    --km-share-close-radius: var(--km-share-radius);
}

/* Brand colors are fixed and not theme-customizable. */
.km-share-modal__social-btn--facebook {
    background: #1877f2;
    color: #fff;
}
.km-share-modal__social-btn--facebook:hover {
    background: #0d5dc7;
    color: #fff;
}

.km-share-modal__social-btn--x {
    background: #000;
    color: #fff;
}
.km-share-modal__social-btn--x:hover {
    background: #262626;
    color: #fff;
}

.km-share-modal__social-btn--whatsapp {
    background: #25d366;
    color: #fff;
}
.km-share-modal__social-btn--whatsapp:hover {
    background: #1da851;
    color: #fff;
}

.km-share-modal__social-btn--linkedin {
    background: #0a66c2;
    color: #fff;
}
.km-share-modal__social-btn--linkedin:hover {
    background: #084e94;
    color: #fff;
}

.km-share-modal__social-btn--mail {
    background: var(--km-share-social-mail-bg);
    color: var(--km-share-social-mail-color);
}
.km-share-modal__social-btn--mail:hover {
    background: var(--km-share-social-mail-bg-hover);
    color: var(--km-share-social-mail-color-hover);
}
.km-share-modal__social-btn--mail:active {
    background: var(--km-share-social-mail-bg-active);
    color: var(--km-share-social-mail-color-active);
}

.km-share-modal__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    width: var(--km-share-trigger-width);
    border: none;
    border-radius: var(--km-share-trigger-radius);
    padding-block: var(--km-share-trigger-padding-block);
    padding-inline: var(--km-share-trigger-padding-inline);
    background: var(--km-share-trigger-bg);
    color: var(--km-share-trigger-color);
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.km-share-modal__trigger:hover {
    background: var(--km-share-trigger-bg-hover);
    color: var(--km-share-trigger-color-hover);
}

.km-share-modal__trigger:active {
    background: var(--km-share-trigger-bg-active);
    color: var(--km-share-trigger-color-active);
}

.km-share-modal__popover {
    border: none;
    padding: 0;
    border-radius: var(--km-share-radius);
    inline-size: min(var(--km-share-max-width), 100%);
    max-block-size: calc(100dvh - 2rem);
    overflow-y: auto;
    background: var(--km-share-bg);
    color: var(--km-share-color);
    overscroll-behavior: contain;
    overflow-y: auto;
}

.km-share-modal__popover::backdrop {
    background-color: var(--km-share-backdrop);
    overflow: hidden;
    overscroll-behavior: contain;
}

.km-share-modal__inner {
    display: flex;
    flex-direction: column;
    gap: var(--km-share-gap);
    padding: 2rem;
}

.km-share-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.km-share-modal__title {
    margin: 0;
    color: var(--km-share-title-color);
}

.km-share-modal__close {
    border: 1px solid var(--km-share-close-border);
    border-radius: var(--km-share-close-radius);
    background: var(--km-share-close-bg);
    color: var(--km-share-close-color);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.km-share-modal__close:hover {
    background: var(--km-share-close-bg-hover);
    color: var(--km-share-close-color-hover);
}

.km-share-modal__close:active {
    background: var(--km-share-close-bg-active);
    color: var(--km-share-close-color-active);
}

.km-share-modal__section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.km-share-modal__label {
    margin: 0;
    font-weight: 600;
    color: var(--km-share-label-color);
}

.km-share-modal__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.km-share-modal__social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    min-height: 3rem;
    flex: 1 1 auto;
    border-radius: var(--km-share-copy-btn-radius);
    border: var(--km-share-social-border-width) solid var(--km-share-social-border);
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.km-share-modal__social-btn svg {
    stroke-width: var(--km-share-social-stroke-width);
}

.km-share-modal__copy-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--km-share-copy-border);
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    overflow: hidden;
}

.km-share-modal__copy-prefix {
    flex-shrink: 0;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background: var(--km-share-copy-prefix-bg);
    color: var(--km-share-copy-text-color);
    font-size: 0.75rem;
}

.km-share-modal__copy-url {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--km-share-copy-text-color);
    font-weight: 600;
}

.km-share-modal__copy-btn {
    border: none;
    border-radius: 0.25rem;
    padding: 0.75em 1.25em;
    width: 100%;
    background: var(--km-share-copy-btn-bg);
    color: var(--km-share-copy-btn-color);
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.km-share-modal__copy-btn:hover {
    background: var(--km-share-copy-btn-bg-hover);
    color: var(--km-share-copy-btn-color-hover);
}

.km-share-modal__copy-btn:active {
    background: var(--km-share-copy-btn-bg-active);
    color: var(--km-share-copy-btn-color-active);
}

.km-share-modal__copy-btn--copied,
.km-share-modal__copy-btn--copied:hover {
    background: var(--km-share-copy-btn-bg-copied);
    color: var(--km-share-copy-btn-color-copied);
}