/* ============================================================================
   SPIRIT COLLECTIVE - MY MEMBERSHIP PAGE STYLES
   Clean, simple membership features comparison with metrics & animations
   File: /wp-content/plugins/spirit-collective/pages/my-membership/my-membership.css
   ============================================================================ */

/* #region Status Messages */
/* ======================================== */

.sc-status-message {
    display: flex;
    align-items: flex-start;
    gap: var(--sc-space-15);
    padding: var(--sc-space-20) var(--sc-space-25);
    border-radius: var(--sc-radius-10);
    border-left: 4px solid;
}

.sc-status-icon {
    flex-shrink: 0;
    font-size: 24px;
    line-height: 1;
    margin-top: 2px;
}

.sc-status-content {
    flex: 1;
}

.sc-status-content strong {
    display: block;
    font-size: 16px;
    margin-bottom: 6px;
    font-family: var(--sc-font-heading);
}

.sc-status-content p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 12px 0;
}

.sc-status-content p:last-child {
    margin-bottom: 0;
}

.sc-status-content a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

.sc-status-content a:hover {
    opacity: 0.8;
}

/* "Manage Membership" link styling */
.sc-status-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: var(--sc-radius-full);
    transition: all 0.2s ease;
    margin-top: 8px;
}

.sc-status-link:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: translateX(2px);
    opacity: 1 !important;
}

