/* ==========================================================================
   PBBM AI Effects styles
   Only styles the plugin-specific components. Theme fonts, spacing, and
   colours drive everything else.
   ========================================================================== */

/* --------------------------------------------------------------------------
   My AI Effects page
   -------------------------------------------------------------------------- */
.pbbm-aieffects-wrap { max-width: 1100px; margin: 0 auto; }
.pbbm-aieffects-login { max-width: 460px; margin: 0 auto; text-align: center; }
.pbbm-aieffects-login h2 { margin-bottom: 1rem; }
.pbbm-aieffects-subtext { margin-top: 1.5rem; font-size: 0.95rem; color: #555; }
.pbbm-aieffects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.pbbm-aieffects-card {
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}
.pbbm-aieffects-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.pbbm-aieffects-card-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.pbbm-aieffects-card-thumb { background: #f4f4f4; aspect-ratio: 4 / 3; overflow: hidden; }
.pbbm-aieffects-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pbbm-aieffects-card-body { padding: 1rem 1.1rem 1.2rem; }
.pbbm-aieffects-card-body h3 { margin: 0 0 0.4rem; font-size: 1.1rem; line-height: 1.3; }
.pbbm-aieffects-card-body p { margin: 0; font-size: 0.9rem; color: #555; line-height: 1.4; }
.pbbm-aieffects-empty { background: #fafafa; border: 1px dashed #ddd; padding: 2rem; text-align: center; border-radius: 8px; }
.pbbm-aieffects-empty p { margin: 0 0 1rem; }

/* --------------------------------------------------------------------------
   Platform badges
   -------------------------------------------------------------------------- */
.pbbm-platforms {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0.5rem 0;
}
.pbbm-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.7rem;
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 500;
    background: #FAF8F3;
    border: 1px solid #E8E5DD;
    color: #0E0E14;
    line-height: 1.2;
}
.pbbm-platform-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}
.pbbm-platform-dot-chatgpt { background: #10A37F; }
.pbbm-platform-dot-gemini  { background: #4285F4; }
.pbbm-platform-dot-copilot { background: #7B5CE5; }

/* --------------------------------------------------------------------------
   Prompt block and copy button
   -------------------------------------------------------------------------- */
.pbbm-prompt-block { margin: 1rem 0; }
.pbbm-prompt-box {
    position: relative;
    background: #0E0E14;
    color: #E8E5DD;
    border-radius: 6px;
    padding: 1.5rem 1.7rem;
    padding-bottom: 4.5rem;
}
.pbbm-prompt-text {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.88rem;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    background: transparent;
    color: inherit;
    border: none;
    padding: 0;
}
.pbbm-copy-btn {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    background: #FFFFFF;
    color: #0E0E14;
    border: none;
    padding: 0.65rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    font-family: inherit;
    line-height: 1.2;
}
.pbbm-copy-btn:hover { background: #F4F1E9; }
.pbbm-copy-btn:active { transform: translateY(1px); }
.pbbm-copy-btn.pbbm-copied { background: #1E5630; color: #fff; }
.pbbm-copy-btn-icon { font-size: 1rem; line-height: 1; }
.pbbm-copy-btn-label { line-height: 1; }

/* --------------------------------------------------------------------------
   Optional Controls accordion (native <details>)
   -------------------------------------------------------------------------- */
.pbbm-mods-accordion {
    margin: 0.8rem 0 1.5rem;
    border: 1px solid #E8E5DD;
    border-radius: 6px;
    background: #FAF8F3;
    overflow: hidden;
}
.pbbm-mods-accordion > summary {
    cursor: pointer;
    padding: 0.85rem 1.1rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.95rem;
    user-select: none;
}
.pbbm-mods-accordion > summary::-webkit-details-marker { display: none; }
.pbbm-mods-accordion > summary::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    color: #5C5C66;
    margin-left: 0.7rem;
    transition: transform 0.15s ease;
}
.pbbm-mods-accordion[open] > summary::after {
    content: '\2013';
}
.pbbm-mods-summary-hint {
    font-size: 0.78rem;
    font-weight: 400;
    color: #8A8A93;
    margin-left: auto;
    margin-right: 0.6rem;
}
.pbbm-mods-content {
    padding: 1rem 1.2rem 1.3rem;
    display: grid;
    gap: 1.2rem;
}

/* Dropdown row */
.pbbm-mod-dropdown-row {
    display: grid;
    gap: 0.4rem;
}
.pbbm-mod-dropdown-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0E0E14;
}
.pbbm-mod-dropdown {
    padding: 0.55rem 0.8rem;
    border: 1px solid #D6D2C7;
    border-radius: 5px;
    background: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    color: #0E0E14;
    cursor: pointer;
    max-width: 100%;
}
.pbbm-mod-dropdown-hint {
    font-size: 0.82rem;
    color: #5C5C66;
    margin: 0.3rem 0 0;
    line-height: 1.4;
}

/* Pill toggle */
.pbbm-mod-pills-list {
    display: grid;
    gap: 0.9rem;
}
.pbbm-mod-pill-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.pbbm-mod-pill {
    background: #fff;
    color: #0E0E14;
    border: 1px solid #D6D2C7;
    border-radius: 100px;
    padding: 0.55rem 1.15rem;
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    transition: all 0.15s ease;
    min-width: 140px;
    justify-content: flex-start;
    line-height: 1.2;
}
.pbbm-mod-pill-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid #C4BEB0;
    background: transparent;
    display: inline-block;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.pbbm-mod-pill:hover { border-color: #0E0E14; }
.pbbm-mod-pill[aria-pressed="true"] {
    background: #0E0E14;
    color: #fff;
    border-color: #0E0E14;
}
.pbbm-mod-pill[aria-pressed="true"] .pbbm-mod-pill-dot {
    background: #fff;
    border-color: #fff;
}
.pbbm-mod-pill-desc {
    flex: 1;
    min-width: 200px;
    font-size: 0.88rem;
    color: #5C5C66;
    margin: 0.2rem 0 0;
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Prompt block error state (missing base, etc.)
   -------------------------------------------------------------------------- */
.pbbm-prompt-error {
    background: #FFEBEB;
    border: 1px solid #E5A5A5;
    color: #7A1F1F;
    padding: 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Pack owner-view WooCommerce furniture suppression (safety net).
   The PHP already removes the hooks; these rules catch any theme-specific
   variants that may still render.
   -------------------------------------------------------------------------- */
body.pbbm-pack-owner-view .product .price,
body.pbbm-pack-owner-view .product form.cart,
body.pbbm-pack-owner-view .product .cart,
body.pbbm-pack-owner-view .product .product_meta,
body.pbbm-pack-owner-view .woocommerce-tabs,
body.pbbm-pack-owner-view .related.products,
body.pbbm-pack-owner-view .up-sells,
body.pbbm-pack-owner-view .product-gallery-slider,
body.pbbm-pack-owner-view .product-images,
body.pbbm-pack-owner-view .images,
body.pbbm-pack-owner-view .product-thumbnails,
body.pbbm-pack-owner-view .single_add_to_cart_button,
body.pbbm-pack-owner-view .yith-wcwl-add-to-wishlist,
body.pbbm-pack-owner-view .single-product-header {
    display: none !important;
}

/* Give the owner view breathing room since we removed the gallery column. */
body.pbbm-pack-owner-view .product-summary,
body.pbbm-pack-owner-view .summary,
body.pbbm-pack-owner-view .entry-summary {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}
body.pbbm-pack-owner-view .product-info {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure pack content renders even when we removed summary hooks. */
.pbbm-pack-render {
    margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   Mobile refinements
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .pbbm-prompt-box { padding: 1.2rem 1.2rem 4rem; }
    .pbbm-copy-btn { padding: 0.55rem 0.9rem; font-size: 0.85rem; }
    .pbbm-mod-pill { min-width: 0; width: 100%; justify-content: flex-start; }
    .pbbm-mod-pill-row { gap: 0.5rem; }
    .pbbm-mod-pill-desc { min-width: 0; }
}