/**
 * FFLP New Listing Form — Complete Styles
 * Multi-step wizard, plan cards, power-ups, responsive
 * @since 3.9.0
 */

/* ═══════════════════════════════════════════════
   CSS VARIABLES
   ═══════════════════════════════════════════════ */
.fflp-nlf {
    --nlf-primary: #4f46e5;
    --nlf-primary-hover: #4338ca;
    --nlf-primary-light: #eef2ff;
    --nlf-success: #16a34a;
    --nlf-success-light: #f0fdf4;
    --nlf-danger: #dc2626;
    --nlf-danger-light: #fef2f2;
    --nlf-warning: #f59e0b;
    --nlf-text: #1e293b;
    --nlf-text-muted: #64748b;
    --nlf-text-light: #94a3b8;
    --nlf-border: #e2e8f0;
    --nlf-border-focus: #4f46e5;
    --nlf-bg: #ffffff;
    --nlf-bg-subtle: #f8fafc;
    --nlf-bg-hover: #f1f5f9;
    --nlf-radius: 8px;
    --nlf-radius-lg: 12px;
    --nlf-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --nlf-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    --nlf-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    --nlf-transition: .2s ease;
    --nlf-max-width: 720px;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--nlf-text);
    line-height: 1.5;
    max-width: var(--nlf-max-width);
    margin: 0 auto;
    padding: 0 16px;
}

.fflp-nlf *, .fflp-nlf *::before, .fflp-nlf *::after {
    box-sizing: border-box;
}

/* ═══════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════ */
.fflp-nlf__progress {
    margin-bottom: 32px;
}

.fflp-nlf__progress-bar {
    height: 4px;
    background: var(--nlf-border);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 16px;
}

.fflp-nlf__progress-fill {
    height: 100%;
    background: var(--nlf-primary);
    border-radius: 2px;
    transition: width .4s ease;
}

.fflp-nlf__steps {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.fflp-nlf__step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    flex: 1;
    transition: var(--nlf-transition);
}

.fflp-nlf__step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--nlf-bg-subtle);
    border: 2px solid var(--nlf-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--nlf-text-muted);
    transition: var(--nlf-transition);
}

.fflp-nlf__step-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--nlf-text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: var(--nlf-transition);
}

.fflp-nlf__step-dot.is-active .fflp-nlf__step-num {
    background: var(--nlf-primary);
    border-color: var(--nlf-primary);
    color: #fff;
}

.fflp-nlf__step-dot.is-active .fflp-nlf__step-label {
    color: var(--nlf-primary);
}

.fflp-nlf__step-dot.is-complete .fflp-nlf__step-num {
    background: var(--nlf-success);
    border-color: var(--nlf-success);
    color: #fff;
}

.fflp-nlf__step-dot.is-complete .fflp-nlf__step-label {
    color: var(--nlf-success);
}

.fflp-nlf__step-dot:hover .fflp-nlf__step-num {
    border-color: var(--nlf-primary);
}

/* ═══════════════════════════════════════════════
   PANELS (STEPS)
   ═══════════════════════════════════════════════ */
.fflp-nlf__panel {
    display: none;
    animation: fflpFadeIn .3s ease;
}

.fflp-nlf__panel.is-active {
    display: block;
}

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

.fflp-nlf__panel-header {
    margin-bottom: 24px;
}

.fflp-nlf__panel-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--nlf-text);
}

.fflp-nlf__panel-sub {
    font-size: 15px;
    color: var(--nlf-text-muted);
    margin: 0;
}

/* ═══════════════════════════════════════════════
   FIELDS
   ═══════════════════════════════════════════════ */
.fflp-nlf__field {
    margin-bottom: 20px;
}

.fflp-nlf__field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--nlf-text);
}

.fflp-nlf__field input[type="text"],
.fflp-nlf__field input[type="email"],
.fflp-nlf__field input[type="tel"],
.fflp-nlf__field input[type="url"],
.fflp-nlf__field input[type="number"],
.fflp-nlf__field select,
.fflp-nlf__field textarea {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--nlf-text);
    background: var(--nlf-bg);
    border: 1.5px solid var(--nlf-border);
    border-radius: var(--nlf-radius);
    transition: border-color var(--nlf-transition), box-shadow var(--nlf-transition);
    -webkit-appearance: none;
    appearance: none;
}

