/* --- Smart Cosmic - Blog Post Idea Generator (v1.0.0) --- */

/* --- Global Styles & Variables --- */
:root {
    /* Define color palette for easy changes */
    --scbpig-purple-dark: #581c87;   /* Dark Purple */
    --scbpig-purple-medium: #7e22ce; /* Medium Purple */
    --scbpig-purple-light: #a855f7;  /* Light Purple */
    --scbpig-purple-faint: #f3e8ff;  /* Very Light Purple / Background */
    --scbpig-grey-dark: #374151;    /* Dark Grey Text */
    --scbpig-grey-medium: #6b7280;  /* Medium Grey Text / Instructions */
    --scbpig-grey-light: #d1d5db;   /* Light Grey Borders */
    --scbpig-grey-bg: #f9fafb;      /* Background Grey */
    --scbpig-white: #ffffff;
    --scbpig-red-error: #ef4444;    /* Error Red */
    --scbpig-green-success: #10b981; /* Success Green */

    /* Fonts */
    --scbpig-font-heading: 'Montserrat', sans-serif;
    --scbpig-font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* Modern Font Stack */
}

/* Basic Reset & Box Sizing */
.scbpig-generator-wrap * {
    box-sizing: border-box;
}

/* --- Overall Wrapper --- */
.scbpig-generator-wrap {
    max-width: 1700px; /* Wider layout for matrix */
    margin: 40px auto;
    background-color: var(--scbpig-white);
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(126, 34, 206, 0.1); /* Subtle purple shadow */
    overflow: hidden;
    font-family: var(--scbpig-font-body);
    color: var(--scbpig-grey-dark);
    border: 1px solid var(--scbpig-purple-faint);
}

/* --- Titles --- */
.scbpig-main-title {
    font-family: var(--scbpig-font-heading);
    color: var(--scbpig-purple-medium);
    text-align: center;
    margin-bottom: 10px;
    font-size: 2.1em; /* Slightly smaller than previous */
}

.scbpig-subtitle {
    text-align: center;
    color: var(--scbpig-grey-medium);
    margin-bottom: 40px;
    font-size: 1.1em;
}

/* --- Matrix Layout --- */
.scbpig-matrix-container {
    display: grid;
    /* Define 3 columns: Inputs | Inputs | Generation Area */
    grid-template-columns: repeat(2, 1fr) 0.8fr; /* Adjust column widths as needed */
    /* Define rows implicitly, but set a gap */
    gap: 35px; /* Gap between grid items */
    align-items: start; /* Align items to the top of their grid cell */
}

/* Assign grid areas (optional but good for clarity) */
.scbpig-section-core { grid-column: 1 / 2; grid-row: 1; }
.scbpig-section-goals { grid-column: 2 / 3; grid-row: 1; }
.scbpig-section-refine { grid-column: 1 / 3; grid-row: 2; } /* Spans two columns */
.scbpig-generation-area { grid-column: 3 / 4; grid-row: 1 / 3; } /* Spans two rows */

/* --- Input Sections --- */
.scbpig-input-section {
    padding: 25px;
    background-color: var(--scbpig-grey-bg);
    border-radius: 8px;
    border: 1px solid var(--scbpig-grey-light);
    transition: all 0.3s ease-in-out; /* For potential JS interactions later */
    opacity: 0.5; /* Start sections slightly dimmed - JS will make active ones fully opaque */
}

.scbpig-input-section.active { /* JS will add this class */
    opacity: 1;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3); /* Purple glow for active section */
    border-color: var(--scbpig-purple-light);
}

.scbpig-section-title {
    font-family: var(--scbpig-font-heading);
    color: var(--scbpig-purple-dark);
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.4em;
    border-bottom: 2px solid var(--scbpig-purple-faint);
    padding-bottom: 8px;
}

/* --- Form Elements --- */
.scbpig-field-group {
    margin-bottom: 20px;
    position: relative; /* For absolute positioning error icons if needed */
}

.scbpig-label {
    font-family: var(--scbpig-font-heading);
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    color: var(--scbpig-grey-dark);
    font-size: 1em;
}

.scbpig-label.scbpig-required::after {
    content: " *";
    color: var(--scbpig-red-error);
    font-weight: normal;
}

.scbpig-instructions {
    font-size: 0.85em;
    color: var(--scbpig-grey-medium);
    margin-bottom: 10px;
}

.scbpig-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--scbpig-grey-light);
    border-radius: 6px;
    font-size: 1em;
    color: var(--scbpig-grey-dark);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.scbpig-input:focus {
    border-color: var(--scbpig-purple-medium);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2); /* Light purple glow */
    outline: none;
}

