/**
 * Campaign Create Wizard - Page-Specific Styles
 * 
 * Clean, modern wizard layout matching influxone.com reference
 * 
 * @package    Micro-Influencer Marketplace
 * @subpackage Page CSS
 * @version    2.0.0
 */

/* ============================================
   Wizard Container Layout
   ============================================ */

.campaign-wizard-container {
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-6);
    background: var(--inzc-bg-tertiary);
}

/* ============================================
   Horizontal Stepper (Top)
   ============================================ */

.inzc-wizard-stepper-horizontal {
    background: none;
}

/* Header row: stepper + status badge side by side */
.inzc-wizard-header-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.inzc-edit-status-badge {
    flex-shrink: 0;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid currentColor;
}

.inzc-stepper-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: 800px;
}

/* Simple horizontal line connector */
.inzc-stepper-nav::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 10%;
    right: 10%;
    height: 12px;
    background: var(--inzc-border-light);
    z-index: 0;
}

.inzc-stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--inzc-spacing-2);
    cursor: pointer;
    position: relative;
    z-index: 1;
    padding: 0 var(--inzc-spacing-2);
}

.inzc-step-number {
    width: 48px;
    height: 48px;
    border-radius: var(--inzc-radius-full);
    background: var(--inzc-gray-200);
    color: var(--inzc-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--inzc-font-weight-bold);
    font-size: var(--inzc-font-size-lg);
    flex-shrink: 0;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 3px solid var(--inzc-bg-primary);
    z-index: 1;
}

.inzc-stepper-step.active .inzc-step-number {
    background: linear-gradient(135deg, var(--inzc-primary) 0%, #8b5cf6 100%);
    color: var(--inzc-bg-primary);
    transform: scale(1.1);
    box-shadow: rgba(99, 102, 241, 0.4) 0px 4px 12px;
    animation: 2s ease-in-out infinite pulse-glow;
}

.inzc-stepper-step.completed .inzc-step-number {
    background: linear-gradient(135deg, var(--inzc-success) 0%, #059669 100%);
    color: var(--inzc-bg-primary);
    box-shadow: rgba(16, 185, 129, 0.4) 0px 4px 12px;
}

.inzc-step-content {
    text-align: center;
}

.inzc-step-title {
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-medium);
    color: var(--inzc-text-secondary);
    white-space: nowrap;
}

.inzc-stepper-step.active .inzc-step-title {
    color: var(--inzc-primary);
    font-weight: var(--inzc-font-weight-semibold);
}

.inzc-step-desc {
    display: none;
}

/* ============================================
   Wizard Body (Main + Sidebar)
   ============================================ */

.inzc-wizard-body {
    display: flex;
    gap: var(--inzc-spacing-6);
}

/* ============================================
   Main Content Area
   ============================================ */

.inzc-wizard-content {
    flex: 1;
    min-width: 0;
    /* Prevent flex overflow */
}

/* ============================================
   Right Sidebar
   ============================================ */

.inzc-wizard-sidebar {
    width: 320px;
    padding: var(--inzc-spacing-6);
    position: sticky;
    top: var(--inzc-spacing-6);
    align-self: flex-start;
}



.inzc-campaign-form {
    padding: var(--inzc-spacing-8);
    position: relative;
    /* Establishes containing block for Select2 dropdowns, preventing admin-bar offset miscalculation */
}

/* ============================================
   Step Header
   ============================================ */

.inzc-step-header {
    margin-bottom: var(--inzc-spacing-8);
    padding-bottom: var(--inzc-spacing-6);
    border-bottom: var(--inzc-border-width-thin) solid var(--inzc-border-light);
}

.inzc-step-header h2 {
    font-size: var(--inzc-font-size-3xl);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    margin: 0 0 var(--inzc-spacing-2) 0;
}

.inzc-step-header p {
    font-size: var(--inzc-font-size-lg);
    color: var(--inzc-text-secondary);
    margin: 0;
}


/* ============================================
   Select2 — ensure dropdowns render above all
   wizard layers and never cover the trigger.
   dropdownParent:#campaignForm (position:relative) is
   used so the dropdown is appended inside the form,
   making position calculation immune to the WordPress
   admin-bar html{margin-top:32px} offset bug.
   The high z-index ensures it paints above the sticky
   sidebar and any other positioned elements.
   ============================================ */

.select2-container--open .select2-dropdown {
    z-index: 99999;
}

/* ============================================
   Form Sections (Wizard-Specific)
   ============================================ */

.inzc-form-section {
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-8);
}

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

.inzc-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--inzc-spacing-8);
    margin-bottom: var(--inzc-spacing-2);
}

.inzc-form-row:last-child {
    margin-bottom: 0;
}

/* ============================================
   Pricing Type Cards
   ============================================ */

.inzc-rate-type-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--inzc-spacing-8);
}

@media (max-width: 768px) {
    .inzc-rate-type-cards {
        grid-template-columns: 1fr;
    }
}

