/* Botón circular que activa el buscador.
   !important en las propiedades de forma/color: el theme/Elementor traen estilos
   globales para "button" con selectores más específicos (p.ej. ".elementor-kit-x button")
   que de otro modo pisan esta clase. */
button.mc-search-btn {
    width: 36px !important; height: 36px !important;
    min-width: 36px; max-width: 36px;
    border-radius: 50% !important;
    background: #33C794 !important; color: #fff !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    cursor: pointer; border: none !important; flex-shrink: 0;
    padding: 0 !important; margin: 0;
    line-height: 1;
    transition: background .2s;
}
button.mc-search-btn:hover,
button.mc-search-btn.active { background: #28a87a !important; }
.mc-search-btn svg { stroke: #fff !important; color: #fff; display: block; }

/* El botón se inserta como 3er hijo del header (logo, menú, botón). El header del
   theme usa "justify-content: space-between", lo que empuja el menú al centro en vez
   de dejarlo pegado al logo. Se fuerza el menú a la izquierda y el botón al extremo derecho. */
#site-header {
    justify-content: flex-start !important;
    gap: 28px;
}
#site-header .mc-search-btn { margin-left: auto; }

/* Panel: fixed para no depender del ancho de contenedores del theme/header;
   el "top" exacto (pegado bajo el header, sin hueco) lo calcula script.js. */
.mc-search-panel {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    max-width: none;
    box-sizing: border-box;
    background: rgba(36,38,119,.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .3s ease, visibility .3s;
    z-index: 99998;
    box-shadow: 0 12px 28px rgba(0,0,0,.2);
}
.mc-search-panel.open {
    max-height: 640px;
    visibility: visible;
}

.mc-search-panel-inner {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    padding: 26px 20px 30px;
    position: relative;
    box-sizing: border-box;
}

.mc-search-form {
    display: flex; align-items: center; gap: 12px;
}
.mc-search-field-wrap {
    display: flex; align-items: center; flex: 1 1 auto;
    background: #fff !important; border-radius: 6px !important;
    padding: 0 18px; height: 55px;
}
.mc-search-field-wrap svg { color: #6b7280; flex-shrink: 0; }
.mc-search-form input[type="search"] {
    border: none !important; outline: none; background: transparent !important;
    width: 100%; padding: 0 12px; height: 100%;
    font-size: 1rem; color: #1a1a2e; border-radius: 0 !important;
}
.mc-search-form button[type="submit"] {
    display: flex; align-items: center; gap: 8px;
    height: 55px; padding: 0 26px; border: none !important; cursor: pointer;
    background: #5A5AFF !important; color: #fff !important; border-radius: 6px !important;
    font-weight: 600; font-size: .95rem; white-space: nowrap;
    transition: background .2s;
}
.mc-search-form button[type="submit"]:hover { background: #33C794 !important; }

.mc-search-suggest { margin-top: 20px; }
.mc-search-suggest-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.mc-search-suggest-link {
    display: flex; align-items: center; justify-content: center;
    background: rgba(37,38,61,.8); border: 1px solid #CDCDFF;
    border-radius: 6px; padding: 12px 14px;
    color: #CDCDFF; font-size: .85rem; text-align: center;
    text-decoration: none; transition: background .15s, border-color .15s;
}
.mc-search-suggest-link:hover { background: rgba(37,38,61,.95); border-color: #CDCDFF; color: #CDCDFF; }

@media (max-width: 900px) {
    .mc-search-suggest-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .mc-search-form { flex-wrap: wrap; }
    .mc-search-form button[type="submit"] { width: 100%; justify-content: center; }
    .mc-search-suggest-grid { grid-template-columns: 1fr; }
    .mc-search-panel.open { max-height: 90vh; overflow-y: auto; }
}