.fflp-nlf__field input:focus,
.fflp-nlf__field select:focus,
.fflp-nlf__field textarea:focus {
    outline: none;
    border-color: var(--nlf-border-focus);
    box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}

.fflp-nlf__field input::placeholder,
.fflp-nlf__field textarea::placeholder {
    color: var(--nlf-text-light);
}

.fflp-nlf__field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2364748b' d='M4.293 5.293a1 1 0 011.414 0L8 7.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.fflp-nlf__field textarea {
    resize: vertical;
    min-height: 100px;
}

.fflp-req {
    color: var(--nlf-danger);
    font-weight: 700;
}

.fflp-optional {
    color: var(--nlf-text-light);
    font-weight: 400;
    font-size: 13px;
}

.fflp-nlf__help {
    font-size: 13px;
    color: var(--nlf-text-muted);
    margin: 6px 0 0;
}

.fflp-nlf__char-count {
    font-variant-numeric: tabular-nums;
}

/* Field errors */
.fflp-nlf__error {
    font-size: 13px;
    color: var(--nlf-danger);
    margin-top: 4px;
    min-height: 0;
}

.fflp-nlf__error:empty {
    display: none;
}

.fflp-nlf__field.has-error input,
.fflp-nlf__field.has-error select,
.fflp-nlf__field.has-error textarea {
    border-color: var(--nlf-danger);
}

/* Row layouts */
.fflp-nlf__row {
    display: flex;
    gap: 16px;
    margin-bottom: 0;
}

.fflp-nlf__field--half {
    flex: 1;
    min-width: 0;
}

.fflp-nlf__field--third {
    flex: 1;
    min-width: 0;
}

/* ═══════════════════════════════════════════════
   CHECKBOX / RADIO ITEMS
   ═══════════════════════════════════════════════ */
.fflp-nlf__checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.fflp-nlf__checkbox-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fflp-nlf__checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--nlf-bg-subtle);
    border: 1.5px solid var(--nlf-border);
    border-radius: var(--nlf-radius);
    cursor: pointer;
    transition: var(--nlf-transition);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.fflp-nlf__checkbox-item:hover {
    border-color: var(--nlf-primary);
    background: var(--nlf-primary-light);
}

.fflp-nlf__checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--nlf-primary);
}

/* Privacy items — subtle lock icon style */
.fflp-nlf__privacy-field {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--nlf-border);
}

.fflp-nlf__privacy-item {
    background: var(--nlf-bg);
}

/* ═══════════════════════════════════════════════
   BUSINESS HOURS
   ═══════════════════════════════════════════════ */
.fflp-nlf__hours-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fflp-nlf__hours-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--nlf-bg-subtle);
    border: 1.5px solid var(--nlf-border);
    border-radius: var(--nlf-radius);
}

.fflp-nlf__hours-day {
    min-width: 140px;
}

.fflp-nlf__hours-day .fflp-nlf__checkbox-item {
    background: transparent;
    border: none;
    padding: 0;
}