.inzc-rate-card {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-4);
    padding: var(--inzc-spacing-5);
    background: var(--inzc-bg-primary);
    border: var(--inzc-border-width-medium) solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-xl);
    cursor: pointer;
    transition: var(--inzc-transition-all);
}

.inzc-rate-card:hover {
    transform: translateY(-2px);
}

.inzc-rate-card.selected {
    border: 2px solid var(--inzc-success);
}

/* Validation Error State */
input[name="rateType"].error+.inzc-rate-type-cards .inzc-rate-card {
    border-color: var(--inzc-danger);
    border-width: 2px;
    border-style: solid;
}

input[name="rateType"].error+.inzc-rate-type-cards:hover .inzc-rate-card:hover {
    border-color: var(--inzc-primary);
    /* Use primary color on hover even if error */
}

.inzc-rate-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--inzc-radius-full);
}

.inzc-rate-card[data-pricing="fixed"] .inzc-rate-icon {
    background: var(--inzc-info-lighter);
}

.inzc-rate-card[data-pricing="negotiable"] .inzc-rate-icon {
    background: var(--inzc-success-lighter);
}

.inzc-rate-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.inzc-rate-card[data-pricing="fixed"] .inzc-rate-icon svg {
    stroke: var(--inzc-info);
}

.inzc-rate-card[data-pricing="negotiable"] .inzc-rate-icon svg {
    stroke: var(--inzc-success);
}

.inzc-rate-content {
    flex: 1;
}

.inzc-rate-content h6 {
    font-size: var(--inzc-font-size-lg);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    margin: 0 0 var(--inzc-spacing-1) 0;
    text-transform: none;
    letter-spacing: unset;
}

.inzc-rate-content p {
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-secondary);
    margin: 0;
}

.inzc-rate-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--inzc-transition-all);
}

.inzc-rate-card.selected .inzc-rate-check {
    opacity: 1;
}

.inzc-rate-check svg {
    width: 24px;
    height: 24px;
    color: var(--inzc-success);
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============================================
   Social Platform Cards (Horizontal Layout)
   ============================================ */

.inzc-platform-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--inzc-spacing-5);
    margin-top: var(--inzc-spacing-3);
}

.inzc-platform-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--inzc-spacing-3);
    padding: var(--inzc-spacing-5);
    background: var(--inzc-bg-primary);
    border: var(--inzc-border-width-medium) solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-lg);
    cursor: pointer;
    transition: var(--inzc-transition-all);
    position: relative;
}

.inzc-platform-card:hover {
    transform: translateY(-2px);
}

.inzc-platform-card.selected {
    border: 2px solid var(--inzc-success);
}

.inzc-platform-name {
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    text-align: center;
}

.inzc-platform-check {
    position: absolute;
    top: var(--inzc-spacing-2);
    right: var(--inzc-spacing-2);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--inzc-transition-all);
    background: var(--inzc-success);
    border-radius: var(--inzc-radius-full);
}

.inzc-platform-card.selected .inzc-platform-check {
    opacity: 1;
}

.inzc-platform-check svg {
    width: 14px;
    height: 14px;
    color: var(--inzc-bg-primary);
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Responsive: Stack platforms vertically on smaller screens */
@media (max-width: 1024px) {
    .inzc-platform-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .inzc-platform-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   Budget Fields (Dynamic)
   ============================================ */

.inzc-budget-section {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.inzc-budget-section[style*="display: none"] {
    opacity: 0;
    transform: translateY(-10px);
}

/* ============================================
   Budget Calculation Display
   ============================================ */

#calculationDisplays.hidden {
    display: none;
}

#budgetFields.hidden {
    display: none;
}

.inzc-budget-calculation {
    display: flex;
    align-items: flex-start;
    gap: var(--inzc-spacing-4);
    padding: var(--inzc-spacing-5);
    background: var(--inzc-info-lighter);
    border-left: 3px solid var(--inzc-primary);
    border-radius: var(--inzc-radius-md);
    margin-top: var(--inzc-spacing-5);
}

.calculation-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.calculation-content {
    flex: 1;
}

.calculation-label {
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-secondary);
    margin-bottom: var(--inzc-spacing-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calculation-hero-total strong {
    font-size: var(--inzc-font-size-3xl);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-primary);
    line-height: 1.2;
}

.calculation-breakdown {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
    margin-top: var(--inzc-spacing-1);
}

/* Dark mode */
[data-inzc-theme="dark"] .inzc-budget-calculation {
    background: rgba(59, 130, 246, 0.1);
    border-left-color: var(--inzc-primary);
}

[data-inzc-theme="dark"] .calculation-formula strong {
    background: rgba(59, 130, 246, 0.2);
}

[data-inzc-theme="dark"] .inzc-deliverable-remove,
[data-inzc-theme="dark"] .inzc-quantity-btn {
    background: var(--inzc-bg-secondary);
}

/* ============================================
   Step Actions
   ============================================ */

.inzc-step-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    align-items: center;
    padding-top: var(--inzc-spacing-6);
    border-top: var(--inzc-border-width-thin) solid var(--inzc-border-light);
    margin-top: var(--inzc-spacing-8);
}

