/* =========================================================
   MENU MOBILE — BANCO SOL (visual premium)
   Aplica ao teu HTML actual (offcanvas + list-group + details)
   ========================================================= */

:root{
  --sol-yellow: #f4b400;     /* amarelo Sol */
  --sol-yellow-2: #ffd24a;   /* amarelo suave */
  --sol-black: #111;
  --sol-ink: #0f1c2e;        /* azul/ink escuro (premium) */
  --sol-muted: #6b7280;
  --sol-border: rgba(15, 28, 46, .12);
  --sol-bg: #ffffff;
  --sol-soft: #f7f7f7;
  --radius: 14px;
}

/* Offcanvas */
#mobileMenu.offcanvas{
  background: var(--sol-bg);
  width: 92%;
  max-width: 380px;
  border-left: 1px solid var(--sol-border);
  box-shadow: -20px 0 50px rgba(0,0,0,.18);
}

/* Header do offcanvas */
#mobileMenu .offcanvas-header{
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--sol-border);
  background:
    linear-gradient(180deg, rgba(244,180,0,.10), rgba(244,180,0,0));
}

#mobileMenu .offcanvas-title{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--sol-ink);
}

#mobileMenu .btn-close{
  opacity: .75;
}
#mobileMenu .btn-close:hover{
  opacity: 1;
}

/* Corpo */
#mobileMenu .offcanvas-body{
  padding: 14px;
}

/* List-group base */
#mobileMenu .list-group{
  gap: 10px;
}

/* Cada “bloco” do menu (list-group-item) */
#mobileMenu .list-group-item{
  border: 1px solid var(--sol-border);
  border-radius: var(--radius);
  background: #fff;
  padding: 12px 12px;
}

/* Links directos (se existirem noutros menus) */
#mobileMenu .list-group-item-action{
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--sol-ink);
  font-weight: 700;
  border: 1px solid var(--sol-border);
  background: #fff;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}

#mobileMenu .list-group-item-action:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15,28,46,.08);
  border-color: rgba(244,180,0,.45);
}

/* DETAILS / SUMMARY */
#mobileMenu details{
  width: 100%;
}

#mobileMenu summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  color: var(--sol-ink);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Remove o triângulo default */
#mobileMenu summary::-webkit-details-marker{ display: none; }

/* Seta custom (abre/fecha) */
#mobileMenu summary::after{
  content: "›";
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(244,180,0,.14);
  color: var(--sol-ink);
  font-size: 22px;
  transform: rotate(0deg);
  transition: transform .15s ease, background .15s ease;
}

#mobileMenu details[open] > summary::after{
  transform: rotate(90deg);
  background: rgba(244,180,0,.22);
}

/* Sub-níveis dentro do details */
#mobileMenu details > .mt-2{
  margin-top: 10px !important;
}

/* Botões internos (itens do submenu) */
#mobileMenu .btn.btn-outline-dark{
  border-color: rgba(15,28,46,.18) !important;
  color: var(--sol-ink) !important;
  background: #fff !important;/* =========================================================
   MENU MOBILE — BANCO SOL (visual premium)
   Aplica ao teu HTML actual (offcanvas + list-group + details)
   ========================================================= */

:root{
  --sol-yellow: #f4b400;     /* amarelo Sol */
  --sol-yellow-2: #ffd24a;   /* amarelo suave */
  --sol-black: #111;
  --sol-ink: #0f1c2e;        /* azul/ink escuro (premium) */
  --sol-muted: #6b7280;
  --sol-border: rgba(15, 28, 46, .12);
  --sol-bg: #ffffff;
  --sol-soft: #f7f7f7;
  --radius: 14px;
}

/* Offcanvas */
#mobileMenu.offcanvas{
  background: var(--sol-bg);
  width: 92%;
  max-width: 380px;
  border-left: 1px solid var(--sol-border);
  box-shadow: -20px 0 50px rgba(0,0,0,.18);
}

/* Header do offcanvas */
#mobileMenu .offcanvas-header{
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--sol-border);
  background:
    linear-gradient(180deg, rgba(244,180,0,.10), rgba(244,180,0,0));
}

#mobileMenu .offcanvas-title{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--sol-ink);
}

#mobileMenu .btn-close{
  opacity: .75;
}
#mobileMenu .btn-close:hover{
  opacity: 1;
}

/* Corpo */
#mobileMenu .offcanvas-body{
  padding: 14px;
}

/* List-group base */
#mobileMenu .list-group{
  gap: 10px;
}

/* Cada “bloco” do menu (list-group-item) */
#mobileMenu .list-group-item{
  border: 1px solid var(--sol-border);
  border-radius: var(--radius);
  background: #fff;
  padding: 12px 12px;
}

/* Links directos (se existirem noutros menus) */
#mobileMenu .list-group-item-action{
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--sol-ink);
  font-weight: 700;
  border: 1px solid var(--sol-border);
  background: #fff;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}

