/**
 * AI Credits Frontend Styles
 * Theme: ELEK (https://elek.com)
 *
 * @package AI_Credits
 * @since 1.0.0
 */

/* Import ELEK fonts */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&display=swap');

/* ==========================================================================
   CSS Variables - ELEK Theme
   ========================================================================== */

:root {
    /* ELEK Brand Colors */
    --ai-credits-primary: #d2962f;
    --ai-credits-primary-dark: #BE6D29;
    --ai-credits-secondary: #666666;
    --ai-credits-success: #00a32a;
    --ai-credits-warning: #dba617;
    --ai-credits-danger: #d63638;
    --ai-credits-info: #0073aa;

    /* Backgrounds */
    --ai-credits-light: #f8f9fb;
    --ai-credits-dark: #333333;
    --ai-credits-border: #ebebeb;
    --ai-credits-input-bg: #fafafa;

    /* ELEK Styling */
    --ai-credits-radius: 5px;
    --ai-credits-radius-lg: 12px;
    --ai-credits-shadow: 0 6px 16px 0 rgb(100 120 126 / 30%);
    --ai-credits-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --ai-credits-shadow-hover: 0 12px 24px 0 rgb(100 120 126 / 35%);
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

.ai-credits-dashboard,
.ai-credits-buy,
.ai-credits-usage,
.ai-credits-settings {
    font-family: "Work Sans", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ai-credits-dark);
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 20px;
    box-sizing: border-box;
}

/* Auth container stays narrower for better UX */
.ai-credits-auth-container {
    font-family: "Work Sans", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ai-credits-dark);
    max-width: 500px;
    margin: 40px auto;
    padding: 0;
    box-sizing: border-box;
}

.ai-credits-buy *,
.ai-credits-buy *::before,
.ai-credits-buy *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   Buttons - ELEK Style
   ========================================================================== */

.ai-credits-btn {
    display: inline-block;
    padding: 12px 24px;
    font-family: "Work Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--ai-credits-radius);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.ai-credits-btn:hover {
    text-decoration: none;
}

.ai-credits-btn-primary {
    background: var(--ai-credits-primary);
    color: #fff !important;
}

.ai-credits-btn-primary:hover {
    background: var(--ai-credits-primary-dark);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(210, 150, 47, 0.4);
}

.ai-credits-btn-secondary {
    background: #fff;
    color: var(--ai-credits-dark) !important;
    border: 1px solid var(--ai-credits-border);
}

.ai-credits-btn-secondary:hover {
    background: var(--ai-credits-light);
    color: var(--ai-credits-primary) !important;
    border-color: var(--ai-credits-primary);
}

.ai-credits-btn-danger {
    background: var(--ai-credits-danger);
    color: #fff !important;
}

.ai-credits-btn-danger:hover {
    background: #b32d2e;
    color: #fff !important;
}

.ai-credits-btn-full {
    display: block;
    width: 100%;
}

.ai-credits-btn-small {
    padding: 8px 16px;
    font-size: 13px;
}

.ai-credits-btn .ai-credits-btn-loading {
    display: none;
}

.ai-credits-btn.loading .ai-credits-btn-text {
    display: none;
}

.ai-credits-btn.loading .ai-credits-btn-loading {
    display: inline;
}

.ai-credits-btn:disabled,
.ai-credits-btn.loading {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.ai-credits-form {
    max-width: 400px;
}

.ai-credits-modal .ai-credits-form {
    max-width: none;
}

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

.ai-credits-form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}

.ai-credits-form-group label .required {
    color: var(--ai-credits-danger);
}

.ai-credits-form-group input,
.ai-credits-form-group select,
.ai-credits-form-group textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid var(--ai-credits-border);
    border-radius: var(--ai-credits-radius);
    background: var(--ai-credits-input-bg);
    transition: all 0.2s ease;
}

.ai-credits-form-group input:focus,
.ai-credits-form-group select:focus,
.ai-credits-form-group textarea:focus {
    outline: none;
    border-color: var(--ai-credits-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(210, 150, 47, 0.15);
}

.ai-credits-form-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--ai-credits-secondary);
}

.ai-credits-form-message {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: var(--ai-credits-radius);
    display: none;
}

.ai-credits-form-message.error {
    display: block;
    background: #fef1f1;
    color: var(--ai-credits-danger);
    border: 1px solid var(--ai-credits-danger);
}

.ai-credits-form-message.success {
    display: block;
    background: #f0f6f0;
    color: var(--ai-credits-success);
    border: 1px solid var(--ai-credits-success);
}

.ai-credits-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--ai-credits-border);
}

.ai-credits-form-row:last-child {
    border-bottom: none;
}

.ai-credits-form-row label {
    font-weight: 500;
    color: var(--ai-credits-secondary);
}

.ai-credits-form-value {
    font-weight: 400;
}

.ai-credits-form-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

/* ==========================================================================
   Auth Container (Login/Register)
   ========================================================================== */

.ai-credits-auth-container {
    max-width: 450px;
    margin: 40px auto;
    background: #fff;
    border-radius: var(--ai-credits-radius-lg);
    box-shadow: var(--ai-credits-shadow);
    overflow: hidden;
}

.ai-credits-auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--ai-credits-border);
}

.ai-credits-auth-tab {
    flex: 1;
    padding: 15px 20px;
    font-size: 14px;
    font-weight: 500;
    background: var(--ai-credits-light);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-credits-auth-tab.active {
    background: #fff;
    color: var(--ai-credits-primary);
    border-bottom: 2px solid var(--ai-credits-primary);
}

.ai-credits-auth-panel {
    display: none;
    padding: 30px;
}

.ai-credits-auth-panel.active {
    display: block;
}

.ai-credits-auth-panel .ai-credits-form {
    max-width: none;
}

.ai-credits-form-footer {
    margin-top: 20px;
    font-size: 12px;
    color: var(--ai-credits-secondary);
    text-align: center;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.ai-credits-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.ai-credits-card {
    background: #fff;
    border: none;
    border-radius: var(--ai-credits-radius-lg);
    padding: 24px;
    box-shadow: var(--ai-credits-shadow);
    transition: all 0.3s ease;
}

.ai-credits-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ai-credits-shadow-hover);
}

.ai-credits-card-primary {
    background: linear-gradient(135deg, var(--ai-credits-primary) 0%, var(--ai-credits-primary-dark) 100%);
    color: #fff;
}

.ai-credits-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.ai-credits-card-icon {
    font-size: 20px;
    opacity: 0.8;
}

.ai-credits-card-title {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    opacity: 0.9;
}

.ai-credits-card-value {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
}

.ai-credits-card-subtitle {
    font-size: 12px;
    margin-top: 6px;
    opacity: 0.8;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.ai-credits-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.ai-credits-table th,
.ai-credits-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--ai-credits-border);
}

.ai-credits-table th {
    font-weight: 500;
    color: var(--ai-credits-secondary);
    background: var(--ai-credits-light);
}

.ai-credits-table-striped tbody tr:nth-child(even) {
    background: var(--ai-credits-light);
}

.ai-credits-table tbody tr:hover {
    background: #f0f6fc;
}

.ai-credits-positive {
    color: var(--ai-credits-success);
    font-weight: 500;
}

.ai-credits-negative {
    color: var(--ai-credits-danger);
    font-weight: 500;
}

/* ==========================================================================
   Badges & Status
   ========================================================================== */

.ai-credits-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: 3px;
    background: var(--ai-credits-light);
    color: var(--ai-credits-secondary);
}

.ai-credits-badge-deduction {
    background: #fef1f1;
    color: var(--ai-credits-danger);
}

.ai-credits-badge-subscription,
.ai-credits-badge-subscription_renewal {
    background: #e6f4ea;
    color: var(--ai-credits-success);
}

.ai-credits-badge-topup,
.ai-credits-badge-purchase {
    background: #e8f0fe;
    color: var(--ai-credits-info);
}

.ai-credits-badge-admin_adjustment {
    background: #fef7e0;
    color: var(--ai-credits-warning);
}

/* Plan badges */
.ai-credits-badge-individual_monthly,
.ai-credits-badge-individual_annual {
    background: #e8f0fe;
    color: #1a73e8;
}

.ai-credits-badge-team_monthly,
.ai-credits-badge-team_annual {
    background: #fef3e0;
    color: #d2962f;
}

.ai-credits-badge-free {
    background: var(--ai-credits-light);
    color: var(--ai-credits-secondary);
}