/* Enhanced Wizard Buttons */
.inzc-btn-wizard-primary {
    background: linear-gradient(135deg, var(--inzc-primary) 0%, var(--inzc-primary-dark) 100%);
    border: none;
    padding-left: 2rem;
    padding-right: 2rem;
    position: relative;
    overflow: hidden;
}

.inzc-btn-wizard-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.5), 0 4px 6px -2px rgba(99, 102, 241, 0.3);
}

.inzc-btn-wizard-primary:active {
    transform: translateY(0);
}

/* Enhanced Arrow Icon */
.inzc-btn-arrow {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.inzc-btn-wizard-primary:hover .inzc-btn-arrow {
    transform: translateX(4px);
}

/* Rocket Icon */
.inzc-btn-rocket {
    font-size: 1.25em;
    margin-right: 0.5rem;
    display: inline-block;
}

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

@media (max-width: 1280px) {
    .inzc-wizard-sidebar {
        width: 280px;
    }
}

@media (max-width: 1024px) {

    /* Stack sidebar below main content on tablets */
    .inzc-wizard-body {
        flex-direction: column;
    }

    .inzc-wizard-sidebar {
        width: 100%;
        position: static;
    }

    .inzc-campaign-form {
        padding: var(--inzc-spacing-6);
    }
}

@media (max-width: 768px) {

    /* Stack badge below stepper on mobile, aligned right */
    .inzc-wizard-header-row {
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }

    .inzc-wizard-header-row .inzc-wizard-stepper-horizontal {
        width: 100%;
        flex: none;
        min-width: 0;
    }

    /* Smaller badge on mobile */
    .inzc-edit-status-badge {
        padding: 3px 10px;
        font-size: 11px;
    }

    /* Make stepper more compact on mobile */
    .inzc-wizard-stepper-horizontal {
        padding: var(--inzc-spacing-4);
    }

    .inzc-stepper-nav {
        gap: var(--inzc-spacing-2);
    }

    .inzc-stepper-step {
        flex-direction: column;
        text-align: center;
        padding: var(--inzc-spacing-3);
    }

    /* Hide connector lines on mobile */
    .inzc-stepper-step:not(:last-child)::after {
        display: none;
    }

    /* Hide step descriptions on mobile */
    .inzc-step-desc {
        display: none;
    }

    .inzc-step-number {
        width: 36px;
        height: 36px;
        font-size: var(--inzc-font-size-sm);
    }

    .inzc-step-title {
        white-space: normal;
        /* Allow wrapping on mobile */
        max-width: 80px;
        /* Limit width to force two-line layout */
        font-size: var(--inzc-font-size-xs);
        /* Slightly smaller on mobile */
        line-height: 1.3;
    }

    .inzc-campaign-form {
        padding: var(--inzc-spacing-4);
    }

    .inzc-form-row {
        grid-template-columns: 1fr;
    }

    .inzc-step-actions {
        flex-direction: column-reverse;
        gap: var(--inzc-spacing-3);
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   Placeholder Text
   ============================================ */

.inzc-placeholder-text {
    padding: var(--inzc-spacing-8);
    text-align: center;
    color: var(--inzc-text-tertiary);
    font-size: var(--inzc-font-size-lg);
}

/* ============================================
   Deliverables System
   ============================================ */

/* Template Selection Grid (Hero Split) */
.inzc-template-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 Columns to fill space */
    gap: var(--inzc-spacing-8);
    margin-bottom: var(--inzc-spacing-6);
}

.inzc-template-card {
    background: var(--inzc-bg-primary);
    border: var(--inzc-border-width-medium) solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-xl);
    padding: var(--inzc-spacing-6);
    cursor: pointer;
    transition: var(--inzc-transition-all);
    position: relative;
    overflow: hidden;

    /* Horizontal Layout to fill width */
    display: flex;
    align-items: flex-start;
    gap: var(--inzc-spacing-5);
    text-align: left;
}

.inzc-template-card:hover {
    border-color: var(--inzc-primary);
    transform: translateY(calc(var(--inzc-spacing-1) * -1));
    box-shadow: var(--inzc-shadow-xs);
}

.inzc-template-card.selected {
    border-color: var(--inzc-primary);
    background: var(--inzc-primary-lighter);
    box-shadow: 0 0 0 var(--inzc-spacing-1) var(--inzc-primary-lighter);
}

.inzc-template-icon {
    font-size: var(--inzc-font-size-4xl);
    flex-shrink: 0;
    margin: 0;

    /* Icon Container Styling */
    width: var(--inzc-spacing-16);
    height: var(--inzc-spacing-16);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--inzc-bg-secondary);
    border-radius: var(--inzc-radius-lg);
}

/* Content Container */
.inzc-template-content {
    flex: 1;
}

.inzc-template-name {
    font-size: var(--inzc-font-size-xl);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-text-primary);
    margin-bottom: var(--inzc-spacing-2);
}

