/*
 * Social Caption Tool - page specific styles.
 * Scoped under .social-caption-tool so it never affects other pages.
 * Visual language mirrors product-demo.html (liquid glass, brand colors only).
 */

.social-caption-tool {
    /* Neerbei brand tokens (kept in sync with the product-demo palette) */
    --sct-ink: #212529;
    --sct-muted: rgba(33, 37, 41, .72);
    --sct-line: #dee2e6;
    --sct-soft: #f8f9fa;
    --sct-tint: #e9effe;
    --sct-action: #1e5af9;
    --sct-brand: #153fae;
    --sct-deep: #102b63;
    --sct-gold: #ffd700;
    --sct-radius: 18px;
    --sct-radius-lg: 26px;
    --sct-radius-pill: 999px;
    --sct-shadow: 0 28px 60px -28px rgba(16, 43, 99, .38);
    --sct-shadow-soft: 0 16px 34px -20px rgba(16, 43, 99, .28);
    --sct-shadow-glow: 0 0 0 1px rgba(21, 63, 174, .06), 0 24px 50px -24px rgba(30, 90, 249, .35);
    --sct-glass: rgba(255, 255, 255, .72);
    --sct-glass-strong: rgba(255, 255, 255, .9);
    --sct-glass-line: rgba(255, 255, 255, .65);
    --sct-blur: blur(16px) saturate(1.6);
    --sct-ease: cubic-bezier(.22, .61, .36, 1);

    /* Expose the same names used by the shared product-demo components
       so the reusable global classes (eyebrow, glass panels, ...) work here. */
    --product-demo-ink: var(--sct-ink);
    --product-demo-muted: var(--sct-muted);
    --product-demo-line: var(--sct-line);
    --product-demo-soft: var(--sct-soft);
    --product-demo-tint: var(--sct-tint);
    --product-demo-action: var(--sct-action);
    --product-demo-brand: var(--sct-brand);
    --product-demo-deep: var(--sct-deep);
    --product-demo-gold: var(--sct-gold);
    --product-demo-danger: #e62a4b;
    --product-demo-danger-deep: #ae1530;
    --product-demo-radius: var(--sct-radius);
    --product-demo-radius-lg: var(--sct-radius-lg);
    --product-demo-radius-pill: var(--sct-radius-pill);
    --product-demo-shadow: var(--sct-shadow);
    --product-demo-shadow-soft: var(--sct-shadow-soft);
    --product-demo-shadow-glow: var(--sct-shadow-glow);
    --product-demo-glass: var(--sct-glass);
    --product-demo-glass-strong: var(--sct-glass-strong);
    --product-demo-glass-line: var(--sct-glass-line);
    --product-demo-blur: var(--sct-blur);
    --product-demo-ease: var(--sct-ease);

    color: var(--sct-ink);
    background: #ffffff;
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.social-caption-tool .container {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------------
   Buttons (Neerbei CTAs, scoped to this page)
   ------------------------------------------------------------------ */
.social-caption-tool .btn {
    border-radius: var(--sct-radius);
    font-weight: 600;
    transition: transform .25s var(--sct-ease), box-shadow .25s var(--sct-ease),
    background-color .25s var(--sct-ease), border-color .25s var(--sct-ease), color .25s var(--sct-ease);
}

.social-caption-tool .btn:focus-visible {
    outline: 2px solid var(--sct-action);
    outline-offset: 2px;
}

.social-caption-tool .btn-primary {
    color: #ffffff;
    border: 0;
    background-image: linear-gradient(135deg, var(--sct-action), var(--sct-brand));
    box-shadow: 0 12px 26px -16px rgba(21, 63, 174, .85);
}

.social-caption-tool .btn-primary:hover,
.social-caption-tool .btn-primary:focus {
    color: #ffffff;
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 18px 34px -18px rgba(21, 63, 174, .9);
}

.social-caption-tool .btn-outline-primary {
    color: var(--sct-brand);
    border-color: rgba(21, 63, 174, .35);
    background: rgba(255, 255, 255, .6);
}

.social-caption-tool .btn-outline-primary:hover,
.social-caption-tool .btn-outline-primary:focus {
    color: #ffffff;
    background-image: linear-gradient(135deg, var(--sct-action), var(--sct-brand));
    border-color: transparent;
    transform: translateY(-1px);
}

.social-caption-tool .btn-lg {
    border-radius: var(--sct-radius);
}

/* ------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------ */
.social-caption-tool .sct-section {
    position: relative;
    padding: clamp(56px, 6vw, 96px) 0;
    background: rgba(255, 255, 255, .72);
    z-index: 1;
}

.social-caption-tool .sct-section .container {
    z-index: 1;
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
.social-caption-tool .sct-hero {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    padding: clamp(72px, 9vw, 128px) 0 clamp(56px, 6vw, 92px);
    background: linear-gradient(155deg, var(--sct-deep) 6%, var(--sct-brand) 72%, #0f2a78 100%);
}

.social-caption-tool .sct-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 90% at 85% 12%, rgba(30, 90, 249, .32), rgba(16, 43, 99, 0) 60%),
    radial-gradient(70% 60% at 5% 95%, rgba(21, 63, 174, .42), rgba(16, 43, 99, 0) 70%);
}

.social-caption-tool .sct-hero .container {
    z-index: 2;
}

.social-caption-tool .sct-kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.3rem;
    padding: .5rem 1rem;
    color: #ffffff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--sct-radius-pill);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.social-caption-tool .sct-hero h1 {
    max-width: 760px;
    margin-bottom: 1.2rem;
    font-size: clamp(2.1rem, 4.6vw, 3.3rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    text-shadow: 0 2px 24px rgba(16, 43, 99, .35);
}

.social-caption-tool .sct-hero-subtitle {
    max-width: 680px;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.65;
}

/* Trust row (reuses the shared product-demo-trust-list component) */
.social-caption-tool .product-demo-trust-list {
    margin-top: 2rem;
}

/* ------------------------------------------------------------------
   Tool panel (the AI form)
   ------------------------------------------------------------------ */
.social-caption-tool .sct-tool-panel {
    position: relative;
    height: 100%;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--sct-glass-line);
    border-radius: var(--sct-radius-lg);
    background: var(--sct-glass-strong);
    box-shadow: var(--sct-shadow);
    -webkit-backdrop-filter: var(--sct-blur);
    backdrop-filter: var(--sct-blur);
}

.social-caption-tool .sct-tool-panel::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 4px;
    border-radius: var(--sct-radius-lg) var(--sct-radius-lg) 0 0;
    background: linear-gradient(90deg, var(--sct-action), var(--sct-brand));
}

