/**
 * Landing Page Generator - Styles
 * 
 * This stylesheet contains styles for the Landing Page Generator shortcode.
 * Matching the design from Facebook Ads Content Generator.
 */

/* Import Google Font */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* ===== TEXTAREA STYLES ===== */

/* Textarea styles when user starts typing (has content) */
textarea:not(:placeholder-shown) {
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--border)) !important;
}

/* Textarea styles when focused */
textarea:focus {
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--primary)) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2) !important;
}

/* Textarea styles when focused and has content */
textarea:focus:not(:placeholder-shown) {
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--primary)) !important;
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.25) !important;
}

/* Smooth transition for all textarea changes */
textarea {
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    color: #ffffff !important;
}

/* Ensure text color is white when typing */
textarea::placeholder {
    color: hsl(var(--muted-foreground)) !important;
}

/* Return to original background when empty and not focused */
textarea:placeholder-shown:not(:focus) {
    background-color: hsl(var(--muted) / 0.5) !important;
    border: 1px solid hsl(var(--border)) !important;
}

/* ===== INPUT TEXT STYLES ===== */

/* Input text styles when user starts typing (has content) */
input[type="text"]:not(:placeholder-shown),
input[type="url"]:not(:placeholder-shown),
input[type="email"]:not(:placeholder-shown),
input[type="tel"]:not(:placeholder-shown) {
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--border)) !important;
}

/* Input text styles when focused */
input[type="text"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus {
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--primary)) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2) !important;
}

/* Input text styles when focused and has content */
input[type="text"]:focus:not(:placeholder-shown),
input[type="url"]:focus:not(:placeholder-shown),
input[type="email"]:focus:not(:placeholder-shown),
input[type="tel"]:focus:not(:placeholder-shown) {
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--primary)) !important;
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.25) !important;
}

/* Smooth transition for all input text changes */
input[type="text"],
input[type="url"],
input[type="email"],
input[type="tel"] {
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    color: #ffffff !important;
}

/* Ensure text color is white when typing */
input[type="text"]::placeholder,
input[type="url"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder {
    color: hsl(var(--muted-foreground)) !important;
}

/* Return to original background when empty and not focused */
input[type="text"]:placeholder-shown:not(:focus),
input[type="url"]:placeholder-shown:not(:focus),
input[type="email"]:placeholder-shown:not(:focus),
input[type="tel"]:placeholder-shown:not(:focus) {
    background-color: hsl(var(--muted) / 0.5) !important;
    border: 1px solid hsl(var(--border)) !important;
}

/* ===== SELECT STYLES ===== */

select {
    background-color: hsl(var(--muted) / 0.5) !important;
    border: 1px solid hsl(var(--border)) !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

select:focus {
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--primary)) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2) !important;
}

/* ===== PAGE TYPE SELECTOR ===== */

.bc-page-type-section {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    padding: 1.75rem;
    background: linear-gradient(135deg, hsl(var(--card)), hsl(300 76% 60% / 0.06));
    border: 1px solid hsl(var(--primary) / 0.35);
    box-shadow: 0 0 0 1px hsl(var(--primary) / 0.1), 0 8px 32px hsl(var(--primary) / 0.12);
}

.bc-page-type-section::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, hsl(var(--primary) / 0.04), transparent 60%);
    pointer-events: none;
}

.bc-page-type-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1.5rem;
}

.bc-page-type-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: linear-gradient(135deg, hsl(var(--primary) / 0.25), hsl(var(--primary) / 0.1));
    color: hsl(var(--primary));
    flex-shrink: 0;
}

.bc-page-type-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    margin: 0 0 0.2rem 0;
    line-height: 1.3;
}

.bc-page-type-subtitle {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
    line-height: 1.4;
}

/* Hide native radio */
.bc-page-type-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.bc-page-type-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

@media (max-width: 580px) {
    .bc-page-type-options {
        grid-template-columns: 1fr;
    }
}

.bc-page-type-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1.25rem 1rem;
    background: hsl(var(--card));
    border: 1.5px solid hsl(var(--border));
    border-radius: 0.875rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    overflow: hidden;
    user-select: none;
}

.bc-page-type-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, hsl(var(--primary) / 0.06), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.bc-page-type-card:hover {
    border-color: hsl(var(--primary) / 0.45);
    background: hsl(var(--muted) / 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px hsl(var(--primary) / 0.08);
}

.bc-page-type-card:hover::after {
    opacity: 1;
}

.bc-page-type-card.is-selected {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.07);
    box-shadow: 0 0 0 1px hsl(var(--primary) / 0.25), 0 6px 20px hsl(var(--primary) / 0.15);
    transform: translateY(-1px);
}

.bc-page-type-card.is-selected::after {
    opacity: 1;
}

/* Custom radio indicator (top-right circle with checkmark) */
.bc-page-type-card-indicator {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    border: 1.5px solid hsl(var(--border));
    background: hsl(var(--muted) / 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: transparent;
}

.bc-page-type-card.is-selected .bc-page-type-card-indicator {
    background: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.2);
}