.inzc-template-description {
    font-size: var(--inzc-font-size-md);
    color: var(--inzc-text-secondary);
    margin-bottom: var(--inzc-spacing-4);
    line-height: var(--inzc-line-height-normal);
}

.inzc-template-use-case {
    display: inline-block;
    font-size: var(--inzc-font-size-xs);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-primary);
    padding: var(--inzc-spacing-1) var(--inzc-spacing-3);
    background: var(--inzc-primary-lighter);
    border-radius: var(--inzc-radius-full);
    margin-bottom: var(--inzc-spacing-3);
    text-transform: uppercase;
    letter-spacing: var(--inzc-letter-spacing-wide);
}

.inzc-template-deliverables-preview {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-tertiary);
    margin-top: auto;
    padding-top: var(--inzc-spacing-3);
    border-top: var(--inzc-border-width-thin) dashed var(--inzc-border-light);
}

.inzc-template-deliverables-preview span {
    display: block;
    margin-bottom: var(--inzc-spacing-1);
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
}

.inzc-template-deliverables-preview span::before {
    content: "✓";
    color: var(--inzc-success);
    font-weight: bold;
}

/* Skip Templates Button */
.inzc-skip-templates {
    margin-top: var(--inzc-spacing-4);
    padding-top: var(--inzc-spacing-4);
    border-top: var(--inzc-border-width-thin) solid var(--inzc-border-light);
    text-align: center;
}

.inzc-skip-templates-btn {
    color: var(--inzc-text-secondary);
    text-decoration: none;
    font-size: var(--inzc-font-size-sm);
    transition: var(--inzc-transition-colors);
}

.inzc-skip-templates-btn:hover {
    color: var(--inzc-primary);
}

/* Deliverable Editor */
.inzc-deliverable-editor {
    background: var(--inzc-bg-primary);
    border: var(--inzc-border-width-medium) solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-lg);
    padding: var(--inzc-spacing-6);
}



.inzc-template-card.error {
    border-color: var(--inzc-danger);
}

.inzc-deliverable-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--inzc-spacing-4);
    padding-bottom: var(--inzc-spacing-4);
    border-bottom: var(--inzc-border-width-thin) solid var(--inzc-border-light);
}

.inzc-deliverable-editor-title {
    font-size: var(--inzc-font-size-xl);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    margin: 0;
}

.inzc-template-badge {
    font-size: var(--inzc-font-size-xs);
    padding: var(--inzc-spacing-1) var(--inzc-spacing-3);
    background: linear-gradient(135deg, var(--inzc-primary) 0%, var(--inzc-secondary) 100%);
    color: var(--inzc-bg-primary);
    border-radius: var(--inzc-radius-2xl);
    font-weight: var(--inzc-font-weight-medium);
}

@media (max-width: 768px) {
    .inzc-template-badge {
        display: none;
    }
}

.inzc-deliverable-list {
    margin-bottom: var(--inzc-spacing-5);
}

/* Individual Deliverable Item */
.inzc-deliverable-item {
    display: grid;
    grid-template-columns: 2fr 180px 200px 40px;
    gap: var(--inzc-spacing-4);
    align-items: center;
    padding: var(--inzc-spacing-4);
    background: var(--inzc-bg-secondary);
    border: var(--inzc-border-width-thin) solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-lg);
    margin-bottom: var(--inzc-spacing-3);
    transition: background 0.2s;
}

.inzc-deliverable-item:hover {
    background: var(--inzc-bg-tertiary);
}

.inzc-deliverable-name {
    font-weight: var(--inzc-font-weight-medium);
    color: var(--inzc-text-primary);
    font-size: var(--inzc-font-size-base);
}

/* Quantity Stepper */
.inzc-quantity-stepper {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
}

.inzc-quantity-btn {
    width: 32px;
    height: 32px;
    border: var(--inzc-border-width-thin) solid var(--inzc-border-medium);
    background: var(--inzc-bg-primary);
    border-radius: var(--inzc-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--inzc-transition-fast);
    color: var(--inzc-text-secondary);
    font-weight: var(--inzc-font-weight-semibold);
}

.inzc-quantity-btn:hover:not(:disabled) {
    border-color: var(--inzc-primary);
    color: var(--inzc-primary);
    background: var(--inzc-primary-lighter);
}

.inzc-quantity-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.inzc-quantity-input {
    width: var(--inzc-spacing-12);
    height: var(--inzc-spacing-8);
    text-align: center;
    background: var(--inzc-bg-primary);
    border: var(--inzc-border-width-thin) solid var(--inzc-border-medium);
    border-radius: var(--inzc-radius-md);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
}

.inzc-quantity-input:focus {
    border-color: var(--inzc-primary);
    outline: none;
}

/* Benchmark Indicator */
.inzc-benchmark-indicator {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-tertiary);
}

.inzc-benchmark-icon {
    font-size: var(--inzc-font-size-base);
}

.inzc-benchmark-text {
    white-space: nowrap;
}