.sc-status-link i {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.sc-status-link:hover i {
    transform: translateX(3px);
}

/* Success - Premium Member */
.sc-status-success {
    background-color: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.sc-status-success .sc-status-icon {
    color: #28a745;
}

/* Warning - Basic Member */
.sc-status-warning {
    background-color: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

.sc-status-warning .sc-status-icon {
    color: #ffc107;
}

/* Info - Not Logged In */
.sc-status-info {
    background-color: #d1ecf1;
    border-color: #17a2b8;
    color: #0c5460;
}

.sc-status-info .sc-status-icon {
    color: #17a2b8;
}

/* Dark mode adjustments */
[data-theme="dark"] .sc-status-success {
    background-color: #1e4620;
    border-color: #28a745;
    color: #b8e6bf;
}

[data-theme="dark"] .sc-status-warning {
    background-color: #4a3c1a;
    border-color: #ffc107;
    color: #ffe69c;
}

[data-theme="dark"] .sc-status-info {
    background-color: #1a3e47;
    border-color: #17a2b8;
    color: #bee5eb;
}

[data-theme="dark"] .sc-status-link {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .sc-status-link:hover {
    background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
    .sc-status-message {
        padding: var(--sc-space-15) var(--sc-space-20);
    }
    
    .sc-status-content strong {
        font-size: 15px;
    }
    
    .sc-status-content p {
        font-size: 13px;
    }
    
    .sc-status-link {
        font-size: 13px;
        padding: 6px 12px;
    }
}

/* #endregion */

/* #region Info Box (How to Get Premium) */
/* ======================================== */

.sc-membership-info-box {
    display: flex;
    align-items: flex-start;
    gap: var(--sc-space-15);
    padding: var(--sc-space-25) var(--sc-space-30);
    background: var(--sc-color-bg-accent);
    border: 1px solid var(--sc-color-border);
    border-radius: var(--sc-radius-10);
    border-left: 4px solid var(--sc-color-primary);
}

.sc-info-box-icon {
    flex-shrink: 0;
    font-size: 28px;
    color: var(--sc-color-primary);
    line-height: 1;
    margin-top: 2px;
}

.sc-info-box-content {
    flex: 1;
}

.sc-info-box-content h4 {
    color: var(--sc-color-text);
}

.sc-info-box-content p {
    color: var(--sc-color-text);
    line-height: 1.6;
}

.sc-info-box-content strong {
    color: var(--sc-color-primary);
}

/* Dark mode */
[data-theme="dark"] .sc-membership-info-box {
    background: var(--sc-color-bg-section-alt);
    border-color: var(--sc-color-border);
}

@media (max-width: 768px) {
    .sc-membership-info-box {
        padding: var(--sc-space-20) var(--sc-space-25);
    }
    
    .sc-info-box-icon {
        font-size: 24px;
    }
    
    .sc-info-box-content p {
        font-size: 14px;
    }
}

/* #endregion */

/* #region Membership Cards */
/* ======================================== */

.sc-membership-card {
    background: var(--sc-color-bg-card);
    border: 1px solid var(--sc-color-border);
    position: relative;
}

/* Premium card styling - cleaner approach */
.sc-membership-card-premium {
    border: 2px solid var(--sc-color-primary);
    box-shadow: 0 8px 30px rgba(213, 41, 117, 0.1);
}

/* Active state for current premium members */
.sc-membership-card-active {
    background: linear-gradient(135deg, 
        var(--sc-color-bg-card) 0%, 
        rgba(213, 41, 117, 0.03) 100%);
}

/* Premium Badge at top */
.sc-premium-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
    padding: 10px 12px 0px;
    border-radius: 0 0 25px 25px;
    font-size: 13px;
    font-weight: 600;
    font-family: "Big Bird";
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(213, 41, 117, 0.3);
}

.sc-premium-badge span {
    line-height: 1;
    text-wrap: nowrap;
}


.sc-premium-badge i {
    font-size: 14px;
}

/* Dark mode adjustments */
[data-theme="dark"] .sc-membership-card {
    background: var(--sc-color-bg-card);
    border-color: var(--sc-color-border);
}

[data-theme="dark"] .sc-membership-card-premium {
    border-color: var(--sc-color-primary);
    box-shadow: 0 8px 30px rgba(231, 58, 129, 0.15);
}

[data-theme="dark"] .sc-membership-card-active {
    background: linear-gradient(135deg,
        var(--sc-color-bg-card) 0%,
        rgba(231, 58, 129, 0.05) 100%);
}

/* #endregion */

/* #region Feature Lists with Icons */
/* ======================================== */

.sc-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sc-feature-item {
    display: flex;
    align-items: center;
    gap: var(--sc-space-12);
    padding-bottom: var(--sc-space-15);
    margin-bottom: var(--sc-space-15);
    border-bottom: 1px solid rgba(214, 217, 221, 0.3);
    transition: transform 0.2s ease;
}

.sc-feature-item:hover {
    transform: translateX(4px);
}

/* Remove border from last item */
.sc-feature-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.sc-feature-item .sc-feature-text {
    margin-bottom: 0;
}

/* Dark mode border */
[data-theme="dark"] .sc-feature-item {
    border-bottom-color: rgba(74, 69, 67, 0.3);
}

/* Feature Icon (left side) - LARGER */
.sc-feature-icon-left {
    font-size: 28px;
    color: var(--sc-color-text-light);
    min-width: 28px;
    width: 28px;
    flex-shrink: 0;
    transition: color 0.2s ease;
    line-height: 1;
}

.sc-feature-item:hover .sc-feature-icon-left {
    color: var(--sc-color-primary);
}

/* Feature Text - Normal capitalization */
.sc-feature-text {
    color: var(--sc-color-text);
    line-height: 1.5;
    flex: 1;
}

/* Feature Status Badge (right side - checkmark or X) */
.sc-feature-status {
    font-size: 15px;
    font-weight: bold;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: transform 0.2s ease;
}

.sc-feature-item:hover .sc-feature-status {
    transform: scale(1.1);
}

/* Green checkmark - included features */
.sc-feature-status-included {
    background-color: #5cb85c;
    color: #ffffff;
}

/* Red X - locked features */
.sc-feature-status-locked {
    background-color: #d9534f;
    color: #ffffff;
}

/* #endregion */

/* #region Platform Metrics Section */
/* ======================================== */

.sc-membership-metrics-section {
    border: 1px solid var(--sc-color-border);
    box-shadow: var(--sc-shadow);
    max-width: min(1400px, calc(100% - 2 * var(--sc-space-30)));
}

.sc-metrics-bar {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    box-shadow: var(--sc-shadow);
}

.sc-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sc-metric i {
    font-size: 32px;
    color: var(--sc-color-primary);
    margin-bottom: 8px;
    transition: transform 0.3s ease;
}

.sc-metric:hover i {
    transform: scale(1.1);
}

.sc-metric-number {
    font-family: var(--sc-font-heading);
    font-size: 36px;
    line-height: 1;
    color: var(--sc-color-text);
    font-weight: 400;
}

.sc-metric-label {
    font-family: var(--sc-font-body);
    font-size: 14px;
    color: var(--sc-color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .sc-metrics-bar {
        gap: 30px;
        padding: 30px 20px;
    }
    
    .sc-metric-number {
        font-size: 28px;
    }
}

/* Dark mode */
[data-theme="dark"] .sc-membership-metrics-section {
    border-color: var(--sc-color-border);
}

/* #endregion */

/* #region CTA Section (Logged Out) */
/* ======================================== */

.sc-membership-cta {
    border-top: 1px solid var(--sc-color-border);
}

.sc-membership-cta-buttons {
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .sc-membership-cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .sc-membership-cta-buttons .sc-btn {
        width: 100%;
    }
}

/* #endregion */

/* #region Buttons */
/* ======================================== */

.sc-membership-card .sc-btn-full {
    width: 100%;
    justify-content: center;
}

/* #endregion */

/* #region Responsive Design */
/* ======================================== */

@media (max-width: 768px) {
    .sc-membership-features.sc-grid-2 {
        grid-template-columns: 1fr;
        gap: var(--sc-space-40);
    }
    
    .sc-premium-badge {
        font-size: 12px;
    }
    
    .sc-membership-metrics-section {
        padding: var(--sc-space-40) var(--sc-space-20);
    }
    
    .sc-feature-icon-left {
        font-size: 24px;
        min-width: 24px;
        width: 24px;
    }
}

@media (max-width: 480px) {    
    .sc-feature-status {
        min-width: 24px;
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
    
    .sc-feature-icon-left {
        font-size: 22px;
        min-width: 22px;
        width: 22px;
    }
}

/* #endregion */

/* Breadcrumb constraint for my-membership page */
.page-id-24890 .custom-breadcrumbs {
    max-width: 1140px;
    margin-top: var(--sc-space-30);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--sc-space-30);
    padding-right: var(--sc-space-30);
}

/* Ensure breadcrumbs aren't affected by entry-content padding */
.page-id-24890 .entry-content {
    padding: 0;
}

/* Main wrapper no longer needs container class styling */
.page-id-24890 .sc-my-membership-wrapper {
    width: 100%;
}

/* Page content width adjustments */
@media screen and (min-width: 1051px) {
    #content.expanded-subnav, #page #content.expanded-subnav {
        padding-left: var(--subnav-width) !important;
        padding-right: 0 !important;
    }
    #content, #page #content {
        padding-left: var(--subnav-collapsed-width) !important;
        padding-right: 0 !important;
    }
}
@media screen and (max-width: 1050px) {
    #content.expanded-subnav, #page #content.expanded-subnav {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #content, #page #content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

#sc-faq-info {
    width: 100%;
}