.bc-page-type-card-icon {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.bc-page-type-card-body {
    flex: 1;
    min-width: 0;
    padding-right: 1.5rem; /* space for indicator */
}

.bc-page-type-card-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    margin-bottom: 0.35rem;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.bc-page-type-card.is-selected .bc-page-type-card-name {
    color: hsl(var(--primary));
}

.bc-page-type-card-desc {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.45;
}

/* ===== TOAST NOTIFICATIONS ===== */

.sales-octopus-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    min-width: 300px;
    max-width: 500px;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInRight 0.3s ease-out;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.sales-octopus-notification--success {
    background-color: hsl(142, 76%, 36%);
    color: #ffffff;
    border-left: 4px solid hsl(142, 76%, 50%);
}

.sales-octopus-notification--error {
    background-color: hsl(0, 84%, 60%);
    color: #ffffff;
    border-left: 4px solid hsl(0, 84%, 70%);
}

.sales-octopus-notification-icon {
    font-size: 18px;
    font-weight: bold;
    flex-shrink: 0;
}

.sales-octopus-notification-text {
    flex: 1;
    color: inherit;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .sales-octopus-notification {
        top: 10px;
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
    }
}

/* CSS Variables - Scoped to Landing Page Container */
.flex-1,
.flex-1.p-6,
.flex-1.overflow-auto,
.flex-1.p-6.overflow-auto {
    --background: 240 15% 6%;
    --foreground: 210 40% 98%;
    --card: 240 15% 9%;
    --card-foreground: 210 40% 98%;
    --primary: 300 76% 60%;
    --primary-foreground: 240 15% 6%;
    --secondary: 240 20% 14%;
    --secondary-foreground: 210 40% 98%;
    --muted: 240 20% 12%;
    --muted-foreground: 215 20% 65%;
    --accent: 175 100% 50%;
    --accent-foreground: 240 15% 6%;
    --border: 240 20% 18%;
    --ring: 300 76% 60%;
    --radius: 0.75rem;
    --shadow-glow: 0 0 60px hsl(300 76% 60% / 0.3);
    --shadow-button: 0 10px 30px -10px hsl(300 76% 60% / 0.5);
    --destructive: 0 84% 60%;
}

/* Base Container Styles */
.flex-1.p-6.overflow-auto,
.flex-1.p-6 {
    flex: 1 1 0%;
    padding: 1.5rem;
    overflow: auto;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'DM Sans', system-ui, sans-serif;
    min-height: 100vh;
}

.max-w-4xl.mx-auto.space-y-6 {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

.max-w-4xl.mx-auto.space-y-6 > * + * {
    margin-top: 1.5rem;
}

/* Typography */
.text-center {
    text-align: center;
}

.mb-10 {
    margin-bottom: 2.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mt-1 {
    margin-top: 0.25rem;
}

.mt-6 {
    margin-top: 1.5rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}

.font-medium {
    font-weight: 500;
}

.text-foreground {
    color: hsl(var(--foreground));
}

.text-muted-foreground {
    color: hsl(var(--muted-foreground));
}

.text-primary {
    color: hsl(var(--primary));
}

.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* Flexbox Utilities */
.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

/* Spacing */
.space-y-2 > * + * {
    margin-top: 0.5rem;
}

.space-y-4 > * + * {
    margin-top: 1rem;
}

.space-y-6 > * + * {
    margin-top: 1.5rem;
}

.p-4 {
    padding: 1rem;
}

.p-6 {
    padding: 1.5rem;
}

.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Layout */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.overflow-hidden {
    overflow: hidden;
}

/* Sizing */
.h-4 {
    height: 1rem;
}

.h-5 {
    height: 1.25rem;
}

.h-10 {
    height: 2.5rem;
}

.h-11 {
    height: 2.75rem;
}

.w-1 {
    width: 0.25rem;
}

.w-4 {
    width: 1rem;
}

.w-5 {
    width: 1.25rem;
}

.w-6 {
    width: 1.5rem;
}

.w-10 {
    width: 2.5rem;
}

/* Border Radius */
.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.rounded-full {
    border-radius: 9999px;
}

/* Borders */
.border {
    border-width: 1px;
}

.border-border {
    border-color: hsl(var(--border));
}

.border-emerald-500\/30 {
    border-color: rgba(16, 185, 129, 0.3);
}

/* Backgrounds */
.bg-card {
    background-color: hsl(var(--card));
}

.bg-muted {
    background-color: hsl(var(--muted));
}

.bg-muted\/20 {
    background-color: hsl(var(--muted) / 0.2);
}

.bg-emerald-500\/10 {
    background-color: rgba(16, 185, 129, 0.1);
}

.bg-primary {
    background-color: hsl(var(--primary));
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-primary\/20 {
    --tw-gradient-from: hsl(var(--primary) / 0.2);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
}

.to-purple-500\/20 {
    --tw-gradient-to: rgba(168, 85, 247, 0.2);
}

.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.from-purple-500\/50 {
    --tw-gradient-from: rgba(168, 85, 247, 0.5);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
}

.to-purple-500\/0 {
    --tw-gradient-to: rgba(168, 85, 247, 0);
}

.from-accent\/50 {
    --tw-gradient-from: hsl(var(--accent) / 0.5);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
}

.to-accent\/0 {
    --tw-gradient-to: hsl(var(--accent) / 0);
}

.from-amber-500\/50 {
    --tw-gradient-from: rgba(245, 158, 11, 0.5);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent);
}

.to-amber-500\/0 {
    --tw-gradient-to: rgba(245, 158, 11, 0);
}

/* Card Styles */
.relative.rounded-xl.border.border-border.bg-card.overflow-hidden {
    position: relative;
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--card));
    overflow: hidden;
}

/* Gradient Bar on Left Side */
.absolute.left-0.top-0.bottom-0.w-1 {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.25rem;
}

/* Button Styles */
.inline-flex {
    display: inline-flex;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.rounded-lg {
    border-radius: 0.5rem;
}

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

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

.shadow-button {
    box-shadow: var(--shadow-button);
}

.hover\:shadow-glow:hover {
    box-shadow: var(--shadow-glow);
}

.h-11 {
    height: 2.75rem;
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.gap-2 {
    gap: 0.5rem;
}

.bg-primary {
    background-color: hsl(var(--primary));
}

.hover\:bg-primary\/90:hover {
    background-color: hsl(var(--primary) / 0.9);
}

.text-primary-foreground {
    color: hsl(var(--primary-foreground));
}

/* SVG Icon Styles */
.lucide {
    width: 1.25rem;
    height: 1.25rem;
}

/* Step Badge */
.px-3.py-1.rounded-md.bg-muted.text-muted-foreground.text-xs.font-mono {
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    background-color: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    font-size: 0.75rem;
    line-height: 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* Loading Spinner */
.sales-octopus-loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(139, 92, 246, 0.2);
    border-radius: 50%;
    border-top-color: hsl(var(--primary));
    animation: spin 1s ease-in-out infinite;
}

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

/* Form Input Styles */
.flex.h-10.rounded-md.border.px-3.py-2 {
    display: flex;
    height: 2.5rem;
    border-radius: 0.375rem;
    border: 1px solid;
    padding: 0.5rem 0.75rem;
}

/* Numbered List Styles */
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

ol li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.inline-flex.items-center.justify-center.w-6.h-6.rounded-full.bg-primary.text-primary-foreground.text-xs.font-bold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 700;
}

/* Landing Text Content Styles */
#landing-text {
    color: hsl(var(--foreground));
    line-height: 1.6;
}

#landing-text h1,
#landing-text h2,
#landing-text h3,
#landing-text h4,
#landing-text h5,
#landing-text h6 {
    color: hsl(var(--foreground));
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

#landing-text h1 {
    font-size: 2rem;
}

