/* 
 * Объединенный CSS файл компонентов
 * Создан: 04.09.2025
 * Включает: mobile-cards.css, course-cards.css, modal-enhancements.css, boost-modal-mobile.css
 */

/* ===== MOBILE CARDS STYLES ===== */
@media (max-width:768px){
#courses .course-list .card{width:90vw;margin:0 auto 20px;padding:15px}
#courses .course-list .main-text-title{min-height:auto}
#courses .course-list .course-title{font-size:16px;line-height:1.4}
#courses .course-list .price-container,#courses .course-list .time-container{font-size:14px}
#courses .course-list .button,#courses .course-list .modal-cat{width:100%;max-width:280px;margin:0 auto 10px;display:block;text-align:center}
#courses .course-list .link{text-align:center;margin-top:10px}
}

/* ===== COURSE CARDS STYLES ===== */
:root{
--page-padding:15px;
--card-padding:25px;
--inner-padding:20px;
--card-border-radius:10px;
--primary-color:#1f84ff;
--border-color:#dae2ed;
--text-gray:#b9b9ba
}

#courses,.course{
width:100%!important;
max-width:1400px!important;
margin:0 auto!important;
padding:0 var(--page-padding)!important;
box-sizing:border-box!important
}

.course__title{
width:100%!important;
text-align:center!important;
margin:20px 0!important;
font-size:24px!important;
line-height:1.4!important;
color:#333!important
}

#courses>.container,.course-list,.course>.container,.courses-wrapper,.noswiper{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0!important;
background:none!important;
box-sizing:border-box!important
}

.courses-grid{
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
gap:30px!important;
margin-top:20px!important;
width:100%!important;
box-sizing:border-box!important
}

#courses .courses-wrapper .course-list .noswiper .course-item{
width:100%!important;
margin:0!important;
float:none!important
}

#dynamic-courses-kpk,#dynamic-courses-kpp{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:30px;
width:100%;
box-sizing:border-box!important
}

@media (max-width:992px){
#dynamic-courses-kpk,#dynamic-courses-kpp{grid-template-columns:repeat(2,1fr);gap:20px}
}

@media (max-width:768px){
#dynamic-courses-kpk,#dynamic-courses-kpp{grid-template-columns:1fr;gap:25px}
}

.dynamic-courses-container .card,.dynamic-courses-container .course-item,.kpp-course-list .course-item,.section_ab_ui_card .card,.section_ab_ui_card .course-item{
background-color:#fff;
padding:var(--card-padding) 0;
border:1px solid var(--border-color);
border-radius:var(--card-border-radius);
display:flex;
flex-direction:column;
height:100%;
width:100%;
box-sizing:border-box!important;
margin:0!important
}

.dynamic-courses-container .card>*,.dynamic-courses-container .course-item>*,.kpp-course-list .course-item>*,.section_ab_ui_card .card>*,.section_ab_ui_card .course-item>*{
padding-left:var(--inner-padding);
padding-right:var(--inner-padding);
box-sizing:border-box!important
}

.dynamic-courses-container .main-text-title,.kpp-course-list .main-text-title,.section_ab_ui_card .main-text-title{
min-height:90px;
margin-bottom:15px;
flex-grow:1
}

.dynamic-courses-container .main-text-title p,.section_ab_ui_card .main-text-title p{
font-weight:400;
color:#666
}

.dynamic-courses-container .course-title,.section_ab_ui_card .course-title{
font-weight:700;
margin:10px 0;
color:#333;
text-transform:uppercase;
font-size:16px;
line-height:1.4
}

.dynamic-courses-container .prof-course-title,.section_ab_ui_card .prof-course-title{
font-weight:700;
margin:10px 0;
color:var(--primary-color);
position:relative;
padding-left:calc(var(--inner-padding) + 22px);
font-size:16px;
line-height:1.4
}

.dynamic-courses-container .prof-course-title:before,.section_ab_ui_card .prof-course-title:before{
content:"";
position:absolute;
top:0;
left:var(--inner-padding);
width:2px;
height:100%;
background-color:var(--primary-color)
}

