/* Pluckd role details modal */

.pluckd-role-modal {
    --pluckd-pink: #FF43DC;
    --pluckd-cyan: #0AE5DF;
    --pluckd-green: #3DD87C;
    --pluckd-red: #FF4633;
    --pluckd-ink: #111111;
    --pluckd-modal-color: var(--pluckd-cyan);
    /* The <dialog> itself is invisible; clicks on it are backdrop clicks. */
    width: min(760px, calc(100% - 32px));
    max-width: none;
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--pluckd-ink);
    font-family: 'Bricolage Grotesque', sans-serif;
    overflow: visible;
}

.pluckd-role-modal::backdrop {
    background: rgba(17, 17, 17, 0.6);
}

.pluckd-role-modal[open] {
    animation: pluckd-role-modal-in 0.18s ease-out;
}

@keyframes pluckd-role-modal-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.pluckd-role-modal__description p {
    padding: 0px;
}
/* Lock page scroll while open. */
html.pluckd-role-modal-open {
    overflow: hidden;
}

.pluckd-role-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 48px);
    background: #fff;
    border: 10px solid var(--pluckd-modal-color);
    border-radius: 22px;
    overflow: hidden;
}

.pluckd-role-modal__content {
    padding: 44px 44px 36px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Close (Hello Elementor styles bare <button>s; reset fully). */
.pluckd-role-modal .pluckd-role-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--pluckd-ink);
    color: #fff;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.pluckd-role-modal .pluckd-role-modal__close:hover,
.pluckd-role-modal .pluckd-role-modal__close:focus-visible {
    background: var(--pluckd-pink);
    color: #fff;
}

/* Header */
.pluckd-role-modal__header {
    margin-bottom: 24px;
    padding-right: 40px;
}

.pluckd-role-modal__category {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pluckd-role-modal__title {
    margin: 0 0 10px;
    font-family: inherit;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--pluckd-ink);
}

.pluckd-role-modal__meta {
    margin: 0;
    font-size: 17px;
}

/* Description (Loxo rich text) */
.pluckd-role-modal__description {
    font-size: 16px;
    line-height: 1.55;
}

.pluckd-role-modal__description > :first-child {
    margin-top: 0;
}

.pluckd-role-modal__description h3,
.pluckd-role-modal__description h4,
.pluckd-role-modal__description h5 {
    margin: 26px 0 8px;
    font-family: inherit;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--pluckd-ink);
}

.pluckd-role-modal__description p {
    margin: 0 0 14px;
}

.pluckd-role-modal__description ul,
.pluckd-role-modal__description ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.pluckd-role-modal__description li {
    margin-bottom: 6px;
}

.pluckd-role-modal__description a {
    color: var(--pluckd-ink);
    text-decoration: underline;
    text-decoration-color: var(--pluckd-pink);
    text-decoration-thickness: 2px;
}

.pluckd-role-modal__placeholder {
    padding: 18px 20px;
    background: #f5f5f5;
}

/* Footer: Apply */
.pluckd-role-modal__footer {
    margin-top: 28px;
}

.pluckd-role-modal__apply,
.pluckd-role-modal__apply:visited,
.pluckd-role-modal .pluckd-role-modal__retry {
    display: inline-block;
    padding: 10px 26px;
    background: var(--pluckd-pink);
    color: #fff;
    border: 0;
    border-radius: 0;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.pluckd-role-modal__apply:hover,
.pluckd-role-modal__apply:focus-visible,
.pluckd-role-modal .pluckd-role-modal__retry:hover,
.pluckd-role-modal .pluckd-role-modal__retry:focus-visible {
    background: var(--pluckd-ink);
    color: #fff;
}

/* Loading / error */
.pluckd-role-modal__status {
    padding: 24px 40px 12px 0;
    font-size: 16px;
}

.pluckd-role-modal__status p {
    margin: 0 0 16px;
}

.pluckd-role-modal__spinner {
    display: block;
    width: 34px;
    height: 34px;
    margin-bottom: 18px;
    border: 4px solid #e5e5e5;
    border-top-color: var(--pluckd-modal-color);
    border-radius: 50%;
    animation: pluckd-role-modal-spin 0.8s linear infinite;
}

@keyframes pluckd-role-modal-spin {
    to { transform: rotate(360deg); }
}

/* Mobile */
@media (max-width: 600px) {
    .pluckd-role-modal {
        width: calc(100% - 20px);
    }

    .pluckd-role-modal__panel {
        border-width: 7px;
        border-radius: 18px;
    }

    .pluckd-role-modal__content {
        padding: 30px 22px 26px;
    }

    .pluckd-role-modal__title {
        font-size: 27px;
    }

    .pluckd-role-modal__description {
        font-size: 17px;
    }

    .pluckd-role-modal__apply {
        display: block;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pluckd-role-modal[open] {
        animation: none;
    }

    .pluckd-role-modal__spinner {
        animation-duration: 2s;
    }
}