.social-caption-tool .sct-tool-panel > form > * + * {
    margin-top: 1.1rem;
}

.social-caption-tool .sct-field-label {
    display: block;
    margin-bottom: .45rem;
    color: var(--sct-ink);
    font-weight: 700;
    font-size: .95rem;
}

.social-caption-tool .sct-form-control,
.social-caption-tool .form-control {
    border-radius: 14px;
    border: 1px solid rgba(33, 37, 41, .14);
    background: #ffffff;
    color: var(--sct-ink);
    padding: .8rem 1rem;
    transition: border-color .2s var(--sct-ease), box-shadow .2s var(--sct-ease);
}

.social-caption-tool .sct-form-control:focus,
.social-caption-tool .form-control:focus {
    border-color: rgba(30, 90, 249, .55);
    box-shadow: 0 0 0 4px rgba(30, 90, 249, .15);
    background: #ffffff;
}

.social-caption-tool .sct-field-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .4rem;
    color: var(--sct-muted);
    font-size: .8rem;
}

.social-caption-tool .sct-counter {
    font-variant-numeric: tabular-nums;
}

.social-caption-tool .sct-counter.is-near-limit {
    color: var(--sct-brand);
    font-weight: 700;
}

/* Platform selection */
.social-caption-tool .sct-platform-legend {
    margin-bottom: .55rem;
    color: var(--sct-ink);
    font-weight: 700;
    font-size: .95rem;
}

.social-caption-tool .sct-platform-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.social-caption-tool .sct-platform-option {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 50px;
    padding: .6rem .8rem;
    border-radius: 14px;
    border: 1px solid rgba(33, 37, 41, .12);
    background: var(--sct-soft);
    cursor: pointer;
    user-select: none;
    transition: border-color .2s var(--sct-ease), background-color .2s var(--sct-ease),
    transform .2s var(--sct-ease), box-shadow .2s var(--sct-ease);
}

.social-caption-tool .sct-platform-option:hover {
    background: #ffffff;
    border-color: rgba(30, 90, 249, .4);
    transform: translateY(-1px);
    box-shadow: var(--sct-shadow-soft);
}

.social-caption-tool .sct-platform-option input {
    flex: 0 0 auto;
    accent-color: var(--sct-brand);
}

.social-caption-tool .sct-platform-option i {
    flex: 0 0 auto;
    width: 20px;
    font-size: 1.1rem;
    color: var(--sct-brand);
}

