.portfolio_nav { display:none; }
.top_bar.fixed
{
	position: fixed;
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	
	animation-duration: 0.5s;	
	-webkit-animation-duration: 0.5s;
	z-index: 999;
	visibility: visible !important;
	top: 0px;
}

.top_bar.fixed #menu_wrapper div .nav
{
	margin-top: 16px;
}

.top_bar.fixed #searchform
{
	margin-top: 8px;
}

.top_bar.fixed .header_cart_wrapper
{
	margin-top: 21px;
}

.top_bar.fixed #menu_wrapper div .nav > li > a
{
	padding-bottom: 24px;
}

.top_bar.fixed .logo_wrapper img
{
	max-height: 40px;
	width: auto;
}

@media only screen and (min-width: 961px)
{
	body #mobile_nav_icon
	{
	    display: none;
	}
}

#page_caption .page_title_wrapper
{
	text-align: left}
.page_title_inner
{
	float: none;
}


body
{
	background-image: url('https://www.mesoncid.com/wp-content/uploads/2017/04/paper_bg.png');
	background-repeat: repeat;
}



#wrapper.hasbg .above_top_bar
{
    background: #ba122b !important;
	background: rgb(186, 18, 43, 0.9) !important;
	background: rgba(186, 18, 43, 0.9) !important;
}


@media only screen and (max-width: 768px) {
	html[data-menu=leftmenu] .mobile_menu_wrapper
	{
		right: 0;
		left: initial;
		
		-webkit-transform: translate(400px, 0px);
		-ms-transform: translate(400px, 0px);
		transform: translate(400px, 0px);
		-o-transform: translate(400px, 0px);
	}
}

html[data-menu=leftmenu] .mobile_main_nav, #sub_menu
{
	clear: both;
}

html[data-menu=leftmenu] #wrapper
{
	padding-top: 0;
}
#custom_logo {
	margin-top: 0px;
	/*padding: 1em;*/
	background-color: #fff;
	border: 3px solid #ba122b;
	border-top: 0;
	border-radius: 0px 0px 10px 10px;
}

#custom_logo img {
	margin: 1em;
width: auto !important;
	height: 200px !important;

}

#custom_logo img.zoom  { /* logo size on scroll */
	min-height: 125px;
	/*padding: .4em;*/
	margin: .4em;
}

.texto-inicio {font-size: 1.2em; margin-top: -.8em;}
.texto-inicio-titulo {font-size: 2em; font-weight: bold;}

#footer {display: none;} /* remove space prefooter */
.footer_bar_wrapper {margin: 0;}