.fflp-nlf__hours-times {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.fflp-nlf__hours-select {
    padding: 6px 10px;
    font-size: 14px;
    border: 1.5px solid var(--nlf-border);
    border-radius: 6px;
    background: var(--nlf-bg);
    color: var(--nlf-text);
    min-width: 120px;
    transition: var(--nlf-transition);
}

.fflp-nlf__hours-select:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.fflp-nlf__hours-select:focus {
    outline: none;
    border-color: var(--nlf-border-focus);
}

.fflp-nlf__hours-sep {
    font-size: 13px;
    color: var(--nlf-text-muted);
    flex-shrink: 0;
}

.fflp-nlf__hours-helpers {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.fflp-nlf__link-btn {
    background: none;
    border: none;
    color: var(--nlf-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.fflp-nlf__link-btn:hover {
    color: var(--nlf-primary-hover);
}

/* ═══════════════════════════════════════════════
   SOCIAL MEDIA
   ═══════════════════════════════════════════════ */
.fflp-nlf__social-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fflp-nlf__social-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fflp-nlf__social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--nlf-bg-subtle);
    color: var(--nlf-text-muted);
    flex-shrink: 0;
    font-size: 16px;
}

.fflp-nlf__social-input {
    flex: 1;
    padding: 8px 12px;
    font-size: 14px;
    border: 1.5px solid var(--nlf-border);
    border-radius: var(--nlf-radius);
    background: var(--nlf-bg);
    color: var(--nlf-text);
    transition: var(--nlf-transition);
}

.fflp-nlf__social-input:focus {
    outline: none;
    border-color: var(--nlf-border-focus);
    box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}

.fflp-nlf__social-input::placeholder {
    color: var(--nlf-text-light);
}

/* ═══════════════════════════════════════════════
   UPLOAD ZONES (Logo / Gallery)
   ═══════════════════════════════════════════════ */
.fflp-nlf__upload-zone {
    position: relative;
    border: 2px dashed var(--nlf-border);
    border-radius: var(--nlf-radius-lg);
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: var(--nlf-transition);
    background: var(--nlf-bg-subtle);
}

.fflp-nlf__upload-zone:hover,
.fflp-nlf__upload-zone.is-dragover {
    border-color: var(--nlf-primary);
    background: var(--nlf-primary-light);
}

.fflp-nlf__upload-placeholder {
    color: var(--nlf-text-muted);
}

.fflp-nlf__upload-placeholder svg {
    margin-bottom: 8px;
    opacity: .5;
}

.fflp-nlf__upload-placeholder p {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 500;
}

.fflp-nlf__upload-hint {
    font-size: 13px;
    color: var(--nlf-text-light);
}

.fflp-nlf__upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.fflp-nlf__upload-preview {
    position: relative;
    display: inline-block;
}

.fflp-nlf__upload-preview img {
    max-width: 200px;
    max-height: 200px;
    border-radius: var(--nlf-radius);
    object-fit: cover;
}

.fflp-nlf__upload-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--nlf-danger);
    color: #fff;
    border: 2px solid #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--nlf-shadow);
}

/* Gallery grid */
.fflp-nlf__gallery-zone {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.fflp-nlf__gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.fflp-nlf__gallery-thumb {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: var(--nlf-radius);
    overflow: hidden;
    border: 2px solid var(--nlf-border);
}

.fflp-nlf__gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fflp-nlf__gallery-thumb .fflp-nlf__upload-remove {
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    font-size: 13px;
}

.fflp-nlf__gallery-add {
    position: relative;
    width: 100px;
    height: 100px;
    border: 2px dashed var(--nlf-border);
    border-radius: var(--nlf-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    color: var(--nlf-text-muted);
    transition: var(--nlf-transition);
    font-size: 12px;
    font-weight: 500;
}

.fflp-nlf__gallery-add:hover {
    border-color: var(--nlf-primary);
    color: var(--nlf-primary);
    background: var(--nlf-primary-light);
}

.fflp-nlf__gallery-add .fflp-nlf__upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════
   BILLING TOGGLE
   ═══════════════════════════════════════════════ */
.fflp-nlf__billing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 28px;
    padding: 16px;
    background: var(--nlf-bg-subtle);
    border-radius: var(--nlf-radius-lg);
    border: 1px solid var(--nlf-border);
}

.fflp-nlf__billing-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--nlf-text-muted);
    transition: var(--nlf-transition);
}

.fflp-nlf__billing-label.is-active {
    color: var(--nlf-text);
}

.fflp-nlf__billing-save {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    background: var(--nlf-success-light);
    color: var(--nlf-success);
    border-radius: 20px;
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* Toggle switch */
.fflp-nlf__toggle-switch {
    position: relative;
    width: 48px;
    height: 26px;
    cursor: pointer;
    display: inline-block;
}

.fflp-nlf__toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.fflp-nlf__toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--nlf-text-muted);
    border-radius: 26px;
    transition: var(--nlf-transition);
}

.fflp-nlf__toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: var(--nlf-transition);
}

.fflp-nlf__toggle-switch input:checked + .fflp-nlf__toggle-slider {
    background: var(--nlf-primary);
}

.fflp-nlf__toggle-switch input:checked + .fflp-nlf__toggle-slider::before {
    transform: translateX(22px);
}