/* --- Option Buttons (Cloud/Tag Style) --- */
.scbpig-option-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.scbpig-option-btn {
    padding: 8px 16px;
    border: 2px solid var(--scbpig-purple-light);
    border-radius: 20px; /* Pill shape */
    cursor: pointer;
    background-color: var(--scbpig-white);
    color: var(--scbpig-purple-medium);
    transition: all 0.2s ease-out;
    font-family: var(--scbpig-font-body); /* Body font for options */
    font-size: 0.9em;
    font-weight: 500;
}

.scbpig-option-btn:hover {
    background-color: var(--scbpig-purple-faint);
    border-color: var(--scbpig-purple-medium);
    transform: translateY(-1px);
}

.scbpig-option-btn.selected { /* JS will add/remove this class */
    background: linear-gradient(135deg, var(--scbpig-purple-light), var(--scbpig-purple-medium));
    color: var(--scbpig-white);
    border-color: var(--scbpig-purple-medium);
    box-shadow: 0 2px 5px rgba(126, 34, 206, 0.2);
}

.scbpig-option-btn.selected:hover {
     background: linear-gradient(135deg, var(--scbpig-purple-medium), var(--scbpig-purple-dark));
}

/* --- Other Input Group --- */
.scbpig-other-input-group {
    display: none; /* Hidden by default - JS will show */
    margin-top: 10px;
    padding-left: 15px; /* Indent slightly */
    border-left: 3px solid var(--scbpig-purple-light);
}

.scbpig-other-input {
    width: calc(100% - 15px); /* Adjust width due to indent */
}

/* --- Error Styling --- */
.scbpig-error-message {
    color: var(--scbpig-red-error);
    font-size: 0.85em;
    margin-top: 5px;
    display: none; /* Hidden by default - JS will show */
}

.scbpig-field-group.error .scbpig-input,
.scbpig-field-group.error .scbpig-option-group { /* Add indicator to group border */
    border-color: var(--scbpig-red-error) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}
/* Ensure border is applied to the group div, not the buttons themselves for multi-select */
.scbpig-field-group.error .scbpig-option-group {
    border: 1px dashed var(--scbpig-red-error);
    padding: 5px; /* Add padding so border isn't tight */
    border-radius: 4px;
    margin-top: 5px;
}

/* --- Generation Area --- */
.scbpig-generation-area {
    padding: 25px;
    background-color: var(--scbpig-white); /* Maybe slightly different bg */
    border-radius: 8px;
    /* border: 1px dashed var(--scbpig-purple-light); Optional border */
    text-align: center;
    position: sticky; /* Make it stick within its grid area when scrolling */
    top: 20px;
}

/* --- Generate Button --- */
.scbpig-generate-btn {
    padding: 14px 30px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 600;
    transition: all 0.2s ease;
    font-family: var(--scbpig-font-heading);
    background-color: var(--scbpig-purple-medium);
    color: var(--scbpig-white);
    width: 100%;
    margin-bottom: 20px;
}

.scbpig-generate-btn:hover:not(:disabled) {
    background-color: var(--scbpig-purple-dark);
    box-shadow: 0 4px 15px rgba(126, 34, 206, 0.2);
    transform: translateY(-2px);
}

