/* E-Vision Course Cards for Tutor LMS — v2.0 */
:root{--evcc-accent:#2f5bea;--evcc-radius:20px}

body.evcc-on{
  --evcc-accent-2:color-mix(in srgb,var(--evcc-accent) 70%,#7c3aed);
  --evcc-tint:color-mix(in srgb,var(--evcc-accent) 9%,#fff);
  --evcc-ink:#12172b;
  --evcc-muted:#667085;
  --evcc-line:#e8ebf4;
}

/* ===== Card shell ===== */
body.evcc-on .tutor-course-card{
  display:flex;flex-direction:column;height:100%;
  background:#fff;
  border:1px solid var(--evcc-line);
  border-radius:var(--evcc-radius);
  overflow:hidden;
  box-shadow:0 1px 1px rgba(18,23,43,.04),0 10px 30px -14px rgba(18,23,43,.22);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s;
}
body.evcc-on.evcc-lift .tutor-course-card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--evcc-accent) 40%,#fff);
  box-shadow:0 2px 2px rgba(18,23,43,.04),0 26px 44px -18px color-mix(in srgb,var(--evcc-accent) 50%,transparent);
}

/* ===== Thumbnail: inset, rounded ===== */
body.evcc-on .tutor-course-card .tutor-course-thumbnail{
  position:relative;overflow:hidden;margin:10px 10px 0;
  border-radius:calc(var(--evcc-radius) - 6px);
}
body.evcc-on .tutor-course-card .tutor-course-thumbnail a{display:block}
body.evcc-on .tutor-course-card .tutor-course-thumbnail img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:0;
  transition:transform .6s ease;
}
body.evcc-on .tutor-course-card:hover .tutor-course-thumbnail img{transform:scale(1.05)}
body.evcc-on .tutor-course-card .tutor-course-bookmark{top:10px;right:10px}
body.evcc-on .tutor-course-card .tutor-course-bookmark a,
body.evcc-on .tutor-course-card .tutor-course-bookmark .save-bookmark-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,.2);color:var(--evcc-accent)!important;
}

/* ===== Body ===== */
body.evcc-on .tutor-course-card .tutor-card-body{
  display:flex;flex-direction:column;flex:1 1 auto;gap:10px;padding:16px 20px 14px;
}

