/* Linktree page only — scoped under .linktree-layout */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Lora:ital,wght@0,500;0,600;1,500&display=swap");

/* Cadeia de altura até o fim do viewport (100% sozinho quebra no mobile se html não tiver altura definida) */
html:has(body.linktree-layout) {
  height: 100%;
  min-height: 100dvh;
}

html:has(body.linktree-layout),
body.linktree-layout {
  height: 100%;
  max-height: 100dvh;
  overflow: hidden;
}

.linktree-layout {
  --linktree-navy: #0c2340;
  --linktree-navy-muted: #1a3a52;
  --linktree-gradient-start: #2b7fd4;
  --linktree-gradient-end: #2ec4b6;
  --linktree-main-text-color: var(--easybook-main-text-color, var(--linktree-navy));
  --linktree-btn-shadow: 0 3px 10px rgba(22, 99, 132, 0.14);
  --linktree-max-content: 420px;
  /* Espaço vertical único: subtítulo↔botões, botões↔redes, redes↔rodapé da tela */
  --linktree-block-gap: 22px;

  /*
   * Mesma cor de fundo do hero da Index: GetColourScheme → layout-arsha.js define
   * --easybook-hero-background-colour no :root (ex.: rgb(242, 235, 225) do banco).
   * Antes usávamos #f0e6d8 fixo (240,230,216) — por isso divergia do esquema salvo.
   */
  background: var(--easybook-hero-background-colour, rgb(242, 235, 225));
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

/* main.css reserves 80px under fixed Arsha header — Linktree has no top bar */
body.linktree-layout {
  margin: 0;
}

/*
 * Arsha style.css: body e main são flex column. O #navbar no linktree ainda ocupa
 * espaço no fluxo (mesmo com ul escondido), impedindo main de crescer → sobra
 * “vazio” embaixo. Menu continua acessível (fixed quando .navbar-mobile).
 */
body.linktree-layout #navbar.navbar:not(.navbar-mobile) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}

body.linktree-layout #navbar.navbar:not(.navbar-mobile) a {
  pointer-events: auto;
}

body.linktree-layout #navbar.navbar:not(.navbar-mobile) .dropdown,
body.linktree-layout #navbar.navbar:not(.navbar-mobile) .dropdown ul,
body.linktree-layout #navbar.navbar:not(.navbar-mobile) .dropdown li {
  pointer-events: auto;
}

body.linktree-layout #navbar.navbar:not(.navbar-mobile) .dropdown.dropdown-open > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

body.linktree-layout #navbar.navbar.navbar-mobile .dropdown.dropdown-open > ul,
body.linktree-layout #navbar.navbar.navbar-mobile .dropdown.dropdown-active > ul {
  display: block;
  visibility: visible !important;
}

/* Menu hambúrguer aberto: mesma área full-screen do Arsha */
body.linktree-layout #navbar.navbar.navbar-mobile {
  pointer-events: auto;
  min-height: 100dvh;
  height: auto;
}

body.linktree-layout main.linktree-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.linktree-main {
  flex: 1 1 0;
  min-height: 0;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  /* Quando o stack inteiro for mais alto que a tela, o scroll fica no main */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Lucide — base; botões e menu ficam maiores (referência) */
.linktree-layout .linktree-lucide svg,
.linktree-layout .linktree-social-link svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}

.linktree-layout .linktree-btn .linktree-btn-icon svg,
.linktree-layout .linktree-floating-menu-btn .linktree-lucide svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

.linktree-floating-menu-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1046;
  border: none;
  background: transparent;
  color: var(--linktree-main-text-color);
  padding: 0;
  margin: 0;
  box-shadow: none;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.linktree-floating-menu-btn:focus {
  outline: none;
  box-shadow: none;
}

.linktree-floating-menu-btn:focus-visible {
  outline: 2px solid rgba(12, 35, 64, 0.35);
  outline-offset: 4px;
}

/*
 * Coluna única: banner + bloco debaixo. justify-content: safe center centraliza
 * o conjunto inteiro na altura do main (espaço igual acima do banner e abaixo das redes).
 */
.linktree-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 0 18px 8px;
  box-sizing: border-box;
}

@supports (justify-content: safe center) {
  .linktree-page {
    justify-content: safe center;
  }
}

.linktree-hero-visual {
  position: relative;
  width: 100%;
  max-width: var(--linktree-max-content);
  flex: 0 0 auto;
  /* Faixa do banner um pouco menor no mobile = mais área útil para título/botões */
  height: clamp(22dvh, 28dvh, 34dvh);
  min-height: 22dvh;
  max-height: 34dvh;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 6px 12px 8px;
  /* Letterbox do banner = mesma cor de hero do esquema (igual #hero na Index) */
  background-color: var(--easybook-hero-background-colour, rgb(242, 235, 225));
  overflow: hidden;
}