.scbpig-generate-btn:disabled {
    background-color: var(--scbpig-grey-light);
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- Loading Spinner --- */
.scbpig-loading {
    padding: 30px 0;
    display: none; /* Hidden initially */
}

.scbpig-spinner {
    border: 5px solid var(--scbpig-purple-faint);
    border-top: 5px solid var(--scbpig-purple-medium);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: scbpig-spin 1s linear infinite;
    margin: 0 auto 15px auto;
}

.scbpig-loading p {
    font-family: var(--scbpig-font-heading);
    color: var(--scbpig-purple-medium);
    font-weight: 500;
}

@keyframes scbpig-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Results Area --- */
.scbpig-results-area {
    margin-top: 30px;
    text-align: left; /* Align results text left */
    display: none; /* Hidden initially */
}

.scbpig-results-title {
    font-family: var(--scbpig-font-heading);
    color: var(--scbpig-purple-dark);
    margin-bottom: 15px;
    font-size: 1.3em;
}

.scbpig-results-list {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Removed max-height and overflow */
    padding-right: 10px; /* Optional scrollbar space if needed */
}

/* --- Enhanced Results Styling --- */

/* Individual Result Item */
.scbpig-result-item {
    background-color: var(--scbpig-grey-bg);
    padding: 15px 60px 15px 20px; /* Increased right padding for button */
    border-radius: 6px;
    margin-bottom: 12px;
    border-left: 4px solid var(--scbpig-purple-light);
    position: relative; /* For absolute positioning copy button */
    transition: background-color 0.2s ease, border-color 0.2s ease;
    word-wrap: break-word; /* Ensure long ideas wrap */
    /* Initial state for animation */
    opacity: 0;
    transform: translateY(15px) scale(0.98);
}

/* Animation definition */
@keyframes scbpig-revealItem {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Apply animation to items with the class */
.scbpig-reveal-item {
    animation-name: scbpig-revealItem;
    animation-duration: 0.4s; /* Adjust duration */
    animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth easing */
    animation-fill-mode: forwards; /* Stay visible */
    /* animation-delay is set dynamically via JS */
}


.scbpig-result-item:hover {
     background-color: var(--scbpig-purple-faint);
     border-left-color: var(--scbpig-purple-medium);
}

/* Idea Text Styling (if needed) */
.scbpig-idea-text {
    display: block; /* Take full width minus button space */
    font-size: 1.05em;
    color: var(--scbpig-purple-dark);
}

/* Copy Button Styling */
.scbpig-copy-btn {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background-color: var(--scbpig-purple-medium);
    color: var(--scbpig-white);
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0; /* Hidden initially */
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.scbpig-result-item:hover .scbpig-copy-btn {
    opacity: 1;
    transform: translateY(-50%) translateX(0); /* Slide in slightly on hover */
}
/* Keep button visible briefly after click if needed */
.scbpig-result-item .scbpig-copy-btn:focus,
.scbpig-result-item .scbpig-copy-btn.copied,
.scbpig-result-item .scbpig-copy-btn.copy-failed {
     opacity: 1;
}

.scbpig-copy-btn:hover {
    background-color: var(--scbpig-purple-dark);
}

.scbpig-copy-btn.copied {
    background-color: var(--scbpig-green-success); /* Green for success */
}
 .scbpig-copy-btn.copy-failed {
    background-color: var(--scbpig-red-error); /* Red for failure */
}


/* Load More Button Styling */
.scbpig-load-more-container {
    text-align: center;
    padding: 20px 0 10px 0; /* Add some spacing */
}

.scbpig-load-more-btn {
    padding: 10px 25px;
    border: 1px solid var(--scbpig-purple-light);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    transition: all 0.2s ease;
    font-family: var(--scbpig-font-heading);
    background-color: var(--scbpig-white);
    color: var(--scbpig-purple-medium);
}

.scbpig-load-more-btn:hover {
    background-color: var(--scbpig-purple-faint);
    border-color: var(--scbpig-purple-medium);
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(126, 34, 206, 0.1);
}

/* --- Main Error Display --- */
.scbpig-error-display {
    margin-top: 20px;
    font-weight: 500;
    text-align: center;
}


/* --- Responsive Adjustments --- */
@media only screen and (max-width: 960px) {
    .scbpig-matrix-container {
        grid-template-columns: repeat(2, 1fr); /* Switch to 2 columns */
        /* Adjust grid areas */
        .scbpig-section-core { grid-column: 1 / 2; grid-row: 1; }
        .scbpig-section-goals { grid-column: 2 / 3; grid-row: 1; }
        .scbpig-section-refine { grid-column: 1 / 3; grid-row: 2; } /* Still spans */
        .scbpig-generation-area { grid-column: 1 / 3; grid-row: 3; } /* Moves below, spans */
    }
    .scbpig-generation-area {
         position: static; /* Unstick on smaller screens */
         top: auto;
    }
}

@media only screen and (max-width: 600px) {
    .scbpig-generator-wrap {
        padding: 20px;
    }
    .scbpig-matrix-container {
        grid-template-columns: 1fr; /* Stack everything into 1 column */
        gap: 25px;
        /* Reset grid areas for single column flow */
        .scbpig-section-core { grid-column: 1; grid-row: 1; }
        .scbpig-section-goals { grid-column: 1; grid-row: 2; }
        .scbpig-section-refine { grid-column: 1; grid-row: 3; }
        .scbpig-generation-area { grid-column: 1; grid-row: 4; }
    }

     .scbpig-main-title { font-size: 1.8em; }
     .scbpig-subtitle { font-size: 1em; margin-bottom: 30px; }
     .scbpig-section-title { font-size: 1.2em; }

    .scbpig-option-btn {
        font-size: 0.85em;
        padding: 6px 12px;
    }
}

/* --- Accessibility --- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Ensure focus outline is visible when focused using keyboard */
*:focus-visible {
    outline: 2px solid var(--scbpig-purple-medium);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.3);
}
/* Reset default input focus if using focus-visible */
.scbpig-input:focus {
    outline: none; /* Rely on focus-visible */
}