/* Remove Button */
.inzc-deliverable-remove {
    width: var(--inzc-spacing-8);
    height: var(--inzc-spacing-8);
    border: var(--inzc-border-width-thin) solid var(--inzc-border-light);
    background: var(--inzc-bg-primary);
    border-radius: var(--inzc-radius-md);
    padding: 0;
    /* Ensure icon centering */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--inzc-transition-fast);
    color: var(--inzc-text-secondary);
}

.inzc-deliverable-remove:hover {
    border-color: var(--inzc-danger);
    color: var(--inzc-danger);
    background: var(--inzc-danger-lighter);
}

/* Add More Deliverables */
.inzc-add-deliverable {
    margin-top: var(--inzc-spacing-4);
}

.inzc-add-deliverable-btn {
    width: 100%;
    padding: var(--inzc-spacing-3) var(--inzc-spacing-4);
    border: var(--inzc-border-width-medium) dashed var(--inzc-border-medium);
    background: transparent;
    border-radius: var(--inzc-radius-lg);
    color: var(--inzc-text-secondary);
    font-weight: var(--inzc-font-weight-medium);
    cursor: pointer;
    transition: var(--inzc-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--inzc-spacing-2);
}

.inzc-add-deliverable-btn:hover {
    border-color: var(--inzc-primary);
    border-style: solid;
    color: var(--inzc-primary);
    background: var(--inzc-primary-lighter);
}

/* Popularity Stars */
.inzc-popularity-stars {
    color: var(--inzc-warning);
    font-size: var(--inzc-font-size-sm);
}

/* Guideline Tip */
.inzc-deliverable-tip {
    background: var(--inzc-info-lightest);
    border-left: var(--inzc-spacing-1) solid var(--inzc-primary);
    padding: var(--inzc-spacing-4);
    border-radius: var(--inzc-radius-lg);
    margin-top: var(--inzc-spacing-5);
}

.inzc-deliverable-tip-title {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    margin-bottom: var(--inzc-spacing-2);
}

.inzc-deliverable-tip-text {
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-primary);
    line-height: 1.6;
    margin: 0;
}

/* Warning */
.inzc-deliverable-warning {
    background: var(--inzc-warning-lightest);
    border-left: var(--inzc-spacing-1) solid var(--inzc-warning);
    padding: var(--inzc-spacing-4);
    border-radius: var(--inzc-radius-lg);
    margin-top: var(--inzc-spacing-4);
}

.inzc-deliverable-warning-title {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-warning-dark);
    margin-bottom: var(--inzc-spacing-2);
}

.inzc-deliverable-warning-text {
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-primary);
    margin: 0;
}

/* Dark Mode */
[data-inzc-theme="dark"] .inzc-template-card {
    background: var(--inzc-bg-secondary);
    border-color: var(--inzc-border-light);
}

[data-inzc-theme="dark"] .inzc-template-card.selected {
    background: var(--inzc-bg-tertiary);
}

[data-inzc-theme="dark"] .inzc-deliverable-editor {
    background: var(--inzc-bg-secondary);
    border-color: var(--inzc-border-light);
}

[data-inzc-theme="dark"] .inzc-deliverable-item {
    background: var(--inzc-bg-light);
    border-color: var(--inzc-border-light);
}

/* Dark mode for quantity input */
[data-inzc-theme="dark"] .inzc-quantity-input {
    background: var(--inzc-bg-secondary);
    border: var(--inzc-border-width-medium) solid var(--inzc-border-light);
}

/* Responsive */
@media (max-width: 1280px) {
    .inzc-template-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .inzc-template-grid {
        grid-template-columns: 1fr;
    }

    .inzc-deliverable-item {
        grid-template-columns: 1fr auto;
        gap: var(--inzc-spacing-3);
    }

    .inzc-benchmark-indicator {
        order: -1;
        grid-column: 1 / -1;
        /* Full width row */
    }

    .inzc-deliverable-name {
        grid-column: 1 / -1;
        /* Full width row */
    }

    .inzc-quantity-stepper {
        grid-column: 1;
    }

    .inzc-deliverable-remove {
        grid-column: 2;
        justify-self: end;
        width: var(--inzc-spacing-8);
        /* Restore fixed width */
    }
}

/* ============================================
   Media Library Upload
   ============================================ */

.inzc-media-upload-area {
    border: 2px dashed var(--inzc-border-medium);
    border-radius: var(--inzc-radius-xl);
    padding: var(--inzc-spacing-8);
    text-align: center;
    background: var(--inzc-bg-secondary);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    margin-bottom: var(--inzc-spacing-4);
}

.inzc-media-upload-area:hover {
    border-color: var(--inzc-primary);
    background: rgba(115, 103, 240, 0.05);
}

.inzc-media-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--inzc-spacing-3);
    pointer-events: none;
    /* Let clicks pass to container */
}

.inzc-media-upload-icon {
    width: 48px;
    height: 48px;
    background: var(--inzc-bg-primary);
    border-radius: var(--inzc-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--inzc-primary);
    box-shadow: var(--inzc-shadow-sm);
    margin-bottom: var(--inzc-spacing-2);
}

.inzc-media-upload-title {
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-medium);
    color: var(--inzc-text-primary);
}