.social-caption-tool .sct-platform-option:has(input:checked) {
    background: var(--sct-tint);
    border-color: rgba(21, 63, 174, .45);
    box-shadow: 0 0 0 1px rgba(21, 63, 174, .12) inset;
}

.social-caption-tool .sct-platform-option:has(input:focus-visible) {
    outline: 2px solid var(--sct-action);
    outline-offset: 2px;
}

/* Submit row + inline error */
.social-caption-tool .sct-submit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5rem;
}

.social-caption-tool .sct-error {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .8rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(174, 21, 48, .25);
    background: rgba(230, 42, 75, .08);
    color: #9c1230;
    font-size: .95rem;
}

.social-caption-tool .sct-error[hidden] {
    display: none;
}

/* ------------------------------------------------------------------
   Neerbei side panel
   ------------------------------------------------------------------ */
.social-caption-tool .sct-neerbei-panel {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: var(--sct-radius-lg);
    color: #ffffff;
    background: linear-gradient(150deg, var(--sct-deep), var(--sct-brand));
    box-shadow: var(--sct-shadow);
}

.social-caption-tool .sct-neerbei-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 50% at 88% 8%, rgba(30, 90, 249, .42), rgba(16, 43, 99, 0) 65%),
    radial-gradient(50% 45% at 6% 100%, rgba(21, 63, 174, .5), rgba(16, 43, 99, 0) 70%);
    pointer-events: none;
}

.social-caption-tool .sct-neerbei-panel > * {
    position: relative;
    z-index: 1;
}

.social-caption-tool .sct-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1.1rem;
    padding: .35rem .8rem;
    border-radius: var(--sct-radius-pill);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.social-caption-tool .sct-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1.2rem;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 26px -16px rgba(3, 14, 36, .8);
}

.social-caption-tool .sct-logo-mark img {
    width: 32px;
    height: 32px;
}

.social-caption-tool .sct-neerbei-panel h2 {
    margin-bottom: .85rem;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.social-caption-tool .sct-neerbei-panel p {
    color: rgba(255, 255, 255, .86);
    line-height: 1.65;
}

.social-caption-tool .sct-neerbei-list {
    display: grid;
    gap: .75rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

.social-caption-tool .sct-neerbei-list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    color: rgba(255, 255, 255, .94);
    line-height: 1.5;
}

.social-caption-tool .sct-neerbei-list i {
    flex: 0 0 auto;
    margin-top: .15rem;
    color: #ffd700;
    font-size: 1.05rem;
}

.social-caption-tool .sct-neerbei-panel .btn-light {
    border-radius: var(--sct-radius);
    font-weight: 700;
}

.social-caption-tool .sct-neerbei-panel .btn-outline-light {
    border-radius: var(--sct-radius);
    border-color: rgba(255, 255, 255, .55);
}

/* ------------------------------------------------------------------
   Results section (loading / empty / results)
   ------------------------------------------------------------------ */
.social-caption-tool .sct-results-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.social-caption-tool .sct-results-title {
    margin: 0;
    color: var(--sct-ink);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -.015em;
}

.social-caption-tool .sct-results-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.social-caption-tool .sct-result-card {
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border: 1px solid var(--sct-glass-line);
    border-radius: var(--sct-radius-lg);
    background: var(--sct-glass-strong);
    box-shadow: var(--sct-shadow-soft);
    -webkit-backdrop-filter: var(--sct-blur);
    backdrop-filter: var(--sct-blur);
    transition: transform .3s var(--sct-ease), box-shadow .3s var(--sct-ease), border-color .3s var(--sct-ease);
}

.social-caption-tool .sct-result-card:hover {
    transform: translateY(-4px);
    border-color: rgba(30, 90, 249, .35);
    box-shadow: var(--sct-shadow-glow);
}

.social-caption-tool .sct-result-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
}

.social-caption-tool .sct-result-head i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sct-brand), var(--sct-deep));
    font-size: 1.05rem;
}

.social-caption-tool .sct-result-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sct-ink);
}

.social-caption-tool .sct-result-block {
    margin-bottom: .8rem;
}

