/*
 * PCN UI Fixes — pcn-ui-fixes.css
 * Add to: Appearance → Customize → Additional CSS
 * OR enqueue from functions.php alongside child style.
 *
 * Fixes:
 *  1. Social share buttons — alignment & slide behaviour
 *  2. Chatbot icon — correct colour contrast
 *  3. Chatbot close button — proper styling
 *  4. Social toggle/minimize button — properly styled
 *  5. AAWP "Invalid License" — visually suppress the error banner
 */

/* ============================================================
   1. SOCIAL SHARE — FLOATING PANEL
   The buttons need to be flush to the right edge and slide
   left on hover, not overlap each other.
   ============================================================ */

.pcn-social-share {
    position: fixed !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 8000 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
    pointer-events: none; /* panel itself not clickable */
}

/* All children are clickable */
.pcn-social-share > * {
    pointer-events: all;
}

/* Individual share buttons */
.pcn-social-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 14px 9px 10px !important;
    border-radius: 30px 0 0 30px !important;  /* pill left, flush right */
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    width: 44px !important;           /* collapsed — only icon visible */
    overflow: hidden !important;
    transition: width 0.25s cubic-bezier(0.4,0,0.2,1),
                box-shadow 0.2s ease !important;
    box-shadow: -2px 2px 8px rgba(0,0,0,0.18) !important;
    justify-content: flex-start !important;
    transform: none !important;        /* reset any translateX from old code */
}

.pcn-social-btn:hover {
    width: 130px !important;           /* expands to show label */
    transform: none !important;
    box-shadow: -4px 4px 16px rgba(0,0,0,0.28) !important;
}

/* Icon inside button */
.pcn-social-btn img,
.pcn-social-btn span.icon {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Network colours */
.pcn-social-btn.facebook  { background: #1877F2 !important; }
.pcn-social-btn.twitter   { background: #000000 !important; }
.pcn-social-btn.whatsapp  { background: #25D366 !important; }
.pcn-social-btn.linkedin  { background: #0A66C2 !important; }
.pcn-social-btn.pinterest { background: #E60023 !important; }
.pcn-social-btn.email     { background: #374151 !important; }

/* Hide on mobile */
@media (max-width: 768px) {
    .pcn-social-share { display: none !important; }
}

/* ============================================================
   2. SOCIAL SHARE — TOGGLE / MINIMIZE BUTTON
   ============================================================ */

.pcn-social-share__toggle,
#pcn-share-toggle,
#pcn-toggle-share {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% 0 0 50% !important; /* flush to right edge */
    background: #111827 !important;
    color: #F59E0B !important;
    border: 1px solid #374151 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    margin-bottom: 6px !important;
    box-shadow: -2px 2px 8px rgba(0,0,0,0.2) !important;
    align-self: flex-end !important;
    padding: 0 !important;
}

.pcn-social-share__toggle:hover,
#pcn-share-toggle:hover,
#pcn-toggle-share:hover {
    background: #F59E0B !important;
    color: #111827 !important;
}

/* ============================================================
   3. CHATBOT ICON BUTTON
   Problem: amber background with white emoji reads poorly.
   Fix: dark background, amber icon, clear contrast.
   ============================================================ */

#pcn-chatbot-icon,
#chatbot-icon {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: #111827 !important;          /* dark, not amber */
    border: 2px solid #F59E0B !important;    /* amber ring */
    color: #F59E0B !important;
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 9000 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35), 0 0 0 4px rgba(245,158,11,0.15) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    padding: 0 !important;
}

#pcn-chatbot-icon:hover,
#chatbot-icon:hover {
    transform: scale(1.1) rotate(-8deg) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 6px rgba(245,158,11,0.2) !important;
}

/* ============================================================
   4. CHATBOT BOX — CLOSE BUTTON
   ============================================================ */

#pcn-chatbot-close,
#chatbot-close,
#chatbot-header button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.08) !important;
    color: #9CA3AF !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

#pcn-chatbot-close:hover,
#chatbot-close:hover,
#chatbot-header button:hover {
    background: rgba(239,68,68,0.2) !important;
    color: #EF4444 !important;
    border-color: rgba(239,68,68,0.3) !important;
}

/* ============================================================
   5. CHATBOT HEADER — TIGHTEN LAYOUT
   ============================================================ */

#pcn-chatbot-header,
#chatbot-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    background: #0C0F14 !important;
    border-bottom: 1px solid #1E2530 !important;
}

/* ============================================================
   6. AAWP "INVALID LICENSE" — VISUALLY SUPPRESS
   This hides the red error text so the rest of the page
   still displays. Fix the root cause in AAWP plugin settings.
   ============================================================ */

.aawp-invalid-license,
.aawp-error,
p:has(> strong:only-child) {
    /* Targeted only where AAWP injects its error */
    font-size: 0 !important;
    line-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* More specific selector AAWP uses */
.aawp .aawp-notice,
.aawp-notice--invalid {
    display: none !important;
}

/* Fallback: text-based selector for the exact string */
.aawp-product + p[style*="color: red"],
.aawp-product + p[style*="color:red"] {
    display: none !important;
}

/* ============================================================
   7. CHATBOT MESSAGE AREA — SEND BUTTON ALIGNMENT
   ============================================================ */

#pcn-chatbot-input-row,
#chatbot-input-container {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px !important;
    border-top: 1px solid #E5E7EB !important;
    background: #ffffff !important;
}

#pcn-chatbot-send,
#chatbot-send {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    background: #F59E0B !important;
    color: #111827 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: background 0.2s ease !important;
    padding: 0 !important;
}

#pcn-chatbot-send:hover,
#chatbot-send:hover {
    background: #D97706 !important;
    color: #ffffff !important;
}

#pcn-chatbot-input,
#chatbot-input {
    flex: 1 !important;
    min-width: 0 !important;           /* prevents overflow */
    padding: 10px 12px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    outline: none !important;
    font-family: inherit !important;
    background: #F9FAFB !important;
    transition: border-color 0.2s ease !important;
}

#pcn-chatbot-input:focus,
#chatbot-input:focus {
    border-color: #F59E0B !important;
    background: #ffffff !important;
}