/* ============================================
   MELHORIAS DE RESPONSIVIDADE - ELETROLAB
   ============================================ */

/* ============================================
   1. HEADER E NAVEGAÇÃO MOBILE
   ============================================ */

/* Ajustes no header mobile */
@media (max-width: 991px) {
  .header-top {
    padding: 10px 0;
  }
  
  .logo img {
    max-height: 45px !important;
  }
  
  .phone-wrapper {
    font-size: 13px;
  }
  
  .phone .above-number,
  .phone .under-number {
    font-size: 11px;
  }
  
  .phone .number {
    font-size: 16px;
  }
  
  .right-text {
    display: none; /* Esconde as setas decorativas em mobile */
  }
}

@media (max-width: 767px) {
  .header-top {
    padding: 8px 0;
  }
/* --------------------------------------------
   PÁGINA DE PREÇOS
   -------------------------------------------- */
.prices-page #page-content {
  padding-top: 15px;
}
.prices-page #page-content .block:first-of-type {
  padding-top: 5px;
  padding-bottom: 5px;
}
.prices-page #page-content .block:nth-of-type(2) {
  padding-top: 10px;
}
.prices-page .breadcrumbs {
  margin-top: 2px;
  margin-bottom: 8px;
}

.price-cards-mobile {
  display: none;
}
@media (max-width: 767px) {
  .price-cards-mobile {
    display: grid;
    gap: 16px;
    margin: 25px 0;
  }
  .price-card {
    background: #fff;
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #4d7df0;
  }
  .price-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
  }
  .price-card p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  .price-card ul {
    padding-left: 18px;
    margin: 0 0 5px;
    font-size: 14px;
    line-height: 1.4;
  }
  .price-card ul li + li {
    margin-top: 4px;
  }
  .price-card .price-tag {
    font-weight: 700;
    font-size: 18px;
    color: #4d7df0;
  }
  .desktop-table-wrapper {
    display: none;
  }
}

  
  .logo img {
    max-height: 40px !important;
  }
  
  .phone-wrapper {
    font-size: 12px;
    padding: 5px 0;
  }
  
  .phone .above-number {
    font-size: 10px;
    margin-bottom: 2px;
  }
  
  .phone .number {
    font-size: 14px;
    line-height: 1.2;
  }
  
  .phone .under-number {
    font-size: 10px;
    margin-top: 2px;
  }
  
  .navbar-toggle {
    padding: 8px 10px;
  }
}

/* Menu mobile melhorado */
@media (max-width: 991px) {
  #slidemenu {
    padding-top: 60px;
  }
  
  .slidemenu-close {
    font-size: 14px;
    padding: 15px 20px;
  }
  
  .navbar-nav > li > a {
    font-size: 16px;
    padding: 12px 20px;
  }
}

/* ============================================
   2. SLIDER PRINCIPAL
   ============================================ */

@media (max-width: 991px) {
  #mainSlider .slide .img--holder {
    height: 50vh !important;
    min-height: 350px !important;
  }
  
  #mainSliderWrapper .hero-slider-arrow {
    width: 80px !important;
    height: 80px !important;
  }
  
  #mainSliderWrapper .hero-slider-arrow::before {
    width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 767px) {
  #mainSlider .slide .img--holder {
    height: 45vh !important;
    min-height: 300px !important;
  }
  
  #mainSliderWrapper .hero-slider-arrow {
    width: 60px !important;
    height: 60px !important;
  }
  
  #mainSliderWrapper .hero-slider-arrow::before {
    width: 30px !important;
    height: 30px !important;
  }
  
  /* Texto do slide em mobile */
  .slide .caption h1,
  .slide .caption h2 {
    font-size: 24px !important;
    line-height: 28px !important;
  }
  
  .slide .caption h3 {
    font-size: 18px !important;
    line-height: 22px !important;
  }
  
  .slide .caption p {
    font-size: 14px !important;
    line-height: 20px !important;
    margin-bottom: 15px;
  }
}

