/* The certificate dialog (course/parts/certificate.php, Figma 01.16) and its share menu (01.17). */

.cil-course-cert {
    width: min(700px, calc(100% - 32px));   /* 100%: the window without its scroll bar, as plans.css */
    max-width: none;
    max-height: calc(100vh - 32px);
    padding: 40px 44px 32px;
    border: 0;
    border-radius: 16px;
    background: var(--cil-white);
    text-align: center;
    overflow: visible;   /* the share menu may reach past the card's edge */
}
.cil-course-cert[open] { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cil-course-cert::backdrop { background: color-mix(in srgb, var(--cil-black-dark-4) 72%, transparent); }

.cil-course .cil-course-cert__close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cil-white);
}
.cil-course .cil-course-cert__close:hover { background: var(--cil-black-light-1); }
.cil-course .cil-course-cert__title { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--cil-black-dark-4); }
.cil-course .cil-course-cert__sub { margin: 0; font-size: 16px; line-height: 1.2; color: var(--cil-black-regular-7); }

/* The certificate: a desktop-wide page, scaled and shifted by certificate.js so the certificate
   alone fills the frame. The frame starts at the design's proportions until it is measured. */
.cil-course-cert__frame {
    position: relative;
    width: 100%;
    max-width: 596px;
    aspect-ratio: 596 / 422;
    overflow: hidden;
    border: 1px solid var(--cil-black-light-5);
    border-radius: 8px;
    background: var(--cil-white);
}
.cil-course-cert__frame[style*="height"] { aspect-ratio: auto; }
.cil-course-cert__page {
    position: absolute;
    top: 0;
    left: 0;
    width: 1280px;
    height: 1400px;
    border: 0;
    transform-origin: 0 0;
    opacity: 0;
    pointer-events: none;
}
.cil-course-cert__page.is-ready { opacity: 1; transition: opacity 0.3s ease; }
.cil-course-cert__state {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 8px;
    margin: 0;
    padding: 16px;
    font-size: 14px;
    color: var(--cil-black-regular-7);
}
.cil-course-cert__state[hidden] { display: none; }
.cil-course-cert__state a { color: var(--cil-blue-dark); text-decoration: underline; }

.cil-course-cert__actions { display: flex; gap: 12px; margin-top: 0; }
.cil-course .cil-course-cert__download { width: 200px; min-width: 0; height: 44px; min-height: 0; padding: 0 16px; }
.cil-course .cil-course-cert__download:disabled { opacity: 0.5; cursor: default; }
.cil-course-cert__shareWrap { position: relative; }
.cil-course .cil-course-cert__share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 44px;
    border: 1px solid var(--cil-black-regular-3);
    border-radius: 22px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cil-black-dark-4);
}
.cil-course .cil-course-cert__share:hover,
.cil-course .cil-course-cert__share[aria-expanded="true"] { border-color: var(--cil-black-dark-4); }

/* The share menu (01.17): above its button, lined up with the button's reading-start edge. */
.cil-course-share {
    position: absolute;
    bottom: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 248px;
    padding: 8px;
    border-radius: 12px;
    background: var(--cil-white);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--cil-black-dark-4) 24%, transparent);
    text-align: start;
}
.cil-course-share[hidden] { display: none; }
.cil-course .cil-course-share__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.2;
    color: var(--cil-black-dark-4);
    text-decoration: none;
}
.cil-course .cil-course-share__item:hover,
.cil-course .cil-course-share__item:focus-visible { background: var(--cil-black-light-1); outline: none; }
.cil-course-share__icon { flex: none; width: auto; height: 22px; color: var(--cil-black); }

@media (prefers-reduced-motion: no-preference) {
    .cil-course-cert[open] { animation: cil-course-celebrate-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .cil-course-cert[open]::backdrop { animation: cil-course-celebrate-fade 0.3s ease-out both; }
}

@media (max-width: 767px) {
    .cil-course-cert { padding: 44px 16px 20px; }
    .cil-course .cil-course-cert__title { font-size: 24px; }
    /* As the design's phone frames draw it (01.16, 01.17 mobile): the two buttons side by side, and the
       menu opening downward from under them, at the row's reading-start edge -- over the page below
       rather than over the certificate. */
    .cil-course-cert__actions { position: relative; align-self: stretch; }
    .cil-course .cil-course-cert__download, .cil-course-cert__shareWrap { flex: 1 1 0; min-width: 0; }
    .cil-course .cil-course-cert__download { width: auto; }
    .cil-course .cil-course-cert__share { width: 100%; }
    .cil-course-cert__shareWrap { position: static; }
    .cil-course-share { top: calc(100% + 8px); bottom: auto; inset-inline-start: auto; inset-inline-end: 0; width: min(248px, 100%); }
    .cil-course-share.is-up { top: auto; bottom: calc(100% + 8px); }
}