.ppb_title_first {color: #fff !important;}
#reservation_submit_btn {background-color: #ba122b;}

.platos-menu-column {
	margin: .1em .2em;
	border: 1px solid black;
	border-radius: 4px;
	padding: .5em;
	}

.platos-menu-column-header {	
	text-align: center;
	background-color: #ba122b;
	margin: -.5em -.5em .2em -.5em;
	padding: 0px;
	font-weight: bold;
	color: #fff;
	border-radius: 6px 6px 0 0;
	}

h2.ppb_title {color: #000}
	
#copyright {font-size: 1.1em;}	

@media only screen and (min-width: 961px) { body #mobile_nav_icon {display: none !important; } } /* fixes vertical align of "reservations" in chrome */

/* reservation form */
div.time-picker {color: #fff;}
#seats option, #select-menu-elegido option, #time option {color: #000; background-color: #fff;} /* fixes "comensales" white text on white background on chrome */
.reservation_form input[type=text], .reservation_form textarea, .reservation_form select, .reservation_form input[type=text]:focus, .reservation_form textarea:focus {
    border: 1px solid #fff;
    padding: 8px 10px 8px 10px;
}

#toTop {border: 1px solid #000; background: rgb(186, 18, 43) !important;}

.gdpr_label {
 display: block !important;
text-transform: unset !important;
font-size: smaller !important;
font-weight: normal !important;
}

.nuevo-icon-menu {
    height: 18px;
    margin: 3px 0 0 5px;
    position: absolute;
}

.nuevo-icon {
    margin: 8px 0 0 5px;
    position: absolute;
    height: 18px !important;
}
#menu_wrapper div .nav li ul li a:hover, #menu_wrapper div .nav li.current-menu-parent ul li a:hover {background: #c9122b !important;}

/* --- 2026 REPARACIÓN DE ICONOS FONT AWESOME v5 --- */

/* Facebook (Cabecero y Pie de página) */
.fa-facebook:before, .fa-facebook-official:before {
    content: "\f39e" !important;
    font-family: "Font Awesome 5 Brands" !important;
    font-weight: 400 !important;
}

/* Icono de Mapa / Dirección */
.fa-map-marker:before {
    content: "\f3c5" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}

/* Icono de Reloj / Horarios */
.fa-clock-o:before {
    content: "\f017" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 400 !important;
}

/* Icono de Teléfono */
.fa-phone:before {
    content: "\f095" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}




/* --- FORMULARIO MESÓN CID FIVE STAR PLUGIN --- */

/* 1. Contenedor y Títulos */
.rtb-booking-form {
    max-width: 900px;
    margin: 40px auto;
    background: #ffffff !important;
    padding: 45px;
    border: 1px solid #e1e1e1;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}

.rtb-booking-form legend {
    font-size: 1.1em;
    font-weight: 700;
    color: #ba122b;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 30px;
    border-bottom: 2px solid #ba122b;
    width: 100%;
    padding-bottom: 8px;
}

/* 2. Fila 1: Fecha, Hora y Comensales (3 Columnas) */
.rtb-booking-form fieldset.reservation {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    border: none;
    margin-bottom: 25px;
}

/* 3. Fila 2: Nombre y Email (2 Columnas) */
.rtb-booking-form fieldset.rtb-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    border: none;
}

/* El teléfono y el mensaje ocuparán el ancho completo debajo */
.rtb-contact .phone, .rtb-field-message, .rtb-field-consent, .rtb-form-footer {
    grid-column: span 2 !important;
}

/* 4. Estilo de los Campos (Más grandes y limpios) */
.rtb-booking-form label {
    font-weight: 600;
    font-size: 12px;
    color: #555;
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
}

.rtb-booking-form input, 
.rtb-booking-form select, 
.rtb-booking-form textarea {
    width: 100% !important;
    height: 52px; /* Altura más profesional */
    padding: 12px 18px !important;
    border: 1px solid #ccc !important;
    background: #fdfdfd !important;
    font-size: 16px !important;
    border-radius: 0 !important;
    box-sizing: border-box;
}

.rtb-booking-form textarea { height: 120px; }

/* 5. Ajuste del Check de Privacidad (Más pequeño) */
.rtb-confirm.consent-statement label {
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    gap: 12px;
    white-space: nowrap;
    text-transform: none !important;
    font-weight: normal !important;
}

.rtb-confirm.consent-statement input[type="checkbox"] {
    width: 18px !important; /* Tamaño reducido */
    height: 18px !important;
    margin: 0 !important;
    cursor: pointer;
}

/* 6. Pie: Captcha y Botón perfectamente alineados */
.rtb-form-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px;
    margin-top: 15px;
}

#rtb_recaptcha {
    flex: 0 0 304px;
    height: 78px;
}

.rtb-form-submit {
    flex: 1;
}

.rtb-booking-form button[type="submit"] {
    height: 78px; /* Altura idéntica al captcha */
    background: #ba122b !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: background 0.3s;
}

.rtb-booking-form button[type="submit"]:hover { background: #000 !important; }

/* 7. BLOQUEO TOTAL DEL CALENDARIO (Centrado absoluto) */
.picker--opened .picker__holder {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0,0,0,0.7) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1000000 !important;
}

.picker__frame {
    position: relative !important;
    margin: 0 !important;
    width: 90% !important;
    max-width: 500px !important; /* Calendario más ancho */
}

/* Selector de hora un poco menos ancho para que no se pierda */
#rtb-time_root .picker__frame {
    max-width: 320px !important;
}

/* Colores Granates */
.picker__day--selected, .picker__day--selected:hover, .picker--opened .picker__day--highlighted,
.picker__list-item--selected, .picker__list-item--highlighted {
    background: #ba122b !important;
    color: #fff !important;
}

/* 8. Móvil */
@media (max-width: 768px) {
    .rtb-booking-form fieldset.reservation, 
    .rtb-booking-form fieldset.rtb-contact { grid-template-columns: 1fr; }
    .rtb-form-footer { flex-direction: column; height: auto; }
    #rtb_recaptcha { order: 1; }
    .rtb-form-submit { order: 2; width: 100%; }
    .rtb-booking-form button[type="submit"] { height: 60px; }
    .rtb-confirm.consent-statement label { white-space: normal; }
}

/* --- HASTA AQUI FORMULARIO MESÓN CID FIVE STAR PLUGIN --- */








/* --- FORMULARIO MESÓN CID PREMIUM (FINAL STAGE - FIREFOX FIX) --- */
.meson-cid-form {
    max-width: 1000px;
    margin: 30px auto;
    background: #ffffff !important;
    padding: 45px;
    border: 1px solid #e1e1e1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.meson-cid-form p { display: contents !important; }
.meson-cid-form br { display: none !important; }

.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 25px;
    margin-bottom: 5px;
    align-items: flex-start;
}

.form-group { position: relative; width: 100%; margin-bottom: 15px; }

.form-group label {
    display: block;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    color: #ba122b;
    margin-bottom: 8px;
}

/* --- ICONO FECHA: FIX PARA FIREFOX Y CURSOR --- */
.input-con-icono {
    padding-left: 48px !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="%23ba122b" viewBox="0 0 16 16"><path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: 15px center !important;
    cursor: pointer !important; /* Mano en todos los navegadores */
}

/* Ocultar icono nativo gris en Firefox */
input[type="date"] {
    appearance: none !important;
    -moz-appearance: textfield !important;
}

/* Ocultar icono nativo en Chrome/Safari */
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    margin: 0; padding: 0; opacity: 0 !important; cursor: pointer;
}

