/* =========================
   ARTICLE WRAPPER
========================= */

.article{
font-size:17px;
line-height:1.8;
color:#374151;
}

.post-meta {
  font-size: 13px;
  color: #999;
  margin-top: 6px;
  margin-bottom: 25px;
  text-align: left;
  letter-spacing: 0.5px;
}

.post-meta span {
  color: #0b3d91; /* blue highlight */
  font-weight: 500;
}


/* =========================
   ARTICLE IMAGES
========================= */

.article img{
max-width:100%;
display:block;
margin:25px auto;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

/* Feature Image */

.feature-image{
width:100%;
max-height:420px;
object-fit:cover;
border-radius:12px;
}

/* =========================
   PARAGRAPHS
========================= */

.article p{
margin:16px 0;
font-size:17px;
}

/* =========================
   HEADINGS INSIDE ARTICLE
========================= */

.article h2{
margin-top:35px;
margin-bottom:10px;
}

.article h3{
margin-top:25px;
}

/* =========================
   LIST STYLING
========================= */

.article ul{
margin:20px 0;
padding-left:25px;
}

.article li{
margin-bottom:8px;
}

/* =========================
   INFO TABLE
========================= */

.info-table{
width:100%;
border-collapse:collapse;
margin:30px 0;
background:white;
border-radius:10px;
overflow:hidden;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

.info-table thead{
background:#2563eb;
color:white;
}

.info-table th,
.info-table td{
padding:12px 14px;
text-align:left;
}

.info-table tbody tr{
border-bottom:1px solid #e5e7eb;
}

.info-table tbody tr:nth-child(even){
background:#f8fafc;
}

.info-table tbody tr:hover{
background:#eef4ff;
}

/* =========================
   NORMAL TABLE
========================= */

.article table{
width:100%;
border-collapse:collapse;
margin:25px 0;
}

.article table th{
background:#2563eb;
color:white;
padding:10px;
}

.article table td{
border:1px solid #e5e7eb;
padding:10px;
}

/* =========================
   ARTICLE IMAGE STYLE
========================= */

.article-image{
width:100%;
max-width:800px;
margin:25px auto;
display:block;
}

/* =========================
   IMAGE CAPTION
========================= */

.image-caption{
text-align:center;
font-size:14px;
color:#6b7280;
margin-top:-15px;
margin-bottom:20px;
}


.faq h3 {
  background: #0b3d91;
  color: #fff;
  padding: 10px;
  border-radius: 6px;
  margin-top: 15px;
  cursor: pointer;
}

.faq p {
  background: #f1f6ff;
  padding: 10px;
  border-left: 4px solid #0b3d91;
  margin-bottom: 10px;
}

/* ================= TOP ACTION BAR ================= */
.vr-top-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:12px 15px;
  margin:15px 0;
  
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

/* ================= SELECT ================= */
.vr-lang-select{
  padding:6px 10px;
  border-radius:6px;
  border:none;
  outline:none;
  font-size:14px;
  background:#fff;
  cursor:pointer;
}

/* ================= BUTTON COMMON ================= */
.vr-top-actions button{
  border:none;
  padding:6px 12px;
  border-radius:6px;
  font-size:14px;
  cursor:pointer;
  transition:0.3s ease;
}

/* ================= LISTEN BUTTON ================= */
.vr-listen-btn{
  background:#00c9a7;
  color:#fff;
}

.vr-listen-btn:hover{
  background:#00a98a;
}

/* ================= SHARE BUTTON ================= */
.vr-share-btn{
  background:#ff9800;
  color:#fff;
}

.vr-share-btn:hover{
  background:#e68900;
}

/* ================= GOOGLE PREF ================= */
.vr-google-pref{
  background:#ffffff;
  color:#333;
  font-weight:500;
}

.vr-google-pref:hover{
  background:#f1f1f1;
}

/* ================= SHARE BOX ================= */
.vr-share-box{
  display:none;
  gap:10px;
  align-items:center;
  margin-left:10px;
}

/* ACTIVE SHOW */
.vr-share-box.active{
  display:flex;
}

/* ================= SHARE ICON ================= */
.share-icon{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:50%;
  transition:0.3s;
}

.share-icon img{
  width:18px;
  height:18px;
}

/* Hover effect */
.share-icon:hover{
  transform:scale(1.15);
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
  .vr-top-actions{
    flex-direction:column;
    align-items:flex-start;
  }

  .vr-share-box{
    margin-left:0;
  }
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width:768px){

.article{
font-size:16px;
}

.info-table th,
.info-table td{
padding:10px;
font-size:14px;
}

}