/* ============================================================
   KinkCode — Share Modal
   share/share-modal.css
   Depends on: html2canvas (loaded in share-modal.php)
   ============================================================ */

/* Fonts inherited from index.html — no duplicate @import needed */

/* ---------- Overlay ---------- */
#kc-share-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 9999;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}
#kc-share-overlay.kc-open {
    display: flex;
    animation: kcFadeIn 0.2s ease forwards;
}

@keyframes kcFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------- Modal Sheet ---------- */
#kc-share-modal {
    background: #161616;
    border-top: 1px solid #2a2a2a;
    border-radius: 14px 14px 0 0;
    width: 100%;
    max-width: 480px;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: kcSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    max-height: 96vh;
    overflow-y: auto;
}

@keyframes kcSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ---------- Modal Top Bar ---------- */
#kc-share-modal-topbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 0;
    box-sizing: border-box;
}

#kc-share-modal-drag {
    width: 36px;
    height: 4px;
    background: #333;
    border-radius: 2px;
    margin: 12px auto 0;
}

#kc-share-close {
    background: none;
    border: none;
    color: #666;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    margin-left: auto;
    display: block;
    transition: color 0.15s;
}
#kc-share-close:hover { color: #f5f0eb; }

/* ---------- Card Preview ---------- */
#kc-card-preview-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px 16px;
    box-sizing: border-box;
    min-height: 200px;
    justify-content: center;
}

#kc-card-preview-img {
    display: none;
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 8px;
}

/* ---------- Loading State ---------- */
#kc-card-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 40px 0;
}

#kc-card-loading span {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    color: #666;
    letter-spacing: 1px;
}

.kc-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid #2a2a2a;
    border-top-color: #c0392b;
    border-radius: 50%;
    animation: kcSpin 0.7s linear infinite;
}

@keyframes kcSpin {
    to { transform: rotate(360deg); }
}

/* ---------- Action Buttons ---------- */
#kc-share-actions {
    width: 100%;
    padding: 0 20px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kc-btn-primary {
    width: 100%;
    background: #c0392b;
    color: #f5f0eb;
    border: none;
    padding: 15px 20px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.kc-btn-primary:hover  { background: #96281b; }
.kc-btn-primary:active { transform: scale(0.99); }
.kc-btn-primary:disabled {
    background: #3a1515;
    color: #7a4040;
    cursor: not-allowed;
}

#kc-share-secondary-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.kc-btn-ghost {
    background: transparent;
    color: #f0ebe4;
    border: 1px solid #2a2a2a;
    padding: 13px 10px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-radius: 3px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, transform 0.1s;
}
.kc-btn-ghost:hover  { border-color: #555; color: #fff; }
.kc-btn-ghost:active { transform: scale(0.99); }

#kc-btn-copy.kc-copied {
    border-color: #27ae60;
    color: #27ae60;
    letter-spacing: 2px;
}

#kc-share-cta {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11px;
    color: #444;
    text-align: center;
    margin: 4px 0 0;
    font-style: italic;
    letter-spacing: 0.3px;
}

/* ---------- Hidden Capture Card ---------- */
#kc-capture-wrap {
    position: fixed;
    top: 0;
    left: -9999px;
    width: 360px;
    height: 640px;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

#kc-capture-card {
    width: 360px;
    height: 640px;
    background: #0a0a0a;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: 'DM Sans', system-ui, sans-serif;
    color: #f5f0eb;
}

/* --- Capture Card: Header --- */
.kc-sc-hdr {
    height: 40px;
    flex-shrink: 0;
    background: #161616;
    padding: 0 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #242424;
    box-sizing: border-box;
}
.kc-sc-logo {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 19px;
    font-weight: 900;
    color: #f5f0eb;
    letter-spacing: -0.5px;
    line-height: 1;
}
.kc-sc-logo em {
    color: #c0392b;
    font-style: italic;
}
.kc-sc-qtag {
    font-size: 8px;
    color: #888;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'DM Sans', system-ui, sans-serif;
}

/* --- Capture Card: Hero --- */
.kc-sc-hero {
    flex-shrink: 0;
    padding: 10px 18px 14px;
    text-align: center;
    background: #0d0d0d;
    box-sizing: border-box;
}
.kc-sc-eyebrow {
    font-size: 7px;
    color: #c9a84c;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: 500;
    font-family: 'DM Sans', system-ui, sans-serif;
}
.kc-sc-profile-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 23px;
    font-weight: 900;
    color: #f5f0eb;
    line-height: 1.05;
    margin: 0 0 5px;
}
.kc-sc-profile-name em {
    color: #c0392b;
    font-style: italic;
}
.kc-sc-profile-desc {
    font-size: 10.5px;
    color: #888;
    font-style: italic;
    line-height: 1.45;
    font-family: 'Playfair Display', Georgia, serif;
    margin: 0;
}

