/* CIPD Modules Limited - Public Styles */
/* Dark theme with teal accent - Professional subscription platform */

/* CSS Variables - Dark theme from design system */
:root {
    --lls-background: #0f172a;
    --lls-foreground: #ffffff;
    --lls-card: #1e293b;
    --lls-card-foreground: #ffffff;
    --lls-popover: #1e293b;
    --lls-popover-foreground: #ffffff;
    --lls-primary: #14b8a6;
    --lls-primary-foreground: #0f172a;
    --lls-secondary: #334155;
    --lls-secondary-foreground: #ffffff;
    --lls-muted: #334155;
    --lls-muted-foreground: #94a3b8;
    --lls-accent: #14b8a6;
    --lls-accent-foreground: #0f172a;
    --lls-destructive: #dc2626;
    --lls-destructive-foreground: #ffffff;
    --lls-border: #334155;
    --lls-input: #334155;
    --lls-ring: #14b8a6;
    --lls-success: #22c55e;
    --lls-warning: #eab308;
    --lls-info: #3b82f6;
    --lls-radius: 0.5rem;
    --lls-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
    --lls-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
}

/* Reset & Base */
.lls-wrapper * {
    box-sizing: border-box;
}

/* ==========================================
   STANDALONE PAGE STYLES
   ========================================== */
.lls-standalone-page {
    background: var(--lls-background);
    color: var(--lls-foreground);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.lls-main-content {
    flex: 1;
}

.lls-footer {
    background: #fff;
    border-top: 1px solid var(--lls-border);
    padding: 1.5rem 1rem;
    margin-top: auto;
}

.lls-footer-container {
    max-width: 80rem;
    margin: 0 auto;
    text-align: center;
    color: var(--lls-muted-foreground);
    font-size: 0.875rem;
}

/* ==========================================
   NAVIGATION
   ========================================== */
.lls-nav {
    background: #ffffff;
    border-bottom: 1px solid var(--lls-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.lls-nav-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
}

.lls-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: var(--lls-foreground);
    font-weight: 600;
    font-size: 1.125rem;
}

.lls-nav-brand-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lls-primary);
    border-radius: 0.5rem;
    color: var(--lls-primary-foreground);
}

.lls-nav-brand-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.lls-nav-brand img {
    height: 2.25rem;
    width: auto;
}

.lls-nav-center {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.lls-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lls-muted-foreground);
    text-decoration: none;
    border-radius: var(--lls-radius);
    transition: all 0.15s ease;
}

.lls-nav-link:hover {
    color: var(--lls-foreground);
    background: var(--lls-secondary);
}

.lls-nav-link.active {
    color: var(--lls-foreground);
    background: var(--lls-secondary);
}

.lls-nav-link svg {
    width: 1.125rem;
    height: 1.125rem;
}

.lls-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lls-nav-user {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.875rem 0.375rem 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lls-foreground);
    background: var(--lls-secondary);
    border-radius: 9999px;
}

.lls-nav-user-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--lls-primary);
    color: var(--lls-primary-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Mobile Navigation */
.lls-nav-mobile-toggle {
    display: none;
    padding: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--lls-foreground);
    border-radius: var(--lls-radius);
}

.lls-nav-mobile-toggle:hover {
    background: var(--lls-secondary);
}

.lls-nav-mobile-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
}

.lls-nav-mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid var(--lls-border);
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.lls-nav-mobile-menu.open {
    display: block;
}

.lls-nav-mobile-menu .lls-nav-link {
    display: flex;
    width: 100%;
    padding: 0.75rem 1rem;
    margin-bottom: 0.25rem;
}

.lls-nav-mobile-menu .lls-nav-actions {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--lls-border);
    justify-content: center;
}

@media (max-width: 768px) {
    .lls-nav-center,
    .lls-nav-actions {
        display: none;
    }
    
    .lls-nav-mobile-toggle {
        display: block;
    }
    
    .lls-nav-container {
        position: relative;
    }
}