#landing-text h2 {
    font-size: 1.5rem;
}

#landing-text h3 {
    font-size: 1.25rem;
}

#landing-text p {
    margin-bottom: 1rem;
    color: hsl(var(--foreground));
}

#landing-text ul,
#landing-text ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

#landing-text li {
    margin-bottom: 0.5rem;
    color: hsl(var(--foreground));
}

#landing-text strong {
    font-weight: 700;
    color: hsl(var(--foreground));
}

#landing-text em {
    font-style: italic;
}

#landing-text a {
    color: hsl(var(--primary));
    text-decoration: underline;
}

#landing-text a:hover {
    color: hsl(var(--primary) / 0.8);
}

#landing-text blockquote {
    border-left: 4px solid hsl(var(--primary));
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: hsl(var(--muted-foreground));
}

#landing-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

#landing-text table th,
#landing-text table td {
    border: 1px solid hsl(var(--border));
    padding: 0.5rem;
    text-align: left;
}

#landing-text table th {
    background-color: hsl(var(--muted));
    font-weight: 600;
}

/* Generated landing content card (after generation) */
.bc-landing-content-card {
    margin-top: 20px !important;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 24px hsl(0 0% 0% / 0.08);
}

.bc-landing-content-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--muted) / 0.2);
}

.bc-landing-content-title {
    margin: 0 !important;
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    font-family: inherit;
}

.bc-landing-content-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.bc-landing-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    background: hsl(var(--muted) / 0.6);
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.bc-landing-action-btn:hover {
    background: hsl(var(--muted) / 0.9);
    border-color: hsl(var(--primary) / 0.5);
}

.bc-landing-action-btn:active {
    transform: scale(0.98);
}

.bc-landing-action-btn .bc-landing-action-icon {
    font-size: 1rem;
}

.bc-landing-content-card .bc-landing-text {
    padding: 1.5rem 1.75rem;
    max-width: 52rem;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.75;
    color: hsl(var(--foreground));
}

