/*
 * CPQ Frontend Responsive Separation v82
 * CSS-only frontend patch.
 * - Mobile bottom navigation is hidden on desktop.
 * - Mobile "My Courses" cards no longer overflow the viewport.
 * - Desktop course catalogue returns to a readable 3-column layout.
 */

/* Safe default: a mobile-only control must never appear before a media query applies. */
.cpq-mobile-bottom-nav{
  display:none!important;
}

@media (min-width:992px){
  /* Complete separation between desktop and app-style mobile controls. */
  .cpq-mobile-bottom-nav,
  .cpq-mobile-drawer-shell,
  body .cpq-account-mobile-tabs{
    display:none!important;
  }

  body.cpq-user-logged-in{
    padding-bottom:0!important;
  }

  /* The old v21/v22 rule forced four narrow cards on large screens.
     Restore the intended Bootstrap 3-column desktop catalogue. */
  .cpq-courses-clean-page>.container{
    width:100%!important;
    max-width:1320px!important;
  }
  .cpq-courses-clean-page .courses-card>.row{
    align-items:stretch!important;
    row-gap:26px!important;
  }
  .cpq-courses-clean-page .courses-card .col-lg-4{
    display:flex!important;
    width:33.333333%!important;
    max-width:33.333333%!important;
    margin-bottom:0!important;
  }
  .cpq-courses-clean-page .courses-card .courses-card-body{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    border:1px solid #e2e8f0!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 10px 28px rgba(15,35,65,.07)!important;
  }
  .cpq-courses-clean-page .courses-card .courses-card-image{
    width:100%!important;
    height:230px!important;
    min-height:230px!important;
    overflow:hidden!important;
    background:#f8fafc!important;
  }
  .cpq-courses-clean-page .courses-card .courses-card-image>img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:contain!important;
    padding:12px!important;
  }
  .cpq-courses-clean-page .courses-card .courses-text{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    min-width:0!important;
    padding:16px!important;
  }
  .cpq-courses-clean-page .courses-card .courses-text h5{
    min-height:52px!important;
    margin:0 0 10px!important;
    overflow-wrap:anywhere!important;
    font-size:17px!important;
    line-height:1.55!important;
  }
  .cpq-courses-clean-page .courses-card .courses-price-border{
    margin-top:auto!important;
  }
}

@media (min-width:992px) and (max-width:1199.98px){
  .cpq-courses-clean-page>.container{
    max-width:1120px!important;
  }
  .cpq-courses-clean-page .courses-card .courses-card-image{
    height:205px!important;
    min-height:205px!important;
  }
}

@media (max-width:991.98px){
  /* Re-enable the app navigation only inside the phone/tablet breakpoint. */
  .cpq-mobile-bottom-nav{
    display:grid!important;
  }

  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  /* Prevent floating support from covering course actions or the bottom navigation. */
  #cpq-floating-whatsapp{
    right:14px!important;
    bottom:calc(var(--cpq-app-bottom-height,68px) + env(safe-area-inset-bottom,0px) + 14px)!important;
  }
}

