/**
 * PH Eventos — Estilos da loja (WooCommerce).
 * Carregado apenas em páginas WC quando necessário.
 */

/* Aviso Macedos Pirotécnica */
.ph-macedos-notice {
    background: var(--ph-surface);
    color: var(--ph-text);
    border-left: 4px solid var(--ph-accent);
    padding: 24px 28px;
    margin: 30px 0;
    border-radius: 4px;
    line-height: 1.55;
    clear: both;
    width: 100%;
    box-sizing: border-box;
}
.ph-macedos-notice h3 {
    margin: 0 0 14px;
    color: var(--ph-accent);
    font-size: 1.25em;
}
.ph-macedos-notice h4 {
    margin: 18px 0 8px;
    font-size: 1.05em;
    color: var(--ph-text);
}
.ph-macedos-notice p {
    margin: 0 0 10px;
}
.ph-macedos-notice ul {
    margin: 0 0 10px 22px;
    padding: 0;
}
.ph-macedos-notice ul li {
    margin-bottom: 6px;
}
.ph-macedos-notice a {
    color: var(--ph-accent);
    text-decoration: underline;
}
.ph-macedos-notice a:hover {
    color: #ffffff;
}
@media (max-width: 767px) {
    .ph-macedos-notice {
        padding: 18px 20px;
    }
}

/* Aviso de zonas restritas Macedos (carrinho + checkout) */
.ph-aviso-zonas-macedos {
    background: var(--ph-surface);
    color: var(--ph-text);
    border-left: 4px solid var(--ph-accent);
    padding: 18px 22px;
    margin: 0 0 24px;
    border-radius: 4px;
    line-height: 1.55;
}
.ph-aviso-zonas-macedos strong {
    color: var(--ph-accent);
}
.ph-aviso-zonas-macedos em {
    font-style: normal;
    color: var(--ph-text-muted);
}

/* Verificação de identidade Macedos (checkout) */
.ph-macedos-id-fields {
    background: var(--ph-surface);
    color: var(--ph-text);
    border-left: 4px solid var(--ph-accent);
    padding: 20px 24px;
    margin: 24px 0;
    border-radius: 4px;
    clear: both;
    float: none;
    width: 100%;
    box-sizing: border-box;
}
.ph-macedos-id-fields h3 {
    margin-top: 0;
    color: var(--ph-accent);
}
.ph-macedos-id-fields > p {
    margin-bottom: 16px;
}
.ph-macedos-id-fields__note {
    font-size: 0.9em;
    color: var(--ph-text-muted);
    margin-top: 10px;
    margin-bottom: 0;
}


/* ==========================================================================
   Carrinho / Checkout / Conta — tema escuro (v0.39.0)

   Estas páginas são servidas pelo page.php (não pelo woocommerce.php), e até
   agora não tinham CSS nenhum: o WooCommerce desenhava-as com os seus estilos
   default (fundos claros) por cima do tema escuro. Isto alinha-as com a loja.
   ========================================================================== */

/* --- Tabelas (itens do carrinho + resumo da encomenda) --- */
.ph-main--wc .shop_table {
    width: 100%;
    border-collapse: collapse;
    background: #1a1a1a;
    border: 1px solid var(--ph-border);
    border-radius: 12px;
    overflow: hidden;
    color: var(--ph-text);
    margin-bottom: 32px;
}
.ph-main--wc .shop_table th {
    background: var(--ph-surface);
    color: var(--ph-accent);
    font-family: var(--ph-font-body);
    font-weight: 600;
    text-align: left;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ph-border);
}
.ph-main--wc .shop_table td {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--ph-text);
    vertical-align: middle;
}
.ph-main--wc .shop_table tr:last-child td { border-bottom: 0; }
.ph-main--wc .shop_table a { color: var(--ph-accent); text-decoration: none; }
.ph-main--wc .shop_table a:hover { text-decoration: underline; }
.ph-main--wc .shop_table img { max-width: 64px; height: auto; border-radius: 6px; }
.ph-main--wc .shop_table .amount,
.ph-main--wc .shop_table .product-subtotal { color: var(--ph-accent); font-weight: 600; }

