/* ============================================================
   4_legal.css — Legal page styles
   ============================================================ */


/* #region |||||||||| TABS ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

  .legal-tabs { margin-top: var(--S-XL); }

  .legal-tabs__list {
    display: flex;
    gap: 0;
    list-style: none;
    border-bottom: 2px solid var(--C-BON-D);
    flex-wrap: wrap;
  }

  .legal-tab {
    font-family: var(--F-BDY);
    font-size: var(--T-SM);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--C-COL);
    background: none;
    border: none;
    padding: var(--S-SM) var(--S-LG);
    cursor: pointer;
    position: relative;
    opacity: 0.55;
    transition: opacity var(--T-BASE), color var(--T-BASE);
  }

  .legal-tab::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 2px;
    background: var(--C-RUB);
    transform: scaleX(0);
    transition: transform var(--T-BASE);
  }

  .legal-tab:hover { opacity: 0.8; }

  .legal-tab--active {
    opacity: 1;
    color: var(--C-RUB);
  }

  .legal-tab--active::after { transform: scaleX(1); }

/* #endregion */


/* #region |||||||||| PANELS ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

  .legal-panel { display: flex; flex-direction: column; gap: var(--S-LG); }

  .legal-updated { color: var(--C-RUB); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }

  .legal-panel h2 {
    font-family: var(--F-HDG);
    font-size: var(--T-XL);
    margin-top: var(--S-SM);
    padding-top: var(--S-LG);
    border-top: 1px solid var(--C-BON-D);
  }

  .legal-panel h2:first-of-type { border-top: none; padding-top: 0; }

  .legal-panel p { line-height: 1.8; }
  .legal-panel a { color: var(--C-RUB); }
  .legal-panel a:hover { color: var(--C-GAR); }

/* #endregion */


/* #region |||||||||| COOKIE TABLE ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

  .cookie-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--F-BDY);
    font-size: var(--T-SM);
  }

  .cookie-table th {
    text-align: left;
    padding: var(--S-SM) var(--S-MD);
    background: var(--C-BON-D);
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: var(--T-XS);
    text-transform: uppercase;
  }

  .cookie-table td {
    padding: var(--S-SM) var(--S-MD);
    border-bottom: 1px solid var(--C-BON-D);
    opacity: 0.75;
    vertical-align: top;
  }

  .cookie-table code {
    font-family: monospace;
    font-size: var(--T-XS);
    background: var(--C-BON-D);
    padding: 0.1em 0.4em;
    border-radius: var(--R-SM);
  }

/* #endregion */