.bc-landing-content-card .bc-landing-text h1,
.bc-landing-content-card .bc-landing-text h2,
.bc-landing-content-card .bc-landing-text h3,
.bc-landing-content-card .bc-landing-text h4,
.bc-landing-content-card .bc-landing-text h5,
.bc-landing-content-card .bc-landing-text h6 {
    color: hsl(var(--foreground));
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.bc-landing-content-card .bc-landing-text h1 { font-size: 1.75rem; }
.bc-landing-content-card .bc-landing-text h2 { font-size: 1.5rem; }
.bc-landing-content-card .bc-landing-text h3 { font-size: 1.25rem; }

.bc-landing-content-card .bc-landing-text p {
    margin-bottom: 1rem;
    color: hsl(var(--muted-foreground));
}

.bc-landing-content-card .bc-landing-text p:first-child {
    margin-top: 0;
}

.bc-landing-content-card .bc-landing-text strong {
    font-weight: 700;
    color: hsl(var(--foreground));
}

.bc-landing-content-card .bc-landing-text a {
    color: hsl(var(--primary));
    text-decoration: underline;
}

.bc-landing-content-card .bc-landing-text ul,
.bc-landing-content-card .bc-landing-text ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.bc-landing-content-card .bc-landing-text li {
    margin-bottom: 0.35rem;
    color: hsl(var(--muted-foreground));
}

.bc-landing-content-card .bc-landing-text blockquote {
    border-left: 4px solid hsl(var(--primary));
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: hsl(var(--muted-foreground));
}

@media print {
    body * {
        visibility: hidden;
    }
    #bc-landing-print-area,
    #bc-landing-print-area * {
        visibility: visible;
    }
    #bc-landing-print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: #fff;
        color: #111;
        box-shadow: none;
        border: none;
    }
    .bc-landing-content-header {
        display: none;
    }
    .bc-landing-print-area .bc-landing-text,
    #bc-landing-print-area .bc-landing-text {
        padding: 1rem 0;
        color: #111;
    }
    #bc-landing-print-area .bc-landing-text p,
    #bc-landing-print-area .bc-landing-text li {
        color: #111;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .flex-1.p-6 {
        padding: 1rem;
    }
    
    .text-2xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    
    .text-lg {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    
    .px-6 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .p-6 {
        padding: 1rem;
    }
}

/* Accessibility */
.focus-visible\:outline-none:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus-visible\:ring-2:focus-visible {
    box-shadow: 0 0 0 2px hsl(var(--ring));
}

.focus-visible\:ring-ring:focus-visible {
    box-shadow: 0 0 0 2px hsl(var(--ring));
}

.focus-visible\:ring-offset-2:focus-visible {
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

/* Disabled States */
.disabled\:pointer-events-none:disabled {
    pointer-events: none;
}

.disabled\:opacity-50:disabled {
    opacity: 0.5;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== SECTION HEADER: ONE COLUMN, ICON CENTERED TO HEADLINE ===== */

/* Single column: header content is a block (title row + description below) */
.bc-section-header-content {
    display: block;
    flex: 1;
    min-width: 0;
}

/* Title row: icon + headline on one line, vertical-align middle for true optical center */
.bc-section-title-row {
    display: block;
    line-height: 1.75rem;
}

.bc-section-title-row .bc-section-icon,
.bc-section-title-row svg {
    display: inline-block;
    vertical-align: middle;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    margin-right: 0.75rem;
    padding: 0;
}

.bc-section-title-row h3,
.bc-section-title-row h4 {
    display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    line-height: inherit;
}

/* Description sits below the title row in the same column */
.bc-section-header-content > p {
    margin-top: 0.25rem;
    margin-bottom: 0;
}

/* Success box (e.g. "Business data found") - one column, icon centered to headline */
.bc-success-box-content {
    display: block;
}

.bc-success-box-content .bc-section-title-row {
    display: block;
    line-height: 1.75rem;
}

.bc-success-box-content .bc-section-title-row svg {
    display: inline-block;
    vertical-align: middle;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    margin-right: 0.75rem;
    padding: 0;
}

.bc-success-box-content > p {
    margin-top: 0.25rem;
    margin-bottom: 0;
}

/* ===== FIX 2: EDIT BUTTON STYLING ===== */

.bc-edit-business-data {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    background-color: hsl(var(--muted));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
    cursor: pointer;
    margin-top: 0.75rem;
}

.bc-edit-business-data:hover {
    background-color: hsl(var(--secondary));
    border-color: hsl(var(--primary) / 0.5);
    transform: translateY(-1px);
}

.bc-edit-business-data:active {
    transform: translateY(0);
}

/* ===== FIX 3: REGENERATE WITH AI BUTTON STYLING (PINK, ALL STATES) ===== */

.bc-regenerate-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: hsl(var(--muted) / 0.2);
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border));
}

