/* ==========================================================================
   Road Safety Thai v3.3.7.3
   Digital License Layout & Identity Hotfix + TH/EN UI Language Layer
   Default language: Thai
   Vue bundle is intentionally untouched.
   ========================================================================== */

:root{
  --rst3373-blue:#1d5fe9;
  --rst3373-teal:#0f8f89;
  --rst3373-ink:#0f172a;
  --rst3373-muted:#64748b;
  --rst3373-line:#dfe7f0;
  --rst3373-card:#ffffff;
}

/* ---------- Language switch ---------- */
#rst-lang-switch{
  position:fixed;
  right:16px;
  top:12px;
  z-index:10000;
  display:flex;
  align-items:center;
  gap:3px;
  padding:4px;
  border:1px solid rgba(203,213,225,.92);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 24px rgba(15,23,42,.10);
  backdrop-filter:blur(10px);
}
#rst-lang-switch button{
  min-width:42px;
  height:32px;
  padding:0 10px;
  border:0;
  border-radius:999px;
  color:#475569;
  background:transparent;
  font:800 .74rem/1 "Noto Sans Thai","Leelawadee UI","Segoe UI",Tahoma,sans-serif;
  cursor:pointer;
}
#rst-lang-switch button[aria-pressed="true"]{
  color:#fff;
  background:linear-gradient(135deg,var(--rst3373-blue),var(--rst3373-teal));
}
#rst-lang-switch .rst-lang-label{
  padding:0 5px 0 7px;
  color:#64748b;
  font-size:.66rem;
  font-weight:800;
}

/* ---------- License page overall ---------- */
.license-page{
  max-width:1240px!important;
}
.license-page .section-topline{
  margin-bottom:16px!important;
}
.license-page .section-topline h1{
  font-size:clamp(2rem,2.7vw,2.85rem)!important;
  line-height:1.12!important;
  letter-spacing:-.03em!important;
}
.license-page .section-topline p{
  max-width:960px;
  font-size:.95rem!important;
  line-height:1.55!important;
}

/* ---------- Compact Digital License card ---------- */
.digital-license-card{
  min-height:0!important;
  padding:20px 22px 18px!important;
  border-radius:26px!important;
}
.digital-license-card .license-brand{
  margin-bottom:10px!important;
  font-size:1rem!important;
}
.digital-license-card .license-v22-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.55fr) minmax(210px,.72fr) minmax(190px,.55fr)!important;
  align-items:center!important;
  gap:22px!important;
  min-height:250px!important;
}
.digital-license-card .license-holder{
  align-self:center!important;
  display:grid!important;
  grid-template-columns:118px minmax(0,1fr)!important;
  grid-template-rows:auto!important;
  align-items:center!important;
  gap:10px 16px!important;
  min-width:0!important;
}
.digital-license-card .license-holder-photo{
  grid-row:1 / span 8!important;
  width:118px!important;
  height:142px!important;
  min-height:142px!important;
  border-radius:20px!important;
  overflow:hidden!important;
  background:#dbeafe!important;
}
.digital-license-card .license-holder-photo img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}
.digital-license-card .license-holder h2{
  margin:2px 0 2px!important;
  font-size:1.7rem!important;
  line-height:1.14!important;
}
.digital-license-card .license-holder h3{
  margin:0!important;
  font-size:1.04rem!important;
  line-height:1.3!important;
}
.digital-license-card .holder-code,
.digital-license-card .holder-class{
  margin:2px 0 0!important;
  font-size:.78rem!important;
  line-height:1.42!important;
}
.digital-license-card .license-holder > small{
  margin:0!important;
  font-size:.69rem!important;
  line-height:1.4!important;
}

/* Learning ID is generated via pseudo-element to avoid inserting Vue DOM nodes. */
.digital-license-card .license-holder [data-rst-learning-id]::after{
  display:block;
  margin-top:6px;
  padding:6px 10px;
  width:max-content;
  max-width:100%;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:.70rem;
  font-weight:800;
  line-height:1.35;
}
html[data-rst-lang="th"] .digital-license-card .license-holder [data-rst-learning-id]::after{
  content:"รหัสการเรียนรู้: " attr(data-rst-learning-id);
}
html[data-rst-lang="en"] .digital-license-card .license-holder [data-rst-learning-id]::after{
  content:"Learning ID: " attr(data-rst-learning-id);
}

