/*
 Theme Name:   Jannah Child
 Description:  Jannah Child Theme
 Author:       BeautyTag Team
 Template:     jannah
 Version:      1.0.0
*/

/* =========================================
   1. Tokens & base
   ========================================= */
:root {
    --bt-primary: #1B263B;
    --bt-gold: #D4A373;
    --bt-bg-gray: #F8F9FA;
}

body, h1, h2, h3, h4, h5, h6, p, a, span, li {
    font-feature-settings: "ss01";
}

.bt-list-container {
    max-width: 100%;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 35px;
    font-family: inherit;
}

/* =========================================
   2. Shared cards & media
   ========================================= */
.bt-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    margin-bottom: 0 !important;
}
.bt-card:hover {
    border-color: var(--bt-gold);
    transform: translateY(-5px);
}

.bt-image-wrapper,
.bt-media-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    background-color: transparent !important;
    margin: 0;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    line-height: 0 !important;
    font-size: 0 !important;
    display: block;
}
.bt-image-wrapper img,
.bt-media-wrapper img,
.bt-video-container {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.bt-video-container { cursor: pointer; z-index: 1; }
.bt-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    transition: transform 0.2s;
    pointer-events: none;
}
.bt-video-container:hover .bt-play-icon {
    transform: translate(-50%, -50%) scale(1.1);
}
.bt-rank-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--bt-primary);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    z-index: 10;
    border: 2px solid #fff;
}

.bt-content { padding: 15px 25px 15px 25px !important; }
.bt-content h2 {
    margin: 0 0 15px 0 !important;
    font-size: 20px !important;
    color: var(--bt-primary);
    font-weight: 800;
}
.bt-content h2 a { color: inherit; text-decoration: none; }
.bt-description {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
    text-align: justify;
    line-height: 1.8;
}

.bt-meta-list {
    list-style: none !important;
    padding: 15px !important;
    margin: 0 !important;
    background: var(--bt-bg-gray);
    border-radius: 8px;
    border-right: 3px solid var(--bt-gold);
}
.bt-meta-list li {
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
    line-height: 1.8;
    list-style-type: none !important;
}
.bt-meta-list li:last-child { margin-bottom: 0; }
.bt-meta-list li::before,
.bt-meta-list li::after { display: none !important; }
.bt-meta-list strong {
    color: var(--bt-primary);
    margin-left: 8px;
    display: inline-block;
    min-width: 60px;
}

/* =========================================
   3. Shared actions & routing
   ========================================= */
.bt-actions-wrapper { padding: 0 25px 15px 25px; }
.bt-list-container .bt-buttons-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 8px !important;
}
.bt-list-container .bt-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100% !important;
    padding: 8px 0 !important;
    background-color: var(--bt-bg-gray) !important;
    border: 1px solid #d1d5db !important;
    color: var(--bt-primary) !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.bt-list-container .bt-btn svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    fill: var(--bt-primary) !important;
    transition: fill 0.2s ease;
    flex-shrink: 0 !important;
    display: inline-block !important;
}
.bt-list-container .bt-btn:hover {
    background-color: var(--bt-gold) !important;
    border-color: var(--bt-gold) !important;
    color: var(--bt-primary) !important;
}
.bt-list-container .bt-btn:hover svg { fill: var(--bt-primary) !important; }

.bt-routing-box {
    background-color: var(--bt-gold);
    border-radius: 8px;
    padding: 10px 15px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.routing-label {
    color: var(--bt-primary);
    font-size: 13px;
    font-weight: bold;
}
.routing-apps {
    display: flex;
    width: 100%;
    gap: 10px;
}
.app-link {
    flex: 1;
    background-color: #fff;
    color: var(--bt-primary) !important;
    padding: 3px;
    border-radius: 6px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none !important;
    transition: all 0.2s;
}
.app-link:hover {
    background-color: var(--bt-gold);
    border: 1px solid #fff !important;
}

/* =========================================
   4. Shared bottom sheet
   ========================================= */
.bt-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
}
.bt-sheet-overlay.active { opacity: 1; visibility: visible; }
.bt-sheet-container {
    width: 100%;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 20px 25px 30px 25px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.bt-sheet-overlay.active .bt-sheet-container { transform: translateY(0); }
.bt-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.bt-sheet-header span {
    font-size: 16px;
    font-weight: 800;
    color: var(--bt-primary);
}
.bt-sheet-close {
    background: none;
    border: none;
    font-size: 32px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0;
    outline: none;
}
.bt-sheet-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bt-sheet-btn {
    background: var(--bt-bg-gray);
    color: var(--bt-primary) !important;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none !important;
    border: 1px solid #eee;
    transition: all 0.2s;
    font-size: 14px;
    display: block;
}
.bt-sheet-btn:hover {
    background: var(--bt-gold);
    border-color: var(--bt-gold);
}

/* =========================================
   5. Shared comments
   ========================================= */
.bt-comments-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 25px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}
.bt-comments-wrapper:hover { border-color: var(--bt-gold); }
.bt-comments-wrapper h2,
.bt-comments-wrapper h3 {
    color: var(--bt-primary);
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 800;
}
.bt-comments-wrapper .comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.bt-comments-wrapper .comment-list li.comment {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    margin-bottom: 15px;
}
.bt-comments-wrapper .comment-list li.comment:last-child { border-bottom: none; }
.bt-comments-wrapper .comment-author {
    font-weight: bold;
    color: var(--bt-primary);
    margin-bottom: 5px;
    font-size: 15px;
}
.bt-comments-wrapper .comment-meta {
    font-size: 11px;
    color: #888;
    margin-bottom: 10px;
}
.bt-comments-wrapper .comment-content p {
    font-size: 14px;
    color: #444;
    line-height: 1.8;
    margin-top: 5px;
}
.bt-comments-wrapper #respond input[type="text"],
.bt-comments-wrapper #respond input[type="email"],
.bt-comments-wrapper #respond textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    margin-bottom: 15px;
    font-family: inherit;
    font-size: 13px;
    outline: none;
    background: var(--bt-bg-gray);
    transition: all 0.3s;
}
.bt-comments-wrapper #respond input[type="text"]:focus,
.bt-comments-wrapper #respond input[type="email"]:focus,
.bt-comments-wrapper #respond textarea:focus {
    border-color: var(--bt-gold);
    background: #fff;
}
.bt-comments-wrapper #respond input[type="submit"] {
    background-color: var(--bt-gold);
    color: var(--bt-primary);
    border: none;
    padding: 10px 25px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    font-family: inherit;
}
.bt-comments-wrapper #respond input[type="submit"]:hover {
    background-color: var(--bt-primary);
    color: #fff;
}