@media (max-width:767.98px){
  /* My Courses page: remove Bootstrap negative gutters and inherited desktop margins. */
  .wish-list-body>.container,
  .my-course-1-full-body,
  .my-course-1-full-body>.row{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .wish-list-body>.container{
    padding-right:12px!important;
    padding-left:12px!important;
  }
  .my-course-1-full-body>.row{
    display:block!important;
    margin-right:0!important;
    margin-left:0!important;
  }
  .my-course-1-full-body>.row>[class*="col-"]{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 14px!important;
    padding:0!important;
  }
  .my-course-1-full-body h1{
    margin:0 0 14px!important;
    color:#0b315d!important;
    font-size:25px!important;
    line-height:1.35!important;
  }

  .my-course-1-full-body .my-course-1-full-body-card{
    direction:rtl!important;
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:0!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:210px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid #e3eaf3!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 9px 24px rgba(12,42,78,.07)!important;
  }
  .my-course-1-full-body .my-course-1-full-body-card .my-course-1-img{
    grid-column:1!important;
    width:112px!important;
    min-width:112px!important;
    height:100%!important;
    min-height:210px!important;
    margin:0!important;
    overflow:hidden!important;
    background:#f6f8fc!important;
  }
  .my-course-1-full-body .my-course-1-full-body-card .my-course-1-img img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:210px!important;
    max-height:none!important;
    margin:0!important;
    padding:9px!important;
    object-fit:contain!important;
    border-radius:0!important;
    background:#f6f8fc!important;
  }
  .my-course-1-full-body .my-course-1-full-body-card .my-course-1-text{
    grid-column:2!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:14px 13px!important;
    overflow:hidden!important;
  }
  .my-course-1-full-body .my-course-1-full-body-card .my-course-1-text-heading{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 30px!important;
    align-items:start!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
  }
  .my-course-1-full-body .my-course-1-full-body-card .my-course-1-text-heading h3{
    min-width:0!important;
    margin:0!important;
    color:#092b54!important;
    font-size:17px!important;
    font-weight:800!important;
    line-height:1.5!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  .my-course-1-full-body .my-course-1-full-body-card .child-icon{
    width:30px!important;
    min-width:30px!important;
  }
  .my-course-1-full-body .my-course-1-full-body-card .child-icon .btn{
    width:30px!important;
    min-width:30px!important;
    min-height:32px!important;
    margin:0!important;
    padding:2px!important;
    border:0!important;
    background:transparent!important;
    color:#718096!important;
  }

  .my-course-1-full-body .my-course-1-lesson-text{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:5px 10px!important;
    width:100%!important;
    margin:11px 0 10px!important;
  }
  .my-course-1-full-body .my-course-1-lesson-text .icon-1{
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    margin:0!important;
  }
  .my-course-1-full-body .my-course-1-lesson-text .icon-1 p{
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    margin:0!important;
    color:#5f6f83!important;
    font-size:11.5px!important;
    line-height:1.4!important;
    white-space:normal!important;
  }

  .my-course-1-full-body .my-course-1-skill{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    margin:0 0 4px!important;
  }
  .my-course-1-full-body .my-course-1-skill .skill-bar-container{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
  }
  .my-course-1-full-body .my-course-1-skill p{
    flex:0 0 auto!important;
    margin:0!important;
    color:#52657c!important;
    font-size:11px!important;
    line-height:1!important;
  }

  .my-course-1-full-body .my-course-1-last{
    display:block!important;
    width:100%!important;
    margin-top:8px!important;
  }
  .my-course-1-full-body .my-course-1-last .icon-img{
    display:none!important;
  }
  .my-course-1-full-body .my-course-1-btn{
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  .my-course-1-full-body .my-course-1-btn .btn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    min-height:43px!important;
    margin:0!important;
    padding:9px 10px!important;
    border-radius:12px!important;
    background:linear-gradient(135deg,#0b3b70,#08294e)!important;
    color:#fff!important;
    font-size:14px!important;
    font-weight:850!important;
    white-space:normal!important;
  }

  /* Public course catalogue on phones: one clean card per row. */
  .cpq-courses-clean-page .courses-card>.row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    margin:0!important;
  }
  .cpq-courses-clean-page .courses-card>.row>[class*="col-"]{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  .cpq-courses-clean-page .courses-card .courses-card-body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
}

@media (max-width:390px){
  .my-course-1-full-body .my-course-1-full-body-card{
    grid-template-columns:96px minmax(0,1fr)!important;
    min-height:198px!important;
  }
  .my-course-1-full-body .my-course-1-full-body-card .my-course-1-img{
    width:96px!important;
    min-width:96px!important;
    min-height:198px!important;
  }
  .my-course-1-full-body .my-course-1-full-body-card .my-course-1-img img{
    min-height:198px!important;
    padding:7px!important;
  }
  .my-course-1-full-body .my-course-1-full-body-card .my-course-1-text{
    padding:12px 10px!important;
  }
  .my-course-1-full-body .my-course-1-full-body-card .my-course-1-text-heading h3{
    font-size:15.5px!important;
  }
  .my-course-1-full-body .my-course-1-lesson-text .icon-1 p{
    font-size:10.5px!important;
  }
}

@media print{
  .cpq-mobile-bottom-nav{
    display:none!important;
  }
}