/* Override any .bc-btn--secondary so Regenerate never turns black */
#regenerate-business-data,
button#regenerate-business-data,
.bc-btn#regenerate-business-data,
.bc-btn--secondary#regenerate-business-data {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem !important;
    min-height: 2.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #ec4899, #f472b6) !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
}

#regenerate-business-data:hover,
button#regenerate-business-data:hover,
.bc-btn#regenerate-business-data:hover,
.bc-btn--secondary#regenerate-business-data:hover {
    background: linear-gradient(135deg, #db2777, #ec4899) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
}

#regenerate-business-data:active,
button#regenerate-business-data:active,
.bc-btn#regenerate-business-data:active,
.bc-btn--secondary#regenerate-business-data:active {
    background: linear-gradient(135deg, #be185d, #db2777) !important;
    color: #ffffff !important;
    transform: translateY(0);
}

#regenerate-business-data:disabled,
button#regenerate-business-data:disabled,
.bc-btn#regenerate-business-data:disabled {
    background: linear-gradient(135deg, #ec4899, #f472b6) !important;
    color: #ffffff !important;
    opacity: 0.8;
    cursor: wait !important;
    transform: none;
}

#regenerate-business-data .bc-icon {
    font-size: 1.125rem;
}

#regenerate-business-data .bc-loading-spinner {
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 1s linear infinite;
    margin: 0 !important;
    vertical-align: middle;
}

.bc-regenerate-info {
    margin-top: 0.75rem;
}

.bc-regenerate-info p {
    margin: 0;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.5;
}

/* ===== FIX 4: SAVE AND CANCEL BUTTON STYLING ===== */

.bc-save-business-data,
.bc-cancel-business-data {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    margin-right: 0.5rem;
    margin-top: 0.75rem;
}

.bc-save-business-data {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.bc-save-business-data:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.bc-save-business-data:active {
    transform: translateY(0);
}

.bc-save-business-data:disabled {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    opacity: 0.85;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.bc-save-business-data .bc-loading-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 1s linear infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.bc-cancel-business-data {
    background-color: hsl(var(--muted));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
}

.bc-cancel-business-data:hover {
    background-color: hsl(var(--secondary));
    border-color: hsl(var(--border));
    transform: translateY(-1px);
}

.bc-cancel-business-data:active {
    transform: translateY(0);
}

/* ===== FIX 5: TEXTAREA FOCUS BORDER - ROUNDED AND THINNER ===== */

/* Override the intrusive purple border with a more subtle one */
textarea:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus {
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--primary)) !important;
    border-radius: 0.5rem !important;
    outline: none !important;
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2) !important;
}

/* When textarea/input has content and is focused */
textarea:focus:not(:placeholder-shown),
input[type="text"]:focus:not(:placeholder-shown),
input[type="url"]:focus:not(:placeholder-shown),
input[type="email"]:focus:not(:placeholder-shown),
input[type="tel"]:focus:not(:placeholder-shown) {
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--primary)) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2) !important;
}

/* Business data input fields */
.bc-business-data-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: hsl(var(--muted) / 0.5) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0.5rem !important;
    color: hsl(var(--foreground)) !important;
    font-size: 0.875rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.bc-business-data-input:focus {
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--primary)) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2) !important;
    outline: none !important;
}

/* Edit form container */
.bc-edit-form {
    margin-top: 1rem;
    padding: 1rem;
    background-color: hsl(var(--muted) / 0.2);
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border));
}

/* Hint under list textareas: each new line = one list item */
.bc-list-format-hint {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    margin: 0.5rem 0 0.75rem 0;
}

/* Business data field container */
.bc-business-data-field {
    background-color: hsl(var(--muted) / 0.2);
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.bc-business-data-field:hover {
    border-color: hsl(var(--primary) / 0.3);
    background-color: hsl(var(--muted) / 0.3);
}

/* Data label styling – każdy label z pionową linią (pomarańczowy akcent) */
.bc-data-label {
    font-weight: 600;
    color: hsl(var(--foreground)) !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    border-radius: 0 0 0 4px;
}

/* Data value styling */
.bc-data-value {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background-color: hsl(var(--card));
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--border));
}

/* Sekcja podglądu danych: input i pole wartości jak na screenie (ciemne tło, biały tekst) */
#data-review-content .bc-field-container .bc-data-value.bc-field-value,
#data-review-content .bc-field-container .bc-field-input {
    color: hsl(var(--foreground)) !important;
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}
#data-review-content .bc-field-container .bc-field-input:focus {
    background-color: hsl(var(--card)) !important;
    border-color: hsl(var(--primary)) !important;
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2) !important;
    color: hsl(var(--foreground)) !important;
}
#data-review-content .bc-field-container .bc-field-input::placeholder {
    color: hsl(var(--muted-foreground)) !important;
}