/* Readiness column */
.digital-license-card .license-score-block{
  align-self:center!important;
  padding:4px 0!important;
}
.digital-license-card .license-score.rst-v3363-main-ring{
  width:146px!important;
  height:146px!important;
  margin:6px auto 8px!important;
}
.digital-license-card .license-score.rst-v3363-main-ring strong{
  font-size:2.45rem!important;
}
.digital-license-card .license-score-block>p{
  margin:8px auto 0!important;
  max-width:270px!important;
  font-size:.72rem!important;
  line-height:1.48!important;
}
.digital-license-card .behavior-separate{
  margin-top:9px!important;
  padding-top:8px!important;
  font-size:.67rem!important;
  line-height:1.4!important;
}

/* QR column */
.digital-license-card .license-qr-box{
  align-self:center!important;
  width:100%!important;
  max-width:205px!important;
  margin:0 auto!important;
  padding:12px!important;
  border-radius:20px!important;
}
.digital-license-card .license-qr-box img{
  width:100%!important;
  max-width:178px!important;
}
.digital-license-card .license-qr-box small{
  margin-top:5px!important;
  font-size:.62rem!important;
  line-height:1.35!important;
}

/* Status chips: move closer to identity */
.digital-license-card .license-meta{
  margin-top:12px!important;
  gap:7px!important;
}
.digital-license-card .license-meta span{
  padding:7px 10px!important;
  border-radius:10px!important;
  font-size:.67rem!important;
}

/* Reduce whitespace below card */
.readiness-summary-panel{
  margin-top:14px!important;
}

/* ---------- Thai/English text system ---------- */
html[data-rst-lang="th"] [data-rst-i18n-en-only]{display:none!important}
html[data-rst-lang="en"] [data-rst-i18n-th-only]{display:none!important}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .digital-license-card .license-v22-grid{
    grid-template-columns:minmax(0,1.3fr) minmax(190px,.7fr) minmax(175px,.55fr)!important;
    gap:16px!important;
  }
  .digital-license-card .license-holder-photo{
    width:108px!important;
    height:132px!important;
    min-height:132px!important;
  }
  .digital-license-card .license-holder{
    grid-template-columns:108px minmax(0,1fr)!important;
  }
}
@media (max-width:960px){
  #rst-lang-switch{
    top:10px;
    right:70px;
  }
  .digital-license-card .license-v22-grid{
    grid-template-columns:1fr 1fr!important;
  }
  .digital-license-card .license-holder{
    grid-column:1 / -1!important;
  }
  .digital-license-card .license-score-block,
  .digital-license-card .license-qr-box{
    align-self:start!important;
  }
}
@media (max-width:700px){
  #rst-lang-switch{
    position:fixed;
    top:9px;
    right:64px;
    padding:3px;
  }
  #rst-lang-switch .rst-lang-label{display:none}
  #rst-lang-switch button{
    min-width:38px;
    height:30px;
    padding:0 8px;
    font-size:.69rem;
  }
  .license-page .section-topline h1{
    font-size:1.85rem!important;
  }
  .digital-license-card{
    padding:16px!important;
  }
  .digital-license-card .license-v22-grid{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .digital-license-card .license-holder{
    grid-column:auto!important;
    grid-template-columns:92px minmax(0,1fr)!important;
    gap:7px 12px!important;
  }
  .digital-license-card .license-holder-photo{
    width:92px!important;
    height:112px!important;
    min-height:112px!important;
  }
  .digital-license-card .license-holder h2{
    font-size:1.35rem!important;
  }
  .digital-license-card .license-score.rst-v3363-main-ring{
    width:132px!important;
    height:132px!important;
  }
  .digital-license-card .license-qr-box{
    max-width:260px!important;
  }
  .digital-license-card .license-meta{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }
  .digital-license-card .license-meta span{
    text-align:center!important;
  }
}
@media (max-width:430px){
  .digital-license-card .license-holder{
    grid-template-columns:82px minmax(0,1fr)!important;
  }
  .digital-license-card .license-holder-photo{
    width:82px!important;
    height:102px!important;
    min-height:102px!important;
  }
  .digital-license-card .license-meta{
    grid-template-columns:1fr!important;
  }
}

/* avoid mixed-language helper labels that are injected by old visual layer */
html[data-rst-lang="th"] .rst-en-inline{display:none!important}
html[data-rst-lang="en"] .rst-th-inline{display:none!important}