/* GlobalFinex — consent UI (dev-owned)
   ------------------------------------------------------------------
   Baseline styling for the cookie banner + preference centre. Kept
   separate from the designer-owned style.css so handovers don't
   collide. Uses style.css design tokens; designer may re-theme later.
*/

.gf-consent-banner[hidden],
.gf-consent-modal[hidden] {
  display: none;
}

/* ---------------- BANNER ---------------- */

.gf-consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: var(--paper, #fff);
  border-top: 1px solid var(--line-2, var(--line));
  box-shadow: var(--shadow-lg, 0 -8px 30px -12px rgba(15, 23, 42, 0.18));
  font-family: var(--font-sans, system-ui, sans-serif);
}

.gf-consent-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 18px 20px;
}

.gf-consent-banner-text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-2, var(--ink-2));
}

.gf-consent-banner-text a {
  color: var(--gf-blue, var(--gf-royal));
  text-decoration: underline;
}

.gf-consent-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------------- BUTTONS ---------------- */

.gf-consent-btn {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 18px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--gf-blue, var(--gf-royal));
  background: var(--gf-blue, var(--gf-royal));
  color: #fff;
  transition: background 0.15s ease;
}

.gf-consent-btn:hover {
  background: var(--gf-blue-hover, var(--gf-blue-deep));
  border-color: var(--gf-blue-hover, var(--gf-blue-deep));
}

.gf-consent-btn.ghost {
  background: #fff;
  color: var(--gf-blue, var(--gf-royal));
}

.gf-consent-btn.ghost:hover {
  background: var(--gf-indigo-soft, var(--gf-indigo-soft));
}

.gf-consent-btn:focus-visible,
.gf-consent-toggle:focus-visible,
.gf-consent-close:focus-visible {
  outline: 2px solid var(--gf-blue, var(--gf-royal));
  outline-offset: 2px;
}

/* ---------------- MODAL ---------------- */

body.gf-consent-open {
  overflow: hidden;
}

.gf-consent-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.gf-consent-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}

.gf-consent-dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--paper, #fff);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-lg, 0 24px 60px -20px rgba(15, 23, 42, 0.4));
  padding: 28px;
  font-family: var(--font-sans, system-ui, sans-serif);
}

.gf-consent-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.gf-consent-dialog-head h2 {
  margin: 0;
  font-size: 1.35rem;
  color: var(--ink-1, var(--ink));
}

.gf-consent-close {
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  border: 0;
  background: none;
  color: var(--ink-2, var(--ink-2));
  padding: 0 4px;
}

.gf-consent-intro {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-2, var(--ink-2));
}

.gf-consent-intro a {
  color: var(--gf-blue, var(--gf-royal));
  text-decoration: underline;
}

.gf-consent-categories {
  list-style: none;
  margin: 20px 0;
  padding: 0;
}

.gf-consent-cat {
  border: 1px solid var(--line, var(--line-soft));
  border-radius: var(--radius, 10px);
  padding: 16px;
  margin-bottom: 12px;
}

.gf-consent-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gf-consent-cat-name {
  font-weight: 600;
  color: var(--ink-1, var(--ink));
}

.gf-consent-cat-locked {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green, var(--green));
}

.gf-consent-cat p {
  margin: 8px 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-3, var(--muted));
}

.gf-consent-toggle {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--gf-blue, var(--gf-royal));
}

.gf-consent-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

/* Table style shared by all policy pages (cookie inventory, definitions,
   retention, supervisory authorities, etc.). One source of truth. */
.gf-doc-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 0.88rem;
}

.gf-doc-table th,
.gf-doc-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border: 1px solid var(--line, var(--line-soft));
}

.gf-doc-table th {
  background: var(--paper-2, var(--bg-soft));
  color: var(--ink-1, var(--ink));
  font-weight: 600;
}

.gf-doc-table td {
  color: var(--ink-2, var(--ink-2));
}

/* In-body inline consent trigger used within policy-page copy (renders as a
   text link on a light background). The footer legal-row controls use
   .legal-link, defined in app.css. */
.gf-cookie-link {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 560px) {
  /* Legal-page tables (supervisory authorities, cookie inventory) carry long
     unbreakable strings and force the document wider than the viewport, which
     scrolls the whole page sideways. Contain the scroll to the table itself. */
  .gf-doc-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .gf-doc-table th,
  .gf-doc-table td {
    overflow-wrap: anywhere;
  }

  .gf-consent-banner-actions,
  .gf-consent-dialog-actions {
    width: 100%;
  }
  .gf-consent-banner-actions .gf-consent-btn,
  .gf-consent-dialog-actions .gf-consent-btn {
    flex: 1 1 auto;
  }
}

.site-footer .legal-link:hover,
.site-footer .legal-link:focus-visible {
  color: #fff;
}