/* Wszystkie pola biznesowe (VSL, inne): ten sam wygląd inputów */
.bc-business-data-field .bc-field-container .bc-data-value.bc-field-value,
.bc-business-data-field .bc-field-container .bc-field-input,
.bc-business-data-field .bc-business-data-input {
    color: hsl(var(--foreground)) !important;
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}
.bc-business-data-field .bc-field-container .bc-field-input:focus,
.bc-business-data-field .bc-business-data-input:focus {
    background-color: hsl(var(--card)) !important;
    border-color: hsl(var(--primary)) !important;
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2) !important;
    color: hsl(var(--foreground)) !important;
}
.bc-business-data-field .bc-field-container .bc-field-input::placeholder,
.bc-business-data-field .bc-business-data-input::placeholder {
    color: hsl(var(--muted-foreground)) !important;
}

/* List display inside .bc-data-value (each item as list item) */
.bc-data-value .bc-data-list {
    list-style: disc;
    margin: 0 0 0 1.25rem;
    padding: 0;
}
.bc-data-value .bc-data-list li {
    margin-bottom: 0.35rem;
}
.bc-data-value .bc-data-list li:last-child {
    margin-bottom: 0;
}

/* Form group styling for pricing and optional sections */
.bc-form-group {
    margin-bottom: 1.5rem;
}

.bc-form-group:last-child {
    margin-bottom: 0;
}

.bc-form-group label {
    display: block;
    font-weight: 600;
    color: hsl(var(--foreground)) !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.bc-form-group input,
.bc-form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: hsl(var(--muted) / 0.5) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0.5rem !important;
    color: hsl(var(--foreground)) !important;
    font-size: 0.875rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.bc-form-group input:focus,
.bc-form-group textarea:focus {
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--primary)) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2) !important;
    outline: none !important;
}

.bc-form-group textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

.bc-form-help {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.5rem;
    font-style: italic;
    line-height: 1.4;
}

/* ===== AI ANALYZING LOADING BLOCK – MATCHES LANDING PAGE STYLE ===== */

.bc-data-review-loading {
    position: relative;
    width: 100%;
    margin: 1.5rem 0;
    scroll-margin-top: 2rem;
}

.bc-data-review-loading-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px hsl(var(--primary) / 0.1);
}

.bc-data-review-loading-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, hsl(var(--primary)), #ec4899);
    border-radius: 4px 0 0 4px;
}

.bc-data-review-loading-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.75rem 1.75rem 1.75rem 1.5rem;
}

.bc-data-review-loading-spinner {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border: 3px solid hsl(var(--border));
    border-top-color: hsl(var(--primary));
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

.bc-data-review-loading-content {
    flex: 1;
    min-width: 0;
}

.bc-data-review-loading-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    line-height: 1.4;
}

.bc-data-review-loading-subtitle {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.35rem;
    line-height: 1.4;
}

/* ===== PROGRESS SECTION – GENERATION STATUS ===== */

.bc-progress-section {
    margin: 2rem 0;
    animation: fadeIn 0.4s ease-out;
}

.bc-progress-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.bc-progress-card-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, hsl(var(--primary)), #ec4899);
    border-radius: 4px 0 0 4px;
}

.bc-progress-card-inner {
    padding: 2rem 2rem 2rem 1.75rem;
}

.bc-progress-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.bc-progress-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, hsl(var(--primary) / 0.2), hsl(var(--primary) / 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--primary));
}

.bc-progress-icon svg {
    width: 24px;
    height: 24px;
}

.bc-progress-title-group {
    flex: 1;
    min-width: 0;
}

.bc-progress-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    margin: 0 0 0.25rem 0;
    line-height: 1.4;
}

.bc-progress-subtitle {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
    line-height: 1.4;
}

.bc-progress-bar-wrapper {
    margin: 1.5rem 0;
}

.bc-progress-bar {
    width: 100%;
    height: 12px;
    background: hsl(var(--muted) / 0.3);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}

.bc-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, hsl(var(--primary)), #ec4899);
    border-radius: 9999px;
    transition: width 0.5s ease;
    position: relative;
}

.bc-progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.bc-progress-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
}

.bc-progress-percent,
.bc-progress-time {
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.bc-progress-animation {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.bc-dots {
    display: flex;
    gap: 0.5rem;
}

.bc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: hsl(var(--primary));
    animation: pulse 1.5s ease-in-out infinite;
}

.bc-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.bc-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* ===== DETAILED PROCESSING INFO ===== */

.bc-detailed-processing-info {
    margin-top: 2rem;
}

.bc-processing-info-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.bc-processing-info-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #10b981, #059669);
    border-radius: 4px 0 0 4px;
}

.bc-processing-info-inner {
    padding: 2rem 2rem 2rem 1.75rem;
    text-align: center;
}

.bc-processing-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, hsl(var(--primary) / 0.2), hsl(var(--primary) / 0.05));
    margin-bottom: 1.5rem;
}

.bc-processing-icon-svg {
    width: 48px;
    height: 48px;
    color: hsl(var(--primary));
    animation: rotate 3s linear infinite;
}

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

