/*
 Theme Name:   Rideon
 Theme URI:    http://mybooking.es
 Description:  Child theme de Wordpress para Rideon Scooter Renting basado en Mybooking WordPress Theme
 Author:       Mybooking & Hector Asencio
 Author URI:   http://mybooking.es
 Template:     mybooking
 Version:      1.1.2
 License:      GNU General Public License v2 or later
 Text Domain:  rideon
 Domain Path:  /languages
*/



/* ============================================
   RIDEON – MOBILE: ESTRUCTURA PERFECTA
   TÍTULO (columna completa)
   IMAGEN + LISTA (2 columnas)
   ============================================ */
@media (max-width: 768px) {

  /* APLICAR GRID SOLO AL PRIMER BLOQUE DEL PRODUCTO */
  .mybooking-product_content > .mybooking-product_block:first-of-type {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
    align-items: start !important;
  }

  /* --- TÍTULO, FILA COMPLETA --- */
  .mybooking-product_content > .mybooking-product_block:first-of-type .rideon-product_name {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    font-size: 20px;
    margin-bottom: 5px;
    text-align: center;
  }

  /* --- IMAGEN IZQUIERDA --- */
  .mybooking-product_content > .mybooking-product_block:first-of-type .mybooking-product_image-box {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  /* --- LISTA DERECHA --- */
  .mybooking-product_content > .mybooking-product_block:first-of-type .rideon-product_data {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  /* AJUSTES VISUALES */
  .mybooking-product_image-box img {
    width: 100%;
    height: auto;
  }

  .rideon-product_description ul {
    margin: 0;
    padding-left: 16px;
    font-size: 14px;
  }
}


/* =========================================================
   RIDEON - MULTIRATE: SOLO MÓVIL (ACORDEÓN)
   NO TOCAR ESCRITORIO
   ========================================================= */

/* Por defecto: escritorio */
.mybooking-product_multiple_rate_list .rideon-rate__mobile {
  display: none;
}
.mybooking-product_multiple_rate_list .rideon-rate__desktop {
  display: block;
}

/* Móvil */
@media (max-width: 768px) {

  /* Box sizing para que no “encoga” */
  .mybooking-product_multiple_rate_list,
  .mybooking-product_multiple_rate_list * {
    box-sizing: border-box;
  }

  /* Oculta escritorio */
  .mybooking-product_multiple_rate_list .rideon-rate__desktop {
    display: none !important;
  }

  /* Muestra acordeón (DETAILS) como tarjeta full width */
  .mybooking-product_multiple_rate_list details.rideon-rate__mobile {
    display: block !important;
    width: 100%;
    margin: 0 0 14px 0;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
  }

  /* Quita marcador default */
  .mybooking-product_multiple_rate_list summary.rideon-rate__summary::-webkit-details-marker {
    display: none;
  }

  /* Summary fila (cerrado) -> barra limpia y uniforme */
  .mybooking-product_multiple_rate_list summary.rideon-rate__summary {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 14px 14px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    background: rgba(255,255,255,.92); /* en vez de gris para que se vea “pro” */
    border-bottom: 1px solid rgba(0,0,0,.06);
    cursor: pointer;
  }

  /* Título: truncado si es largo */
  .mybooking-product_multiple_rate_list .rideon-rate__summary-title {
    font-weight: 800;
    font-size: 16px;
    line-height: 1.15;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 52%;
    display: block;
  }

  .mybooking-product_multiple_rate_list .rideon-rate__summary-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .mybooking-product_multiple_rate_list .rideon-rate__summary-price {
    font-weight: 800;
    font-size: 15px;
    white-space: nowrap;
  }

  /* Botón pequeño "Reservar" del summary */
  .mybooking-product_multiple_rate_list .rideon-rate__summary-btn {
    appearance: none;
    padding: 9px 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    line-height: 1;

    border: 1px solid rgba(0,0,0,.10);
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.03);
  }

  /* Panel desplegable */
  .mybooking-product_multiple_rate_list .rideon-rate__panel {
    padding: 14px;
    background: #fff;
  }

  /* Listas dentro (se ve más compacto) */
  .mybooking-product_multiple_rate_list .rideon-rate__panel ul {
    margin: 0;
    padding-left: 18px;
  }

  /* Botón grande dentro */
  .mybooking-product_multiple_rate_list .rideon-rate__footer .rideon-product_rate-choose-btn {
    width: 100%;
    margin-top: 12px;
    border-radius: 999px;
  }

  /* (Opcional) Flecha del acordeón */
  .mybooking-product_multiple_rate_list summary.rideon-rate__summary::after {
    content: "▾";
    font-size: 14px;
    opacity: .55;
    margin-left: 8px;
  }
  .mybooking-product_multiple_rate_list details[open] > summary.rideon-rate__summary::after {
    content: "▴";
    opacity: .70;
  }
}

/* =========================================================
   FIX PADDING — RIDEON MULTIRATE (SOLO MÓVIL)
   Quita el padding interno que rompe el ancho
   ========================================================= */
@media (max-width: 768px) {

  /* Quitar padding del wrapper del rate */
  .mybooking-product_multiple_rate_list
  .rideon-product_rate.rideon-rate {
    padding: 0 !important;
    margin: 0 0 14px 0;
    width: 100%;
  }

  /* Quitar padding heredado del bloque */
  .mybooking-product_multiple_rate_list
  .rideon-product_rates-block
  .mybooking-product_block {
    padding: 0 !important;
  }

  /* Asegurar que el acordeón ocupa todo el ancho */
  .mybooking-product_multiple_rate_list
  details.rideon-rate__mobile {
    width: 100%;
    margin: 0 0 14px 0;
  }

  /* El summary sí tiene padding (barra visible) */
  .mybooking-product_multiple_rate_list
  summary.rideon-rate__summary {
    padding: 14px 16px;
  }

  /* El panel interno controla su propio padding */
  .mybooking-product_multiple_rate_list
  .rideon-rate__panel {
    padding: 14px 16px;
  }
}

/* =========================================================
   FIX SUMMARY (SOLO MÓVIL)
   Evita que el título/precio desaparezcan (Premium)
   ========================================================= */
@media (max-width: 768px) {

  .mybooking-product_multiple_rate_list summary.rideon-rate__summary{
    width: 100%;
    color: #23393D !important;          /* fuerza texto visible */
  }

  .mybooking-product_multiple_rate_list .rideon-rate__summary-left{
    flex: 1 1 auto;
    min-width: 0;                        /* CLAVE: evita colapso */
    display: flex;
    align-items: center;
  }

  .mybooking-product_multiple_rate_list .rideon-rate__summary-title{
    display: block;
    font-weight: 800;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;                 /* evita saltos raros */
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit !important;
  }

  .mybooking-product_multiple_rate_list .rideon-rate__summary-right{
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    color: inherit !important;
  }

  .mybooking-product_multiple_rate_list .rideon-rate__summary-price{
    display: inline-block;
    font-weight: 800;
    font-size: 15px;
    color: inherit !important;
  }

  /* Si algún estilo global pone opacidad rara */
  .mybooking-product_multiple_rate_list summary.rideon-rate__summary *{
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* FIX: algunas tarifas (Premium) heredan texto blanco.
   Forzamos color oscuro dentro del acordeón móvil */
.mybooking-product_multiple_rate_list .rideon-rate__mobile .rideon-rate__panel,
.mybooking-product_multiple_rate_list .rideon-rate__mobile .rideon-rate__panel *{
  color: #23393D !important;
}

/* Opcional: también el summary (por si el título/€ salieran blancos) */
.mybooking-product_multiple_rate_list .rideon-rate__mobile > summary.rideon-rate__summary,
.mybooking-product_multiple_rate_list .rideon-rate__mobile > summary.rideon-rate__summary *{
  color: #23393D !important;
}