/*
Theme Name:   Tastyc Child
Theme URI:    https://elmoroco.com.ve/
Description:  Child theme de Tastyc para El Moroco
Author:       El Moroco
Template:     tastyc
Version:      1.0.0
*/ 

/* ============================================================
   0. VARIABLES GLOBALES
   ============================================================ */
:root {
    --elmo-navy: #132D44;
    --elmo-blue: #24567B;
    --elmo-white: #FFFFFF;
    --elmo-black: #161616;
}


/* ============================================================
   1. DROPDOWN "MENÚ" DEL NAVBAR — separación ícono/texto
   ============================================================ */
.top-menu-nav-inner .sub-menu li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.top-menu-nav-inner .sub-menu li a i.moroco-nav-icon {
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}


/* ============================================================
   2. OCULTAR PRECIO — Menu Book (Platos Destacados / Menu WC Products)
   ============================================================ */
.tst-menu-book-price {
    display: none !important;
}


/* ============================================================
   3. FORMULARIOS METFORM (reserva y contacto)
   ============================================================ */
.moroco-reserva-form input,
.moroco-reserva-form textarea,
.moroco-reserva-form select,
.moroco-reserva-form .mf-input,
.moroco-reserva-form .mf-textarea,
.moroco-contact-form input,
.moroco-contact-form textarea,
.moroco-contact-form select,
.moroco-contact-form .mf-input,
.moroco-contact-form .mf-textarea {
    background-color: var(--elmo-white) !important;
    color: var(--elmo-black) !important;
    border: 1px solid #B7C6D1 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

.moroco-reserva-form input::placeholder,
.moroco-reserva-form textarea::placeholder,
.moroco-reserva-form .mf-input::placeholder,
.moroco-reserva-form .mf-textarea::placeholder,
.moroco-contact-form input::placeholder,
.moroco-contact-form textarea::placeholder,
.moroco-contact-form .mf-input::placeholder,
.moroco-contact-form .mf-textarea::placeholder,
.moroco-reserva-form input::-webkit-input-placeholder,
.moroco-reserva-form textarea::-webkit-input-placeholder,
.moroco-contact-form input::-webkit-input-placeholder,
.moroco-contact-form textarea::-webkit-input-placeholder,
.moroco-reserva-form input::-moz-placeholder,
.moroco-reserva-form textarea::-moz-placeholder,
.moroco-contact-form input::-moz-placeholder,
.moroco-contact-form textarea::-moz-placeholder {
    color: #667784 !important;
    opacity: 1 !important;
}

.moroco-reserva-form select,
.moroco-reserva-form .mf_select__placeholder,
.moroco-reserva-form .mf_select__single-value,
.moroco-contact-form select,
.moroco-contact-form .mf_select__placeholder,
.moroco-contact-form .mf_select__single-value {
    color: #667784 !important;
}

.moroco-reserva-form input:not(:placeholder-shown),
.moroco-reserva-form textarea:not(:placeholder-shown),
.moroco-contact-form input:not(:placeholder-shown),
.moroco-contact-form textarea:not(:placeholder-shown) {
    color: var(--elmo-black) !important;
}

.moroco-reserva-form input:focus,
.moroco-reserva-form textarea:focus,
.moroco-reserva-form select:focus,
.moroco-reserva-form .mf-input:focus,
.moroco-reserva-form .mf-textarea:focus,
.moroco-contact-form input:focus,
.moroco-contact-form textarea:focus,
.moroco-contact-form select:focus,
.moroco-contact-form .mf-input:focus,
.moroco-contact-form .mf-textarea:focus {
    border-color: var(--elmo-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(36, 86, 123, 0.16) !important;
}


/* ============================================================
   4. SELECTOR DE SEDE (home) — label, columnas, botones, media
   ============================================================ */

.moroco-sede-selector-label {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.moroco-sede-selector-label::before {
    content: "" !important;
    display: inline-block !important;
    width: 28px !important;
    height: 1px !important;
    background-color: rgba(255,255,255,.5) !important;
    flex-shrink: 0 !important;
}
.moroco-sede-selector-label,
.moroco-sede-selector-label .elementor-heading-title {
    font-family: "Fahkwang", sans-serif !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--elmo-white) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.35) !important;
    margin: 0 0 20px 0 !important;
}

.moroco-sede-selector {
    align-items: stretch !important;
}

.moroco-sede-selector-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    min-height: 100vh !important;
    padding: 60px 70px !important;
}