.bc-processing-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.bc-processing-message {
    font-size: 1rem;
    color: hsl(var(--muted-foreground));
    margin: 0 0 2rem 0;
    line-height: 1.6;
}

.bc-processing-details-box {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
}

.bc-processing-detail-item {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: hsl(var(--muted) / 0.2);
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border));
}

.bc-detail-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border-radius: 0.5rem;
    background: hsl(var(--card));
}

.bc-detail-content {
    flex: 1;
    min-width: 0;
}

.bc-detail-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bc-detail-text {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

.bc-detail-note {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
    font-style: italic;
    line-height: 1.4;
}

.bc-email-highlight {
    color: hsl(var(--primary));
    font-weight: 600;
}

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

/* ===== GENERAL LOADING SPINNER (FOR BUTTONS) ===== */

.bc-loading-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 1s linear infinite;
    vertical-align: middle;
}

/* ===== MAIN LOADING SECTION (AFTER CLICKING GENERATE) ===== */

.bc-landing-generation-loading {
    margin: 2rem 0;
    animation: fadeIn 0.5s ease-out;
}

.bc-loading-main-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px hsl(var(--primary) / 0.1);
    max-width: 600px;
    margin: 0 auto;
}

.bc-loading-main-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, hsl(var(--primary)), #ec4899);
    border-radius: 4px 0 0 4px;
}

.bc-loading-main-inner {
    padding: 3rem 2rem;
    text-align: center;
}

.bc-loading-main-spinner-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.bc-loading-main-spinner {
    width: 64px;
    height: 64px;
    border: 4px solid hsl(var(--border));
    border-top-color: hsl(var(--primary));
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.bc-loading-main-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.bc-loading-main-subtitle {
    font-size: 1rem;
    color: hsl(var(--muted-foreground));
    margin: 0 0 1rem 0;
    line-height: 1.6;
}

.bc-loading-main-time-info {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
    line-height: 1.5;
    font-style: italic;
}

.bc-loading-main-actions {
    margin: 1.5rem 0 0 0;
}

/* Stop generation button – clean look with hover and active states */
.bc-loading-main-actions .bc-btn-stop-generation,
#stop-landing-generation.bc-btn-stop-generation,
#stop-vsl-generation.bc-btn-stop-generation {
    min-width: 10rem;
    background: hsl(var(--muted) / 0.6) !important;
    border: 1px solid hsl(var(--border)) !important;
    color: hsl(var(--foreground)) !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.bc-loading-main-actions .bc-btn-stop-generation:hover,
#stop-landing-generation.bc-btn-stop-generation:hover,
#stop-vsl-generation.bc-btn-stop-generation:hover {
    background: hsl(var(--muted) / 0.85) !important;
    border-color: hsl(var(--primary) / 0.5) !important;
    color: hsl(var(--foreground)) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px hsl(0 0% 0% / 0.25) !important;
}

.bc-loading-main-actions .bc-btn-stop-generation:focus-visible,
#stop-landing-generation.bc-btn-stop-generation:focus-visible,
#stop-vsl-generation.bc-btn-stop-generation:focus-visible {
    outline: none !important;
    border-color: hsl(var(--primary)) !important;
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.35) !important;
}

.bc-loading-main-actions .bc-btn-stop-generation:active,
#stop-landing-generation.bc-btn-stop-generation:active,
#stop-vsl-generation.bc-btn-stop-generation:active {
    background: hsl(var(--muted) / 0.75) !important;
    transform: translateY(0);
    box-shadow: 0 2px 6px hsl(0 0% 0% / 0.2) !important;
}

.bc-loading-main-actions .bc-btn-stop-generation:disabled,
#stop-landing-generation.bc-btn-stop-generation:disabled,
#stop-vsl-generation.bc-btn-stop-generation:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.bc-loading-main-info {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem;
    background: hsl(var(--muted) / 0.2);
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border));
    text-align: left;
}

.bc-loading-info-icon {
    flex-shrink: 0;
    color: hsl(var(--primary));
    margin-top: 0.125rem;
}

.bc-loading-main-info span {
    flex: 1;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.5;
}

