/**
 * WER Frontend Styles
 * Estilos para o Modal (Popup) de Reservas
 * @version 2.0.39 (Ajusta layout do sinal no preçário)
 */

/* 1. O Fundo (Backdrop) */
#wer-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
#wer-modal-backdrop.wer-modal-aberto {
    opacity: 1;
    visibility: visible;
}

/* 2. O Wrapper do Modal (a caixa principal) */
#wer-modal-wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 99999;
    display: flex;
    flex-direction: column;
}
#wer-modal-backdrop.wer-modal-aberto #wer-modal-wrap {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* 3. Botão de Fechar */
#wer-modal-fechar {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 28px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 4. Cabeçalho (Zona Azul Clonada) */
#wer-modal-header {
    border-radius: 8px 8px 0 0;
    /* O padding é aplicado pela .wer-zona-azul interna */
}

/* 5. Corpo (Zona Amarela - Slider) */
#wer-modal-body {
    padding: 20px;
    overflow-x: hidden; /* A magia do slider */
    overflow-y: auto;
    flex-grow: 1; /* Faz com que o corpo preencha o espaço */
}
#wer-modal-slider {
    display: flex;
    width: 100%; /* O JS vai multiplicar isto pelo nº de passos */
    transition: transform 0.4s ease-in-out;
}
.wer-step {
    width: 100%; /* Cada passo tem 100% da largura do pai */
    flex-shrink: 0; /* Impede que os passos encolham */
    padding: 0 5px;
    box-sizing: border-box;
}
.wer-step-loading {
    text-align: center;
    padding: 40px 0;
    width: 100%;
}
/* Estilos dos campos do formulário (a adicionar depois) */
.wer-step .form-field {
    margin-bottom: 15px;
}
.wer-step .form-field label {
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
}
.wer-step .form-field input[type="text"],
.wer-step .form-field input[type="number"],
.wer-step .form-field textarea,
.wer-step .form-field select {
    width: 100%;
    padding: 10px;
    border: 1px solid #fff;
    border-radius: 6px;
    box-sizing: border-box; /* Garante que o padding não quebra o layout */
    margin: 0; /* PARA ALINHAR O NÚMERO CENTRAL COM OS BOTÕES */
}


/* 6. Rodapé (Navegação) */
#wer-modal-footer {
    padding: 15px;
    border-top: 1px solid #eee;
    background: #f9f9f9;
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Permite que a mensagem quebre a linha */
}
/* Mensagens de erro/sucesso no rodapé */
#wer-modal-mensagem {
    width: 100%;
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    font-weight: bold;
}
#wer-modal-mensagem.wer-mensagem-info {
    background-color: #f0f5fa;
    color: #005a9c;
}
#wer-modal-mensagem.wer-mensagem-erro {
    background-color: #fef0f0;
    color: #b32d2e;
}
#wer-modal-mensagem.wer-mensagem-sucesso {
    background-color: #f0fafa;
    color: #005a5a;
}


.wer-nav-botao {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
}
.wer-nav-botao.wer-prev {
    background-color: #eee;
    color: #555;
}
.wer-nav-botao.wer-next {
    background-color: #0073e6; /* Azul do botão "Adicionar" */
    color: #fff;
}
.wer-nav-botao.wer-final-book-btn {
    background-color: #28a745; /* Verde para o botão final */
    color: #fff;
    width: 100%; /* Ocupa a linha toda no último passo */
}
/* Alinhar botões quando há 2 */
.wer-nav-botao.wer-prev:not([style*="display: none"]) + .wer-nav-botao.wer-next {
    width: auto;
    flex-grow: 1; /* Faz o botão "Seguinte" ocupar o espaço restante */
    margin-left: 10px;
}


/* --- Estilos da Fase 4: Campos de Checkout --- */

/* Esconder o label do campo 'info' (o label é o próprio valor) */
.woocommerce-checkout .form-row.wer-checkout-info-field label {
    display: none;
}

/* Estilo para o wrapper do campo 'info' (que agora é um <div>) */
.woocommerce-checkout .wer-checkout-info-field-wrapper {
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #eee;
    margin-bottom: 20px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}
/* Remover margem do último parágrafo dentro do campo info */
.woocommerce-checkout .wer-checkout-info-field-wrapper p:last-child,
.woocommerce-checkout .wer-checkout-info-field-wrapper > *:last-child {
    margin-bottom: 0;
}


