/* =========================================================
   Betline – Legal Cards (Clean Style, FORCED Betline Purple)
   ========================================================= */

/* Grid layout */
.bl-legal-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

/* Card */
.bl-legal-card{
  display:flex;
  align-items:center;
  gap:18px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  min-height:110px;
}

/* ============================
   Left coloured panel (FORCED)
   ============================ */
.bl-legal-panel{
  position:relative;
  flex:0 0 190px;
  height:110px;
  background:#6c4df4 !important; /* FORCE Betline purple */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  border-radius:14px 0 0 14px;
}

/* Logo */
.bl-legal-panel img{
  max-width:160px;
  max-height:74px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.18));
}

/* ============================
   Body
   ============================ */
.bl-legal-body{
  flex:1 1 auto;
  min-width:0;
  padding:6px 0;
}

.bl-legal-title{
  margin:0 0 6px 0;
  font-size:22px;
  line-height:1.1;
  color:#4c1d95;
  font-weight:800;
}

.bl-legal-lines{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.bl-legal-line{
  font-size:13px;
  line-height:1.35;
  color:#111827;
}

.bl-legal-line strong{
  font-weight:800;
}

/* ============================
   CTA
   ============================ */
.bl-legal-cta{
  flex:0 0 auto;
  padding-right:18px;
}

.bl-legal-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#fbbf24;
  color:#111;
  font-weight:800;
  padding:12px 18px;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
}

.bl-legal-btn:hover{
  background:#f59e0b;
}

/* ============================
   Tablet – 2 columns
   ============================ */
@media (max-width:1100px){
  .bl-legal-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .bl-legal-panel{
    flex-basis:170px;
  }

  .bl-legal-panel img{
    max-width:135px;
  }

  .bl-legal-title{
    font-size:20px;
  }
}

/* ============================
   Mobile – 1 column
   ============================ */
@media (max-width:680px){
  .bl-legal-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:480px){
  .bl-legal-card{
    min-height:96px;
  }

  .bl-legal-panel{
    flex-basis:150px;
    height:96px;
    padding:12px 14px;
  }

  .bl-legal-panel img{
    max-width:118px;
    max-height:64px;
  }

  .bl-legal-title{
    font-size:18px;
  }

  .bl-legal-cta{
    padding-right:14px;
  }

  .bl-legal-btn{
    padding:10px 14px;
  }
/* ============================
   MOBILE FIX – STACK CARD
   ============================ */
@media (max-width: 640px){

  .bl-legal-card{
    flex-direction: column;
    align-items: stretch;
    min-height: unset;
  }

  .bl-legal-panel{
    width: 100%;
    flex: none;
    height: auto;
    padding: 18px;
    border-radius: 14px 14px 0 0;
  }

  .bl-legal-panel img{
    max-width: 160px;
    max-height: 70px;
  }

  .bl-legal-body{
    padding: 14px 16px 10px 16px;
    width: 100%;
  }

  .bl-legal-title{
    font-size: 20px;
    line-height: 1.2;
    word-break: normal;
  }

  .bl-legal-lines{
    gap: 4px;
  }

  .bl-legal-line{
    word-break: normal;
    white-space: normal;
  }

  .bl-legal-cta{
    padding: 0 16px 16px 16px;
    width: 100%;
    text-align: left;
  }

  .bl-legal-btn{
    width: 100%;
    justify-content: center;
  }
}