/* --- FLECHAS EN SELECTS --- */
.meson-cid-form select {
    appearance: none !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%23ba122b" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 15px) center !important;
    cursor: pointer;
}

/* --- PRIVACIDAD --- */
.acceptance-row label {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    gap: 12px;
    text-transform: none !important;
}
.acceptance-row input[type="checkbox"] { width: 18px !important; height: 18px !important; margin: 0 !important; cursor: pointer; }

.legal-box-full { background: #f7f7f7; padding: 15px 20px; border-left: 4px solid #ba122b; margin: 5px 0 25px 0; }
.legal-text-content { font-size: 0.85em !important; color: #666; line-height: 1.5; margin-top: 8px !important; text-align: justify; }

/* --- PIE DEL FORMULARIO (BOTÓN Y AVISO) --- */
.submit-row-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; 
    gap: 25px;
    margin-top: 10px;
}

.submit-wrapper { text-align: center; grid-column: 2; }

.turnstile-centered {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.aviso-confirmacion { 
    color: #ba122b; 
    font-weight: bold; 
    margin-bottom: 25px !important; /* Más separación del botón */
    font-size: 15px !important; /* Ajustado a 15px */
    line-height: 1.4;
    text-transform: uppercase;
    display: block !important;
}

.meson-cid-form input[type="submit"] {
    background-color: #ba122b !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 18px 40px !important;
    border: none !important;
    cursor: pointer;
    width: 100% !important;
}

/* Estilo general inputs */
.meson-cid-form input, .meson-cid-form select, .meson-cid-form textarea { border: 1px solid #cccccc !important; border-radius: 0 !important; background-color: #fdfdfd !important; font-size: 15px !important; height: 52px; box-sizing: border-box; }
.meson-cid-form textarea { height: 100px; }

@media (max-width: 850px) {
    .form-row-3, .submit-row-grid { grid-template-columns: 1fr; }
    .submit-wrapper { grid-column: 1; }
    .acceptance-row label { white-space: normal !important; }
}

/* --- ESTILO CALENDARIO PROFESIONAL --- */
#ui-datepicker-div {
    z-index: 999999 !important; /* Para que salga por encima de todo */
    border: 1px solid #ccc;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    font-family: inherit;
}

/* Días bloqueados (Lunes y Festivos) */
.dia-cerrado span {
    background-color: #eeeeee !important;
    color: #bbbbbb !important;
    text-decoration: line-through;
}

/* Cabecera del calendario */
.ui-datepicker-header {
    background: #f8f8f8;
    border: none;
}

/* Día seleccionado: GRANATE */
.ui-state-highlight, .ui-widget-content .ui-state-highlight {
    border: 1px solid #ba122b !important;
    background: #fff5f5 !important;
    color: #ba122b !important;
}

.ui-state-active, .ui-widget-content .ui-state-active {
    border: 1px solid #ba122b !important;
    background: #ba122b !important;
    color: #ffffff !important;
}

/* Flechas de navegación */
.ui-datepicker-prev:hover, .ui-datepicker-next:hover {
    background: #eee !important;
    cursor: pointer;
}




/* Fila de 2 columnas para el formulario de contacto */
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 10px;
    align-items: flex-start;
}

@media (max-width: 768px) {
    .form-row-2 { grid-template-columns: 1fr; }
}

/* --- DISEÑO DE AVISOS CONTACT FORM 7 (MESÓN CID) --- */

/* 1. Estilo base para todos los mensajes de respuesta */
.wpcf7-response-output {
    margin: 30px auto 0 auto !important;
    padding: 25px !important;
    text-align: center !important;
    font-weight: bold !important;
    border-radius: 2px !important;
    border: none !important; /* Quitamos el borde fino */
    max-width: 850px;
}

/* 2. MENSAJE DE ÉXITO (Envío correcto) */
.wpcf7-form.sent .wpcf7-response-output {
    background-color: #398f14 !important; /* Verde profesional */
    color: #ffffff !important;           /* Texto blanco */
    font-size: 20px !important;          /* Texto más grande */
    box-shadow: 0 4px 15px rgba(57, 143, 20, 0.3);
}

/* 3. MENSAJE DE ERROR (Validación o fallo) */
.wpcf7-form.invalid .wpcf7-response-output, 
.wpcf7-form.unconfirmed .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
    background-color: #ba122b !important; /* Granate Mesón Cid */
    color: #ffffff !important;           /* Texto blanco */
    font-size: 16px !important;
    box-shadow: 0 4px 15px rgba(186, 18, 43, 0.3);
}

