/* Black & White Minimal overrides for Bootstrap */
:root{
  --bs-body-color:#111;
  --bs-body-bg:#fff;
  --bs-border-color:#e5e5e5;
}
*{box-sizing:border-box}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Arial; color:var(--bs-body-color); background:#fff;}
.navbar{border-bottom:1px solid var(--bs-border-color); background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(6px);}
.nav-link{font-weight:600}
.nav-link:hover{background:#f5f5f5; border-radius:.6rem;}
.btn-outline-dark{border-color:#111; color:#111;}
.btn-outline-dark:hover{background:#111; color:#fff;}
.banner {
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: url('LegalBanner.jpg') no-repeat center center;
    background-size: 100% 100%; /* ยืดเต็มพื้นที่ทั้งกว้างและสูง */
}
.banner .inner{padding:2rem 1.25rem}
.banner .inner{padding:2rem 1.25rem}
@media (min-width: 992px){ .banner .inner{padding:3rem 2rem} }
.banner h1,
.banner p.lead{
  color: #fff;                         /* ตัวหนังสือขาว */
  -webkit-text-stroke: 0.5px #000;       /* ขอบดำ (บราวเซอร์ Chromium/Safari) */
  text-shadow:                          /* fallback/เสริมความชัดทุกบราวเซอร์ */
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0    0   3px rgba(0,0,0,.6);
}

/* ถ้าอยากให้พารากราฟบางลงนิด */
.banner p.lead{
  font-weight: 500;
}
.card-minimal{border:1px solid var(--bs-border-color); border-radius:1rem}
.card-minimal .card-body{padding:1rem 1.25rem}
.list-group-flush > .list-group-item{border-color:var(--bs-border-color)}
.footer{color:#666; font-size:.9rem; border-top:1px solid var(--bs-border-color)}
.footer a{color:inherit; text-decoration:none}
.footer a:hover{text-decoration:underline}
.item-title{font-weight:700}
.item-lines{margin:.25rem 0 0 0; color:#444; line-height:1.45}
.badge-plain{background:#f5f5f5; border:1px solid var(--bs-border-color); color:#111; font-weight:600}
.hero-svg{width:100%; height:auto}

/* === Update: On large screens, put bold title on its own line, then details on next line === */
@media (min-width: 992px){
  .list-group-flush > .list-group-item{
    display: block !important;         /* override previous flex */
  }
  .list-group-flush > .list-group-item .item-title{
    display: block !important;         /* force newline after title */
    margin: 0 0 .25rem 0;
    white-space: nowrap;
    font-weight: 700;
  }
  .list-group-flush > .list-group-item .item-lines{
    display: inline !important;        /* details inline on same (second) line */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .list-group-flush > .list-group-item .item-lines + .item-lines::before{
    content: " • ";
    margin: 0 .35rem;
  }
}



/* ----- Phone-styled button: white background, blue text & border ----- */
.btn-phone {
  display: inline-block;
  padding: .375rem .75rem;
  border-radius: .375rem;
  background: #ffffff;          /* white background */
  color: #0d6efd;               /* bootstrap primary blue for text */
  border: 1px solid #0d6efd;    /* blue border */
  text-decoration: none;
  font-weight: 600;
  line-height: 1.5;
}

/* Hover / focus */
.btn-phone:hover,
.btn-phone:focus {
  background: rgba(13,110,253,0.04);
  color: #0b5ed7;
  border-color: #0b5ed7;
  text-decoration: none;
}

/* If used inside .banner, keep spacing consistent */
.banner .btn-phone { margin-top: 0.5rem; }

/* Small screens: make it slightly larger for easier tapping */
@media (max-width: 576px) {
  .btn-phone { padding: .5rem 1rem; font-size: 1.05rem; }
}