.inzc-media-upload-subtitle {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-tertiary);
}

/* ============================================
   Media Library Accordion (Redesign)
   ============================================ */

.inzc-media-accordion {
    background: var(--inzc-gray-100);
    border-radius: var(--inzc-radius-lg);
    margin-bottom: var(--inzc-spacing-6);
    overflow: hidden;
    transition: var(--inzc-transition-all);
}

.inzc-media-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--inzc-spacing-4) var(--inzc-spacing-5);
    cursor: pointer;
    user-select: none;
}

.inzc-accordion-title {
    font-weight: var(--inzc-font-weight-medium);
    color: var(--inzc-text-primary);
    font-size: var(--inzc-font-size-lg);
}

.inzc-accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--inzc-transition-transform);
    color: var(--inzc-text-primary);
}

.inzc-media-accordion.active .inzc-accordion-icon {
    transform: rotate(45deg);
}

.inzc-media-accordion-content {
    padding: 0 var(--inzc-spacing-5) var(--inzc-spacing-5) var(--inzc-spacing-5);
}

.inzc-form-label-bold {
    display: block;
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    margin-bottom: var(--inzc-spacing-2);
    font-size: var(--inzc-font-size-base);
}

/* Upload Zone Styles */
.inzc-upload-zone {
    background: var(--inzc-bg-accent);
    border: var(--inzc-border-width-medium) dashed var(--inzc-gray-200);
    border-radius: var(--inzc-radius-lg);
    padding: var(--inzc-spacing-6);
    text-align: center;
    transition: var(--inzc-transition-all);
    cursor: pointer;
}

.inzc-upload-zone:hover,
.inzc-upload-zone.dragging {
    border-color: var(--inzc-gray-300);
    background: var(--inzc-gray-100);
}

.inzc-upload-text {
    color: var(--inzc-text-secondary);
    font-size: var(--inzc-font-size-base);
    margin: 0;
    line-height: var(--inzc-line-height-normal);
}

.inzc-upload-link {
    color: var(--inzc-primary);
    text-decoration: none;
    font-weight: var(--inzc-font-weight-medium);
}

.inzc-upload-link:hover {
    text-decoration: underline;
}


/* Preview Grid (reusing existing styles but adjusting margin) */
.inzc-media-preview-grid {
    margin-top: var(--inzc-spacing-4);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--inzc-spacing-3);
}

.inzc-media-preview-item {
    aspect-ratio: 1;
    border-radius: var(--inzc-radius-md);
    overflow: hidden;
    position: relative;
    border: var(--inzc-border-width-medium) solid var(--inzc-border-light);
}

.inzc-video-preview iframe {
    width: 100%;
    border-radius: var(--inzc-radius-lg);
    margin-top: var(--inzc-spacing-3);
    aspect-ratio: 16/9;
}

/* ============================================
   Add Deliverable (Progressive Disclosure)
   ============================================ */
.inzc-add-deliverable-wrapper {
    margin-top: var(--inzc-spacing-4);
}

.inzc-btn-text-action {
    background: none;
    border: none;
    padding: 0;
    color: var(--inzc-primary);
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    transition: var(--inzc-transition-all);
}

.inzc-btn-text-action:hover {
    color: var(--inzc-primary-dark);
    text-decoration: underline;
}

.inzc-add-deliverable-container {
    margin-top: var(--inzc-spacing-3);
    /* Hidden by default via inline style in HTML */
}

/* Info Icon Tooltips (Custom CSS Implementation) */
.inzc-info-icon {
    display: inline-block;
    margin-left: var(--inzc-spacing-2);
    color: var(--inzc-text-tertiary);
    cursor: help;
    font-size: 85%;
    position: relative;
    top: -1px;
    transition: color 0.2s;
}

.inzc-info-icon:hover {
    color: var(--inzc-primary);
}

/* Tooltip Arrow */
.inzc-info-icon[data-tooltip]:hover::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1a1a;
    margin-bottom: 4px;
    z-index: 100;
}

/* Tooltip Bubble */
.inzc-info-icon[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: 250px;
    background: #1a1a1a;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    font-weight: normal;
    text-align: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 99;
    pointer-events: none;
    white-space: normal;
}

/* Smart Positioning Classes (Applied by JS) */

/* Align Left: Start from left edge, extend right */
.inzc-info-icon.inzc-tooltip-align-left[data-tooltip]:hover::after {
    left: 0;
    transform: translateX(0) translateY(-10px);
    text-align: left;
}

.inzc-info-icon.inzc-tooltip-align-left[data-tooltip]:hover::before {
    left: 6px;
    transform: translateX(0);
}

/* Align Right: Start from right edge, extend left */
.inzc-info-icon.inzc-tooltip-align-right[data-tooltip]:hover::after {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(-10px);
    text-align: left;
}

.inzc-info-icon.inzc-tooltip-align-right[data-tooltip]:hover::before {
    left: auto;
    right: 6px;
    transform: translateX(0);
}