/* 4. Ajuste para que el texto sea legible */
.wpcf7-response-output strong {
    color: #fff !important;
}





/* PARA EL MAPA */
/* Efecto visual para el mapa de situación */
.page-id-142 .parallax_scroll_image img:hover {
    opacity: 0.8 !important;
    transition: opacity 0.3s ease;
}




/* --- FORZAR COLOR GRANATE EN COOKIEYES (VERSION GRATIS) --- */

/* Botón Aceptar */
.cky-btn-accept {
    background-color: #ba122b !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important; /* Estilo cuadrado como tu formulario */
}

/* Botón Rechazar */
.cky-btn-reject {
    background-color: #ba122b !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Botón Ajustes o Personalizar */
.cky-btn-customize {
    color: #ba122b !important;
    border: 1px solid #ba122b !important;
    background: transparent !important;
}

/* Texto del banner */
.cky-banner-text {
    font-size: 13px !important;
    line-height: 1.4 !important;
}





/* ============================================================
   SECCIÓN FACEBOOK + ÚLTIMAS NOTICIAS (HOME)
   ============================================================ */

/* 1. Contenedor Maestro: Ajustado para reducir espacio inferior */
.fb-parallax-wrapper {
    position: relative;
    max-width: 1250px;
    margin: 0 auto;
    padding-top: 60px;
    padding-bottom: 0px !important; /* Eliminamos aire inferior */
    min-height: 620px !important;   /* Altura mínima ajustada al iframe de 600px */
}

/* 2. Succión de la sección siguiente (elimina el hueco hasta "Abiertos a su servicio") */
.fb-parallax-wrapper:after {
    content: "";
    display: block;
    margin-bottom: -50px; /* Sube la siguiente sección 50px */
}

/* Eliminar el margen del bloque de texto de Grand Restaurant que lo envuelve */
.ppb_text {
    margin-bottom: 0 !important;
}

/* 3. Columna Facebook (Escritorio) */
.fb-side-container {
    width: 500px !important;
    max-width: 500px !important;
    margin-left: 80px !important; /* Desplazado a la derecha como pediste */
}

.fb-box-shadow {
    background: #fff;
    border: 1px solid #e1e1e1;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    line-height: 0;
    overflow: hidden;
}

.fb-side-container iframe {
    display: block;
}

/* 4. Caja de Texto Flotante (Escritorio) */
.text-side-parallax {
    width: 32%;
    position: absolute !important;
    right: 120px;
    top: 120px;
    z-index: 10;
}

.text-card-content {
    padding: 40px;
    background: #ffffff;
    border: 1px solid #e1e1e1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* ============================================================
   AJUSTES PARA MÓVILES (MAX-WIDTH: 960px)
   ============================================================ */
@media screen and (max-width: 960px) {
    
    /* A. FIJAR CAJAS QUE DESAPARECEN (Parallax Fix) */
    /* Esto soluciona que "Abiertos a su servicio" y otras cajas no se vean al hacer scroll */
    .one_half.parallax_scroll, 
    .one_half.parallax_scroll_image,
    .text-side-parallax,
    .ppb_card_two_cols_with_image .parallax_scroll {
        position: relative !important;
        top: auto !important; 
        left: auto !important; 
        right: auto !important;
        width: 100% !important;
        transform: none !important;
        opacity: 1 !important;      
        visibility: visible !important;
        display: block !important;
        margin-bottom: 20px !important;
    }

    /* B. REORDENAR FACEBOOK EN MÓVIL */
    .fb-parallax-wrapper {
        display: flex !important;
        flex-direction: column !important;
        padding: 20px;
        min-height: auto !important; /* Quitamos la altura mínima en móvil */
    }

    .text-side-parallax { 
        order: 1; 
        margin-bottom: 30px !important; 
    }

    .fb-side-container {
        order: 2;
        width: 93% !important; /* Tu ajuste de ancho */
        margin-left: 0.7em !important; /* Tu ajuste de margen */
        max-width: 100% !important;
        overflow: hidden;
    }

    /* C. TRUCO DE ESCALADO PARA EVITAR CORTE DE TEXTO EN FB */
    .fb-side-container iframe {
        width: 500px !important; /* Le dejamos creer que tiene 500px */
        height: 600px !important;
        transform: scale(0.68); /* Lo encogemos para que quepa sin cortar nada */
        transform-origin: 0 0;
        margin-bottom: -190px; /* Compensa el hueco que deja el escalado */
    }
}

/* Ajuste extra para móviles muy pequeños */
@media screen and (max-width: 380px) {
    .fb-side-container iframe {
        transform: scale(0.62);
        margin-bottom: -230px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
#custom_logo {
		margin-top: 0px;
		/*padding: .3em;*/
		background-color: #fff;
		border: 2px solid #ba122b;
		border-top: 0;
		border-radius: 0px 0px 7px 7px;
	}
	
	#custom_logo > img:nth-child(1)  { /* logo size on scroll */
	min-height: 10em;
	margin: .6em;
	}

.menu_buttons_content { vertical-align: middle; } /* vertical center the reservations menu button */}

@media only screen and (max-width: 767px) {
#custom_logo {
		margin-top: 0px;
		/*padding: .2em;*/
		background-color: #fff;
		border: 2px solid #ba122b;
		border-top: 0;
		border-radius: 0px 0px 7px 7px;
	}
	
	#custom_logo > img:nth-child(1)  { /* logo size on scroll */
	min-height: 6.5em;
	margin: .4em;
	}

.menu_buttons_content { vertical-align: middle; } /* vertical center the reservations menu button */

.texto-inicio {font-size: 1em; }

.texto-inicio-titulo {
    font-size: 1.5em;
    line-height: 1em;
}

h4 { font-size: 13px; }
#copyright {font-size: 1em; padding: 0 20px 0 20px;}

.parallax title {height: 160px;}

.nuevo-icon-menu {
    height: 18px;
    margin: 8px 0 0 5px;
    position: absolute;
}

.nuevo-icon {
    margin: 5px 0 0 2px;
    height: auto !important;
}}

@media only screen and (min-width: 480px) and (max-width: 767px) {
#custom_logo {
		margin-top: 0px;
		padding: .2em;
		background-color: #fff;
		border: 2px solid #ba122b;
		border-top: 0;
		border-radius: 0px 0px 7px 7px;
	}
	
	#custom_logo > img:nth-child(1)  { /* logo size on scroll */
	min-height: 9em;
	margin: .6em;
	}}