/* Caixa de cerca del capçalera.
   Plegada mostra només la lupa; en obrir-la, un panell cobreix tota la barra del
   capçalera, com al catàleg OTT.

   El panell va amb position:fixed i JS que li dona les mides del capçalera: dins
   d'una plantilla d'Elementor no es pot donar per fet quin ascendent fa de bloc
   contenidor, i una capa absoluta quedaria enganxada a la caixa del widget. */

.mzv-hsearch {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.mzv-hsearch-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 0;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
    line-height: 0;
    transition: background-color .15s ease, color .15s ease;
}

.mzv-hsearch-toggle svg {
    width: 20px;
    height: 20px;
}

/* El tema porta una regla global
     button:hover, [type=submit]:hover { background: #cc3366; color: #fff }
   que pinta la lupa de vermell en passar-hi per sobre. Cal guanyar-li en
   especificitat, i per això aquestes regles porten `.mzv-hsearch` al davant. */
.mzv-hsearch .mzv-hsearch-toggle:hover,
.mzv-hsearch .mzv-hsearch-toggle:focus {
    background-color: var(--mzv-hsearch-hover-bg, #ffffff);
    color: var(--mzv-hsearch-hover-color, inherit);
    outline: none;
}

/* Els botons de dins del panell no segueixen el color de la lupa plegada: la
   lupa ha de fer joc amb el capçalera (blanca a la portada, damunt de la foto)
   i el panell sempre té fons clar, on una icona blanca desapareixeria. */
.mzv-hsearch .mzv-hsearch-submit,
.mzv-hsearch .mzv-hsearch-close {
    color: var(--mzv-hsearch-panel-icon, #111111);
}

.mzv-hsearch .mzv-hsearch-submit:hover,
.mzv-hsearch .mzv-hsearch-submit:focus,
.mzv-hsearch .mzv-hsearch-close:hover,
.mzv-hsearch .mzv-hsearch-close:focus {
    background-color: rgba(0, 0, 0, .06);
    color: var(--mzv-hsearch-panel-icon, #111111);
    outline: none;
}

/* ------------------------------------------------------------- panell */

.mzv-hsearch-panel {
    position: fixed;
    z-index: 9999;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 0 24px;
    box-sizing: border-box;
    background: var(--mzv-hsearch-panel-bg, #ffffff);
}

.mzv-hsearch.is-open .mzv-hsearch-panel {
    display: flex;
}

/* Doble classe a posta. El tema porta
     input[type="search"], input[type="email"], … { border: 1px solid #666; border-radius: 3px }
   que és 0,1,1 d'especificitat i guanyava a `.mzv-hsearch-input` (0,1,0), deixant
   el camp amb cantonades de 3px. `.mzv-hsearch .mzv-hsearch-input` és 0,2,0 i hi
   passa per damunt. */
.mzv-hsearch .mzv-hsearch-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 20px;
    border: 1px solid var(--mzv-hsearch-field-border, #d4d4d4);
    border-radius: var(--mzv-hsearch-field-radius, 999px);
    background: var(--mzv-hsearch-field-bg, #fafafa);
    color: var(--mzv-hsearch-field-color, #111111);
    font-size: 15px;
    line-height: 1.4;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.mzv-hsearch .mzv-hsearch-input:focus {
    border-color: var(--mzv-hsearch-field-border-focus, #767676);
    box-shadow: none;
}

/* Safari/Chrome pinten una creueta pròpia al type=search que trenca la píndola. */
.mzv-hsearch .mzv-hsearch-input::-webkit-search-decoration,
.mzv-hsearch .mzv-hsearch-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.mzv-hsearch-submit,
.mzv-hsearch-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
    line-height: 0;
    transition: background-color .15s ease;
}

.mzv-hsearch-submit svg,
.mzv-hsearch-close svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 767px) {
    .mzv-hsearch-panel { padding: 0 14px; gap: 6px; }
    .mzv-hsearch .mzv-hsearch-input { height: 40px; font-size: 14px; }
}

/* El camp de cerca, amb la tipografia de text del web. */
.mzv-hsearch .mzv-hsearch-input,
.mzv-hsearch .mzv-hsearch-input::placeholder {
    font-family: "Nunito Sans", system-ui, -apple-system, sans-serif;
    font-weight: 300;
}

/* El text de mostra hereta el color del camp: així queda llegible tant sobre el
   panell blanc dels interiors com sobre el transparent de la portada, sense
   haver-lo de configurar dues vegades. */
.mzv-hsearch .mzv-hsearch-input::placeholder {
    color: inherit;
    opacity: .6;
}