:root{
    --main-color:#532716;
    --body:#f3ecdf ;
    --support-color:#faf9f5;

}

.lyrics-content{margin-top: 30px;}
/* === Related Posts Styling === */
.fp-single_post {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px dashed var(--main-color);
  border-radius: 5px;
  position: relative;
  padding: 15px 9px 10px;
  margin-top: 20px;
  margin-bottom: 12px;
  background-color: var(--support-color);
  list-style: none;
}

.fp-single_post::before {
  content: 'Read More';
  position: absolute;
  top: -12px;
  left: 10px;
  font-size: 14px;
  color: var(--main-color);
  background: var(--support-color);
  padding: 0 6px;
  font-weight: 600;
  border-radius: 50px;
}

.fp-featured-image {
  flex: 0 0 auto;
  width: 120px;
  margin-right: 15px;
}

.fp-featured-image img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: rgba(23, 43, 99, 0.3) 0 7px 28px;
}

.fp-post-title {
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  color: var(--main-color);
  text-decoration: none;
  /*display: block;*/
}

/* 🛠 Responsive Fix - Force row layout in mobile too */
@media (max-width: 768px) {
  .fp-single_post {
    flex-direction: row;
  }

  .fp-featured-image {
    width: 100px;
    margin-right: 12px;
  }

  .fp-post-title {
    font-size: 15px;
  }
}


/*_____________________________________*/

/* === Related Posts Styling === */

.faq-box { margin-bottom: 10px;}
.faq-question { background: var(--body); padding: 12px; font-weight: bold; cursor: pointer; border: 1px solid #cdcdcd; border-radius: 4px 4px 0px 0px;}
.faq-answer { display: none; padding: 12px; background: var(--body); border: 1px solid #cdcdcd; border-radius:0px 0px 4px 4px; }
.faq-box.open .faq-answer { display: block; }
.fp-faq-question{font-size:15px; margin:0; line-height:1.4;}

/* === Layout English Olny === */

.english-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 30px;
}
.lyrics-column, .video-column {
  flex: 1;
  min-width: 300px;
}
.video-column iframe {
  max-width: 100%;
}
@media (max-width: 768px) {
  .english-layout {
    flex-direction: column;
  }
  .video-column {
    order: 2;
  }
}


/* === tab post === */

.lyrics-tabs {
  margin-top: 20px;
}
.tab-buttons {
  display: flex;
  margin-bottom: 20px;
  gap: 20px;
}
.tab-btn {
  flex: 1;
  padding: 10px;
  cursor: pointer;
  border: 1px solid var(--main-color);
  background: var(--support-color);
  font-weight: bold;
  text-align: center;
  color: var(--main-color);
}
.tab-btn.active {
  background: var(--main-color);
  color: var(--support-color);
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

/* === Table === */
.song-credit-table{
  margin-top: 30px;
}
#fp-table{
            border-collapse: collapse;
            width: 100%;            
        }
        #fp-table td{
        border-top: 2px solid var(--main-color);
        border-bottom: 2px solid var(--main-color);
        }

        #fp-table tr:nth-child(odd){background-color: var(--support-color);}
        #fp-table th {
        border-top: 2px solid var(--main-color);
        border-bottom: 2px solid var(--main-color);
        }

        /*#fp-table th {*/
        /*    padding-top: 12px;          */
        /*    background-color: var(--main-color);*/
        /*    color: var(--support-color);*/
        /*    text-align: center;*/
        /*}*/

        #fp-table td{
            padding-top: 7px;
            padding-bottom: 6px;
            padding-left: 25px;
            line-height: 35px; 
            font-size: 18px;
}
        #fp-table tr:hover{background-color: #ddd;}
/* === Hiden content === */
@media only screen and (max-width: 600px) {.mobile-hide-content{display:none;}}
@media only screen and (min-width: 600px) {.desktop-hide-content{display:none;}}

/* ==========================================================
   Share Box
========================================================== */

.fp-share-box{
    background:#fff;
    border:1px solid #E2D5BC;
    border-radius:14px;
    padding:18px 20px;
    margin:20px 0;
    box-shadow:0 1px 6px rgba(160,112,26,.08);
}

.fp-share-box h3{
    margin:0 0 14px;
    font-size:26px;
    font-weight:600;
    color:var(--main-color);
    line-height:1.3;
}

.fp-share-btns{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

/* PDF Button */

.fp-act-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    padding:10px 18px;

    border-radius:10px;
    border:1px solid #E2D5BC;

    background:#fff;
    color:#5A4020;

    font-size:13px;
    font-weight:500;

    cursor:pointer;
    transition:.2s ease;

    font-family:inherit;

    box-shadow:0 1px 6px rgba(160,112,26,.08);
}

.fp-act-btn:hover{
    border-color:var(--main-color);
    color:var(--main-color);
    background:#FEF3DC;
}

.fp-act-btn svg{
    width:16px;
    height:16px;
    flex-shrink:0;
}

.fp-act-btn svg path{
    fill:currentColor;
}

/* Share Buttons */

.fp-sh-btn{
    display:flex;
    align-items:center;
    gap:7px;

    padding:9px 15px;

    border-radius:9px;
    border:1px solid #E2D5BC;

    background:#F5F0E8;

    color:#5A4020;

    font-size:13px;
    font-weight:500;

    text-decoration:none;
    transition:.2s ease;
}

.fp-sh-btn:hover{
    text-decoration:none;
}

.fp-sh-btn svg{
    width:15px;
    height:15px;
    flex-shrink:0;

    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* WhatsApp */

.fp-wa{
    color:#1a8c40;
    border-color:rgba(37,211,102,.3);
}

.fp-wa:hover{
    background:rgba(37,211,102,.08);
}

/* Facebook */

.fp-fb{
    color:#1877F2;
    border-color:rgba(24,119,242,.3);
}

.fp-fb:hover{
    background:rgba(24,119,242,.06);
}

/* Twitter */

.fp-tw{
    color:#1DA1F2;
    border-color:rgba(29,161,242,.3);
}

.fp-tw:hover{
    background:rgba(29,161,242,.06);
}

/* ===============================
   Mobile
================================ */

@media (max-width:768px){

    .fp-share-box{
        padding:16px;
    }

    .fp-share-btns{
        gap:8px;
    }

    .fp-act-btn,
    .fp-sh-btn{
        flex:1 1 calc(50% - 4px);
        justify-content:center;
    }

}

@media (max-width:480px){

    .fp-share-box h3{
        font-size:22px;
    }

    .fp-act-btn,
    .fp-sh-btn{
        width:100%;
        flex:100%;
    }

}
/* ==========================================================
   Top Share Buttons
========================================================== */

.fp-share-top{

    background:transparent;
    border:none;
    box-shadow:none;

    padding:0;
    margin:18px 0 22px;

}

.fp-share-top .fp-share-btns{

    gap:10px;

}

@media(max-width:480px){

    .fp-share-btns{

        display:flex;
        flex-wrap:nowrap;
        gap:8px;

    }

    .fp-act-btn,
    .fp-sh-btn{

        flex:1;
        justify-content:center;

        padding:12px 0;

    }

/*    .fp-act-btn span,
    .fp-sh-btn span{

        display:none;

    }*/

        .fp-sh-btn span{
        display:none;
    }

    .fp-act-btn span{
        display:inline;
    }

    .fp-act-btn svg,
    .fp-sh-btn svg{

        margin:0;

    }

}