/* Legacy plan badge - distinct styling */
.ai-credits-badge-legacy {
    background: linear-gradient(135deg, #f5f0e6 0%, #e8e0d0 100%);
    color: #8b7355;
    border: 1px dashed #c4b49a;
}

.ai-credits-legacy-indicator {
    margin-left: 4px;
    font-size: 10px;
    color: #c4a35a;
}

.ai-credits-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ai-credits-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.ai-credits-status-active {
    color: var(--ai-credits-success);
}

.ai-credits-status-cancelled,
.ai-credits-status-suspended {
    color: var(--ai-credits-danger);
}

.ai-credits-status-pending {
    color: var(--ai-credits-warning);
}

/* ==========================================================================
   Sections
   ========================================================================== */

.ai-credits-section {
    margin-bottom: 50px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.ai-credits-section-header {
    margin-bottom: 30px;
}

.ai-credits-section-header h2 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 600;
    color: var(--ai-credits-dark);
}

.ai-credits-section-desc {
    margin: 0;
    font-size: 15px;
    color: var(--ai-credits-secondary);
}

.ai-credits-link {
    color: var(--ai-credits-primary);
    text-decoration: none;
    font-weight: 500;
}

.ai-credits-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Billing Toggle - Monthly/Annual Switch
   ========================================================================== */

.ai-credits-billing-toggle-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.ai-credits-billing-toggle {
    display: inline-flex;
    background: var(--ai-credits-light, #f5f5f5);
    border-radius: 50px;
    padding: 4px;
    gap: 4px;
}

.ai-credits-billing-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 50px;
    background: transparent;
    color: var(--ai-credits-text-muted, #666);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.ai-credits-billing-option:hover {
    color: var(--ai-credits-text, #333);
}

.ai-credits-billing-option.active {
    background: var(--ai-credits-primary, #0066cc);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
}

.ai-credits-billing-option.active:hover {
    color: #fff;
}

.ai-credits-billing-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--ai-credits-success, #28a745);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-credits-billing-option.active .ai-credits-billing-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Responsive billing toggle */
@media (max-width: 480px) {
    .ai-credits-billing-option {
        padding: 10px 16px;
        font-size: 13px;
    }

    .ai-credits-billing-badge {
        font-size: 10px;
        padding: 2px 6px;
    }
}

/* ==========================================================================
   Pricing Plans - ELEK Grid System
   ========================================================================== */

.ai-credits-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 auto;
    padding: 0;
    max-width: 1200px;
    justify-content: center;
}

@media (max-width: 992px) {
    .ai-credits-plans {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ai-credits-plans {
        grid-template-columns: 1fr;
    }
}

.ai-credits-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ai-credits-border);
    border-radius: var(--ai-credits-radius-lg);
    padding: 32px 24px;
    text-align: left;
    box-shadow: var(--ai-credits-shadow-sm);
    transition: all 0.3s ease;
    overflow: hidden;
}

.ai-credits-plan:hover {
    border-color: var(--ai-credits-primary);
    box-shadow: var(--ai-credits-shadow);
    transform: translateY(-4px);
}

.ai-credits-plan-popular {
    border-color: var(--ai-credits-primary);
    border-width: 2px;
    box-shadow: var(--ai-credits-shadow);
}

.ai-credits-plan-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--ai-credits-primary);
    color: #fff;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    border-radius: var(--ai-credits-radius-lg) var(--ai-credits-radius-lg) 0 0;
}

.ai-credits-plan-header {
    margin-bottom: 20px;
    min-height: 60px;
    padding-top: 36px;
}

.ai-credits-plan-name {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--ai-credits-dark);
}

.ai-credits-plan-description {
    font-size: 14px;
    color: var(--ai-credits-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Spacer for consistent vertical alignment */
.ai-credits-plan-spacer {
    flex-grow: 1;
    min-height: 20px;
}

.ai-credits-plan-price {
    margin-bottom: 16px;
    line-height: 1;
}

.ai-credits-plan-currency {
    font-size: 24px;
    font-weight: 600;
    vertical-align: top;
    position: relative;
    top: 8px;
}

.ai-credits-plan-currency-code {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ai-credits-secondary);
    vertical-align: baseline;
    margin-left: 4px;
}

.ai-credits-plan-amount {
    font-size: 56px;
    font-weight: 700;
    color: var(--ai-credits-dark);
}

.ai-credits-plan-period,
.ai-credits-plan-period-once {
    display: inline;
    font-size: 14px;
    color: var(--ai-credits-secondary);
    vertical-align: baseline;
}

.ai-credits-plan-credits {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ai-credits-border);
}

.ai-credits-plan-credits-value {
    display: block;
    font-size: 28px;
    font-weight: 600;
    color: var(--ai-credits-primary);
}

.ai-credits-plan-credits-label {
    font-size: 14px;
    color: var(--ai-credits-secondary);
}

.ai-credits-plan-estimate {
    font-size: 13px;
    color: var(--ai-credits-secondary);
    margin: 0;
    padding-top: 0;
}

.ai-credits-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    text-align: left;
    flex-grow: 1;
}

.ai-credits-plan-features li {
    padding: 10px 0;
    padding-left: 28px;
    position: relative;
    font-size: 14px;
    color: var(--ai-credits-dark);
    border-bottom: 1px solid var(--ai-credits-border);
}

.ai-credits-plan-features li:last-child {
    border-bottom: none;
}

.ai-credits-plan-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--ai-credits-success);
    font-weight: bold;
    font-size: 14px;
}

/* Plan button - ensure it stays at bottom and centered */
.ai-credits-plan .ai-credits-btn {
    margin-top: auto;
    width: 100%;
    max-width: 100%;
}

/* ==========================================================================
   5-Card Pricing Layout (3 Subscriptions + 2 Top-ups)
   ========================================================================== */

/* Top row: 3 subscription cards */
.ai-credits-plans-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 auto;
    padding: 0;
    max-width: 1100px;
}

@media (max-width: 900px) {
    .ai-credits-plans-3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ai-credits-plans-3col {
        grid-template-columns: 1fr;
    }
}

/* Section divider between subscriptions and top-ups */
.ai-credits-section-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 48px auto 32px;
    max-width: 1100px;
    gap: 16px;
}

.ai-credits-section-divider::before,
.ai-credits-section-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--ai-credits-border);
}

.ai-credits-section-divider span {
    font-size: 16px;
    font-weight: 600;
    color: var(--ai-credits-secondary);
    white-space: nowrap;
}

/* Bottom row: 2 top-up cards */
.ai-credits-plans-topup-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 0 auto;
    padding: 0;
    max-width: 760px;
}

@media (max-width: 600px) {
    .ai-credits-plans-topup-row {
        grid-template-columns: 1fr;
    }
}

/* Free Plan Card - White background to match other cards */
.ai-credits-plan-free {
    background: #fff;
    border-color: var(--ai-credits-border);
}

.ai-credits-plan-deactivated {
    opacity: 0.7;
    position: relative;
}

.ai-credits-plan-deactivated::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    border-radius: var(--ai-credits-radius-lg);
}

.ai-credits-plan-deactivated .ai-credits-plan-price,
.ai-credits-plan-deactivated .ai-credits-plan-credits-value {
    color: var(--ai-credits-secondary);
}

/* Subscription Plan Cards */
.ai-credits-plan-subscription {
    min-height: 480px;
}

/* Free Plan Card min-height to match subscriptions */
.ai-credits-plan-free {
    min-height: 480px;
}

/* Plan Pricing Container (for toggle switching) */
.ai-credits-plan-pricing {
    transition: opacity 0.2s ease;
}

/* Disabled Button State */
.ai-credits-btn-disabled,
.ai-credits-btn:disabled {
    background: var(--ai-credits-border) !important;
    color: var(--ai-credits-secondary) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.ai-credits-btn-disabled:hover,
.ai-credits-btn:disabled:hover {
    background: var(--ai-credits-border) !important;
    color: var(--ai-credits-secondary) !important;
}

/* Top-up Card Styling */
.ai-credits-plan-topup-card {
    background: #fff;
    border-style: dashed;
}

/* Plan details list */
.ai-credits-plan-details {
    list-style: none;
    padding: 0;
    margin: 16px 0;
    font-size: 14px;
    color: var(--ai-credits-secondary);
}

.ai-credits-plan-details li {
    padding: 6px 0 6px 24px;
    position: relative;
}

.ai-credits-plan-details li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--ai-credits-success, #4caf50);
    font-weight: 600;
}

/* Disclaimer at bottom */
.ai-credits-disclaimer {
    max-width: 700px;
    margin: 40px auto 0;
    text-align: center;
}