.social-caption-tool .sct-result-block-label {
    display: block;
    margin-bottom: .35rem;
    color: var(--sct-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.social-caption-tool .sct-caption-box {
    border-radius: 14px;
    border: 1px solid rgba(33, 37, 41, .1);
    background: var(--sct-soft);
    padding: .9rem 1rem;
    color: var(--sct-ink);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.social-caption-tool .sct-hashtag-box {
    color: var(--sct-brand);
    font-weight: 600;
}

.social-caption-tool .sct-card-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: auto;
    padding-top: .4rem;
}

/* Loading skeleton */
.social-caption-tool .sct-loading-state,
.social-caption-tool .sct-empty-state {
    grid-column: 1 / -1;
}

.social-caption-tool .sct-skeleton {
    display: flex;
    flex-direction: column;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border: 1px solid var(--sct-glass-line);
    border-radius: var(--sct-radius-lg);
    background: var(--sct-glass-strong);
    box-shadow: var(--sct-shadow-soft);
}

.social-caption-tool .sct-skeleton-line {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(33, 37, 41, .07) 25%, rgba(33, 37, 41, .13) 37%, rgba(33, 37, 41, .07) 63%);
    background-size: 400% 100%;
    animation: sct-shimmer 1.4s ease-in-out infinite;
}

.social-caption-tool .sct-skeleton-title {
    width: 42%;
    height: 18px;
    margin-bottom: 1rem;
}

.social-caption-tool .sct-skeleton-text {
    width: 100%;
    height: 14px;
    margin-bottom: .55rem;
}

.social-caption-tool .sct-skeleton-text.short {
    width: 65%;
}

.social-caption-tool .sct-skeleton-actions {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
}

.social-caption-tool .sct-skeleton-actions .sct-skeleton-line {
    width: 92px;
    height: 32px;
    border-radius: var(--sct-radius);
}

@keyframes sct-shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

/* Hidden helper for the legacy clipboard fallback (created at runtime) */
.sct-copy-fallback {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    opacity: 0;
}

/* Subtle confirmation state for copy buttons */
.social-caption-tool .sct-card-toolbar .btn.is-copied {
    color: #ffffff;
    background-image: linear-gradient(135deg, var(--sct-action), var(--sct-brand));
    border-color: transparent;
}

/* ------------------------------------------------------------------
   Growth band
   ------------------------------------------------------------------ */
.social-caption-tool .sct-growth-band {
    background: rgba(248, 249, 250, .72);
    border-block-start: 1px solid rgba(33, 37, 41, .06);
}

.social-caption-tool .sct-growth-item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.4rem;
    height: 100%;
    border: 1px solid var(--sct-glass-line);
    border-radius: var(--sct-radius-lg);
    background: var(--sct-glass);
    box-shadow: var(--sct-shadow-soft);
    -webkit-backdrop-filter: var(--sct-blur);
    backdrop-filter: var(--sct-blur);
    transition: transform .3s var(--sct-ease), box-shadow .3s var(--sct-ease), border-color .3s var(--sct-ease);
}

.social-caption-tool .sct-growth-item:hover {
    transform: translateY(-4px);
    border-color: rgba(30, 90, 249, .3);
    box-shadow: var(--sct-shadow-glow);
}

.social-caption-tool .sct-growth-item i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--sct-action), var(--sct-brand));
    font-size: 1.15rem;
}

.social-caption-tool .sct-growth-item h3 {
    margin-bottom: .35rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sct-ink);
}

.social-caption-tool .sct-growth-item p {
    margin: 0;
    color: var(--sct-muted);
    line-height: 1.6;
}

/* ------------------------------------------------------------------
   Final CTA
   ------------------------------------------------------------------ */
.social-caption-tool .sct-final-cta {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    padding: clamp(64px, 7vw, 108px) 0;
    background: linear-gradient(180deg, var(--sct-deep), var(--sct-brand));
}

.social-caption-tool .sct-final-cta .container {
    z-index: 2;
}

.social-caption-tool .sct-final-inner {
    max-width: 760px;
    margin-inline: auto;
    text-align: center;
}

.social-caption-tool .sct-final-cta .product-demo-eyebrow {
    color: #e9effe;
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .25);
}

.social-caption-tool .sct-final-cta h2 {
    color: #ffffff;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
}

.social-caption-tool .sct-final-cta p {
    color: rgba(255, 255, 255, .9);
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .social-caption-tool .sct-results-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .social-caption-tool .sct-hero {
        padding-top: 56px;
    }

    .social-caption-tool .sct-tool-panel,
    .social-caption-tool .sct-neerbei-panel {
        padding: 1.25rem;
    }

    .social-caption-tool .sct-platform-grid {
        grid-template-columns: 1fr;
    }

    .social-caption-tool .sct-results-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    .social-caption-tool *,
    .social-caption-tool *::before,
    .social-caption-tool *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}