.afcm-courses, .afcm-course-view { width: 100%; }
.afcm-title { margin: 0 0 20px; }
.afcm-course-list { gap: .75rem; }
.asp-download-row.afcm-course-row { display: flex; justify-content: space-between; align-items: center; }
.afcm-course-view-action { flex: 0 0 auto; }
.afcm-back-link { display: block; color: #0871c9; font-size: .9em; text-align: left; }
.afcm-course-description { margin-bottom: 20px; }
.afcm-sections-list { display: grid; gap: 12px; }
.afcm-section-item { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; }
.afcm-section-item summary { cursor: pointer; padding: 14px 16px; font-weight: 700; background: #f8fafc; color: #1e293b; border-radius: 12px; }
.afcm-lessons-list { border-top: 1px solid #e2e8f0; }
.afcm-lesson-item { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 13px 16px; border-bottom: 1px solid #f1f5f9; }
.afcm-lesson-item:last-child { border-bottom: 0; }
.afcm-lesson-item-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.afcm-download { min-width: 104px; }
.afcm-unavailable { color: #94a3b8; font-size: .9em; display: inline-flex; align-items: center; gap: 6px; }
.asp-order-back{flex:0 0 36px!important;width:36px!important;height:36px!important;color:#64748b!important;border:1px solid #dce8f2!important;background:#fff!important;font-size:0.85rem!important;transition:color 0.2s ease,border-color 0.2s ease,background-color 0.2s ease,transform 0.2s ease!important}
.asp-order-back:hover{color:#fff!important;border-color:#0871c9!important;background:#0871c9!important;transform:translateX(2px)!important}

/* Embed lessons */
.afcm-embed-wrap { max-width: 320px; }
.afcm-embed-wrap iframe { max-width: 100%; border-radius: 8px; }

@media (max-width: 575.98px) {
  .afcm-lesson-item { align-items: stretch; flex-direction: column; gap: 8px; padding: 10px 14px; }
  .asp-download-row.afcm-course-row { align-items: stretch; flex-direction: column; gap: 10px; padding: 12px 14px; }
  .afcm-course-view-action { width: 100%; min-height: 40px; justify-content: center; }
  .afcm-download { width: 100%; min-height: 38px; justify-content: center; }
  .afcm-course-view .asp-dashboard-card > header { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; }
  .afcm-section-item summary { padding: 12px 14px; font-size: 0.92rem; }
}

/*
 * Fallback styling for the .asp-* classes this plugin's templates use
 * (asp-dashboard-card, asp-download-row, etc.) but doesn't own — they
 * normally come from the active theme's WooCommerce My Account redesign.
 * Everything below is scoped under .afcm-courses / .afcm-course-view (this
 * plugin's own root wrapper) so it can only ever affect this plugin's own
 * markup, never other My Account tabs (Orders, Downloads, Addresses, ...)
 * even though frontend.css loads on every account subpage. If the theme
 * already styles these classes, its own rules simply apply on top /
 * alongside these — this is a baseline, not an override.
 */
.afcm-courses .asp-dashboard-card,
.afcm-course-view .asp-dashboard-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.afcm-courses .asp-dashboard-heading-icon,
.afcm-course-view .asp-dashboard-heading-icon {
  width: 44px;
  height: 44px;
  background: #eaf5ff;
  color: #0871c9;
  font-size: 1.1rem;
}
.afcm-courses .asp-dashboard-heading-copy,
.afcm-course-view .asp-dashboard-heading-copy {
  font-size: .85rem;
}
.afcm-courses .asp-download-row {
  border: 1px solid #eef2f6;
  border-radius: 14px;
  padding: 14px 18px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.afcm-courses .asp-download-row:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .05);
}
.afcm-courses .asp-download-product {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.afcm-courses .asp-download-product-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #eaf5ff;
  color: #0871c9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.afcm-courses .asp-download-product-name {
  font-size: .95rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 2px;
}
.afcm-courses .asp-download-file-name {
  font-size: .8rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.afcm-courses .asp-download-action,
.afcm-course-view .asp-download-action,
.afcm-download {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  min-width: 104px !important;
  padding: 0.6rem 0.85rem !important;
  color: #fff !important;
  border-radius: 10px !important;
  background: #16804a !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
}
.afcm-courses .asp-download-action:hover,
.afcm-course-view .asp-download-action:hover,
.afcm-download:hover {
  color: #fff !important;
  background: #126b3e !important;
  transform: translateY(-1px) !important;
}
.afcm-courses .asp-dashboard-empty {
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
}
.afcm-courses .asp-dashboard-empty-icon {
  width: 56px;
  height: 56px;
  background: #eaf5ff;
  color: #0871c9;
  font-size: 1.4rem;
}