/* Facebook Graphics – 1:1 landing page style (data review block) */
.bc-facebook-graphics-wrap {
    width: 100% !important;
    min-width: 100% !important;
    flex: none !important;
    box-sizing: border-box;
}
.bc-facebook-graphics-wrap .bc-section-header {
    background: transparent;
    border-bottom: none;
    padding: 0 0 1rem 0;
    margin-bottom: 1rem;
}
.bc-facebook-graphics-wrap .bc-section-header h3 {
    color: hsl(var(--foreground));
    font-size: 1.125rem;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
.bc-facebook-graphics-wrap .bc-section-header h3[data-step]::before {
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    border: 1px solid hsl(var(--border));
}
.bc-facebook-graphics-wrap .bc-section-header p {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
}
.bc-facebook-graphics-wrap .bc-section-content {
    padding: 0;
}
.bc-facebook-graphics-wrap .bc-btn.bc-btn--primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}
.bc-facebook-graphics-wrap .bc-btn.bc-btn--primary:hover {
    background-color: hsl(var(--primary) / 0.9);
}
/* Business data fields – same as landing data review */
.bc-facebook-graphics-wrap .bc-business-data-field.bc-analysis-item {
    background-color: hsl(var(--muted) / 0.2);
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}
.bc-facebook-graphics-wrap .bc-business-data-field:hover {
    border-color: hsl(var(--primary) / 0.3);
    background-color: hsl(var(--muted) / 0.3);
}
/* Label row: pion liniowy jak w Facebook Ads (osobny div .w-1.h-4.bg-primary.rounded-full) */
.bc-facebook-graphics-wrap .flex.items-center.gap-2.mb-2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.bc-facebook-graphics-wrap .w-1.h-4.bg-primary.rounded-full {
    width: 0.25rem;
    height: 1rem;
    background-color: hsl(var(--primary));
    border-radius: 9999px;
    flex-shrink: 0;
}
.bc-facebook-graphics-wrap .bc-data-label {
    font-weight: 600;
    color: hsl(var(--foreground)) !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
.bc-facebook-graphics-wrap .bc-data-value {
    color: hsl(var(--muted-foreground)) !important;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background-color: hsl(var(--card));
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--border));
    cursor: pointer;
}
.bc-facebook-graphics-wrap .bc-data-value .bc-data-list {
    list-style: disc;
    margin: 0 0 0 1.25rem;
    padding: 0;
    color: hsl(var(--muted-foreground)) !important;
}
.bc-facebook-graphics-wrap .bc-data-value .bc-data-list li {
    margin-bottom: 0.35rem;
}
/* List-type value: comma-separated text in one block, magenta border + glow (1:1 with design) */
.bc-facebook-graphics-wrap .bc-data-value--list,
.bc-facebook-graphics-wrap .bc-data-value.bc-data-value--list {
    border: 1px solid hsl(var(--primary)) !important;
    box-shadow: 0 0 0 1px hsl(var(--primary) / 0.15), inset 0 0 20px hsl(var(--primary) / 0.06) !important;
    color: hsl(var(--muted-foreground)) !important;
    line-height: 1.6;
}
.bc-facebook-graphics-wrap .bc-field-container {
    display: block;
    position: relative;
}
/* Pole wartości i input – jak na screenie / Facebook Ads (ciemne tło, subtelna obwódka) */
/* Pola jak w shortcode generate_facebook_add_content: hsl(var(--card)), hsl(var(--border)), hsl(var(--foreground)) */
.bc-facebook-graphics-wrap .bc-field-container .bc-data-value.bc-field-value {
    display: block;
    margin: 0;
    padding: 0.5rem 0.75rem;
    min-height: 2.5rem;
    box-sizing: border-box;
    color: hsl(var(--foreground)) !important;
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0.5rem !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 0.875rem;
}
.bc-facebook-graphics-wrap .bc-field-container .bc-field-input {
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.75rem;
    min-height: 2.5rem;
    box-sizing: border-box;
}
.bc-facebook-graphics-wrap .bc-edit-business-data,
.bc-facebook-graphics-wrap .bc-save-business-data,
.bc-facebook-graphics-wrap .bc-cancel-business-data {
    margin-top: 0.5rem;
    margin-right: 0.5rem;
}
.bc-facebook-graphics-wrap #save-business-data {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}
.bc-facebook-graphics-wrap #save-business-data:hover {
    background-color: hsl(var(--primary) / 0.9) !important;
}
/* Input – 1:1 z generate_facebook_add_content (bg-card, border-border, text-foreground, focus: primary) */
.bc-facebook-graphics-wrap .bc-business-data-input,
.bc-facebook-graphics-wrap .bc-field-container .bc-field-input {
    color: hsl(var(--foreground)) !important;
    background-color: hsl(var(--card)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 0.875rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.bc-facebook-graphics-wrap .bc-business-data-input:focus,
.bc-facebook-graphics-wrap .bc-field-container .bc-field-input:focus {
    background-color: hsl(var(--card)) !important;
    border-color: hsl(var(--primary)) !important;
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2) !important;
    color: hsl(var(--foreground)) !important;
}
.bc-facebook-graphics-wrap .bc-field-container .bc-field-input::placeholder {
    color: hsl(var(--muted-foreground)) !important;
}
.bc-facebook-graphics-wrap .bc-analysis-header h4 {
    color: hsl(var(--foreground)) !important;
}
.bc-facebook-graphics-wrap .bc-regenerate-business-analysis,
.bc-facebook-graphics-wrap #regenerate-business-analysis {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--border));
}
.bc-facebook-graphics-wrap .bc-regenerate-business-analysis:hover,
.bc-facebook-graphics-wrap #regenerate-business-analysis:hover {
    background-color: hsl(var(--secondary)) !important;
    border-color: hsl(var(--primary) / 0.5);
}