/* "Ta med dig förslagen": QR panel and trigger button (public/share-qr.js).
   Every rule is scoped to .kshare-*; colours follow the kiosk's brand
   variables (styles.css :root) with the same values as fallbacks.
   Sized for the 1080 x 1920 portrait kiosk, still usable on a laptop. */
.kshare-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;   /* above the kiosk's own overlays (settings panel 10000, on-screen keyboard) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vmin;
    background: rgba(18, 44, 54, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: kshare-fade 0.18s ease-out;
}

.kshare-card {
    position: relative;
    width: min(92vw, 760px);
    max-height: 94vh;
    overflow: auto;
    padding: clamp(28px, 4.4vmin, 48px) clamp(22px, 4.4vmin, 52px) clamp(24px, 3.6vmin, 40px);
    border-radius: 32px;
    background: #fff;
    color: var(--text-slate, #122C36);
    text-align: center;
    box-shadow: 0 30px 80px -20px rgba(111, 59, 120, 0.45);
}

.kshare-title {
    margin: 0 56px 10px;
    font-size: clamp(26px, 3.6vmin, 42px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--brand-purple, #6F3B78);
}

.kshare-scan {
    margin: 0 0 clamp(16px, 2.6vmin, 28px);
    font-size: clamp(19px, 2.6vmin, 30px);
    font-weight: 600;
    line-height: 1.3;
}

/* The code itself: black on white with uqr's four-module quiet zone inside. */
.kshare-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(70vw, 50vh, 500px);
    aspect-ratio: 1 / 1;
    margin: 0 auto clamp(14px, 2vmin, 22px);
    border: 3px solid var(--bg-mesh-2, #E8E5EC);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
}

.kshare-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.kshare-status {
    padding: 0 24px;
    font-size: clamp(18px, 2.2vmin, 26px);
    font-weight: 600;
    color: var(--text-muted, #627A86);
}

.kshare-loading .kshare-status::before {
    content: "";
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border: 6px solid var(--bg-mesh-2, #E8E5EC);
    border-top-color: var(--brand-purple, #6F3B78);
    border-radius: 50%;
    animation: kshare-spin 0.9s linear infinite;
}

.kshare-error {
    color: #B3243A;
}

.kshare-url {
    margin: 0 0 8px;
    font-size: clamp(16px, 2vmin, 23px);
    font-weight: 700;
    color: var(--brand-blue, #00659E);
    direction: ltr;
    unicode-bidi: isolate;
    overflow-wrap: anywhere;
}

.kshare-url:empty {
    display: none;
}

.kshare-note {
    margin: 0 0 clamp(18px, 3vmin, 30px);
    font-size: clamp(15px, 1.8vmin, 20px);
    line-height: 1.4;
    color: #4A5F69;
}

.kshare-close {
    min-width: 240px;
    min-height: 72px;
    padding: 14px 40px;
    border: 0;
    border-radius: 999px;
    background: var(--brand-purple, #6F3B78);
    color: #fff;
    font: inherit;
    font-size: clamp(20px, 2.4vmin, 28px);
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}

.kshare-x {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 50%;
    background: #F4F1F6;
    color: var(--text-slate, #122C36);
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

.kshare-close:active,
.kshare-x:active,
.kshare-trigger:active {
    transform: scale(0.97);
}

.kshare-close:focus-visible,
.kshare-x:focus-visible,
.kshare-trigger:focus-visible {
    outline: 4px solid var(--sky-blue, #007FC7);
    outline-offset: 3px;
}

/* Trigger for the course-cards header. */
.kshare-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 22px;
    border: 2px solid var(--brand-purple, #6F3B78);
    border-radius: 999px;
    background: #fff;
    color: var(--brand-purple, #6F3B78);
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}

.kshare-trigger svg {
    width: 24px;
    height: 24px;
    flex: none;
}

@keyframes kshare-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes kshare-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .kshare-overlay { animation: none; }
    .kshare-loading .kshare-status::before { animation-duration: 3s; }
}