.dynamic-courses-container .details-container,.kpp-course-list .details-container,.section_ab_ui_card .details-container{
display:flex;
justify-content:space-between;
align-items:center;
margin:10px 0;
padding:10px var(--inner-padding);
border-top:none;
margin-top:auto
}

.dynamic-courses-container .time-container,.kpp-course-list .time-container,.section_ab_ui_card .time-container{
display:flex;
align-items:center;
color:gray;
font-size:16px
}

.dynamic-courses-container .time-container svg,.section_ab_ui_card .time-container svg{
margin-right:9px;
width:18px;
height:18px
}

.dynamic-courses-container .price-container,.kpp-course-list .price-container,.section_ab_ui_card .price-container{
text-align:right
}

.dynamic-courses-container .old-price,.kpp-course-list .old-price,.section_ab_ui_card .old-price{
text-decoration:line-through;
color:var(--text-gray);
font-size:14px
}

.dynamic-courses-container .new-price,.kpp-course-list .new-price,.section_ab_ui_card .new-price{
color:var(--primary-color);
font-size:20px;
font-weight:700
}

.dynamic-courses-container .button,.dynamic-courses-container .modal-cat,.kpp-course-list .button,.kpp-course-list .modal-cat,.section_ab_ui_card .button,.section_ab_ui_card .modal-cat{
background:linear-gradient(110deg,#3f76b2,#002f80);
color:#fff;
padding:12px 20px;
border-radius:30px;
border:none;
width:calc(100% - (var(--inner-padding) * 2));
font-size:14px;
cursor:pointer;
text-align:center;
margin:0 auto 10px;
transition:background .3s ease;
text-transform:uppercase;
font-weight:700;
text-decoration:none;
display:block
}

.dynamic-courses-container .button:hover,.dynamic-courses-container .modal-cat:hover,.kpp-course-list .button:hover,.kpp-course-list .modal-cat:hover,.section_ab_ui_card .button:hover,.section_ab_ui_card .modal-cat:hover{
background:linear-gradient(180deg,#002f80,#3f76b2)
}

.dynamic-courses-container .link,.kpp-course-list .link,.section_ab_ui_card .link{
display:block;
text-decoration:none;
color:#333;
font-size:12px;
text-align:center;
font-weight:700;
transition:color .3s ease;
text-transform:uppercase;
margin-bottom:15px
}

.dynamic-courses-container .link:hover,.kpp-course-list .link:hover,.section_ab_ui_card .link:hover{
color:var(--primary-color)
}

.dynamic-courses-container .col-md-4,.section_ab_ui_card .col-md-4{
width:100%!important;
max-width:none!important;
padding:0!important;
margin:0!important;
box-sizing:border-box!important
}

@media (max-width:992px){
#dynamic-courses-kpk,#dynamic-courses-kpp,.courses-grid,.dynamic-courses-container{grid-template-columns:repeat(2,1fr)!important;gap:20px!important}
}

@media (max-width:768px){
:root{--page-padding:10px;--inner-padding:15px}
.course__title{font-size:20px!important;padding:0!important;margin:15px 0!important;width:100vw!important;margin-left:calc(-1 * var(--page-padding))!important;margin-right:calc(-1 * var(--page-padding))!important}
#dynamic-courses-kpk,#dynamic-courses-kpp,.courses-grid,.dynamic-courses-container{grid-template-columns:1fr!important;gap:25px!important}
.dynamic-courses-container .card,.dynamic-courses-container .course-item,.section_ab_ui_card .card,.section_ab_ui_card .course-item{padding-top:20px;padding-bottom:20px;margin:0 auto!important;width:calc(100% - 20px)!important}
.dynamic-courses-container .main-text-title,.section_ab_ui_card .main-text-title{min-height:auto}
.dynamic-courses-container .price-container,.dynamic-courses-container .time-container,.section_ab_ui_card .price-container,.section_ab_ui_card .time-container{font-size:14px}
.dynamic-courses-container .button,.dynamic-courses-container .modal-cat,.section_ab_ui_card .button,.section_ab_ui_card .modal-cat{width:calc(100% - (var(--inner-padding) * 2));margin:0 auto 10px}
.dynamic-courses-container .link,.section_ab_ui_card .link{margin-bottom:10px}
}

/* ===== MODAL ENHANCEMENTS ===== */
#notiblock{position:fixed!important;z-index:10000!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;-webkit-transform:translate(-50%,-50%)!important;-moz-transform:translate(-50%,-50%)!important;margin-left:0!important}
#notiblock,.radioHour+label{animation:none!important;transition:none!important}
.radioHour+label{visibility:visible!important;opacity:1!important}
#notiblock .btn,.koquiz-modal,.koquiz-modal-show,.koquiz-modal .btn,.modal-box,.swal2-container{animation:none!important;transition:none!important}
.modal-cat{cursor:pointer!important;transition:background-color .2s ease,transform .2s ease!important}

@media (max-width:768px){
#notiblock{width:90%!important;max-width:400px!important;margin-left:0!important;transform:translate(-50%,-50%)!important;-webkit-transform:translate(-50%,-50%)!important;-moz-transform:translate(-50%,-50%)!important}
#notiblock .noticontent{padding:15px!important;font-size:14px!important}
}

#diplom-selecter,#trainings-modal{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;-webkit-transform:translate(-50%,-50%)!important;-moz-transform:translate(-50%,-50%)!important;z-index:1000000!important;margin-left:0!important}

/* ===== BOOST MODAL MOBILE ===== */
@media (max-width:768px){
#notiblock{width:95%!important;max-width:500px!important;margin-left:0!important;transform:translate(-50%,-50%)!important;-webkit-transform:translate(-50%,-50%)!important;-moz-transform:translate(-50%,-50%)!important;padding:20px!important}
#notiblock .noticontent{padding:20px!important;font-size:16px!important}
.boost-confirmation-modal h3{font-size:22px!important;margin-bottom:20px!important;line-height:1.3!important}
.boost-confirmation-modal p{font-size:16px!important;line-height:1.5!important;margin-bottom:15px!important}
.boost-confirmation-modal ul{margin-left:20px!important;margin-bottom:15px!important}
.boost-confirmation-modal li{font-size:15px!important;line-height:1.4!important;margin-bottom:8px!important}
.boost-confirmation-modal strong{font-size:17px!important}
.boost-confirmation-modal em{font-size:14px!important;line-height:1.4!important}
.boost-confirmation-modal .btn{padding:12px 20px!important;font-size:16px!important;margin:0 8px!important;min-width:120px!important}
.boost-confirmation-modal .btn-primary,.boost-confirmation-modal .btn-secondary{padding:12px 18px!important}
.boost-confirmation-modal .fa-graduation-cap{font-size:56px!important;margin-bottom:25px!important}
.boost-confirmation-content{padding:25px!important}
}

@media (max-width:480px){
#notiblock{width:98%!important;max-width:450px!important;padding:15px!important}
#notiblock .noticontent{padding:15px!important;font-size:15px!important}
.boost-confirmation-modal h3{font-size:20px!important;margin-bottom:18px!important}
.boost-confirmation-modal p{font-size:15px!important;margin-bottom:12px!important}
.boost-confirmation-modal li{font-size:14px!important;margin-bottom:6px!important}
.boost-confirmation-modal strong{font-size:16px!important}
.boost-confirmation-modal em{font-size:13px!important}
.boost-confirmation-modal .btn{padding:10px 16px!important;font-size:15px!important;margin:0 6px!important;min-width:100px!important}
.boost-confirmation-modal .fa-graduation-cap{font-size:48px!important;margin-bottom:20px!important}
.boost-confirmation-content{padding:20px!important}
}

@media (min-width:769px) and (max-width:1024px){
#notiblock{width:85%!important;max-width:600px!important;padding:25px!important}
.boost-confirmation-modal h3{font-size:24px!important}
.boost-confirmation-modal p{font-size:17px!important}
.boost-confirmation-modal li{font-size:16px!important}
.boost-confirmation-modal .btn{padding:12px 25px!important;font-size:17px!important}
}