/* Buttons */
.lls-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.lls-button:focus {
    outline: 2px solid #14b8a6;
    outline-offset: 2px;
}

.lls-button-primary {
    background: #14b8a6;
    color: #0f172a;
    border-color: #14b8a6;
    font-weight: 600;
}

.lls-button-primary:hover {
    background: #0d9488;
    border-color: #0d9488;
}

.lls-button-outline {
    background: transparent;
    color: #ffffff;
    border-color: #334155;
}

.lls-button-outline:hover {
    background: #334155;
}

.lls-button-ghost {
    background: transparent;
    color: #94a3b8;
    border-color: transparent;
}

.lls-button-ghost:hover {
    background: #334155;
    color: #ffffff;
}

.lls-button-destructive {
    background: transparent;
    color: #dc2626;
    border-color: transparent;
}

.lls-button-destructive:hover {
    background: rgba(220, 38, 38, 0.1);
}

.lls-button-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.lls-button-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

.lls-button-block {
    width: 100%;
}

/* Cards */
.lls-card {
    background: var(--lls-card);
    border: 1px solid var(--lls-border);
    border-radius: var(--lls-radius);
    overflow: hidden;
}

.lls-card-header {
    padding: 1.5rem 1.5rem 1rem;
}

.lls-card-content {
    padding: 0 1.5rem 1.5rem;
}

.lls-card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--lls-border);
    background: var(--lls-secondary);
}

.lls-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lls-foreground);
    margin: 0 0 0.25rem;
}

.lls-card-description {
    font-size: 0.875rem;
    color: var(--lls-muted-foreground);
    margin: 0;
}

/* Badge */
.lls-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
    border: 1px solid transparent;
}

.lls-badge-secondary {
    background: #334155;
    color: #ffffff;
}

.lls-badge-primary {
    background: #14b8a6;
    color: #0f172a;
}

.lls-badge-success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
}

.lls-badge-warning {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
    border-color: rgba(234, 179, 8, 0.3);
}

.lls-badge-destructive {
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.3);
}

.lls-badge-outline {
    background: transparent;
    border-color: #334155;
    color: #ffffff;
}

/* Progress */
.lls-progress {
    height: 0.5rem;
    width: 100%;
    background: var(--lls-secondary);
    border-radius: 9999px;
    overflow: hidden;
}

.lls-progress-bar {
    height: 100%;
    background: var(--lls-primary);
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* ==========================================
   PLANS PAGE
   ========================================== */
.lls-plans-page {
    max-width: 80rem;
    margin: 0 auto;
    padding: 4rem 1rem;
}

.lls-plans-header {
    max-width: 48rem;
    margin: 0 auto 3rem;
    text-align: center;
}

.lls-plans-header .lls-badge {
    margin-bottom: 1rem;
}

.lls-plans-title {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #ffffff;
    margin: 0 0 1rem;
}

@media (min-width: 640px) {
    .lls-plans-title {
        font-size: 3.5rem;
    }
}

.lls-plans-subtitle {
    font-size: 1.125rem;
    color: #94a3b8;
    margin: 0;
}

/* Trust Badges */
.lls-trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2rem;
    margin: 3rem auto;
    max-width: 42rem;
    font-size: 0.875rem;
    color: #94a3b8;
}

.lls-trust-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lls-trust-badge svg {
    width: 1rem;
    height: 1rem;
    color: #14b8a6;
}

/* Plans Section */
.lls-plans-section {
    margin-bottom: 4rem;
}

.lls-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    margin: 0 0 2rem;
}

.lls-section-subtitle {
    text-align: center;
    color: #94a3b8;
    margin: 0 0 2rem;
}

.lls-plans-grid {
    display: grid;
    gap: 1.5rem;
}

.lls-plans-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.lls-plans-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 42rem;
    margin: 0 auto;
}

/* Plan Card */
.lls-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    transition: box-shadow 0.2s ease;
}

.lls-plan-card:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
}

