/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/*==============================
=            VARIABLES         =
==============================*/

:root{

    --primary:#DA0008;
    --secondary:#050E3C;
    --bg:#EEEEEE;
    --bgchip:#f9f9f9;
    --chiptext: #555;
    
    --white:#fff;
    --text:#222;
    --titulo:##111;
    --text-light:#666;
    --border:#E2E2E2;

    --radius:18px;

}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

.nav-left {
    justify-content: center !important;
}

/******************* RESELLER PAGE CSS ******************************************/


/*==============================
=         PAGE LAYOUT          =
==============================*/

.dealer-page{

    background:var(--bg);

    padding:70px 0 120px;

}

.dealer-page>*{

    max-width:1320px;
    margin:auto;

    padding-inline:40px;

}

/*==============================
=            HERO              =
==============================*/

.dealer-header{

    display:grid;
    grid-template-columns:1.4fr .9fr;

    gap:50px;

    margin-bottom:55px;

}

.dealer-label{

    display: inline-block;
    padding: 5px 12px;
    background: var(--bgchip);
    border-radius: 12px;
    font-size: 14px;
    margin-bottom: 15px;
    color: var(--chiptext);
}

.dealer-title h1{

    font-size:3.4rem;

     line-height: 1.05;
    font-weight: 700;
    margin:0;
    color:var(--titulo);
    margin-bottom: 10px;
    
}


.dealer-title p{

    margin-top:24px;

    color:var(--text-light);

    font-size:1.05rem;

    line-height:1.8;

    max-width:650px;

}

.dealer-contact{

    background:#fff;

    border-radius:var(--radius);

    padding:35px;

    border:1px solid var(--border);

    box-shadow:0 12px 30px rgba(0,0,0,.05);

}

.dealer-contact h3{

    margin-top:0;

}

.dealer-contact p{

    line-height:1.8;

    color:var(--text-light);

}

.dealer-contact a{

    display:inline-block;

    margin-top:18px;

    color:var(--primary);

    font-weight:700;

    text-decoration:none;

}

/*==============================
=           FILTERS            =
==============================*/

.dealer-filters{

    display:flex;

    gap:18px;

    margin-bottom:20px;

}

.dealer-filters select,
.dealer-filters input{

    height:56px;

    border:none;

    border-radius:14px;

    

    padding:0 20px;

    font-size:15px;

    box-shadow:0 5px 15px rgba(0,0,0,.05);
    -webkit-appearance: display;

}

.dealer-filters select{

    width:250px;

}

.dealer-filters input{

    flex:1;

}

/*==============================
=        REGION FILTER         =
==============================*/

.region-filter{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-bottom:30px;

}

.region-filter button{

    border:none;

    background:#fff;

    padding:11px 22px;

    border-radius:999px;

    cursor:pointer;

    transition:.25s;

}

.region-filter button:hover{

    background: #ed1616;

    color:#fff;

}

.region-filter .active{

    background:var(--primary);

    color:#fff;

}

/*==============================
=          COUNTER            =
==============================*/

.dealer-count{

    color:#666;

    font-weight:600;

    margin-bottom:50px;

}

/*==============================
=          COUNTRIES          =
==============================*/

.country-group{

    margin-bottom:70px;

}

.country-group h2{

    color:var(--secondary);

    font-size:2rem;

    margin-bottom:30px;

}

/*==============================
=            GRID             =
==============================*/

.dealer-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}

/*==============================
=            CARD             =
==============================*/

.dealer-card{

    background:#fff;

    border-radius:18px;

    padding:28px;

    border:1px solid #E7E7E7;

    transition:.3s;

    display:flex;

    flex-direction:column;

    gap:20px;
    margin-bottom:20px;
    width: 600px;

}

.dealer-card:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}



.dealer-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.dealer-top h3{

    margin:0;

    font-size:1.45rem;

    color:var(--titulo);

}

.official{

    background: var(--bgchip);

    color:var(--chiptext);

    font-size:.8rem;
    
    padding:7px 15px;

    border-radius:999px;

    white-space:nowrap;
    

}

.city{

    margin:0;

    color:#666;

}

/*==============================
=            TAGS             =
==============================*/

.tags{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

.tags span{

    background:#f4f4f4;

    color:#555;

    border-radius:999px;

    padding:8px 16px;

    font-size:.85rem;
    border: 2px solid #c3c4c7;

}

/*==============================
=          BUTTONS            =
==============================*/

.dealer-actions{

    display:flex;

    gap:12px;

    margin-top:auto;

}

.dealer-actions a{

    flex:1;

    text-align:center;

    text-decoration:none;

    padding:14px;

    border-radius:12px;

    font-weight:700;

    transition:.25s;

}

.dealer-actions a:first-child{

    border:2px solid var(--secondary);

    color:var(--secondary);

}

.dealer-actions a:first-child:hover{

    background:var(--secondary);

    color:#fff;

}

.dealer-actions a:last-child{

    background:var(--primary);

    color:#fff;

}

.dealer-actions a:last-child:hover{

    background:#b50007;

}
.select-wrapper {
  position: relative;
  display: inline-block;
  width: 200px; /* ajusta según diseño */
}

.select-wrapper select {
  width: 100%;
  padding: 8px 30px 8px 10px;
  appearance: none; /* elimina el estilo nativo */
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
}

/* Arrow personalizado */
.select-wrapper::after {
  content: "▼";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 12px;
  color: #333;
}

/*==============================
=         RESPONSIVE          =
==============================*/

@media(max-width:1100px){

    .dealer-header{

        grid-template-columns:1fr;

    }

    .dealer-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .dealer-page>*{

        padding-inline:20px;

    }

    .dealer-title h1{

        font-size:2.4rem;

    }

    .dealer-filters{

        flex-direction:column;

    }

    .dealer-filters select,
    .dealer-filters input{

        width:100%;

    }

    .dealer-top{

        flex-direction:column;

        align-items:flex-start;

    }

    .dealer-actions{

        flex-direction:column;

    }
    .dealer-card{
        width: auto;
    }
    /* Responsive adjustments */
    
    .dealer-filters select, .dealer-filters input {
      padding: 15px 20px 20px 20px;
      font:none;
    }

}

@media(max-width: 300px){


  .dealer-contact {
    flex: 1 1 100%;
  }

  .dealer-filters {
    flex-direction: column;
  }

  .dealer-filters select,
  .dealer-filters input {
    min-width: 100%;
  }

  .region-filter button {
    margin-bottom: 8px;
  }
}