/* ═══════════════════════════════════════════════
   PLAN CARDS
   ═══════════════════════════════════════════════ */
.fflp-nlf__plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.fflp-nlf__plan-card {
    position: relative;
    background: var(--nlf-bg);
    border: 2px solid var(--plan-border, var(--nlf-border));
    border-radius: var(--nlf-radius-lg);
    padding: 24px 20px;
    cursor: pointer;
    transition: all var(--nlf-transition);
    display: flex;
    flex-direction: column;
}

.fflp-nlf__plan-card:hover {
    border-color: var(--plan-color, var(--nlf-primary));
    box-shadow: var(--nlf-shadow-md);
    transform: translateY(-2px);
}

.fflp-nlf__plan-card.is-selected {
    border-color: var(--plan-color, var(--nlf-primary));
    box-shadow: 0 0 0 3px rgba(79,70,229,.15), var(--nlf-shadow-md);
    background: var(--nlf-primary-light);
}

.fflp-nlf__plan-card--highlight {
    border-color: var(--plan-border, var(--nlf-primary));
    box-shadow: var(--nlf-shadow);
}

.fflp-nlf__plan-card--sold-out {
    opacity: .55;
    pointer-events: none;
}

/* Badge */
.fflp-nlf__plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 20px;
    background: var(--plan-color, var(--nlf-primary));
    color: #fff;
    white-space: nowrap;
    box-shadow: var(--nlf-shadow);
}

/* Plan header */
.fflp-nlf__plan-header {
    text-align: center;
    margin-bottom: 12px;
}

.fflp-nlf__plan-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--nlf-text);
}

.fflp-nlf__plan-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.fflp-nlf__price-amount {
    font-size: 28px;
    font-weight: 800;
    color: var(--plan-color, var(--nlf-text));
    line-height: 1.2;
}

.fflp-nlf__price-period {
    font-size: 15px;
    font-weight: 500;
    color: var(--nlf-text-muted);
}

.fflp-nlf__price-compare {
    font-size: 14px;
    color: var(--nlf-text-light);
}

.fflp-nlf__price-compare s {
    text-decoration: line-through;
}

.fflp-nlf__price-note {
    font-size: 12px;
    color: var(--nlf-text-muted);
    font-style: italic;
}

/* Billing toggle: show/hide monthly vs annual prices */
.fflp-nlf[data-billing="annual"] .fflp-nlf__price--monthly { display: none; }
.fflp-nlf[data-billing="annual"] .fflp-nlf__price--annual  { display: inline; }
.fflp-nlf[data-billing="monthly"] .fflp-nlf__price--monthly { display: inline; }
.fflp-nlf[data-billing="monthly"] .fflp-nlf__price--annual  { display: none; }

.fflp-nlf__plan-tagline {
    text-align: center;
    font-size: 13px;
    color: var(--nlf-text-muted);
    margin: 0 0 12px;
}

/* Feature bullets */
.fflp-nlf__plan-features {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    flex: 1;
}

.fflp-nlf__plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--nlf-text);
    padding: 4px 0;
    line-height: 1.4;
}

.fflp-nlf__plan-features li svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--nlf-success);
}

/* Slot counter */
.fflp-nlf__plan-slots {
    text-align: center;
    margin-bottom: 12px;
}

/* Select button */
.fflp-nlf__plan-select-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid var(--plan-color, var(--nlf-primary));
    border-radius: var(--nlf-radius);
    background: transparent;
    color: var(--plan-color, var(--nlf-primary));
    cursor: pointer;
    transition: var(--nlf-transition);
    margin-top: auto;
}

.fflp-nlf__plan-select-btn:hover {
    background: var(--plan-color, var(--nlf-primary));
    color: #fff;
}

.fflp-nlf__plan-card.is-selected .fflp-nlf__plan-select-btn {
    background: var(--plan-color, var(--nlf-primary));
    color: #fff;
}

.fflp-nlf__plan-select-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ═══════════════════════════════════════════════
   POWER-UPS
   ═══════════════════════════════════════════════ */
.fflp-nlf__powerups-section {
    margin-top: 8px;
    padding-top: 28px;
    border-top: 1px solid var(--nlf-border);
}

.fflp-nlf__powerups-heading {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px;
}

