/*
 * Public card system - Stripe-like panels on pure white.
 * Loaded globally and intentionally scoped under #app so it can unify cards
 * that are currently styled inside individual templates.
 */

:root {
    --pc-ink: #0f172a;
    --pc-muted: #64748b;
    --pc-line: rgba(15, 23, 42, .10);
    --pc-line-strong: rgba(14, 116, 144, .30);
    --pc-blue: #12304f;
    --pc-cyan: #0e7490;
    --pc-cyan-soft: rgba(14, 116, 144, .08);
    --pc-teal: #10b981;
    --pc-surface: #fff;
    --pc-radius: 8px;
    --pc-shadow: 0 18px 44px rgba(15, 23, 42, .08);
    --pc-shadow-hover: 0 24px 58px rgba(15, 23, 42, .13);
}

body #app :is(
    .solutionTile,
    .academyPanel,
    .academyCard,
    .proofCard,
    .insightCard,
    .searchResultItem,
    .clientLogoItem,
    .tsPanel,
    .tsCard,
    .tsdCard,
    .tsdRelatedItem,
    .epSummaryCard,
    .epCard,
    .epAccessCard,
    .epSideCard,
    .epBreakdownItem,
    .edCard,
    .edRelatedItem,
    .meStat,
    .mePanel,
    .meCard,
    .tdyCatCard,
    .tdyCard,
    .tdyBundleCard,
    .bdCard,
    .bdCourseCard,
    .bdSideCard,
    .cdCard,
    .ldCard,
    .ldCourseCard,
    .ldCertCard,
    .ldLiveCard,
    .ldCompletedCard,
    .mcCard,
    .mcSidebarCard,
    .mcEmpty,
    .lpStatCard,
    .lpCourseCard,
    .lpCertCard,
    .lpReviewCard,
    .lpAccPanel,
    .lcCard,
    .lcdCard,
    .lcdSideCard,
    .certFrameCard,
    .certActionCard,
    .cvCard,
    .qrCard,
    .academyLessonHeaderCard,
    .academyLessonContentCard,
    .academyLessonCommentCard,
    .academyDownloadItem,
    .academyPaymentsPanel,
    .academyPaymentCard,
    .academyEmptyCard,
    .academyScholarshipToolbarCard,
    .academyScholarshipCard,
    .academyScholarshipMetaCard,
    .academyScholarshipEmptyCard,
    .academyScholarshipSideCard,
    .academyScholarshipApplyCard,
    .academyScholarshipInfoMiniCard,
    .academyScholarshipUploadCard
) {
    background:
        linear-gradient(135deg, rgba(14, 116, 144, .045), rgba(255, 255, 255, 0) 42%),
        var(--pc-surface) !important;
    border: 1px solid var(--pc-line) !important;
    border-radius: var(--pc-radius) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .03), var(--pc-shadow) !important;
    isolation: isolate;
    letter-spacing: 0 !important;
    overflow: hidden;
    position: relative;
    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease,
        background-color .22s ease !important;
}

body #app :is(
    .solutionTile,
    .academyPanel,
    .academyCard,
    .proofCard,
    .insightCard,
    .searchResultItem,
    .tsPanel,
    .tsCard,
    .tsdCard,
    .epSummaryCard,
    .epCard,
    .epAccessCard,
    .epSideCard,
    .edCard,
    .mePanel,
    .meCard,
    .tdyCatCard,
    .tdyCard,
    .tdyBundleCard,
    .bdCard,
    .bdCourseCard,
    .bdSideCard,
    .cdCard,
    .ldCard,
    .ldCourseCard,
    .ldCertCard,
    .ldLiveCard,
    .ldCompletedCard,
    .mcCard,
    .mcSidebarCard,
    .lpStatCard,
    .lpCourseCard,
    .lpCertCard,
    .lpReviewCard,
    .lcCard,
    .lcdCard,
    .lcdSideCard,
    .certFrameCard,
    .certActionCard,
    .cvCard,
    .qrCard,
    .academyLessonHeaderCard,
    .academyLessonContentCard,
    .academyLessonCommentCard,
    .academyPaymentsPanel,
    .academyPaymentCard,
    .academyScholarshipToolbarCard,
    .academyScholarshipCard,
    .academyScholarshipSideCard,
    .academyScholarshipApplyCard,
    .academyScholarshipUploadCard
)::before {
    background: linear-gradient(180deg, var(--pc-cyan), var(--pc-blue));
    content: "";
    inset: 0 auto 0 0;
    opacity: .92;
    position: absolute;
    width: 3px;
    z-index: 0;
}

