/* ==========================================================================
   1. CONFIGURAÇÕES GERAIS E CORES
   ========================================================================== */

:root {
    --hey-delivery-box: #F1DBAE;
    --hey-creme: #F4EDDC;
    --hey-heykitchen: #F35200;
    --hey-golden-fries: #F4AB12;
    --hey-avocado: #002922;
    --hey-salmon: #F69F7D;
    --hey-white: #FFFFFF;
}

.contacto-global-section {
    background-color: var(--hey-delivery-box);
    font-family: 'neue-haas-grotesk-text', sans-serif !important;
    width: 100%;
    padding: 20px 0;
}

/* ==========================================================================
   2. ESTRUTURA DA GRID PRINCIPAL & RESPONSIVIDADE
   ========================================================================== */

.contacto-container-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    width: min(1800px, 95%);
    margin: 40px auto;
    padding: 0 20px;
    align-items: stretch; 
}

/* Configuração Mobile e Tablet (Até 991px) */
@media (max-width: 991px) {
    .contacto-col-esquerda {
        display: contents; 
    }

    .contacto-title, 
    .contacto-subtitle, 
    .contacto-mapa-wrapper {
        order: 1;
    }

    .contacto-col-direita-box {
        order: 2;
    }

    .contacto-bloco-morada {
        order: 3 !important;
    }
}

/* Configuração em Desktop (A partir de 992px) */
@media (min-width: 992px) {
    .contacto-container-grid {
        grid-template-columns: 1fr 1fr;
    }

    .contacto-col-esquerda {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* Força o mapa a aparecer APENAS em Desktop */
    .contacto-mapa-wrapper {
        display: flex !important;     
        height: auto;       
        flex-grow: 1;       
        min-height: 250px;  
    }

    .contacto-bloco-morada {
        margin-top: auto; /* Empurra a morada para o rodapé */
    }

}

/* ==========================================================================
   3. COLUNA ESQUERDA (CONTEÚDO, MAPA E MORADA)
   ========================================================================== */

.contacto-title {
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--hey-avocado);
    line-height: 1.05;
    margin: 0 0 20px 0;
    font-family: 'obviously-condensed', sans-serif;
}

.contacto-subtitle {
    font-size: 1.05rem;
    color: var(--hey-avocado);
    line-height: 1.4;
    margin: 0 0 25px 0;
    font-weight: 500;
}

/* Mapa wrapper: Oculto por padrão em Telemóvel e Tablet */
.contacto-mapa-wrapper {
    display: none;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 25px;
}

.contacto-mapa-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* Bloco da Morada */
.contacto-bloco-morada {
    background-color: var(--hey-heykitchen);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    color: var(--hey-white);
}

.morada-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    opacity: 0.9;
}

.morada-texto {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 20px 0;
}

/* Redes Sociais */
.contacto-redes-sociais {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.contacto-redes-sociais a:hover{
    transform: scale(1.1);
}

.contacto-redes-sociais path:hover  {
    fill: var(--hey-golden-fries);
}
    .link-morada{ color: var(--hey-delivery-box);}
    .link-morada:hover{ color: var(--hey-golden-fries); }

/* ==========================================================================
   4. COLUNA DIREITA (CAIXA DO FORMULÁRIO)
   ========================================================================== */

.contacto-col-direita-box {
    background-color: var(--hey-heykitchen);
    border-radius: 25px;
    padding: 45px 35px;
    color: var(--hey-white);
}

.box-email-title {
    font-size: 3.2rem;
    font-weight: 900;
    margin: 0 0 20px 0;
    letter-spacing: 0.5px;
    font-family: 'obviously-condensed', sans-serif;
    color: var(--hey-delivery-box);
}

.box-desc {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px 0;
    color: var(--hey-golden-fries);
}

.box-subdesc {
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0 0 30px 0;
    opacity: 0.85;
}

/* ==========================================================================
   5. FORMULÁRIO CONTACT FORM 7
   ========================================================================== */

.cf7-form-wrapper form {
    width: 100%;
}

.hey-form-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

@media (min-width: 768px) {
    .form-row {
        flex-direction: row; 
        gap: 20px; 
    }

    .form-row .form-group {
        flex: 1;
        min-width: 0; 
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px; 
    width: 100%;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 700;
    color:var(--hey-avocado) !important;
    display: block;
    margin: 0 !important;
    padding-bottom: 10px;
}

/* Resets e Limpezas de tags automáticas do WordPress (<p> e <br>) */
.hey-form-container p,
.form-group p {
    margin: 0 !important;
    padding: 0 !important;
}

.hey-form-container br,
.form-group br {
    display: none !important;
}

.cf7-form-wrapper .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    margin: 0px !important;
    padding-bottom: 10px;
}

/* Estilização Geral dos Inputs */
.cf7-form-wrapper input[type="text"],
.cf7-form-wrapper input[type="email"],
.cf7-form-wrapper input[type="tel"],
.cf7-form-wrapper select,
.cf7-form-wrapper textarea {
    width: 100%;
    background-color: #f3ebd8 !important;
    color: var(--hey-avocado) !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 14px 22px !important;
    font-size: 0.95rem !important;
    font-family: inherit;
    box-sizing: border-box;
    height: auto;
}

.cf7-form-wrapper ::placeholder {
    color: #a79c84;
}

/* Elementos específicos: Textarea */
.cf7-form-wrapper textarea {
    height: 120px;
    border-radius: 18px !important; 
    resize: none;
}

/* Elementos específicos: Selects / Dropdowns */
.cf7-form-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230d3529' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 16px;
    padding-right: 45px !important;
}

.cf7-form-wrapper select:has(option[value=""]:checked) {
    color: #a79c84 !important;
}

.cf7-form-wrapper select option {
    color: #333333; 
    background-color: var(--hey-creme);
}

.cf7-form-wrapper select option[value=""] {
    color: #a79c84;
}

/* Botão Submit */
.cf7-form-wrapper input.hey-submit[type="submit"] {
    width: 100%;
    background-color: var(--hey-golden-fries)!important;
    color: var(--hey-creme) !important;
    font-size: 1rem;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    margin-top: 10px;
    display: block;
    padding: 15px;
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-family: 'neue-haas-grotesk-text', sans-serif;
}

.cf7-form-wrapper input.hey-submit[type="submit"]:hover {
    color: var(--hey-avocado) !important;
    background-color: var(--hey-golden-fries) !important;
}

.wpcf7-spinner {
    display: none !important;
}

/* ==========================================================================
   6. MENSAGENS DE ERRO E ESTADO (CONTACT FORM 7)
   ========================================================================== */

span.wpcf7-not-valid-tip {
    color: var(--hey-white) !important;
    background-color: #d93025 !important;
    padding: 8px 15px !important;
    border-radius: 20px;
    font-size: 12px !important;
    display: block !important; 
    width: 100% !important;    
    box-sizing: border-box !important;
    margin-top: 8px !important;
    text-align: center;
}

.wpcf7-response-output {
    margin: 20px 0 0 0 !important;
    padding: 15px 25px !important;
    border-radius: 20px !important; 
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border: 2px solid transparent !important;
    line-height: 1.4 !important;
}

.wpcf7 form.sent .wpcf7-response-output {
    background-color: #f1e1b8 !important; 
    color: #333 !important;
    border-color: #fff !important; 
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unconfirmed .wpcf7-response-output {
    background-color: #d93025 !important; 
    color: #fff !important;
    border: none !important;
}

.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    background-color: #333 !important;
    color: #f1e1b8 !important;
    border: none !important;
}