/* ============================================
   Step 3: Campaign Review (Simplified)
   ============================================ */

.inzc-review-container {
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-8);
    /* Spacing between groups */
    max-width: 800px;
    margin: 0 0 var(--inzc-spacing-8) 0;
    /* Center content if wide */
}

/* Review Groups (Sections) */
.inzc-review-group {
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-4);
}

.inzc-review-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--inzc-spacing-2);
    border-bottom: 2px solid var(--inzc-border-light);
}

.inzc-review-group-header h3 {
    margin: 0;
    font-size: var(--inzc-font-size-lg);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
}

/* Edit Text Button */
.inzc-btn-text-action {
    background: none;
    border: none;
    padding: 0;
    color: var(--inzc-primary);
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-medium);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.2s;
}

.inzc-btn-text-action:hover {
    color: var(--inzc-primary-dark);
}

/* Review List & Rows */
.inzc-review-list {
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-3);
}

.inzc-review-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    /* Align text baselines */
    padding: var(--inzc-spacing-1) 0;
}

.inzc-review-label {
    color: var(--inzc-text-secondary);
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-normal);
    flex: 1;
}

.inzc-review-value {
    color: var(--inzc-text-primary);
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-medium);
    text-align: right;
    flex: 1;
    word-break: break-word;
    /* Prevent long text overflow */
}

.inzc-review-value:empty::before {
    content: '—';
    color: var(--inzc-text-tertiary);
}

/* Highlight Row (Total Budget) */
.inzc-review-row-highlight {
    margin-top: var(--inzc-spacing-2);
    padding-top: var(--inzc-spacing-4);
    border-top: 1px dashed var(--inzc-border-light);
}

.inzc-review-row-highlight .inzc-review-label {
    font-weight: var(--inzc-font-weight-medium);
    color: var(--inzc-text-primary);
}

.inzc-text-primary-bold {
    color: var(--inzc-primary);
    font-weight: var(--inzc-font-weight-bold);
    font-size: var(--inzc-font-size-lg);
}

/* Responsive */
@media (max-width: 600px) {
    .inzc-review-row {
        flex-direction: column;
        gap: var(--inzc-spacing-1);
    }

    .inzc-review-value {
        text-align: left;
    }

    .inzc-review-row-highlight {
        flex-direction: row;
        align-items: center;
    }
}

/* ============================================
   Sidebar Components (Refactored)
   ============================================ */

/* All Cards Common */
.inzc-card {
    background: var(--inzc-bg-primary);
    border: 0.8px solid var(--inzc-border-light);
}



/* Campaign Preview Card */
.inzc-card-preview {
    background: linear-gradient(135deg, var(--inzc-success) 0%, #059669 100%);
    border-radius: var(--inzc-radius-lg);
    padding: var(--inzc-spacing-6);
    color: var(--inzc-bg-primary);
    margin-bottom: var(--inzc-spacing-6);
    border: none;
    position: relative;
    overflow: hidden;
}

.inzc-card-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(to bottom, rgba(5, 150, 105, 0.2), rgba(6, 78, 59, 0.9)),
        url('../../images/campaign-preview-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    z-index: 0;
    pointer-events: none;
}

/* Ensure text pops against the background */
.inzc-card-preview {
    position: relative;
    z-index: 1;
    /* Ensure content is above bg */
}

.inzc-preview-label,
.inzc-preview-title,
.inzc-preview-budget,
.inzc-preview-meta-pill {
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    color: var(--inzc-white);
}

.inzc-preview-meta-pill {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.inzc-preview-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: var(--inzc-spacing-3);
}

.inzc-preview-title {
    color: var(--inzc-white);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 var(--inzc-spacing-5) 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* Standard property */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inzc-preview-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Fix: Allow items to wrap to next line if too long */
    gap: var(--inzc-spacing-2);
    /* Reduced gap slightly for better wrapping compact */
    font-size: 13px;
    margin-bottom: var(--inzc-spacing-2);
}

.inzc-preview-meta-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 10px;
    border-radius: 20px;
}

.inzc-preview-budget {
    font-size: 15px;
    font-weight: 600;
    margin-top: var(--inzc-spacing-3);
    display: inline-block;
}

/* Info Cards (Pro Tips & Did You Know) */
.inzc-info-card {
    border-radius: var(--inzc-radius-lg);
    padding: var(--inzc-spacing-5);
    margin-bottom: var(--inzc-spacing-4);
    border: 1px solid transparent;
}

/* Pro Tip - Info Blue */
#cardProTip {
    background: var(--inzc-info-lightest);
    border-color: rgba(99, 102, 241, 0.1);
}

#cardProTip .inzc-info-icon,
#cardProTip .inzc-info-title {
    color: var(--inzc-info-dark);
}

#cardProTip .inzc-info-icon {
    color: var(--inzc-info);
}

/* Did You Know - Warning Orange */
#cardDidYouKnow {
    background: var(--inzc-warning-lightest);
    border-color: transparent;
}

#cardDidYouKnow .inzc-info-icon,
#cardDidYouKnow .inzc-info-title {
    color: var(--inzc-warning);
}