.ai-credits-disclaimer p {
    margin: 0;
    font-size: 13px;
    color: var(--ai-credits-secondary);
    line-height: 1.5;
}

/* Small features list for top-up */
.ai-credits-plan-features-small {
    margin-bottom: 16px;
}

.ai-credits-plan-features-small li {
    padding: 6px 0 6px 24px;
    font-size: 13px;
}

/* Monthly/Annual buttons visibility */
.ai-credits-btn-monthly,
.ai-credits-btn-annual {
    transition: opacity 0.2s ease;
}

/* ==========================================================================
   Pricing Hero
   ========================================================================== */

.ai-credits-pricing-hero {
    text-align: center;
    margin-bottom: 50px;
    padding: 40px 20px;
}

.ai-credits-pricing-title {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--ai-credits-dark);
}

.ai-credits-pricing-subtitle {
    font-size: 18px;
    color: var(--ai-credits-secondary);
    margin: 0 auto;
    max-width: 600px;
}

.ai-credits-integration-notice {
    max-width: 800px;
    margin: 0 auto 40px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f8f9fb 0%, #f0f4f8 100%);
    border-left: 4px solid var(--ai-credits-primary);
    border-radius: var(--ai-credits-radius);
    text-align: center;
}

.ai-credits-integration-notice p {
    margin: 0;
    font-size: 14px;
    color: var(--ai-credits-secondary);
    line-height: 1.6;
}

/* ==========================================================================
   Features Section
   ========================================================================== */

.ai-credits-features {
    margin: 50px auto;
    padding: 40px;
    background: var(--ai-credits-light);
    border-radius: var(--ai-credits-radius-lg);
    max-width: 1200px;
}

.ai-credits-features h3 {
    margin: 0 0 24px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

.ai-credits-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.ai-credits-features li {
    padding: 12px 0 12px 32px;
    position: relative;
    font-size: 15px;
    color: var(--ai-credits-dark);
}

.ai-credits-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--ai-credits-success);
    font-weight: bold;
    font-size: 16px;
}

/* ==========================================================================
   Alerts & Notices
   ========================================================================== */

.ai-credits-alert,
.ai-credits-notice {
    padding: 20px 24px;
    border-radius: var(--ai-credits-radius);
    margin-bottom: 30px;
}

.ai-credits-alert-success,
.ai-credits-notice-success {
    background: #e6f4ea;
    color: var(--ai-credits-success);
    border: 1px solid var(--ai-credits-success);
}

.ai-credits-alert-warning,
.ai-credits-notice-warning {
    background: #fef7e0;
    color: #8a6d3b;
    border: 1px solid var(--ai-credits-warning);
}

.ai-credits-alert-error,
.ai-credits-notice-error {
    background: #fef1f1;
    color: var(--ai-credits-danger);
    border: 1px solid var(--ai-credits-danger);
}

.ai-credits-alert-info,
.ai-credits-notice-info {
    background: #e8f4fc;
    color: #0c5460;
    border: 1px solid var(--ai-credits-info);
}

.ai-credits-notice strong {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
}

.ai-credits-notice p {
    margin: 0;
    font-size: 14px;
}

.ai-credits-notice-dismissible {
    position: relative;
    padding-right: 50px;
}

.ai-credits-notice-dismiss {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    color: inherit;
    padding: 0;
    width: 24px;
    height: 24px;
}

.ai-credits-notice-dismiss:hover {
    opacity: 1;
}

/* ==========================================================================
   Help Section
   ========================================================================== */

.ai-credits-help {
    margin: 50px auto 0;
    padding: 30px;
    background: var(--ai-credits-light);
    border-radius: var(--ai-credits-radius);
    text-align: center;
    max-width: 1200px;
}

.ai-credits-help p {
    margin: 0;
    font-size: 15px;
}

.ai-credits-help a {
    color: var(--ai-credits-primary);
    text-decoration: none;
    font-weight: 500;
}

.ai-credits-help a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Empty States
   ========================================================================== */

.ai-credits-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--ai-credits-secondary);
}

.ai-credits-empty .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.ai-credits-empty p {
    margin: 0 0 10px;
    font-size: 16px;
}

.ai-credits-empty-hint {
    font-size: 14px;
    opacity: 0.8;
}

/* ==========================================================================
   Quick Actions
   ========================================================================== */

.ai-credits-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

/* ==========================================================================
   Settings Page
   ========================================================================== */

.ai-credits-settings-section {
    background: #fff;
    border: 1px solid var(--ai-credits-border);
    border-radius: var(--ai-credits-radius);
    margin-bottom: 20px;
    overflow: hidden;
}

.ai-credits-settings-header {
    padding: 20px;
    background: var(--ai-credits-light);
    border-bottom: 1px solid var(--ai-credits-border);
}

.ai-credits-settings-header h2 {
    margin: 0 0 5px;
    font-size: 16px;
}

.ai-credits-settings-description {
    margin: 5px 0 0;
    color: var(--ai-credits-secondary);
    font-size: 13px;
}

.ai-credits-settings-content {
    padding: 20px;
}

.ai-credits-settings-danger .ai-credits-settings-header {
    background: #fef1f1;
}

.ai-credits-api-key-display {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
}

.ai-credits-api-key-display code {
    flex: 1;
    padding: 10px 15px;
    background: var(--ai-credits-light);
    border: 1px solid var(--ai-credits-border);
    border-radius: var(--ai-credits-radius);
    font-family: Monaco, Consolas, "Courier New", monospace;
    font-size: 14px;
}

/* ==========================================================================
   Modals
   ========================================================================== */

.ai-credits-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-credits-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.ai-credits-modal-content {
    position: relative;
    background: #fff;
    border-radius: var(--ai-credits-radius-lg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: auto;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ai-credits-modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--ai-credits-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ai-credits-modal-header h3 {
    margin: 0;
    font-size: 18px;
}

.ai-credits-modal-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--ai-credits-secondary);
}

.ai-credits-modal-body {
    padding: 20px;
}

.ai-credits-modal-footer {
    padding: 15px 20px;
    background: var(--ai-credits-light);
    border-top: 1px solid var(--ai-credits-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.ai-credits-modal-icon {
    font-size: 48px;
    text-align: center;
    margin-bottom: 15px;
}

.ai-credits-modal-title {
    margin: 0 0 20px 0;
    font-size: 22px;
    text-align: center;
    color: #333;
}

.ai-credits-modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
}

/* Plan Change Confirmation Styles */
.ai-credits-plan-change-details {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
}

.ai-credits-change-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
}

.ai-credits-change-item:last-child {
    border-bottom: none;
}

.ai-credits-change-label {
    color: #666;
    font-size: 14px;
}

.ai-credits-change-value {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.ai-credits-change-note {
    font-size: 13px;
    color: #666;
    background: #fff3cd;
    padding: 12px;
    border-radius: 6px;
    margin-top: 15px;
}

/* ==========================================================================
   Balance Widget
   ========================================================================== */

.ai-credits-balance {
    background: #fff;
    border: 1px solid var(--ai-credits-border);
    border-radius: var(--ai-credits-radius-lg);
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: var(--ai-credits-shadow);
}

.ai-credits-balance-total {
    text-align: center;
    margin-bottom: 15px;
}

.ai-credits-balance-label {
    display: block;
    font-size: 13px;
    color: var(--ai-credits-secondary);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.ai-credits-balance-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--ai-credits-primary);
}

.ai-credits-balance-breakdown {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid var(--ai-credits-border);
    padding-top: 15px;
}

.ai-credits-balance-item {
    text-align: center;
}

.ai-credits-balance-item-label {
    display: block;
    font-size: 12px;
    color: var(--ai-credits-secondary);
}