body #app :is(
    .solutionTile,
    .academyPanel,
    .academyCard,
    .proofCard,
    .insightCard,
    .searchResultItem,
    .tsPanel,
    .tsCard,
    .tsdCard,
    .epSummaryCard,
    .epCard,
    .epAccessCard,
    .edCard,
    .mePanel,
    .tdyCard,
    .tdyBundleCard,
    .bdCard,
    .bdCourseCard,
    .cdCard,
    .ldCourseCard,
    .ldCertCard,
    .ldLiveCard,
    .ldCompletedCard,
    .mcCard,
    .lpCourseCard,
    .lpCertCard,
    .lcCard,
    .lcdCard,
    .academyScholarshipCard
)::after {
    background: linear-gradient(135deg, rgba(14, 116, 144, .12), rgba(16, 185, 129, 0));
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    content: "";
    height: 84px;
    opacity: .55;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 84px;
    z-index: 0;
}

body #app :is(
    .solutionTile,
    .academyPanel,
    .academyCard,
    .proofCard,
    .insightCard,
    .searchResultItem,
    .clientLogoItem,
    .tsPanel,
    .tsCard,
    .tsdCard,
    .tsdRelatedItem,
    .epSummaryCard,
    .epCard,
    .epAccessCard,
    .epSideCard,
    .epBreakdownItem,
    .edCard,
    .edRelatedItem,
    .meStat,
    .mePanel,
    .meCard,
    .tdyCatCard,
    .tdyCard,
    .tdyBundleCard,
    .bdCard,
    .bdCourseCard,
    .bdSideCard,
    .cdCard,
    .ldCard,
    .ldCourseCard,
    .ldCertCard,
    .ldLiveCard,
    .ldCompletedCard,
    .mcCard,
    .mcSidebarCard,
    .mcEmpty,
    .lpStatCard,
    .lpCourseCard,
    .lpCertCard,
    .lpReviewCard,
    .lpAccPanel,
    .lcCard,
    .lcdCard,
    .lcdSideCard,
    .certFrameCard,
    .certActionCard,
    .cvCard,
    .qrCard,
    .academyLessonHeaderCard,
    .academyLessonContentCard,
    .academyLessonCommentCard,
    .academyDownloadItem,
    .academyPaymentsPanel,
    .academyPaymentCard,
    .academyEmptyCard,
    .academyScholarshipToolbarCard,
    .academyScholarshipCard,
    .academyScholarshipMetaCard,
    .academyScholarshipEmptyCard,
    .academyScholarshipSideCard,
    .academyScholarshipApplyCard,
    .academyScholarshipInfoMiniCard,
    .academyScholarshipUploadCard
) > * {
    position: relative;
    z-index: 1;
}

body #app :is(
    .solutionTile,
    .academyCard,
    .insightCard,
    .searchResultItem,
    .tsCard,
    .tsdRelatedItem,
    .epCard,
    .edRelatedItem,
    .meCard,
    .tdyCard,
    .tdyBundleCard,
    .bdCourseCard,
    .ldCourseCard,
    .ldCertCard,
    .ldLiveCard,
    .ldCompletedCard,
    .mcCard,
    .lpCourseCard,
    .lpCertCard,
    .lpReviewCard,
    .lcCard,
    .academyDownloadItem,
    .academyPaymentCard,
    .academyScholarshipCard
):hover {
    background:
        linear-gradient(135deg, rgba(14, 116, 144, .075), rgba(255, 255, 255, 0) 48%),
        #fff !important;
    border-color: var(--pc-line-strong) !important;
    box-shadow: 0 2px 0 rgba(14, 116, 144, .08), var(--pc-shadow-hover) !important;
    transform: translateY(-3px);
}