.fflp-nlf__powerup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.fflp-nlf__powerup-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--nlf-border);
    border-radius: var(--nlf-radius);
    background: var(--nlf-bg);
    cursor: pointer;
    transition: var(--nlf-transition);
}

.fflp-nlf__powerup-card:hover {
    border-color: var(--nlf-primary);
    background: var(--nlf-primary-light);
}

.fflp-nlf__powerup-card:has(input:checked) {
    border-color: var(--nlf-primary);
    background: var(--nlf-primary-light);
}

.fflp-nlf__powerup-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.fflp-nlf__powerup-info {
    flex: 1;
    min-width: 0;
}

.fflp-nlf__powerup-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--nlf-text);
}

.fflp-nlf__powerup-price {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--nlf-primary);
    margin-top: 2px;
}

.fflp-nlf__powerup-desc {
    display: block;
    font-size: 12px;
    color: var(--nlf-text-muted);
    margin-top: 2px;
}

.fflp-nlf__powerup-check {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--nlf-border);
    border-radius: 6px;
    color: transparent;
    transition: var(--nlf-transition);
}

.fflp-nlf__powerup-card:has(input:checked) .fflp-nlf__powerup-check {
    background: var(--nlf-primary);
    border-color: var(--nlf-primary);
    color: #fff;
}

/* ═══════════════════════════════════════════════
   COUPON
   ═══════════════════════════════════════════════ */
.fflp-nlf__coupon-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--nlf-border);
}

.fflp-nlf__coupon-row {
    display: flex;
    gap: 8px;
}

.fflp-nlf__coupon-row input {
    flex: 1;
    padding: 10px 14px;
    font-size: 15px;
    border: 1.5px solid var(--nlf-border);
    border-radius: var(--nlf-radius);
    background: var(--nlf-bg);
    color: var(--nlf-text);
}

.fflp-nlf__coupon-row input:focus {
    outline: none;
    border-color: var(--nlf-border-focus);
}

.fflp-nlf__coupon-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border: 1.5px solid var(--nlf-primary);
    border-radius: var(--nlf-radius);
    background: transparent;
    color: var(--nlf-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--nlf-transition);
}

.fflp-nlf__coupon-btn:hover {
    background: var(--nlf-primary);
    color: #fff;
}

.fflp-nlf__coupon-status {
    font-size: 13px;
    margin-top: 6px;
    min-height: 20px;
}

/* ═══════════════════════════════════════════════
   REVIEW (Step 6)
   ═══════════════════════════════════════════════ */
.fflp-nlf__review {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.fflp-nlf__review-section {
    padding: 16px 20px;
    background: var(--nlf-bg-subtle);
    border: 1px solid var(--nlf-border);
    border-radius: var(--nlf-radius);
}

.fflp-nlf__review-section h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--nlf-text);
}

.fflp-nlf__review-edit {
    background: none;
    border: none;
    color: var(--nlf-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fflp-nlf__review-edit:hover {
    color: var(--nlf-primary-hover);
}

.fflp-nlf__review-content {
    font-size: 14px;
    color: var(--nlf-text);
    line-height: 1.6;
}

.fflp-nlf__review-content dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 4px 12px;
    margin: 0;
}

.fflp-nlf__review-content dt {
    font-weight: 600;
    color: var(--nlf-text-muted);
    font-size: 13px;
}

.fflp-nlf__review-content dd {
    margin: 0;
}

/* ═══════════════════════════════════════════════
   ORDER TOTAL
   ═══════════════════════════════════════════════ */
.fflp-nlf__order-total {
    padding: 20px 24px;
    background: var(--nlf-bg-subtle);
    border: 2px solid var(--nlf-border);
    border-radius: var(--nlf-radius-lg);
    margin-bottom: 24px;
}

.fflp-nlf__total-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 15px;
}

.fflp-nlf__total-divider {
    border: none;
    border-top: 1px solid var(--nlf-border);
    margin: 8px 0;
}

.fflp-nlf__total-line--grand {
    font-size: 18px;
    padding-top: 8px;
}

