/* Área de cliente.
   Usa os tokens e os componentes do site (.container, .btn, .cform, .radius-15).
   Aqui está só o cartão que envolve os formulários e o que é próprio destes ecrãs. */
.conta{padding-top:70px;padding-bottom:90px;background-color:var(--grey-50)}
/* o .section>.container do site é uma coluna alinhada à esquerda; aqui queremos
   o cartão ao meio, por isso repõe-se a direção e o alinhamento */
.conta .conta__wrap{flex-direction:row;justify-content:center;align-items:flex-start}
.conta__caixa{width:100%;max-width:470px;padding:44px 44px 40px;background:var(--white);border:1px solid var(--grey-200);box-shadow:0 10px 30px rgba(17,35,55,.06)}
.conta__cabeca{margin-bottom:28px;text-align:center}
.conta__titulo{font-size:28px;font-weight:700;line-height:1.25;color:var(--navy)}
.conta__sub{margin-top:8px;font-size:15px;line-height:1.6;color:var(--text)}

.conta__form .cform__fields{display:flex;flex-direction:column;row-gap:22px}
.conta__form .cform__field{width:100%}
.conta__form .cform__input{height:46px;line-height:46px;font-size:15px;border-radius:8px}
.conta__form .cform__label{margin-bottom:6px}
.conta__btn{width:100%;margin-top:28px;padding-top:14px;padding-bottom:14px;font-size:15px;font-weight:500}
.conta__ajuda{display:block;margin-top:7px;font-size:12.5px;line-height:1.5;color:#6a7183}

/* password com botão de ver */
.conta__pw{position:relative;display:block}
.conta__pw .cform__input{padding-right:46px}
.conta__ver{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:44px;height:46px;padding:0;color:#6a7183;background:none;border:0;cursor:pointer;border-radius:0 8px 8px 0}
.conta__ver:hover{color:var(--navy)}
/* o site pinta os ícones com fill; estes são de traço, por isso repõe-se aqui */
.conta__ver .icon{width:19px;height:19px;fill:none;stroke:currentColor}
.conta__ver .olho-aberto{display:none}
.conta__ver.is-visivel .olho-fechado{display:none}
.conta__ver.is-visivel .olho-aberto{display:block}

.conta__esqueci{display:block;margin-top:16px;font-size:14px;text-align:center;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.conta__esqueci:hover{color:var(--text)}

/* separador com palavra ao meio */
.conta__ou{display:flex;align-items:center;gap:14px;margin:30px 0 20px;font-size:13px;color:#6a7183;text-transform:lowercase}
.conta__ou::before,.conta__ou::after{content:"";flex:1;height:1px;background:var(--grey-200)}
.conta__secundario{width:100%;padding-top:13px;padding-bottom:13px;font-size:15px;font-weight:500}

/* mensagens depois de gravar */
.conta-aviso{margin:0 0 22px;padding:14px 16px;border-radius:8px;font-size:14.5px;line-height:1.55}
.conta-aviso--ok{background:#e8f5ec;color:#12603a}
.conta-aviso--erro{background:#fdeceb;color:#a12820}
.conta-aviso--atencao{background:#fff5e0;color:#6b4a00}

/* painel */
/* o .section>.container do site encolhe os filhos ao conteudo; nos ecrãs de lista
   queremos que ocupem a largura toda */
.conta .conta__painel{align-items:stretch}
.conta__painel .conta__titulo{text-align:left;font-size:32px;margin-bottom:26px}
.conta-cartoes{display:flex;flex-wrap:wrap;gap:20px;margin-top:6px}
.conta-cartao{flex:1 1 300px;padding:28px;background:var(--white);border:1px solid var(--grey-200)}
.conta-cartao__titulo{font-size:19px;font-weight:700;color:var(--navy);margin-bottom:8px}
.conta-cartao__texto{font-size:15px;line-height:1.6;color:var(--text)}
.conta__sair{margin-top:36px}

@media (max-width:478px){
  .conta{padding-top:40px;padding-bottom:60px}
  .conta__caixa{padding:30px 22px 28px}
  .conta__titulo{font-size:24px}
  .conta__painel .conta__titulo{font-size:26px}
}

/* ---------- navegação da conta ---------- */
.conta-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 28px;padding-bottom:14px;border-bottom:1px solid var(--grey-200)}
.conta-nav__item{padding:8px 14px;font-size:15px;color:var(--text);border-radius:50px;background:none;border:0;cursor:pointer;font-family:var(--font);transition:var(--ease)}
.conta-nav__item:hover{background:var(--grey-50);color:var(--navy)}
.conta-nav__item.is-current{background:var(--navy);color:var(--white)}
.conta-nav__sair{margin-left:auto}
.conta-nav__botao{color:#6a7183}

/* ---------- listas de reservas ---------- */
.conta-seccao{display:flex;align-items:baseline;gap:10px;margin:30px 0 14px;font-size:18px;font-weight:700;color:var(--navy)}
.conta-seccao small{font-size:13px;font-weight:500;color:#6a7183}
.reservas-lista{display:flex;flex-direction:column;gap:14px}
.reserva-cartao{display:block;padding:22px 24px;background:var(--white);border:1px solid var(--grey-200);transition:var(--ease)}
.reserva-cartao:hover{border-color:var(--navy);box-shadow:0 6px 20px rgba(17,35,55,.07)}
.reserva-cartao__topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.reserva-cartao__grupo{font-size:18px;font-weight:700;color:var(--navy)}
.reserva-cartao__datas{display:flex;flex-wrap:wrap;gap:14px 40px}
.reserva-cartao__datas>div{display:flex;flex-direction:column;gap:2px;min-width:200px}
.reserva-cartao__rotulo{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#6a7183}
.reserva-cartao__datas b{font-size:15px;font-weight:600;color:var(--text)}
.reserva-cartao__datas small{font-size:13px;color:#6a7183}
.reserva-cartao__fundo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--grey-100,#eef0f6)}
.reserva-cartao__numero{font-size:13px;color:#6a7183}
.reserva-cartao__total{font-size:17px;font-weight:700;color:var(--navy)}

.reserva-estado{padding:5px 12px;font-size:12px;font-weight:600;border-radius:50px;white-space:nowrap}
.reserva-estado--ok{background:#e8f5ec;color:#12603a}
.reserva-estado--pendente{background:#fff5e0;color:#6b4a00}
.reserva-estado--cancelada{background:#fdeceb;color:#a12820}
.reserva-estado--outro{background:var(--grey-50);color:#4a5163}

/* ---------- detalhe ---------- */
.reserva-detalhe{margin-top:6px;padding:26px 28px;background:var(--white);border:1px solid var(--grey-200)}
.reserva-detalhe__topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--grey-100,#eef0f6)}
.reserva-detalhe__total{font-size:22px;font-weight:700;color:var(--navy)}
.reserva-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px 32px;margin:0}
.reserva-campos dt{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#6a7183;margin-bottom:3px}
.reserva-campos dd{margin:0;font-size:15px;line-height:1.5;color:var(--text)}

.conta-contacto{margin-top:20px;padding:24px 28px;background:var(--grey-50);border:1px solid var(--grey-200)}
.conta-contacto__titulo{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:6px}
.conta-contacto__texto{margin-bottom:16px;font-size:15px;line-height:1.6;color:var(--text)}

/* ---------- estados vazios ---------- */
.conta-vazio{padding:34px 30px;background:var(--white);border:1px solid var(--grey-200);text-align:center}
.conta-vazio__titulo{font-size:19px;font-weight:700;color:var(--navy);margin-bottom:8px}
.conta-vazio__texto{max-width:52ch;margin:0 auto 20px;font-size:15px;line-height:1.6;color:var(--text)}

.conta__rodape-links{margin-top:26px;font-size:15px}
.conta__rodape-links a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
a.conta-cartao:hover{border-color:var(--navy)}
/* ---------- os meus dados ---------- */
.conta-bloco{margin-top:20px;padding:26px 28px;background:var(--white);border:1px solid var(--grey-200)}
.conta-bloco:first-of-type{margin-top:6px}
.conta-bloco__titulo{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:6px}
.conta-bloco__texto{margin-bottom:16px;font-size:15px;line-height:1.6;color:var(--text)}
.conta-bloco .conta__form{margin-top:16px}
.conta-bloco .conta__btn{width:auto;min-width:200px}
.conta-bloco .reserva-campos{margin-bottom:18px}
/* Campo desativado: continua legivel, mas nao parece editavel. */
.conta-bloco .cform__input:disabled{background:var(--grey-50);color:#6a7183;cursor:not-allowed}

/* Pedido de alteracao ou cancelamento, dentro do bloco de contacto. */
.conta-contacto__form{margin-bottom:14px}
.conta-contacto__form .cform__textarea{height:auto;min-height:92px}
.conta-contacto__form .btn{margin-top:12px}
.conta-contacto__nota{margin-bottom:16px;font-size:13px;line-height:1.5;color:#6a7183}

/* Nos dados do cliente os campos ficam a dois por linha, e alguns ocupam a linha
   toda (email e morada, que sao longos e ficariam apertados a metade). */
.conta-bloco .cform__fields{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));row-gap:26px;column-gap:16px}
.conta-bloco .cform__field{grid-column:span 6}
.conta-bloco .cform__field--full{grid-column:1 / -1}
.conta__form>.conta-bloco+.conta-bloco{margin-top:20px}
@media (max-width:640px){.conta-bloco .cform__field{grid-column:1 / -1}}

/* ---------- seguro, franquia e coberturas ---------- */
.conta-seguro{margin-top:20px;padding:24px 28px;background:var(--white);border:1px solid var(--grey-200)}
.conta-seguro__topo{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 20px}
.conta-seguro__titulo{font-size:17px;font-weight:700;color:var(--navy)}
.conta-seguro__franquia{display:flex;align-items:baseline;gap:8px;font-size:15px}
.conta-seguro__franquia-rotulo{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#6a7183}
.conta-seguro__franquia-valor{font-weight:700;color:var(--navy)}
/* Sem franquia é uma boa notícia para quem lá chega: mostra-se como tal. */
.conta-seguro__franquia-valor.e-zero{color:#127a51}
.conta-seguro__nota{margin-top:12px;font-size:14px;line-height:1.6;color:#6a7183}
.conta-coberturas{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 26px}
.conta-coberturas__linha{display:flex;align-items:flex-start;gap:9px;font-size:15px;line-height:1.5;color:var(--text)}
.conta-coberturas__icone{flex:0 0 auto;width:15px;height:15px;margin-top:4px;fill:#127a51}
/* O que o seguro NÃO cobre continua visível, mas apagado: esconder era esconder o que
   interessa a quem está a ver o que contratou. */
.conta-coberturas__linha.e-inativa{color:#8a91a3}
.conta-coberturas__linha.e-inativa .conta-coberturas__icone{fill:#b6bccb}

.cform__input.mono{font-family:var(--mono,ui-monospace,Menlo,monospace);letter-spacing:.04em}
@media (max-width:478px){.conta-nav__sair{margin-left:0;width:100%}.reserva-cartao__datas>div{min-width:100%}}

/* ---------- esqueleto: o que está a chegar da AnyRent ----------
   O painel e a lista de reservas já não esperam pela API para desenhar a página (ver
   inc/conta/endpoint.php). Enquanto a lista não chega fica isto, com a FORMA do que
   vem: mesmos cartões, mesma altura, mesmo espaçamento. É o que faz a página não
   saltar quando o conteúdo entra — e é meio ponto de CLS que se poupa. */
.conta-remoto{min-height:220px}
.conta-remoto__repetir{margin-top:14px}

/* As pecas do esqueleto (.esq e o brilho) vivem em components/esqueleto.css,
   partilhadas com o funil de reserva. Aqui ficam so as FORMAS da area de cliente. */
.esq-cartao{pointer-events:none}
.esq-cartao .reserva-cartao__topo,
.esq-cartao .reserva-cartao__datas,
.esq-cartao .reserva-cartao__fundo{align-items:center}

.esq--titulo{width:180px;height:15px;margin:26px 0 14px}
.esq--titulo-curto{width:120px;height:15px;margin-bottom:12px}
.esq--linha{width:100%;height:12px;margin-top:8px}
.esq--linha-curta{width:60%}
.esq--grupo{width:110px;height:17px}
.esq--estado{width:78px;height:20px;border-radius:999px}
.esq--rotulo{width:62px;height:10px;margin-bottom:7px}
.esq--data{width:132px;height:15px;margin-bottom:6px}
.esq--local{width:96px;height:11px}
.esq--numero{width:140px;height:13px}
.esq--total{width:78px;height:17px}

/* Texto de entrada do painel. Substituiu a proxima reserva, que obrigava a ir buscar
   o historico inteiro a AnyRent so para encher um cartao (ver pages/conta-painel.php). */
.conta__intro{max-width:56ch;margin:22px 0 26px;font-size:16px;line-height:1.65;color:#6a7183}

/* Pedir cancelamento a partir da lista (ver partials/conta-reservas-lista.php). O cartao
   e um <a> e nao pode ter um formulario dentro, por isso o pedido vive por baixo dele. */
.reserva-item{display:flex;flex-direction:column}
.reserva-item>.reserva-cartao{border-bottom-left-radius:0;border-bottom-right-radius:0}
.reserva-cancelar{padding:10px 24px 12px;background:var(--grey-50);border:1px solid var(--grey-200);border-top:0;border-radius:0 0 15px 15px}
.reserva-cancelar__abrir{cursor:pointer;font-size:14px;font-weight:600;color:#b45309;list-style:none}
.reserva-cancelar__abrir::-webkit-details-marker{display:none}
.reserva-cancelar[open] .reserva-cancelar__abrir{margin-bottom:10px}
.reserva-cancelar__form .cform__field{margin-bottom:10px}