/**
 * Guru WP - Public Styles
 *
 * Neutral, theme-friendly styles. Uses BEM naming under .guru- namespace.
 * All colours use CSS custom properties for easy theming.
 */

:root {
    --guru-primary:    #2563eb;
    --guru-primary-dk: #1d4ed8;
    --guru-success:    #16a34a;
    --guru-warning:    #f59e0b;
    --guru-danger:     #dc2626;
    --guru-text:       #1e293b;
    --guru-text-light: #64748b;
    --guru-bg:         #ffffff;
    --guru-bg-alt:     #f8fafc;
    --guru-border:     #e2e8f0;
    --guru-radius:     8px;
    --guru-shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
}

/* ----- Reset-ish for Guru elements ----- */
[class*="guru-"] { box-sizing: border-box; }

/* ===== BUTTONS ===== */
.guru-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    padding: .625em 1.25em; border: 0; border-radius: var(--guru-radius);
    font-size: .9375rem; font-weight: 600; line-height: 1.4;
    cursor: pointer; text-decoration: none; transition: background .2s, color .2s, box-shadow .2s;
    color: var(--guru-text); background: var(--guru-bg-alt);
}
.guru-btn:hover { box-shadow: var(--guru-shadow); }
.guru-btn--primary { background: var(--guru-primary); color: #fff; }
.guru-btn--primary:hover { background: var(--guru-primary-dk); color: #fff; }
.guru-btn--success { background: var(--guru-success); color: #fff; }
.guru-btn--outline { background: transparent; border: 1px solid var(--guru-border); }
.guru-btn--outline:hover { border-color: var(--guru-primary); color: var(--guru-primary); }
.guru-btn--sm { padding: .375em .875em; font-size: .8125rem; }
.guru-btn--lg { padding: .875em 2em; font-size: 1.0625rem; }

/* ===== BADGES ===== */
.guru-badge {
    display: inline-block; padding: .2em .6em; border-radius: 9999px;
    font-size: .75rem; font-weight: 600; line-height: 1.4;
    background: var(--guru-bg-alt); color: var(--guru-text);
}
.guru-badge--success { background: #dcfce7; color: #166534; }
.guru-badge--pending, .guru-badge--warning { background: #fef3c7; color: #92400e; }
.guru-badge--completed { background: #dcfce7; color: #166534; }
.guru-badge--failed, .guru-badge--danger { background: #fee2e2; color: #991b1b; }
.guru-badge--refunded { background: #e0e7ff; color: #3730a3; }
.guru-badge--cancelled { background: var(--guru-bg-alt); color: var(--guru-text-light); }
.guru-badge--sm { font-size: .6875rem; padding: .15em .5em; }

/* ===== PRICE ===== */
.guru-price { font-weight: 700; font-size: 1.125rem; color: var(--guru-text); }
.guru-price--free { color: var(--guru-success); }
.guru-price--lg { font-size: 1.5rem; }

/* ===== GRID HELPERS ===== */
.guru-cols-1 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.guru-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.guru-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.guru-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 768px) {
    .guru-cols-2, .guru-cols-3, .guru-cols-4 { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .guru-cols-3, .guru-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== COURSE CARD ===== */
.guru-course-card {
    background: var(--guru-bg); border: 1px solid var(--guru-border); border-radius: var(--guru-radius);
    overflow: hidden; transition: box-shadow .2s;
}
.guru-course-card:hover { box-shadow: var(--guru-shadow); }
.guru-course-card__thumb { display: block; aspect-ratio: 16/9; overflow: hidden; }
.guru-course-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.guru-course-card__body { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.guru-course-card__cats { display: flex; flex-wrap: wrap; gap: .25rem; }
.guru-course-card__title { font-size: 1rem; font-weight: 600; line-height: 1.3; margin: 0; }
.guru-course-card__title a { color: var(--guru-text); text-decoration: none; }
.guru-course-card__title a:hover { color: var(--guru-primary); }
.guru-course-card__author { font-size: .8125rem; color: var(--guru-text-light); margin: 0; }
.guru-course-card__meta { font-size: .8125rem; color: var(--guru-text-light); }
.guru-course-card__footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: .75rem; border-top: 1px solid var(--guru-border); margin-top: auto;
}

/* ===== COURSE HERO ===== */
.guru-course-hero { display: flex; gap: 2rem; margin-bottom: 2rem; }
.guru-course-hero__image { flex: 0 0 50%; border-radius: var(--guru-radius); overflow: hidden; }
.guru-course-hero__image img { width: 100%; height: auto; display: block; }
.guru-course-hero__info { flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.guru-course-hero__title { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin: 0; }
.guru-course-hero__author { font-size: .9375rem; color: var(--guru-text-light); margin: 0; }
.guru-course-hero__stats { display: flex; gap: 1.5rem; font-size: .875rem; color: var(--guru-text-light); }
.guru-course-hero__enrolled { display: flex; flex-direction: column; gap: .5rem; }
.guru-course-hero__price { display: flex; align-items: center; gap: 1rem; }
@media (max-width: 768px) {
    .guru-course-hero { flex-direction: column; }
    .guru-course-hero__image { flex: none; }
}

/* ===== PROGRESS BAR ===== */
.guru-progress-bar {
    width: 100%; height: 1.25rem; background: var(--guru-bg-alt); border-radius: var(--guru-radius);
    overflow: hidden; border: 1px solid var(--guru-border);
}
.guru-progress-bar__fill {
    height: 100%; background: var(--guru-primary); color: #fff;
    font-size: .6875rem; font-weight: 700; line-height: 1.25rem; text-align: center;
    border-radius: var(--guru-radius); transition: width .4s ease;
    min-width: 2rem;
}

/* ===== ACCORDION / CURRICULUM ===== */
.guru-accordion { display: flex; flex-direction: column; gap: 0; }
.guru-accordion__item { border: 1px solid var(--guru-border); border-radius: var(--guru-radius); margin-bottom: .5rem; }
.guru-accordion__header {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: .875rem 1rem; background: var(--guru-bg-alt); border: 0; cursor: pointer;
    font-size: .9375rem; font-weight: 600; text-align: left; color: var(--guru-text);
    border-radius: var(--guru-radius);
}
.guru-accordion__header small { font-weight: 400; color: var(--guru-text-light); margin-left: .5em; }
.guru-accordion__icon { font-size: 1.25rem; transition: transform .2s; }
.guru-accordion__item--open .guru-accordion__icon { transform: rotate(45deg); }
.guru-accordion__body { display: none; padding: 0 1rem 1rem; }
.guru-accordion__item--open .guru-accordion__body { display: block; }

/* ===== LESSON LIST ===== */
.guru-lesson-list { list-style: none; padding: 0; margin: 0; }
.guru-lesson-list__item {
    display: flex; align-items: center; gap: .75rem; padding: .5rem 0;
    border-bottom: 1px solid var(--guru-border); font-size: .875rem;
}
.guru-lesson-list__item:last-child { border-bottom: 0; }
.guru-lesson-list__item--done { color: var(--guru-success); }
.guru-lesson-list__icon { flex-shrink: 0; width: 1.25rem; text-align: center; }
.guru-lesson-list__link { color: var(--guru-primary); text-decoration: none; }
.guru-lesson-list__link:hover { text-decoration: underline; }
.guru-lesson-list__title--locked { color: var(--guru-text-light); }

/* ===== LESSON SINGLE ===== */
.guru-lesson { max-width: 52rem; margin: 0 auto; }
.guru-breadcrumb {
    font-size: .8125rem; color: var(--guru-text-light); margin-bottom: 1rem;
}
.guru-breadcrumb a { color: var(--guru-primary); text-decoration: none; }
.guru-breadcrumb a:hover { text-decoration: underline; }
.guru-lesson__title { font-size: 1.5rem; font-weight: 700; margin: 0 0 1.25rem; }
.guru-lesson__media { margin-bottom: 1.5rem; border-radius: var(--guru-radius); overflow: hidden; }
.guru-lesson__media iframe,
.guru-lesson__media video { width: 100%; aspect-ratio: 16/9; border: 0; }
.guru-lesson__content { line-height: 1.7; margin-bottom: 2rem; }
.guru-lesson__attachments { margin-bottom: 2rem; }
.guru-lesson__attachments h3 { font-size: 1rem; margin-bottom: .5rem; }
.guru-lesson__attachments ul { list-style: none; padding: 0; }
.guru-lesson__attachments li { padding: .25rem 0; }
.guru-lesson__attachments a { color: var(--guru-primary); text-decoration: none; }
.guru-lesson__attachments a:hover { text-decoration: underline; }
.guru-lesson__footer {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--guru-border);
}
.guru-lesson__nav { display: flex; gap: .75rem; }

/* ===== LESSON LOCKED ===== */
.guru-lesson-locked {
    text-align: center; padding: 3rem 1.5rem; border: 2px dashed var(--guru-border);
    border-radius: var(--guru-radius); max-width: 32rem; margin: 2rem auto;
}
.guru-lesson-locked__icon { font-size: 3rem; margin-bottom: .5rem; }

/* ===== QUIZ ===== */
.guru-quiz {
    background: var(--guru-bg-alt); padding: 1.5rem; border-radius: var(--guru-radius);
    margin-bottom: 2rem; border: 1px solid var(--guru-border);
}
.guru-quiz__title { font-size: 1.125rem; margin: 0 0 .5rem; }
.guru-quiz__meta { font-size: .8125rem; color: var(--guru-text-light); margin: 0 0 1.25rem; }
.guru-quiz__question {
    border: 0; padding: 0; margin: 0 0 1.25rem;
}
.guru-quiz__question legend {
    font-weight: 600; margin-bottom: .5rem; font-size: .9375rem;
}
.guru-quiz__q-num { color: var(--guru-primary); font-weight: 700; margin-right: .25em; }
.guru-quiz__option {
    display: flex; align-items: center; gap: .5rem; padding: .375rem 0;
    cursor: pointer; font-size: .875rem;
}
.guru-quiz__text-input {
    width: 100%; max-width: 24rem; padding: .5rem .75rem; border: 1px solid var(--guru-border);
    border-radius: var(--guru-radius); font-size: .875rem;
}
.guru-quiz__results {
    padding: 1rem; border-radius: var(--guru-radius); margin-top: 1rem;
}
.guru-quiz__results--pass { background: #dcfce7; color: #166534; }
.guru-quiz__results--fail { background: #fee2e2; color: #991b1b; }

/* ===== DASHBOARD ===== */
.guru-dashboard { max-width: 64rem; margin: 0 auto; }
.guru-dashboard h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 1.5rem; }
.guru-dashboard__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 768px) { .guru-dashboard__grid { grid-template-columns: 1fr; } }
.guru-dashboard__card {
    background: var(--guru-bg); border: 1px solid var(--guru-border); border-radius: var(--guru-radius);
    overflow: hidden;
}
.guru-dashboard__thumb { display: block; aspect-ratio: 16/9; overflow: hidden; }
.guru-dashboard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.guru-dashboard__card-body { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.guru-dashboard__card-body h3 { font-size: .9375rem; font-weight: 600; margin: 0; }
.guru-dashboard__card-body h3 a { color: var(--guru-text); text-decoration: none; }
.guru-dashboard__card-body h3 a:hover { color: var(--guru-primary); }
.guru-dashboard__enrolled-date { font-size: .8125rem; color: var(--guru-text-light); margin: 0; }

/* ===== CHECKOUT ===== */
.guru-checkout { max-width: 52rem; margin: 0 auto; }
.guru-checkout h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 1.5rem; }
.guru-checkout__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 768px) { .guru-checkout__layout { grid-template-columns: 1fr; } }
.guru-checkout__summary, .guru-checkout__payment {
    background: var(--guru-bg); border: 1px solid var(--guru-border); border-radius: var(--guru-radius);
    padding: 1.5rem;
}
.guru-checkout__summary h3, .guru-checkout__payment h3 {
    font-size: 1rem; font-weight: 600; margin: 0 0 1rem;
}
.guru-checkout__course { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.guru-checkout__thumb { width: 6rem; height: 4rem; border-radius: var(--guru-radius); object-fit: cover; }
.guru-checkout__price { font-size: 1.25rem; font-weight: 700; margin: .25rem 0 0; }
.guru-checkout__promo { margin-top: 1rem; }
.guru-checkout__promo label { font-size: .8125rem; font-weight: 600; margin-bottom: .375rem; display: block; }
.guru-checkout__promo-input { display: flex; gap: .5rem; }
.guru-checkout__promo-input input {
    flex: 1; padding: .5rem .75rem; border: 1px solid var(--guru-border);
    border-radius: var(--guru-radius); font-size: .875rem;
}
.guru-checkout__promo-msg { font-size: .8125rem; margin: .375rem 0 0; }
.guru-checkout__gateway {
    display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem;
    border: 1px solid var(--guru-border); border-radius: var(--guru-radius);
    margin-bottom: .5rem; cursor: pointer; transition: border-color .2s;
}
.guru-checkout__gateway:has(input:checked) { border-color: var(--guru-primary); }
.guru-checkout__submit { width: 100%; margin-top: 1rem; }

/* ===== TABLE ===== */
.guru-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.guru-table th {
    text-align: left; padding: .75rem; border-bottom: 2px solid var(--guru-border);
    font-weight: 600; color: var(--guru-text);
}
.guru-table td { padding: .75rem; border-bottom: 1px solid var(--guru-border); }
.guru-table td a { color: var(--guru-primary); text-decoration: none; }
.guru-table td a:hover { text-decoration: underline; }

/* ===== PAGINATION ===== */
.guru-pagination {
    display: flex; justify-content: center; gap: .25rem; margin-top: 2rem;
}
.guru-pagination a, .guru-pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2rem; height: 2rem; padding: 0 .625rem;
    border: 1px solid var(--guru-border); border-radius: var(--guru-radius);
    font-size: .8125rem; text-decoration: none; color: var(--guru-text);
}
.guru-pagination a:hover { border-color: var(--guru-primary); color: var(--guru-primary); }
.guru-pagination .current { background: var(--guru-primary); border-color: var(--guru-primary); color: #fff; }

/* ===== AUTHOR CARD ===== */
.guru-author-card {
    text-align: center; padding: 1.5rem; background: var(--guru-bg);
    border: 1px solid var(--guru-border); border-radius: var(--guru-radius);
}
.guru-author-card__avatar {
    width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; margin-bottom: .75rem;
}
.guru-author-card__name { font-size: 1rem; font-weight: 600; margin: 0 0 .25rem; }
.guru-author-card__name a { color: var(--guru-text); text-decoration: none; }
.guru-author-card__name a:hover { color: var(--guru-primary); }
.guru-author-card__bio { font-size: .8125rem; color: var(--guru-text-light); margin: 0 0 .5rem; }
.guru-author-card__count { font-size: .75rem; color: var(--guru-text-light); }

/* ===== AUTHOR PROFILE ===== */
.guru-author-profile__header { display: flex; gap: 1.5rem; margin-bottom: 2rem; }
.guru-author-profile__avatar {
    width: 8rem; height: 8rem; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.guru-author-profile__bio { font-size: .9375rem; line-height: 1.6; }

/* ===== CATEGORY CARD ===== */
.guru-category-card {
    display: block; text-decoration: none; padding: 1.5rem; background: var(--guru-bg);
    border: 1px solid var(--guru-border); border-radius: var(--guru-radius);
    text-align: center; transition: box-shadow .2s; color: var(--guru-text);
}
.guru-category-card:hover { box-shadow: var(--guru-shadow); }
.guru-category-card__name { font-size: 1rem; font-weight: 600; margin: 0 0 .25rem; }
.guru-category-card__desc { font-size: .8125rem; color: var(--guru-text-light); margin: 0 0 .5rem; }
.guru-category-card__count { font-size: .75rem; color: var(--guru-text-light); }

/* ===== CERTIFICATE CARD ===== */
.guru-cert-card {
    text-align: center; padding: 1.5rem; background: var(--guru-bg);
    border: 1px solid var(--guru-border); border-radius: var(--guru-radius);
}
.guru-cert-card__icon { font-size: 2.5rem; margin-bottom: .5rem; }
.guru-cert-card__title { font-size: 1rem; font-weight: 600; margin: 0 0 .25rem; }
.guru-cert-card__date { font-size: .8125rem; color: var(--guru-text-light); margin: 0 0 .75rem; }

/* ===== NO RESULTS ===== */
.guru-no-results {
    text-align: center; padding: 2rem 1rem; color: var(--guru-text-light); font-size: .9375rem;
}
.guru-no-results a { color: var(--guru-primary); text-decoration: none; }
.guru-no-results a:hover { text-decoration: underline; }