/* ═══════════════════════════════════════════
   QuoteCraft v1.0.0 — Public Styles
   By Yash K. · yashk.design
   ═══════════════════════════════════════════ */

@font-face {
    font-family: 'Maku-Deva';
    src: url('https://yashk.design/wp-content/uploads/fonts/Maku.ttf') format('truetype');
    font-display: swap;
}

/* ── Blockquote Card ─────────────────────── */
blockquote {
    background: #ffffff !important;
    border-radius: 22px !important;
    padding: 32px 28px 20px !important;
    box-shadow: 0 6px 32px rgba(0,0,0,0.07) !important;
    max-width: 780px !important;
    width: auto !important;
    margin: 32px auto !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    border-left: none !important;
    display: block !important;
    box-sizing: border-box !important;
}

blockquote::before {
    content: '\201C';
    position: absolute;
    top: -38px; left: 12px;
    font-size: 148px;
    color: var(--qc-accent, #f53803);
    opacity: 0.07;
    font-family: Georgia, serif;
    z-index: 0;
    pointer-events: none;
    line-height: 1;
}

blockquote::after {
    content: '';
    position: absolute;
    left: 0; top: 20px; bottom: 20px;
    width: 4px;
    background: var(--qc-accent, #f53803);
    border-radius: 0 4px 4px 0;
    opacity: 0.5;
}

blockquote p {
    font-size: clamp(16px, 3.6vw, 24px) !important;
    line-height: 1.68 !important;
    color: #1a1a1a !important;
    font-family: 'Playfair Display', 'Maku-Deva', Georgia, serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    position: relative;
    z-index: 1;
    margin: 0 !important;
    word-wrap: break-word !important;
    padding-left: 6px !important;
}

/* ── UI Bar ──────────────────────────────── */
.qc-ui {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 20px !important;
    padding-top: 15px !important;
    border-top: 1px solid rgba(0,0,0,0.055) !important;
    gap: 10px !important;
    position: relative !important;
    z-index: 2 !important;
}

.qc-ui-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.qc-soc {
    display: flex !important;
    gap: 7px !important;
    align-items: center !important;
}

/* ── Theme Dots ──────────────────────────── */
.qc-themes {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    padding-left: 10px !important;
    border-left: 1px solid rgba(0,0,0,0.07) !important;
}

.qc-tdot {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    padding: 0 !important;
    outline: none !important;
    transition: transform 0.16s ease !important;
}
.qc-tdot:hover { transform: scale(1.25) !important; }
.qc-tdot.active { transform: scale(1.18) !important; }

/* ── Buttons ─────────────────────────────── */
.qc-act {
    display: flex !important;
    gap: 7px !important;
    align-items: center !important;
}

.qc-btn, .qc-pill {
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}

.qc-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
}

.qc-pill {
    padding: 8px 16px !important;
    border-radius: 50px !important;
    font-size: 12.5px !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    white-space: nowrap !important;
    letter-spacing: 0.2px !important;
}

@media (hover: hover) {
    .qc-btn:hover, .qc-pill:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 5px 16px rgba(0,0,0,0.18) !important;
    }
}

.qc-btn:active, .qc-pill:active { transform: scale(0.93) !important; }

.qc-pill:disabled {
    opacity: 0.48 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.b-wa { background: #25D366 !important; }
.b-pi { background: #E60023 !important; }
.b-tw { background: #000 !important; }
.b-cp { background: #546e7a !important; }
.b-sq { background: var(--qc-accent, #f53803) !important; }
.b-st { background: linear-gradient(135deg, var(--qc-accent, #f53803) 0%, #1a1a2e 100%) !important; }

/* ── Toast ───────────────────────────────── */
#qc-toast {
    visibility: hidden;
    min-width: 160px;
    max-width: 86vw;
    background: #1a1a1a;
    color: #fff;
    text-align: center;
    border-radius: 50px;
    padding: 10px 20px;
    position: fixed;
    z-index: 999999;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%) translateY(12px);
    font-size: 13px;
    font-family: -apple-system, sans-serif;
    box-shadow: 0 6px 24px rgba(0,0,0,0.28);
    opacity: 0;
    transition: opacity 0.26s ease, transform 0.26s ease;
    pointer-events: none;
}
#qc-toast.show {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Mobile ──────────────────────────────── */
@media (max-width: 600px) {
    blockquote {
        border-radius: 16px !important;
        padding: 24px 16px 16px !important;
        margin: 20px 0 !important;
        max-width: 100% !important;
    }
    .qc-ui {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .qc-ui-left {
        width: 100% !important;
        justify-content: space-between !important;
        padding-bottom: 8px !important;
        border-bottom: 1px dashed rgba(0,0,0,0.06) !important;
    }
    .qc-themes { border-left: none !important; padding-left: 0 !important; }
    .qc-act { width: 100% !important; justify-content: space-between !important; }
    .qc-pill { flex: 1 !important; font-size: 12px !important; padding: 10px 4px !important; min-width: 0 !important; }
}