body #app :is(
    .solutionTile strong,
    .academyCard strong,
    .insightCard strong,
    .searchResultItem strong,
    .tsCardTitle,
    .tsPanelTitle,
    .tsdHeading,
    .epCardTitle,
    .epSummaryTitle,
    .edHeading,
    .meCardTitle,
    .mePanel h2,
    .tdyCardTitle,
    .tdyBundleTitle,
    .bdCardTitle,
    .bdCourseTitle,
    .cdCardHeading,
    .ldCourseName,
    .ldCertName,
    .ldLiveName,
    .ldCompletedName,
    .mcCardTitle,
    .lpCourseTitle,
    .lpCertTitle,
    .lcTitle,
    .lcdTitle,
    .academyScholarshipCardTitle
) {
    color: var(--pc-ink) !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

body #app :is(
    .solutionTile em,
    .academyCard em,
    .insightCard em,
    .searchResultItem em,
    .tsText,
    .tsCardDesc,
    .tsdStatusText,
    .epCardDesc,
    .epAccessHint,
    .edDescription,
    .edStatusText,
    .meMeta,
    .tdyCardInstructor,
    .bdCardBody,
    .cdCardSub,
    .ldCourseSub,
    .ldCertDate,
    .ldLiveDate,
    .mcInstructorName,
    .mcEnrolledDate,
    .lpCourseMeta,
    .lpCertMeta,
    .academyScholarshipCardDesc
) {
    color: var(--pc-muted) !important;
}

body #app :is(
    .tsBadge,
    .epCardBadge,
    .edStatusBadge,
    .meBadge,
    .tdyBadge,
    .tdyPill,
    .bdBadge,
    .cdBadge,
    .ldLivePlatform,
    .mcBadge,
    .mcReviewPill,
    .lpReviewStatus,
    .academyScholarshipBadge,
    .academyScholarshipStatus
) {
    border-radius: 999px !important;
    letter-spacing: 0 !important;
}

body #app :is(
    .tdyCardImg,
    .mcCardImg,
    .bdCourseThumb,
    .insightCard picture,
    .cdHeroMedia,
    .academyScholarshipCardMedia
) {
    border-radius: var(--pc-radius) !important;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    body #app :is(
        .solutionTile,
        .academyCard,
        .insightCard,
        .searchResultItem,
        .tsCard,
        .tsdRelatedItem,
        .epCard,
        .edRelatedItem,
        .meCard,
        .tdyCard,
        .tdyBundleCard,
        .bdCourseCard,
        .ldCourseCard,
        .ldCertCard,
        .ldLiveCard,
        .ldCompletedCard,
        .mcCard,
        .lpCourseCard,
        .lpCertCard,
        .lpReviewCard,
        .lcCard,
        .academyDownloadItem,
        .academyPaymentCard,
        .academyScholarshipCard
    ):hover {
        transform: none;
    }
}

@media (max-width: 575.98px) {
    body #app :is(
        .solutionTile,
        .academyPanel,
        .academyCard,
        .proofCard,
        .insightCard,
        .searchResultItem,
        .tsPanel,
        .tsCard,
        .tsdCard,
        .epSummaryCard,
        .epCard,
        .edCard,
        .mePanel,
        .meCard,
        .tdyCatCard,
        .tdyCard,
        .tdyBundleCard,
        .bdCard,
        .bdCourseCard,
        .bdSideCard,
        .cdCard,
        .mcCard,
        .mcSidebarCard,
        .lpCourseCard,
        .lpCertCard,
        .academyScholarshipCard
    ) {
        box-shadow: 0 12px 30px rgba(15, 23, 42, .07) !important;
    }
}

body #app :is(
    .legalPageBg,
    .academyPaymentsPage,
    .academyScholarshipPage,
    .kycPage
) {
    background: #fff !important;
}

body #app :is(
    .qz-card,
    .asn-card,
    .ntfItem,
    .evCard,
    .careerMainCard,
    .careerContentBlock,
    .legalHeroCard,
    .legalContentCard,
    .kycCard
) {
    background:
        linear-gradient(135deg, rgba(14, 116, 144, .045), rgba(255, 255, 255, 0) 42%),
        #fff !important;
    border: 1px solid var(--pc-line) !important;
    border-radius: var(--pc-radius) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .03), var(--pc-shadow) !important;
    isolation: isolate;
    letter-spacing: 0 !important;
    overflow: hidden;
    position: relative;
    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease,
        background-color .22s ease !important;
}

body #app :is(
    .qz-card,
    .asn-card,
    .ntfItem,
    .evCard,
    .careerMainCard,
    .careerContentBlock,
    .legalHeroCard,
    .legalContentCard,
    .kycCard
)::before {
    background: linear-gradient(180deg, var(--pc-cyan), var(--pc-blue));
    content: "";
    inset: 0 auto 0 0;
    opacity: .92;
    position: absolute;
    width: 3px;
    z-index: 0;
}

