/* ==========================================================
   Мобилна версия на emk-service.com
   Важи САМО за екрани до 980px (телефони и таблети).
   На компютър сайтът остава абсолютно непроменен.
   Изключване: махнете реда с mobile.css от layout.php
   ========================================================== */

@media screen and (max-width: 980px) {

  /* ---------- Основа ---------- */
  html, body { min-width: 0 !important; width: 100% !important; overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }
  .wrapper, .wrapper *, header, main, footer, section, #main { max-width: 100% !important; box-sizing: border-box; }
  img { height: auto !important; }
  .wrapper { width: auto !important; padding-left: 12px !important; padding-right: 12px !important; float: none !important; }
  header, main#main, footer, section.indexSliderContent { width: 100% !important; float: none !important; }
  #main.hasLeftCol .mainContent, #main.hasRightCol .mainContent,
  .mainContent, .leftCol, .rightCol, aside,
  .indexTabsContent, .indexFastSearch, .mainSlider {
    width: 100% !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important;
  }
  table { width: 100% !important; }
  input, select, textarea { font-size: 16px !important; }
  .mainContent p, .mainContent .textPage li, section.textPage p { font-size: 15px !important; line-height: 1.5 !important; }
  .mainContent h1 { float: none !important; clear: both; width: 100% !important; height: auto !important; line-height: 1.25 !important; margin: 10px 0 !important; }

  /* ---------- Хедър ---------- */
  header, header .wrapper { height: auto !important; overflow: visible !important; }
  header .logo { width: auto !important; float: none !important; text-align: center; margin: 10px auto !important; display: block; }
  header .logo img { max-width: 240px !important; }
  header .headerRight { float: none !important; width: 100% !important; display: flex; justify-content: center; gap: 8px; margin: 6px 0 !important; position: static !important; }
  header .headerRight a.calculatorHeaderBtn { width: auto !important; white-space: nowrap; padding-right: 12px !important; }
  header nav.mainNav { width: 100% !important; float: none !important; height: auto !important; background: none !important; margin-top: 6px !important; position: static !important; }
  header nav.mainNav ul { width: 100% !important; float: none !important; height: auto !important; display: flex; flex-wrap: wrap; background: #6d6d6d !important; border-radius: 4px; overflow: hidden; }
  header nav.mainNav ul li { float: none !important; flex: 1 1 33%; text-align: center; background-image: none !important; }
  header nav.mainNav ul li a { float: none !important; width: 100% !important; height: auto !important; line-height: 1.3 !important; padding: 10px 4px !important; display: block; font-size: 15px !important; }
  header nav.mainNav ul li a span.text { top: 0 !important; position: static !important; color: #fff !important; }
  header nav.mainNav ul li a span.hover { display: none !important; }
  header nav.mainNav .headerSearch { width: 100% !important; float: none !important; margin: 8px 0 !important; position: static !important; }
  header nav.mainNav .headerSearch input.searchInput { width: calc(100% - 44px) !important; }

  /* ---------- Начална страница: слайдър, калкулатор, колони ---------- */
  section.indexSliderContent { height: auto !important; padding-top: 10px !important; margin-top: 0 !important; }
  section.indexSliderContent .indexFastSearch,
  section.indexSliderContent .indexFastSearch h2,
  section.indexSliderContent .indexFastSearch form,
  section.indexSliderContent .indexFastSearch .selectBox { width: 100% !important; float: none !important; }
  .mainSlider, .mainSlider .slidesjs-container { height: auto !important; }
  .mainSlider .slidesjs-container { aspect-ratio: 636 / 219; }
  .mainSlider .slidesjs-control { height: 100% !important; }
  .mainSlider .slidesjs-container, .mainSlider .slidesjs-control, .mainSlider .slidesjs-slide { width: 100% !important; }
  .mainSlider .slidesjs-slide img { width: 100% !important; height: auto !important; }

  .selectBox a.openSelect { width: 100% !important; box-sizing: border-box; }
  .selectBox ul.subSelect { width: 100% !important; }
  a.calculateServicesBtn { white-space: nowrap !important; width: auto !important; padding-right: 14px !important; float: right !important; }

  .indexServicesCol, .indexServicesCol.right { width: 100% !important; float: none !important; margin: 0 0 15px 0 !important; }
  .indexServicesCol .jspContainer, .indexServicesCol .jspPane, .indexServicesCol ul { width: 100% !important; }

  .indexTabsContent .ui-tabs ul.ui-tabs-nav, .indexTabsContent .ui-tabs .ui-tabs-panel,
  .sliderScrollOne, .sliderScrollOne .slideContent, .sliderScrollOne .slideContent .indexNews, .caroufredsel_wrapper {
    width: 100% !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important;
  }
  .indexTabsContent, .indexTabsContent .ui-tabs, .indexTabsContent .ui-tabs .ui-tabs-panel,
  .caroufredsel_wrapper, .sliderScrollOne, .sliderScrollOne .slideContent { height: auto !important; }

  /* ---------- Калкулатор ---------- */
  .mainContent .serviceCalculatorBox, .mainContent .serviceResultBox { width: 100% !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  .mainContent .serviceCalculatorBox { height: auto !important; padding: 12px !important; overflow: hidden; }
  .mainContent .serviceCalculatorBox .selectBox { width: 100% !important; height: auto !important; margin: 0 0 8px 0 !important; float: none !important; }
  .mainContent .serviceCalculatorBox .selectBox a.openSelect { float: none !important; display: block; margin: 0 !important; }
  .mainContent .serviceCalculatorBox .serviceSearchInputBox { width: 100% !important; float: none !important; height: auto !important; min-height: 36px; margin: 0 0 8px 0 !important; }
  /* калкулаторът не „лепне“ най-горе при скролиране на телефон */
  .mainContent .serviceCalculatorBox.fixedCalculatorBox { position: static !important; top: auto !important; width: 100% !important; box-shadow: none !important; }
  .mainContent .serviceCalculatorBox.fixedCalculatorBox + * { margin-top: 0 !important; }
  .mainContent .serviceCalculatorBox input.serviceSearchInput { width: 100% !important; height: 36px !important; line-height: 36px !important; float: none !important; }

  /* Списък с услуги (отметки) */
  .serviceListContainer, .autoPartsListContainer { width: 100% !important; height: auto !important; position: static !important; margin: 0 !important; float: none !important; }
  .servicesListBox { width: 100% !important; float: none !important; height: auto !important; position: static !important; top: auto !important; left: auto !important; margin: 0 0 12px 0 !important; }
  .servicesListBox ul { width: 100% !important; float: none !important; height: auto !important; }
  .servicesListBox ul li a { font-size: 15px !important; line-height: 1.6 !important; }
  .serviceListContainer .servicesListBox ul li { width: 100% !important; float: none !important; display: flex !important; align-items: flex-start; gap: 10px; padding: 6px 0 !important; height: auto !important; }
  .serviceListContainer .servicesListBox ul li input[type=checkbox] { float: none !important; width: 20px !important; height: 20px !important; flex: 0 0 20px; margin: 2px 0 0 0 !important; }
  .serviceListContainer .servicesListBox ul li label { float: none !important; width: auto !important; flex: 1; font-size: 15px !important; line-height: 1.35 !important; }
  .calculateBottomLine { position: static !important; bottom: auto !important; width: 100% !important; height: auto !important; margin: 10px 0 20px !important; text-align: center; float: none !important; }
  .calculateBottomLine .calculateSubmitBtn { float: none !important; display: inline-block !important; position: static !important; margin: 0 auto !important; }

  /* ---------- Справка (количка) ---------- */
  section.servicesCartContent .cartTitlesLine { display: none !important; }
  section.servicesCartContent .cartItem { width: 100% !important; display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; height: auto !important; float: none !important; }
  section.servicesCartContent .cartItem > * { float: none !important; }
  section.servicesCartContent .cartItem .itemTitle { flex: 1 1 100%; width: 100% !important; }
  section.servicesCartContent .cartItem .itemPrice { flex: 1; width: auto !important; text-align: right; margin: 0 !important; }
  section.servicesCartContent .cartItem .qty, section.servicesCartContent .cartItem .itemRemove { width: auto !important; margin: 0 !important; }
  section.servicesCartContent .cartItem .clear { display: none; }
  section.servicesCartContent .cartTotalBox { width: 100% !important; height: auto !important; overflow: hidden; padding: 12px !important; float: none !important; }
  section.servicesCartContent .cartTotalBox .cartTotalLeft,
  section.servicesCartContent .cartTotalBox .cartTotalRight,
  section.servicesCartContent .cartTotalBox .additionalTotalCartBox { width: 100% !important; float: none !important; height: auto !important; overflow: hidden; margin: 0 0 10px 0 !important; }
  section.servicesCartContent .cartTotalBox p, section.servicesCartContent .cartTotalBox label, section.servicesCartContent .cartTotalBox .totalPrice { float: none !important; }
  section.servicesCartContent .cartTotalBox .cartTotalRight { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  section.servicesCartContent .cartTotalBox .totalPrice { width: auto !important; }
  .additionalTotalCartBox .openHiddenContent { float: none !important; display: flex; gap: 8px; align-items: flex-start; width: 100% !important; height: auto !important; }
  .additionalTotalCartBox .openHiddenContent input.checkbox { float: none !important; width: 20px; height: 20px; flex: 0 0 20px; }
  .additionalTotalCartBox .openHiddenContent label { float: none !important; width: auto !important; height: auto !important; flex: 1; }
  .additionalTotalCartBox .additionalHiddenContent, .additionalTotalCartBox .totalCartCol { width: 100% !important; float: none !important; height: auto !important; }
  input.submitCart { float: none !important; width: 100% !important; margin: 10px 0 0 !important; }

  /* ---------- Изскачащи прозорци (допълнителни услуги, форма за запитване) ---------- */
  #colorbox { left: 8px !important; width: calc(100% - 16px) !important; max-width: none !important; }
  #cboxWrapper, #cboxContent, #cboxLoadedContent { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  #cboxLoadedContent { height: auto !important; max-height: 80vh; overflow: auto !important; }
  #cboxMiddleLeft, #cboxMiddleRight, #cboxTopLeft, #cboxTopRight, #cboxBottomLeft, #cboxBottomRight, #cboxTopCenter, #cboxBottomCenter { display: none !important; }
  #colorbox input.text { width: 100% !important; box-sizing: border-box !important; height: 38px !important; float: none !important; }
  #colorbox textarea { width: 100% !important; box-sizing: border-box !important; float: none !important; }
  #colorbox .selectBox { width: 100% !important; float: none !important; }
  #colorbox .selectBox a.openSelect { width: 100% !important; box-sizing: border-box !important; }
  #colorbox .selectBox ul.subSelect { width: 100% !important; }

  /* ---------- Форми „Справки и запитвания“ / „Препоръки и оплаквания“ ---------- */
  section.textPage .sendRequestForm input,
  section.textPage .sendRequestForm textarea,
  section.textPage .sendRequestForm .selectBox,
  section.textPage .sendRequestForm #oneRowInputs > div,
  section.textPage .success { width: 100% !important; float: none !important; }
  section.textPage .sendRequestForm input[type=text], section.textPage .sendRequestForm input.text, section.textPage .sendRequestForm input:not([type]) { height: 40px !important; padding: 8px 10px !important; }
  section.textPage .sendRequestForm textarea { min-height: 120px; }
  section.textPage .sendRequestForm input[type=checkbox], section.textPage .sendRequestForm input[type=radio] { width: auto !important; height: auto !important; }
  section.textPage .sendRequestForm input[type=submit], section.textPage .sendRequestForm button { height: auto !important; }

  /* ---------- Авточасти ---------- */
  .autoPartsListContainer { overflow: hidden; }
  .autoPartsListContainer .autoPartsCol { width: 100% !important; float: none !important; height: auto !important; margin: 0 !important; }
  .autoPartsListContainer .servicesListBox { padding-bottom: 30px !important; position: relative !important; }
  .servicesListBox a.autoPartsIMG { float: none !important; display: block; text-align: center; height: auto !important; width: 100% !important; margin: 0 0 8px 0 !important; }
  .servicesListBox a.autoPartsIMG img { width: auto !important; max-width: 100%; }

  /* ---------- Галерия: 2 снимки на ред ---------- */
  section.galleryContent { display: flex; flex-wrap: wrap; gap: 8px; }
  section.galleryContent a.galleryIMG { width: calc(50% - 4px) !important; height: auto !important; margin: 0 !important; float: none !important; }
  section.galleryContent a.galleryIMG img { width: 100% !important; height: auto !important; }

  /* ---------- Футър ---------- */
  footer, footer .wrapper { height: auto !important; }
  footer .wrapper > div, footer .footerBottom, footer .footerBottom span { width: 100% !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  footer .footerCol { height: auto !important; float: none !important; width: 100% !important; margin: 0 0 18px 0 !important; overflow: hidden; }
  footer .footerColBox, footer .footerCMSBlock, .footerCMSBlock { float: none !important; width: 100% !important; height: auto !important; overflow: hidden; }
  footer h3, footer nav, footer ul, footer .fb-like-box { float: none !important; }
  footer nav ul li a { display: block; padding: 6px 0 !important; font-size: 15px !important; }
}