/*
Theme Name: TitanCycling Child
Theme URI: https://titancycling.es
Author: Aitor Arina
Author URI: https://aitorarina.com/
Description: Tema hijo de TitanCycling.
Version: 1.0
Template: generatepress
Text Domain: titancycling-child
*/

html {
  scroll-behavior: smooth;
}

/* Layout básico */

.site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 10px 20px;

    /* sticky */
    position: sticky;
    top: 0;
    z-index: 10000;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page-header, .sidebar .widget, .site-main>* {
    margin-bottom: 0 !important;
}

/* ----- Hamburguesa Responsive ------ */

.nav-toggle {
    display: none;
}

.nav-toggle-label {
    display: none;
    cursor: pointer;
    width: 30px;
    height: 25px;
    position: relative;
}

.nav-toggle-label span,
.nav-toggle-label span:before,
.nav-toggle-label span:after {
    content: '';
    background: #333;
    height: 3px;
    width: 100%;
    position: absolute;
    left: 0;
    transition: .3s;
}

.nav-toggle-label span {
    top: 50%;
    transform: translateY(-50%);
}

.nav-toggle-label span:before {
    top: -8px;
}

.nav-toggle-label span:after {
    top: 8px;
}

/* -----------------------------
Header
----------------------------- */

.header-inner {
    width: 90%;
    max-width: 1360px !important;
}

img.header-logo {
    width: 100px;
}

.main-navigation {
    display: flex;
}

.main-menu {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
}

.main-menu li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

/* --------- Hero --------- */

.hero-fade-slider {
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    height: Calc(100vh - 134.2px);
}

.hero-fade-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
    pointer-events: none;
}

.hero-fade-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.hero-fade-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.85) contrast(1.05);
}

.hero-fade-content {
    position: relative;
    z-index: 5;
    max-width: 900px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    text-align: center;
    color: #fff;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.hero-fade-content h2 {
    font-size: 56px;
    margin-bottom: 1rem;
    font-weight: 700;
}

.hero-fade-content .subtitle p {
    margin: 0.4rem 0;
    font-size: 22px;
    font-weight: 600;
}

a.hero-button {
    background: #fff;
    padding: 12px 48px;
    border-radius: 4px;
    color: #000;
    font-weight: 600;
}

a.hero-button.second {
  background: none;
    border: 1px solid #fff;
    padding: 12px 48px;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
}

.buttons-container {
    display: flex;
    justify-content: center;
    gap: 24px;
}

/* --------- Divider --------- */

.claims-carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #1e1e1e;
    color: #fff;
    padding: 16px 0 12px;
}

.claims-carousel-content {
    display: flex;
    flex-direction: row;
    gap: 40px;
    white-space: nowrap;
    will-change: transform;
}

.claim-item {
    min-width: 300px;
    max-width: 300px;    
    display: flex;
    flex-direction: row;
    white-space: normal;
}

.claim-item img {
    width: 24px;
    MARGIN: -4px 4px 0;
}

.claim-item h3 {
    margin: 0 !important;
    font-weight: bold;
    color: #fff;
    font-size: 14px;
}

/* --------- Bikes --------- */

.bikes-home-container {
    width: 100%;
    position: relative;
    padding: 64px 0;
}

.bikes-home-content {
    width: 90%;
    margin: auto;
}

/* Text container */

.home-title-container.bikes {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-direction: column;
    padding-bottom: 24px;
}

.home-title.bikes h2 {
    font-size: 72px;
}

.bikes-subtitle h3 {
    font-size: 24px;
    opacity: 0.5;
}

/* Bikes items container */

.bike-item {
    width: 100%;
}

.bike-item img {
    width: 100%;
    max-width: 320px;
    border-radius: 16px;
}

.bike-item h3 {
    font-size: 20px;
    font-weight: 600;
    padding: 16px;
}


.bikes-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    gap: 16px;
    justify-items: center;
    align-items: start;

}

/* Bikes divider */

.divider-images-content {
    display: flex;
}

.bike-crea-item {
    width: 100%;
}

.bike-crea-item img {
    width: 100%;
}

/* Tailored Section */

.tailored-container {
    top: -8px;
    width: 100%;
    position: relative;
    background-color: #2e2e2e;
}

.tailored-content {
    width: 90%;
    max-width: 1360px;
    margin: auto;
    color: #fff;
    padding: 80px 0;
}