/* =========================================
   6. Easy Table of Contents
   ========================================= */
#ez-toc-container {
    background: #FAFAFA !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
    padding: 0 !important;
    margin: 25px 0 35px 0 !important;
    width: 100% !important;
    display: block !important;
    overflow: hidden !important;
    direction: rtl !important;
    text-align: right !important;
}

#ez-toc-container .ez-toc-title-container {
    background: #fff !important;
    padding: 12px 15px !important;
    border-bottom: 1px solid #E5E7EB !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    flex-direction: row !important;
}

#ez-toc-container p.ez-toc-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--bt-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}
#ez-toc-container p.ez-toc-title::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231B263B' d='M9 6h11v2H9V6zm0 5h11v2H9v-2zm0 5h11v2H9v-2zM4 7a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zm0 5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zm0 5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: center;
}

#ez-toc-container .ez-toc-title-toggle {
    position: relative !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

#ez-toc-container .ez-toc-title-toggle::after {
    content: "▼" !important;
    font-size: 12px !important;
    color: var(--bt-primary) !important;
    pointer-events: none !important;
}

#ez-toc-container .ez-toc-title-toggle a,
#ez-toc-container .ez-toc-title-toggle label,
#ez-toc-container .ez-toc-title-toggle input {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 5 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

#ez-toc-container .ez-toc-title-toggle label::before,
#ez-toc-container .ez-toc-title-toggle label::after { display: none !important; }
#ez-toc-container .ez-toc-title-toggle i,
#ez-toc-container .ez-toc-title-toggle svg,
#ez-toc-container .ez-toc-title-toggle img { display: none !important; }

#ez-toc-container nav { padding: 12px 15px !important; }
#ez-toc-container ul.ez-toc-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    direction: rtl !important;
}

#ez-toc-container ul.ez-toc-list li {
    margin-bottom: 12px !important;
    list-style-type: none !important;
    text-align: right !important;
}

#ez-toc-container ul.ez-toc-list li a {
    display: flex !important;
    align-items: baseline !important;
    color: var(--bt-primary) !important;
    font-size: 14.5px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    line-height: 1.8 !important;
    transition: color 0.2s ease !important;
    box-shadow: none !important;
}

#ez-toc-container span.ez-toc-section {
    margin-left: 8px !important;
    margin-right: 0 !important;
    float: none !important;
    color: var(--bt-gold) !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;
    text-align: right !important;
}

#ez-toc-container ul.ez-toc-list ul {
    margin-top: 8px !important;
    margin-bottom: 10px !important;
    padding-right: 20px !important;
    padding-left: 0 !important;
}
#ez-toc-container ul.ez-toc-list ul li a {
    font-weight: normal !important;
    font-size: 13.5px !important;
    color: #555 !important;
}
#ez-toc-container ul.ez-toc-list a:hover { color: var(--bt-gold) !important; }
.ez-toc-widget-container ul.ez-toc-list li { border: none !important; }

/* =========================================
   7. Single post typography & featured image
   ========================================= */
.single-post .entry-content p {
    text-align: justify !important;
    text-justify: inter-word;
    line-height: 1.9 !important;
}

body.single-post .single-post-thumb,
body.single-post figure.single-featured-image,
body.single-post .post-thumbnail,
body.single-post .entry-header .post-thumbnail,
body.single-post .tie-slick-slider-wrapper {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    border: none !important;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    backface-visibility: hidden;
    transform: translateZ(0);
}
body.single-post .single-post-thumb img,
body.single-post figure.single-featured-image img,
body.single-post .post-thumbnail img,
body.single-post .entry-header .post-thumbnail img,
body.single-post .tie-slick-slider img {
    border-radius: 12px !important;
    box-shadow: none !important;
}

/* =========================================
   8. Shared responsive utilities
   ========================================= */
@media (min-width: 768px) {
    .bt-mobile-only,
    .bt-hide-desktop { display: none !important; }

    .bt-routing-box {
        flex-direction: row;
        justify-content: space-between;
    }
    .routing-apps {
        width: auto;
        flex: 1;
        justify-content: flex-end;
    }
    .app-link {
        flex: unset;
        min-width: 80px;
    }
}

@media (max-width: 767px) {
    .bt-desktop-only,
    .bt-hide-mobile { display: none !important; }

    .bt-meta-list strong {
        min-width: auto !important;
        margin-left: 5px !important;
    }

    .bt-list-container .bt-buttons-grid.bt-mobile-only {
        display: flex !important;
        flex-wrap: wrap;
        margin-bottom: 0 !important;
    }
    .bt-list-container .bt-btn {
        flex: 1 1 30% !important;
        font-size: 11px !important;
        padding: 8px 0 !important;
    }
}