.moroco-sede-selector-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    max-width: none !important;
}
.moroco-sede-selector-buttons .elementor-widget-tastyc-buttons-style-2 {
    flex: 0 0 auto !important;
}

.moroco-sede-selector-media {
    position: relative !important;
    align-self: flex-start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    height: 100vh !important;
}
.moroco-sede-selector-media .elementor-image-carousel-wrapper,
.moroco-sede-selector-media .swiper {
    height: 100vh !important;
}
.moroco-sede-selector-media .swiper-slide-inner {
    height: 100vh !important;
    margin: 0 !important;
}
.moroco-sede-selector-media .swiper-slide-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

@media (max-width: 1024px) {
    .moroco-sede-selector-content {
        min-height: auto !important;
        padding: 56px 40px !important;
    }
    .moroco-sede-selector-media,
    .moroco-sede-selector-media .elementor-image-carousel-wrapper,
    .moroco-sede-selector-media .swiper,
    .moroco-sede-selector-media .swiper-slide-inner {
        height: 60vh !important;
        min-height: 420px !important;
    }
}
@media (max-width: 767px) {
    .moroco-sede-selector-content {
        padding: 40px 24px !important;
        align-items: center !important;
        text-align: center !important;
    }
    .moroco-sede-selector-label { justify-content: center !important; }
    .moroco-sede-selector-media,
    .moroco-sede-selector-media .elementor-image-carousel-wrapper,
    .moroco-sede-selector-media .swiper,
    .moroco-sede-selector-media .swiper-slide-inner {
        height: 340px !important;
        min-height: 0 !important;
    }
}


/* ============================================================
   5. WRAPPER DEL TEMA — quitar marco/padding solo en páginas
      específicas (home + página de selector de sede)
   ============================================================ */
body.home .tst-content-frame--container,
body.home .moroco-sede-selector {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.page-id-6563 .tst-content-frame--start.tst-p-60-0,
body.page-id-6563 .tst-content-frame--end.tst-p-0-60 {
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}

#tst-dynamic-banner:has(.tst-dynamic-banner-empty) {
    display: none !important;
}


/* ============================================================
   6. TARJETAS DEL MENÚ (Menu WC Products / Menu Book)
   ============================================================ */
.tst-menu-book-item {
    background-color: var(--elmo-white) !important;
    border: 1px solid rgba(19, 45, 68, 0.08) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    padding: 20px !important;
    transition: box-shadow .2s ease, transform .2s ease !important;
}
.tst-menu-book-item:hover {
    box-shadow: 0 10px 24px rgba(19, 45, 68, 0.15) !important;
    transform: translateY(-2px);
}

.tst-menu-book-item .tst-item-cover-frame,
.tst-menu-book-item .tst-item-cover-frame img {
    border-radius: 10px !important;
}

.tst-menu-book-item .tst-menu-book-descr {
    padding: 16px 4px 4px 4px !important;
}

.tst-menu-book-item .tst-menu-book-name h5.tst-mb-15 a {
    color: var(--elmo-navy) !important;
}

.tst-menu-book-item .tst-text,
.tst-menu-book-item .tst-text span {
    color: var(--elmo-blue) !important;
}
.tst-menu-book-item .tst-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.tst-menu-book-item .tst-cart-btn {
    background-color: var(--elmo-blue) !important;
    border: 1px solid var(--elmo-blue) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color .2s ease, transform .2s ease !important;
}
.tst-menu-book-item .tst-cart-btn:hover {
    background-color: var(--elmo-navy) !important;
    border-color: var(--elmo-navy) !important;
    transform: scale(1.05);
}
.tst-menu-book-item .tst-cart-btn i.fa-whatsapp {
    color: var(--elmo-white) !important;
    -webkit-text-fill-color: var(--elmo-white) !important;
    font-size: 17px !important;
    line-height: 1 !important;
    display: block !important;
    margin-right: 0 !important;
    margin: 0 !important;
}
.tst-btn i {
    margin-right: 0; !important;
}

.moroco-evento-stats .row {
    display: flex !important;
    justify-content: space-evenly !important;
    flex-wrap: wrap !important;
}
.moroco-evento-stats .col-lg-3 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}
.moroco-evento-stats .tst-count {
    text-align: center !important;
}