.ai-credits-balance-item-value {
    font-size: 18px;
    font-weight: 600;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .ai-credits-pricing-hero {
        padding: 30px 15px;
    }

    .ai-credits-pricing-title {
        font-size: 28px;
    }

    .ai-credits-pricing-subtitle {
        font-size: 16px;
    }

    .ai-credits-section-header h2 {
        font-size: 20px;
    }

    .ai-credits-plan {
        padding: 24px 20px;
    }

    .ai-credits-plan-amount {
        font-size: 48px;
    }

    .ai-credits-cards {
        grid-template-columns: 1fr;
    }

    .ai-credits-quick-actions {
        flex-direction: column;
    }

    .ai-credits-quick-actions .ai-credits-btn {
        width: 100%;
    }

    .ai-credits-form-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .ai-credits-modal-content {
        width: 95%;
        margin: 10px;
    }

    .ai-credits-features ul {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Navigation Visibility (Conditional based on login state)
   WordPress adds 'logged-in' class to body when user is authenticated
   ========================================================================== */

/* Hide logged-in-only items for visitors */
.ai-credits-nav-logged-in,
.wp-block-navigation-item.ai-credits-nav-logged-in,
li.ai-credits-nav-logged-in {
    display: none !important;
}

/* Show visitor-only items for visitors */
.ai-credits-nav-visitor,
.wp-block-navigation-item.ai-credits-nav-visitor,
li.ai-credits-nav-visitor {
    display: list-item !important;
}

/* When logged in: Show logged-in items */
body.logged-in .ai-credits-nav-logged-in,
body.logged-in .wp-block-navigation-item.ai-credits-nav-logged-in,
body.logged-in li.ai-credits-nav-logged-in {
    display: list-item !important;
}

/* When logged in: Hide visitor items */
body.logged-in .ai-credits-nav-visitor,
body.logged-in .wp-block-navigation-item.ai-credits-nav-visitor,
body.logged-in li.ai-credits-nav-visitor {
    display: none !important;
}

/* ==========================================================================
   Utility Styles
   ========================================================================== */

/* Forgot password link */
.ai-credits-forgot-password {
    display: block;
    text-align: right;
    margin-top: -10px;
    margin-bottom: 15px;
}

.ai-credits-forgot-password a {
    color: var(--ai-credits-secondary);
    font-size: 13px;
    text-decoration: none;
}

.ai-credits-forgot-password a:hover {
    color: var(--ai-credits-primary);
    text-decoration: underline;
}

/* ==========================================================================
   Custom Navigation Styling
   ========================================================================== */

/* Add spacing between navigation items */
.wp-block-navigation__container .wp-block-navigation-item {
    margin-right: 8px;
}

.wp-block-navigation__container .wp-block-navigation-item:last-child {
    margin-right: 0;
}

.wp-block-navigation-item__content {
    padding: 8px 12px;
    color: inherit;
    text-decoration: none;
}

.wp-block-navigation-item__content:hover {
    color: var(--ai-credits-primary);
}

/* ==========================================================================
   Footer Cleanup - Hide redundant footer elements
   ========================================================================== */

/* Hide the second navigation (footer) entirely */
footer .wp-block-navigation,
.wp-block-template-part[data-theme-name] .wp-block-navigation:not(:first-of-type) {
    display: none !important;
}

/* Style the footer to be minimal */
footer.wp-block-template-part,
.wp-block-template-part footer {
    padding: 20px 0;
    text-align: center;
    font-size: 13px;
    color: var(--ai-credits-secondary);
}

/* ==========================================================================
   Admin Pages (Frontend)
   ========================================================================== */

.ai-credits-admin {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 20px;
}

.ai-credits-admin-filters {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--ai-credits-light);
    border-radius: var(--ai-credits-radius);
}

.ai-credits-admin-filters form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.ai-credits-admin-filters input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 10px 15px;
    border: 1px solid var(--ai-credits-border);
    border-radius: var(--ai-credits-radius);
    font-size: 14px;
}

.ai-credits-admin-filters select {
    padding: 10px 15px;
    border: 1px solid var(--ai-credits-border);
    border-radius: var(--ai-credits-radius);
    font-size: 14px;
    background: #fff;
    min-width: 150px;
}

/* Date/Time Display with Timezone */
.ai-credits-date {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ai-credits-date-day {
    font-weight: 500;
    color: var(--ai-credits-text);
}

.ai-credits-date-time {
    font-size: 12px;
    color: var(--ai-credits-secondary);
}

.ai-credits-timezone {
    font-size: 10px;
    color: var(--ai-credits-secondary);
    opacity: 0.8;
    margin-left: 4px;
    text-transform: uppercase;
}

/* Extended Filter Form (Transaction History) */
.ai-credits-filter-form-extended {
    display: block !important;
}

.ai-credits-filter-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 15px;
}

.ai-credits-filter-row:last-child {
    margin-bottom: 0;
}

.ai-credits-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
}

.ai-credits-filter-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ai-credits-secondary);
    text-transform: uppercase;
}

.ai-credits-filter-group input[type="text"],
.ai-credits-filter-group input[type="date"],
.ai-credits-filter-group select {
    padding: 10px 15px;
    border: 1px solid var(--ai-credits-border);
    border-radius: var(--ai-credits-radius);
    font-size: 14px;
    background: #fff;
}

.ai-credits-filter-group input[type="date"] {
    min-width: 150px;
}

.ai-credits-filter-actions {
    flex-direction: row !important;
    gap: 10px !important;
    align-items: center;
}

/* Extended Filters for User Usage History */
.ai-credits-filters-extended {
    background: var(--ai-credits-light);
    padding: 20px;
    border-radius: var(--ai-credits-radius);
    margin-bottom: 20px;
}

.ai-credits-filters-extended .ai-credits-filter-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 15px;
}

.ai-credits-filters-extended .ai-credits-filter-row:last-child {
    margin-bottom: 0;
}

.ai-credits-filter-spacer {
    flex: 1;
    min-width: 20px;
}

.ai-credits-export-buttons {
    display: flex;
    gap: 8px;
}

.ai-credits-export-buttons .ai-credits-btn {
    padding: 10px 16px;
}

.ai-credits-export-buttons .dashicons {
    margin-right: 4px;
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}

/* Usage Summary Section */
.ai-credits-usage-summary {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ai-credits-summary-item {
    flex: 1;
    min-width: 150px;
    background: #fff;
    padding: 15px 20px;
    border-radius: var(--ai-credits-radius);
    box-shadow: var(--ai-credits-shadow-sm);
    text-align: center;
}

.ai-credits-summary-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ai-credits-secondary);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.ai-credits-summary-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--ai-credits-dark);
}

.ai-credits-summary-positive .ai-credits-summary-value {
    color: var(--ai-credits-success);
}

.ai-credits-summary-negative .ai-credits-summary-value {
    color: var(--ai-credits-danger);
}

/* Mobile Responsive for Filters */
@media (max-width: 768px) {
    .ai-credits-filters-extended .ai-credits-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-credits-filter-spacer {
        display: none;
    }

    .ai-credits-export-buttons {
        width: 100%;
        justify-content: flex-start;
    }

    .ai-credits-usage-summary {
        flex-direction: column;
    }

    .ai-credits-summary-item {
        min-width: 100%;
    }
}

.ai-credits-table-wrapper {
    overflow-x: auto;
    border-radius: var(--ai-credits-radius);
    box-shadow: var(--ai-credits-shadow-sm);
}

/* Scrollable table container for long transaction lists */
.ai-credits-table-scrollable {
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid var(--ai-credits-border);
    border-radius: var(--ai-credits-radius);
}

.ai-credits-table-scrollable .ai-credits-table {
    margin: 0;
}

.ai-credits-table-scrollable .ai-credits-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--ai-credits-light);
}

.ai-credits-table-scrollable .ai-credits-table thead th {
    border-top: none;
}

.ai-credits-table-info {
    margin-top: 15px;
    padding: 10px 15px;
    background: var(--ai-credits-light);
    border-radius: var(--ai-credits-radius);
    font-size: 14px;
    color: var(--ai-credits-secondary);
    text-align: center;
}

.ai-credits-pagination {
    margin-top: 20px;
    text-align: center;
}

.ai-credits-pagination .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 2px;
    border: 1px solid var(--ai-credits-border);
    border-radius: var(--ai-credits-radius);
    text-decoration: none;
    color: var(--ai-credits-dark);
    background: #fff;
}

.ai-credits-pagination .page-numbers.current {
    background: var(--ai-credits-primary);
    color: #fff;
    border-color: var(--ai-credits-primary);
}

.ai-credits-pagination .page-numbers:hover:not(.current) {
    background: var(--ai-credits-light);
    border-color: var(--ai-credits-primary);
}

.ai-credits-pagination-info {
    margin-top: 10px;
    font-size: 13px;
    color: var(--ai-credits-secondary);
    text-align: center;
}

@media (max-width: 768px) {
    .ai-credits-admin-filters form {
        flex-direction: column;
    }

    .ai-credits-admin-filters input[type="text"],
    .ai-credits-admin-filters select {
        width: 100%;
    }
}

/* Admin Action Buttons */
.ai-credits-actions {
    white-space: nowrap;
}