.fflp-nlf__discount-amount {
    color: var(--nlf-success);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════
   TERMS
   ═══════════════════════════════════════════════ */
.fflp-nlf__terms {
    background: transparent;
    border: none;
    padding: 0;
}

.fflp-nlf__terms a {
    color: var(--nlf-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fflp-nlf__terms a:hover {
    color: var(--nlf-primary-hover);
}

/* ═══════════════════════════════════════════════
   SUBMIT AREA
   ═══════════════════════════════════════════════ */
.fflp-nlf__submit-area {
    text-align: center;
    margin-top: 24px;
}

.fflp-nlf__submit-error {
    padding: 12px 16px;
    background: var(--nlf-danger-light);
    color: var(--nlf-danger);
    border-radius: var(--nlf-radius);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
}

.fflp-nlf__submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 40px;
    font-size: 17px;
    font-weight: 700;
    border: none;
    border-radius: var(--nlf-radius);
    background: var(--nlf-primary);
    color: #fff;
    cursor: pointer;
    transition: all var(--nlf-transition);
    box-shadow: var(--nlf-shadow-md);
    min-width: 240px;
}

.fflp-nlf__submit-btn:hover {
    background: var(--nlf-primary-hover);
    box-shadow: var(--nlf-shadow-lg);
    transform: translateY(-1px);
}

.fflp-nlf__submit-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

.fflp-nlf__submit-note {
    font-size: 13px;
    color: var(--nlf-text-muted);
    margin-top: 10px;
}

/* Spinner */
@keyframes fflpSpin {
    to { transform: rotate(360deg); }
}

.fflp-spin {
    animation: fflpSpin .8s linear infinite;
}

/* ═══════════════════════════════════════════════
   NAVIGATION (Prev / Next)
   ═══════════════════════════════════════════════ */
.fflp-nlf__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--nlf-border);
}

.fflp-nlf__nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--nlf-radius);
    cursor: pointer;
    transition: var(--nlf-transition);
}

.fflp-nlf__nav-btn--prev {
    background: var(--nlf-bg);
    border: 1.5px solid var(--nlf-border);
    color: var(--nlf-text-muted);
}

.fflp-nlf__nav-btn--prev:hover {
    border-color: var(--nlf-text-muted);
    color: var(--nlf-text);
}

.fflp-nlf__nav-btn--next {
    background: var(--nlf-primary);
    border: 1.5px solid var(--nlf-primary);
    color: #fff;
    margin-left: auto;
}

.fflp-nlf__nav-btn--next:hover {
    background: var(--nlf-primary-hover);
    border-color: var(--nlf-primary-hover);
}

/* ═══════════════════════════════════════════════
   SUCCESS STATE
   ═══════════════════════════════════════════════ */
.fflp-nlf__success {
    text-align: center;
    padding: 48px 24px;
    animation: fflpFadeIn .5s ease;
}

.fflp-nlf__success-icon {
    margin-bottom: 20px;
}

.fflp-nlf__success h2 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--nlf-text);
}

.fflp-nlf__success p {
    font-size: 16px;
    color: var(--nlf-text-muted);
    margin: 0 0 24px;
}

.fflp-nlf__success-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    background: var(--nlf-primary);
    color: #fff;
    border: none;
    border-radius: var(--nlf-radius);
    text-decoration: none;
    transition: var(--nlf-transition);
}