.tailored-title h2 {
    font-size: 72px;
}

.tailored-content-content {
    display: flex;
    align-items: flex-start;
    padding: 40px 8px;
}

.tailored-txt-content {
    width: 50%;
}

.tailored-txt {
    font-size: 22px;
}

.tailored-txt ul {
    line-height: 1.75;
    font-size: 16px;
}


/* --------------------------- 
Form Wizard 
--------------------------- */

#cf7-wizard {
    padding: 64px 0 0;
}

.taller-container {
    width: 100%;
    position: relative;
    padding: 24px 0 120px;
}

.taller-content {
    width: 90%;
    max-width: 1360px;
    margin: auto;
}

.tailored-title h2 {
    font-size: 72px;
}

.taller-subtitle {
    font-size: 16px;
    line-height: 1.5;
    opacity: 0.5;
}

.cf7-wizard__step p span input {
  margin-bottom: 12px !important;
}

/* ------- Form ------- */

/* CF7 Wizard - Minimal modern inputs & select + dropdown multiselect */
#cf7-wizard { width:100%; max-width:1060px; margin:0 auto; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#111; }
.wizard-step-title {     
    font-size: 32px;
    color: #000;
    letter-spacing: 0.6px;
    margin: 0 0 32px 0;
    font-weight: 700; 
}
.cf7-wizard__progress{     
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 48px;
    width: 100%;
    max-width: 760px;
    margin: auto; 
}
.cf7-wizard__bar{ flex:1; height:6px; background:#e6e6e6; border-radius:6px; overflow:hidden; }
.cf7-wizard__step-label{ font-size:13px; color:#666; min-width:90px; text-align:right; }
.cf7-wizard__bar-fill {
  height: 100%;
  width: 0%;
  background: #111;
  border-radius: 6px;
  transition: width .25s ease;
}

/* Step card */
.cf7-wizard__step{     
    background: #fff;
    padding: 64px 15% 48px;
    border-radius: 24px;
    box-shadow: 0 0px 18px rgba(0, 0, 0, 0.06);
    margin-bottom: 14px; 
}
.cf7-wizard__step h3{ margin:0 0 24px 0; font-size:18px; font-weight:600; color:#111; }

/* Inputs & selects */
#cf7-wizard input[type="text"],
#cf7-wizard input[type="tel"],
#cf7-wizard input[type="email"],
#cf7-wizard input[type="file"],
#cf7-wizard textarea,
#cf7-wizard select {
    width:100%; 
    padding: 16px 12px;
    border-radius: 6px; 
    border:1px solid #e6e6e6; 
    box-sizing:border-box; 
    font-size:15px;
    background:#fff; 
    color:#111; 
    transition:box-shadow .12s, border-color .12s;
}
#cf7-wizard input[type="text"]:focus,
#cf7-wizard input[type="tel"]:focus,
#cf7-wizard input[type="email"]:focus,
#cf7-wizard textarea:focus,
#cf7-wizard select:focus {
  outline:none; border-color:#cbd5e1; box-shadow:0 6px 18px rgba(16,24,40,0.04);
}

/* action buttons */
.cf7-wizard__actions{ margin-top:16px; display:flex; gap:8px; justify-content:flex-end; }
.cf7-wizard__actions input[type="button"], .cf7-wizard__actions input[type="submit"]{
    padding: 10px 40px;
    border-radius: 6px;
    border: 0px solid #111;
    background: #111;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    margin-top: 16px;
}
.cf7-wizard__actions p {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.cf7-wizard__actions input[type="button"].wizard-prev{ background:transparent; color:#111; border-color:#e6e6e6; font-weight:600; }

/* Dropdown multiselect */
.dropdown-multiselect { position:relative; max-width:100%; margin-top:8px; z-index:20; }
.dropdown-multiselect__trigger{
  padding:10px 12px; border-radius:8px; border:1px solid #e6e6e6; background:#fff; cursor:pointer; display:block; font-size:15px;
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
.dropdown-multiselect.open .dropdown-multiselect__trigger{
  border-color:#cbd5e1; box-shadow:0 10px 30px rgba(2,6,23,0.04);
}
.dropdown-multiselect__menu{
  display:none; position:absolute; z-index:1000; left:0; right:0; margin-top:8px;
  background:#fff; border-radius:8px; padding:10px; border:1px solid #eee;
  box-shadow:0 12px 40px rgba(2,6,23,0.06); max-height:320px; overflow:auto;
}
.dropdown-multiselect.open .dropdown-multiselect__menu{ display:block; }
.dropdown-multiselect__menu label{
    display: flex;
    gap: 8px; 
    padding:8px; 
    cursor:pointer; 
    font-size:14px; 
    color:#111; 
    border-radius:6px;
}
.dropdown-multiselect__menu label:hover{ background:#f7f8fa; }

/* ebike-only hidden */
.ebike-only{ display:none; }

/* summary */
.cf7-wizard__summary{ background:#fafafa; padding:12px; border-radius:6px; border:1px solid #f0f0f0; }
.summary-list dt{ font-weight:700; font-size:13px; margin-top:8px; }
.summary-list dd{ margin:0 0 6px 0; color:#333; }

/* conditional-field */
.conditional-field{ display:none; opacity:0; transition:opacity .18s; margin-top:8px; }
.conditional-field.visible{
    display:block !important;
    opacity:1;
}

/* Validation UI */
.wizard-error {
  color:#d60000;
  font-size:13px;
  margin-top:6px;
  padding-left:2px;
}
.wizard-invalid {
  border-color:#d60000 !important;
  box-shadow:0 0 0 3px rgba(214,0,0,0.07) !important;
}

/* thanks */
.cf7-wizard__thanks{ margin-top:16px; padding:18px; border-radius:8px; background:#f6fffa; border:1px solid #e6ffed; }
.cf7-wizard__thanks-inner h3{ margin:0 0 6px 0; }

/* mobile */
@media (max-width:640px){
  #cf7-wizard { padding:12px; }
  .cf7-wizard__actions { flex-direction:row-reverse; }
}





/* =============================
   Fecha - estilo moderno & minimal
   ============================= */

/* Ocultar icono nativo del datepicker (Chrome, Safari, Edge) */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  display: none;
}

/* Firefox: forzar apariencia tipo "textfield" */
input[type="date"] {
  -moz-appearance: textfield;
}

/* Selector principal: input[type="date"] y clase .date-field (CF7) */
input[type="date"],
input.date-field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width: 100%;
  padding: 10px 44px 10px 12px; /* espacio para ícono a la derecha */
  height: 48px;
  border-radius: 10px;
  border: 1px solid #e6e6e6;
  background-color: #fff;
  font-size: 15px;
  color: #111;
  box-sizing: border-box;
  transition: box-shadow .14s ease, border-color .14s ease, transform .06s;
  cursor: pointer;

  /* Icono SVG (único icono visible) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
}

/* Placeholder / valor vacío */
input[type="date"]::placeholder,
input.date-field::placeholder {
  color: #9aa0a6;
  opacity: 1;
}

/* Focus */
input[type="date"]:focus,
input.date-field:focus {
  outline: none;
  border-color: #cbd5e1;
  box-shadow: 0 8px 30px rgba(2,6,23,0.06);
  transform: translateY(-1px);
}

/* Hover */
input[type="date"]:hover,
input.date-field:hover {
  border-color:#dde6ef;
}

/* Disabled / readonly */
input[type="date"]:disabled,
input.date-field:disabled,
input[type="date"][readonly],
input.date-field[readonly] {
  background: #fafafa;
  color: #9aa0a6;
  cursor: not-allowed;
}

/* Small label / helper */
.date-helper {
  display:block;
  font-size:13px;
  color:#6b7280;
  margin-top:6px;
}

span.wpcf7-form-control.wpcf7-checkbox {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Responsive */
@media (max-width:540px){
  input[type="date"],
  input.date-field {
    padding-right:40px;
    height:46px;
    font-size:15px;
  }
}

/* Validation visual (wizard) */
.wizard-invalid {
  border-color:#d60000 !important;
  box-shadow:0 0 0 4px rgba(214,0,0,0.06) !important;
}
.wizard-error {
  color:#d60000;
  font-size:13px;
  margin-top:6px;
}

/* Fake placeholder (opcional) */
input.empty-date { color:#9aa0a6; }

/* Flatpickr override (si lo llegas a usar) */
.flatpickr-calendar {
  border-radius:12px;
  border:1px solid #eee;
  box-shadow:0 12px 40px rgba(2,6,23,0.06);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background:#111;
  color:#fff;
}

.dropdown-multiselect__menu br {
    display: none;
}

.dropdown-multiselect__trigger {
    padding: 16px 12px;
    border-radius: 6px;
}



/* -----------------------------
Tarifas
----------------------------- */

.tarifas-container {
    position: relative;
    width: 100%;    
}

.tarifas-content {
    width: 90%;
    max-width: 1360px;
    margin: auto;
    padding: 80px 0;
}

.tarifas-title-container {
    padding: 0 0 80px;
    width: 100%;
    max-width: 960px;
    text-align: center;
    margin: auto;
}

.tarifas-title {
    font-size: 72px;    
}

.tarifas-subtitle {
    font-size: 22px;
    font-weight: 600;
    padding: 12px 0 32px;
}

.tarifas-txt {
    font-size: 16px;
    line-height: 1.75;
    opacity: 0.5;
}

/* ---------------------------
   Tabs Row
----------------------------- */
.tabs-row {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 30px;
}

.tab-btn {
  flex: 1;
  padding: 18px 22px;
  background-color: #fff;
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0px 18px rgba(0, 0, 0, 0.06);
  transition: all .25s ease;
  text-align: center;
}

.tab-btn:hover {
  background: #eef0f3;
}

.tab-btn.active {
  background: #e5e7eb;
  transform: translateY(-2px);
}

/* ---------------------------
   Panel contenedor
----------------------------- */
.tab-panel {
    width: 100%;
    max-width: 960px;
    margin: auto;

  background: #fff;
  border-radius: 16px;
  padding: 30px;
  /* box-shadow: 0 0px 25px rgba(0,0,0,0.06); */
}

/* Cada contenido */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* ---------------------------
   Tarifas internas
----------------------------- */
.tarifa-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid #ececec;
}

.tarifa-row:last-child {
  border-bottom: none;
}

.tarifa-info h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}

.tarifa-info p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
}

.tarifa-precio {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

/* Tabs Button */

/* Icono en las tabs */
.tab-btn {
  position: relative;
  padding-right: 40px; /* espacio para el icono */
}

.tab-btn .tab-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 700;
  color: #444;
  transition: transform .25s ease, opacity .25s ease;
}

/* Cuando la tab está activa, el + se convierte en una X rotada */
.tab-btn.active .tab-icon {
  transform: translateY(-50%) rotate(45deg);
  opacity: 1;
}

/* Hover */
.tab-btn:hover .tab-icon {
  color: #000;
}

/* Borrando de desktop tarifas accordion */

.tarifas-accordion-mobile { display:none; }

/* Responsive */
@media (max-width: 768px) {
  .tabs-row {
    flex-direction: column;
    gap: 12px;
  }

  .tab-btn {
    width: 100%;
  }

  .tarifa-row {
    flex-direction: column;
    gap: 6px;
  }
}

/* ---------------------------
   MOBILE: convertir tabs en acordeón
----------------------------- */
@media (max-width: 690px) {

  .tabs-row,
  .tab-panel {
    display: none !important; /* oculta tabs desktop */
  }

  .tarifas-accordion-mobile {
    display: block;
    margin-top: 20px;
  }

  .accm-item {
    margin-bottom: 16px;
  }

  .accm-header {
    width: 100%;
    padding: 18px 22px;
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0px 18px rgba(0,0,0,0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background .2s, box-shadow .2s;
  }

  .accm-header:hover {
    background: #eef0f3;
  }

  .accm-header[aria-expanded="true"] {
    background: #e5e7eb;
  }

  .accm-icon {
    font-size: 22px;
    font-weight: 700;
    transition: transform .2s;
  }

  .accm-header[aria-expanded="true"] .accm-icon {
    transform: rotate(45deg);
  }

  .accm-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .25s ease;
    padding: 0 10px;
  }

  .accm-header[aria-expanded="true"] + .accm-content {
    padding: 10px;
  }
}

/* -----------------------------
Fin de Tarifas
----------------------------- */




/* ---------------------------
   Home - Financiacion
----------------------------- */


.financiacion-container {
    position: relative;
    width: 100%;
    
}

.financiacion-content {
    width: 90%;
    margin: auto;
    padding: 80px 0 0;
    color: #fff;
    background-color: #000;
    border-radius: 24px;
    margin-bottom: 80px;  
}

.financiacion-title-container {
    width: 100%;
    max-width: 1200px;
    text-align: center;
    margin: auto;
}

.financiacion-title {
    font-size: 72px;
    line-height: 1;
 
}

.financiacion-subtitle {
    font-size: 22px;
    padding: 40px 0 12px;
}

.financiacion-txt {
    font-size: 16px;
    line-height: 2;
    opacity: 0.5;
}

/* -------------------------
Footer
------------------------- */

.footer-container {
    position: relative;
    text-align: center;
}

.footer-content {
    padding: 0 0 40px;
    width: 90%;
    max-width: 1360px;
    margin: auto;
}

.footer-logo img {
    width: 175px;
}

.footer-address {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-evenly;
    margin: auto;
    font-size: 14px;
    padding: 24px 0 6px;
    border-bottom: 1px solid #f1f1f1;
    gap: 8px;
}

.footer-data {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    margin: auto;
    font-size: 14px;
    padding: 24px 0;
}

.footer-data:hover {
  opacity: 0.5;
  transition: 1s;
}

ul#menu-temporal-1.footer-menu {
    list-style: none;
    display: flex;
    padding: 16px 0;
    width: 100%;
    max-width: 960px;
    margin: auto;
    justify-content: space-evenly;
    border-top: 1px solid #f1f1f1;
}

ul#menu-temporal-1.footer-menu li a {
    color: #000;
    font-size: 14px;
}

ul#menu-temporal-1.footer-menu li a:hover {
    opacity: 0.5;
    transition: 1s;
}

/* -----------------------------
--------------------------------
--------------------------------
ReSpOnSiVe
-------------------------------
-------------------------------
----------------------------- */

@media (max-width: 960px) {
    .tailored-content-content {
        display: flex;
        align-items: center;
        padding: 40px 8px;
        flex-direction: column;
        gap: 40px;
    }

    .tailored-txt-content {
        width: 100%;
    }

    .taller-container {
        width: 100%;
        position: relative;
        padding: 24px 0 60px;
    }

    .cf7-wizard__step {    
        padding: 64px 8% 48px;        
    }

    .cf7-wizard__actions p {        
        width: 100%;
    }
}

@media (max-width: 768px) {

    .nav-toggle-label {
        display: block;
    }

    .main-navigation {
        display: none;
        width: 100%;
        background: #fff;
        position: absolute;
        top: 70px;
        left: 0;
        padding: 20px;
        border-top: 1px solid #eee;
    }

    .main-menu {
        flex-direction: column;
        gap: 15px;
    }

    /* Mostrar menú al activar checkbox */
    .nav-toggle:checked ~ .main-navigation {
        display: block;
    }

    /* Animación hamburguesa a X */
    .nav-toggle:checked + .nav-toggle-label span {
        background: transparent;
    }

    .nav-toggle:checked + .nav-toggle-label span:before {
        transform: rotate(45deg);
        top: 0;
    }

    .nav-toggle:checked + .nav-toggle-label span:after {
        transform: rotate(-45deg);
        top: 0;
    }


    /* Form  */

    .tailored-title h2,  .home-title.bikes h2 {
        font-size: 48px;
    }

    .bikes-subtitle h3 {
        font-size: 16px;
        opacity: 0.5;
        line-height: 1.75;
    }

    /* Images */

    .bikes-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas */
        gap: 20px;
        padding: 0 10px;
    }


    /* Cada bike-item centrado */
    
    .bike-item {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .bike-item img {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 12px;
    }

    .bike-item h3 {
        font-size: 16px;
        margin-bottom: 0;        
    }

    /* Finantian Content */

    .financiacion-content {
      width: 100%;
      border-radius: 0;
    }

      /* Footer */

    .footer-data, .footer-address {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      align-content: center;      
    }

    .footer-address {
      padding-bottom: 24px;
    }

    .footer-address p {
      margin-bottom: 0;
    }

    ul#menu-temporal-1.footer-menu {
      flex-direction: column;
    }

    ul#menu-temporal-1.footer-menu li {
      padding: 8px 0;
    }

}

/* Responsive */
@media (max-width:540px){
  input[type="date"],
  input.date-field {
    padding-right:40px;
    height:46px;
    font-size:15px;
  }
}

@media (max-width:350px){
    .bikes-container {
        grid-template-columns: repeat(1, 1fr);
        gap: 6px;
        padding: 0 10px;
    }
}