.ai-credits-btn-small {
    padding: 6px 12px;
    font-size: 12px;
}

.ai-credits-btn-danger {
    background: var(--ai-credits-danger);
    color: #fff !important;
}

.ai-credits-btn-danger:hover {
    background: #b02a2c;
    color: #fff !important;
}

.ai-credits-btn-success {
    background: var(--ai-credits-success);
    color: #fff !important;
}

.ai-credits-btn-success:hover {
    background: #008522;
    color: #fff !important;
}

/* Status badges */
.ai-credits-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.ai-credits-status-active {
    background: #d4edda;
    color: #155724;
}

.ai-credits-status-suspended {
    background: #f8d7da;
    color: #721c24;
}

.ai-credits-status-deleted {
    background: #e2e3e5;
    color: #383d41;
}

/* Plan badges */
.ai-credits-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.ai-credits-badge-plan-free {
    background: #e2e3e5;
    color: #383d41;
}

.ai-credits-badge-plan-starter {
    background: #cce5ff;
    color: #004085;
}

.ai-credits-badge-plan-professional {
    background: #fff3cd;
    color: #856404;
}

.ai-credits-badge-plan-enterprise {
    background: #d4edda;
    color: #155724;
}

/* Amount colors */
.ai-credits-positive {
    color: var(--ai-credits-success);
    font-weight: 600;
}

.ai-credits-negative {
    color: var(--ai-credits-danger);
    font-weight: 600;
}

/* Large modal */
.ai-credits-modal-large .ai-credits-modal-content {
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
}

/* User details in modal */
.ai-credits-user-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.ai-credits-user-row {
    padding: 8px 0;
    border-bottom: 1px solid var(--ai-credits-border);
}

.ai-credits-user-row strong {
    color: var(--ai-credits-secondary);
    margin-right: 8px;
}

/* Small tables in modals */
.ai-credits-table-small {
    font-size: 13px;
    margin-top: 10px;
}

.ai-credits-table-small th,
.ai-credits-table-small td {
    padding: 8px 10px;
}

/* Modal info paragraph */
.ai-credits-modal-info {
    background: var(--ai-credits-light);
    padding: 15px;
    border-radius: var(--ai-credits-radius);
    margin-bottom: 20px;
    line-height: 1.8;
}

/* Credit breakdown in modal */
.ai-credits-credit-breakdown {
    background: var(--ai-credits-light);
}

.ai-credits-credit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 12px;
}

.ai-credits-credit-item {
    background: #fff;
    padding: 12px;
    border-radius: var(--ai-credits-radius);
    text-align: center;
}

.ai-credits-credit-item.ai-credits-credit-highlight {
    border: 2px solid var(--ai-credits-primary);
}

.ai-credits-credit-label {
    display: block;
    font-size: 12px;
    color: var(--ai-credits-secondary);
    margin-bottom: 5px;
}

.ai-credits-credit-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--ai-credits-dark);
}

.ai-credits-credit-item small {
    display: block;
    font-size: 11px;
    margin-top: 5px;
}

/* Text helper classes */
.ai-credits-text-muted {
    color: var(--ai-credits-secondary) !important;
}

.ai-credits-text-primary {
    color: var(--ai-credits-primary) !important;
}

.ai-credits-text-success {
    color: var(--ai-credits-success) !important;
}

/* Loading state */
.ai-credits-loading {
    text-align: center;
    padding: 40px;
    color: var(--ai-credits-secondary);
}

