// ==========================================================================
// PressZone Theme - CTA Strip Section Styles
// ==========================================================================
// Entry point - compiles to cta-strip.css
// Uses Sass variables with body.dark-mode & nesting pattern.
// ==========================================================================

@import 'abstracts/variables';
@import 'abstracts/mixins';

.cta-strip-section {
    background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #ffffff 100%);

    body.dark-mode & {
        background: $dark-bg-secondary;
    }

    @include rtl {
        text-align: right;

        .row {
            flex-direction: row-reverse;
        }
    }
}

// Preview Cards
.cta-preview-wrapper {
    position: relative;
}

.preview-card {
    background: #fff;
    border: 1px solid $light-border-color;
    border-radius: 1rem;
    box-shadow: $shadow-sm;

    body.dark-mode & {
        background: $dark-bg-card;
        border-color: $dark-border-color;
    }
}

.preview-label {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: $light-bg-tertiary;
    border-radius: 50px;
    color: $light-text-muted;

    body.dark-mode & {
        background: $dark-bg-tertiary;
        color: $dark-text-muted;
    }
}

.preview-label-gold {
    background: #fef3c7;
    color: #92400e;

    body.dark-mode & {
        background: rgba($color-warning, 0.2);
        color: #fbbf24;
    }
}

.check-badge {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $color-success;
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
}

// Code Block
.code-block {
    background: #1a1a2e;
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;

    code {
        color: #e2e8f0;
    }
}

.code-keyword { color: #f472b6; }
.code-function { color: #60a5fa; }
.code-class { color: #34d399; }
.code-method { color: #fbbf24; }
.code-string { color: #a78bfa; }
.code-number { color: #fb923c; }

.code-avatar {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $color-primary;
    color: #fff;
    border-radius: 50%;
}

// Standards Badge
.standards-badge {
    background: #fff;
    border: 1px solid $light-border-color;
    border-radius: 50px;
    display: inline-flex;

    body.dark-mode & {
        background: $dark-bg-card;
        border-color: $dark-border-color;
    }
}

.standards-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: $color-primary;
    color: #fff;
    border-radius: 50%;
}

// CTA Content
.cta-badge {
    font-size: 0.875rem;
    font-weight: 500;
    color: $color-primary;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: $color-primary;
    border-radius: 50%;
}

.cta-title {
    color: $light-text-primary;

    span {
        color: $color-primary;
    }

    body.dark-mode & {
        color: $dark-text-primary;
    }
}

// CTA Stats
.cta-stat {
    text-align: center;

    .stat-value {
        color: $light-text-primary;

        body.dark-mode & {
            color: $dark-text-primary;
        }
    }
}

// RTL Support for buttons
@include rtl {
    .cta-buttons {
        flex-direction: row-reverse;

        .btn .ms-2 {
            margin-left: 0 !important;
            margin-right: 0.5rem !important;
        }

        .btn .me-2 {
            margin-right: 0 !important;
            margin-left: 0.5rem !important;
        }
    }

    .cta-stats {
        flex-direction: row-reverse;
    }

    .preview-card-review .d-flex {
        flex-direction: row-reverse;
    }
}