.lls-plan-card.lls-plan-popular {
    border-color: #14b8a6;
    box-shadow: 0 0 0 1px #14b8a6;
}

.lls-plan-card.lls-plan-current {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.05);
}

.lls-plan-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.lls-plan-header {
    padding: 1.5rem 1.5rem 1rem;
}

.lls-plan-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 0.25rem;
}

.lls-plan-description {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
}

.lls-plan-content {
    flex: 1;
    padding: 0 1.5rem;
}

.lls-plan-price {
    margin-bottom: 1.5rem;
}

.lls-plan-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
}

.lls-plan-currency {
    font-size: 1.5rem;
    font-weight: 600;
}

.lls-plan-interval {
    color: #94a3b8;
    font-size: 0.875rem;
}

.lls-plan-duration {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #94a3b8;
}

/* Features List */
.lls-plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lls-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

.lls-plan-features li svg,
.lls-plan-features .lls-feature-icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
    font-weight: bold;
}

.lls-plan-features li.included {
    color: #ffffff;
}

.lls-plan-features li.included svg,
.lls-plan-features li.included .lls-feature-icon {
    color: #14b8a6;
}

.lls-plan-features li.not-included {
    color: #64748b;
}

.lls-plan-features li.not-included svg,
.lls-plan-features li.not-included .lls-feature-icon {
    color: #64748b;
}

.lls-plan-footer {
    padding: 1rem 1.5rem 1.5rem;
}

.lls-plan-footer .lls-button {
    width: 100%;
}

/* FAQ Section */
.lls-faq-section {
    max-width: 48rem;
    margin: 0 auto;
}

.lls-faq-item {
    padding: 1.5rem;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.lls-faq-item:last-child {
    margin-bottom: 0;
}

.lls-faq-question {
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 0.5rem;
}

.lls-faq-answer {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.5;
}

/* ==========================================
   AUTH PAGES (Login/Register)
   ========================================== */
.lls-auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    background: var(--lls-background);
}

.lls-auth-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    text-decoration: none;
}

.lls-auth-logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lls-primary);
    border-radius: 0.75rem;
    color: var(--lls-primary-foreground);
}

.lls-auth-logo-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.lls-auth-logo-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lls-foreground);
}

.lls-auth-card {
    width: 100%;
    max-width: 28rem;
    background: var(--lls-card);
    border: 1px solid var(--lls-border);
    border-radius: var(--lls-radius);
}

.lls-auth-header {
    padding: 1.5rem 1.5rem 1rem;
    text-align: center;
}

.lls-auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lls-foreground);
    margin: 0 0 0.25rem;
}

.lls-auth-subtitle {
    font-size: 0.875rem;
    color: var(--lls-muted-foreground);
    margin: 0;
}

.lls-auth-content {
    padding: 0 1.5rem 1.5rem;
}

.lls-auth-footer {
    padding: 1rem 1.5rem 1.5rem;
    text-align: center;
}

/* Form Elements */
.lls-form-group {
    margin-bottom: 1rem;
}

.lls-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lls-foreground);
    margin-bottom: 0.5rem;
}

.lls-form-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lls-form-hint {
    font-size: 0.75rem;
    color: var(--lls-muted-foreground);
    margin-top: 0.375rem;
}

.lls-input-wrapper {
    position: relative;
}

.lls-input-wrapper svg {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--lls-muted-foreground);
    pointer-events: none;
}