#mobileMenu .list-group-item-action:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15,28,46,.08);
  border-color: rgba(244,180,0,.45);
}

/* DETAILS / SUMMARY */
#mobileMenu details{
  width: 100%;
}

#mobileMenu summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  color: var(--sol-ink);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Remove o triângulo default */
#mobileMenu summary::-webkit-details-marker{ display: none; }

/* Seta custom (abre/fecha) */
#mobileMenu summary::after{
  content: "›";
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(244,180,0,.14);
  color: var(--sol-ink);
  font-size: 22px;
  transform: rotate(0deg);
  transition: transform .15s ease, background .15s ease;
}

#mobileMenu details[open] > summary::after{
  transform: rotate(90deg);
  background: rgba(244,180,0,.22);
}

/* Sub-níveis dentro do details */
#mobileMenu details > .mt-2{
  margin-top: 10px !important;
}

/* Botões internos (itens do submenu) */
#mobileMenu .btn.btn-outline-dark{
  border-color: rgba(15,28,46,.18) !important;
  color: var(--sol-ink) !important;
  background: #fff !important;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}

#mobileMenu .btn.btn-outline-dark:hover{
  transform: translateY(-1px);
  border-color: rgba(244,180,0,.55) !important;
  box-shadow: 0 10px 22px rgba(15,28,46,.10);
}

/* Botão principal: Internet Banking */
#mobileMenu .btn.btn-dark{
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
  background: linear-gradient(135deg, #0f1c2e, #16263f) !important;
  border: 0 !important;
  box-shadow: 0 16px 30px rgba(15,28,46,.20);
}

/* Botões extra (Encontrar Agência / ATM SOL) */
#mobileMenu .btn.btn-outline-dark.w-100{
  border-radius: 14px;
}

/* Idiomas */
#mobileMenu .small a{
  font-weight: 800;
  color: var(--sol-ink);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
}

#mobileMenu .small a:hover{
  background: rgba(244,180,0,.14);
}

#mobileMenu .small a[href*="lang=pt"]{
  background: rgba(244,180,0,.20);
}

/* Espaçamentos finos */
#mobileMenu .d-grid.gap-2{ gap: 10px !important; }

/* Acessibilidade: focus bonito */
#mobileMenu a:focus,
#mobileMenu summary:focus{
  outline: 3px solid rgba(244,180,0,.35);
  outline-offset: 2px;
  border-radius: 12px;
}
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}

#mobileMenu .btn.btn-outline-dark:hover{
  transform: translateY(-1px);
  border-color: rgba(244,180,0,.55) !important;
  box-shadow: 0 10px 22px rgba(15,28,46,.10);
}

/* Botão principal: Internet Banking */
#mobileMenu .btn.btn-dark{
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
  background: linear-gradient(135deg, #0f1c2e, #16263f) !important;
  border: 0 !important;
  box-shadow: 0 16px 30px rgba(15,28,46,.20);
}

/* Botões extra (Encontrar Agência / ATM SOL) */
#mobileMenu .btn.btn-outline-dark.w-100{
  border-radius: 14px;
}

/* Idiomas */
#mobileMenu .small a{
  font-weight: 800;
  color: var(--sol-ink);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
}

#mobileMenu .small a:hover{
  background: rgba(244,180,0,.14);
}

#mobileMenu .small a[href*="lang=pt"]{
  background: rgba(244,180,0,.20);
}

/* Espaçamentos finos */
#mobileMenu .d-grid.gap-2{ gap: 10px !important; }

/* Acessibilidade: focus bonito */
#mobileMenu a:focus,
#mobileMenu summary:focus{
  outline: 3px solid rgba(244,180,0,.35);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Mais espaço entre o topo do menu e o 1º item ("Particulares") */
#mobileMenu .offcanvas-body{
  padding-top: 22px; /* aumenta/diminui aqui (ex: 18px a 28px) */
}

/* Opcional: cria uma linha de separação e afasta o header do conteúdo */
#mobileMenu .offcanvas-header{
  padding-bottom: 16px;
}

/* Opcional: afasta um pouco o primeiro bloco do menu */
#mobileMenu .list-group{
  margin-top: 10px;
}

/* BOTÃO INTERNET BANKING — AMARELO BANCO SOL */
#mobileMenu .btn-bank {
  background: #FFD200;
  color: #111;
  font-weight: 700;
  border-radius: 14px;
  padding: 14px;
  border: none;
  box-shadow: 0 6px 18px rgba(255, 210, 0, 0.35);
  transition: all 0.25s ease;
}

/* hover */
#mobileMenu .btn-bank:hover {
  background: #e6bd00;
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255, 210, 0, 0.45);
}

/* active */
#mobileMenu .btn-bank:active {
  transform: scale(0.98);
}