/**
 * Community Prompts CSS
 * Responsive styles for the community prompts gallery
 */

/* ============================================
   SECTION CONTAINER
   ============================================ */

.community-prompts-section {
    width: 100%;
    margin: var(--section-gap) 0 0 0;
}

.community-prompts-box {
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--box-border-radius);
    padding: var(--box-padding-desktop);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ============================================
   HEADER
   ============================================ */

.community-prompts-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    text-align: center;
    color: #ffffff;
    letter-spacing: 0.15em;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.community-prompts-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 1.5rem 0;
}

/* ============================================
   FILTERS - CUSTOM DROPDOWN STYLE (Brands Page Style)
   ============================================ */

.community-prompts-filters {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Dropdown Container */
.cp-dropdown {
    position: relative;
    min-width: 180px;
}

/* Toggle Button - Brands Style */
.cp-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 1rem 1.25rem;
    background: rgba(var(--glass-rgb), 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.cp-dropdown-toggle:hover {
    background: rgba(var(--glass-hover-rgb), 0.75);
    border-color: rgba(255, 255, 255, 0.25);
}

.cp-dropdown.open .cp-dropdown-toggle {
    background: rgba(var(--glass-hover-rgb), 0.9);
    border-color: rgba(255, 255, 255, 0.3);
    border-radius: 12px 12px 0 0;
}

/* Toggle Text + Count */
.cp-dropdown-toggle-text {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cp-dropdown-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
}

.cp-dropdown-arrow {
    font-size: 0.6rem;
    opacity: 0.7;
    transition: transform 0.3s ease;
}

.cp-dropdown.open .cp-dropdown-arrow {
    transform: rotate(180deg);
}

/* Active state (filter selected) */
.cp-dropdown.active .cp-dropdown-toggle {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.cp-dropdown.active .cp-dropdown-count {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* Dropdown Menu - Brands Style */
.cp-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(35, 35, 40, 0.98) 0%, rgba(25, 25, 28, 0.99) 100%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    max-height: 300px;
    overflow-y: auto;
}

.cp-dropdown.open .cp-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown Items - Brands Style */
.cp-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.cp-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.cp-dropdown-item.active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

/* Item Count Badge */
.cp-dropdown-item-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 0.6rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

.cp-dropdown-item:hover .cp-dropdown-item-count,
.cp-dropdown-item.active .cp-dropdown-item-count {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
}

/* Scrollbar styling */
.cp-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.cp-dropdown-menu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.cp-dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.cp-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   PROMPTS GRID
   ============================================ */

.community-prompts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Desktop: Show 8 prompts (2 rows of 4) */
@media (min-width: 769px) {
    .community-prompts-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   PROMPT CARD
   ============================================ */

.cp-card {
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.01) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 1.25rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.cp-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Badges */
.cp-card-badges {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.cp-badge {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}

.cp-badge-type {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.cp-badge-category {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Category-specific colors */
.cp-badge-category[data-category="straight"],
.cp-card[data-category="straight"] .cp-badge-category {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.cp-badge-category[data-category="hentai"],
.cp-card[data-category="hentai"] .cp-badge-category {
    background: rgba(236, 72, 153, 0.2);
    color: #f9a8d4;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.cp-badge-category[data-category="gay"],
.cp-card[data-category="gay"] .cp-badge-category {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.cp-badge-category[data-category="lesbian"],
.cp-card[data-category="lesbian"] .cp-badge-category {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.cp-badge-category[data-category="shemale"],
.cp-card[data-category="shemale"] .cp-badge-category {
    background: rgba(249, 115, 22, 0.2);
    color: #fb923c;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

/* Prompt Text */
.cp-card-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 0.75rem 0;
    flex-grow: 1;
    
    /* Clamp to 4 lines */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Custom Words */
.cp-card-custom {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 0.75rem 0;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cp-card-custom span {
    color: rgba(16, 185, 129, 0.8);
    font-weight: 600;
}

.cp-hub-link, .cp-hub-link:hover, .cp-hub-link:focus { text-decoration: none; }

/* Footer */
.cp-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cp-card-date {
    flex: 0 0 auto;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Copy Button */
.cp-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.4rem 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cp-copy-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.cp-copy-btn.copied {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.cp-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
}

.cp-empty-state p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* ============================================
   LOAD MORE
   ============================================ */

.community-prompts-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.cp-load-more-btn {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.65rem 1.5rem;
    background: rgba(var(--glass-rgb), 0.5);
    backdrop-filter: blur(15px) saturate(150%);
    -webkit-backdrop-filter: blur(15px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
}

.cp-load-more-btn:hover:not(:disabled) {
    background: rgba(var(--glass-hover-rgb), 0.6);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

.cp-load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Actions row: Load More + Prompt Center link — equal width, centered text */
.cp-actions-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}
.cp-actions-row .cp-load-more-btn,
.cp-actions-row .cp-hub-link {
    flex: 1 1 200px;
    max-width: 280px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.7rem 1.25rem;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 8px;
}
.cp-hub-link {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    background: rgba(139, 92, 246, 0.16);
    border: 1px solid rgba(139, 92, 246, 0.5);
    color: #c4b5fd;
    transition: all 0.3s ease;
    text-decoration: none;
}
.cp-hub-link:hover {
    background: rgba(139, 92, 246, 0.28);
    border-color: rgba(139, 92, 246, 0.7);
    color: #ffffff;
    transform: translateY(-1px);
}
@media (max-width: 640px) {
    .cp-actions-row { flex-direction: column; align-items: stretch; }
    .cp-actions-row .cp-load-more-btn,
    .cp-actions-row .cp-hub-link { flex: none; width: 100%; max-width: none; }
}

.cp-count {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (max-width: 1024px) {
    .community-prompts-box {
        padding: 2rem;
        border-radius: 20px;
    }
    
    .community-prompts-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 768px) {
    .community-prompts-section {
        margin-top: var(--section-gap-mobile);
    }
    
    .community-prompts-box {
        padding: var(--box-padding-mobile);
        border-radius: var(--box-border-radius-mobile);
    }
    
    .community-prompts-title {
        font-size: 1.3rem;
        letter-spacing: 0.1em;
    }
    
    .community-prompts-subtitle {
        font-size: 0.85rem;
    }
    
    /* Dropdown filters on mobile */
    .community-prompts-filters {
        gap: 0.75rem;
    }
    
    .cp-dropdown {
        min-width: 150px;
    }
    
    .cp-dropdown-toggle {
        font-size: 0.75rem;
        padding: 0.875rem 1rem;
        border-radius: 10px;
    }
    
    .cp-dropdown.open .cp-dropdown-toggle {
        border-radius: 10px 10px 0 0;
    }
    
    .cp-dropdown-count {
        min-width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
    
    .cp-dropdown-menu {
        border-radius: 0 0 12px 12px;
        padding: 0.4rem;
    }
    
    .cp-dropdown-item {
        font-size: 0.75rem;
        padding: 0.875rem 1rem;
        border-radius: 8px;
    }
    
    .cp-dropdown-item-count {
        min-width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
    
    .community-prompts-grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
    
    .cp-card {
        padding: 1rem;
        border-radius: 14px;
    }
    
    .cp-card-text {
        font-size: 0.85rem;
    }
    
    .cp-load-more-btn {
        width: 100%;
        padding: 0.75rem 1.25rem;
        font-size: 0.7rem;
    }
}

/* ============================================
   RESPONSIVE - SMALL MOBILE
   ============================================ */

@media (max-width: 480px) {
    .community-prompts-box {
        padding: 1rem;
        border-radius: 14px;
    }
    
    .community-prompts-title {
        font-size: 1.1rem;
    }
    
    .community-prompts-filters {
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .cp-dropdown {
        min-width: 140px;
        flex: 1;
    }
    
    .cp-dropdown-toggle {
        font-size: 0.75rem;
        padding: 0.75rem 1rem;
        border-radius: 10px;
    }
    
    .cp-dropdown.open .cp-dropdown-toggle {
        border-radius: 10px 10px 0 0;
    }
    
    .cp-dropdown-toggle-text {
        gap: 0.5rem;
    }
    
    .cp-dropdown-count {
        min-width: 22px;
        height: 22px;
        font-size: 0.65rem;
        padding: 0 0.4rem;
    }
    
    .cp-dropdown-arrow {
        font-size: 0.5rem;
    }
    
    .cp-dropdown-menu {
        border-radius: 0 0 10px 10px;
        padding: 0.35rem;
    }
    
    .cp-dropdown-item {
        font-size: 0.75rem;
        padding: 0.75rem 1rem;
        border-radius: 8px;
    }
    
    .cp-dropdown-item-count {
        min-width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }
    
    .cp-badge {
        font-size: 0.6rem;
        padding: 0.2rem 0.5rem;
    }
    
    .cp-card-text {
        font-size: 0.8rem;
        -webkit-line-clamp: 3;
    }
    
    /* Height stays 34px for a comfortable touch target; only the sides tighten. */
    .cp-card-footer .cp-copy-btn,
    .cp-card-footer .cp-share-btn {
        padding: 0 0.55rem;
    }
}

/* ============================================
   ANIMATION
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cp-card {
    animation: fadeIn 0.4s ease forwards;
}

.community-prompts-grid .cp-card:nth-child(1) { animation-delay: 0.05s; }
.community-prompts-grid .cp-card:nth-child(2) { animation-delay: 0.1s; }
.community-prompts-grid .cp-card:nth-child(3) { animation-delay: 0.15s; }
.community-prompts-grid .cp-card:nth-child(4) { animation-delay: 0.2s; }
.community-prompts-grid .cp-card:nth-child(5) { animation-delay: 0.25s; }
.community-prompts-grid .cp-card:nth-child(6) { animation-delay: 0.3s; }


/* Community library quick tool button (affiliate CTA).
   Added 2026-07-21 as a plain "Try it" link, replaced 2026-07-30 by the same quick component
   used on the Prompt Center hub: a gold bolt that expands on tap to reveal the matched tool.
   Rendered server-side (inc/community-prompts.php) and by community-prompts.js, only when
   enabled in Brands -> Community Library (off by default). */
/* The actions take the row to the right of the timestamp, so the quick has somewhere to
   expand into when it opens. Same 34px button height as the hub's .pc-icon-btn / .pc-quick. */
.cp-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.5rem;
}

.cp-card-footer .cp-copy-btn,
.cp-card-footer .cp-share-btn {
    flex: 0 0 auto;
    height: 34px;
    padding: 0 0.7rem;
    border-radius: 8px;
    overflow: hidden;
    transition: flex-grow 0.3s ease, max-width 0.3s ease, padding 0.3s ease,
                margin 0.3s ease, border-width 0.3s ease, opacity 0.22s ease,
                background 0.18s ease, color 0.18s ease;
}

.cp-quick {
    flex: 0 0 auto;
    /* Wider than the 34px icon buttons even when closed, so the gold pill stays the thing your
       eye lands on. On the hub the same effect comes from a bigger flex share. */
    min-width: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255, 207, 51, 0.45);
    background: rgba(255, 207, 51, 0.10);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: flex-grow 0.3s ease, background 0.25s ease, border-color 0.25s ease;
}

.cp-quick:hover {
    background: rgba(255, 207, 51, 0.18);
    border-color: rgba(255, 207, 51, 0.7);
}

.cp-quick-tg {
    order: 1;
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #ffcf33;
}

.cp-quick-tg svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Warm ivory rather than the brand's own colour: a brand like PornWorks is orange, and orange
   text inside a gold border next to an orange icon was three warm tones fighting in one row.
   visibility keeps the link out of the tab order while it is folded away, and is delayed on
   close so the name still fades out instead of popping. */
.cp-quick-nm {
    order: 2;
    flex: none;
    white-space: nowrap;
    max-width: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tool-ink, #fff2c2);
    text-decoration: none;
    transition: max-width 0.3s ease, opacity 0.22s ease, padding 0.3s ease,
                visibility 0s linear 0.3s;
}

/* Open state, identical to the hub: copy and share collapse rather than being squashed,
   and the quick grows to fill the row. The timestamp stays so the card keeps its context. */
.cp-card-footer.cp-tool-open .cp-card-actions {
    gap: 0;
}

.cp-card-footer.cp-tool-open .cp-copy-btn,
.cp-card-footer.cp-tool-open .cp-share-btn {
    max-width: 0;
    opacity: 0;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    border-width: 0;
    pointer-events: none;
}

.cp-card-footer.cp-tool-open .cp-quick {
    flex: 1 1 0;
    background: rgba(255, 207, 51, 0.08);
    cursor: pointer;
}

.cp-card-footer.cp-tool-open .cp-quick-nm {
    max-width: 240px;
    opacity: 1;
    padding-left: 8px;
    visibility: visible;
    transition: max-width 0.3s ease, opacity 0.22s ease, padding 0.3s ease, visibility 0s;
}

/* Copy and Share stay at full strength. They were dimmed to 55% on 2026-07-30 and that read as
   "broken", as if only the quick was alive, so the dimming came straight back out. What separates
   them from the quick is hue, not brightness: the share icon keeps the orange it always had, the
   copy icon is neutral, and both sit on the same neutral background. */
/* font-size and line-height stay meaningful here: the share icon is briefly replaced by a "✓"
   text character on a successful copy, and that still has to size and centre correctly. */
.cp-card-footer .cp-copy-icon,
.cp-card-footer .cp-share-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
}

.cp-card-footer .cp-copy-icon svg,
.cp-card-footer .cp-share-ic svg {
    width: 16px;
    height: 16px;
    display: block;
}

.cp-card-footer .cp-share-ic {
    color: #ff7a33;
}

.cp-card-footer .cp-share-btn:hover .cp-share-ic {
    color: #ff9457;
}

/* The green confirmation tint has to beat the orange above, so it comes after it. */
.cp-card-footer .cp-share-btn.copied .cp-share-ic {
    color: #10b981;
}

/* Community card Share button (#3): icon-only. Copy also made icon-only for uniformity.
   Rendered only when enabled in Brands -> Community Library (off by default).
   Was orange until 2026-07-30, dropped so the gold quick is the only colour competing
   for attention in the row. The hub's .pc-share lost the same orange, in step. */
.cp-copy-btn .cp-copy-text { display: none; }

.cp-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.7rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cp-share-btn:hover {
    background: rgba(255, 87, 0, 0.14);
    border-color: rgba(255, 87, 0, 0.5);
}

.cp-share-btn.copied {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
}