/* Botão "remover item" (o × vermelho do WC) */
.ph-main--wc a.remove {
    color: var(--ph-text-muted) !important;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
}
.ph-main--wc a.remove:hover { color: var(--ph-accent) !important; background: transparent !important; }

/* --- Totais do carrinho --- */
.ph-main--wc .cart-collaterals { display: flex; justify-content: flex-end; }
.ph-main--wc .cart_totals {
    background: #1a1a1a;
    border: 1px solid var(--ph-border);
    border-radius: 12px;
    padding: 24px 28px;
    min-width: 340px;
    max-width: 100%;
}
.ph-main--wc .cart_totals h2 {
    font-family: var(--ph-font-heading);
    color: var(--ph-text);
    font-size: 24px;
    margin: 0 0 16px;
}
.ph-main--wc .cart_totals .order-total .amount { color: var(--ph-accent); font-size: 20px; }

/* --- Formulários (checkout, cupão, conta) --- */
.ph-main--wc .form-row { margin-bottom: 18px; }
.ph-main--wc label {
    display: block;
    color: var(--ph-text);
    font-size: var(--ph-fs-sm);
    font-weight: 500;
    margin-bottom: 6px;
}
.ph-main--wc .required { color: var(--ph-accent); border: 0; }

.ph-main--wc input[type="text"],
.ph-main--wc input[type="email"],
.ph-main--wc input[type="tel"],
.ph-main--wc input[type="password"],
.ph-main--wc input[type="number"],
.ph-main--wc textarea,
.ph-main--wc select,
.ph-main--wc .select2-container .select2-selection--single {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid var(--ph-border);
    border-radius: 6px;
    color: var(--ph-text);
    padding: 12px 14px;
    font-family: var(--ph-font-body);
    font-size: var(--ph-fs-base);
    height: auto;
}
.ph-main--wc input:focus,
.ph-main--wc textarea:focus,
.ph-main--wc select:focus {
    outline: none;
    border-color: var(--ph-accent);
}
.ph-main--wc input::placeholder,
.ph-main--wc textarea::placeholder { color: var(--ph-text-muted); }