body #app :is(
    .qz-card,
    .asn-card,
    .ntfItem,
    .evCard,
    .careerMainCard,
    .careerContentBlock,
    .legalHeroCard,
    .legalContentCard,
    .kycCard
)::after {
    background: linear-gradient(135deg, rgba(14, 116, 144, .12), rgba(16, 185, 129, 0));
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    content: "";
    height: 84px;
    opacity: .5;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 84px;
    z-index: 0;
}

body #app :is(
    .qz-card,
    .asn-card,
    .ntfItem,
    .evCard,
    .careerMainCard,
    .careerContentBlock,
    .legalHeroCard,
    .legalContentCard,
    .kycCard
) > * {
    position: relative;
    z-index: 1;
}

body #app :is(
    .ntfItem,
    .careerContentBlock,
    .kycCard
):hover {
    background:
        linear-gradient(135deg, rgba(14, 116, 144, .075), rgba(255, 255, 255, 0) 48%),
        #fff !important;
    border-color: var(--pc-line-strong) !important;
    box-shadow: 0 2px 0 rgba(14, 116, 144, .08), var(--pc-shadow-hover) !important;
    transform: translateY(-3px);
}

body #app :is(
    .tdyCatItem,
    .cdInstructorItem,
    .cdProgressBox,
    .cdCertBox,
    .cdReviewItem,
    .lpAccItem,
    .academyCommentItem,
    .academyCompleteBox,
    .qz-choice,
    .asn-status-box,
    .asn-feedback-block,
    .evItem,
    .ecMeta,
    .careerMetaItem,
    .kycDocUpload,
    .kycDocItem,
    .kycEmptyDocs,
    .profileInfoItem,
    .academyPaymentMetaBox,
    .academyScholarshipFormTop,
    .academyScholarshipInfoChip,
    .academyStateBox,
    .certMetaCell
) {
    background: #fff !important;
    border: 1px solid var(--pc-line) !important;
    border-radius: var(--pc-radius) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .055) !important;
    letter-spacing: 0 !important;
}

body #app :is(
    .tdyCatItem,
    .qz-choice,
    .kycDocItem
):hover {
    border-color: var(--pc-line-strong) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
}

body #app .careerDetailWrap .careerApplyCard {
    background:
        linear-gradient(135deg, rgba(14, 116, 144, .24), rgba(15, 23, 42, 0) 44%),
        linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: var(--pc-radius) !important;
    box-shadow: 0 24px 58px rgba(15, 23, 42, .18) !important;
    overflow: hidden;
    position: relative;
}

body #app .careerDetailWrap .careerApplyCard::before {
    background: linear-gradient(180deg, #7dd3fc, var(--pc-cyan));
    content: "";
    inset: 0 auto 0 0;
    pointer-events: none;
    position: absolute;
    width: 3px;
    z-index: 0;
}

body #app .careerDetailWrap .careerApplyCard > * {
    position: relative;
    z-index: 1;
}

body #app :is(
    .qz-title,
    .asn-title,
    .ntfTitle,
    .legalTitle,
    .careerBlockTitle,
    .careerMetaValue,
    .kycTitle,
    .kycCard h2,
    .profileInfoItem h5
) {
    color: var(--pc-ink) !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

body #app :is(
    .qz-desc,
    .asn-description,
    .ntfMsg,
    .legalDesc,
    .legalContent,
    .careerBlockText,
    .careerBlockText p,
    .careerBlockText li,
    .kycMeta,
    .kycDocMeta
) {
    color: var(--pc-muted) !important;
}

body #app :is(
    .qz-chip,
    .asn-chip,
    .asn-badge,
    .evBadge,
    .kycBadge,
    .profileStatusBadge,
    .profileStatusPill,
    .academyPaymentsPill,
    .academyScholarshipPill,
    .academyScholarshipHeroPill,
    .academyScholarshipBreadcrumb,
    .certCodeBox
) {
    border-radius: 999px !important;
    letter-spacing: 0 !important;
}

@media (max-width: 575.98px) {
    body #app :is(
        .qz-card,
        .asn-card,
        .ntfItem,
        .evCard,
        .careerMainCard,
        .careerContentBlock,
        .legalHeroCard,
        .legalContentCard,
        .kycCard
    ) {
        box-shadow: 0 12px 30px rgba(15, 23, 42, .07) !important;
    }
}