/* Alinha ao topo da faixa do banner (evita faixa vazia grande acima da arte, como letterbox vertical) */
.linktree-banner-img {
  display: block;
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  z-index: 0;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 14px);
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: top center;
}

/* Sem ::after sobre o banner: gradiente antigo escurecia / “lavava” a imagem em relação ao arquivo do banco */

.linktree-content {
  width: 100%;
  max-width: var(--linktree-max-content);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: clamp(-28px, -3.5dvh, -18px);
  position: relative;
  z-index: 1;
}

.linktree-title {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(1.1rem, 3.8vw, 1.35rem);
  font-weight: 500;
  color: var(--linktree-main-text-color);
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0 0 0.35em;
  max-width: 26ch;
}

.linktree-title--no-subtitle {
  margin-bottom: var(--linktree-block-gap);
}

.linktree-subtitle {
  font-family: "Inter", sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--linktree-main-text-color);
  opacity: 0.9;
  line-height: 1.45;
  margin: 0 0 var(--linktree-block-gap);
  max-width: 34ch;
}

.linktree-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0;
  margin-bottom: 0;
}

#extra-linktree-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#extra-linktree-buttons:empty {
  display: none;
}

.linktree-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  border: 0;
  border-radius: 16px;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 14px 20px;
  min-height: 52px;
  text-decoration: none;
  background: linear-gradient(
    90deg,
    var(--linktree-gradient-start) 0%,
    var(--linktree-gradient-end) 100%
  );
  box-shadow: var(--linktree-btn-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.linktree-btn:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(22, 99, 132, 0.22);
}

.linktree-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.linktree-btn-icon svg {
  stroke: #fff;
}

.linktree-social-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: calc(var(--linktree-block-gap) + 4px);
  padding-top: 0;
  flex-shrink: 0;
  padding-bottom: 0;
}

/* Quando houver uma segunda linha (botões utilitários), aproxima da linha de redes */
.linktree-social-row + .linktree-social-row {
  margin-top: 12px;
}

.linktree-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--linktree-main-text-color);
  text-decoration: none;
  opacity: 0.88;
  transition: opacity 0.15s ease;
}

.linktree-social-link:hover {
  color: var(--linktree-main-text-color);
  opacity: 1;
}

/* Lucide stroke icons (CTAs / hamburger) */
.linktree-social-link svg {
  stroke: currentColor;
  fill: none;
}

/* Bootstrap Icons — redes no tamanho próximo à referência (ícones mais visíveis) */
.linktree-social-link--bi i {
  font-size: clamp(1.5rem, 4.5vw, 1.75rem);
  line-height: 1;
  vertical-align: 0;
  -webkit-font-smoothing: antialiased;
}

.linktree-install-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(
    90deg,
    var(--linktree-gradient-start) 0%,
    var(--linktree-gradient-end) 100%
  );
  box-shadow: var(--linktree-btn-shadow);
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.linktree-install-btn:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(22, 99, 132, 0.22);
}

.linktree-install-btn i {
  font-size: 1rem;
  line-height: 1;
}

.business-hours-card {
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.2);
}

.business-hours-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: #f8fafc;
  padding: 10px 14px 8px;
}

.business-hours-title {
  margin: 0;
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
}

.business-hours-card-header .btn-close {
  margin-left: auto;
  flex-shrink: 0;
}

.business-hours-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  margin-top: 0;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 0.72rem;
  font-weight: 600;
}

.business-hours-status.is-open {
  background: #d1fae5;
  color: #047857;
}

.business-hours-status.is-closed {
  background: #fee2e2;
  color: #b91c1c;
}

.business-hours-card-body {
  padding: 0;
}

.business-hours-row {
  display: grid;
  grid-template-columns: minmax(108px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.business-hours-row:last-child {
  border-bottom: 0;
}

.business-hours-day {
  display: flex;
  align-items: center;
  align-self: center;
  flex-wrap: nowrap;
  gap: 8px;
  color: #1f2937;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.business-hours-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  color: #0f172a;
  font-weight: 500;
  line-height: 1.2;
}

.business-hours-slot {
  display: block;
  margin: 0;
  line-height: 1.15;
}

.business-hours-today-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
  font-size: 0.73rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
}

.business-hours-row.is-today {
  background: #ecfdf5;
}

.business-hours-row .business-hours-closed,
.business-hours-time .text-muted {
  color: #6b7280 !important;
  font-weight: 500;
}

.linktree-footer-copy {
  margin-top: 8px;
  padding: 10px 16px 14px;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--linktree-main-text-color);
}

.linktree-footer-copy a,
.linktree-footer-copy a:visited,
.linktree-footer-copy a:hover,
.linktree-footer-copy a:active {
  color: inherit;
  text-decoration: none;
}