.inzc-info-header {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    margin-bottom: var(--inzc-spacing-2);
}

.inzc-info-icon {
    font-size: 16px;
}

.inzc-info-title {
    font-size: 14px;
    font-weight: 700;
}

.inzc-info-content {
    font-size: 13px;
    line-height: 1.5;
    color: var(--inzc-text-primary);
    margin: 0;
}

/* Campaign Health Card */
.inzc-campaign-health-card {
    border: var(--inzc-border-width-medium) solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-lg);
    padding: var(--inzc-spacing-5);
    margin-bottom: var(--inzc-spacing-6);
}

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */

/* Container: Reset to primary background to blend with body */
[data-inzc-theme="dark"] .campaign-wizard-container {
    background: var(--inzc-bg-tertiary);
}

/* Cards: Use secondary background to stand out against primary */
[data-inzc-theme="dark"] .inzc-rate-card,
[data-inzc-theme="dark"] .inzc-platform-card,
[data-inzc-theme="dark"] .inzc-template-card {
    background: var(--inzc-bg-secondary);
}

/* ============================================
   ADMIN FEEDBACK UI (Edit Page)
   ============================================ */

/* 1. Input Error State */
.inzc-input-error,
.inzc-input-error:focus {
    border-color: var(--inzc-danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* 2. Inline Admin Note */
.inzc-admin-feedback-note {
    margin-top: var(--inzc-spacing-2);
    padding: var(--inzc-spacing-3);
    background-color: var(--inzc-danger-lighter);
    color: var(--inzc-danger-dark);
    font-size: var(--inzc-font-size-sm);
    border-radius: var(--inzc-radius-md);
    border: 1px solid rgba(239, 68, 68, 0.2);
    animation: slideDown 0.3s ease-out forwards;
}

.inzc-admin-feedback-note strong {
    font-weight: 700;
    margin-right: 4px;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. Stepper Error Dot */
.inzc-stepper-error-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background-color: var(--inzc-danger);
    color: white;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
    z-index: 10;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

/* 4. Top Alert Customization */
.inzc-admin-feedback-alert {
    border-left: 4px solid var(--inzc-danger);
    box-shadow: var(--inzc-shadow-md);
}

/* 4a. Addressed state: note shifts from danger (red) to warning (amber) */
.inzc-admin-feedback-note.inzc-feedback-note--addressed {
    background-color: var(--inzc-warning-lighter, #fffbeb);
    color: var(--inzc-warning-dark, #92400e);
    border-color: rgba(245, 158, 11, 0.3);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 4b. Addressed banner jump button: struck through and faded */
.inzc-feedback-item--done .inzc-feedback-jump-btn {
    text-decoration: line-through;
    color: var(--inzc-text-muted, #9ca3af);
    pointer-events: none;
    cursor: default;
}

.inzc-feedback-item--done::before {
    background: var(--inzc-success, #22c55e);
}

/* Dark Mode Support for Admin Feedback */
[data-inzc-theme='dark'] .inzc-input-error {
    border-color: #ef4444 !important;
    /* Ensure visibility */
}

[data-inzc-theme='dark'] .inzc-admin-feedback-note {
    background-color: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    /* Lighter red text */
    border-color: rgba(239, 68, 68, 0.3);
}

[data-inzc-theme='dark'] .inzc-admin-feedback-note.inzc-feedback-note--addressed {
    background-color: rgba(245, 158, 11, 0.12);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.3);
}

[data-inzc-theme='dark'] .inzc-stepper-error-dot {
    border-color: var(--inzc-bg-tertiary);
    /* Match stepper bg */
}

/* Campaign Preview - Dark Mode Text Override */
[data-inzc-theme="dark"] .inzc-preview-label,
[data-inzc-theme="dark"] .inzc-preview-title,
[data-inzc-theme="dark"] .inzc-preview-budget,
[data-inzc-theme="dark"] .inzc-preview-meta-pill {
    color: var(--inzc-white) !important;
}

/* ============================================================
   5. Jump-to-field links inside the admin feedback alert banner
   ============================================================ */
.inzc-feedback-fields-list {
    list-style: none;
    margin: var(--inzc-spacing-3) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--inzc-spacing-1) var(--inzc-spacing-3);
}

.inzc-feedback-fields-list li {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-1);
}

/* Bullet dot before each item */
.inzc-feedback-fields-list li::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--inzc-danger);
    flex-shrink: 0;
}

.inzc-feedback-jump-btn {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--inzc-danger-dark, #b91c1c);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    line-height: 1.4;
}

.inzc-feedback-jump-btn:hover,
.inzc-feedback-jump-btn:focus {
    color: var(--inzc-danger);
    outline: none;
}

[data-inzc-theme="dark"] .inzc-feedback-jump-btn {
    color: #fca5a5;
}

[data-inzc-theme="dark"] .inzc-feedback-jump-btn:hover,
[data-inzc-theme="dark"] .inzc-feedback-jump-btn:focus {
    color: #fecaca;
}