/* --- Capture Card: Kink Categories ---
   Takes the largest share of the capture card's leftover vertical space
   (flex-grow 1.4 vs insight's 1 and play style's 0.6) and centers its
   content within it. It's always exactly 10 rows in both quiz modes, so
   it's a consistent, predictable place for most of the slack to live —
   rather than dumping it all as dead space next to whichever section
   happens to render shorter (e.g. play style with only 2 cards instead
   of 4). Core Drive and the footer CTA get a smaller, proportional share
   so every section floats a little instead of just one absorbing it all. */
.kc-sc-kink {
    flex: 1.4 1 auto;
    min-height: 0;
    padding: 9px 18px 7px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.kc-sc-section-eye {
    font-size: 7px;
    color: #c9a84c;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 500;
    font-family: 'DM Sans', system-ui, sans-serif;
}
.kc-sc-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.kc-sc-bar-name {
    font-size: 8.5px;
    color: #f0ebe4;
    font-family: 'DM Sans', system-ui, sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    width: 116px;
}
.kc-sc-bar-pct {
    font-size: 8.5px;
    color: #c9a84c;
    font-family: 'DM Sans', system-ui, sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    width: 28px;
    text-align: right;
}
.kc-sc-bar-track {
    flex: 1;
    height: 2px;
    background: #2a2a2a;
    border-radius: 1px;
}
.kc-sc-bar-fill {
    height: 2px;
    background: linear-gradient(90deg, #c0392b, #c9a84c);
    border-radius: 1px;
}

/* --- Capture Card: Play Style ---
   A smaller flex-grow share than kink/insight — just enough that centering
   its own (compact, non-stretched) grid leaves a bit of breathing room
   below it, so the footer floats down instead of sitting flush against the
   cards. overflow:hidden is a safety net: description text is truncated to
   fit (see fitClampText in quiz/index.html) so this should never engage,
   but it guarantees a card can never visually bleed into the footer below. */
.kc-sc-ps {
    flex: 0.6 1 auto;
    min-height: 0;
    padding: 8px 18px 7px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.kc-sc-ps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}
.kc-sc-ps-grid.kc-sc-ps-grid--wide {
    grid-template-rows: repeat(2, auto);
}
.kc-sc-ps-card {
    background: #161616;
    border-radius: 5px;
    padding: 7px 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    box-sizing: border-box;
    overflow: hidden;
}
.kc-sc-ps-card.primary {
    border: 1px solid #c0392b;
    border-top: 2px solid #c0392b;
}
.kc-sc-ps-card.secondary {
    border: 1px solid #1e1010;
    border-top: 2px solid #2e1010;
}
.kc-sc-ps-label {
    font-size: 7px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'DM Sans', system-ui, sans-serif;
    flex-shrink: 0;
}
.kc-sc-ps-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 11px;
    font-weight: 700;
    color: #f5f0eb;
    line-height: 1.2;
    flex-shrink: 0;
}
.kc-sc-ps-mini-track {
    height: 2px;
    background: #242424;
    border-radius: 1px;
    flex-shrink: 0;
}
.kc-sc-ps-mini-fill {
    height: 2px;
    border-radius: 1px;
}
.kc-sc-ps-desc {
    font-size: 8px;
    color: #777;
    line-height: 1.3;
    font-family: 'DM Sans', system-ui, sans-serif;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kc-sc-ps-grid--wide .kc-sc-ps-desc {
    -webkit-line-clamp: 2;
}

/* --- Capture Card: Core Drive Insight ---
   flex:1 like .kc-sc-kink — shares the capture card's leftover vertical
   space so this section floats with a bit of breathing room too, instead
   of sitting flush against the kink chart above it. */
.kc-sc-insight {
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px 20px 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}
.kc-sc-insight-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 10px;
    font-style: italic;
    color: #c8c0b6;
    line-height: 1.6;
    margin: 0;
}

/* --- Capture Card: Footer ---
   .kc-sc-ps centering its own flex-grow share leaves space below the cards
   too, so the footer floats down a little instead of sitting flush against
   them — no margin needed here. */
.kc-sc-ftr {
    height: 44px;
    flex-shrink: 0;
    background: #161616;
    border-top: 1px solid #242424;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
}
.kc-sc-cta {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 11px;
    font-style: italic;
    font-weight: 400;
    color: #c9a84c;
    letter-spacing: 0.3px;
}
.kc-sc-domain {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 8.5px;
    font-weight: 600;
    color: #f0ece6;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* ---------- Trigger Button ---------- */
.kc-share-trigger-btn {
    background: #c0392b;
    color: #f5f0eb;
    border: none;
    padding: 16px 32px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    display: inline-block;
}
.kc-share-trigger-btn:hover  { background: #96281b; }
.kc-share-trigger-btn:active { transform: scale(0.99); }

/* ---------- Desktop ---------- */
@media (min-width: 600px) {
    #kc-share-overlay {
        align-items: center;
        padding: 20px;
    }
    #kc-share-modal {
        border-radius: 10px;
        max-height: 90vh;
    }
}