/**
 * Spirit Collective Roadmap Styles
 * 
 * Responsive styles for the roadmap feature voting system
 * File location: /wp-content/plugins/spirit-collective/assets/css/roadmap.css
 */

/* Container and Layout */
.sc-roadmap-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

#content > .container {
    max-width: 1500px;
}

@media screen and (max-width: 1050px) {
    .sc-roadmap-container {
        padding: 0;
    }
        #content > .container {
        padding:0;
    }
}
@media screen and (max-width: 799px) {
    .sc-roadmap-container {
        padding: 0;
    }

    #primary {
        padding: 0;
    }
}

/* Admin Bar */
.sc-roadmap-admin-bar {
    background: var(--sc-color-bg-section);
    border: 2px dashed var(--sc-color-primary);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sc-roadmap-admin-bar .bb-button {
    background: var(--sc-color-primary);
    color: var(--sc-color-bg-card);
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.sc-roadmap-admin-bar .bb-button:hover {
    background: var(--sc-color-text);
}

.sc-roadmap-admin-bar .admin-notice {
    color: var(--sc-color-primary);
    font-style: italic;
    font-size: 14px;
}

/* Header Section */
.sc-roadmap-header {
    text-align: center;
    margin-bottom: 40px;
}

.sc-roadmap-header h1 {
    font-size: 36px;
    margin-bottom: 15px;
}

.roadmap-description {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.roadmap-description a {
    color: var(--sc-color-primary);
    text-decoration: none;
    font-weight: 600;
}

.roadmap-description a:hover {
    text-decoration: underline;
}

.premium-notice {
    display: inline-block;
    background: var(--sc-color-bg-section);
    color: var(--sc-color-primary);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    margin-left: 10px;
}

/* Voting Guide */
.voting-guide {
    background: var(--sc-color-bg-section-alt);
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid var(--sc-color-border);
}

.voting-guide h3 {
    font-size: 18px;
    margin-bottom: 15px;
}

.voting-options {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
}

.vote-option {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vote-option i {
    border-radius: 4px;
    padding: 0;
    width: 32px;
    height: 32px;
    color: #8a8782;
    font-size: 22px;
}

.vote-option i::before {
    background: white;
    border-radius: 6.5px;
    line-height: 22px;
    height: 21px;
    width: 21px;
}

.vote-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 30px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
}

.vote-icon.basic {
    background: #fbfeff;
    color: #252423;
}

.vote-icon.premium {
    background: var(--sc-color-primary);
    color: var(--sc-color-bg-card);
}

.vote-icon.neutral {
    background: var(--sc-color-border);
}

.vote-label {
    font-size: 14px;
}

/* Status Sections */
.sc-roadmap-section {
    margin-bottom: 50px;
}

.section-header {
    padding: 15px 20px;
    margin-bottom: 25px;
    background: var(--sc-color-bg-section-alt);
}

.section-header h2 {
    font-size: 24px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.section-header .feature-count {
    font-size: 18px;
    opacity: 0.7;
    font-weight: normal;
}

.section-description {
    opacity: 0.8;
    font-size: 14px;
    margin: 0;
    text-align: center;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
}

.no-features {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    background: var(--sc-color-bg-section-alt);
    border-radius: 8px;
    opacity: 0.7;
}

/* Feature Cards */
.feature-card {
    background: var(--sc-color-bg-section-alt-2);
    border: 1px solid var(--sc-color-border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.feature-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Admin Controls on Cards */
.feature-admin-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 10;
}

.feature-admin-controls button {
    background: var(--sc-color-bg-section-alt)b6;
    border: unset;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.feature-admin-controls button:hover, .feature-admin-controls button:focus {
    background: var(--sc-color-bg-section-alt)b6;
    border-color: unset;
    outline: none;
    box-shadow: none;
}

.feature-admin-controls button i {
    font-size: 24px;
    color: #a66b5b;
    font-weight: 400;
}

.feature-admin-controls i {
    font-size: 24px;
}

.feature-admin-controls button:hover i {
    font-size: 24px;
    color: var(--sc-color-primary);
    font-weight: 600;
}

.admin-only-indicator,
.voting-disabled-indicator {
    background: var(--sc-color-text);
    color: var(--sc-color-bg-card);
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.admin-only-indicator {
    background: #c08081;
}

.voting-disabled-indicator {
    background: var(--sc-color-warning);
}

/* Feature Image */
.feature-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--sc-color-bg-section-alt-2);
}

.feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Feature Content */
.feature-content {
    padding: 20px;
}

.feature-main {
    display: flex;
    gap: 20px;
}

/* Voting Column */
.voting-column {
    flex-shrink: 0;
    max-width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.voting-column.no-vote .vote-display {
    text-align: center;
}

.vote-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.vote-btn {
    background: transparent;
    border: unset;
    border-radius: 4px;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #8a8782;
    font-size: 22px;
}

.vote-btn:not(.active) i::before {
    background: white;
    border-radius: 6.5px;
    line-height: 22px;
    height: 21px;
    width: 21px;
}

.vote-btn:hover:not(.active) {
    background: unset;
    border-color: unset;
    color: var(--sc-color-primary);
}

.vote-btn.active {
    background: unset;
    color: var(--sc-color-primary);
    border-color: unset;
    font-weight: 600;
}

.vote-btn.active:focus {
    color: var(--sc-color-primary);
}

.vote-btn:focus {
    background: unset;
    color: var(--sc-color-text);
    border-color: unset;
    box-shadow: none;
    outline: none;
}

.vote-btn.upvote-strong,
.vote-btn.downvote-strong {
    position: relative;
}

.vote-count {
    font-size: 20px;
    font-weight: bold;
    padding: 8px 0;
}

.vote-count.positive {
    color: #87a96b;
}

.vote-count.negative {
    color: #c08081;
}

.vote-count.final {
    font-size: 24px;
}

.votes-label {
    font-size: 12px;
    opacity: 0.7;
}

.vote-preview i {
    font-size: 22px;
    font-weight: 500;
}

.vote-preview i, .vote-icon {
    margin-right: 15px;
}

.vote-preview.neutral {
    width: 35px;
}

.login-prompt {
    margin-top: 10px;
    font-size: 12px;
}

.login-prompt a {
    color: var(--sc-color-primary);
    text-decoration: none;
}

/* Content Column */
.content-column {
    flex: 1;
}

.feature-title {
    font-size: 20px;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.feature-description {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
    opacity: 0.9;
}

/* Progress Bar Updates */
.progress-bar {
    background: var(--sc-color-border);
    border-radius: 10px;
    height: 20px;
    position: relative;
    margin: 15px 0;
    overflow: hidden;
}

.progress-fill {
    background: linear-gradient(90deg, #87a96b, #8b9dc3);
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
}

/* Feature Meta */
.feature-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--sc-color-border);
}

.status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    color: var(--sc-color-bg-card);
    font-size: 12px;
    font-weight: 600;
}

.voter-count {
    font-size: 12px;
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Alpine.js Cloak */
[x-cloak] { 
    display: none !important; 
}

/* Vote Feedback Messages */
.vote-feedback {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
}

.vote-feedback .success-msg {
    color: #87a96b;
    font-weight: 600;
}

.vote-feedback .error-msg {
    color: #c08081;
    font-weight: 600;
}

/* Disabled state for buttons during processing */
.vote-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.vote-btn:disabled i {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { opacity: 0.3; }
    50% { opacity: 0.6; }
    100% { opacity: 0.3; }
}

/* Smooth transitions for vote count changes */
.vote-count {
    transition: color 0.2s ease, transform 0.2s ease;
}

.vote-count.updating {
    transform: scale(1.1);
}

/* Read More Button */
#content .read-more-btn {
    display: inline-block;
    margin-left: 10px;
    color: #A66B5B;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    padding: 0;
    transition: color 0.2s ease;
    background: none;
}

#content .read-more-btn:hover, #content .read-more-btn:focus {
    color: var(--sc-color-primary);
    outline: none;
    box-shadow: none;
}

/* Voting Locked State */
.voting-locked {
    text-align: center;
    padding: 10px 0;
}

.voting-locked i {
    font-size: 24px;
    color: var(--sc-color-warning);
    display: block;
    margin-bottom: 5px;
}

/* Modal Styles */
.sc-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}

.sc-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

.sc-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--sc-color-bg-section-alt);
    border-radius: 8px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* Modal Close Button - More Explicit Styles */
.sc-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    background: var(--sc-color-bg-card);
    border: 2px solid var(--sc-color-border);
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    text-align: center;
    transition: all 0.2s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: normal;
    box-sizing: border-box;
}

.sc-modal-close i {
    width: 19px;
}

.sc-modal-close:hover {
    background: var(--sc-color-primary);
    color: var(--sc-color-bg-card);
    border-color: var(--sc-color-primary);
    transform: rotate(90deg);
}

.sc-modal-body {
    padding: 0;
    max-height: 90vh;
    overflow-y: auto;
}

/* Modal Content Styling */
.modal-feature-content {
    padding: 30px;
}

.modal-feature-image {
    margin: -30px -30px 30px -30px;
    max-height: 300px;
    overflow: hidden;
}

.modal-feature-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Modal Main Layout with Left Voting */
.modal-feature-main {
    display: flex;
    gap: 30px;
}

.modal-voting-column {
    flex-shrink: 0;
    width: 50px;
    padding-top: 10px;
}

.modal-voting-column .vote-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    position: sticky;
    top: 10px;
}