/* select2 (país / distrito) — o WC injecta o seu próprio dropdown */
.ph-main--wc .select2-container .select2-selection__rendered { color: var(--ph-text); line-height: 1.4; }
.ph-main--wc .select2-container .select2-selection__arrow { top: 8px; }
.select2-dropdown {
    background: #1a1a1a;
    border: 1px solid var(--ph-border);
    color: var(--ph-text);
}
.select2-results__option { background: #1a1a1a; color: var(--ph-text); }
.select2-results__option--highlighted { background: var(--ph-surface) !important; color: var(--ph-accent) !important; }

/* Quantidade */
.ph-main--wc .quantity input.qty {
    width: 72px;
    text-align: center;
    padding: 8px;
}

/* Cupão */
.ph-main--wc .coupon { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; }
.ph-main--wc .coupon input.input-text { max-width: 240px; }

/* --- Checkout: 2 colunas --- */
.ph-main--wc .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ph-main--wc .col2-set .col-1,
.ph-main--wc .col2-set .col-2 { width: auto; float: none; }
.ph-main--wc h3 {
    font-family: var(--ph-font-heading);
    color: var(--ph-text);
    font-size: 22px;
    margin: 0 0 18px;
}

/* --- Meios de pagamento --- */
.ph-main--wc #payment,
.ph-main--wc .woocommerce-checkout-review-order {
    background: #1a1a1a;
    border: 1px solid var(--ph-border);
    border-radius: 12px;
    padding: 24px 28px;
    margin-top: 24px;
}
.ph-main--wc ul.payment_methods {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    border-bottom: 1px solid var(--ph-border);
}
.ph-main--wc ul.payment_methods li { padding: 12px 0; }
.ph-main--wc ul.payment_methods label {
    display: inline-block;
    color: var(--ph-text);
    font-weight: 600;
    margin: 0 0 0 8px;
}
.ph-main--wc ul.payment_methods img { max-height: 28px; width: auto; margin-left: 10px; vertical-align: middle; }
.ph-main--wc .payment_box {
    background: var(--ph-surface);
    border-radius: 8px;
    color: var(--ph-text);
    padding: 16px 18px;
    margin: 10px 0 0;
    font-size: var(--ph-fs-sm);
}
.ph-main--wc .payment_box::before { display: none; }
.ph-main--wc .woocommerce-terms-and-conditions-wrapper { margin: 16px 0; }
.ph-main--wc .woocommerce-privacy-policy-text p { color: var(--ph-text-muted); font-size: var(--ph-fs-sm); }

/* Botão final */
.ph-main--wc #place_order,
.ph-main--wc .checkout-button { width: 100%; font-size: var(--ph-fs-lg); padding: 16px 24px !important; }

/* --- Mobile --- */
@media (max-width: 860px) {
    .ph-main--wc .col2-set { grid-template-columns: 1fr; gap: 8px; }
    .ph-main--wc .cart-collaterals { justify-content: stretch; }
    .ph-main--wc .cart_totals { min-width: 0; width: 100%; }
    .ph-main--wc .shop_table { display: block; overflow-x: auto; }
    .ph-main--wc .coupon { flex-wrap: wrap; }
    .ph-main--wc .coupon input.input-text { max-width: 100%; }
}

/* ============================================================
   Logótipos dos métodos de pagamento no checkout (v0.39.7)
   Os logos oficiais têm tinta escura e fundo transparente — no
   checkout escuro desapareciam. Vão numa pastilha branca.
   ============================================================ */
.ph-pay-logos {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 8px;
	vertical-align: middle;
}

.ph-pay-logo {
	display: block;
	width: auto;
	/* a regra antiga (ul.payment_methods img) limitava TUDO a 28px e esmagava
	   os cartoes — por isso o max-height tem de ser anulado aqui */
	max-height: none !important;
}

/* Multibanco / MB WAY: logos oficiais em NEGATIVO (letras brancas, fundo
   transparente) — assentam directamente no fundo escuro do site, sem pastilha. */
.ph-pay-logo--escuro {
	height: 40px !important;
	background: transparent;
	border: 0;
	padding: 0;
}

/* Visa + Mastercard */
/* O visamaster.png e QUADRADO: a 34px de altura ficava com 34px de largura e
   os dois cartoes nao se liam. Precisa de mais altura que os logos compridos. */
.ph-pay-logo--cartao {
	height: 56px !important;
}

/* O label do método fica alinhado com o logo */
.woocommerce-checkout .wc_payment_method label {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
}

/* ============================================================
   Instruções de pagamento EuPago (Multibanco/MBWAY) — tema escuro (v0.39.8)

   O plugin injecta um <style> inline com fundo #FFFFFF e letra #000000.
   Como esse bloco aparece DEPOIS deste ficheiro no documento, ganha por
   ordem — daí o !important (não é preguiça: é a única forma sem editar o
   plugin, que perderíamos na próxima actualização).
   ============================================================ */
table.woocommerce_eupago_table {
	border: 1px solid var(--ph-accent, #c9a227);
	border-radius: 6px;
	overflow: hidden;
	margin: 1.5rem auto !important;
}

table.woocommerce_eupago_table th,
table.woocommerce_eupago_table td {
	background-color: #1a1a1a !important;
	color: #fff !important;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

table.woocommerce_eupago_table th {
	background-color: #111 !important;
	color: var(--ph-accent, #c9a227) !important;
	font-size: 1.05rem;
}

/* Referência e valor: o que o cliente vai mesmo copiar */
table.woocommerce_eupago_table td:last-child {
	font-weight: 600;
	letter-spacing: .02em;
}

/* O banner Multibanco/MBWAY tem tinta escura — pastilha branca para se ler */
table.woocommerce_eupago_table th img {
	background: #fff;
	padding: 6px 10px;
	border-radius: 4px;
	max-width: 180px;
	height: auto;
}

/* Aviso "X foi adicionado ao seu carrinho": o ✓ do WooCommerce e um
   ::before absoluto que assentava POR CIMA do texto. Damos-lhe espaco. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	position: relative;
	padding-left: 3.5rem !important;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .75rem;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	position: absolute;
	left: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}

/* ============================================================
   Caixa de pagamento (.payment_box) — tema escuro (v0.39.10)

   O WooCommerce pinta esta caixa de cinza-claro por omissao. Isso causava
   DOIS problemas:
     1) o texto do MBWAY ("numero de telemovel registado...") saia preto
        sobre branco no checkout escuro;
     2) o Stripe copiava esse branco para dentro do iframe do Payment
        Element — o JS do plugin constroi a "appearance" a partir dos
        estilos computados de .payment_box / #payment / body e do input
        #wc-stripe-hidden-style-input. Escurecer aqui resolve o iframe
        sem tocar na API do Stripe.
   ============================================================ */
#payment,
#payment ul.payment_methods,
#payment div.form-row {
	background: transparent !important;
	border: 0;
}

#payment ul.payment_methods li {
	background: transparent !important;
	color: var(--ph-text, #f5f5f0);
}

#payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
	background: #1a1a1a !important;
	color: var(--ph-text, #f5f5f0) !important;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 6px;
}

/* O triangulo que aponta para o metodo escolhido tem de acompanhar */
#payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: #1a1a1a !important;
}

#payment div.payment_box p,
#payment div.payment_box label,
#payment div.payment_box li,
#payment div.payment_box strong,
.woocommerce-PaymentBox p,
.woocommerce-PaymentMethod label {
	color: var(--ph-text, #f5f5f0) !important;
}

/* Campos dentro da caixa (e o input escondido que o Stripe usa de modelo) */
#payment div.payment_box input.input-text,
#payment div.payment_box select,
#wc-stripe-hidden-style-input {
	background: #0f0f0f !important;
	color: var(--ph-text, #f5f5f0) !important;
	border: 1px solid rgba(255, 255, 255, .18) !important;
	border-radius: 6px;
}

/* ============================================================
   Checkout: facturação e envio LADO A LADO (v0.39.13)

   O #customer_details tem exactamente 2 filhos (col-1 = facturação,
   col-2 = envio). Fixamos cada um na sua coluna e na MESMA linha —
   sem depender do wrapper .ph-main--wc, que e o que falhava quando o
   LiteSpeed servia CSS antigo e as duas colunas caiam em linhas
   diferentes (envio ~1200px abaixo da facturacao).
   ============================================================ */
#customer_details.col2-set,
.woocommerce-checkout #customer_details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;   /* senao a coluna curta estica ate a altura da outra */
}

#customer_details > .col-1 {
	grid-column: 1;
	grid-row: 1;
	width: auto;
	float: none;
}

#customer_details > .col-2 {
	grid-column: 2;
	grid-row: 1;
	width: auto;
	float: none;
}