@media (max-width: 768px) {
    .ai-credits-user-info {
        grid-template-columns: 1fr;
    }

    .ai-credits-actions {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .ai-credits-btn-small {
        width: 100%;
    }
}

/* ==========================================================================
   Hide WordPress Page Titles on AI Credits Pages
   Prevents redundant titles (e.g., "Login" + form header)
   ========================================================================== */

/* Hide page title when AI Credits content is present */
.wp-block-ai-credits-login ~ .entry-title,
.wp-block-ai-credits-dashboard ~ .entry-title,
.wp-block-ai-credits-buy-credits ~ .entry-title,
.wp-block-ai-credits-balance ~ .entry-title,
.wp-block-ai-credits-usage-history ~ .entry-title,
.wp-block-ai-credits-settings ~ .entry-title {
    display: none !important;
}

/* Hide page title in standard WordPress theme structures */
body:has(.ai-credits-auth-container) .entry-title,
body:has(.ai-credits-dashboard) .entry-title,
body:has(.ai-credits-buy) .entry-title,
body:has(.ai-credits-balance) .entry-title,
body:has(.ai-credits-usage) .entry-title,
body:has(.ai-credits-settings) .entry-title,
body:has(.ai-credits-admin) .entry-title {
    display: none !important;
}

/* Hide page title in Twenty Twenty-Five theme */
body:has(.ai-credits-auth-container) .wp-block-post-title,
body:has(.ai-credits-dashboard) .wp-block-post-title,
body:has(.ai-credits-buy) .wp-block-post-title,
body:has(.ai-credits-balance) .wp-block-post-title,
body:has(.ai-credits-usage) .wp-block-post-title,
body:has(.ai-credits-settings) .wp-block-post-title,
body:has(.ai-credits-admin) .wp-block-post-title {
    display: none !important;
}

/* Reduce spacing between header and content on AI Credits pages */
body:has(.ai-credits-auth-container) main,
body:has(.ai-credits-dashboard) main,
body:has(.ai-credits-buy) main,
body:has(.ai-credits-balance) main,
body:has(.ai-credits-usage) main,
body:has(.ai-credits-settings) main,
body:has(.ai-credits-admin) main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Reduce padding on main content area */
body:has(.ai-credits-auth-container) .wp-block-group,
body:has(.ai-credits-dashboard) .wp-block-group,
body:has(.ai-credits-buy) .wp-block-group,
body:has(.ai-credits-balance) .wp-block-group,
body:has(.ai-credits-usage) .wp-block-group,
body:has(.ai-credits-settings) .wp-block-group {
    padding-top: 20px !important;
}

/* Remove extra margins from block wrapper and ensure full width */
.ai-credits-login-block-wrapper,
.ai-credits-dashboard-block-wrapper,
.ai-credits-buy-credits-block-wrapper,
.ai-credits-balance-block-wrapper,
.ai-credits-usage-history-block-wrapper,
.ai-credits-settings-block-wrapper {
    margin-top: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* Login container stays centered and narrow */
.ai-credits-login-block-wrapper {
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   Large Screen Optimizations (1920x1080+)
   ========================================================================== */

@media (min-width: 1400px) {
    .ai-credits-dashboard,
    .ai-credits-buy,
    .ai-credits-usage,
    .ai-credits-settings,
    .ai-credits-admin {
        max-width: 1200px;
        padding: 40px 30px;
    }

    .ai-credits-plans {
        gap: 32px;
    }

    .ai-credits-plan {
        padding: 40px 32px;
    }

    .ai-credits-plan-amount {
        font-size: 64px;
    }

    .ai-credits-pricing-title {
        font-size: 42px;
    }

    .ai-credits-section-header h2 {
        font-size: 28px;
    }

    .ai-credits-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .ai-credits-card {
        padding: 32px;
    }

    .ai-credits-card-value {
        font-size: 40px;
    }

    .ai-credits-table th,
    .ai-credits-table td {
        padding: 16px 20px;
    }

    .ai-credits-balance {
        padding: 50px 60px;
    }

    .ai-credits-balance-value {
        font-size: 48px;
    }
}

/* Extra large screens (2K+) */
@media (min-width: 1920px) {
    .ai-credits-dashboard,
    .ai-credits-buy,
    .ai-credits-usage,
    .ai-credits-settings,
    .ai-credits-admin {
        max-width: 1200px;
    }
}

/* ==========================================================================
   Full Width Block Support
   ========================================================================== */

/* When block is set to wide alignment */
.alignwide .ai-credits-dashboard,
.alignwide .ai-credits-buy,
.alignwide .ai-credits-usage,
.alignwide .ai-credits-settings,
.alignwide .ai-credits-admin {
    max-width: 1200px;
}

/* When block is set to full alignment */
.alignfull .ai-credits-dashboard,
.alignfull .ai-credits-buy,
.alignfull .ai-credits-usage,
.alignfull .ai-credits-settings,
.alignfull .ai-credits-admin {
    max-width: none;
    padding-left: 5%;
    padding-right: 5%;
}

/* Block wrapper alignments */
.wp-block-ai-credits-dashboard.alignfull,
.wp-block-ai-credits-buy-credits.alignfull,
.wp-block-ai-credits-usage-history.alignfull,
.wp-block-ai-credits-settings.alignfull,
.wp-block-ai-credits-balance.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.wp-block-ai-credits-dashboard.alignwide,
.wp-block-ai-credits-buy-credits.alignwide,
.wp-block-ai-credits-usage-history.alignwide,
.wp-block-ai-credits-settings.alignwide,
.wp-block-ai-credits-balance.alignwide {
    width: calc(100% + 200px);
    max-width: calc(100vw - 40px);
    margin-left: -100px;
}

/* ==========================================================================
   Portal - Unified Single Page with Tabs
   ========================================================================== */

.ai-credits-portal {
    font-family: "Work Sans", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ai-credits-dark);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ==========================================================================
   Theme Override Protection - Force Tab Visibility and Positioning
   These rules combat aggressive theme CSS that may hide or misposition elements
   ========================================================================== */

/* Main portal container - ensure proper document flow */
.ai-credits-portal,
div.ai-credits-portal {
    position: static !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Portal tabs container - force visible and in document flow */
.ai-credits-portal .ai-credits-portal-tabs,
.ai-credits-portal-tabs,
div.ai-credits-portal-tabs {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
    float: none !important;
    clear: both !important;
    z-index: auto !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    border-bottom: 2px solid #ebebeb !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* Tab navigation list - force visible and in document flow */
.ai-credits-portal .ai-credits-tab-nav,
.ai-credits-tab-nav,
nav.ai-credits-tab-nav,
ul.ai-credits-tab-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Tab buttons - force visible and in document flow */
.ai-credits-portal .ai-credits-tab-btn,
.ai-credits-tab-btn,
button.ai-credits-tab-btn,
a.ai-credits-tab-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #666 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    text-align: center !important;
    height: auto !important;
    min-height: auto !important;
    width: auto !important;
    position: static !important;
    float: none !important;
    overflow: visible !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
}

/* Active tab button */
.ai-credits-portal .ai-credits-tab-btn.active,
.ai-credits-tab-btn.active,
button.ai-credits-tab-btn.active {
    color: var(--ai-credits-primary) !important;
    border-bottom-color: var(--ai-credits-primary) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--ai-credits-primary) !important;
}

/* Tab button hover */
.ai-credits-portal .ai-credits-tab-btn:hover,
.ai-credits-tab-btn:hover {
    color: var(--ai-credits-primary) !important;
    background: transparent !important;
}

/* Ensure tab labels are visible */
.ai-credits-tab-btn .ai-credits-tab-label,
.ai-credits-tab-label {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure dashicons in tabs are visible */
.ai-credits-tab-btn .dashicons {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}

/* Auth tabs (login/register) - force visible */
.ai-credits-auth-tabs,
.ai-credits-portal .ai-credits-auth-tabs {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    border-bottom: 1px solid var(--ai-credits-border) !important;
}

.ai-credits-auth-tab,
.ai-credits-portal .ai-credits-auth-tab,
button.ai-credits-auth-tab {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 1 !important;
    padding: 15px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: var(--ai-credits-light) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    height: auto !important;
    min-height: 48px !important;
}

.ai-credits-auth-tab.active,
button.ai-credits-auth-tab.active {
    background: #fff !important;
    color: var(--ai-credits-primary) !important;
    border-bottom: 2px solid var(--ai-credits-primary) !important;
}

/* Guest View - Login/Register Form */
.ai-credits-portal-guest {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 400px;
    padding: 60px 20px;
}

.ai-credits-portal-guest .ai-credits-auth-container {
    width: 100%;
    max-width: 380px;
    margin: 0;
}

.ai-credits-portal-guest .ai-credits-auth-panel {
    padding: 25px 30px 30px;
}

.ai-credits-portal-guest .ai-credits-form-group input {
    max-width: 100%;
    box-sizing: border-box;
}

/* Tab Navigation */
.ai-credits-portal-tabs {
    margin-bottom: 24px;
    border-bottom: 2px solid var(--ai-credits-border);
}

.ai-credits-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.ai-credits-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ai-credits-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-align: center;
}

.ai-credits-tab-btn:hover {
    color: var(--ai-credits-primary);
    background: transparent;
}

.ai-credits-tab-btn.active {
    color: var(--ai-credits-primary);
    border-bottom-color: var(--ai-credits-primary);
    background: transparent;
    border-bottom: 2px solid var(--ai-credits-primary);
}

.ai-credits-tab-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.ai-credits-tab-btn .ai-credits-tab-label {
    display: inline;
}

/* Admin tabs styling */
.ai-credits-tab-admin {
    color: var(--ai-credits-info);
}

.ai-credits-tab-admin:hover {
    color: var(--ai-credits-primary-dark);
}

.ai-credits-tab-admin.active {
    color: var(--ai-credits-primary-dark);
    border-bottom-color: var(--ai-credits-primary-dark);
}

/* Tab Separator */
.ai-credits-tab-separator {
    width: 1px;
    height: 24px;
    background: var(--ai-credits-border);
    margin: 10px 12px;
    align-self: center;
}

/* Tab Spacer - pushes logout to far right */
.ai-credits-tab-spacer {
    flex-grow: 1;
    background: transparent;
    width: auto;
}

/* Logout Button */
.ai-credits-logout-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    color: var(--ai-credits-text-muted);
    text-decoration: none;
    border: 1px solid var(--ai-credits-border);
    border-radius: 4px;
    background: transparent;
    font-size: 14px;
    transition: all 0.2s ease;
}

.ai-credits-logout-btn:hover {
    color: #dc3545;
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.05);
}

.ai-credits-logout-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Tab Panels */
.ai-credits-tab-panels {
    padding: 0;
}

.ai-credits-tab-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.ai-credits-tab-panel.active {
    display: block;
}

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

/* Tab switch buttons (inside panels) */
.ai-credits-tab-switch {
    cursor: pointer;
}

.ai-credits-link.ai-credits-tab-switch {
    background: none;
    border: none;
    padding: 0;
    color: var(--ai-credits-primary);
    font-size: inherit;
    font-family: inherit;
    text-decoration: none;
}

.ai-credits-link.ai-credits-tab-switch:hover {
    text-decoration: underline;
}

/* Responsive: Stack tabs on mobile */
@media (max-width: 768px) {
    .ai-credits-tab-nav {
        gap: 2px;
    }

    .ai-credits-tab-btn {
        padding: 6px 10px;
        font-size: 13px;
    }

    .ai-credits-tab-btn .ai-credits-tab-label {
        display: none;
    }

    .ai-credits-tab-btn .dashicons {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }

    .ai-credits-tab-separator {
        display: none;
    }
}

@media (max-width: 480px) {
    .ai-credits-tab-nav {
        justify-content: space-around;
    }

    .ai-credits-tab-btn {
        flex: 1;
        justify-content: center;
        padding: 8px 8px;
    }
}

/* ==========================================================================
   Custom Tab Content Reset - Preserve Elementor/Page Builder Styles
   ========================================================================== */

.ai-credits-custom-content,
.ai-credits-banner-panel {
    /* Let Elementor content use its own styles */
    /* Note: DO NOT set color: inherit - it overrides Elementor's inline styles */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* ==========================================================================
   Fix Elementor Icon Box widget - Respect position settings

   When pages are embedded via get_builder_content_for_display(), Elementor's
   widget-icon-box.min.css may not load. These rules ensure icon-boxes display
   according to their configured position (top/left/right) in the Elementor editor.

   Elementor position classes:
   - .elementor-position-top = icon above text (flex-direction: column)
   - .elementor-position-left = icon left of text (flex-direction: row)
   - .elementor-position-right = icon right of text (flex-direction: row-reverse)
   ========================================================================== */

/* Base icon-box wrapper - enable flex */
.ai-credits-custom-content .elementor-widget-icon-box .elementor-icon-box-wrapper,
.ai-credits-banner-panel .elementor-widget-icon-box .elementor-icon-box-wrapper {
    display: flex !important;
}

/* Position TOP / BLOCK-START - icon above text (default for many designs) */
/* Note: Elementor uses both 'elementor-position-top' (legacy) and
   'elementor-position-block-start' (modern/flexbox) for the same layout */
.ai-credits-custom-content .elementor-widget-icon-box.elementor-position-top .elementor-icon-box-wrapper,
.ai-credits-custom-content .elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-wrapper,
.ai-credits-custom-content .elementor-widget-icon-box:not([class*="elementor-position-"]) .elementor-icon-box-wrapper,
.ai-credits-banner-panel .elementor-widget-icon-box.elementor-position-top .elementor-icon-box-wrapper,
.ai-credits-banner-panel .elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-wrapper,
.ai-credits-banner-panel .elementor-widget-icon-box:not([class*="elementor-position-"]) .elementor-icon-box-wrapper {
    flex-direction: column !important;
    text-align: center !important;
}

/* REMOVED: Forced margin was overriding Elementor's native spacing settings.
   Elementor's widget CSS is now loaded via get_builder_content_for_display($page_id, true).
   Let Elementor control icon-to-text spacing as set in the editor.

   Previously this was adding 15px margin-bottom which caused spacing differences
   between standalone pages and embedded portal content.
*/

/* Position LEFT / INLINE-START - icon left of text */
/* Note: Elementor uses both 'elementor-position-left' (legacy) and
   'elementor-position-inline-start' (modern/flexbox) for the same layout */
.ai-credits-custom-content .elementor-widget-icon-box.elementor-position-left .elementor-icon-box-wrapper,
.ai-credits-custom-content .elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-wrapper {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
}

.ai-credits-custom-content .elementor-widget-icon-box.elementor-position-left .elementor-icon-box-icon,
.ai-credits-custom-content .elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-icon {
    margin-right: 15px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
}

.ai-credits-custom-content .elementor-widget-icon-box.elementor-position-left .elementor-icon-box-content,
.ai-credits-custom-content .elementor-widget-icon-box.elementor-position-inline-start .elementor-icon-box-content {
    flex: 1 !important;
}

/* Position RIGHT / INLINE-END - icon right of text */
/* Note: Elementor uses both 'elementor-position-right' (legacy) and
   'elementor-position-inline-end' (modern/flexbox) for the same layout */
.ai-credits-custom-content .elementor-widget-icon-box.elementor-position-right .elementor-icon-box-wrapper,
.ai-credits-custom-content .elementor-widget-icon-box.elementor-position-inline-end .elementor-icon-box-wrapper {
    flex-direction: row-reverse !important;
    align-items: center !important;
    text-align: left !important;
}

.ai-credits-custom-content .elementor-widget-icon-box.elementor-position-right .elementor-icon-box-icon,
.ai-credits-custom-content .elementor-widget-icon-box.elementor-position-inline-end .elementor-icon-box-icon {
    margin-left: 15px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
}

.ai-credits-custom-content .elementor-widget-icon-box.elementor-position-right .elementor-icon-box-content,
.ai-credits-custom-content .elementor-widget-icon-box.elementor-position-inline-end .elementor-icon-box-content {
    flex: 1 !important;
}

/* Ensure icon element maintains square aspect ratio */
.ai-credits-custom-content .elementor-widget-icon-box .elementor-icon,
.ai-credits-banner-panel .elementor-widget-icon-box .elementor-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    aspect-ratio: 1 / 1 !important;
}

/* ==========================================================================
   Fix Elementor Icon List widget - Inline items display
   When pages are embedded via get_builder_content_for_display(), Elementor's
   widget-specific CSS (widget-icon-list.min.css) may not be loaded.
   These rules ensure inline icon lists display correctly as horizontal badges.
   ========================================================================== */

/* Inline icon list items should display as flex row (horizontal badges) */
.ai-credits-custom-content .elementor-icon-list-items.elementor-inline-items {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Each inline list item should be inline-flex, not list-item */
.ai-credits-custom-content .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item {
    display: inline-flex !important;
    align-items: center !important;
    list-style: none !important;
}

/* Ensure icon list text links display properly */
.ai-credits-custom-content .elementor-icon-list-items .elementor-icon-list-text {
    display: inline !important;
}

/* Standard (non-inline) icon lists - ensure proper vertical layout */
.ai-credits-custom-content .elementor-icon-list-items:not(.elementor-inline-items) {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ai-credits-custom-content .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item {
    display: flex !important;
    align-items: flex-start !important;
    list-style: none !important;
}

/* Reduce spacing between tabs and content */
.ai-credits-portal .ai-credits-tab-nav {
    margin-bottom: 0 !important;
}

.ai-credits-portal .ai-credits-portal-tabs {
    margin-bottom: 0 !important;
    padding-top: 20px !important; /* Space between banner and tabs */
}

.ai-credits-portal .ai-credits-tab-panels,
.ai-credits-portal > .ai-credits-tab-panels {
    padding-top: 0 !important;
    margin-top: -20px !important;
}

.ai-credits-portal .ai-credits-tab-panel {
    padding-top: 0 !important;
}

/* Custom tab panels - remove all top spacing */
.ai-credits-portal .ai-credits-tab-panel.ai-credits-custom-panel {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ==========================================================================
   Custom Tab Content - Hide Page Headers and Reduce Spacing
   When embedding Elementor pages as tabs, hide redundant page elements
   ========================================================================== */

/* Hide page-level breadcrumbs and titles when portal is present */
/* These appear OUTSIDE the custom content, in the main page wrapper */
body:has(.ai-credits-portal) .breadcrumbs,
body:has(.ai-credits-portal) .yoast-breadcrumbs,
body:has(.ai-credits-portal) .rank-math-breadcrumb,
body:has(.ai-credits-portal) .woocommerce-breadcrumb,
body:has(.ai-credits-portal) nav.breadcrumb,
body:has(.ai-credits-portal) .navxt-breadcrumbs,
body:has(.ai-credits-portal) [class*="bcn_"],
body:has(.ai-credits-portal) .elementor-widget-breadcrumbs,
body:has(.ai-credits-portal) .wp-block-post-title,
body:has(.ai-credits-portal) .entry-title,
body:has(.ai-credits-portal) h1.entry-title,
body:has(.ai-credits-portal) h1.page-title,
body:has(.ai-credits-portal) .page-header,
body:has(.ai-credits-portal) header.entry-header,
body:has(.ai-credits-portal) .hentry > header {
    display: none !important;
}

/* Also target breadcrumb container that may wrap the breadcrumb links */
body:has(.ai-credits-portal) .astra-breadcrumbs-container,
body:has(.ai-credits-portal) .astra-breadcrumbs-wrapper,
body:has(.ai-credits-portal) .theme-breadcrumbs,
body:has(.ai-credits-portal) .site-breadcrumbs,
body:has(.ai-credits-portal) .single-breadcrumb,
body:has(.ai-credits-portal) .page-breadcrumb,
body:has(.ai-credits-portal) #breadcrumbs,
body:has(.ai-credits-portal) .breadcrumb-trail,
body:has(.ai-credits-portal) [class*="breadcrumb-wrapper"],
body:has(.ai-credits-portal) [class*="breadcrumb-container"] {
    display: none !important;
}

/* Hide breadcrumbs inside custom tab panels */
.ai-credits-custom-content .breadcrumbs,
.ai-credits-custom-content .yoast-breadcrumbs,
.ai-credits-custom-content .woocommerce-breadcrumb,
.ai-credits-custom-content .breadcrumb,
.ai-credits-custom-content nav.breadcrumb,
.ai-credits-custom-content .rank-math-breadcrumb,
.ai-credits-custom-content [class*="breadcrumb"],
.ai-credits-custom-content .elementor-widget-breadcrumbs {
    display: none !important;
}

/* Hide page titles inside custom tab panels */
.ai-credits-custom-content .entry-title,
.ai-credits-custom-content .page-title,
.ai-credits-custom-content .wp-block-post-title,
.ai-credits-custom-content h1.entry-title,
.ai-credits-custom-content .elementor-page-title,
.ai-credits-custom-content .elementor-widget-theme-post-title,
.ai-credits-custom-content header.entry-header,
.ai-credits-custom-content .entry-header {
    display: none !important;
}

/* ==========================================================================
   Strip top margin from first Elementor element in custom tabs

   Elementor pages often have margin-top on the first section/container to
   clear the site's fixed header. When embedded as a portal tab, this margin
   creates excess space because the portal already provides tab spacing.

   Targets both:
   - .e-con (new Elementor Flexbox containers)
   - .elementor-section (old Elementor sections)
   ========================================================================== */

/* Strip margin-top for custom tabs ONLY - NOT for banner content */
.ai-credits-custom-panel .ai-credits-custom-content .elementor > .e-con:first-child,
.ai-credits-custom-panel .ai-credits-custom-content .elementor > .elementor-section:first-child,
.ai-credits-custom-panel .ai-credits-custom-content .elementor > .elementor-element:first-child {
    margin-top: 0 !important;
}

/* Hide WordPress default page containers when embedded */
.ai-credits-custom-content .site-main > article > header,
.ai-credits-custom-content .wp-block-group.entry-content > header,
.ai-credits-custom-content article.type-page > header {
    display: none !important;
}

/* REMOVED: This was stripping intentional margins from embedded content */
/* .ai-credits-custom-content > *:first-child { margin-top: 0 !important; } */

/* Hide "Home / Page Name" breadcrumb text patterns */
.ai-credits-custom-content [class*="bcn_"],
.ai-credits-custom-content .navxt-breadcrumbs {
    display: none !important;
}

/* Force remove top padding from Elementor widget areas - ONLY for custom tabs, NOT banner */
.ai-credits-custom-panel .ai-credits-custom-content .elementor-widget:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* REMOVED: This was stripping intentional margins from Elementor containers */
/* Preserve original Elementor page spacing in custom tabs */
/*
.ai-credits-custom-content .e-con:first-child,
.ai-credits-custom-content .e-container:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
*/

/* Reduce empty space from theme wrappers - ONLY for custom tabs, NOT banner */
.ai-credits-custom-panel .ai-credits-custom-content .site-content,
.ai-credits-custom-panel .ai-credits-custom-content .content-area,
.ai-credits-custom-panel .ai-credits-custom-content main.site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ==========================================================================
   Fix Swiper/Carousel in Embedded Content
   ==========================================================================
   When Elementor image carousels are embedded in hidden tabs, Swiper initializes
   with incorrect layout (display: block instead of flex). This causes slides
   to stack vertically instead of horizontally. Force correct Swiper CSS.
   ========================================================================== */

/* Force swiper-wrapper to use flex layout (required for horizontal slides) */
.ai-credits-custom-content .swiper-wrapper,
.ai-credits-custom-panel .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

/* Ensure slides don't shrink and stay in a row */
.ai-credits-custom-content .swiper-slide,
.ai-credits-custom-panel .swiper-slide {
    flex-shrink: 0 !important;
}

/* Fix Elementor image carousel specific issues */
.ai-credits-custom-content .elementor-image-carousel-wrapper,
.ai-credits-custom-panel .elementor-image-carousel-wrapper {
    overflow: hidden !important;
}

/* Ensure carousel container has proper height (not stretched by stacked slides) */
.ai-credits-custom-content .elementor-widget-image-carousel .swiper,
.ai-credits-custom-panel .elementor-widget-image-carousel .swiper {
    overflow: hidden !important;
}

/* ==========================================================================
   Full-Width Banner Area - Separable Tab Headers
   Renders OUTSIDE the portal container for true full-viewport width
   ========================================================================== */

/* Remove ALL page wrapper padding/margin when banner is present */
body:has(.ai-credits-banner-area) .entry-content,
body:has(.ai-credits-banner-area) .site-main,
body:has(.ai-credits-banner-area) .site-content,
body:has(.ai-credits-banner-area) main,
body:has(.ai-credits-banner-area) .content-area,
body:has(.ai-credits-banner-area) article,
body:has(.ai-credits-banner-area) .wp-block-group,
body:has(.ai-credits-banner-area) .wp-block-post-content,
body:has(.ai-credits-banner-area) .elementor-location-single,
body:has(.ai-credits-banner-area) .elementor-page,
body:has(.ai-credits-banner-area) .page-content,
body:has(.ai-credits-banner-area) #content,
body:has(.ai-credits-banner-area) #main,
body:has(.ai-credits-banner-area) .post-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Target theme-specific containers that may add spacing */
body:has(.ai-credits-banner-area) .wp-block-group.has-global-padding > *:first-child,
body:has(.ai-credits-banner-area) .is-layout-constrained > *:first-child,
body:has(.ai-credits-banner-area) .is-layout-flow > *:first-child {
    margin-top: 0 !important;
}

/* Remove margin-block-start from first elements in content area */
body:has(.ai-credits-banner-area) .entry-content > *:first-child,
body:has(.ai-credits-banner-area) .wp-block-post-content > *:first-child,
body:has(.ai-credits-banner-area) main > *:first-child,
body:has(.ai-credits-banner-area) article > *:first-child {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}

/* Hide any spacer elements that themes add after header */
body:has(.ai-credits-banner-area) .wp-block-spacer:first-child,
body:has(.ai-credits-banner-area) .entry-content > .wp-block-spacer:first-of-type {
    display: none !important;
}

/* WordPress block editor default spacing overrides */
body:has(.ai-credits-banner-area) .wp-site-blocks > *:first-child {
    margin-block-start: 0 !important;
}

body:has(.ai-credits-banner-area) .wp-site-blocks > main {
    margin-block-start: 0 !important;
}

.ai-credits-banner-area {
    /* REMOVED: Full viewport width trick that was breaking Elementor styling
       Now banners are treated like custom tabs - natural width, no forcing.
       For full-width backgrounds, designers should use Elementor's "Stretch Section" */
    width: 100%;
    /* NOTE: Do NOT strip padding-top - let Elementor content use its full height */
}

/* Global banner specific styles */
.ai-credits-banner-area.ai-credits-global-banner {
    /* Ensure the banner is visible and takes up space */
    min-height: 100px;
    /* Remove any spacing above the banner - aggressive negative margin to close gap */
    margin-top: 0 !important;
}

/* Banner spacing: Only remove extra margin-top, preserve Elementor's padding */
.ai-credits-banner-area .elementor:first-child {
    margin-top: 0;
}

/* Note: Removed aggressive padding/width overrides that were breaking Elementor styling */

/* Individual banner panels */
.ai-credits-banner-panel {
    width: 100%;
    display: none;
    animation: fadeIn 0.3s ease;
}

.ai-credits-banner-panel.active {
    display: block;
}

/* Let Elementor control its own section widths and spacing */
/* Removed aggressive width/max-width/padding overrides that were breaking styling */

/* Widget spacing is now handled by Elementor's own CSS */

/* Full width sections: Let Elementor's "Stretch Section" handle this
   Removed 100vw override that was breaking container calculations */

/* Space between banner and portal tabs */
.ai-credits-banner-area + .ai-credits-portal {
    margin-top: 0;
}

/* When portal has banners, reduce its top padding */
.ai-credits-portal[data-has-banners="true"] {
    padding-top: 20px;
}

/* Hide breadcrumbs in banner area (but NOT page titles - they may be intentional content) */
.ai-credits-banner-panel .breadcrumbs,
.ai-credits-banner-panel .yoast-breadcrumbs {
    display: none !important;
}

/* Responsive: Ensure banners work on mobile */
@media (max-width: 768px) {
    .ai-credits-banner-area {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }

    /* Keep the .elementor wrapper at 0 padding - don't let Elementor's responsive CSS add padding */
    .ai-credits-banner-area .elementor:first-child {
        padding-top: 0 !important;
    }

    /* On mobile, restore Elementor's responsive padding ONLY on the section (not wrapper) */
    /* This ensures content appears below the mobile header */
    .ai-credits-banner-area .elementor > .elementor-section:first-child,
    .ai-credits-banner-area .elementor > .elementor-inner > .elementor-section-wrap > .elementor-section:first-child {
        padding-top: 80px !important; /* Match Elementor's mobile padding */
    }

    /* Tab buttons: Grid layout for 4+ tabs on mobile */
    /* Use triple-class specificity to override all flex rules */
    body .ai-credits-portal .ai-credits-tab-nav,
    body .ai-credits-portal-tabs .ai-credits-tab-nav,
    body nav.ai-credits-tab-nav,
    body div.ai-credits-tab-nav {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 10px !important;
    }

    body .ai-credits-portal .ai-credits-tab-nav .ai-credits-tab-btn,
    body .ai-credits-tab-nav .ai-credits-tab-btn,
    body .ai-credits-tab-btn {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 8px !important;
        font-size: 14px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   Banner - Uses same .ai-credits-custom-content styling as custom tabs
   The PHP now wraps banner content in .ai-credits-custom-content
   Only banner-area specific rules below (for full-width layout)
   ========================================================================== */

/* Prevent horizontal scrollbar from full-width banner area */
body:has(.ai-credits-banner-area) {
    overflow-x: hidden;
}

/* FIX: Ensure banner content is not clipped */
.ai-credits-banner-area,
.ai-credits-banner-panel,
.ai-credits-banner-panel .ai-credits-custom-content {
    overflow: visible !important;
}

/* Banner Elementor content preservation
   The stripping rules above now target .ai-credits-custom-panel specifically,
   so banner content automatically preserves its Elementor styling including padding */