/* =========================================================
   LARAVEL ADDITIONS  —  styles the static design did not need but the live site does
   (logged-in user menu, search suggestions, toaster messages, cookie notice ...).
   Loaded after common.css by layouts/frontend.blade.php. Uses the tokens from common.css.
   ========================================================= */

/* ---------- Top bar dropdowns ---------- */
/* the top bar sits above the sticky navbar (z-index 1020), so its language / currency menus open over it */
.common_topbar{position:relative;z-index:1030}
.common_topbar .dropdown-menu{font-size:12px;min-width:120px;margin-top:4px!important;box-shadow:0 10px 30px rgba(4,21,44,.12);border-color:#e3e8f0}
.common_topbar .dropdown-item.active,.common_topbar .dropdown-item:active{background:var(--light-blue);color:var(--primary)}
.common_currency_menu{max-height:280px;overflow-y:auto}

/* ---------- Navbar dropdown ---------- */
.common_main_nav .dropdown-menu{font-size:13px}
.common_main_nav .dropdown-item:active{background:var(--primary)}
.common_courses_menu_label{list-style:none}

/* phone / tablet: the Courses menu opens inside the menu as a panel (2-column category chips) */
@media (max-width:991px){
  /* long menu scrolls inside the screen instead of running under the bottom */
  .common_main_nav .navbar-collapse.show,.common_main_nav .navbar-collapse.collapsing{max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain}
  .common_main_nav .nav-item.dropdown>.nav-link{display:flex;align-items:center;justify-content:space-between}
  .common_main_nav .nav-item.dropdown>.nav-link .bi-chevron-down{font-size:12px;transition:transform .25s}
  .common_main_nav .nav-item.dropdown>.nav-link.show{color:var(--primary)}
  .common_main_nav .nav-item.dropdown>.nav-link.show .bi-chevron-down{transform:rotate(180deg)}

  .common_courses_menu.dropdown-menu{position:static!important;transform:none!important;inset:auto!important;float:none;width:100%;
    margin:4px 0 10px!important;padding:12px;border:0;border-radius:12px;background:#F3F7FD;box-shadow:none}
  .common_courses_menu.dropdown-menu.show{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;animation:common_courses_in .2s ease}
  .common_courses_menu .common_courses_menu_wide,.common_courses_menu .common_courses_menu_label{grid-column:1/-1}
  .common_courses_menu .common_courses_menu_wide:has(hr){display:none}
  .common_courses_menu_label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6b7a90;padding:6px 2px 0}
  .common_courses_menu .dropdown-item{display:flex;align-items:center;gap:8px;min-height:42px;padding:9px 12px;font-size:13px;color:var(--dark);
    background:#fff;border:1px solid #E1E8F3;border-radius:8px;white-space:normal;line-height:1.3;transition:border-color .2s,color .2s,background .2s}
  .common_courses_menu .dropdown-item:hover,.common_courses_menu .dropdown-item:focus{background:#fff;border-color:var(--primary);color:var(--primary)}
  .common_courses_menu .dropdown-item:active{background:var(--light-blue);color:var(--primary)}
  .common_courses_menu .common_courses_menu_wide .dropdown-item{font-weight:500;background:var(--primary);border-color:var(--primary);color:#fff}
  .common_courses_menu .common_courses_menu_wide .dropdown-item:hover{background:var(--primary-dark);color:#fff}
  .common_courses_menu .common_courses_menu_wide .common_courses_menu_all{background:#fff;color:var(--primary);border-color:#BCD3F2}
  .common_courses_menu .common_courses_menu_wide .common_courses_menu_all:hover{background:var(--light-blue);color:var(--primary)}
}
@media (max-width:359px){.common_courses_menu.dropdown-menu.show{grid-template-columns:1fr}}
@keyframes common_courses_in{from{opacity:0}to{opacity:1}}

/* ---------- Logged-in user menu ---------- */
.common_user_btn{display:flex;align-items:center;gap:6px;color:var(--dark);font-size:var(--fs-btn);font-weight:500;white-space:nowrap}
.common_user_btn:hover{color:var(--primary)}
.common_user_btn img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid #d6dbe4}
.common_user_btn span{max-width:90px;overflow:hidden;text-overflow:ellipsis}
.common_user_menu{min-width:210px;font-size:13px;padding:6px 0}
.common_user_menu .common_user_head{padding:8px 16px 10px;border-bottom:1px solid #eef1f6;margin-bottom:4px;display:flex;flex-direction:column}
.common_user_menu .common_user_head strong{font-size:13px;color:var(--dark)}
.common_user_menu .common_user_head small{font-size:11px;color:var(--text)}
.common_user_menu .dropdown-item{display:flex;align-items:center;gap:8px;padding:7px 16px}
.common_user_menu .dropdown-item:active{background:var(--light-blue);color:var(--primary)}
.common_icon_link_heart .bi-heart-fill{color:#e0204c;font-size:20px}

/* ---------- Search suggestions (built by common.js under the navbar search box) ---------- */
.common_suggest{position:absolute;z-index:1060;background:#fff;border:1px solid #e3e8f0;border-radius:12px;box-shadow:0 14px 40px rgba(4,21,44,.12);overflow:hidden;max-height:380px;overflow-y:auto}
.common_suggest[hidden]{display:none}
.common_suggest a{display:flex;align-items:center;gap:10px;padding:9px 14px;color:var(--dark);font-size:13px;border-bottom:1px solid #f2f4f8}
.common_suggest a:hover,.common_suggest a.common_suggest_active{background:var(--light-blue)}
.common_suggest img{width:46px;height:30px;object-fit:cover;border-radius:4px;flex-shrink:0;background:#eef1f6}
.common_suggest span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.common_suggest .common_suggest_all{justify-content:space-between;color:var(--primary);font-weight:600;border-bottom:0}
.common_suggest .common_suggest_empty{padding:14px;font-size:13px;color:var(--text);text-align:center}

/* ---------- Home: featured course cards with real course pictures and titles ---------- */
.home_page_course_card .home_page_thumb img{aspect-ratio:552/306;object-fit:contain}
.home_page_course_card h4 a{color:inherit;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home_page_course_card h4 a:hover{color:var(--primary)}
.home_page_cat_card img{object-fit:cover}
.home_page_cat_card .home_page_cat_initials{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--light-blue);color:var(--primary);font-size:15px;font-weight:600;letter-spacing:.5px;border:1.5px solid #cfe2fb}

/* ---------- Courses: server-side pagination links styled like the design's pager buttons ---------- */
.pager a,.pager span{width:35px;height:35px;border:1px solid #e3e8ef;background:#fff;border-radius:4px;font-size:15px;color:#222;display:grid;place-items:center}
.pager a.active{background:var(--primary);border-color:var(--primary);color:#fff}
.pager a:not(.active):hover{border-color:var(--primary);color:var(--primary)}
.pager span.disabled{opacity:.4}
.pager .pager_gap{border:0;background:none;width:auto;padding:0 4px}
.c-card .thumb img{aspect-ratio:552/306;object-fit:contain}
.c-card h3 a:hover{color:var(--primary)}
.chip{white-space:nowrap}

/* ---------- Course detail: real course picture on the cards, discount price, editor text ---------- */
.course_detail_page_thumb_img{background:#eef3fa;isolation:isolate}
.course_detail_page_thumb_img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.course_detail_page_thumb_img::before{content:"";position:absolute;inset:-16px;background:var(--lms-img) center/cover no-repeat;filter:blur(16px) saturate(1.15);opacity:.6;z-index:-1}
.course_detail_page_thumb span{max-width:88%;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:6.5cqw}
.course_detail_page_old_price{font-size:.55em;color:#8a94a6;font-weight:400;margin-left:6px}
.course_detail_page_rich p:last-child,.course_detail_page_rich ul:last-child,.course_detail_page_rich ol:last-child{margin-bottom:0}
.course_detail_page_rich *{font-family:'Poppins',sans-serif!important;font-size:inherit!important;color:inherit!important;background:transparent!important}
.course_detail_page_rich img{max-width:100%;height:auto}
a.course_detail_page_btn{display:flex;align-items:center;justify-content:center;gap:6px}

/* ---------- Toaster messages (frontend/default/toaster.blade.php) ---------- */
.toast-container{z-index:2000}
.toast-container .toast{font-family:'Poppins',sans-serif;font-size:13px;border:0;border-left:4px solid var(--primary);box-shadow:0 10px 30px rgba(4,21,44,.15)}
.toast-container .toast .toast-header{font-size:13px}
.toast-container .toast.success{border-left-color:var(--green)}
.toast-container .toast.success .toast-header i{color:var(--green)}
.toast-container .toast.warning{border-left-color:#F59E0B}
.toast-container .toast.warning .toast-header i{color:#F59E0B}
.toast-container .toast.error{border-left-color:#E5252A}
.toast-container .toast.error .toast-header i{color:#E5252A}
.toast-container .toast-body ul{margin:0;padding-left:18px}

/* ---------- Cookie notice (frontend/default/cookie.blade.php) ---------- */
/* bottom-left on wide screens, so it does not cover the floating chat / WhatsApp buttons */
.cookieConsentContainer{z-index:1100!important;font-family:'Poppins',sans-serif;right:auto!important;left:20px}
.cookieConsentContainer .cookieButton a{display:inline-block;background:var(--primary);color:#fff;padding:7px 20px;border-radius:6px;font-size:13px;font-weight:500}
.cookieConsentContainer .cookieButton a:hover{background:var(--primary-dark)}

/* ---------- Sign in / create account: reCAPTCHA box when it is on in the admin ---------- */
.sign_in_page_captcha,.create_account_page_captcha_box{margin:4px 0 14px;display:flex;justify-content:center}
a.sign_in_page_btn{display:flex;align-items:center;justify-content:center;gap:8px}

/* ---------- Create account: email + Send OTP, OTP note, instructor fields ---------- */
.create_account_page_email_row{display:flex;gap:8px}
.create_account_page_email_row .create_account_page_input{flex:1;min-width:0}
.create_account_page_otp_btn{height:34px;flex-shrink:0;padding:0 14px;border:1px solid var(--primary);color:var(--primary);background:#fff;border-radius:5px;font-size:var(--fs-small);font-weight:500;white-space:nowrap}
.create_account_page_otp_btn:hover:not(:disabled){background:var(--primary);color:#fff}
.create_account_page_otp_btn:disabled{opacity:.6}
.create_account_page_note{display:none;font-size:8.5px;margin:4px 0 0 4px;line-height:1.35;color:var(--primary)}
.create_account_page_note.create_account_page_show{display:block}
.create_account_page_note.create_account_page_note_ok{color:#22A650}
.create_account_page_textarea{height:auto;padding:8px 12px}
.create_account_page_textarea textarea{flex:1;border:0;outline:0;resize:vertical;font-size:var(--fs-small);color:var(--dark);background:transparent;min-height:54px}
.create_account_page_input input[type=file]{font-size:var(--fs-small)}
.create_account_page_field small{font-weight:400;color:#6b7280}
a.create_account_page_btn{color:inherit}
@media (max-width:767px){
  .create_account_page_otp_btn{height:42px;font-size:13px}
  .create_account_page_note{font-size:11px}
  .create_account_page_textarea textarea{font-size:14px}
}

/* ---------- Certificate: link to the certificate under a verified result ---------- */
.certificate_page_found .certificate_page_view{display:flex;width:fit-content;align-items:center;gap:5px;margin-top:6px;font-size:var(--fs-small);font-weight:500;color:var(--primary)}
.certificate_page_found + .certificate_page_found{margin-top:10px}

/* ---------- Vouchers: category picture uploaded in the admin ---------- */
.voucher_page_logo_img{max-height:96px;max-width:100%;width:auto;object-fit:contain;border-radius:6px}
.voucher_page_logo_text{font-size:22px;font-weight:700;color:var(--navy);text-align:center}
.voucher_page_count{pointer-events:none}

/* "Coming Soon" card fills the empty columns of the last row, so the box has no blank space */
.voucher_page_soon_text h3 br{display:block}
@media (min-width:1100px){
  .voucher_page_soon_lg2{grid-column:span 2}
  .voucher_page_soon_lg3{grid-column:span 3}
  .voucher_page_soon_lg4{grid-column:1/-1}
  .voucher_page_soon_lg2,.voucher_page_soon_lg3,.voucher_page_soon_lg4{flex-direction:row;justify-content:center;text-align:left;gap:28px;padding:28px 36px}
  .voucher_page_soon_lg2 .voucher_page_soon_icon,.voucher_page_soon_lg3 .voucher_page_soon_icon,.voucher_page_soon_lg4 .voucher_page_soon_icon{margin:0;flex-shrink:0;width:96px;height:96px;font-size:44px}
  .voucher_page_soon_lg2 .voucher_page_soon_text,.voucher_page_soon_lg3 .voucher_page_soon_text,.voucher_page_soon_lg4 .voucher_page_soon_text{flex:1;max-width:440px}
  .voucher_page_soon_lg3 .voucher_page_soon_text h3 br,.voucher_page_soon_lg4 .voucher_page_soon_text h3 br{display:none}
  .voucher_page_soon_lg2 .voucher_page_soon_text p,.voucher_page_soon_lg3 .voucher_page_soon_text p,.voucher_page_soon_lg4 .voucher_page_soon_text p{margin:0}
  .voucher_page_soon_lg2 .voucher_page_notify,.voucher_page_soon_lg3 .voucher_page_notify,.voucher_page_soon_lg4 .voucher_page_notify{flex-shrink:0;width:auto;padding:0 28px}
}
@media (min-width:577px) and (max-width:1099px){
  .voucher_page_soon_md2{grid-column:1/-1;flex-direction:row;text-align:left;gap:22px;padding:24px 26px}
  .voucher_page_soon_md2 .voucher_page_soon_icon{margin:0;flex-shrink:0}
  .voucher_page_soon_md2 .voucher_page_soon_text{flex:1}
  .voucher_page_soon_md2 .voucher_page_soon_text p{margin:0}
  .voucher_page_soon_md2 .voucher_page_notify{flex-shrink:0;width:auto;padding:0 24px}
}
@media (min-width:577px) and (max-width:767px){
  .voucher_page_soon_md2{flex-wrap:wrap}
  .voucher_page_soon_md2 .voucher_page_notify{flex-basis:100%;max-width:none}
}

/* Notify Me modal (newsletter) */
.voucher_notify_modal .modal-dialog{max-width:440px}
.voucher_notify_modal .modal-content{position:relative;border:0;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(4,21,44,.25)}
.voucher_notify_modal_close{position:absolute;top:14px;right:14px;z-index:2;font-size:12px}
.voucher_notify_modal_body{padding:34px 30px 26px;text-align:center;background:#fff url(images/common_wave_hero.svg) center top/100% 140px no-repeat}
.voucher_notify_modal_body[hidden]{display:none}
.voucher_notify_modal_icon{width:72px;height:72px;border-radius:50%;background:var(--primary);color:#fff;display:inline-grid;place-items:center;font-size:30px;margin-bottom:16px;box-shadow:0 0 0 8px #DCEBFC}
.voucher_notify_modal_icon.is-done{background:#16A34A;box-shadow:0 0 0 8px #DCFCE7}
.voucher_notify_modal_body h3{font-size:20px;font-weight:600;color:var(--dark);margin:0 0 8px}
.voucher_notify_modal_body>p{font-size:13px;color:#6b7280;line-height:1.6;margin:0 0 20px}
.voucher_notify_modal_field{display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border:1px solid #CFD8E5;border-radius:10px;background:#fff;transition:border-color .2s,box-shadow .2s}
.voucher_notify_modal_field i{color:#8A97AB;font-size:16px}
.voucher_notify_modal_field input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:14px;color:var(--dark)}
.voucher_notify_modal_field:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(7,111,230,.12)}
.voucher_notify_modal_form.is-invalid .voucher_notify_modal_field{border-color:#DC2626}
.voucher_notify_modal_err{display:flex;align-items:center;gap:6px;font-size:12px;color:#DC2626;margin:8px 0 0;text-align:left}
.voucher_notify_modal_err[hidden]{display:none}
.voucher_notify_modal_btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:14px;border-radius:10px;font-size:14px;font-weight:500}
.voucher_notify_modal_btn.is-loading{opacity:.7;pointer-events:none}
.voucher_notify_modal_note{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:11.5px;color:#8A97AB}
.voucher_notify_modal_note i{color:#16A34A}

/* ---------- Text written in the admin editor (descriptions, exam objectives ...): page font and colours ---------- */
.lms_rich *{font-family:'Poppins',sans-serif!important;font-size:inherit!important;color:inherit!important;background:transparent!important;line-height:1.7!important}
.lms_rich p:last-child,.lms_rich ul:last-child,.lms_rich ol:last-child{margin-bottom:0}
.lms_rich h1,.lms_rich h2,.lms_rich h3,.lms_rich h4{font-weight:600!important;margin:12px 0 6px}
.lms_rich ul,.lms_rich ol{padding-left:20px}
.lms_rich img{max-width:100%;height:auto}
.lms_rich svg{display:none}

/* ---------- Voucher detail: real data in the design's tabs ---------- */
.voucher_detail_page_chips_long .voucher_detail_page_chip{white-space:normal;text-align:left;align-items:flex-start;line-height:1.5}
.voucher_detail_page_chips_long .voucher_detail_page_chip i{margin-top:3px}
.voucher_detail_page_more summary{cursor:pointer;color:var(--primary);font-size:var(--fs-label);font-weight:500;margin-bottom:8px}
.voucher_detail_page_more[open] summary{margin-bottom:12px}
.voucher_detail_page_more .lms_rich{max-height:520px;overflow:auto;padding-right:8px}
.voucher_detail_page_career_img{display:block;max-width:100%;height:auto;margin:6px auto 0;border-radius:8px}
.voucher_detail_page_buy_form{margin:0}
.voucher_detail_page_pdetails{font-size:var(--fs-label);color:#4b5563;line-height:1.6;padding:0 0 14px 56px}
.voucher_detail_page_empty{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.voucher_detail_page_empty h2{font-size:var(--fs-card-title);font-weight:600;margin:6px 0 0}
a.voucher_detail_page_btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.voucher_detail_page_box + .voucher_detail_page_box{margin-top:18px}
.voucher_detail_page_resource + .voucher_detail_page_resource{margin-top:18px}
.voucher_detail_page_video img{aspect-ratio:16/9;object-fit:cover}
@media (max-width:767px){ .voucher_detail_page_pdetails{padding-left:0} }
.contact_page_captcha{margin:14px 0 0}

/* ---------- Course pictures: the whole uploaded picture is shown (never cropped) inside the design's
   frame; the empty sides show a soft blurred copy of the same picture (set as --lms-img on the box) ---------- */
.lms_fit{position:relative;display:block;overflow:hidden;background:#eef3fa;isolation:isolate}
.lms_fit::before{content:"";position:absolute;inset:-16px;background:var(--lms-img) center/cover no-repeat;filter:blur(16px) saturate(1.15);opacity:.6;z-index:-1}
.lms_fit img{display:block;width:100%;aspect-ratio:552/306;object-fit:contain}

/* ---------- Old-design pages (layouts/default, layouts/student) ---------- */
/* their old CSS gives html/body height:100%; with overflow-x:hidden that makes the body scroll instead of the window
   (the page stops early and the scroll button does nothing) */
html:has(body.lms_legacy_page),body.lms_legacy_page{height:auto}

/* old list pages (blogs, bootcamps, team packages ...): their classes had no styles left, so they get the new look here */
.lms_legacy_page .breadcum-area{background:#EDF5FD;padding:30px 0 26px;margin-bottom:var(--section-gap)}
.lms_legacy_page .eNtry-breadcum .breadcrumb{font-size:var(--fs-label);margin:0 0 14px}
.lms_legacy_page .eNtry-breadcum .breadcrumb-item a{color:#374151}
.lms_legacy_page .eNtry-breadcum .breadcrumb-item a:hover,.lms_legacy_page .eNtry-breadcum .breadcrumb-item.active{color:var(--primary)}
.lms_legacy_page .eNtry-breadcum .breadcrumb-item+.breadcrumb-item::before{content:"\203A";color:#374151}
.lms_legacy_page .g-title{font-size:36px;font-weight:700;letter-spacing:-.5px;color:var(--dark);margin:0 0 6px}
.lms_legacy_page .showing-text{font-size:13px;color:#6b7280;margin:0}
.lms_legacy_page .eNtery-item{padding-bottom:calc(var(--section-gap) + 10px)}
.lms_legacy_page .sidebar{background:#fff;border:1px solid #c6cedb;border-radius:6px;padding:18px;box-shadow:2px 3px 3px rgba(4,21,44,.4);margin-bottom:20px}
.lms_legacy_page .sidebar .widget+.widget{margin-top:18px}
.lms_legacy_page .sidebar .search{position:relative}
.lms_legacy_page .sidebar .search .form-control{font-size:var(--fs-label);border-radius:30px;padding:9px 48px 9px 16px;border-color:#c9d6e8}
.lms_legacy_page .sidebar .search .submit{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center}
.lms_legacy_page .widget-title{font-size:var(--fs-card-title);font-weight:600;color:var(--dark);margin:0 0 10px}
.lms_legacy_page .entry-widget{list-style:none;padding:0;margin:0}
.lms_legacy_page .entry-widget li a{padding:7px 0;border-bottom:1px solid #f0f3f8;font-size:var(--fs-label);color:#374151}
.lms_legacy_page .entry-widget li a:hover,.lms_legacy_page .entry-widget li.active a{color:var(--primary);font-weight:500}
.lms_legacy_page .down-text{font-size:13px;color:var(--primary);cursor:pointer;margin-top:8px}
.lms_legacy_page .eBtn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:6px;padding:9px 22px;font-size:var(--fs-label);font-weight:500}
.lms_legacy_page .eBtn.gradient{background:var(--primary);color:#fff}
.lms_legacy_page .eBtn.gradient:hover{background:var(--primary-dark);color:#fff}
.lms_legacy_page .ellipsis-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lms_legacy_page .entry-pagination{margin-top:24px;display:flex;justify-content:center}
.lms_legacy_page .pagination .page-link{color:var(--primary)}
.lms_legacy_page .pagination .active>.page-link{background:var(--primary);border-color:var(--primary);color:#fff}
.lms_legacy_page .overlay-content-max-h-400 .entry-widget{max-height:330px;overflow:hidden}
.lms_legacy_page .overlay-content-max-h-400:has(.down-text.active) .entry-widget{max-height:none}

/* ---------- Course detail: long description folds after a few lines ---------- */
.course_detail_page_clamped{max-height:200px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.course_detail_page_more{border:0;background:transparent;padding:6px 0 0;font-size:12.5px;font-weight:500;color:var(--primary)}

/* ---------- Student dashboard: the student panel's old CSS recolours buttons and headings ---------- */
.student_dashboard_page .btn-primary{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}
.student_dashboard_page .btn-primary:hover{background:var(--primary-dark)!important;border-color:var(--primary-dark)!important}
.student_dashboard_page_title,.student_dashboard_page_who h1,.student_dashboard_page_learning_head h2,.student_dashboard_page_course h3{font-family:'Poppins',sans-serif;color:var(--dark)}

/* ---------- Course detail: "Topics covered" chips (admin > Basic tab > Course Topics) ---------- */
.course_detail_page_topics{list-style:none;padding:0;margin:0 0 4px;display:flex;flex-wrap:wrap;gap:8px}
.course_detail_page_topics li{font-size:12px;color:var(--primary);background:#E7F3FD;border:1px solid #cfe2fb;border-radius:20px;padding:4px 12px;line-height:1.4}

/* ---------- Course thumbnails are uploaded at exactly 400 x 267 px (admin + instructor forms).
   Every frame that shows a course picture uses the same 400:267 shape, so the picture fills the
   frame completely and is never cut. Older pictures of another shape are shown whole (contain). ---------- */
.lms_fit img,
.home_page_course_card .home_page_thumb img,
.c-card .thumb img{aspect-ratio:400/267;object-fit:contain}
.course_detail_page_thumb.course_detail_page_thumb_img{aspect-ratio:400/267}
.cart_page_thumb{width:158px;height:auto;aspect-ratio:400/267;background:#eef3fa}
.cart_page_thumb img{object-fit:contain}
.cart_page_card_thumb{height:auto;aspect-ratio:400/267;background:#eef3fa}
.cart_page_card_thumb img{object-fit:contain}
.gift_page_course img{width:140px;height:auto;aspect-ratio:400/267;object-fit:contain;background:#eef3fa}
.student_dashboard_page_course_img{width:150px;min-height:0;align-self:center;aspect-ratio:400/267;background:#eef3fa}
.student_dashboard_page_course_img img{object-fit:contain}
.c-card .card-head img{width:100%;aspect-ratio:400/267;object-fit:contain;background:#eef3fa}
@media (max-width:576px){
  .cart_page_thumb{width:100%;height:auto}
  .gift_page_course img{width:100px;height:auto}
  .student_dashboard_page_course_img{width:100%;height:auto}
}

/* ---------- Checkout / payment page (/payment, view payment/index). Same hero, boxes and summary as the
   Gift Course page (gift_page_*); the gateway's own form loads into .payment_page_gateway ---------- */
.payment_page_appbar{position:sticky;top:0;z-index:1030;display:flex;justify-content:space-between;gap:10px;padding:8px 16px;background:#f3f6fb;border-bottom:1px solid #dbe3ef}
.payment_page_gift{display:flex;align-items:center;gap:14px;padding:12px 18px;background:#EAF3FD;border-color:var(--primary)}
.payment_page_gift strong{display:block;font-size:14px;font-weight:500;color:var(--dark)}
.payment_page_gift small{display:block;font-size:13px;color:#4b5563}
.payment_page_gateway{font-size:14px;color:#374151}
.payment_page_gateway .row{margin:0}
.payment_page_gateway .row>*{padding:0}
.payment_page_gateway .my-5{margin:0 0 14px!important}
.payment_page_gateway p:last-child{margin-bottom:0}
.payment_page_gateway .btn{border-radius:6px;font-size:var(--fs-label);font-weight:500;padding:10px 18px}
.payment_page_gateway .btn-primary{background:var(--primary);border-color:var(--primary)}
.payment_page_gateway .form-control{border:1px solid #9aa6b8;border-radius:6px;font-size:14px}
.payment_page_gateway .form-label{font-size:14px;color:var(--dark)}
.payment_page_gateway .alert{border-radius:6px;font-size:13px;margin:0}
.payment_page_gateway img{max-width:100%;height:auto}
.payment_page_loading{display:flex;align-items:center;gap:10px;color:#6b7280;font-size:14px;padding:10px 0}
.payment_page_item_icon{width:140px;aspect-ratio:400/267;border-radius:6px;background:#E7F3FD;color:var(--primary);display:grid;place-items:center;font-size:30px;flex-shrink:0}
.payment_page_item_img{width:140px;aspect-ratio:400/267;object-fit:contain!important;background:#F5F9FF;border:1px solid #E1E8F3;border-radius:6px;padding:8px;flex-shrink:0}
.gift_page_logo .bi-credit-card-2-front-fill{color:var(--primary)}
/* Authorize.Net card form (view payment/authorizenet/index) */
.payment_page_card{display:grid;gap:14px}
.payment_page_card_test{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 12px;border-radius:8px;background:#FFF8E6;border:1px solid #FDE3A7;color:#92600A;font-size:12.5px;line-height:1.5}
.payment_page_card_row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.payment_page_card_field label{display:block;font-size:13px;font-weight:500;color:var(--dark);margin-bottom:6px}
.payment_page_card_input{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border:1px solid #9aa6b8;border-radius:8px;background:#fff;transition:border-color .2s,box-shadow .2s}
.payment_page_card_input i{color:#8A97AB;font-size:16px;flex-shrink:0}
.payment_page_card_input input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font-size:14px;color:var(--dark);letter-spacing:.02em}
.payment_page_card_input:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(7,111,230,.12)}
.payment_page_card_input:focus-within i{color:var(--primary)}
.payment_page_card_input.is-invalid{border-color:#DC2626}
.payment_page_card_brand{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--navy);flex-shrink:0}
.payment_page_card_err{margin:0;padding:10px 12px;border-radius:8px;background:#FEF2F2;border:1px solid #FECACA;color:#B91C1C;font-size:13px}
.payment_page_card_err[hidden]{display:none}
.payment_page_gateway .payment_page_card_btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;font-size:14px}
.payment_page_card_secure{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;font-size:12px;color:#6b7280;text-align:center}
.payment_page_card_secure i{color:#16A34A}
@media (max-width:400px){.payment_page_card_row{grid-template-columns:1fr}}
.payment_page_old{display:inline-block;margin-left:8px;font-size:13px;color:#9ca3af}
.payment_page_secure{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:#6b7280;margin:12px 0 0}
.payment_page_secure i{color:#16A34A}
.payment_page_paybar{display:none}
@media (max-width:991px){
  .payment_page_paybar{display:flex;align-items:center;justify-content:space-between;gap:14px;position:fixed;left:0;right:0;bottom:0;z-index:1020;
    background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid #dbe3ef;padding:10px 16px}
  .payment_page_paybar small{display:block;font-size:12px;color:#6b7280}
  .payment_page_paybar strong{font-size:18px;font-weight:600;color:var(--primary)}
  .payment_page_paybar .btn{border-radius:6px;font-size:var(--fs-label);padding:10px 18px}
  body:has(.payment_page_paybar) .common_footer{padding-bottom:70px}
  body:has(.payment_page_paybar) .common_float{bottom:78px}
}
@media (max-width:576px){.payment_page_item_icon{width:100px}}

/* ---------- Student > Live Classes (dashboard tab + "View All" page, view student/tabs/live_classes) ---------- */
.live_class_page{padding:6px 0 10px}
.live_class_page_head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.live_class_page_title{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.live_class_page_title h2{font-size:24px;font-weight:600;color:var(--dark);margin:0}
.live_class_page_count{font-size:13px;font-weight:500;color:var(--primary);background:#DCEBFC;border-radius:8px;padding:5px 14px}
.live_class_page_all{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--primary);background:#fff;border:1px solid #8fa0bd;border-radius:6px;padding:5px 12px;box-shadow:2px 3px 4px rgba(4,21,44,.3)}
.live_class_page_all:hover{background:#EAF3FD;color:var(--primary)}
.live_class_page_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.live_class_page_card{display:flex;flex-direction:column;background:#fff;border:1px solid #c9d6e8;border-radius:8px;padding:6px 6px 12px;box-shadow:1px 3px 5px rgba(4,21,44,.18);transition:box-shadow .2s}
.live_class_page_card:hover{box-shadow:2px 4px 6px rgba(4,21,44,.35)}
.live_class_page_img{border-radius:6px 6px 0 0}
.live_class_page_img img{aspect-ratio:253/119!important}
.live_class_page_state{position:absolute;top:0;right:0;z-index:1;font-size:10px;font-weight:500;color:var(--primary);background:#fff;border-radius:0 6px 0 8px;padding:3px 10px}
.live_class_page_state_live{color:#fff;background:#16A34A}
.live_class_page_state_live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:5px;vertical-align:middle;animation:live_class_blink 1.2s infinite}
.live_class_page_state_ended{color:#4b5563;background:#EEF2F8}
@keyframes live_class_blink{50%{opacity:.25}}
.live_class_page_card h3{font-size:13px;font-weight:500;color:var(--dark);margin:10px 8px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live_class_page_when{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:10px;color:var(--dark);margin:8px 8px 0}
.live_class_page_when i{font-size:12px;color:#4b5563;margin-right:4px;vertical-align:-1px}
.live_class_page_inst{display:flex;align-items:center;gap:10px;margin:12px 8px 14px}
.live_class_page_inst img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1px solid #8fa0bd;flex-shrink:0}
.live_class_page_inst small{display:block;font-size:10px;color:#6b7280;line-height:1.2}
.live_class_page_inst strong{display:block;font-size:11px;font-weight:500;color:var(--dark)}
.live_class_page_btn{margin:auto 8px 0;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--primary);background:#E7F0FD;border-radius:6px;padding:8px 10px;text-align:center}
.live_class_page_btn:hover{background:var(--primary);color:#fff}
.live_class_page_btn[data-live]{background:#16A34A;color:#fff}
.live_class_page_btn_warn{background:#FDEBCF;color:#B45309}
.live_class_page_btn_warn:hover{background:#F59E0B;color:#fff}
.live_class_page_btn_off{background:#EEF2F8;color:#6b7280;cursor:default}
.live_class_page_btn_off:hover{background:#EEF2F8;color:#6b7280}
.live_class_page_pager{display:flex;justify-content:center;margin-top:24px}
.live_class_page_empty{text-align:center;padding:40px 16px;color:#6b7280}
.live_class_page_empty span{width:72px;height:72px;border-radius:50%;background:#E7F3FD;color:var(--primary);display:inline-grid;place-items:center;font-size:30px;margin-bottom:12px}
.live_class_page_empty h3{font-size:17px;font-weight:500;color:var(--dark);margin:0 0 4px}
.live_class_page_empty p{font-size:13px;margin:0}
@media (max-width:991px){.live_class_page_grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.live_class_page_img img{aspect-ratio:253/119!important}
@media (max-width:576px){.live_class_page_grid{grid-template-columns:1fr}}

/* ---------- Student > Teachers (design: Teachers tab picture, view student/tabs/teachers) ---------- */
.teacher_page_filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr) auto;gap:18px;align-items:end;background:#fff;border:1px solid #8fa0bd;border-radius:10px;padding:18px 26px 16px;margin:0 -22px 40px}
.teacher_page_filters label{display:block;font-size:14px;color:#374151;margin-bottom:4px}
.teacher_page_filters select,.teacher_page_search span{width:100%;height:36px;border:1px solid #9aa6b8;border-radius:6px;background-color:#fff;font-size:12px;color:#4b5563}
.teacher_page_filters select{padding:0 32px 0 14px;-webkit-appearance:none;appearance:none;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234b5563' stroke-width='1.6' d='M3 6l5 5 5-5'/%3E%3C/svg%3E") right 14px center no-repeat}
.teacher_page_search span{display:flex;align-items:center;gap:10px;padding:0 14px}
.teacher_page_search i{color:#6b7280;font-size:15px}
.teacher_page_search input{flex:1;min-width:0;border:0;outline:0;font-size:12px;color:var(--dark);background:none}
.teacher_page_filters select:focus,.teacher_page_search span:focus-within{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(7,111,230,.12)}
.teacher_page_filters .btn{height:36px;min-width:110px;font-size:15px;font-weight:500;border-radius:4px}
.teacher_page_result{font-size:13px;color:#6b7280;margin:-24px 0 18px}
.teacher_page_result a{color:var(--primary)}
.teacher_page_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px;margin:0 -22px}
.teacher_page_card{background:#fff;border:1px solid #c9d6e8;border-radius:6px;box-shadow:1px 3px 5px rgba(4,21,44,.18);padding:20px 12px 12px;text-align:center;display:flex;flex-direction:column;transition:box-shadow .2s}
.teacher_page_card:hover{box-shadow:2px 4px 6px rgba(4,21,44,.4)}
.teacher_page_photo{display:block;width:124px;height:124px;margin:0 auto 8px;border-radius:50%;border:3px solid var(--primary);padding:2px;background:#fff}
.teacher_page_photo img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.teacher_page_card h3{font-size:15px;font-weight:500;color:var(--dark);margin:0 0 2px}
.teacher_page_card h3 a{color:inherit}
.teacher_page_card h3 a:hover{color:var(--primary)}
.teacher_page_card p{font-size:13px;color:#6b7280;margin:0 0 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.teacher_page_btn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;color:var(--primary);background:#E7F0FD;border-radius:6px;padding:9px 10px}
.teacher_page_btn:hover{background:var(--primary);color:#fff}
.teacher_page_empty{grid-column:1/-1;text-align:center;padding:40px 16px;color:#6b7280}
.teacher_page_empty span{width:72px;height:72px;border-radius:50%;background:#E7F3FD;color:var(--primary);display:inline-grid;place-items:center;font-size:30px;margin-bottom:12px}
.teacher_page_empty h3{font-size:17px;font-weight:500;color:var(--dark);margin:0 0 6px}
.teacher_page_empty p{font-size:13px;margin:0}
.teacher_page_empty a{font-size:13px;color:var(--primary)}
@media (max-width:1199px){.teacher_page_filters,.teacher_page_grid{margin-left:0;margin-right:0}}
@media (max-width:991px){.teacher_page_filters{grid-template-columns:1fr 1fr}}
@media (max-width:576px){.teacher_page_filters{grid-template-columns:1fr;padding:16px}.teacher_page_filters .btn{width:100%}}

/* ---------- Student > Settings (view student/tabs/my_profile) ---------- */
.account_settings_page_head{margin-bottom:20px}
.account_settings_page_title{font-size:24px;font-weight:600;color:var(--dark);margin:0 0 4px}
.account_settings_page_head p{font-size:13.5px;color:#6b7280;margin:0}
.account_settings_page_card{display:block;background:#fff;border:1px solid #DCE3EE;border-radius:12px;box-shadow:0 2px 10px rgba(4,21,44,.05)}
.account_settings_page_summary{padding:28px 22px 22px;text-align:center;position:sticky;top:96px}
.account_settings_page_photo{position:relative;width:132px;height:132px;margin:0 auto 14px}
.account_settings_page_photo img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--primary);padding:3px;background:#fff}
.account_settings_page_photo_btn{position:absolute;right:4px;bottom:6px;width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;border:3px solid #fff;display:grid;place-items:center;font-size:14px;cursor:pointer;transition:background .2s}
.account_settings_page_photo_btn:hover{background:var(--primary-dark)}
.account_settings_page_summary h3{font-size:17px;font-weight:600;color:var(--dark);margin:0 0 2px;word-break:break-word}
.account_settings_page_email{font-size:12.5px;color:#6b7280;margin:0 0 10px;word-break:break-all}
.account_settings_page_role{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--primary);background:#DCEBFC;border-radius:6px;padding:4px 10px}
.account_settings_page_upload{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0 8px;padding:9px 12px;border:1px dashed #9DB8DE;border-radius:8px;background:#F5F9FF;color:var(--primary);font-size:13px;font-weight:500;cursor:pointer;transition:background .2s,border-color .2s}
.account_settings_page_upload:hover{background:#E7F0FD;border-color:var(--primary)}
.account_settings_page_hint{font-size:11.5px;color:#6b7280;margin:0;line-height:1.5}
.account_settings_page_hint.is-ok{color:#0F7A43}
.account_settings_page_hint.is-error{color:#DC2626}
.account_settings_page_progress{margin:20px 0 0;padding:14px;border-radius:10px;background:#F7F9FC;text-align:left}
.account_settings_page_progress_top{display:flex;justify-content:space-between;font-size:12.5px;color:#374151;margin-bottom:8px}
.account_settings_page_progress_top strong{color:var(--primary);font-weight:600}
.account_settings_page_bar{height:7px;border-radius:7px;background:#E3E9F2;overflow:hidden}
.account_settings_page_bar span{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,var(--primary),#3FA2FF)}
.account_settings_page_meta{margin-top:14px;display:grid;gap:8px;text-align:left}
.account_settings_page_meta div{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6b7280}
.account_settings_page_meta i{color:var(--primary)}
.account_settings_page_meta strong{color:var(--dark);font-weight:500}

.account_settings_page_section{padding:24px 26px;border-bottom:1px solid #EEF1F6}
.account_settings_page_section_head{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}
.account_settings_page_section_head>span{width:38px;height:38px;flex-shrink:0;border-radius:10px;background:#E7F0FD;color:var(--primary);display:grid;place-items:center;font-size:17px}
.account_settings_page_section_head>span.is-orange{background:#FFF1E3;color:#E8790C}
.account_settings_page_section_head h4{font-size:15.5px;font-weight:600;color:var(--dark);margin:0 0 2px}
.account_settings_page_section_head p{font-size:12.5px;color:#6b7280;margin:0}
.account_settings_page_label{display:block;font-size:13px;font-weight:500;color:#374151;margin-bottom:6px}
.account_settings_page_label em{color:#DC2626;font-style:normal}
.account_settings_page_field{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border:1px solid #CFD8E5;border-radius:8px;background:#fff;transition:border-color .2s,box-shadow .2s}
.account_settings_page_field>i{color:#8A97AB;font-size:15px;flex-shrink:0}
.account_settings_page_field input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font-size:13.5px;color:var(--dark)}
.account_settings_page_field input::placeholder,.account_settings_page_textarea::placeholder{color:#A0AABA}
.account_settings_page_field:focus-within,.account_settings_page_textarea:focus,.account_settings_page_tags .tagify--focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(7,111,230,.12)}
.account_settings_page_field:focus-within>i:first-child{color:var(--primary)}
.account_settings_page_field.is-locked{background:#F5F7FA}
.account_settings_page_field.is-locked input{color:#6b7280;cursor:not-allowed}
.account_settings_page_field.is-invalid{border-color:#DC2626}
.account_settings_page_fb{color:#1877F2!important}
.account_settings_page_x{color:#000!important}
.account_settings_page_in{color:#0A66C2!important}
.account_settings_page_eye{border:0;background:none;padding:0;color:#8A97AB;font-size:16px;line-height:1}
.account_settings_page_eye:hover{color:var(--primary)}
.account_settings_page_error{font-size:12px;color:#DC2626;margin:6px 0 0}
.account_settings_page_error[hidden]{display:none}
.account_settings_page_textarea{display:block;width:100%;padding:12px 14px;border:1px solid #CFD8E5;border-radius:8px;font-size:13.5px;color:var(--dark);outline:0;resize:vertical;min-height:120px;transition:border-color .2s,box-shadow .2s}
.account_settings_page_count{text-align:right;font-size:11.5px;color:#8A97AB;margin-top:4px}
.account_settings_page_tags .tagify{--tags-border-color:#CFD8E5;--tags-hover-border-color:#9DB8DE;--tag-bg:#E7F0FD;--tag-hover:#DCEBFC;--tag-text-color:var(--navy);--tag-remove-btn-color:var(--navy);
  width:100%;min-height:44px;border:1px solid #CFD8E5;border-radius:8px;padding:3px 6px;font-size:13px;background:#fff}
.account_settings_page_tags .tagify__tag>div{border-radius:6px}
.account_settings_page_tags>input.tagify{display:block;height:44px;padding:0 14px;outline:0}
.account_settings_page_strength{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px}
.account_settings_page_strength span{height:4px;border-radius:4px;background:#E3E9F2;transition:background .2s}
.account_settings_page_strength[data-level="1"] span:nth-child(-n+1){background:#DC2626}
.account_settings_page_strength[data-level="2"] span:nth-child(-n+2){background:#F59E0B}
.account_settings_page_strength[data-level="3"] span:nth-child(-n+3){background:#3B82F6}
.account_settings_page_strength[data-level="4"] span{background:#10B981}
.account_settings_page_strength_text{font-size:11.5px;margin:4px 0 0;min-height:16px;color:#6b7280}
.account_settings_page_strength_text[data-level="1"]{color:#DC2626}
.account_settings_page_strength_text[data-level="2"]{color:#D97706}
.account_settings_page_strength_text[data-level="3"]{color:#2563EB}
.account_settings_page_strength_text[data-level="4"]{color:#059669}
.account_settings_page_actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px;padding:16px 26px;background:#FAFBFD;border-radius:0 0 12px 12px}
.account_settings_page_note{margin-right:auto;font-size:12.5px;color:#D97706;display:inline-flex;align-items:center;gap:6px}
.account_settings_page_note[hidden]{display:none}
.account_settings_page_btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 22px;border:0;border-radius:8px;background:var(--primary);color:#fff;font-size:13.5px;font-weight:500;transition:background .2s,box-shadow .2s}
.account_settings_page_btn:hover{background:var(--primary-dark);box-shadow:0 4px 12px rgba(7,111,230,.25)}
@media (max-width:991px){.account_settings_page_summary{position:static}}
@media (max-width:576px){
  .account_settings_page_section{padding:20px 16px}
  .account_settings_page_actions{padding:14px 16px}
  .account_settings_page_btn{width:100%}
  .account_settings_page_note{margin-right:0}
}

/* ---------- Student dashboard: prev / next arrows beside the tabs (only when the tabs do not fit) ---------- */
.student_dashboard_page_tabs_wrap{position:relative;display:flex;align-items:stretch}
.student_dashboard_page_tabs_wrap .student_dashboard_page_tabs{position:relative;flex:1;min-width:0;scroll-behavior:smooth}
.student_dashboard_page_tabs_arrow{display:none;flex-shrink:0;align-self:center;width:30px;height:30px;margin:6px 4px 0;border:1px solid #D5DEEA;border-radius:50%;background:#fff;color:var(--primary);
  font-size:13px;place-items:center;box-shadow:0 2px 6px rgba(4,21,44,.12);transition:background .2s,color .2s,opacity .2s;z-index:1}
.student_dashboard_page_tabs_arrow:hover:not(:disabled){background:var(--primary);border-color:var(--primary);color:#fff}
.student_dashboard_page_tabs_arrow:disabled{opacity:.35;cursor:default;box-shadow:none}
.student_dashboard_page_tabs_wrap.has-overflow .student_dashboard_page_tabs_arrow{display:grid}
.student_dashboard_page_tabs_wrap.has-overflow .student_dashboard_page_tabs{padding:0 6px;justify-content:flex-start;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
.student_dashboard_page_tabs_wrap.has-overflow .is-prev{margin-left:10px}
.student_dashboard_page_tabs_wrap.has-overflow .is-next{margin-right:10px}

/* ---------- Student > Support tickets (view student/support/index) ---------- */
.support_page_head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.support_page_title{font-size:24px;font-weight:600;color:var(--dark);margin:0 0 4px}
.support_page_head p{font-size:13.5px;color:#6b7280;margin:0}
.support_page_btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border:0;border-radius:8px;background:var(--primary);color:#fff;font-size:13.5px;font-weight:500;transition:background .2s,box-shadow .2s;white-space:nowrap}
.support_page_btn:hover{background:var(--primary-dark);color:#fff;box-shadow:0 4px 12px rgba(7,111,230,.25)}
.support_page_btn:disabled{opacity:.7}
.support_page_stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.support_page_stat{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1px solid #DCE3EE;border-radius:12px;box-shadow:0 2px 10px rgba(4,21,44,.05)}
.support_page_stat>span{width:46px;height:46px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;font-size:20px}
.support_page_stat strong{display:block;font-size:22px;font-weight:600;line-height:1.1;color:var(--dark)}
.support_page_stat small{font-size:12.5px;color:#6b7280}
.support_page_stat.is-total>span{background:#E7F0FD;color:var(--primary)}
.support_page_stat.is-open>span{background:#E0F2FE;color:#0284C7}
.support_page_stat.is-pending>span{background:#FEF3C7;color:#D97706}
.support_page_stat.is-closed>span{background:#DCFCE7;color:#16A34A}
.support_page_card{background:#fff;border:1px solid #DCE3EE;border-radius:12px;box-shadow:0 2px 10px rgba(4,21,44,.05);overflow:hidden}
.support_page_toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid #EEF1F6}
.support_page_filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.support_page_filters::-webkit-scrollbar{display:none}
.support_page_filters button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:1px solid #DCE3EE;border-radius:20px;background:#fff;font-size:12.5px;color:#374151;white-space:nowrap;transition:.2s}
.support_page_filters button em{font-style:normal;font-size:11px;min-width:20px;height:18px;padding:0 6px;border-radius:9px;background:#EEF2F7;color:#55657E;display:inline-grid;place-items:center}
.support_page_filters button:hover{border-color:var(--primary);color:var(--primary)}
.support_page_filters button.active{background:var(--primary);border-color:var(--primary);color:#fff}
.support_page_filters button.active em{background:rgba(255,255,255,.25);color:#fff}
.support_page_search{display:flex;align-items:center;gap:8px;height:36px;width:240px;max-width:100%;padding:0 12px;border:1px solid #CFD8E5;border-radius:8px;margin:0;transition:border-color .2s,box-shadow .2s}
.support_page_search i{color:#8A97AB;font-size:14px}
.support_page_search input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:13px;color:var(--dark)}
.support_page_search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(7,111,230,.12)}
.support_page_ticket{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid #EEF1F6;color:inherit;transition:background .2s}
.support_page_ticket[hidden]{display:none}
.support_page_ticket:last-of-type{border-bottom:0}
.support_page_ticket:hover{background:#F7FAFF}
.support_page_ticket_icon{width:42px;height:42px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;font-size:18px;background:#E0F2FE;color:#0284C7}
.support_page_ticket_icon.is-pending{background:#FEF3C7;color:#D97706}
.support_page_ticket_icon.is-closed{background:#DCFCE7;color:#16A34A}
.support_page_ticket_main{flex:1;min-width:0}
.support_page_ticket_main h3{font-size:14.5px;font-weight:500;color:var(--dark);margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.support_page_ticket:hover h3{color:var(--primary)}
.support_page_ticket_meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:#6b7280}
.support_page_ticket_meta span{display:inline-flex;align-items:center;gap:4px}
.support_page_ticket_meta i{color:#9AA6B8}
.support_page_ticket_side{display:flex;align-items:center;gap:16px;flex-shrink:0}
.support_page_status{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:20px;background:#E0F2FE;color:#0369A1}
.support_page_status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.support_page_status.is-pending{background:#FEF3C7;color:#B45309}
.support_page_status.is-closed{background:#DCFCE7;color:#15803D}
.support_page_view{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--primary);padding:7px 12px;border-radius:8px;background:#E7F0FD;transition:.2s}
.support_page_ticket:hover .support_page_view{background:var(--primary);color:#fff}
.support_page_empty{text-align:center;padding:44px 16px;color:#6b7280}
.support_page_empty[hidden]{display:none}
.support_page_empty>span{width:72px;height:72px;border-radius:50%;background:#E7F3FD;color:var(--primary);display:inline-grid;place-items:center;font-size:30px;margin-bottom:12px}
.support_page_empty h3{font-size:17px;font-weight:500;color:var(--dark);margin:0 0 4px}
.support_page_empty p{font-size:13px;margin:0 0 16px}
.support_page_empty.is-filtered p{margin:0}
/* create ticket modal */
.support_page_modal .modal-content{border:0;border-radius:16px;box-shadow:0 24px 60px rgba(4,21,44,.25);overflow:hidden}
.support_page_modal_head{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 16px;background:#F3F7FD url(images/common_wave_hero.svg) center/cover no-repeat;border-bottom:1px solid #E3EAF5}
.support_page_modal_head>span{width:42px;height:42px;flex-shrink:0;border-radius:12px;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:19px}
.support_page_modal_head div{flex:1}
.support_page_modal_head h5{font-size:17px;font-weight:600;color:var(--dark);margin:0 0 2px}
.support_page_modal_head p{font-size:12.5px;color:#6b7280;margin:0}
.support_page_modal_head .btn-close{font-size:12px;margin-top:4px}
.support_page_modal .modal-body{padding:20px 22px 22px}
.support_page_label{display:block;font-size:13px;font-weight:500;color:#374151;margin-bottom:6px}
.support_page_label em{color:#DC2626;font-style:normal}
.support_page_input{display:block;width:100%;min-height:44px;padding:10px 14px;border:1px solid #CFD8E5;border-radius:8px;background:#fff;font-size:13.5px;color:var(--dark);outline:0;transition:border-color .2s,box-shadow .2s}
select.support_page_input{-webkit-appearance:none;appearance:none;padding-right:36px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234b5563' stroke-width='1.6' d='M3 6l5 5 5-5'/%3E%3C/svg%3E") right 14px center no-repeat}
textarea.support_page_input{resize:vertical;min-height:120px}
.support_page_input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(7,111,230,.12)}
.support_page_form_error{font-size:12.5px;color:#B91C1C;background:#FEF2F2;border:1px solid #FECACA;border-radius:8px;padding:10px 12px;margin-bottom:14px}
.support_page_form_error[hidden]{display:none}
@media (max-width:991px){.support_page_stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .support_page_toolbar{padding:12px 14px}
  .support_page_search{width:100%}
  .support_page_ticket{flex-wrap:wrap;padding:14px;gap:12px}
  .support_page_ticket_side{width:100%;justify-content:space-between;padding-left:54px}
}
@media (max-width:576px){
  .support_page_head .support_page_btn{width:100%}
  .support_page_stats{gap:10px}
  .support_page_stat{padding:12px;gap:10px}
  .support_page_stat>span{width:38px;height:38px;font-size:17px}
  .support_page_stat strong{font-size:18px}
}

/* ---------- Course voucher offer (course page section, course player banner, student My Vouchers) ---------- */
.voucher_offer_action{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.voucher_offer_btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border:0;border-radius:8px;background:var(--primary);color:#fff!important;font-size:13px;font-weight:500;white-space:nowrap;transition:background .2s,box-shadow .2s}
.voucher_offer_btn:hover{background:var(--primary-dark);box-shadow:0 4px 12px rgba(7,111,230,.25)}
.voucher_offer_btn.is-light{background:#E7F0FD;color:var(--primary)!important}
.voucher_offer_btn.is-light:hover{background:#DCEBFC;box-shadow:none}
.voucher_offer_state{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:20px;line-height:1.35}
.voucher_offer_state.is-pending{background:#FEF3C7;color:#B45309}
.voucher_offer_state.is-approved{background:#DBEAFE;color:#1D4ED8}
.voucher_offer_state.is-paid{background:#DCFCE7;color:#15803D}
.voucher_offer_state.is-rejected{background:#FEE2E2;color:#B91C1C;border-radius:8px}
.voucher_offer_pct{display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(90deg,#F97316,#EF4444);border-radius:20px;padding:4px 12px;white-space:nowrap}
.voucher_offer_banner_icon{width:46px;height:46px;flex-shrink:0;border-radius:12px;background:linear-gradient(135deg,var(--primary),#3FA2FF);color:#fff;display:grid;place-items:center;font-size:21px}
/* course player banner */
.voucher_offer_banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0;padding:14px 18px;border-radius:12px;background:linear-gradient(90deg,#EEF5FF,#FFF7ED);border:1px solid #D6E4F7}
.voucher_offer_banner_text{flex:1;min-width:180px;display:flex;flex-direction:column;gap:1px}
.voucher_offer_banner_text small{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#E8590C}
.voucher_offer_banner_text strong{font-size:15px;font-weight:600;color:var(--dark)}
.voucher_offer_banner_text span{font-size:13px;color:#374151}
.voucher_offer_banner_text b{color:#DC2626;font-weight:600}
.voucher_offer_banner_text del,.voucher_offer_price del,.voucher_offer_section_price del{color:#9CA3AF;font-weight:400}
/* student > My Vouchers */
.voucher_offer_list{background:#fff;border:1px solid #DCE3EE;border-radius:12px;padding:20px;margin-bottom:28px;box-shadow:0 2px 10px rgba(4,21,44,.05)}
.voucher_offer_list_title{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;color:var(--dark);margin:0 0 4px}
.voucher_offer_list_title i{color:#F97316}
.voucher_offer_list_sub{font-size:13px;color:#6b7280;margin:0 0 16px}
.voucher_offer_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.voucher_offer_card{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid #E1E8F3;border-radius:12px;background:linear-gradient(180deg,#F8FBFF,#fff)}
.voucher_offer_card_top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.voucher_offer_card h6{font-size:15px;font-weight:600;color:var(--dark);margin:0}
.voucher_offer_course{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#6b7280}
.voucher_offer_price{font-size:20px;font-weight:600;color:var(--primary);margin:4px 0 8px}
.voucher_offer_price del{font-size:13px;margin-left:4px}
.voucher_offer_card .voucher_offer_action{margin-top:auto}
/* public course page section */
.voucher_offer_section{margin-top:22px;background:#fff;border:1px solid #c6cedb;border-radius:10px;padding:18px 20px;box-shadow:2px 3px 4px rgba(4,21,44,.12)}
.voucher_offer_section_head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.voucher_offer_section_head h2{flex:1;font-size:var(--fs-label,16px);font-weight:600;color:var(--dark);margin:0}
.voucher_offer_section_body{display:grid;grid-template-columns:120px minmax(0,1fr) 250px;gap:22px;align-items:center}
.voucher_offer_section_logo{width:120px;height:120px;border-radius:14px;background:#F5F9FF;border:1px solid #E1E8F3;display:grid;place-items:center;padding:10px}
.voucher_offer_section_logo img{max-width:100%;max-height:100%;object-fit:contain}
.voucher_offer_section_logo i{font-size:44px;color:var(--primary)}
.voucher_offer_section_info h3{font-size:18px;font-weight:600;color:var(--dark);margin:0}
.voucher_offer_section_info>small{display:block;font-size:12.5px;color:#6b7280;margin-bottom:8px}
.voucher_offer_section_info p{font-size:13.5px;color:#4b5563;line-height:1.6;margin:0 0 12px}
.voucher_offer_steps{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;padding:0;margin:0}
.voucher_offer_steps li{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#374151}
.voucher_offer_steps span{width:20px;height:20px;border-radius:50%;background:#E7F0FD;color:var(--primary);display:inline-grid;place-items:center;font-size:11px;font-weight:600}
.voucher_offer_section_price{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:12px;background:#F5F9FF;border:1px solid #DCE6F5}
.voucher_offer_section_price>small{font-size:12px;color:#6b7280}
.voucher_offer_section_price>strong{font-size:26px;font-weight:700;color:var(--primary);line-height:1.15}
.voucher_offer_section_price>span{font-size:12.5px;color:#16A34A;margin-bottom:8px}
.voucher_offer_section_price .voucher_offer_action{flex-direction:column;align-items:stretch}
.voucher_offer_section_price .voucher_offer_btn{width:100%}
.voucher_offer_note{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:#6b7280}
@media (max-width:991px){
  .voucher_offer_section_body{grid-template-columns:96px minmax(0,1fr)}
  .voucher_offer_section_logo{width:96px;height:96px}
  .voucher_offer_section_price{grid-column:1/-1}
}
@media (max-width:576px){
  .voucher_offer_section{padding:16px 14px}
  .voucher_offer_section_body{grid-template-columns:1fr;gap:14px}
  .voucher_offer_section_logo{width:84px;height:84px}
  .voucher_offer_banner{padding:14px}
  .voucher_offer_banner .voucher_offer_action,.voucher_offer_banner .voucher_offer_action form,.voucher_offer_banner .voucher_offer_btn{width:100%}
  .voucher_offer_card .voucher_offer_action form,.voucher_offer_card .voucher_offer_btn{width:100%}
}

/* ---------- Course detail page: spacing / alignment polish ----------
   The design's hero had a fixed 356px height, so a long title or description pushed the breadcrumb out of the top
   and the level / language row onto the cards. The hero now grows with its text; the picture and the thumbnail
   card stay the same size, centred on the right. Body cards line up with the hero text and the hero card. */
.course_detail_page_hero h1{line-height:1.12;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.course_detail_page_hero_sub{font-size:13.5px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:16px}
.course_detail_page_status{margin-bottom:16px}
.course_detail_page_meta{gap:10px 28px}
.course_detail_page_badge{margin-bottom:14px}
@media (min-width:992px){
  .course_detail_page_hero{height:auto;min-height:356px;align-items:stretch}
  .course_detail_page_hero .container{display:flex;align-items:center}
  .course_detail_page_hero_text{padding:30px 0 32px 48px;max-width:calc(100% - 500px)}
  .course_detail_page_hero h1{font-size:34px;max-width:600px}
  .course_detail_page_hero_sub{max-width:560px}
  /* picture keeps its real height and stays centred; the card sits on it as before (62px below the picture's top) */
  .course_detail_page_hero::before{background-size:auto 356px;background-position:right center}
  .course_detail_page_hero_card{top:calc(50% - 178px + 62px)}
  .course_detail_page_main{padding-top:32px}
  .course_detail_page_main .container>*{margin-left:48px;margin-right:52px}
  .course_detail_page_grid{gap:28px}
}
.course_detail_page_card{padding:16px 20px 16px 16px;margin-bottom:16px;gap:18px;border-radius:10px;border-color:#D3DCE9;box-shadow:0 2px 10px rgba(4,21,44,.07)}
.course_detail_page_card h2{font-size:16px;margin:10px 0 10px}
.course_detail_page_list li{font-size:13.5px;line-height:1.65;padding-left:26px}
.course_detail_page_list li+li{margin-top:4px}
.course_detail_page_list li::before{color:var(--primary);top:1px}
.course_detail_page_text{font-size:13.5px;line-height:1.7}
.course_detail_page_card .course_detail_page_text{max-width:none}
.course_detail_page_buy{border-radius:12px;border-color:#D3DCE9;box-shadow:0 4px 18px rgba(4,21,44,.09);padding:18px 18px 20px}
.course_detail_page_price{margin:22px 4px 16px}
.course_detail_page_inst,.voucher_offer_section{border-radius:12px;border-color:#D3DCE9;box-shadow:0 2px 10px rgba(4,21,44,.07)}
.course_detail_page_inst{margin-top:32px;padding:22px 26px 24px 20px}
.voucher_offer_section{margin-top:28px}
@media (min-width:992px){
  /* price card follows the page while the left column scrolls */
  .course_detail_page_buy{position:sticky;top:88px}
}
@media (max-width:991px){
  .course_detail_page_hero_text{padding:24px 0 26px}
  .course_detail_page_main{padding-top:22px}
}
@media (max-width:576px){
  .course_detail_page_hero h1{font-size:25px}
  .course_detail_page_hero_sub{font-size:13px;-webkit-line-clamp:5}
  .course_detail_page_meta{gap:8px 18px;font-size:12.5px}
  .course_detail_page_status{gap:16px}
  .course_detail_page_card{padding:14px}
}

/* Site footer: divider line above it on every page (as in the design; common.css had it only on sign in / create account) */
.common_footer{padding-top:0}
.common_footer .container-fluid::before{content:"";display:block;border-top:1px solid #6b7c96;margin-bottom:var(--section-gap)}

/* Site footer, responsive: small laptops get the about text on its own row and four equal link columns;
   tablets three link columns with "Stay Updated" below them; phones a full-width email box */
@media (min-width:992px) and (max-width:1199px){
  .common_footer .common_f_about{width:100%}
  .common_footer .common_f_about .common_about{max-width:520px}
  .common_footer .common_f_quick,.common_footer .common_f_cat,.common_footer .common_f_sup,.common_footer .common_f_news{width:25%}
}
@media (min-width:576px) and (max-width:991px){
  .common_footer .common_f_quick,.common_footer .common_f_cat,.common_footer .common_f_sup{width:33.3333%}
  .common_footer .common_f_news{width:100%}
  .common_footer .common_newsletter{max-width:420px}
}
@media (max-width:575px){
  .common_footer .common_f_news{width:100%}
  .common_footer .common_newsletter{max-width:100%}
}

/* Header search box: taller pill, readable text, no divider inside, blue ring while typing */
.common_main_nav .common_search_box{height:38px;padding-left:14px;padding-right:4px;background:#fff;border:1px solid #CFD6E2;transition:border-color .2s,box-shadow .2s}
.common_main_nav .common_search_box:hover{border-color:#B4BFCF}
.common_main_nav .common_search_box:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(7,111,230,.12)}
.common_main_nav .common_search_box i{font-size:15px;color:#6B7280}
.common_main_nav .common_search_box input{height:100%;padding:0 10px;border:0;border-right:0;border-radius:0;background:transparent;box-shadow:none;font-size:13px;color:#04152C}
.common_main_nav .common_search_box input::placeholder{color:#9AA3AF}
.common_main_nav .common_search_box .btn{height:30px;padding:0 18px;border-radius:16px;font-size:13px;font-weight:600;line-height:1}
@media (min-width:992px) and (max-width:1199px){
  .common_main_nav .common_search_box{padding-right:12px}
}
@media (max-width:991px){
  .common_main_nav .common_search_box{height:42px}
  .common_main_nav .common_search_box .btn{height:34px}
}

/* =========================================================
   COURSES PAGE: Filter sidebar (partials/course_filter_panel), filter chips, count on the Filter button
   ========================================================= */
.btn-filter{position:relative;cursor:pointer}
.btn-filter-count{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--primary);color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center}

.cf-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-6px 0 18px}
.cf-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:5px 8px 5px 12px;border-radius:16px;background:#EAF3FD;border:1px solid #CFE2FB;color:var(--primary);font-size:12.5px;line-height:1.3;transition:background .15s}
.cf-chip:hover{background:#D9EAFC;color:var(--primary)}
.cf-chip i{font-size:15px;line-height:1}
.cf-chip-clear{font-size:12.5px;color:#4b5563;text-decoration:underline;margin-left:4px}
.cf-chip-clear:hover{color:var(--primary)}

.cf-panel{--bs-offcanvas-width:400px;font-family:'Poppins',sans-serif;color:#04152C}
.cf-panel-head{padding:16px 20px;border-bottom:1px solid #E3E8F0}
.cf-panel-head .offcanvas-title{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;margin:0}
.cf-panel-head .offcanvas-title i{color:var(--primary)}
.cf-panel-form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.cf-panel-body{padding:4px 20px 12px;overflow-y:auto}

.cf-group{border-bottom:1px solid #EDF1F6;padding:16px 0}
.cf-group:last-child{border-bottom:0}
.cf-group > h6,.cf-group > summary{font-size:14px;font-weight:600;color:#04152C;margin:0 0 12px}
.cf-group > summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;user-select:none}
.cf-group > summary::-webkit-details-marker{display:none}
.cf-group > summary::after{content:"\F282";font-family:"bootstrap-icons";margin-left:auto;font-size:12px;color:#6b7280;transition:transform .2s}
.cf-group[open] > summary::after{transform:rotate(180deg)}
.cf-group:not([open]) > summary{margin-bottom:0}
.cf-count{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#EAF3FD;color:var(--primary);font-size:11px;font-weight:600;line-height:20px;text-align:center}

.cf-search{position:relative;display:block;margin:0}
.cf-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;color:#6b7280}
.cf-search input{width:100%;height:40px;border:1px solid #CFD6E2;border-radius:8px;padding:0 12px 0 36px;font-size:13px;color:#04152C;outline:0;background:#fff}
.cf-search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(7,111,230,.12)}
.cf-search-sm{margin-bottom:10px}
.cf-search-sm input{height:34px;font-size:12.5px}

.cf-options{display:flex;flex-direction:column;gap:2px}
.cf-check{display:flex;align-items:center;gap:10px;padding:7px 8px;margin:0 -8px;border-radius:6px;font-size:13px;color:#374151;cursor:pointer;line-height:1.35}
.cf-check:hover{background:#F5F8FC}
.cf-check[hidden]{display:none}
.cf-check input{flex-shrink:0;width:17px;height:17px;margin:0;accent-color:var(--primary);cursor:pointer}
.cf-check span{flex:1 1 auto;min-width:0}
.cf-check em{flex-shrink:0;font-style:normal;font-size:11.5px;color:#6b7280;background:#F1F4F8;border-radius:10px;padding:1px 8px}
.cf-check.is-empty{opacity:.55}
.cf-check:has(input:checked){color:var(--primary);font-weight:500}
.cf-stars{display:inline-flex;align-items:center;gap:2px;color:#4b5563}
.cf-stars i{color:#F59E0B;font-size:13px}
.cf-none{font-size:12.5px;color:#6b7280;margin:4px 0 0}
.cf-more{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:0;border:0;background:none;font-size:12.5px;font-weight:500;color:var(--primary);cursor:pointer}
.cf-more i{transition:transform .2s}
.cf-more.is-open i{transform:rotate(180deg)}
.cf-more[hidden]{display:none}

.cf-pills{display:flex;flex-wrap:wrap;gap:8px}
.cf-pill{margin:0;cursor:pointer}
.cf-pill input{position:absolute;opacity:0;pointer-events:none}
.cf-pill span{display:inline-block;padding:6px 14px;border:1px solid #CFD6E2;border-radius:18px;font-size:12.5px;color:#374151;transition:all .15s}
.cf-pill:hover span{border-color:var(--primary);color:var(--primary)}
.cf-pill input:checked + span{background:var(--primary);border-color:var(--primary);color:#fff}
.cf-pill input:focus-visible + span{box-shadow:0 0 0 3px rgba(7,111,230,.2)}

.cf-range{position:relative;height:28px;margin:18px 4px 6px}
.cf-range-track{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:#E3E8F0}
.cf-range-fill{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--primary)}
.cf-range input[type=range]{position:absolute;left:0;top:0;width:100%;height:28px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.cf-range input[type=range]::-webkit-slider-runnable-track{background:none;height:28px}
.cf-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:20px;height:20px;margin-top:4px;border-radius:50%;background:#fff;border:2px solid var(--primary);box-shadow:0 2px 6px rgba(4,21,44,.2);cursor:grab}
.cf-range input[type=range]::-moz-range-track{background:none}
.cf-range input[type=range]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--primary);box-shadow:0 2px 6px rgba(4,21,44,.2);cursor:grab}
.cf-range-inputs{display:flex;align-items:flex-end;gap:10px}
.cf-range-inputs > i{color:#9ca3af;padding-bottom:10px}
.cf-range-inputs label{flex:1 1 0;margin:0}
.cf-range-inputs small{display:block;font-size:11px;color:#6b7280;margin-bottom:4px}
.cf-range-inputs label > span{display:flex;align-items:center;height:38px;border:1px solid #CFD6E2;border-radius:8px;padding:0 10px;background:#fff}
.cf-range-inputs label > span:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(7,111,230,.12)}
.cf-range-inputs b{font-weight:500;font-size:13px;color:#6b7280;margin-right:4px}
.cf-range-inputs input{width:100%;min-width:0;border:0;outline:0;font-size:13px;color:#04152C;background:none;-moz-appearance:textfield}
.cf-range-inputs input::-webkit-outer-spin-button,.cf-range-inputs input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.cf-panel-foot{display:flex;align-items:center;gap:12px;padding:14px 20px;border-top:1px solid #E3E8F0;background:#fff;box-shadow:0 -6px 18px rgba(4,21,44,.05)}
.cf-clear{flex:0 0 auto;padding:0 6px;font-size:13.5px;font-weight:500;color:#374151;text-decoration:underline}
.cf-clear:hover{color:var(--primary)}
.cf-apply{flex:1 1 auto;height:44px;border:0;border-radius:8px;background:var(--primary);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}
.cf-apply:hover{background:#0562CE}

@media (max-width:575px){
  .cf-panel{--bs-offcanvas-width:100%}
  .cf-panel-head,.cf-panel-foot{padding-left:16px;padding-right:16px}
  .cf-panel-body{padding-left:16px;padding-right:16px}
  .cf-panel-foot{padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .cf-chips{margin-top:0}
}

/* the floating chat / WhatsApp / scroll buttons would sit on top of the sidebar's "Show results" button */
body:has(.cf-panel.show) :is(.common_float,.common_float_btn,.common_chat_window){display:none!important}

/* Courses filter bar: one full-width row on laptops / desktops (search takes the spare room), a bit taller */
@media (min-width:1200px){
  .filter-bar{flex-wrap:nowrap;gap:10px}
  .filter-bar .btn-filter,.filter-bar .f-search,.filter-bar .f-select{height:42px;border-radius:6px}
  .filter-bar .btn-filter{padding:0 18px;flex-shrink:0}
  .filter-bar .f-search{flex:1.6 1 240px;max-width:none;min-width:0}
  .filter-bar .f-select,.filter-bar .f-select.f-sm{flex:1 1 150px;width:auto;min-width:0}
  .filter-bar #fSort{flex:1.2 1 180px;width:auto;min-width:0}
  .filter-bar .view-toggle{margin-left:0;flex-shrink:0;height:42px;align-items:center;border-radius:6px;padding:4px}
  .filter-bar .view-toggle button{height:34px;width:34px;border-radius:4px}
}
@media (min-width:577px) and (max-width:1199px){
  .filter-bar{gap:8px}
  .filter-bar .btn-filter,.filter-bar .f-search,.filter-bar .f-select{height:40px;border-radius:6px}
}

/* "Clear all" next to the filter chips: a real button (it was a small grey link, easy to miss on phones) */
.cf-chip-clear{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:5px 14px;margin-left:0;border-radius:16px;border:1px solid #F5C2C2;background:#FEF2F2;color:#B91C1C;font-size:12.5px;font-weight:500;line-height:1.3;text-decoration:none;transition:background .15s,border-color .15s}
.cf-chip-clear:hover{background:#FDE2E2;border-color:#EFA3A3;color:#991B1B}
.cf-chip-clear i{font-size:13px}
.cf-chip{min-height:30px}
@media (max-width:576px){.cf-chips{gap:6px}.cf-chip,.cf-chip-clear{min-height:32px}}

/* =========================================================
   ALL CATEGORIES PAGE (frontend/lms/all_categories)  —  prefix all_categories_page_
   ========================================================= */
.all_categories_page_hero{background:#E7F3FD;padding:34px 0 46px;text-align:center}
.all_categories_page_crumbs{display:flex;justify-content:center;align-items:center;gap:8px;font-size:12.5px;color:#4b5563;margin-bottom:14px}
.all_categories_page_crumbs a{color:#4b5563}
.all_categories_page_crumbs a:hover,.all_categories_page_crumbs span{color:var(--primary)}
.all_categories_page_crumbs i{font-size:9px;color:#9ca3af}
.all_categories_page_hero h1{font-size:40px;font-weight:600;color:#04152C;margin:0 0 8px;line-height:1.2}
.all_categories_page_hero > .container > p{font-size:15px;color:#374151;margin:0 auto;max-width:560px}

.all_categories_page_search{display:flex;align-items:center;max-width:600px;height:52px;margin:26px auto 0;padding:5px 5px 5px 18px;background:#fff;border:1px solid #CFE2FB;border-radius:28px;box-shadow:0 12px 32px rgba(7,111,230,.10);transition:border-color .2s,box-shadow .2s}
.all_categories_page_search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(7,111,230,.12),0 12px 32px rgba(7,111,230,.10)}
.all_categories_page_search i{font-size:16px;color:#6b7280}
.all_categories_page_search input{flex:1 1 auto;min-width:0;height:100%;border:0;outline:0;padding:0 12px;font-size:14px;color:#04152C;background:transparent}
.all_categories_page_search button{flex-shrink:0;height:100%;padding:0 26px;border:0;border-radius:22px;background:var(--primary);color:#fff;font-size:14px;font-weight:600;transition:background .2s}
.all_categories_page_search button:hover{background:#0562CE}

.all_categories_page_stats{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.all_categories_page_stats > div{min-width:130px;padding:12px 18px;background:#fff;border:1px solid #D6E6FA;border-radius:12px}
.all_categories_page_stats strong{display:block;font-size:22px;font-weight:600;color:var(--primary);line-height:1.2}
.all_categories_page_stats span{font-size:12px;color:#4b5563}

.all_categories_page_body{padding:34px 0 56px;background:#fff}
.all_categories_page_toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:20px}
.all_categories_page_result{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:14px;color:#4b5563}
.all_categories_page_result b{font-weight:600;color:#04152C}
.all_categories_page_sort{display:flex;align-items:center;gap:10px;margin:0}
.all_categories_page_sort label{font-size:13px;color:#4b5563;white-space:nowrap}
.all_categories_page_sort .form-select{height:42px;width:190px;border:1px solid #6b7c96;border-radius:6px;font-size:13px;color:#222;box-shadow:none}
.all_categories_page_sort .form-select:focus{border-color:var(--primary)}

.all_categories_page_grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.all_categories_page_card{display:flex;align-items:center;gap:14px;padding:16px;background:#fff;border:1px solid #DCE3EC;border-radius:12px;color:#04152C;transition:border-color .2s,box-shadow .2s,transform .2s}
.all_categories_page_card:hover{border-color:var(--primary);box-shadow:0 10px 26px rgba(7,111,230,.12);transform:translateY(-2px);color:#04152C}
.all_categories_page_logo{flex-shrink:0;width:60px;height:60px;border-radius:12px;background:#E7F3FD;display:grid;place-items:center;overflow:hidden}
.all_categories_page_logo img{width:100%;height:100%;object-fit:contain;padding:8px;background:#fff}
.all_categories_page_logo b{font-size:19px;font-weight:700;color:var(--primary);letter-spacing:.02em}
.all_categories_page_text{flex:1 1 auto;min-width:0}
.all_categories_page_text strong{display:block;font-size:15px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.all_categories_page_text small{display:inline-block;margin-top:5px;padding:2px 10px;border-radius:10px;background:#EAF3FD;color:var(--primary);font-size:12px;font-weight:500}
.all_categories_page_card.is-empty .all_categories_page_text small{background:#F1F4F8;color:#6b7280}
.all_categories_page_arrow{flex-shrink:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#F3F7FC;color:#4b5563;font-size:14px;transition:background .2s,color .2s}
.all_categories_page_card:hover .all_categories_page_arrow{background:var(--primary);color:#fff}

.all_categories_page_body .pager{margin-top:30px}

.all_categories_page_empty{text-align:center;padding:56px 16px;border:1px dashed #CFD6E2;border-radius:14px;background:#FAFCFF}
.all_categories_page_empty > span{width:72px;height:72px;border-radius:50%;background:#E7F3FD;color:var(--primary);display:inline-grid;place-items:center;font-size:28px;margin-bottom:14px}
.all_categories_page_empty h3{font-size:19px;font-weight:600;color:#04152C;margin:0 0 6px}
.all_categories_page_empty p{font-size:14px;color:#6b7280;margin:0 0 18px}

@media (max-width:1199px){.all_categories_page_grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:991px){
  .all_categories_page_hero h1{font-size:32px}
  .all_categories_page_grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:575px){
  .all_categories_page_hero{padding:24px 0 32px}
  .all_categories_page_hero h1{font-size:26px}
  .all_categories_page_hero > .container > p{font-size:13.5px}
  .all_categories_page_search{height:48px;margin-top:20px;padding-left:14px}
  .all_categories_page_search input{font-size:13px;padding:0 8px}
  .all_categories_page_search button{padding:0 16px;font-size:13px}
  .all_categories_page_stats{gap:8px;margin-top:20px}
  .all_categories_page_stats > div{flex:1 1 0;min-width:0;padding:10px 6px}
  .all_categories_page_stats strong{font-size:18px}
  .all_categories_page_body{padding:24px 0 40px}
  .all_categories_page_toolbar{flex-direction:column;align-items:stretch}
  .all_categories_page_sort{justify-content:space-between}
  .all_categories_page_sort .form-select{flex:1 1 auto;width:auto}
  .all_categories_page_grid{grid-template-columns:1fr;gap:10px}
  .all_categories_page_card{padding:12px 14px}
  .all_categories_page_logo{width:52px;height:52px}
  .all_categories_page_body .pager{flex-wrap:wrap}
}
/* same left / right edges as the header and the courses page */
@media (min-width:992px){.all_categories_page_hero .container,.all_categories_page_body .container{padding-left:max(1.5rem,50% - 680px);padding-right:max(1.5rem,50% - 728px);max-width:none!important}}

/* Header user menu: placed by CSS (data-bs-display="static"), not Popper. Desktop: opens under the name, right aligned.
   Phone / tablet menu: it opens as a full-width box under the heart / cart / name row.
   (dropdown-menu-end there pushed it off the left edge of the screen) */
.common_nav_actions .dropdown{position:relative}
@media (max-width:991px){
  /* the open menu sits in the page flow under the icon row: the collapsed navbar clips anything floating over it */
  .common_nav_actions{flex-wrap:wrap;gap:16px!important;padding:12px 0 6px;margin-top:8px;border-top:1px solid #EDF1F6}
  .common_nav_actions .dropdown{display:contents}
  .common_nav_actions .common_user_btn{margin-left:auto;padding:4px 10px 4px 4px;border:1px solid #DCE3EC;border-radius:22px;background:#fff}
  .common_nav_actions .common_user_btn span{max-width:140px}
  .common_nav_actions .common_user_menu[data-bs-popper]{position:static;flex:1 1 100%;order:10;width:100%;min-width:0;margin:0;border:1px solid #DCE3EC;border-radius:10px;box-shadow:none}
  .common_nav_actions .common_user_menu .dropdown-item{padding:10px 16px;font-size:14px}
}

/* Home hero: search box for phones only (the navbar search is hidden below 768px). Suggestions: common.js */
.home_page_mobile_search{display:flex;align-items:center;width:100%;max-width:520px;height:50px;margin:18px auto 18px;padding:4px 4px 4px 16px;background:#fff;border:1px solid #CFE2FB;border-radius:26px;box-shadow:0 10px 26px rgba(7,111,230,.12);transition:border-color .2s,box-shadow .2s}
.home_page_mobile_search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(7,111,230,.14),0 10px 26px rgba(7,111,230,.12)}
.home_page_mobile_search i{font-size:16px;color:#6b7280}
.home_page_mobile_search input{flex:1 1 auto;min-width:0;height:100%;border:0;outline:0;background:transparent;padding:0 10px;font-size:14px;color:#04152C}
.home_page_mobile_search input::placeholder{color:#9AA3AF}
.home_page_mobile_search .btn{flex-shrink:0;height:100%;padding:0 18px;border-radius:22px;font-size:14px;font-weight:600}
@media (max-width:767px){.home_page_mobile_search{display:flex!important}}

/* Home hero stats on phones: the three side by side in one row (they were stacked), smaller icon and text */
@media (max-width:576px){
  .home_page_hero .home_page_stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px!important;flex-direction:row;margin-top:22px}
  .home_page_hero .home_page_stat{width:auto;min-width:0;gap:6px;justify-content:center}
  .home_page_hero .home_page_stat img{width:26px;flex-shrink:0}
  .home_page_hero .home_page_stat > div{min-width:0;text-align:left}
  .home_page_hero .home_page_stat h5{font-size:13px;line-height:1.2}
  .home_page_hero .home_page_stat p{font-size:10px;line-height:1.25;white-space:normal}
}
@media (max-width:389px){
  .home_page_hero .home_page_stat{flex-direction:column;gap:4px;text-align:center}
  .home_page_hero .home_page_stat > div{text-align:center}
}

/* Footer newsletter while it is sending (common.js): spinner in the button, "Please wait" line, no second click */
.common_newsletter.is-busy{opacity:.85}
.common_newsletter.is-busy input{background:#F5F8FC;cursor:wait}
.common_newsletter button:disabled{cursor:wait;opacity:1}
.common_newsletter button .spinner-border{width:16px;height:16px;border-width:2px;vertical-align:middle}
.common_nl_wait{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:12.5px;color:var(--primary)}
.common_nl_wait[hidden]{display:none}
.common_nl_wait .spinner-border{width:14px;height:14px;border-width:2px}

/* Certificate page on phones: the three trust points side by side in one row (they were stacked), smaller */
@media (max-width:767px){
  .certificate_page_trust{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start!important;gap:0!important;margin-top:18px}
  .certificate_page_trust>div{flex-direction:column;align-items:center;gap:6px;padding:0 6px!important;text-align:center;font-size:10.5px;line-height:1.35}
  .certificate_page_trust>div+div{border-left:1px solid #D6DBE4!important}
  .certificate_page_ticon{width:34px;height:34px;font-size:16px}
}

/* Certificate search while it is loading (common.js): spinner + "Please wait..." in the button */
.certificate_page_btn:disabled{opacity:.85;cursor:wait}
.certificate_page_btn .spinner-border{width:15px;height:15px;border-width:2px;margin-right:6px;vertical-align:-2px}
#certForm.is-busy .certificate_page_input{background:#F5F8FC}
#certForm.is-busy input{cursor:wait}

/* About > Trusted By: the logo grid fills its column (it was pinned right, leaving a gap after the text) and every
   logo is sized from the grid's width (cqw), so it stays inside its box on any screen */
.about_page_logos{container-type:inline-size;max-width:none;width:100%;margin:0;gap:12px}
.about_page_logo{height:auto;aspect-ratio:2.2/1;min-height:0;padding:0 6%;border:1px solid #E3EAF3;border-radius:10px;overflow:hidden;gap:1.2cqw;transition:box-shadow .2s,transform .2s}
.about_page_logo:hover{box-shadow:0 8px 22px rgba(4,21,44,.08);transform:translateY(-2px)}
.about_page_logo_netflix{font-size:6.4cqw;padding-top:.6cqw}
.about_page_logo_youtube{font-size:3.9cqw;letter-spacing:-.1cqw;gap:.8cqw}
.about_page_logo_youtube i{font-size:5.6cqw}
.about_page_logo_google{font-size:5.1cqw;letter-spacing:-.18cqw}
.about_page_logo_microsoft{font-size:3.5cqw;letter-spacing:-.08cqw;gap:1cqw}
.about_page_ms_grid{grid-template-columns:repeat(2,2.2cqw);gap:.25cqw}
.about_page_ms_grid i{width:2.2cqw;height:2.2cqw}
.about_page_logo_verizon{font-size:4.4cqw;letter-spacing:-.18cqw}
.about_page_vz_check{font-size:3.1cqw;margin:1.1cqw 0 0 -.4cqw}
.about_page_logo_lenovo{font-size:4.8cqw;letter-spacing:-.18cqw}
@media (max-width:991px){.about_page_logos{max-width:640px;margin:8px auto 0}}
@media (max-width:575px){.about_page_logos{gap:8px}.about_page_logo{border-radius:8px;aspect-ratio:1.9/1}}
.about_page_vz_check{align-self:center;position:relative;top:-1.5cqw;margin:0 0 0 -.3cqw}

/* About > Our Story: less empty space between the text and the picture (the 541px picture sat at the far right of a
   half-width column) and a little less padding on top */
.about_page_story{padding-top:var(--section-gap)}
@media (min-width:992px){
  .about_page_story .about_page_lead{max-width:540px}
  .about_page_story_img{width:100%;max-width:640px;margin-left:0;margin-right:auto}
}

/* About > Our Mission: same fix as Our Story (the 507px picture sat at the far right, leaving a wide gap) */
.about_page_mission{padding-top:var(--section-gap)}
@media (min-width:992px){
  .about_page_mission .about_page_desc{max-width:520px}
  .about_page_mission .col-lg-6.text-lg-end{text-align:left!important}
  .about_page_mission_img{display:block;width:100%;max-width:600px;margin:0 auto 0 0}
}