/* ========================================================================
   ZQ PREVIEW WIDGET — CLEAN, DEDUPED, FINAL VERSION
   ======================================================================== */

/* ------------------------------
   TABS
------------------------------ */
.zq-preview-wrapper { display:block; }

.zq-preview-tabs {
    display:flex;
    gap:8px;
    align-items:center;
}

.zq-preview-tabs .zq-tab {
    width:38px; height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#fff;
    border:1px solid #e6e6e6;
    cursor:pointer;
    color:#374151;
}

.zq-preview-tabs .zq-tab.active {
    background:#0ea5a4;
    color:#fff;
    border-color:transparent;
    box-shadow:0 6px 18px rgba(2,6,23,0.08);
}

/* ------------------------------
   CARD WRAPPER
------------------------------ */
.zq-preview-cards {
    margin-top:12px;
}

.zq-card {
    display:none;
    background:none;
    border:none;
    padding:0;
    margin:0;
}
.zq-card[data-platform="x"] {
    display:block;
}

/* ========================================================================
   ① BASE OG RESET  — KEEP ONLY ONCE
   ======================================================================== */
.zq-og-card {
    box-sizing:border-box;
    width:100%;
    padding:0;
    margin:0;
    background:transparent;
    border:none;
    border-radius:0;
    overflow:hidden;
    display:block;
}

.zq-og-img {
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    background:transparent;
}
.zq-og-img img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ========================================================================
   ② PLATFORM-PERFECT OG STYLES
   ======================================================================== */

/* =======================
   X / TWITTER
======================= */
.zq-og-x {
    background:#fff;
    border-radius:14px;
    border:1px solid #e1e8ed;
    overflow:hidden;
    box-shadow:0 1px 2px rgba(0,0,0,0.08);
}
.zq-og-x .zq-og-img {
    height:314px; /* 16:9-ish preview like X/Twitter */
    background:#f0f2f5;
}
.zq-og-x .zq-og-content {
    padding:14px 16px;
}
.zq-og-x .zq-og-url {
    font-size:13px;
    text-transform:lowercase;
    color:#8b98a5;
    margin-bottom:6px;
}
.zq-og-x .zq-og-title {
    font-size:17px;
    font-weight:700;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.zq-og-x .zq-og-desc {
    font-size:14px;
    color:#536471;
    line-height:1.35;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* =======================
   FACEBOOK
======================= */
.zq-og-fb {
    background:#fff;
    border-radius:12px;
    border:1px solid #ced4e1;
    overflow:hidden;
}
.zq-og-fb .zq-og-img {
    height:280px; /* slightly taller for FB-style preview */
    background:#eee;
}
.zq-og-fb .zq-og-content { padding:12px 14px; }
.zq-og-fb .zq-og-url {
    font-size:12px;
    text-transform:uppercase;
    color:#606770;
    margin-bottom:5px;
}
.zq-og-fb .zq-og-title {
    font-size:18px;
    font-weight:700;
    color:#1c1e21;
}
.zq-og-fb .zq-og-desc {
    font-size:14px;
    color:#4b4f56;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* =======================
   INSTAGRAM (image only)
======================= */
.zq-og-ig {
    background:#fff;
    border-radius:14px;
    border:1px solid #eee;
    overflow:hidden;
    text-align:center;
}
.zq-og-ig .zq-og-img {
    height:360px; /* large square image to mimic IG feed */
    border-radius:14px 14px 0 0;
}
.zq-og-ig .zq-og-title,
.zq-og-ig .zq-og-desc,
.zq-og-ig .zq-og-url {
    display:none !important;
}

/* =======================
   WHATSAPP (AUTHENTIC)
======================= */

/* OUTER GREEN BG (WhatsApp tint) */
.zq-card[data-platform="wa"] {
    background-image: url("../img/bg-wa.webp");
    background-size: contain;
    padding:16px;
    border-radius:12px;
}

/* INNER CARD */
.zq-og-wa {
    background-color: #daf0cb;
  /*  border:1px solid #2d3a24;*/
    border-radius:7.5px;
    overflow:hidden;
    width:240px;
    max-width:100%;
    padding: 5px;
}

/* IMAGE — NO BACKGROUND UNDER IMAGE */
.zq-og-wa .zq-og-img {
    background:#fff;
    margin:0;
    padding:0;
    border-radius: 5px 5px 0 0;
}
.zq-og-wa .zq-og-img img {
    width:100%;
    height:auto;
}

/* CONTENT */
.zq-og-wa .zq-og-content {
    padding:12px 12px 10px;
    background:#cee7be;
    border-radius: 0 0 5px 5px;
}

/* TITLE */
.zq-og-wa .zq-og-title {
    font-size:13px;
    line-height:19px;
    font-weight:600;
    color:#111b21;
    margin-bottom:6px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* DESCRIPTION */
.zq-og-wa .zq-og-desc {
    font-size:12px;
    line-height:17px;
    font-weight:500;
    color:#727f6e;
    margin-bottom:6px;
    display:-webkit-box;
    -webkit-line-clamp:6;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* FOOTER */
.zq-og-wa .zq-og-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.zq-og-wa .zq-og-url {
    font-size:11px;
    color:#727f6e;
}
.zq-og-wa .zq-og-favicon {
    width:16px;
    height:16px;
    border-radius:4px;
    object-fit:cover;
}

/* =======================
   LINKEDIN
======================= */
.zq-og-li {
    background:#f3f6f8;
    border:1px solid #d3dce6;
    border-radius:12px;
    padding:14px;
    display:flex;
    gap:14px;
}
.zq-og-li .zq-og-img {
    width:120px;
    height:120px;
    background:#e2e8f0;
    border-radius:6px;
}
.zq-og-li .zq-og-title {
    font-size:18px;
    font-weight:700;
    color:#0a66c2;
}
.zq-og-li .zq-og-desc {
    font-size:14px;
    color:#394956;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.zq-og-li .zq-og-url {
    font-size:12px;
    color:#6f7b88;
}

/* =======================
   GITHUB
======================= */
.zq-og-gh {
    background:#0d1117;
    border:1px solid #30363d;
    border-radius:10px;
    padding:14px;
    color:#c9d1d9;
    display:flex;
    gap:12px;
}
.zq-og-gh .zq-og-img {
    width:80px;
    height:80px;
    background:#161b22;
    border-radius:4px;
}
.zq-og-gh .zq-og-title {
    font-size:16px;
    font-weight:600;
    color:#58a6ff;
}
.zq-og-gh .zq-og-desc {
    font-size:13px;
    color:#8b949e;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.zq-og-gh .zq-og-url {
    font-size:11px;
    color:#6e7681;
}

/* =======================
   DISCORD
======================= */
.zq-og-dc {
    background:#2f3136;
    border-radius:8px;
    border-left:4px solid #5865f2;
    padding:14px;
    color:#dcddde;
    display:flex;
    gap:14px;
}
.zq-og-dc .zq-og-img {
    width:80px;
    height:80px;
    background:#202225;
    border-radius:6px;
}
.zq-og-dc .zq-og-title { color:#fff; font-size:16px; font-weight:600; }
.zq-og-dc .zq-og-desc {
    color:#b9bbbe;
    font-size:13px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.zq-og-dc .zq-og-url {
    font-size:11px;
    color:#72767d;
}