/* ratings (only visible when course has reviews) */
body.evcc-on .tutor-course-card .tutor-ratings{display:flex;align-items:center;gap:8px;margin:0}
body.evcc-on .tutor-course-card .tutor-ratings{min-height:20px}
body.evcc-on .tutor-course-card .tutor-ratings [class*="icon-star"]{color:#f5a623!important;font-size:15px;display:inline-block!important;opacity:1!important}
body.evcc-on .tutor-course-card .tutor-ratings .tutor-icon-star-line{color:#f3c36b!important}
body.evcc-on .tutor-course-card .tutor-ratings-average{font-weight:700;color:var(--evcc-ink)}
body.evcc-on .tutor-course-card .tutor-ratings-count{color:var(--evcc-muted)}

/* title */
body.evcc-on .tutor-course-card .tutor-course-name{
  margin:0;font-size:19px;line-height:1.38;font-weight:700;letter-spacing:-.015em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.76em;
}
body.evcc-on .tutor-course-card .tutor-course-name a{color:var(--evcc-ink)!important;text-decoration:none!important;transition:color .2s}
body.evcc-on .tutor-course-card .tutor-course-name a:hover{color:var(--evcc-accent)!important}

/* meta chips: duration, lessons, level … */
body.evcc-on .tutor-course-card .tutor-meta:not(:has(.tutor-avatar)){
  display:flex;flex-wrap:wrap;gap:8px;margin:0;font-size:12.5px;
}
body.evcc-on .tutor-course-card .tutor-meta:not(:has(.tutor-avatar)) > *{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  background:var(--evcc-tint);color:var(--evcc-ink);font-weight:600;
}
body.evcc-on .tutor-course-card .tutor-meta [class*="tutor-icon"]{color:var(--evcc-accent)!important;font-size:14px}

/* ===== Author row: avatar left, text right ===== */
body.evcc-on .tutor-course-card :is(.tutor-meta,.tutor-course-author,div):has(> .tutor-avatar){
  display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
  align-items:center!important;gap:12px!important;margin-top:auto;padding-top:12px;
  border-top:1px dashed var(--evcc-line);
}
body.evcc-on .tutor-course-card .tutor-avatar{
  flex:0 0 42px;width:42px;height:42px;margin:0!important;
  border:2px solid #fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--evcc-accent) 35%,#fff);
}
body.evcc-on .tutor-course-card .tutor-avatar + *{
  flex:1 1 auto;min-width:0;font-size:13px;line-height:1.5;color:var(--evcc-muted)!important;
}
body.evcc-on .tutor-course-card .tutor-avatar + * a{color:var(--evcc-ink)!important;font-weight:700;text-decoration:none!important}
body.evcc-on .tutor-course-card .tutor-avatar + * a ~ a{color:var(--evcc-accent)!important;font-weight:600}
body.evcc-on .tutor-course-card .tutor-avatar + * a:hover{color:var(--evcc-accent)!important}

/* ===== Footer: price + button ===== */
body.evcc-on .tutor-course-card .tutor-card-footer{
  margin-top:auto;padding:4px 20px 20px;border:0;background:transparent;
}
body.evcc-on .tutor-course-card .tutor-card-footer :is(.price,.tutor-course-price,.list-item-price){
  font-size:20px;font-weight:800;color:var(--evcc-ink)!important;letter-spacing:-.01em;
}
body.evcc-on .tutor-course-card .tutor-card-footer .price del{color:var(--evcc-muted);font-weight:400;font-size:14px;margin-right:6px}
body.evcc-on .tutor-course-card .tutor-card-footer .price ins{text-decoration:none}

body.evcc-on .tutor-course-card .tutor-card-footer :is(.tutor-btn,a.button,button){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:14px;border:0;
  background:linear-gradient(135deg,var(--evcc-accent),var(--evcc-accent-2))!important;
  color:#fff!important;font-weight:700;font-size:14.5px;line-height:1.2;text-decoration:none;
  box-shadow:0 10px 22px -10px var(--evcc-accent);
  transition:transform .2s,box-shadow .2s,filter .2s;
}
body.evcc-on .tutor-course-card .tutor-card-footer :is(.tutor-btn,a.button,button) *{color:#fff!important}
body.evcc-on .tutor-course-card .tutor-card-footer :is(.tutor-btn,a.button,button):hover{
  transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 14px 26px -10px var(--evcc-accent);
}

body.evcc-on.evcc-btn-full .tutor-course-card .tutor-card-footer,
body.evcc-on.evcc-btn-full .tutor-course-card .tutor-card-footer > div,
body.evcc-on.evcc-btn-full .tutor-course-card .tutor-card-footer form{
  display:flex;flex-wrap:wrap;flex-direction:row;gap:12px;align-items:center;width:100%;
}
body.evcc-on.evcc-btn-full .tutor-course-card .tutor-card-footer :is(.price,.tutor-course-price,.list-item-price){flex:1 1 100%}
body.evcc-on.evcc-btn-full .tutor-course-card .tutor-card-footer :is(.tutor-btn,a.button,button){flex:1 1 100%;width:100%!important}

/* ===== Equal heights ===== */
body.evcc-on :has(> .tutor-course-card) > .tutor-course-card{height:100%}

/* ===== Hide empty stars / 0 students (JS adds classes) ===== */
body.evcc-on.evcc-hide-empty .evcc-no-rating{display:none!important}
body.evcc-on.evcc-hide-students .evcc-zero-students{display:none!important}

/* ===== Filter sidebar ===== */
body.evcc-on [class*="tutor-course-filter"] :is(input[type="search"],input[type="text"]){
  border:1px solid var(--evcc-line);border-radius:12px;padding:10px 14px;background:#fff;box-shadow:none;
}
body.evcc-on [class*="tutor-course-filter"] :is(input[type="search"],input[type="text"]):focus{
  border-color:var(--evcc-accent);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--evcc-accent) 18%,transparent);
}
body.evcc-on [class*="tutor-course-filter"] input[type="checkbox"]:checked{background-color:var(--evcc-accent);border-color:var(--evcc-accent)}
body.evcc-on [class*="tutor-course-filter"] :is(.tutor-btn-outline-primary,.tutor-btn-ghost){
  color:var(--evcc-accent);border-color:var(--evcc-accent);border-radius:999px;
}

@media (max-width:600px){
  body.evcc-on .tutor-course-card .tutor-course-name{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  body.evcc-on .tutor-course-card,
  body.evcc-on .tutor-course-card .tutor-course-thumbnail img{transition:none}
  body.evcc-on.evcc-lift .tutor-course-card:hover{transform:none}
}