.lls-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    padding-left: 2.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--lls-foreground);
    background: var(--lls-background);
    border: 1px solid var(--lls-input);
    border-radius: var(--lls-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lls-input:focus {
    outline: none;
    border-color: var(--lls-ring);
    box-shadow: 0 0 0 2px rgba(163, 163, 163, 0.2);
}

.lls-input::placeholder {
    color: var(--lls-muted-foreground);
}

.lls-forgot-password {
    font-size: 0.875rem;
    color: var(--lls-primary);
    text-decoration: none;
}

.lls-forgot-password:hover {
    text-decoration: underline;
}

.lls-auth-link {
    font-size: 0.875rem;
    color: var(--lls-muted-foreground);
}

.lls-auth-link a {
    color: var(--lls-primary);
    text-decoration: none;
}

.lls-auth-link a:hover {
    text-decoration: underline;
}

.lls-auth-terms {
    margin-top: 2rem;
    font-size: 0.75rem;
    color: var(--lls-muted-foreground);
    text-align: center;
}

.lls-auth-terms a {
    text-decoration: underline;
    color: inherit;
}

.lls-auth-terms a:hover {
    color: var(--lls-foreground);
}

/* Alert */
.lls-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--lls-radius);
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.lls-alert svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
}

.lls-alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--lls-destructive);
}

.lls-alert-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: var(--lls-success);
}

.lls-alert-warning {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.2);
    color: var(--lls-warning);
}

/* ==========================================
   ACCOUNT PAGE
   ========================================== */
.lls-account-page {
    max-width: 64rem;
    margin: 0 auto;
    padding: 3rem 1rem;
}

.lls-account-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .lls-account-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.lls-account-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--lls-foreground);
    margin: 0;
}

.lls-account-subtitle {
    font-size: 0.875rem;
    color: var(--lls-muted-foreground);
    margin: 0.25rem 0 0;
}

.lls-account-actions {
    display: flex;
    gap: 0.5rem;
}

.lls-account-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .lls-account-grid {
        grid-template-columns: 2fr 1fr;
    }
}

.lls-account-main {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lls-account-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Subscription Status Card */
.lls-subscription-card .lls-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.lls-subscription-progress {
    margin-bottom: 1.5rem;
}

.lls-subscription-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.lls-subscription-progress-label {
    color: var(--lls-muted-foreground);
}

.lls-subscription-progress-value {
    font-weight: 500;
    color: var(--lls-foreground);
}

.lls-subscription-details {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.lls-detail-box {
    padding: 1rem;
    background: rgba(245, 245, 245, 0.5);
    border: 1px solid var(--lls-border);
    border-radius: var(--lls-radius);
}

.lls-detail-box-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--lls-muted-foreground);
    margin-bottom: 0.25rem;
}

.lls-detail-box-label svg {
    width: 1rem;
    height: 1rem;
}

.lls-detail-box-value {
    font-weight: 500;
    color: var(--lls-foreground);
}

/* Payment History */
.lls-payment-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.lls-payment-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 500;
    color: var(--lls-muted-foreground);
    border-bottom: 1px solid var(--lls-border);
}

.lls-payment-table td {
    padding: 0.75rem 1rem;
    color: var(--lls-foreground);
    border-bottom: 1px solid var(--lls-border);
}

.lls-payment-table tr:last-child td {
    border-bottom: none;
}

/* Profile Card */
.lls-profile-card {
    text-align: center;
}

.lls-avatar {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    border: 2px solid var(--lls-border);
    background: rgba(23, 23, 23, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--lls-primary);
}

.lls-profile-name {
    font-weight: 600;
    color: var(--lls-foreground);
    margin: 0 0 0.25rem;
}

.lls-profile-email {
    font-size: 0.875rem;
    color: var(--lls-muted-foreground);
    margin: 0 0 0.75rem;
}

/* Quick Links */
.lls-quick-links a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    font-size: 0.875rem;
    color: var(--lls-muted-foreground);
    text-decoration: none;
    border-radius: var(--lls-radius);
    transition: background 0.15s ease, color 0.15s ease;
}

.lls-quick-links a:hover {
    background: var(--lls-secondary);
    color: var(--lls-foreground);
}

.lls-quick-links a svg {
    width: 1rem;
    height: 1rem;
}

/* ==========================================
   PREMIUM CONTENT (Blur)
   ========================================== */
.lls-premium-content {
    position: relative;
    margin: 1.5rem 0;
}

.lls-teaser-content {
    margin-bottom: 0;
}

.lls-blurred-wrapper {
    position: relative;
    margin-top: 2rem;
}