.fflp-nlf__success-btn:hover {
    background: var(--nlf-primary-hover);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .fflp-nlf {
        padding: 0 12px;
    }

    .fflp-nlf__panel-header h2 {
        font-size: 20px;
    }

    .fflp-nlf__row {
        flex-direction: column;
        gap: 0;
    }

    .fflp-nlf__field--half,
    .fflp-nlf__field--third {
        flex: none;
        width: 100%;
    }

    .fflp-nlf__step-label {
        display: none;
    }

    .fflp-nlf__step-num {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .fflp-nlf__hours-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .fflp-nlf__hours-day {
        min-width: 0;
    }

    .fflp-nlf__hours-times {
        padding-left: 26px;
    }

    .fflp-nlf__hours-select {
        min-width: 0;
        flex: 1;
    }

    .fflp-nlf__plan-grid {
        grid-template-columns: 1fr;
    }

    .fflp-nlf__powerup-grid {
        grid-template-columns: 1fr;
    }

    .fflp-nlf__checkbox-grid {
        grid-template-columns: 1fr;
    }

    .fflp-nlf__billing-toggle {
        flex-wrap: wrap;
        justify-content: center;
    }

    .fflp-nlf__submit-btn {
        width: 100%;
    }

    .fflp-nlf__nav-btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    .fflp-nlf__review-content dl {
        grid-template-columns: 1fr;
    }

    .fflp-nlf__review-content dt {
        margin-top: 6px;
    }

    .fflp-nlf__social-row {
        flex-wrap: nowrap;
    }

    .fflp-nlf__social-input {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .fflp-nlf__upload-zone {
        padding: 20px 16px;
    }

    .fflp-nlf__gallery-thumb,
    .fflp-nlf__gallery-add {
        width: 80px;
        height: 80px;
    }

    .fflp-nlf__price-amount {
        font-size: 24px;
    }

    .fflp-nlf__hours-helpers {
        flex-direction: column;
        gap: 8px;
    }
}

/* ═══════════════════════════════════════════════
   POWER-UP: INCLUDED WITH PLAN STATE
   ═══════════════════════════════════════════════ */
.fflp-nlf__powerup-card.is-included {
    pointer-events: none;
    position: relative;
    border-color: #38a169;
    border-width: 2px;
    background: linear-gradient(135deg, #f0fff4 0%, #e6ffed 100%);
    box-shadow: 0 0 0 1px rgba(56, 161, 105, 0.15);
}

.fflp-nlf__powerup-card.is-included:hover {
    border-color: #38a169;
    background: linear-gradient(135deg, #f0fff4 0%, #e6ffed 100%);
}

.fflp-nlf__powerup-card.is-included .fflp-nlf__powerup-check {
    display: none;
}

/* ── Included Badge ── */
.fflp-nlf__powerup-included-badge {
    display: none;
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #fff;
    background: linear-gradient(135deg, #38a169, #2f855a);
    padding: 3px 14px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(56, 161, 105, 0.35);
    z-index: 2;
}

.fflp-nlf__powerup-card.is-included .fflp-nlf__powerup-included-badge {
    display: inline-block;
}

/* ── Strikethrough price + "FREE" replacement ── */
.fflp-nlf__powerup-card.is-included .fflp-nlf__powerup-price {
    text-decoration: line-through;
    opacity: 0.4;
    font-size: 12px;
}

.fflp-nlf__powerup-card.is-included .fflp-nlf__powerup-price::after {
    content: '  $0 — included';
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    color: #38a169;
    opacity: 1;
    margin-left: 4px;
}

/* ── Subtle green tint on the name ── */
.fflp-nlf__powerup-card.is-included .fflp-nlf__powerup-name {
    color: #276749;
}

/* ── Description stays readable ── */
.fflp-nlf__powerup-card.is-included .fflp-nlf__powerup-desc {
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════
   TRIAL BANNER
   ═══════════════════════════════════════════════ */
.fflp-nlf__trial-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 1px solid #FCD34D;
    border-radius: var(--nlf-radius-lg, 12px);
    margin-bottom: 16px;
}

.fflp-nlf__trial-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.fflp-nlf__trial-content strong {
    display: block;
    font-size: 16px;
    color: #92400E;
    margin-bottom: 4px;
}

.fflp-nlf__trial-content p {
    margin: 0;
    font-size: 14px;
    color: #78350F;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════
   DISCOUNT NOTE (duration info under discount)
   ═══════════════════════════════════════════════ */
.fflp-nlf__discount-note {
    font-size: 12px;
    color: #6B7280;
    font-style: italic;
}

.fflp-nlf__discount-note-row {
    padding: 0 0 4px 0 !important;
}

/* ═══════════════════════════════════════════════
   AFTER-COUPON PRICING ROWS
   ═══════════════════════════════════════════════ */
.fflp-nlf__after-coupon {
    border-top: 1px dashed var(--nlf-border, #E2E8F0);
    margin-top: 8px;
    padding-top: 8px;
}

.fflp-nlf__total-line--after,
.fflp-nlf__total-line--then {
    font-size: 13px;
    color: #6B7280;
    padding: 2px 0;
}

.fflp-nlf__total-line--after span:first-child,
.fflp-nlf__total-line--then span:first-child {
    font-style: italic;
}