.modal-content-column {
    flex: 1;
}

.modal-feature-title {
    font-size: 28px;
    margin: 0 0 20px 0;
}

.modal-feature-meta-1 {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.modal-feature-meta-2 {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--sc-color-border);
}

.modal-feature-meta-2 .status-badge {
    padding: 6px 16px;
    border-radius: 20px;
    color: var(--sc-color-bg-card);
    font-size: 14px;
    font-weight: 600;
}

.modal-progress-bar {
    flex: 1;
    background: var(--sc-color-border);
    border-radius: 10px;
    height: 24px;
    position: relative;
    overflow: hidden;
}

.modal-progress-bar .progress-fill {
    background: linear-gradient(90deg, #87a96b, #8b9dc3);
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease;
}

.modal-progress-bar .progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 600;
}

.modal-feature-description {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.modal-feature-description p {
    margin-bottom: 15px;
}

.modal-feature-description ul,
.modal-feature-description ol {
    margin-left: 20px;
    margin-bottom: 15px;
}

/* Removed the old modal-voting-section styles since voting is now in left column */

.modal-login-prompt {
    text-align: center;
    padding: 20px;
    background: var(--sc-color-bg-section-alt);
    border-radius: 8px;
    margin-top: 20px;
}

.modal-login-prompt a {
    color: var(--sc-color-primary);
    font-weight: 600;
    text-decoration: none;
}

.modal-login-prompt a:hover {
    text-decoration: underline;
}

/* Modal Loading State */
.modal-loading {
    text-align: center;
    padding: 60px 20px;
}

.modal-loading .spinner {
    margin: 0 auto 20px;
}

.modal-loading p {
    font-size: 16px;
}

/* Alpine Transitions */
.transition {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* Loading Indicator */
#sc-roadmap-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 9999;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--sc-color-bg-section-alt-2);
    border-top-color: var(--sc-color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .voting-options {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .sc-roadmap-header h1 {
        font-size: 28px;
    }
    
    .feature-main {
        flex-direction: row;
    }
    
    .voting-column {
        width: 50px;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .vote-controls {
        flex-direction: column;
        gap: 2px;
    }
    
    /* Modal responsive */
    .modal-feature-main {
        flex-direction: row;
    }
    
    .modal-voting-column {
        width: 50px;
    }
    
    .sc-modal-content {
        width: 95%;
        max-width: 100%;
    }
}

/* Integration with BuddyPanel */
@media (min-width: 1051px) {
    body.buddypanel-open .sc-roadmap-container {
        margin-left: 20px;
    }
    
    body:not(.buddypanel-open) .sc-roadmap-container {
        margin-left: 10px;
    }
}

/* Dark mode support (if implemented) */
@media (prefers-color-scheme: dark) {
    /* Add dark mode styles here if needed */
}

#post-30790 .entry-header {
    display: none;
}

/* Sub-tasks Section in Modal */
.modal-subtasks-section {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--sc-color-border);
}

.modal-subtasks-section h3 {
    font-size: 20px;
    margin-bottom: 20px;
}

.subtasks-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.subtask-item {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: var(--sc-color-bg-section);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.subtask-status-indicator {
    width: 4px;
    border-radius: 2px;
    flex-shrink: 0;
}

.subtask-content {
    flex: 1;
}

.subtask-title {
    font-size: 16px;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.subtask-status-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--sc-color-border);
}

.admin-only-label {
    font-size: 11px;
    color: var(--sc-color-warning);
    font-style: italic;
    font-weight: normal;
}

.subtask-description {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    opacity: 0.9;
}

/* Feature Request Section */
.sc-feature-request-section {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 2px solid var(--sc-color-border);
}

.request-accordion {
    background: var(--sc-color-bg-section-alt);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-header {
    width: 100%;
    padding: 20px 25px;
    background: transparent !important;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.accordion-header:hover {
    background: rgba(213, 41, 117, 0.05) !important;
    color: var(--sc-color-text);
}

.accordion-header:active, .accordion-header:focus {
    background: inherit !important;
    color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
}


.accordion-title {
    font-size: 18px;
    font-weight: 600;
    text-align: left;
}

.accordion-icon {
    font-size: 20px;
    color: var(--sc-color-primary);
    transition: transform 0.3s ease;
}

.accordion-icon.rotated {
    transform: rotate(180deg);
}

.accordion-content {
    padding: 0 25px 25px;
}

.request-intro {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
    padding: 15px;
    background: var(--sc-color-bg-section-alt);
    border-radius: 6px;
}

/* Form Styles */
#feature-request-form {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.form-group .required {
    color: #c08081;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--sc-color-border);
    border-radius: 4px;
    font-size: 15px;
    background: var(--sc-color-bg-section-alt);
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--sc-color-primary);
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
}

.submit-btn {
    background: var(--sc-color-primary);
    color: var(--sc-color-bg-card);
    border: none;
    padding: 12px 30px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover:not(:disabled) {
    background: var(--sc-color-text);
}

.submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.requests-remaining {
    font-size: 14px;
}

.form-message {
    margin-top: 15px;
    padding: 12px 15px;
    border-radius: 4px;
    font-size: 15px;
}

.success-message {
    background: #87a96b;
    color: var(--sc-color-bg-card);
}

.error-message {
    background: #c08081;
    color: var(--sc-color-bg-card);
}

/* Login Prompt */
.login-prompt-section {
    text-align: center;
    padding: 30px;
    background: var(--sc-color-bg-section-alt);
    border-radius: 6px;
}

.login-prompt-section p {
    font-size: 16px;
    margin-bottom: 20px;
}

.login-btn {
    display: inline-block;
    background: var(--sc-color-primary);
    color: var(--sc-color-bg-card);
    padding: 12px 30px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}

.login-btn:hover {
    background: var(--sc-color-text);
    color: var(--sc-color-bg-card);
}

.time-estimate,
.date-started {
    font-size: 12px;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 4px;
}

.modal-feature-meta-2 .time-estimate,
.modal-feature-meta-2 .date-started {
    font-size: 14px;
}

/* Ensure proper spacing between meta items */
.feature-meta,
.modal-feature-meta-1,
.modal-feature-meta-2 {
    flex-wrap: wrap;
    gap: 12px;
}

.date-completed,
.pinned-badge {
    font-size: 12px;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pinned-badge {
    color: var(--sc-color-primary);
    font-weight: 600;
    opacity: 1;
}

.modal-feature-meta .date-completed,
.modal-feature-meta .pinned-badge {
    font-size: 14px;
}