.lls-gradient-overlay {
    position: absolute;
    inset: -5rem 0 auto 0;
    height: 5rem;
    background: linear-gradient(to bottom, transparent, var(--lls-background));
    pointer-events: none;
    z-index: 1;
}

.lls-blurred-content {
    user-select: none;
    pointer-events: none;
    opacity: 0.6;
    -webkit-filter: blur(8px);
    filter: blur(8px);
}

.lls-cta-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.lls-cta-card {
    width: 100%;
    max-width: 28rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(229, 229, 229, 0.5);
    border-radius: var(--lls-radius);
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
}

.lls-cta-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(23, 23, 23, 0.1);
    border-radius: 50%;
}

.lls-cta-icon svg {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--lls-primary);
}

.lls-cta-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lls-foreground);
    margin: 0 0 0.5rem;
}

.lls-cta-description {
    font-size: 0.875rem;
    color: var(--lls-muted-foreground);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.lls-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    background: var(--lls-primary);
    color: var(--lls-primary-foreground);
    border: none;
    border-radius: var(--lls-radius);
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.lls-cta-button:hover {
    opacity: 0.9;
}

.lls-cta-login-link {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--lls-muted-foreground);
}

.lls-cta-login-link a {
    color: var(--lls-primary);
    text-decoration: none;
}

.lls-cta-login-link a:hover {
    text-decoration: underline;
}

/* No blur variant */
.lls-blurred-wrapper.lls-no-blur {
    min-height: 200px;
    background: var(--lls-secondary);
    border-radius: var(--lls-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lls-no-blur .lls-cta-overlay {
    position: relative;
}

.lls-no-blur .lls-gradient-overlay,
.lls-no-blur .lls-blurred-content {
    display: none;
}

/* ==========================================
   CHECKOUT RETURN PAGE
   ========================================== */
.lls-checkout-return-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.lls-checkout-return-card {
    max-width: 28rem;
    width: 100%;
    padding: 3rem 2rem;
    background: var(--lls-card);
    border: 1px solid var(--lls-border);
    border-radius: var(--lls-radius);
    text-align: center;
}

.lls-spinner {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1.5rem;
    border: 3px solid var(--lls-border);
    border-top-color: var(--lls-primary);
    border-radius: 50%;
    animation: lls-spin 1s linear infinite;
}

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

.lls-checkout-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.lls-checkout-icon svg {
    width: 2rem;
    height: 2rem;
}

.lls-checkout-icon.success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--lls-success);
}

.lls-checkout-icon.pending {
    background: rgba(234, 179, 8, 0.1);
    color: var(--lls-warning);
}

.lls-checkout-icon.error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--lls-destructive);
}

.lls-checkout-return-card h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--lls-foreground);
    margin: 0 0 0.5rem;
}

.lls-checkout-return-card p {
    font-size: 0.875rem;
    color: var(--lls-muted-foreground);
    margin: 0;
}

.lls-checkout-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* ==========================================
   MESSAGE CARDS
   ========================================== */
.lls-message-page {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.lls-message-card {
    max-width: 26rem;
    width: 100%;
    padding: 3rem 2rem;
    background: var(--lls-card);
    border: 1px solid var(--lls-border);
    border-radius: var(--lls-radius);
    text-align: center;
    box-shadow: var(--lls-shadow);
}

.lls-message-icon {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lls-secondary);
    border-radius: 50%;
    color: var(--lls-primary);
}

.lls-message-icon svg {
    width: 2.5rem;
    height: 2.5rem;
}

.lls-message-icon.success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--lls-success);
}

.lls-message-icon.warning {
    background: rgba(234, 179, 8, 0.1);
    color: var(--lls-warning);
}

.lls-message-icon.error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--lls-destructive);
}

.lls-message-card h2 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--lls-foreground);
    margin: 0 0 0.75rem;
}

.lls-message-card p {
    font-size: 0.9375rem;
    color: var(--lls-muted-foreground);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}