@media (max-width: 479px) {
  #mainSlider .slide .img--holder {
    height: 40vh !important;
    min-height: 250px !important;
  }
  
  #mainSliderWrapper .hero-slider-arrow {
    width: 50px !important;
    height: 50px !important;
  }
  
  .slide .caption h1,
  .slide .caption h2 {
    font-size: 20px !important;
    line-height: 24px !important;
  }
  
  .slide .caption h3 {
    font-size: 16px !important;
    line-height: 20px !important;
  }
  
  .slide .caption p {
    font-size: 13px !important;
    line-height: 18px !important;
  }
}

/* ============================================
   3. BLOCO DE CATEGORIAS (3 ITENS)
   ============================================ */

@media (max-width: 991px) {
  .category-carousel .col-sm-4 {
    margin-bottom: 30px;
  }
  
  .category-carousel .col-sm-4:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .category-carousel .col-sm-4 {
    margin-bottom: 25px;
  }
  
  .category-block .image_hover {
    margin-bottom: 15px;
  }
  
  .category-block h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  
  .category-block p {
    font-size: 14px;
    line-height: 22px;
  }
}

/* ============================================
   4. BLOCO "CONSERTE SEU COMPUTADOR AGORA"
   ============================================ */

@media (max-width: 767px) {
  .block.bg-1 {
    padding: 30px 0;
  }
  
  .block.bg-1 h2 {
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 15px;
  }
  
  .block.bg-1 h3.subtitle {
    font-size: 20px;
    margin-bottom: 15px;
  }
  
  .block.bg-1 p.info {
    font-size: 14px;
    margin-bottom: 20px;
  }
  
  .block.bg-1 .btn-inline {
    flex-direction: column;
    gap: 10px;
  }
  
  .block.bg-1 .btn {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
}

/* ============================================
   5. SERVIÇOS DE INFORMÁTICA E ELETRÔNICA
   ============================================ */

@media (max-width: 991px) {
  .text-icon-carousel .col-sm-6.col-md-3 {
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .text-icon-carousel .col-sm-6.col-md-3 {
    margin-bottom: 25px;
  }
  
  .text-icon .icon-wrapper {
    margin-bottom: 15px;
  }
  
  .text-icon .title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .text-icon .text {
    font-size: 14px;
    line-height: 22px;
  }
}

/* ============================================
   6. SOBRE NÓS E OUTROS BLOCOS DE TEXTO
   ============================================ */

@media (max-width: 767px) {
  .block {
    padding: 30px 0;
  }
  
  .block h2 {
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 15px;
  }
  
  .block h3 {
    font-size: 22px;
    margin-bottom: 12px;
  }
  
  .marker-list {
    font-size: 14px;
    line-height: 24px;
  }
  
  .marker-list li {
    margin-bottom: 8px;
    padding-left: 25px;
  }
}

/* ============================================
   7. POR QUE NOS ESCOLHER
   ============================================ */

@media (max-width: 991px) {
  .text-icon-squared {
    margin-bottom: 20px;
  }
}

@media (max-width: 767px) {
  .text-icon-squared {
    padding: 25px 15px 20px;
    margin-bottom: 20px;
  }
  
  .text-icon-squared .icon-big .icon {
    font-size: 60px;
  }
  
  .text-icon-squared .title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .text-icon-squared .text {
    font-size: 14px;
    line-height: 22px;
  }
}

/* ============================================
   8. TABELA DE PREÇOS (PRICES.HTML)
   ============================================ */

@media (max-width: 767px) {
  .price-box {
    margin-bottom: 20px;
  }
  
  .price-box-inside {
    padding: 20px 15px;
  }
  
  .price-box-icon i {
    width: 100px;
    height: 100px;
    font-size: 40px;
  }
  
  .price-box-title {
    font-size: 18px;
    margin-top: 15px;
  }
  
  .price-box-text {
    font-size: 13px;
    line-height: 20px;
    margin-top: 10px;
  }
  
  .price-box-price {
    height: 60px;
    padding: 12px 15px;
    font-size: 16px;
  }
  
  .price-box-price span {
    font-size: 32px;
  }
  
  /* Tabela de preços */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .price-table {
    min-width: 600px;
  }
  
  .price-table th,
  .price-table td {
    padding: 10px 8px;
    font-size: 13px;
  }
  
  .remark-text {
    font-size: 12px;
    margin-top: 20px;
  }
}

/* ============================================
   9. FORMULÁRIOS
   ============================================ */

@media (max-width: 767px) {
  .quote-form,
  .booking-form,
  .contact-form {
    padding: 20px 15px;
    margin-top: 30px;
  }
  
  .form-box-label {
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  .form-control,
  .input-custom,
  .textarea-custom {
    font-size: 14px;
    padding: 10px 12px;
  }
  
  .form-box-row {
    flex-direction: column;
  }
  
  .form-box-col-1,
  .form-box-col-2 {
    width: 100%;
    margin-bottom: 15px;
  }
  
  .btn {
    font-size: 14px;
    padding: 12px 24px;
    width: 100%;
    max-width: 300px;
  }
  
  .btn-inline {
    flex-direction: column;
    gap: 10px;
  }
  
  .btn-inline .btn {
    width: 100%;
    max-width: 300px;
  }
}

/* ============================================
   10. FOOTER
   ============================================ */

@media (max-width: 991px) {
  .page-footer {
    padding: 40px 0 20px;
  }
  
  .footer-columns .col-sm-4 {
    margin-bottom: 25px;
    text-align: center;
  }
  
  .footer-phone {
    font-size: 16px;
    margin: 20px 0;
  }
  
  .footer-phone .number {
    font-size: 18px;
  }
  
  .contact-info {
    font-size: 14px;
    line-height: 22px;
  }
}

@media (max-width: 767px) {
  .page-footer {
    padding: 30px 0 15px;
  }
  
  .social-links {
    margin: 20px 0;
  }
  
  .social-links ul {
    justify-content: center;
  }
  
  .footer-phone {
    font-size: 14px;
    text-align: center;
    margin: 15px 0;
  }
  
  .footer-phone .number {
    font-size: 16px;
    display: block;
    margin-top: 5px;
  }
  
  .footer-columns .col-sm-4 {
    margin-bottom: 20px;
  }
  
  .contact-info {
    font-size: 13px;
    line-height: 20px;
  }
  
  .copyright {
    font-size: 12px;
    margin: 15px 0;
  }
  
  .footer-links {
    font-size: 12px;
  }
  
  .footer-links a {
    display: block;
    margin: 5px 0;
  }
}

/* Ajuste do endereço no footer para mobile */
@media (max-width: 767px) {
  .page-footer .col-sm-4.col-lg-3:first-child {
    min-width: auto !important;
  }
  
  .page-footer .col-sm-4.col-lg-3:first-child .contact-info {
    white-space: normal !important;
  }
}

/* ============================================
   11. PÁGINA DE CONTATO
   ============================================ */

@media (max-width: 767px) {
  .contact-info-block {
    margin-bottom: 25px;
  }
  
  .contact-info-block h4 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .contact-info-block p {
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  .contact-form .inputs-col .row {
    margin: 0;
  }
  
  .contact-form .col-md-6 {
    margin-bottom: 15px;
  }
}

/* ============================================
   12. PÁGINA DE SERVIÇOS
   ============================================ */

@media (max-width: 767px) {
  .grey-box {
    margin-bottom: 15px;
  }
  
  .grey-box-inside {
    padding: 20px 15px;
  }
  
  .grey-box-icon {
    font-size: 40px;
    margin-bottom: 10px;
  }
  
  .grey-box-title {
    font-size: 18px;
    margin-bottom: 8px;
  }
  
  .grey-box-text p {
    font-size: 13px;
    line-height: 20px;
  }
  
  .phone-content {
    margin-top: 20px;
    text-align: center;
  }
  
  .phone-content-text {
    font-size: 13px;
    margin-bottom: 8px;
  }
  
  .phone-content-number {
    font-size: 16px;
  }
  
  .service-list {
    font-size: 14px;
  }
  
  .service-list li {
    margin-bottom: 8px;
  }
}

/* ============================================
   13. BREADCRUMBS
   ============================================ */

@media (max-width: 767px) {
  .breadcrumbs {
    font-size: 13px;
    padding: 10px 0;
  }
  
  .breadcrumb li {
    margin-right: 5px;
  }
  
  .breadcrumb li + li:before {
    padding: 0 5px;
  }
}

/* ============================================
   14. MELHORIAS GERAIS
   ============================================ */

/* Espaçamentos responsivos */
@media (max-width: 767px) {
  .divider-sm,
  .divider-lg {
    margin: 20px 0;
  }
  
  .block.bottom-sm-1 {
    padding-bottom: 20px;
  }
  
  .block.bottom-md {
    padding-bottom: 30px;
  }
}

/* Imagens responsivas */
@media (max-width: 767px) {
  img.img-responsive {
    max-width: 100%;
    height: auto;
  }
}

/* Container ajustado */
@media (max-width: 767px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Texto centralizado melhorado */
@media (max-width: 767px) {
  .text-center {
    text-align: center !important;
  }
  
  p.text-center {
    max-width: 100%;
  }
}

/* Botões em mobile */
@media (max-width: 479px) {
  .btn {
    font-size: 13px;
    padding: 10px 20px;
  }
  
  .btn-sm {
    font-size: 12px;
    padding: 8px 16px;
  }
}

/* ============================================
   15. MODAL E POPUPS
   ============================================ */

@media (max-width: 767px) {
  .form-modal {
    padding: 20px 15px;
    margin: 20px 10px;
    max-width: calc(100% - 20px);
  }
  
  .form-modal h3 {
    font-size: 20px;
    margin-bottom: 15px;
  }
  
  .form-popup {
    padding: 20px 15px;
    max-width: calc(100% - 20px);
  }
}

/* ============================================
   16. ANIMAÇÕES E PERFORMANCE
   ============================================ */

/* Reduz animações em mobile para melhor performance */
@media (max-width: 767px) {
  * {
    -webkit-animation-duration: 0.3s !important;
    animation-duration: 0.3s !important;
    -webkit-transition-duration: 0.3s !important;
    transition-duration: 0.3s !important;
  }
}

/* ============================================
   17. TABELAS RESPONSIVAS
   ============================================ */

@media (max-width: 767px) {
  .table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .stack-table {
    display: block;
  }
  
  .stack-table thead {
    display: none;
  }
  
  .stack-table tbody,
  .stack-table tr,
  .stack-table td {
    display: block;
    width: 100%;
  }
  
  .stack-table tr {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
  }
  
  .stack-table td {
    border: none;
    padding: 8px 0;
    text-align: left;
  }
  
  .stack-table td:before {
    content: attr(data-label) ": ";
    font-weight: bold;
    display: inline-block;
    width: 40%;
  }
}

/* ============================================
   18. AJUSTES ESPECÍFICOS PARA TELAS PEQUENAS
   ============================================ */

@media (max-width: 479px) {
  /* Títulos ainda menores */
  h1, h2.h-lg {
    font-size: 24px !important;
    line-height: 28px !important;
  }
  
  h2 {
    font-size: 22px !important;
    line-height: 26px !important;
  }
  
  h3 {
    font-size: 20px !important;
  }
  
  /* Espaçamentos reduzidos */
  .block {
    padding: 20px 0;
  }
  
  /* Padding reduzido */
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }
}