/* --- 7. Estilos dos botões de Quantidade (+/-) --- */
.wer-quantity-wrapper {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza o bloco */
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 26%; /* Largura fixa para o componente */
    margin: 0 auto; /* Centraliza o próprio wrapper (requer text-align: center no pai) */
}

.wer-qty-btn {
    background-color: #f5f5f5;
    border: none;
    color: #333;
    cursor: pointer;
    font-size: 1.5em; /* 24px */
    font-weight: bold;
    padding: 5px 15px;
    height: 44px; /* Altura de toque mobile amigável */
    line-height: 1.5;
}
.wer-qty-btn:hover {
    background-color: #e9e9e9;
}
.wer-qty-btn:disabled {
    color: #ccc;
    cursor: not-allowed;
}
.wer-qty-btn.wer-qty-minus {
    border-right: 1px solid #ddd;
    border-radius: 3px 0 0 3px;
}
.wer-qty-btn.wer-qty-plus {
    border-left: 1px solid #ddd;
    border-radius: 0 3px 3px 0;
}

/* Ajustar o input de número */
.wer-quantity-wrapper input.wer-input-passageiro {
    width: 50px !important; /* Largura para o número */
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    border: none !important; /* Remover borda do input */
    padding: 15px !important;
    height: 30px !important;
    box-sizing: border-box;
    -moz-appearance: textfield;
    appearance: textfield;
}
.wer-quantity-wrapper input.wer-input-passageiro::-webkit-outer-spin-button,
.wer-quantity-wrapper input.wer-input-passageiro::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- 8. (ATUALIZADO v.2.0.39) Estilos de Layout de Preço --- */

/* Layout Flex para a linha (Label à esquerda, Bloco de Preço à direita) */
.wer-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Alinha no topo */
    margin: 5px 0;
    /* Adicionado min-height para estabilizar o layout no preçário */
    min-height: 1.5em; 
}

/* Estilos para linhas de Total e Restante (no modal) */
.wer-zona-azul .wer-summary-total,
.wer-zona-azul .wer-summary-remaining {
    font-weight: bold;
    border-top: 1px solid #cce7f8;
    padding-top: 5px;
    margin-top: 10px;
}
.wer-zona-azul .wer-summary-remaining strong,
.wer-zona-azul .wer-summary-remaining .wer-tax-detail {
    color: #005a9c;
}

/* Bloco de Preço (à direita) */
.wer-price-block {
    text-align: right;
    flex-shrink: 0; 
    padding-left: 10px;
}

/* Preço principal (EUR) */
.wer-price-block strong {
    font-size: 1.1em;
    white-space: nowrap;
}

/* MODAL: No modal, o preço principal fica na sua própria linha */
#wer-modal-header .wer-price-block > strong {
    display: block;
}

/* PREÇÁRIO (Página Produto): Agrupa Preço (EUR) + Sinal */
.wer-price-main-line {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
}
/* PREÇÁRIO: Tira o 'display: block' de strong */
.wer-price-main-line > strong {
    display: inline;
}
/* PREÇÁRIO: Estilo do Sinal */
.wer-price-main-line > .wer-sinal-detail {
    display: inline;
    font-size: 0.9em;
    color: #555;
    font-weight: normal;
    margin-left: 5px; /* Espaço entre preço e sinal */
    white-space: nowrap;
}

#wer-modal-header .wer-price-block > strong.wer-deposit-price {
    color: #28a745;
}

#wer-modal-header .wer-price-block > strong.wer-total-price {
    color: #005a9c;
}

span.wer-tax-detail.wer-total-tax {
    color: #005a9c;
}

/* Detalhe do Imposto (por baixo do preço) */
.wer-tax-detail {
    display: block; /* Força para a linha de baixo */
    font-size: 0.9em;
    font-weight: 600;
    color: #555;
    white-space: nowrap; 
    /* Margem para separar da linha de preço principal */
    margin-top: -10px; 
}

/* Estilo para o carrinho/checkout (visto no ficheiro cart-logic) */
.wer-cart-tax-detail {
    font-size: 0.9em;
    color: #555;
    font-weight: 600;
}

/* IMPLEMENTAR CSS PARA CAMPO DE NOME COMPLETO: */

.woocommerce form .form-row-first, .woocommerce-page form .form-row-first {
    width: 98% !important;
}