@media (max-width: 768px) {
	#customer_details.col2-set,
	.woocommerce-checkout #customer_details {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	#customer_details > .col-1,
	#customer_details > .col-2 {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ============================================================
   Página "encomenda recebida" e "ver encomenda": moradas de
   facturação e de envio lado a lado, alinhadas pelo topo (v0.39.15)

   Este contentor NAO e o #customer_details do checkout — e o
   .woocommerce-columns--addresses. Sem align-items:start, a coluna
   mais curta esticava e as moradas ficavam desencontradas.
   ============================================================ */
.woocommerce-columns--addresses,
.woocommerce-customer-details .col2-set,
.woocommerce-order-details + .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}

.woocommerce-columns--addresses > .col-1,
.woocommerce-customer-details .col2-set > .col-1 {
	grid-column: 1;
	grid-row: 1;
	width: auto;
	float: none;
}

.woocommerce-columns--addresses > .col-2,
.woocommerce-customer-details .col2-set > .col-2 {
	grid-column: 2;
	grid-row: 1;
	width: auto;
	float: none;
}

/* Os títulos das duas colunas na mesma linha de base */
.woocommerce-columns--addresses > .col-1 > h2,
.woocommerce-columns--addresses > .col-2 > h2 {
	margin-top: 0;
}

@media (max-width: 768px) {
	.woocommerce-columns--addresses,
	.woocommerce-customer-details .col2-set {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.woocommerce-columns--addresses > .col-1,
	.woocommerce-columns--addresses > .col-2,
	.woocommerce-customer-details .col2-set > .col-1,
	.woocommerce-customer-details .col2-set > .col-2 {
		grid-column: 1;
		grid-row: auto;
	}
}

/* ============================================================
   MINHA CONTA (v0.39.21)

   Nao existia UMA regra para esta pagina: ficava com o CSS cru do
   WooCommerce (feito para tema claro) sobre o fundo escuro do site.
   Login/registo em cartoes, campos escuros, painel com menu lateral.
   ============================================================ */

/* --- Login + Registo lado a lado --- */
.woocommerce-account .u-columns.col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: start;
	max-width: 1024px;
	margin: 0 auto;
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
	width: auto;
	float: none;
	background: var(--ph-surface, #1a1a1a);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 10px;
	padding: 28px;
}

.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
	margin: 0 0 1.25rem;
	font-family: var(--ph-font-heading);
	font-size: 1.5rem;
	color: var(--ph-accent, #D4AF37);
}

/* --- Campos --- */
.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: .9rem;
	color: var(--ph-text-muted, #B4B2A9);
}

.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account select,
.woocommerce-account textarea {
	width: 100%;
	padding: 12px 14px;
	background: #0f0f0f;
	color: var(--ph-text, #F5F5F0);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 6px;
	font-size: 1rem;
}

.woocommerce-account input:focus,
.woocommerce-account select:focus {
	outline: none;
	border-color: var(--ph-accent, #D4AF37);
}

.woocommerce-account .woocommerce-form-login__rememberme,
.woocommerce-account .woocommerce-privacy-policy-text,
.woocommerce-account .woocommerce-form__label-for-checkbox {
	color: var(--ph-text-muted, #B4B2A9);
	font-size: .9rem;
}

.woocommerce-account .lost_password a,
.woocommerce-account a {
	color: var(--ph-accent, #D4AF37);
}

/* --- Botões --- */
.woocommerce-account .button,
.woocommerce-account button.button,
.woocommerce-account input.button {
	background: var(--ph-accent, #D4AF37);
	color: #0F0F0F;
	border: 0;
	border-radius: 6px;
	padding: 12px 22px;
	font-weight: 600;
	cursor: pointer;
}

.woocommerce-account .button:hover {
	filter: brightness(1.1);
}

/* --- Painel do cliente (depois do login) --- */
.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce::after {
	content: "";
	display: table;
	clear: both;
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 260px 1fr;
		gap: 32px;
		align-items: start;
	}
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--ph-surface, #1a1a1a);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 10px;
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 14px 18px;
	color: var(--ph-text, #F5F5F0);
	text-decoration: none;
	font-size: .95rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: rgba(255, 255, 255, .04);
	color: var(--ph-accent, #D4AF37);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: rgba(212, 175, 55, .12);
	color: var(--ph-accent, #D4AF37);
	font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-content {
	background: var(--ph-surface, #1a1a1a);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 10px;
	padding: 28px;
	color: var(--ph-text, #F5F5F0);
}

/* --- Tabela de encomendas --- */
.woocommerce-account table.shop_table,
.woocommerce-account table.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	color: var(--ph-text, #F5F5F0);
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	padding: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	text-align: left;
}

.woocommerce-account table.shop_table th {
	color: var(--ph-accent, #D4AF37);
	font-weight: 600;
}

/* --- Moradas --- */
.woocommerce-account .woocommerce-Addresses.col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: start;
}

.woocommerce-account .woocommerce-Address > header,
.woocommerce-account .woocommerce-Address address {
	color: var(--ph-text, #F5F5F0);
}

@media (max-width: 768px) {
	.woocommerce-account .u-columns.col2-set,
	.woocommerce-account .woocommerce-Addresses.col2-set {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}