/* ── KIN Library Styles — with !important for Elementor compatibility ────── */

.kin-library { background: #F5F5F7 !important; min-height: 60vh !important; }
.kin-library * { box-sizing: border-box !important; }

/* ── Tab panels ───────────────────────────────────────────────────────────── */
.kin-library-body { }
.kin-tab-panel    { display: none !important; }
.kin-tab-panel.is-active { display: block !important; }

/* ── Locked tab badge ─────────────────────────────────────────────────────── */
.kin-subnav__tab--locked { opacity: .6 !important; }
.kin-tab-lock { font-size: 10px !important; background: #CBAF7A !important; color: #2D433E !important; padding: 2px 6px !important; border-radius: 4px !important; margin-left: 6px !important; font-weight: 700 !important; text-transform: uppercase !important; }

/* ── Panel structure ──────────────────────────────────────────────────────── */
.kin-panel-header { max-width: 1300px !important; margin: 0 auto !important; padding: 48px 40px 0 !important; }
.kin-panel-header__title { font-family: 'Instrument Sans', sans-serif !important; font-size: 40px !important; font-weight: 800 !important; color: #1D1D1F !important; margin: 0 0 32px !important; letter-spacing: -1px !important; line-height: 1 !important; }
.kin-panel-content { max-width: 1300px !important; margin: 0 auto !important; padding: 0 40px 80px !important; }
.kin-panel-content--with-filters { max-width: 100% !important; padding: 0 !important; }

/* ── Dashboard layout (single column, sections stacked) ──────────────────── */
.kin-dashboard-greeting { max-width: 1300px !important; margin: 0 auto !important; padding: 48px 40px 32px !important; display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 24px !important; }
.kin-dashboard-greeting__time { font-family: 'Instrument Sans', sans-serif !important; font-size: 18px !important; font-weight: 400 !important; color: #6E6E73 !important; margin: 0 0 4px !important; }
.kin-dashboard-greeting__name { font-family: 'Instrument Sans', sans-serif !important; font-size: 52px !important; font-weight: 800 !important; color: #1D1D1F !important; margin: 0 !important; line-height: 1 !important; letter-spacing: -2px !important; }
.kin-dashboard-greeting__right { display: flex !important; align-items: center !important; gap: 10px !important; flex-shrink: 0 !important; padding-top: 8px !important; }

.kin-membership-badge { display: inline-flex !important; align-items: center !important; gap: 7px !important; background: #fff !important; border: 1px solid rgba(0,0,0,.09) !important; border-radius: 100px !important; padding: 8px 16px !important; font-family: 'Instrument Sans', sans-serif !important; font-size: 13px !important; color: #555 !important; font-weight: 600 !important; }
.kin-membership-badge__dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #8FBB69 !important; flex-shrink: 0 !important; }

/* Stats strip */
.kin-stats-strip { max-width: 1300px !important; margin: 0 auto !important; padding: 0 40px 32px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
.kin-stat-card { background: #fff !important; border-radius: 16px !important; padding: 28px 32px !important; box-shadow: 0 1px 8px rgba(0,0,0,.06) !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.kin-stat-card__num { font-family: 'Instrument Sans', sans-serif !important; font-size: 40px !important; font-weight: 800 !important; color: #2D433E !important; line-height: 1 !important; }
.kin-stat-card__label { font-family: 'Instrument Sans', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; color: #6E6E73 !important; text-transform: uppercase !important; letter-spacing: .5px !important; }

/* Dashboard section (full width, stacked) */
.kin-dashboard-section { max-width: 1300px !important; margin: 0 auto !important; padding: 0 40px 48px !important; }

/* ── Active program card ──────────────────────────────────────────────────── */
.kin-active-card { background: #fff !important; border-radius: 20px !important; box-shadow: 0 4px 20px rgba(0,0,0,.08) !important; overflow: hidden !important; display: grid !important; grid-template-columns: 1fr 320px !important; }
.kin-active-card__content { padding: 40px 44px !important; display: flex !important; flex-direction: column !important; gap: 16px !important; justify-content: center !important; }
.kin-active-card__title { font-family: 'Instrument Sans', sans-serif !important; font-size: 28px !important; font-weight: 800 !important; color: #1D1D1F !important; margin: 0 !important; line-height: 1.15 !important; letter-spacing: -.3px !important; }
.kin-active-card__desc { font-size: 15px !important; color: #555 !important; line-height: 1.65 !important; margin: 0 !important; }
.kin-active-card__progress { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.kin-active-card__progress-label { font-size: 13px !important; color: #6E6E73 !important; font-weight: 500 !important; }
.kin-active-card__image { background: #F5F5F7 center/cover no-repeat !important; min-height: 240px !important; }

/* ── Card grid ────────────────────────────────────────────────────────────── */
.kin-card-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 18px !important; }

/* ── Media card ───────────────────────────────────────────────────────────── */
.kin-media-card { display: block !important; text-decoration: none !important; background: #fff !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 1px 8px rgba(0,0,0,.06) !important; transition: box-shadow .2s, transform .2s !important; }
.kin-media-card:hover { box-shadow: 0 8px 36px rgba(0,0,0,.11) !important; transform: translateY(-2px) !important; }
.kin-media-card.is-hidden { display: none !important; }

.kin-media-card__thumb { position: relative !important; padding-bottom: 60% !important; background: #F5F5F7 center/cover !important; overflow: hidden !important; }
.kin-media-card__thumb--video { padding-bottom: 58% !important; background: #111 !important; }
.kin-media-card__thumb img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .4s !important; }
.kin-media-card__thumb:hover img { transform: scale(1.05) !important; }
.kin-media-card__fallback { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #E3DBD1 !important; }
.kin-media-card__overlay { position: absolute !important; inset: 0 !important; background: linear-gradient(to top, rgba(0,0,0,.4) 0%, transparent 50%) !important; display: flex !important; align-items: flex-end !important; padding: 12px !important; }
.kin-media-card__play { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; width: 48px !important; height: 48px !important; border-radius: 50% !important; background: rgba(255,255,255,.92) !important; color: #2D433E !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 20px rgba(0,0,0,.2) !important; transition: transform .18s, background .15s !important; }
.kin-media-card__thumb:hover .kin-media-card__play { transform: translate(-50%,-50%) scale(1.1) !important; background: #fff !important; }
.kin-media-card__dur { position: absolute !important; bottom: 8px !important; right: 8px !important; background: rgba(0,0,0,.65) !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; padding: 3px 8px !important; border-radius: 4px !important; }
.kin-media-card__workout-badge { position: absolute !important; top: 8px !important; left: 8px !important; background: #CBAF7A !important; color: #2D433E !important; font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .4px !important; padding: 3px 8px !important; border-radius: 4px !important; }
.kin-media-card__prog-bar { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: rgba(255,255,255,.2) !important; }
.kin-media-card__prog-bar div { height: 100% !important; background: #8FBB69 !important; }

.kin-media-card__body { padding: 18px 20px 20px !important; }
.kin-media-card__title { font-family: 'Instrument Sans', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: #1D1D1F !important; margin: 0 0 8px !important; line-height: 1.3 !important; }
.kin-media-card__desc { font-size: 13px !important; color: #555 !important; line-height: 1.55 !important; margin: 0 0 10px !important; }
.kin-media-card__coaching { font-size: 12px !important; color: #6E6E73 !important; line-height: 1.5 !important; margin: 10px 0 0 !important; border-top: 1px solid rgba(0,0,0,.06) !important; padding-top: 10px !important; }

/* ── Exercise library layout (left filters + grid) ────────────────────────── */
.kin-ex-library-layout { display: grid !important; grid-template-columns: 240px 1fr !important; gap: 0 !important; max-width: 1300px !important; margin: 0 auto !important; padding: 0 !important; }

.kin-ex-filters { padding: 32px 24px !important; background: #fff !important; border-right: 1px solid rgba(0,0,0,.07) !important; min-height: 60vh !important; }
.kin-ex-filters__header { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 6px !important; }
.kin-ex-filters__title { font-family: 'Instrument Sans', sans-serif !important; font-size: 16px !important; font-weight: 800 !important; color: #1D1D1F !important; margin: 0 !important; }
.kin-ex-filters__clear { font-family: 'Instrument Sans', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; color: #6E6E73 !important; background: none !important; border: none !important; cursor: pointer !important; text-decoration: underline !important; padding: 0 !important; }
.kin-ex-filters__clear:hover { color: #2D433E !important; }
.kin-ex-filters__count { font-size: 12px !important; color: #6E6E73 !important; margin: 0 0 20px !important; font-weight: 500 !important; }

.kin-ex-library-grid { padding: 32px 40px !important; }

/* Filter group */
.kin-filter-group-block { margin-bottom: 28px !important; padding-bottom: 28px !important; border-bottom: 1px solid rgba(0,0,0,.07) !important; }
.kin-filter-group-block:last-child { border-bottom: none !important; }
.kin-filter-group-block__title { font-family: 'Instrument Sans', sans-serif !important; font-size: 13px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .6px !important; color: #1D1D1F !important; margin: 0 0 12px !important; }

/* Checkboxes */
.kin-filter-check { display: flex !important; align-items: center !important; gap: 10px !important; padding: 7px 0 !important; cursor: pointer !important; font-family: 'Instrument Sans', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: #555 !important; transition: color .15s !important; }
.kin-filter-check:hover { color: #2D433E !important; }
.kin-filter-check input[type="checkbox"] { width: 16px !important; height: 16px !important; accent-color: #2D433E !important; flex-shrink: 0 !important; cursor: pointer !important; margin: 0 !important; }
.kin-filter-check.is-active { color: #2D433E !important; font-weight: 700 !important; }

/* Difficulty radio row */
.kin-filter-radio-row { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.kin-filter-radio { display: flex !important; align-items: center !important; gap: 10px !important; padding: 6px 0 !important; cursor: pointer !important; font-family: 'Instrument Sans', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: #555 !important; }
.kin-filter-radio input { accent-color: #2D433E !important; flex-shrink: 0 !important; margin: 0 !important; }
.kin-filter-radio.is-active { color: #2D433E !important; font-weight: 700 !important; }

/* ── Education list ───────────────────────────────────────────────────────── */
.kin-edu-list { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.kin-edu-row { display: flex !important; align-items: center !important; gap: 14px !important; padding: 16px 20px !important; border-radius: 12px !important; background: #fff !important; box-shadow: 0 1px 8px rgba(0,0,0,.06) !important; text-decoration: none !important; color: #1D1D1F !important; transition: box-shadow .15s, transform .15s !important; }
.kin-edu-row:hover { box-shadow: 0 4px 20px rgba(0,0,0,.09) !important; transform: translateX(4px) !important; }
.kin-edu-row__icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: #F5F5F7 !important; color: #2D433E !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
.kin-edu-row__body  { flex: 1 !important; min-width: 0 !important; }
.kin-edu-row__title { font-family: 'Instrument Sans', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; margin: 0 0 2px !important; color: #1D1D1F !important; }
.kin-edu-row__summary { font-size: 12px !important; color: #6E6E73 !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.kin-edu-row__dur   { font-size: 12px !important; color: #6E6E73 !important; font-weight: 600 !important; white-space: nowrap !important; }
.kin-edu-row__arrow { color: #6E6E73 !important; transition: transform .15s, color .15s !important; }
.kin-edu-row:hover .kin-edu-row__arrow { transform: translateX(4px) !important; color: #2D433E !important; }

/* ── Intake gate ──────────────────────────────────────────────────────────── */
.kin-intake-gate { padding: 80px 40px !important; display: flex !important; justify-content: center !important; }
.kin-intake-gate__card { max-width: 520px !important; text-align: center !important; background: #fff !important; border-radius: 20px !important; padding: 60px 48px !important; box-shadow: 0 4px 20px rgba(0,0,0,.08) !important; }
.kin-intake-gate__title { font-family: 'Instrument Sans', sans-serif !important; font-size: 32px !important; font-weight: 800 !important; color: #1D1D1F !important; margin: 10px 0 14px !important; }
.kin-intake-gate__text  { font-size: 16px !important; color: #555 !important; line-height: 1.7 !important; margin: 0 0 32px !important; }

/* ── Upgrade gate ─────────────────────────────────────────────────────────── */
.kin-upgrade-gate { padding: 80px 40px !important; display: flex !important; justify-content: center !important; }
.kin-upgrade-gate__card { max-width: 520px !important; text-align: center !important; }
.kin-upgrade-gate__title { font-family: 'Instrument Sans', sans-serif !important; font-size: 28px !important; font-weight: 800 !important; color: #1D1D1F !important; margin: 0 0 14px !important; }
.kin-upgrade-gate__text  { font-size: 16px !important; color: #555 !important; line-height: 1.7 !important; margin: 0 0 32px !important; }

/* ── Empty ────────────────────────────────────────────────────────────────── */
.kin-empty { color: #6E6E73 !important; font-style: italic !important; font-size: 15px !important; padding: 40px 0 !important; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .kin-active-card { grid-template-columns: 1fr !important; }
    .kin-active-card__image { min-height: 200px !important; }
}
@media (max-width: 900px) {
    .kin-dashboard-greeting { flex-direction: column !important; padding: 32px 24px 24px !important; }
    .kin-dashboard-greeting__name { font-size: 40px !important; }
    .kin-stats-strip { grid-template-columns: 1fr !important; padding: 0 24px 24px !important; }
    .kin-dashboard-section { padding-left: 24px !important; padding-right: 24px !important; }
    .kin-panel-header { padding: 32px 24px 0 !important; }
    .kin-panel-header__title { font-size: 32px !important; }
    .kin-panel-content { padding: 0 24px 60px !important; }
    .kin-ex-library-layout { grid-template-columns: 1fr !important; }
    .kin-ex-filters { border-right: none !important; border-bottom: 1px solid rgba(0,0,0,.07) !important; padding: 20px 24px !important; min-height: 0 !important; }
    .kin-ex-library-grid { padding: 24px !important; }
}
@media (max-width: 600px) {
    .kin-dashboard-greeting__name { font-size: 32px !important; }
    .kin-card-grid { grid-template-columns: 1fr !important; }
    .kin-active-card__content { padding: 28px 20px !important; }
    .kin-active-card__title { font-size: 22px !important; }
}

/* ── Update profile link ──────────────────────────────────────────────────── */
.kin-profile-update-link { max-width: 1300px !important; margin: -16px auto 0 !important; padding: 0 40px 28px !important; text-align: right !important; }
.kin-profile-update-link a { font-size: 13px !important; color: #6E6E73 !important; text-decoration: none !important; font-weight: 500 !important; transition: color .15s !important; }
.kin-profile-update-link a:hover { color: #2D433E !important; }
.kin-profile-update-link button { font-size: 13px !important; color: #6E6E73 !important; text-decoration: underline !important; text-underline-offset: 3px !important; font-weight: 500 !important; font-family: inherit !important; background: none !important; border: none !important; padding: 0 !important; cursor: pointer !important; transition: color .15s !important; }
.kin-profile-update-link button:hover { color: #2D433E !important; }
.kin-modal--form .kin-modal__inner { max-width: 760px !important; max-height: 88vh !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; background: var(--kin-surface, #1C1C1E) !important; }
.kin-modal__form-body { overflow-y: auto !important; flex: 1 !important; }

/* ── Active card — completed state ───────────────────────────────────────── */
.kin-active-card--complete { border: 2px solid #8FBB69 !important; }
.kin-active-card--complete .kin-active-card__content { background: linear-gradient(135deg, rgba(143,187,105,.06) 0%, transparent 60%) !important; }
.kin-active-card__complete-hd { display: flex !important; align-items: center !important; gap: 10px !important; }
.kin-completion-tick { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; background: #8FBB69 !important; border-radius: 50% !important; color: #fff !important; flex-shrink: 0 !important; }
